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

1import{f as A,a as k,t as E,c as o}from"./BI2tZWd8.js";import"./CspEIRAF.js";import{f as e,n,s,c as y,r as C}from"./DxBliZnO.js";import{h}from"./DiC8NrNs.js";import{B as Q,P as D}from"./Cc3TrqVu.js";import"./D1EcV80E.js";import{P as r}from"./BBgCmvkJ.js";import{H}from"./C6gCk9DM.js";import{A as j}from"./DHOI_CUB.js";import{H as V}from"./liaaalrF.js";const Y={title:"Transitions",description:"Learn how to use transitions with Bits UI components."},{title:Fi,description:ui}=Y;var X=A("Svelte Transitions are one of the awesome features of Svelte. Unfortunately, they don't play very nicely with components, due to the fact that they rely on various directives like <!>, <!>, and <!>, which aren't supported by components.",1),Z=A("In previous version of Bits UI, we had a workaround for this by exposing a ton of <!> props on the components that we felt were most likely to be used with transitions. However, this was a bit of a hack and limited us to <em>only</em> Svelte Transitions, and users who wanted to use other libraries or just CSS were left out.",1),ii=A("You can use any CSS transitions or animations you want with this approach, which is what we're doing in the various example components in this documentation, using <!>.",1),si=A("On each component that we conditionally render, a <!> prop is exposed. If set to <!>, the component will be forced to mount in the DOM and become visible to the user. You can use this prop in conjunction with the <!> <!> snippet to conditionally render the component and apply Svelte Transitions or another animation library.",1),ai=A("The <!> snippet exposes a prop that you can use to conditionally render the element and apply your transitions.",1),ti=A("In the example above, we're using the <!> prop to tell the component to forcefully mount the <!> component. We're then using the <!> snippet to delegate the rendering of the <!> to a <!> element which we can apply our props and transitions to.",1),ni=A("Which can then be used alongside the other <!> components:",1),hi=A("<!> components that rely on Floating UI require a slight modification to how the <!> snippet is used.",1),ki=A("For example, if we were to use the <!> component, we need to add a wrapper element within the <!> snippet, and spread the <!> snippet prop to it.",1),li=A('<!> <!> <!> <!> <!> <!> <!> <!> <!> <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">MyDialogContent.svelte</figcaption><!></figure> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure>',1);function vi(q){Q(q,{get metadata(){return Y},children:(L,pi)=>{var m=li(),f=e(m);r(f,{children:(a,l)=>{n();var i=X(),t=s(e(i));h(t,()=>"<code>in:</code>");var p=s(t,2);h(p,()=>"<code>out:</code>");var d=s(p,2);h(d,()=>"<code>transition:</code>"),n(),k(a,i)},$$slots:{default:!0}});var $=s(f,2);r($,{children:(a,l)=>{n();var i=Z(),t=s(e(i));h(t,()=>"<code>transition*</code>"),n(3),k(a,i)},$$slots:{default:!0}});var _=s($,2);r(_,{children:(a,l)=>{n();var i=E("With Bits UI for Svelte 5, we've completely removed this workaround and instead exposed props and snippets that allow you to use any animation or transitions library you want.");k(a,i)},$$slots:{default:!0}});var B=s(_,2);H(B,{id:"the-defaults",children:(a,l)=>{n();var i=E("The Defaults");k(a,i)},$$slots:{default:!0}});var P=s(B,2);r(P,{children:(a,l)=>{n();var i=E("By default, Bits UI components handle the mounting and unmounting of specific components for you. They are wrapped in a component that ensures the component waits for transitions to finish before unmounting.");k(a,i)},$$slots:{default:!0}});var w=s(P,2);r(w,{children:(a,l)=>{n();var i=ii(),t=s(e(i));j(t,{href:"https://github.com/jamiebuilds/tailwindcss-animate",children:(p,d)=>{n();var g=E("tailwindcss-animate");k(p,g)},$$slots:{default:!0}}),n(),k(a,i)},$$slots:{default:!0}});var M=s(w,2);H(M,{id:"force-mounting",children:(a,l)=>{n();var i=E("Force Mounting");k(a,i)},$$slots:{default:!0}});var S=s(M,2);r(S,{children:(a,l)=>{n();var i=si(),t=s(e(i));h(t,()=>"<code>

1forceMount</code>");var p=s(t,2);h(p,()=>"<code>true</code>");var d=s(p,2);j(d,{href:"/docs/child-snippet",children:(v,ei)=>{n();var N=E("delegated");k(v,N)},$$slots:{default:!0}});var g=s(d,2);h(g,()=>"<code>child</code>"),n(),k(a,i)},$$slots:{default:!0}});var b=s(S,2);r(b,{children:(a,l)=>{n();var i=ai(),t=s(e(i));h(t,()=>"<code>child</code>"),n(),k(a,i)},$$slots:{default:!0}});var c=s(b,2),z=y(c);D(z,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(a,l)=>{var i=o(),t=e(i);h(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>
2<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"> Dialog</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>
3<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"> fly</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">"svelte/transition"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
4<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>
5<span data-line=""> </span>
6<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Dialog</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Root</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
7<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &lt;!--</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> ... </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">--></span></span>
8<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">  &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Dialog</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Content</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> </span><mark data-highlighted-chars="" class="chars--highlighted"><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">forceMount</span></mark><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
9<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">

9,</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> open </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>
10<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">      &#123;#</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">if</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> open</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span>
11<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">        &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">div</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:#5BA2D0;--shiki-light:#838383"> </span><mark data-highlighted-chars-mark="" data-highlighted-chars="" class="chars--highlighted"><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">transition</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">fly</span></mark><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
12<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">          &lt;!--</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> ... </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">--></span></span>
13<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">        &lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">div</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
14<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">      &#123;/</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">if</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span>
15<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>
16<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">  &lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Dialog</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>
17<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Dialog</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Root</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span></code>`),k(a,i)},$$slots:{default:!0}}),C(c);var x=s(c,2);r(x,{children:(a,l)=>{n();var i=ti(),t=s(e(i));h(t,()=>"<code>forceMount</code>");var p=s(t,2);h(p,()=>"<code>Dialog.Content</code>");var d=s(p,2);h(d,()=>"<code>child</code>");var g=s(d,2);h(g,()=>"<code>Dialog.Content</code>");var v=s(g,2);h(v,()=>"<code>div</code>"),n(),k(a,i)},$$slots:{default:!0}});var T=s(x,2);r(T,{children:(a,l)=>{n();var i=E("We understand this isn't the prettiest syntax, but it enables us to cover every use case. If you intend to use this approach across your application, it's recommended to create a reusable component that handles this logic, like so:");k(a,i)},$$slots:{default:!0}});var F=s(T,2),G=s(y(F));D(G,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning","data-metadata":"",children:(a,l)=>{var i=o(),t=e(i);h(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>
18<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">  import type </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#123;</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Snippet</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">"svelte"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
19<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"> fly</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">"svelte/transition"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
20<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"> Dialog</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">

20,</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> type </span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">WithoutChildrenOrChild</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>
21<span data-line=""> </span>
22<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">  let</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#123;</span></span>
23<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">    ref </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">bindable</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">(</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">null</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span></span>
24<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">    children</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span></span>
25<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">    ...</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">restProps</span></span>
26<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">  &#125;</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">:</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C"> WithoutChildrenOrChild</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Dialog</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">ContentProps</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">></span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> &amp;</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> &#123;</span></span>
27<span data-line=""><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">    children</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">?:</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C"> Snippet</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
28<span data-line=""><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:#707070;--shiki-light:#9A9A9A">&lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Dialog</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Content</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> bind</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">ref</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">restProps</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">&#125;</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> forceMount</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=&#123;</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">true</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
32<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">

32,</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> open </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>
33<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">    &#123;#</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">if</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> open</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span>
34<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">      &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">div</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:#5BA2D0;--shiki-light:#838383"> transition</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">fly</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
35<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:#5BA2D0;--shiki-light:#838383">?.</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">()</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span>
36<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">      &lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">div</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
37<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">    &#123;/</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">if</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span>
38<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>
39<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Dialog</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></code>`),k(a,i)},$$slots:{default:!0}}),C(F);var I=s(F,2);r(I,{children:(a,l)=>{n();var i=ni(),t=s(e(i));h(t,()=>"<code>Dialog.*</code>"),n(),k(a,i)},$$slots:{default:!0}});var u=s(I,2),J=y(u);D(J,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(a,l)=>{var i=o(),t=e(i);h(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>
40<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"> Dialog</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>
41<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">  import </span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">MyDialogContent</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> from </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"$lib/components/MyDialogContent.svelte"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
42<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>
43<span data-line=""> </span>
44<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Dialog</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">

44Root</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
45<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">  &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Dialog</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">Open Dialog</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Dialog</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>
46<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">  &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Dialog</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Portal</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
47<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">    &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Dialog</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Overlay</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> /></span></span>
48<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">    &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">MyDialogContent</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
49<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">      &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Dialog</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Title</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">Dialog Title</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Dialog</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Title</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
50<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">      &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Dialog</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Description</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">Dialog Description</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Dialog</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Description</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
51<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">      &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Dialog</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Close</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">Close</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Dialog</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Close</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
52<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">      &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">div</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">Other dialog content</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">div</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
53<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">    &lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">MyDialogContent</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
54<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">  &lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Dialog</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Portal</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
55<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Dialog</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">

55Root</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span></code>`),k(a,i)},$$slots:{default:!0}}),C(u);var O=s(u,2);V(O,{id:"floating-content-components",children:(a,l)=>{n();var i=E("Floating Content Components");k(a,i)},$$slots:{default:!0}});var R=s(O,2);r(R,{children:(a,l)=>{var i=hi(),t=e(i);h(t,()=>"<code>Content</code>");var p=s(t,2);h(p,()=>"<code>child</code>"),n(),k(a,i)},$$slots:{default:!0}});var U=s(R,2);r(U,{children:(a,l)=>{n();var i=ki(),t=s(e(i));h(t,()=>"<code>Popover.Content</code>");var p=s(t,2);h(p,()=>"<code>child</code>");var d=s(p,2);h(d,()=>"<code>wrapperProps</code>"),n(),k(a,i)},$$slots:{default:!0}});var W=s(U,2),K=y(W);D(K,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(a,l)=>{var i=o(),t=e(i);h(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>
56<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"> Popover</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>
57<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"> fly</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">"svelte/transition"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span>
58<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>
59<span data-line=""> </span>
60<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Popover</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Root</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
61<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">  &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Popover</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">Open Popover</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Popover</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>
62<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">  &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Popover</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Portal</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
63<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">    &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Popover</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Content</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> forceMount</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
64<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"> </span><mark data-highlighted-chars="" class="chars--highlighted"><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">wrapperProps</span></mark><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">

64,</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> props</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> open </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>
65<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">        &#123;#</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">if</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> open</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span>
66<span class="line--highlighted" data-line="" data-highlighted-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">          &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">div</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> &#123;</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">...</span><mark data-highlighted-chars="" class="chars--highlighted"><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">wrapperProps</span></mark><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">&#125;</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
67<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">            &lt;</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">div</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:#5BA2D0;--shiki-light:#838383"> transition</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">fly</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
68<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">              &lt;!--</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> ... </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">--></span></span>
69<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">            &lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">div</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
70<span class="line--highlighted" data-line="" data-highlighted-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">          &lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">div</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
71<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">        &#123;/</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">if</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">&#125;</span></span>
72<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>
73<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">    &lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Popover</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>
74<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">  &lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Popover</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Portal</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span>
75<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">&lt;/</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Popover</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">

75Root</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span></code>`),k(a,i)},$$slots:{default:!0}}),C(W),k(L,m)},$$slots:{default:!0}})}export{vi as default,Y as metadata};