https://bits-ui.com/_app/immutable/chunks/CPUGxxdn.js

1import{f as C,a as n,t as p,c as r}from"./BI2tZWd8.js";import"./CspEIRAF.js";import{f as e,n as k,s as a,c as E,r as A}from"./DxBliZnO.js";import{h as l}from"./DiC8NrNs.js";import{B as zi,P as g}from"./Cc3TrqVu.js";import{P as d}from"./BBgCmvkJ.js";import{H}from"./C6gCk9DM.js";import{H as o}from"./liaaalrF.js";import{A as u}from"./DHOI_CUB.js";const ci={title:"Styling",description:"Learn how to style Bits UI components."},{title:ts,description:hs}=ci;var Oi=C("We ship almost zero styles with Bits UI by design, giving you complete flexibility when styling your components. For each component that renders an HTML element, we expose the <!> and <!> props to apply styles directly to the component.",1),ji=C("If you're using a CSS framework like <!> or <!>, simply pass the classes to the component:",1),Ri=C("Now every <!> component will have the styles applied to it.",1),qi=C("To use Svelte's scoped styles, use the <!> snippet to bring the element into your component's scope. See the <!> documentation for more information.",1),Li=C("All Bits UI components that render an element accept a style prop as either a string or an object of CSS properties. These are merged with internal styles using the <!> function.",1),Vi=C("Bits UI components may expose CSS variables that allow you to access internal component values. For example, to ensure the <!> is the same width as the anchor (by default is the <!> unless using a <!>), you can use the <!> CSS variable:",1),Gi=C(`Components that manage their mount lifecycle for animations expose transient <!> and <!> attributes on their animated
2surfaces. This is useful for popup content, overlays, and similar parts where
3you want enter and exit transitions without losing the close animation during
4unmount.`,1),Ki=C("You can combine data attributes with CSS variables to create dynamic styles based on component state. Here's how to animate the accordion content using the <!> variable and the <!> attribute:",1),Ni=C('<!> <!> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!> <figure data-rehype-pretty-code-figure="" data-metadata=""><figcaption data-rehype-pretty-code-title="" data-language="css" data-theme="Serendipity Midnight Serendipity Morning">app.css</figcaption><!></figure> <!> <figure data-rehype-pretty-code-figure="" data-metadata=""><figcaption data-rehype-pretty-code-title="" data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning">+layout.svelte</figcaption><!></figure> <!> <!> <!> <figure data-rehype-pretty-code-figure="" data-metadata=""><figcaption data-rehype-pretty-code-title="" data-language="css" data-theme="Serendipity Midnight Serendipity Morning">app.css</figcaption><!></figure> <!> <figure data-rehype-pretty-code-figure="" data-metadata=""><figcaption data-rehype-pretty-code-title="" data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning">+layout.svelte</figcaption><!></figure> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!> <figure data-rehype-pretty-code-figure="" data-metadata=""><figcaption data-rehype-pretty-code-title="" data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning">MyAccordionTrigger.svelte</figcaption><!></figure> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure>',1);function ks(ui){zi(ui,{get metadata(){return ci},children:(fi,Wi)=>{var U=Ni(),z=e(U);d(z,{children:(s,h)=>{k();var i=Oi(),t=a(e(i));l(t,()=>"<code>class</code>");var y=a(t,2);l(y,()=>"<code>style</code>"),k(),n(s,i)},$$slots:{default:!0}});var O=a(z,2);H(O,{id:"styling-approaches",children:(s,h)=>{k();var i=p("Styling Approaches");n(s,i)},$$slots:{default:!0}});var j=a(O,2);o(j,{id:"css-frameworks",children:(s,h)=>{k();var i=p("CSS Frameworks");n(s,i)},$$slots:{default:!0}});var R=a(j,2);d(R,{children:(s,h)=>{k();var i=ji(),t=a(e(i));u(t,{href:"https://tailwindcss.com/",children:(D,F)=>{k();var c=p("TailwindCSS");

4n(D,c)},$$slots:{default:!0}});var y=a(t,2);u(y,{href:"https://unocss.dev",children:(D,F)=>{k();var c=p("UnoCSS");n(D,c)},$$slots:{default:!0}}),k(),n(s,i)},$$slots:{default:!0}});var f=a(R,2),mi=E(f);g(mi,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(s,h)=>{var i=r(),t=e(i);l(t,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> lang</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"ts"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
5<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">  import </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#125;</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> from </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"bits-ui"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
6<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
7<span data-line=""> </span>
8<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Trigger</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> class</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"h-12 w-full bg-blue-500 hover:bg-blue-600"</span></span>
9<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">  ></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">Click me</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Trigger</span></span>
10<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span></code>`),n(s,i)},$$slots:{default:!0}}),A(f);var q=a(f,2);o(q,{id:"data-attributes",children:(s,h)=>{k();var i=p("Data Attributes");n(s,i)},$$slots:{default:!0}});var L=a(q,2);d(L,{children:(s,h)=>{k();var i=p("Each Bits UI component applies specific data attributes to its rendered elements. These attributes provide reliable selectors for styling across your application.");n(s,i)},$$slots:{default:!0}});var m=a(L,2),vi=a(E(m));g(vi,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"css","data-theme":"Serendipity Midnight Serendipity Morning","data-metadata":"",children:(s,h)=>{var i=r(),t=e(i);l(t,()=>`<code data-language="css" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">/*</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> Target all Accordion.Trigger components </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">*/</span></span>
11<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-accordion-trigger</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#123;</span></span>
12<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 3</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">rem</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
13<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  width</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 100</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">%</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
14<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  background-color</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">

14 #</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">3182ce</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
15<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  color</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> #</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">fff</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
16<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span></code>`),n(s,i)},$$slots:{default:!0}}),A(m);var V=a(m,2);d(V,{children:(s,h)=>{k();var i=p("Import your stylesheet in your layout component:");n(s,i)},$$slots:{default:!0}});var v=a(V,2),$i=a(E(v));g($i,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning","data-metadata":"",children:(s,h)=>{var i=r(),t=e(i);l(t,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> lang</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"ts"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
17<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">  import </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"../app.css"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
18<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">  let</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#123;</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> children </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> =</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> $</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">props</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">()</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
19<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
20<span data-line=""> </span>
21<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;@</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">render</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> children</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">()</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span></code>`),n(s,i)},$$slots:{default:!0}}),A(v);var G=a(v,2);d(G,{children:(s,h)=>{k();var i=Ri(),t=a(e(i));l(t,()=>"<code>Accordion.Trigger</code>"),k(),n(s,i)},$$slots:{default:!0}});var K=a(G,2);o(K,{id:"global-classes",children:(s,h)=>{k();var i=p("Global Classes");n(s,i)},$$slots:{default:!0}});var N=a(K,2);d(N,{children:(s,h)=>{k();var i=p("Alternatively, you can use global class names:");n(s,i)},$$slots:{default:!0}});var $=a(N,2),_i=a(E($));g(_i,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"css","data-theme":"Serendipity Midnight Serendipity Morning","data-metadata":"",children:(s,h)=>{var i=r(),t=e(i);l(t,()=>`<code data-language="css" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">accordion-trigger</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#123;</span></span>
22<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 3</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">rem</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
23<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  width</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 100</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">%</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
24<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  background-color</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">

24 #</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">3182ce</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
25<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  color</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> #</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">fff</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
26<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span></code>`),n(s,i)},$$slots:{default:!0}}),A($);var W=a($,2);d(W,{children:(s,h)=>{k();var i=p("Import your stylesheet in your layout component:");n(s,i)},$$slots:{default:!0}});var _=a(W,2),Si=a(E(_));g(Si,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning","data-metadata":"",children:(s,h)=>{var i=r(),t=e(i);l(t,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> lang</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"ts"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
27<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">  import </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"../app.css"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
28<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">  let</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#123;</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> children </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> =</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> $</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">props</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">()</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
29<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
30<span data-line=""> </span>
31<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;@</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">render</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> children</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">()</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span></code>`),n(s,i)},$$slots:{default:!0}}),A(_);var Y=a(_,2);d(Y,{children:(s,h)=>{k();var i=p("Use the global class with the component:");n(s,i)},$$slots:{default:!0}});var S=a(Y,2),Bi=E(S);g(Bi,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(s,h)=>{var i=r(),t=e(i);l(t,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> lang</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"ts"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
32<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">  import </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#125;</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> from </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"bits-ui"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
33<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
34<span data-line=""> </span>
35<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Trigger</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> class</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"accordion-trigger"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">Click me</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Trigger</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span></code>`),n(s,i)},$$slots:{default:!0}}),A(S);var J=a(S,2);o(J,{id:"scoped-styles",children:(s,h)=>{k();var i=p("Scoped Styles");n(s,i)},$$slots:{default:!0}});var Q=a(J,2);d(Q,{children:(s,h)=>{k();var i=qi(),t=a(e(i));l(t,()=>"<code>child</code>");var y=a(t,2);u(y,{href:"/docs/child-snippet",children:(D,F)=>{k();var c=p("Child Snippet");n(D,c)},$$slots:{default:!0}}),k(),n(s,i)},$$slots:{default:!0}});var B=a(Q,2),bi=a(E(B));g(bi,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning","data-metadata":"",children:(s,h)=>{var i=r(),t=e(i);l(t,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> lang</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"ts"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
36<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">  import </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#125;</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> from </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"bits-ui"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
37<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
38<span data-line=""> </span>
39<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Trigger</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
40<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#123;#</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">snippet</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> child</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">(</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> props </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span>
41<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">    &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">button</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> &#123;</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">...</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">props</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">&#125;</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> class</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"my-accordion-trigger"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Click me! </span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">button</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
42<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#123;/</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">snippet</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span>
43<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Trigger</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
44<span data-line=""> </span>
45<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">style</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
46<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  .</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">my-accordion-trigger</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#123;</span></span>
47<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 3</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">rem</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
48<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    width</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 100</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">%</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
49<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    background-color</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">

49 #</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">3182ce</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
50<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    color</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> #</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">fff</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
51<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#125;</span></span>
52<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">style</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span></code>`),n(s,i)},$$slots:{default:!0}}),A(B);var X=a(B,2);o(X,{id:"style-prop",children:(s,h)=>{k();var i=p("Style Prop");n(s,i)},$$slots:{default:!0}});var Z=a(X,2);d(Z,{children:(s,h)=>{k();var i=Li(),t=a(e(i));u(t,{href:"/docs/utilities/merge-props",children:(y,D)=>{var F=r(),c=e(F);l(c,()=>"<code>mergeProps</code>"),n(y,F)},$$slots:{default:!0}}),k(),n(s,i)},$$slots:{default:!0}});var b=a(Z,2),Mi=E(b);g(Mi,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(s,h)=>{var i=r(),t=e(i);l(t,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Trigger</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> style</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"background-color: #3182ce; color: white; padding: 1rem;"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
53<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">	Click me</span></span>
54<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Trigger</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
55<span data-line=""> </span>
56<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&lt;!--</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> Or using an object </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">--></span></span>
57<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Trigger</span></span>
58<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">  style</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=&#123;&#123;</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> backgroundColor</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> "#3182ce"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> color</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> "white"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> padding</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> "1rem"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#125;&#125;</span></span>
59<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
60<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">  Click me</span></span>
61<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Trigger</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span></code>`),n(s,i)},$$slots:{default:!0}}),A(b);var ii=a(b,2);H(ii,{id:"styling-component-states",children:(s,h)=>{k();var i=p("Styling Component States");n(s,i)},$$slots:{default:!0}});var si=a(ii,2);d(si,{children:(s,h)=>{k();var i=p("Bits UI components may expose state information through data attributes and CSS variables, allowing you to create dynamic styles based on component state.");n(s,i)},$$slots:{default:!0}});var ai=a(si,2);o(ai,{id:"state-data-attributes",children:(s,h)=>{k();var i=p("State Data Attributes");n(s,i)},$$slots:{default:!0}});var ni=a(ai,2);d(ni,{children:(s,h)=>{k();var i=p("Components apply state-specific data attributes that you can target in your CSS:");n(s,i)},$$slots:{default:!0}});var M=a(ni,2),xi=E(M);g(xi,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"css","data-theme":"Serendipity Midnight Serendipity Morning",children:(s,h)=>{var i=r(),t=e(i);l(t,()=>`<code data-language="css" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">/*</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> Style the Accordion.Trigger when open </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">*/</span></span>
62<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-accordion-trigger</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">

62][</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-state</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"open"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#123;</span></span>
63<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  background-color</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> #</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">f0f0f0</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
64<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  font-weight</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> bold</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;

64</span></span>
65<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span>
66<span data-line=""> </span>
67<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">/*</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> Style the Accordion.Trigger when closed </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">*/</span></span>
68<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-accordion-trigger</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">][</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-state</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"closed"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#123;</span></span>
69<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  background-color</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> #</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">ffffff</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
70<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span>
71<span data-line=""> </span>
72<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">/*</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> Style disabled components </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">*/</span></span>
73<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-accordion-trigger</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">][</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-disabled</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#123;</span></span>
74<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  opacity</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0.5</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
75<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  cursor</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> not-allowed</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
76<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span></code>`),n(s,i)},$$slots:{default:!0}}),A(M);var ti=a(M,2);d(ti,{children:(s,h)=>{k();var i=p("See each component's API reference for its specific data attributes.");n(s,i)},$$slots:{default:!0}});var hi=a(ti,2);o(hi,{id:"css-variables",children:(s,h)=>{k();var i=p("CSS Variables");n(s,i)},$$slots:{default:!0}});var ki=a(hi,2);d(ki,{children:(s,h)=>{k();var i=Vi(),t=a(e(i));l(t,()=>"<code>Select.Content</code>");var y=a(t,2);l(y,()=>"<code>Select.Trigger</code>");var D=a(y,2);l(D,()=>"<code>customAnchor</code>");var F=a(D,2);l(F,()=>"<code>--bits-select-anchor-width</code>"),k(),n(s,i)},$$slots:{default:!0}});var x=a(ki,2),Pi=E(x);g(Pi,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"css","data-theme":"Serendipity Midnight Serendipity Morning",children:(s,h)=>{var i=r(),t=e(i);l(t,()=>`<code data-language="css" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-select-content</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#123;</span></span>
77<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  width</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EE8679;--shiki-light:#D26A5D"> var</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">(</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">--bits-select-anchor-width</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">);</span></span>
78<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  min-width</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EE8679;--shiki-light:#D26A5D"> var</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">(</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">--bits-select-anchor-width</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">);</span></span>
79<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  max-width</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EE8679;--shiki-light:#D26A5D"> var</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">(</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">--bits-select-anchor-width</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">);</span></span>
80<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span></code>`),n(s,i)},$$slots:{default:!0}}),A(x);var pi=a(x,2);d(pi,{children:(s,h)=>{k();var i=p("See each component's API reference for specific CSS variables it provides.");n(s,i)},$$slots:{default:!0}});var li=a(pi,2);o(li,{id:"example-styling-an-accordion",children:(s,h)=>{k();var i=p("Example: Styling an Accordion");n(s,i)},$$slots:{default:!0}});var ei=a(li,2);d(ei,{children:(s,h)=>{k();var i=p("Here's an example styling an accordion with different states:");n(s,i)},$$slots:{default:!0}});var P=a(ei,2),wi=E(P);g(wi,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(s,h)=>{var i=r(),t=e(i);l(t,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> lang</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"ts"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
81<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">  import </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#125;</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> from </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"bits-ui"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
82<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
83<span data-line=""> </span>
84<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">

84Root</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
85<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">  &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Item</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> value</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"item-1"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
86<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">    &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Trigger</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">Section 1</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Trigger</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
87<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">    &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Content</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">Content for section 1</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Content</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
88<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">  &lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Item</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
89<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">  &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Item</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> value</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"item-2"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
90<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">    &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Trigger</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> disabled</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">Section 2 (Disabled)</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Trigger</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
91<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">    &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Content</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">Content for section 2</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Content</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
92<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">  &lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Item</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
93<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">

93Root</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
94<span data-line=""> </span>
95<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">style</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
96<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  /*</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> Base styles </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">*/</span></span>
97<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">  :global(</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-accordion-item</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">) </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
98<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    border</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 1</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">px</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> solid </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">#</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">e2e8f0</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
99<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    border-radius</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0.25</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">rem</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
100<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    margin-bottom</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0.5</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">rem</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
101<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#125;</span></span>
102<span data-line=""> </span>
103<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  /*</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> Trigger styles based on state </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">*/</span></span>
104<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">  :global(</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-accordion-trigger</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">) </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
105<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    width</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 100</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">%</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
106<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    padding</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 1</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">rem</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
107<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    display</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> flex</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
108<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    justify-content</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> space-between</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
109<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    align-items</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> center</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
110<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#125;</span></span>
111<span data-line=""> </span>
112<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">  :global(</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-accordion-trigger</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">

112][</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-state</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"open"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">) </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
113<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    background-color</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> #</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">f7fafc</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
114<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    border-bottom</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 1</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">px</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> solid </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">#</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">e2e8f0</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
115<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#125;</span></span>
116<span data-line=""> </span>
117<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">  :global(</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-accordion-trigger</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">][</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-disabled</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">) </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
118<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    opacity</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0.5</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
119<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    cursor</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> not-allowed</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
120<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#125;</span></span>
121<span data-line=""> </span>
122<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  /*</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> Content styles </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">*/</span></span>
123<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">  :global(</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-accordion-content</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">) </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
124<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    padding</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 1</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">rem</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
125<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#125;</span></span>
126<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">style</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span></code>`),n(s,i)},$$slots:{default:!0}}),A(P);var di=a(P,2);H(di,{id:"advanced-styling-techniques",children:(s,h)=>{k();var i=p("Advanced Styling Techniques");n(s,i)},$$slots:{default:!0}});var ri=a(di,2);o(ri,{id:"css-transitions-on-mount-managed-surfaces",children:(s,h)=>{k();var i=p("CSS Transitions on Mount-Managed Surfaces");n(s,i)},$$slots:{default:!0}});var Ei=a(ri,2);d(Ei,{children:(s,h)=>{k();var i=Gi(),t=a(e(i));l(t,()=>"<code>data-starting-style</code>");var y=a(t,2);l(y,()=>"<code>data-ending-style</code>"),k(),n(s,i)},$$slots:{default:!0}});var w=a(Ei,2),Ti=E(w);

126g(Ti,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"css","data-theme":"Serendipity Midnight Serendipity Morning",children:(s,h)=>{var i=r(),t=e(i);l(t,()=>`<code data-language="css" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-popover-content</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#123;</span></span>
127<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  opacity</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 1</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
128<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  transform</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EE8679;--shiki-light:#D26A5D"> scale</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">(</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">1</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">);</span></span>
129<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  transition</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span></span>
130<span data-line=""><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">    opacity </span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">150</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">ms</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> ease</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span></span>
131<span data-line=""><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">    transform </span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">150</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">ms</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> ease</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
132<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span>
133<span data-line=""> </span>
134<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-popover-content</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">][</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-starting-style</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">],</span></span>
135<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-popover-content</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">][</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-ending-style</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#123;</span></span>
136<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  opacity</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
137<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  transform</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EE8679;--shiki-light:#D26A5D"> scale</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">(</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">0.96</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">);</span></span>
138<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span></code>`),n(s,i)},$$slots:{default:!0}}),A(w);var Ai=a(w,2);o(Ai,{id:"combining-data-attributes-with-css-variables",children:(s,h)=>{k();var i=p("Combining Data Attributes with CSS Variables");n(s,i)},$$slots:{default:!0}});var gi=a(Ai,2);d(gi,{children:(s,h)=>{k();var i=Ki(),t=a(e(i));l(t,()=>"<code>--bits-accordion-content-height</code>");var y=a(t,2);l(y,()=>"<code>data-state</code>"),k(),n(s,i)},$$slots:{default:!0}});var T=a(gi,2),Ii=E(T);g(Ii,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"css","data-theme":"Serendipity Midnight Serendipity Morning",children:(s,h)=>{var i=r(),t=e(i);l(t,()=>`<code data-language="css" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">/*</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> Basic transition animation </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">*/</span></span>
139<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-accordion-content</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#123;</span></span>
140<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  overflow</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> hidden</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
141<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  transition</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> height </span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">300</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">ms</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> ease-out</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
142<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
143<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span>
144<span data-line=""> </span>
145<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-accordion-content</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">

145][</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-state</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"open"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#123;</span></span>
146<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EE8679;--shiki-light:#D26A5D"> var</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">(</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">--bits-accordion-content-height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">);</span></span>
147<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span>
148<span data-line=""> </span>
149<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-accordion-content</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">][</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-state</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"closed"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#123;</span></span>
150<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
151<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span></code>`),n(s,i)},$$slots:{default:!0}}),A(T);var yi=a(T,2);o(yi,{id:"custom-keyframe-animations",children:(s,h)=>{k();var i=p("Custom Keyframe Animations");n(s,i)},$$slots:{default:!0}});var oi=a(yi,2);d(oi,{children:(s,h)=>{k();var i=p("For more control, use keyframe animations with the CSS variables:");n(s,i)},$$slots:{default:!0}});var I=a(oi,2),Hi=E(I);g(Hi,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"css","data-theme":"Serendipity Midnight Serendipity Morning",children:(s,h)=>{var i=r(),t=e(i);l(t,()=>`<code data-language="css" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">/*</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> Define keyframes for opening animation </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">*/</span></span>
152<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">@</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">keyframes</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> accordionOpen</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#123;</span></span>
153<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">  0% </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
154<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
155<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    opacity</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
156<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#125;</span></span>
157<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">  80% </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
158<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EE8679;--shiki-light:#D26A5D"> var</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">(</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">--bits-accordion-content-height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">);</span></span>
159<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    opacity</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0.8</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
160<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#125;</span></span>
161<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">  100% </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
162<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EE8679;--shiki-light:#D26A5D"> var</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">(</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">--bits-accordion-content-height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">);</span></span>
163<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    opacity</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 1</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
164<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#125;</span></span>
165<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span>
166<span data-line=""> </span>
167<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">/*</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> Define keyframes for closing animation </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">*/</span></span>
168<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">@</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">keyframes</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> accordionClose</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#123;</span></span>
169<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">  0% </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
170<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EE8679;--shiki-light:#D26A5D"> var</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">(</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">--bits-accordion-content-height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">);</span></span>
171<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    opacity</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 1</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
172<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#125;</span></span>
173<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">  20% </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
174<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EE8679;--shiki-light:#D26A5D"> var</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">(</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">--bits-accordion-content-height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">);</span></span>
175<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    opacity</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0.8</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
176<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#125;</span></span>
177<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">  100% </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
178<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
179<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    opacity</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
180<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#125;</span></span>
181<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span>
182<span data-line=""> </span>
183<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">/*</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> Apply animations based on state </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">*/</span></span>
184<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-accordion-content</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">

184][</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-state</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"open"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#123;</span></span>
185<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  animation</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> accordionOpen </span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">400</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">ms</span><span style="--shiki-dark:#EE8679;--shiki-light:#D26A5D"> cubic-bezier</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">(</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">0.16</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 1</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0.3</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 1</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">)</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> forwards</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
186<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span>
187<span data-line=""> </span>
188<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-accordion-content</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">][</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-state</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"closed"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#123;</span></span>
189<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">  animation</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> accordionClose </span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">300</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">ms</span><span style="--shiki-dark:#EE8679;--shiki-light:#D26A5D"> cubic-bezier</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">(</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">0.7</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0.84</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">)</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> forwards</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
190<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span></code>`),n(s,i)},$$slots:{default:!0}}),A(I);var Di=a(I,2);o(Di,{id:"example-animated-accordion",children:(s,h)=>{k();var i=p("Example: Animated Accordion");n(s,i)},$$slots:{default:!0}});var Ci=a(Di,2);d(Ci,{children:(s,h)=>{k();var i=p("Here's an example of an accordion with a custom transition:");n(s,i)},$$slots:{default:!0}});var Fi=a(Ci,2),Ui=E(Fi);g(Ui,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(s,h)=>{var i=r(),t=e(i);l(t,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> lang</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"ts"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
191<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">  import </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#125;</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> from </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"bits-ui"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
192<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
193<span data-line=""> </span>
194<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">

194Root</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> type</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"single"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
195<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">  &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Item</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> value</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"item-1"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
196<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">    &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Trigger</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">Section 1</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Trigger</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
197<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">    &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Content</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">Content for section 1</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Content</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
198<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">  &lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Item</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
199<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">  &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Item</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> value</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"item-2"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
200<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">    &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Trigger</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">Section 2</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Trigger</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
201<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">    &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Content</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">Content for section 2</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Content</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
202<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">  &lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Item</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
203<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Accordion</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">

203Root</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
204<span data-line=""> </span>
205<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">style</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
206<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  /*</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> Base styles </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">*/</span></span>
207<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">  :global(</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-accordion-item</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">) </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
208<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    border</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 1</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">px</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> solid </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">#</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">e2e8f0</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
209<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    border-radius</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0.25</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">rem</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
210<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    margin-bottom</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0.5</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">rem</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
211<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#125;</span></span>
212<span data-line=""> </span>
213<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  /*</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> Trigger styles based on state </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">*/</span></span>
214<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">  :global(</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-accordion-trigger</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">) </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
215<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    width</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 100</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">%</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
216<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    padding</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 1</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">rem</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
217<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    display</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> flex</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
218<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    justify-content</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> space-between</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
219<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    align-items</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> center</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
220<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#125;</span></span>
221<span data-line=""> </span>
222<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">  :global(</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-accordion-trigger</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">

222][</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-state</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"open"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">) </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
223<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    background-color</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> #</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">f7fafc</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
224<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    border-bottom</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 1</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">px</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> solid </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">#</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">e2e8f0</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
225<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#125;</span></span>
226<span data-line=""> </span>
227<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  /*</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> Content styles </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">*/</span></span>
228<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">  :global(</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-accordion-content</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">) </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
229<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    overflow</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> hidden</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
230<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    transition</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> height </span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">300</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">ms</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> ease-out</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
231<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#125;</span></span>
232<span data-line=""> </span>
233<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  /*</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> Define keyframes for opening animation </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">*/</span></span>
234<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  @</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">keyframes</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> -global-accordionOpen</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#123;</span></span>
235<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">    0% </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
236<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">      height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
237<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">      opacity</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
238<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">    &#125;</span></span>
239<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">    80% </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
240<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">      height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EE8679;--shiki-light:#D26A5D"> var</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">(</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">--bits-accordion-content-height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">);</span></span>
241<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">      opacity</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0.8</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
242<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">    &#125;</span></span>
243<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">    100% </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
244<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">      height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EE8679;--shiki-light:#D26A5D"> var</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">(</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">--bits-accordion-content-height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">);</span></span>
245<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">      opacity</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 1</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
246<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">    &#125;</span></span>
247<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#125;</span></span>
248<span data-line=""> </span>
249<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  /*</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> Define keyframes for closing animation </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">*/</span></span>
250<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">

250  @</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">keyframes</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> -global-accordionClose</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#123;</span></span>
251<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">    0% </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
252<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">      height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EE8679;--shiki-light:#D26A5D"> var</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">(</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">--bits-accordion-content-height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">);</span></span>
253<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">      opacity</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 1</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
254<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">    &#125;</span></span>
255<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">    20% </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
256<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">      height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EE8679;--shiki-light:#D26A5D"> var</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">(</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">--bits-accordion-content-height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">);</span></span>
257<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">      opacity</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0.8</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
258<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">    &#125;</span></span>
259<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">    100% </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
260<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">      height</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
261<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">      opacity</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
262<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">    &#125;</span></span>
263<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#125;</span></span>
264<span data-line=""> </span>
265<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  /*</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> Apply animations based on state </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">*/</span></span>
266<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">  :global(</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-accordion-content</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">][</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-state</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"open"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">) </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
267<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    animation</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">

267 accordionOpen </span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">400</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">ms</span><span style="--shiki-dark:#EE8679;--shiki-light:#D26A5D"> cubic-bezier</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">(</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">0.16</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 1</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0.3</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 1</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">)</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> forwards</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
268<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#125;</span></span>
269<span data-line=""> </span>
270<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">  :global(</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">[</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-accordion-content</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">][</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">data-state</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"closed"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">]</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">) </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span></span>
271<span data-line=""><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">    animation</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> accordionClose </span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">300</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">ms</span><span style="--shiki-dark:#EE8679;--shiki-light:#D26A5D"> cubic-bezier</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">(</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">0.7</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0.84</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> 0</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">)</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> forwards</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
272<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#125;</span></span>
273<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">style</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span></code>`),n(s,i)},$$slots:{default:!0}}),A(Fi),n(fi,U)},$$slots:{default:!0}})}export{ks as default,ci as metadata};