https://flowbite-svelte-v2.vercel.app/_app/immutable/chunks/BNX0joCQ.js

1import"./UoE1nl1-.js";import"./DWrUtX1b.js";import{as as l,a$ as a,bs as s,Z as n,bA as p,av as v,b7 as ln,ax as F,b2 as un,bH as Vn,bz as Jn,bj as J,bv as sn,a5 as S,bd as O,a7 as A}from"./6s5pDBy3.js";import{h as W}from"./y32zUjDw.js";import{i as Ba}from"./CTW7QCIj.js";import{l as Ca,a as Sa}from"./-qb3CGwF.js";import{C as Oa}from"./sFnZc6kv.js";import{E as N}from"./Dt1e2VTY.js";import{f as L,E as G,I as f,G as Q,$ as ja,az as Mn,a8 as Ea,bA as Ra,cX as Ha,a$ as Ga}from"./B1WA_BlP.js";import{C as U}from"./BpMvgwcC.js";import{p as Fs}from"./CrlK1VPB.js";import La from"./CHQSCNZj.js";import pn from"./AO1gzKih.js";import{C as qn}from"./B4rXNiDj.js";import{l as Yn,e as Aa,d as Wa}from"./CbF6fSk1.js";import K from"./CYlzuK3F.js";import nn from"./BmQRYBXW.js";import Z from"./BFl5Lmv7.js";import Na from"./CONMg2Wp.js";import za from"./CTsepphm.js";import an from"./DnaQnw7H.js";import Ua from"./B-egIiu8.js";import Ta from"./Dkhyx9O2.js";import Y from"./Cij39jot.js";import{U as Ma}from"./O7zKSpCP.js";import{D as Fa}from"./BIx_YNbT.js";import{D as Va}from"./DrYGCfz1.js";import{B as Ja}from"./Bv2VHxY4.js";import{E as qa}from"./BjAAD52G.js";import{C as Vs}from"./Cx7N0EjC.js";import{C as Ya}from"./CzOt_pzz.js";import{L as Ka}from"./DMJ6UynF.js";import"./BR0wqwzV.js";import"./B0XwC4Ot.js";import{C as Xa}from"./BxCgbYQx.js";import{G as Za}from"./B9mT7a-j.js";import{t as Qa}from"./DddwK-OJ.js";import{H as z}from"./Bczo2IP5.js";import{C as T}from"./erbS_wNd.js";import{H as tn}from"./D4imSqGl.js";var nt=v("Dropdown button<!>",1),st=v("<!> <!> <!> <!>",1),at=v("<!> <!>",1);function tt(E){var w=at(),y=l(w);L(y,{children:(D,P)=>{a();var u=nt(),e=s(l(u));U(e,{class:"ms-2 h-6 w-6 text-white"}),n(D,u)},$$slots:{default:!0}});var C=s(y,2);G(C,{simple:!0,children:(D,P)=>{var u=st(),e=l(u);f(e,{children:($,m)=>{a();var g=p("Dashboard");n($,g)},$$slots:{default:!0}});var i=s(e,2);f(i,{children:($,m)=>{a();var g=p("Settings");n($,g)},$$slots:{default:!0}});var k=s(i,2);f(k,{children:($,m)=>{a();var g=p("Earnings");n($,g)},$$slots:{default:!0}});var h=s(k,2);f(h,{children:($,m)=>{a();var g=p("Sign out");n($,g)},$$slots:{default:!0}}),n(D,u)},$$slots:{default:!0}}),n(E,w)}var pt=v("Dropdown button<!>",1),ot=v("<!> <!> <!> <!>",1),et=v("<!> <!>",1);function ct(E,w){ln(w,!0);let y=Vn(()=>Fs.url.pathname);var C=et(),D=l(C);L(D,{children:(u,e)=>{a();var i=pt(),k=s(l(i));U(k,{class:"ms-2 h-6 w-6 text-white"}),n(u,i)},$$slots:{default:!0}});var P=s(D,2);G(P,{get activeUrl(){return F(y)},simple:!0,children:(u,e)=>{var i=ot(),k=l(i);f(k,{href:"/",children:(g,o)=>{a();var r=p("Home");n(g,r)},$$slots:{default:!0}});var h=s(k,2);f(h,{href:"/docs/components/dropdown",children:(g,o)=>{a();var r=p("Dropdown");n(g,r)},$$slots:{default:!0}});var $=s(h,2);f($,{href:"/docs/components/accordion",children:(g,o)=>{a();var r=p("Accordion");n(g,r)},$$slots:{default:!0}});var m=s($,2);f(m,{href:"/docs/components/alert",children:(g,o)=>{a();var r=p("Alert");n(g,r)},$$slots:{default:!0}}),n(u,i)},$$slots:{default:!0}}),n(E,C),un()}var lt=v("Dropdown button<!>",1),ut=v("<!> <!> <!> <!>",1),rt=v("<!> <!>",1);function it(E,w){ln(w,!0);let y=Vn(()=>Fs.url.pathname),C="text-green-500 dark:text-green-300 hover:text-green-700 dark:hover:text-green-500";var D=rt(),P=l(D);L(P,{children:(e,i)=>{a();var k=lt(),h=s(l(k));U(h,{class:"ms-2 h-6 w-6 text-white"}),n(e,k)},$$slots:{default:!0}});var u=s(P,2);G(u,{get activeUrl(){return F(y)},class:C,simple:!0,children:(e,i)=>{var k=ut(),h=l(k);f(h,{href:"/",children:(o,r)=>{a();var d=p("Home");n(o,d)},$$slots:{default:!0}});var $=s(h,2);f($,{href:"/docs/components/dropdown",children:(o,r)=>{a();var d=p("Dropdown");n(o,d)},$$slots:{default:!0}});var m=s($,2);f(m,{href:"/docs/components/accordion",children:(o,r)=>{a();var d=p("Accordion");n(o,d)},$$slots:{default:!0}});var g=s(m,2);f(g,{href:"/docs/components/alert",children:(o,r)=>{a();var d=p("Alert");n(o,d)},$$slots:{default:!0}}),n(e,k)},$$slots:{default:!0}}),n(E,D),un()}var kt=v("Dropdown button<!>",1),dt=v("<!> <!> <!> <!> <!>",1),mt=v("<!> <!>",1);function gt(E){var w=mt(),y=l(w);L(y,{children:(D,P)=>{a();var u=kt(),e=s(l(u));U(e,{class:"ms-2 h-6 w-6 text-white"}),n(D,u)},$$slots:{default:!0}});var C=s(y,2);

1G(C,{simple:!0,children:(D,P)=>{var u=dt(),e=l(u);f(e,{children:(m,g)=>{a();var o=p("Dashboard");n(m,o)},$$slots:{default:!0}});var i=s(e,2);La(i,{});var k=s(i,2);f(k,{children:(m,g)=>{a();var o=p("Settings");n(m,o)},$$slots:{default:!0}});var h=s(k,2);f(h,{children:(m,g)=>{a();var o=p("Earnings");n(m,o)},$$slots:{default:!0}});var $=s(h,2);f($,{children:(m,g)=>{a();var o=p("Separated link");n(m,o)},$$slots:{default:!0}}),n(D,u)},$$slots:{default:!0}}),n(E,w)}var vt=v("Dropdown button<!>",1),wt=v('<span class="text-heading block text-sm">Bonnie Green</span> <span class="block truncate text-sm font-medium">[email protected]</span>',1),ht=v("<!> <!> <!> <!>",1),Ls=v("<!> <!>",1);function ft(E){var w=Ls(),y=l(w);L(y,{children:(D,P)=>{a();var u=vt(),e=s(l(u));U(e,{class:"ms-2 h-6 w-6 text-white"}),n(D,u)},$$slots:{default:!0}});var C=s(y,2);G(C,{children:(D,P)=>{var u=Ls(),e=l(u);pn(e,{children:(k,h)=>{var $=wt();a(2),n(k,$)},$$slots:{default:!0}});var i=s(e,2);Q(i,{children:(k,h)=>{var $=ht(),m=l($);f(m,{children:(d,I)=>{a();var _=p("Dashboard");n(d,_)},$$slots:{default:!0}});var g=s(m,2);f(g,{children:(d,I)=>{a();var _=p("Settings");n(d,_)},$$slots:{default:!0}});var o=s(g,2);f(o,{children:(d,I)=>{a();var _=p("Earnings");n(d,_)},$$slots:{default:!0}});var r=s(o,2);f(r,{children:(d,I)=>{a();var _=p("Sign out");n(d,_)},$$slots:{default:!0}}),n(k,$)},$$slots:{default:!0}}),n(D,u)},$$slots:{default:!0}}),n(E,w)}var $t=v("Dropdown button<!>",1),Dt=v("Dropdown<!>",1),_t=v("<!> <!> <!>",1),xt=v("<!> <!> <!> <!> <!>",1),bt=v("<!> <!>",1);function yt(E){var w=bt(),y=l(w);L(y,{children:(D,P)=>{a();var u=$t(),e=s(l(u));U(e,{class:"ms-2 h-6 w-6 text-white"}),n(D,u)},$$slots:{default:!0}});var C=s(y,2);G(C,{simple:!0,children:(D,P)=>{var u=xt(),e=l(u);f(e,{children:(m,g)=>{a();var o=p("Dashboard");n(m,o)},$$slots:{default:!0}});var i=s(e,2);f(i,{class:"flex items-center justify-between",children:(m,g)=>{a();var o=Dt(),r=s(l(o));qn(r,{class:"text-fg-brand ms-2 h-6 w-6"}),n(m,o)},$$slots:{default:!0}});var k=s(i,2);G(k,{simple:!0,placement:"right-start",children:(m,g)=>{var o=_t(),r=l(o);f(r,{children:(_,B)=>{a();var H=p("Overview");n(_,H)},$$slots:{default:!0}});var d=s(r,2);f(d,{children:(_,B)=>{a();var H=p("My downloads");n(_,H)},$$slots:{default:!0}});var I=s(d,2);f(I,{children:(_,B)=>{a();var H=p("Billing");n(_,H)},$$slots:{default:!0}}),n(m,o)},$$slots:{default:!0}});var h=s(k,2);f(h,{children:(m,g)=>{a();var o=p("Earnings");n(m,o)},$$slots:{default:!0}});var $=s(h,2);f($,{children:(m,g)=>{a();var o=p("Sign out");n(m,o)},$$slots:{default:!0}}),n(D,u)},$$slots:{default:!0}}),n(E,w)}var As=v("Dropdown<!>",1),It=v("<!> <!> <!>",1),Pt=v("<!> <!> <!> <!> <!>",1),Bt=v("<!> <!> <!> <!>",1);function Ct(E){let w=sn(!1);var y=Bt(),C=l(y);ja(C,{children:(e,i)=>{a();var k=p();Jn(()=>Yn(k,`Current dropdown state: ${F(w)?"Open":"Closed"}`)),n(e,k)},$$slots:{default:!0}});var D=s(C,2);L(D,{onclick:()=>J(w,!1),children:(e,i)=>{a();var k=p("Close Btn");n(e,k)},$$slots:{default:!0}});var P=s(D,2);L(P,{onclick:()=>J(w,!0),children:(e,i)=>{a();var k=As(),h=s(l(k));U(h,{class:"ms-2 h-6 w-6 text-white"}),n(e,k)},$$slots:{default:!0}});var u=s(P,2);G(u,{simple:!0,get isOpen(){return F(w)},set isOpen(e){J(w,e,!0)},children:(e,i)=>{var k=Pt(),h=l(k);f(h,{onclick:()=>J(w,!1),children:(r,d)=>{a();var I=p("Dashboard (close)");n(r,I)},$$slots:{default:!0}});var $=s(h,2);f($,{class:"flex items-center justify-between",children:(r,d)=>{a();var I=As(),_=s(l(I));qn(_,{class:"text-fg-brand ms-2 h-6 w-6"}),n(r,I)},$$slots:{default:!0}});var m=s($,2);G(m,{simple:!0,placement:"right-start",children:(r,d)=>{var I=It(),_=l(I);f(_,{onclick:()=>J(w,!1),children:(j,M)=>{a();var V=p("Overview (close)");n(j,V)},$$slots:{default:!0}});var B=s(_,2);f(B,{children:(j,M)=>{a();var V=p("My downloads");n(j,V)},$$slots:{default:!0}});var H=s(B,2);f(H,{children:(j,M)=>{a();var V=p("Billing");n(j,V)},$$slots:{default:!0}}),n(r,I)},$$slots:{default:!0}});var g=s(m,2);f(g,{children:(r,d)=>{a();var I=p("Earnings");n(r,I)},$$slots:{default:!0}});var o=s(g,2);f(o,{children:(r,d)=>{a();var I=p("Sign out");n(r,I)},$$slots:{default:!0}}),n(e,k)},$$slots:{default:!0}}),n(E,y)}var St=v("Dropdown checkbox<!>",1),Ot=v("<li><!></li> <li><!></li> <li><!></li>",1),jt=v("<!> <!>",1);function Et(E){var w=jt(),y=l(w);L(y,{children:(D,P)=>{a();var u=St(),e=s(l(u));U(e,{class:"ms-2 h-6 w-6 text-white"}),n(D,u)},$$slots:{default:!0}});var C=s(y,2);

1G(C,{simple:!0,class:"w-44 space-y-3 p-3 text-sm",children:(D,P)=>{var u=Ot(),e=l(u),i=S(e);K(i,{children:(g,o)=>{a();var r=p("Default checkbox");n(g,r)},$$slots:{default:!0}}),O(e);var k=s(e,2),h=S(k);K(h,{checked:!0,children:(g,o)=>{a();var r=p("Checked state");n(g,r)},$$slots:{default:!0}}),O(k);var $=s(k,2),m=S($);K(m,{children:(g,o)=>{a();var r=p("Default checkbox");n(g,r)},$$slots:{default:!0}}),O($),n(D,u)},$$slots:{default:!0}}),n(E,w)}var Rt=v("Dropdown checkbox<!>",1),Ht=v('<li class="hover:bg-neutral-tertiary-medium rounded-sm p-2"><!></li> <li class="hover:bg-neutral-tertiary-medium rounded-sm p-2"><!></li> <li class="hover:bg-neutral-tertiary-medium rounded-sm p-2"><!></li>',1),Gt=v("<!> <!>",1);function Lt(E){var w=Gt(),y=l(w);L(y,{children:(D,P)=>{a();var u=Rt(),e=s(l(u));U(e,{class:"ms-2 h-6 w-6 text-white"}),n(D,u)},$$slots:{default:!0}});var C=s(y,2);G(C,{simple:!0,class:"w-48 space-y-1 p-3 text-sm",children:(D,P)=>{var u=Ht(),e=l(u),i=S(e);K(i,{children:(g,o)=>{a();var r=p("Default checkbox");n(g,r)},$$slots:{default:!0}}),O(e);var k=s(e,2),h=S(k);K(h,{checked:!0,children:(g,o)=>{a();var r=p("Checked state");n(g,r)},$$slots:{default:!0}}),O(k);var $=s(k,2),m=S($);K(m,{children:(g,o)=>{a();var r=p("Default checkbox");n(g,r)},$$slots:{default:!0}}),O($),n(D,u)},$$slots:{default:!0}}),n(E,w)}var At=v("Dropdown checkbox<!>",1),Wt=v('<li class="hover:bg-neutral-tertiary-medium rounded-sm p-2"><!> <!></li> <li class="hover:bg-neutral-tertiary-medium rounded-sm p-2"><!> <!></li> <li class="hover:bg-neutral-tertiary-medium rounded-sm p-2"><!> <!></li>',1),Nt=v("<!> <!>",1);function zt(E){var w=Nt(),y=l(w);L(y,{children:(D,P)=>{a();var u=At(),e=s(l(u));U(e,{class:"ms-2 h-6 w-6 text-white"}),n(D,u)},$$slots:{default:!0}});var C=s(y,2);G(C,{simple:!0,class:"w-60 space-y-1 p-3 text-sm",children:(D,P)=>{var u=Wt(),e=l(u),i=S(e);K(i,{children:(d,I)=>{a();var _=p("Enable notifications");n(d,_)},$$slots:{default:!0}});var k=s(i,2);nn(k,{class:"ps-6",children:(d,I)=>{a();var _=p("Some helpful instruction goes over here.");n(d,_)},$$slots:{default:!0}}),O(e);var h=s(e,2),$=S(h);K($,{checked:!0,children:(d,I)=>{a();var _=p("Enable 2FA auth");n(d,_)},$$slots:{default:!0}});var m=s($,2);nn(m,{class:"ps-6",children:(d,I)=>{a();var _=p("Some helpful instruction goes over here.");n(d,_)},$$slots:{default:!0}}),O(h);var g=s(h,2),o=S(g);K(o,{children:(d,I)=>{a();var _=p("Subscribe newsletter");n(d,_)},$$slots:{default:!0}});var r=s(o,2);nn(r,{class:"ps-6",children:(d,I)=>{a();var _=p("Some helpful instruction goes over here.");n(d,_)},$$slots:{default:!0}}),O(g),n(D,u)},$$slots:{default:!0}}),n(E,w)}var Ut=v(" <!>",1),Tt=v("<li><!></li> <li><!></li> <li><!></li>",1),Mt=v("<!> <!>",1);function Ft(E){let w=sn(2);var y=Mt(),C=l(y);L(C,{children:(P,u)=>{a();var e=Ut(),i=l(e),k=s(i);U(k,{class:"ms-2 h-6 w-6 text-white"}),Jn(()=>Yn(i,`Dropdown radio ${F(w)??""}`)),n(P,e)},$$slots:{default:!0}});var D=s(C,2);G(D,{simple:!0,class:"w-44 space-y-3 p-3 text-sm",children:(P,u)=>{var e=Tt(),i=l(e),k=S(i);Z(k,{name:"group1",value:1,get group(){return F(w)},set group(o){J(w,o,!0)},children:(o,r)=>{a();var d=p("Default radio");n(o,d)},$$slots:{default:!0}}),O(i);var h=s(i,2),$=S(h);Z($,{name:"group1",value:2,get group(){return F(w)},set group(o){J(w,o,!0)},children:(o,r)=>{a();var d=p("Checked state");n(o,d)},$$slots:{default:!0}}),O(h);var m=s(h,2),g=S(m);Z(g,{name:"group1",value:3,get group(){return F(w)},set group(o){J(w,o,!0)},children:(o,r)=>{a();var d=p("Default radio");n(o,d)},$$slots:{default:!0}}),O(m),n(P,e)},$$slots:{default:!0}}),n(E,y)}var Vt=v("Dropdown radio<!>",1),Jt=v('<li class="hover:bg-neutral-tertiary-medium rounded-sm p-2"><!></li> <li class="hover:bg-neutral-tertiary-medium rounded-sm p-2"><!></li> <li class="hover:bg-neutral-tertiary-medium rounded-sm p-2"><!></li>',1),qt=v("<!> <!>",1);function Yt(E){let w=sn(2);var y=qt(),C=l(y);L(C,{children:(P,u)=>{a();var e=Vt(),i=s(l(e));U(i,{class:"ms-2 h-6 w-6 text-white"}),n(P,e)},$$slots:{default:!0}});var D=s(C,2);G(D,{simple:!0,class:"w-48 space-y-1 p-3",children:(P,u)=>{var e=Jt(),i=l(e),k=S(i);Z(k,{name:"group2",value:1,get group(){return F(w)},set group(o){J(w,o,!0)},children:(o,r)=>{a();var d=p("Default radio");n(o,d)},$$slots:{default:!0}}),O(i);var h=s(i,2),$=S(h);Z($,{name:"group2",value:2,get group(){return F(w)},set group(o){J(w,o,!0)},children:(o,r)=>{a();var d=p("Checked state");n(o,d)},$$slots:{default:!0}}),O(h);var m=s(h,2),g=S(m);Z(g,{name:"group2",value:3,get group(){return F(w)},set group(o){J(w,o,!0)},children:(o,r)=>{a();var d=p("Default radio");n(o,d)},$$slots:{default:!0}}),O(m),n(P,e)},$$slots:{default:!0}}),n(E,y)}var Kt=v("Dropdown radio<!>",1),Xt=v('<li class="hover:bg-neutral-tertiary-medium rounded-sm p-2"><!> <!></li> <li class="hover:bg-neutral-tertiary-medium rounded-sm p-2"><!> <!></li> <li class="hover:bg-neutral-tertiary-medium rounded-sm p-2"><!> <!></li>',1),Zt=v("<!> <!>",1);function Qt(E){let w=sn(2);

1var y=Zt(),C=l(y);L(C,{children:(P,u)=>{a();var e=Kt(),i=s(l(e));U(i,{class:"ms-2 h-6 w-6 text-white"}),n(P,e)},$$slots:{default:!0}});var D=s(C,2);G(D,{simple:!0,class:"w-60 space-y-1 p-3",children:(P,u)=>{var e=Xt(),i=l(e),k=S(i);Z(k,{name:"group3",value:1,get group(){return F(w)},set group(I){J(w,I,!0)},children:(I,_)=>{a();var B=p("Enable notifications");n(I,B)},$$slots:{default:!0}});var h=s(k,2);nn(h,{class:"ps-6",children:(I,_)=>{a();var B=p("Some helpful instruction goes over here.");n(I,B)},$$slots:{default:!0}}),O(i);var $=s(i,2),m=S($);Z(m,{name:"group3",value:2,get group(){return F(w)},set group(I){J(w,I,!0)},children:(I,_)=>{a();var B=p("Enable 2FA auth");n(I,B)},$$slots:{default:!0}});var g=s(m,2);nn(g,{class:"ps-6",children:(I,_)=>{a();var B=p("Some helpful instruction goes over here.");n(I,B)},$$slots:{default:!0}}),O($);var o=s($,2),r=S(o);Z(r,{name:"group3",value:3,get group(){return F(w)},set group(I){J(w,I,!0)},children:(I,_)=>{a();var B=p("Subscribe newsletter");n(I,B)},$$slots:{default:!0}});var d=s(r,2);nn(d,{class:"ps-6",children:(I,_)=>{a();var B=p("Some helpful instruction goes over here.");n(I,B)},$$slots:{default:!0}}),O(o),n(P,e)},$$slots:{default:!0}}),n(E,y)}var np=v("Dropdown toggle<!>",1),sp=v("<li><!></li> <li><!></li> <li><!></li>",1),ap=v("<!> <!>",1);function tp(E){var w=ap(),y=l(w);L(y,{children:(D,P)=>{a();var u=np(),e=s(l(u));U(e,{class:"ms-2 h-6 w-6 text-white"}),n(D,u)},$$slots:{default:!0}});var C=s(y,2);G(C,{simple:!0,class:"w-56 space-y-1 p-3",children:(D,P)=>{var u=sp(),e=l(u),i=S(e);Mn(i,{class:"hover:bg-neutral-tertiary-medium rounded-sm p-2",children:(g,o)=>{a();var r=p("Default toggle");n(g,r)},$$slots:{default:!0}}),O(e);var k=s(e,2),h=S(k);Mn(h,{class:"hover:bg-neutral-tertiary-medium rounded-sm p-2",checked:!0,children:(g,o)=>{a();var r=p("Checked state");n(g,r)},$$slots:{default:!0}}),O(k);var $=s(k,2),m=S($);Mn(m,{class:"hover:bg-neutral-tertiary-medium rounded-sm p-2",children:(g,o)=>{a();var r=p("Default toggle");n(g,r)},$$slots:{default:!0}}),O($),n(D,u)},$$slots:{default:!0}}),n(E,w)}var pp=v('<img src="/images/flowbite-svelte-icon-logo.svg" class="me-3 h-6 sm:h-9" alt="Flowbite Logo"/>

1 <span class="text-heading self-center text-xl font-semibold whitespace-nowrap">Flowbite</span>',1),op=v("Dropdown<!>",1),ep=v("<!> <!> <!> <!>",1),cp=v("<!> <!> <!> <!> <!> <!>",1),lp=v("<!> <!> <!>",1);function up(E){Na(E,{children:(w,y)=>{var C=lp(),D=l(C);za(D,{href:"/",children:(e,i)=>{var k=pp();a(2),n(e,k)},$$slots:{default:!0}});var P=s(D,2);Ta(P,{});var u=s(P,2);Ua(u,{class:"ms-3 pt-1",children:(e,i)=>{var k=cp(),h=l(k);an(h,{href:"/",children:(d,I)=>{a();var _=p("Home");n(d,_)},$$slots:{default:!0}});var $=s(h,2);an($,{class:"cursor-pointer",children:(d,I)=>{a();var _=op(),B=s(l(_));U(B,{class:"text-fg-brand ms-2 inline h-6 w-6"}),n(d,_)},$$slots:{default:!0}});var m=s($,2);G(m,{simple:!0,children:(d,I)=>{var _=ep(),B=l(_);f(B,{children:(V,X)=>{a();var q=p("Dashboard");n(V,q)},$$slots:{default:!0}});var H=s(B,2);f(H,{children:(V,X)=>{a();var q=p("Settings");n(V,q)},$$slots:{default:!0}});var j=s(H,2);f(j,{children:(V,X)=>{a();var q=p("Earnings");n(V,q)},$$slots:{default:!0}});var M=s(j,2);f(M,{children:(V,X)=>{a();var q=p("Sign out");n(V,q)},$$slots:{default:!0}}),n(d,_)},$$slots:{default:!0}});var g=s(m,2);an(g,{href:"#",children:(d,I)=>{a();var _=p("Services");n(d,_)},$$slots:{default:!0}});var o=s(g,2);an(o,{href:"#",children:(d,I)=>{a();var _=p("Pricing");n(d,_)},$$slots:{default:!0}});var r=s(o,2);an(r,{href:"#",children:(d,I)=>{a();var _=p("Contact");n(d,_)},$$slots:{default:!0}}),n(e,k)},$$slots:{default:!0}}),n(w,C)},$$slots:{default:!0}})}var rp=v("Project users<!>",1),ip=v("<!>Jese Leos",1),kp=v("<!>Robert Gouth",1),dp=v("<!>Bonnie Green",1),mp=v("<!>Robert Wall",1),gp=v("<!>Joseph Mcfall",1),vp=v("<!>Leslie Livingston",1),wp=v("<!> <!> <!> <!> <!> <!>",1),hp=v('<!> <a href="/" class="text-fg-brand bg-neutral-tertiary hover:bg-neutral-tertiary-medium -mb-1 flex items-center px-3 py-2 text-sm font-medium hover:underline"><!>Add new user</a>',1),fp=v("<!> <!>",1);function $p(E){var w=fp(),y=l(w);L(y,{children:(D,P)=>{a();var u=rp(),e=s(l(u));U(e,{class:"ms-2 h-6 w-6 text-white"}),n(D,u)},$$slots:{default:!0}});var C=s(y,2);G(C,{class:"h-48 w-48 overflow-y-auto py-1",children:(D,P)=>{var u=hp(),e=l(u);Q(e,{children:(h,$)=>{var m=wp(),g=l(m);f(g,{class:"flex items-center gap-2 text-base font-semibold",children:(B,H)=>{var j=ip(),M=l(j);Y(M,{src:"/images/people/profile-picture-1.jpg",size:"xs"}),a(),n(B,j)},$$slots:{default:!0}});var o=s(g,2);f(o,{class:"flex items-center gap-2 text-base font-semibold",children:(B,H)=>{var j=kp(),M=l(j);Y(M,{src:"/images/people/profile-picture-2.jpg",size:"xs"}),a(),n(B,j)},$$slots:{default:!0}});var r=s(o,2);f(r,{class:"flex items-center gap-2 text-base font-semibold",children:(B,H)=>{var j=dp(),M=l(j);Y(M,{src:"/images/people/profile-picture-5.jpg",size:"xs"}),a(),n(B,j)},$$slots:{default:!0}});var d=s(r,2);f(d,{class:"flex items-center gap-2 text-base font-semibold",children:(B,H)=>{var j=mp(),M=l(j);Y(M,{src:"/images/people/profile-picture-1.jpg",size:"xs"}),a(),n(B,j)},$$slots:{default:!0}});var I=s(d,2);f(I,{class:"flex items-center gap-2 text-base font-semibold",children:(B,H)=>{var j=gp(),M=l(j);Y(M,{src:"/images/people/profile-picture-2.jpg",size:"xs"}),a(),n(B,j)},$$slots:{default:!0}});var _=s(I,2);f(_,{class:"flex items-center gap-2 text-base font-semibold",children:(B,H)=>{var j=vp(),M=l(j);Y(M,{src:"/images/people/profile-picture-5.jpg",size:"xs"}),a(),n(B,j)},$$slots:{default:!0}}),n(h,m)},$$slots:{default:!0}});var i=s(e,2),k=S(i);U(k,{class:"ms-2 h-6 w-6"}),a(),O(i),n(D,u)},$$slots:{default:!0}}),n(E,w)}var Dp=v("Dropdown search<!>",1),_p=v('<li class="hover:bg-neutral-tertiary-medium rounded-sm p-2"><!></li>'),xp=v('<div class="p-3"><!></div> <!> <a href="/" class="bg-neutral-tertiary text-fg-danger hover:bg-neutral-tertiary-medium -mb-1 flex items-center p-3 text-sm font-medium hover:underline"><!>Delete user</a>',1),bp=v("<!> <!>",1);function yp(E,w){ln(w,!0);let y=sn("");const C=[{name:"Robert Gouth",checked:!1},{name:"Jese Leos",checked:!1},{name:"Bonnie Green",checked:!0}];let D=Vn(()=>C.filter(i=>i.name.toLowerCase().indexOf(F(y)?.toLowerCase())!==-1));var P=bp(),u=l(P);L(u,{children:(i,k)=>{a();

1var h=Dp(),$=s(l(h));U($,{class:"ms-2 h-6 w-6 text-white"}),n(i,h)},$$slots:{default:!0}});var e=s(u,2);G(e,{children:(i,k)=>{var h=xp(),$=l(h),m=S($);Ea(m,{size:"md",get value(){return F(y)},set value(d){J(y,d,!0)}}),O($);var g=s($,2);Q(g,{class:"h-24 overflow-y-auto",children:(d,I)=>{var _=A(),B=l(_);Ra(B,17,()=>F(D),H=>H.name,(H,j,M)=>{var V=_p(),X=S(V);K(X,{get checked(){return F(j).checked},set checked(q){F(j).checked=q},children:(q,on)=>{a();var en=p();Jn(()=>Yn(en,F(j).name)),n(q,en)},$$slots:{default:!0}}),O(V),n(H,V)}),n(d,_)},$$slots:{default:!0}});var o=s(g,2),r=S(o);Ma(r,{class:"text-fg-danger me-2 h-4 w-4"}),a(),O(o),n(i,h)},$$slots:{default:!0}}),n(E,P),un()}var Ip=v("<!> <!> <!> <!>",1),Pp=v("<!> <!> <!>",1);function Bp(E){var w=Pp(),y=l(w);Fa(y,{class:"dots-menu text-body"});var C=s(y,2);Va(C,{class:"dots-menu text-body"});var D=s(C,2);G(D,{simple:!0,triggeredBy:".dots-menu",children:(P,u)=>{var e=Ip(),i=l(e);f(i,{children:(m,g)=>{a();var o=p("Dashboard");n(m,o)},$$slots:{default:!0}});var k=s(i,2);f(k,{children:(m,g)=>{a();var o=p("Settings");n(m,o)},$$slots:{default:!0}});var h=s(k,2);f(h,{children:(m,g)=>{a();var o=p("Earnings");n(m,o)},$$slots:{default:!0}});var $=s(h,2);f($,{children:(m,g)=>{a();var o=p("Sign out");n(m,o)},$$slots:{default:!0}}),n(P,e)},$$slots:{default:!0}}),n(E,w)}var Cp=v(`<!> <div class="w-full ps-3"><div class="text-body mb-1.5 text-sm">New message from <span class="text-heading font-semibold">Jese Leos</span> : "Hey, what's up? All set for the presentation?"</div> <div class="text-fg-brand text-xs">a few moments ago</div></div>`,1),Sp=v('<!> <div class="w-full ps-3"><div class="text-body mb-1.5 text-sm"><span class="text-heading font-semibold">Joseph Mcfall</span> and <span class="text-heading font-medium">5 others</span> started following you.</div> <div class="text-fg-brand text-xs">10 minutes ago</div></div>',1),Op=v('<!> <div class="w-full ps-3"><div class="text-body mb-1.5 text-sm"><span class="text-heading font-semibold">Bonnie Green</span> and <span class="text-heading font-medium">141 others</span> love your story. See it and view more stories.</div> <div class="text-fg-brand text-xs">44 minutes ago</div></div>',1),jp=v("<!> <!> <!>",1),Ep=v('<div class="py-2 text-center font-bold">Notifications</div> <!> <a href="/" class="bg-neutral-tertiary text-heading hover:bg-neutral-tertiary-medium -my-1 block py-2 text-center text-sm font-medium"><div class="inline-flex items-center"><!> View all</div></a>',1),Rp=v('<div id="bell" class="text-body hover:text-heading inline-flex items-center text-center text-sm font-medium focus:outline-hidden"><!> <div class="relative flex"><div class="border-buffer bg-danger relative end-4 -top-2 inline-flex h-3 w-3 rounded-full border-2"></div></div></div> <!>',1);function Hp(E){var w=Rp(),y=l(w),C=S(y);Ja(C,{class:"h-8 w-8"}),a(2),O(y);var D=s(y,2);G(D,{triggeredBy:"#bell",class:"divide-default w-full max-w-sm divide-y rounded-sm",children:(P,u)=>{var e=Ep(),i=s(l(e),2);Q(i,{children:(m,g)=>{var o=jp(),r=l(o);f(r,{class:"flex space-x-4 rtl:space-x-reverse",children:(_,B)=>{var H=Cp(),j=l(H);Y(j,{src:"/images/people/profile-picture-1.jpg",dot:{color:"neutral"}}),a(2),n(_,H)},$$slots:{default:!0}});var d=s(r,2);f(d,{class:"flex space-x-4 rtl:space-x-reverse",children:(_,B)=>{var H=Sp(),j=l(H);Y(j,{src:"/images/people/profile-picture-2.jpg",dot:{color:"danger"}}),a(2),n(_,H)},$$slots:{default:!0}});var I=s(d,2);f(I,{class:"flex space-x-4 rtl:space-x-reverse",children:(_,B)=>{var H=Op(),j=l(H);Y(j,{src:"/images/people/profile-picture-5.jpg",dot:{color:"success"}}),a(2),n(_,H)},$$slots:{default:!0}}),n(m,o)},$$slots:{default:!0}});var k=s(i,2),h=S(k),$=S(h);qa($,{class:"text-body me-2 h-4 w-4"}),a(),O(h),O(k),n(P,e)},$$slots:{default:!0}}),n(E,w)}var Gp=v('<span class="text-heading block text-sm">Bonnie Green</span> <span class="block truncate text-sm font-medium">[email protected]</span>',1),Lp=v("<!> <!> <!> <!>",1),Ws=v("<!> <!>",1);function Ap(E){var w=Ws(),y=l(w);Y(y,{class:"acs",src:"/images/people/profile-picture-5.jpg",dot:{color:"neutral"}});var C=s(y,2);G(C,{triggeredBy:".acs",children:(D,P)=>{var u=Ws(),e=l(u);pn(e,{children:(k,h)=>{var $=Gp();a(2),n(k,$)},$$slots:{default:!0}});var i=s(e,2);Q(i,{children:(k,h)=>{var $=Lp(),m=l($);f(m,{children:(d,I)=>{a();var _=p("Dashboard");n(d,_)},$$slots:{default:!0}});var g=s(m,2);f(g,{children:(d,I)=>{a();var _=p("Settings");n(d,_)},$$slots:{default:!0}});var o=s(g,2);f(o,{children:(d,I)=>{a();var _=p("Earnings");n(d,_)},$$slots:{default:!0}});var r=s(o,2);f(r,{children:(d,I)=>{a();var _=p("Sign out");n(d,_)},$$slots:{default:!0}}),n(k,$)},$$slots:{default:!0}}),n(D,u)},$$slots:{default:!0}}),n(E,w)}var Wp=v("<!> Bonnie Green",1),Np=v('<span class="text-heading block text-sm">Bonnie Green</span> <span class="block truncate text-sm font-medium">[email protected]</span>',1),Ns=v("<!> <!> <!>",1),zp=v("<!> <!>",1);function Up(E){var w=zp(),y=l(w);L(y,{pill:!0,id:"avatar_with_name",class:"p-1!",children:(D,P)=>{var u=Wp(),e=l(u);Y(e,{src:"/images/people/profile-picture-5.jpg",class:"me-2"}),a(),n(D,u)},$$slots:{default:!0}});var C=s(y,2);G(C,{triggeredBy:"#avatar_with_name",children:(D,P)=>{var u=Ns(),e=l(u);pn(e,{children:(h,$)=>{var m=Np();a(2),n(h,m)},$$slots:{default:!0}});var i=s(e,2);Q(i,{children:(h,$)=>{var m=Ns(),g=l(m);f(g,{children:(d,I)=>{a();var _=p("Dashboard");n(d,_)},$$slots:{default:!0}});var o=s(g,2);f(o,{children:(d,I)=>{a();var _=p("Settings");n(d,_)},$$slots:{default:!0}});var r=s(o,2);f(r,{children:(d,I)=>{a();var _=p("Earnings");n(d,_)},$$slots:{default:!0}}),n(h,m)},$$slots:{default:!0}});var k=s(i,2);pn(k,{children:(h,$)=>{a();var m=p("Sign out");n(h,m)},$$slots:{default:!0}}),n(D,u)},$$slots:{default:!0}}),n(E,w)}var zs=v("<!> <!> <!>",1),Tp=v("<!> <!>",1),Mp=v("Small dropdown<!>",1),Fp=v("Large dropdown<!>",1);function Vp(E){var w=zs(),y=l(w);G(y,{triggeredBy:".sizes",children:(P,u)=>{var e=Tp(),i=l(e);Q(i,{children:(h,$)=>{var m=zs(),g=l(m);f(g,{children:(d,I)=>{a();var _=p("Dashboard");n(d,_)},$$slots:{default:!0}});var o=s(g,2);f(o,{children:(d,I)=>{a();var _=p("Settings");n(d,_)},$$slots:{default:!0}});var r=s(o,2);f(r,{children:(d,I)=>{a();var _=p("Earnings");n(d,_)},$$slots:{default:!0}}),n(h,m)},$$slots:{default:!0}});var k=s(i,2);pn(k,{children:(h,$)=>{a();var m=p("Sign out");n(h,m)},$$slots:{default:!0}}),n(P,e)},$$slots:{default:!0}});var C=s(y,2);L(C,{class:"sizes",size:"sm",children:(P,u)=>{a();var e=Mp(),i=s(l(e));U(i,{class:"ms-2 h-6 w-6 text-white"}),n(P,e)},$$slots:{default:!0}});var D=s(C,2);L(D,{class:"sizes",size:"lg",children:(P,u)=>{a();var e=Fp(),i=s(l(e));U(i,{class:"ms-2 h-6 w-6 text-white"}),n(P,e)},$$slots:{default:!0}}),n(E,w)}var cn=v("<!> <!> <!> <!>",1),Jp=v("Dropdown top<!>",1),qp=v("<!>Dropdown left",1),Yp=v("Dropdown right<!>",1),Kp=v("Dropdown bottom<!>",1),Xp=v('<!> <!> <!> <!> <div id="placements" class="my-8 flex h-96 flex-col items-center justify-center gap-2"><!> <div class="flex space-x-2 rtl:space-x-reverse"><!> <!></div> <!></div>',1);function Zp(E){var w=Xp(),y=l(w);G(y,{simple:!0,placement:"top",triggeredBy:"#top-dd",children:(m,g)=>{var o=cn(),r=l(o);f(r,{children:(B,H)=>{a();var j=p("Dashboard");n(B,j)},$$slots:{default:!0}});var d=s(r,2);f(d,{children:(B,H)=>{a();var j=p("Settings");n(B,j)},$$slots:{default:!0}});var I=s(d,2);f(I,{children:(B,H)=>{a();var j=p("Earnings");n(B,j)},$$slots:{default:!0}});var _=s(I,2);f(_,{children:(B,H)=>{a();var j=p("Sign out");n(B,j)},$$slots:{default:!0}}),n(m,o)},$$slots:{default:!0}});var C=s(y,2);G(C,{simple:!0,placement:"bottom",triggeredBy:"#bottom-dd",children:(m,g)=>{var o=cn(),r=l(o);f(r,{children:(B,H)=>{a();var j=p("Dashboard");n(B,j)},$$slots:{default:!0}});var d=s(r,2);f(d,{children:(B,H)=>{a();var j=p("Settings");n(B,j)},$$slots:{default:!0}});var I=s(d,2);f(I,{children:(B,H)=>{a();var j=p("Earnings");n(B,j)},$$slots:{default:!0}});var _=s(I,2);f(_,{children:(B,H)=>{a();var j=p("Sign out");n(B,j)},$$slots:{default:!0}}),n(m,o)},$$slots:{default:!0}});var D=s(C,2);G(D,{simple:!0,placement:"right",triggeredBy:"#right-dd",children:(m,g)=>{var o=cn(),r=l(o);f(r,{children:(B,H)=>{a();var j=p("Dashboard");n(B,j)},$$slots:{default:!0}});var d=s(r,2);f(d,{children:(B,H)=>{a();var j=p("Settings");n(B,j)},$$slots:{default:!0}});var I=s(d,2);f(I,{children:(B,H)=>{a();var j=p("Earnings");n(B,j)},$$slots:{default:!0}});var _=s(I,2);f(_,{children:(B,H)=>{a();var j=p("Sign out");n(B,j)},$$slots:{default:!0}}),n(m,o)},$$slots:{default:!0}});var P=s(D,2);G(P,{simple:!0,placement:"left",triggeredBy:"#left-dd",children:(m,g)=>{var o=cn(),r=l(o);f(r,{children:(B,H)=>{a();var j=p("Dashboard");n(B,j)},$$slots:{default:!0}});var d=s(r,2);f(d,{children:(B,H)=>{a();var j=p("Settings");n(B,j)},$$slots:{default:!0}});var I=s(d,2);f(I,{children:(B,H)=>{a();var j=p("Earnings");n(B,j)},$$slots:{default:!0}});var _=s(I,2);f(_,{children:(B,H)=>{a();var j=p("Sign out");n(B,j)},$$slots:{default:!0}}),n(m,o)},$$slots:{default:!0}});var u=s(P,2),e=S(u);L(e,{id:"top-dd",children:(m,g)=>{a();var o=Jp(),r=s(l(o));Vs(r,{class:"ms-2 h-6 w-6 text-white"}),n(m,o)},$$slots:{default:!0}});var i=s(e,2),k=S(i);L(k,{id:"left-dd",children:(m,g)=>{var o=qp(),r=l(o);Ya(r,{class:"me-2 h-6 w-6 text-white"}),a(),n(m,o)},$$slots:{default:!0}});var h=s(k,2);L(h,{id:"right-dd",children:(m,g)=>{a();var o=Yp(),r=s(l(o));qn(r,{class:"ms-2 h-6 w-6 text-white"}),n(m,o)},$$slots:{default:!0}}),O(i);var $=s(i,2);L($,{id:"bottom-dd",children:(m,g)=>{a();var o=Kp(),r=s(l(o));U(r,{class:"ms-2 h-6 w-6 text-white"}),n(m,o)},$$slots:{default:!0}}),O(u),n(E,w)}var Qp=v("Left start<!>",1),no=v("Right end<!>",1),so=v("<!> <!> <!> <!>",1),ao=v("<div><!> <!></div> <!>",1);function to(E){let w=sn("left");var y=ao(),C=l(y),D=S(C);L(D,{"data-placement":"left-start",children:(e,i)=>{a();var k=Qp(),h=s(l(k));Vs(h,{class:"ms-2 h-6 w-6 text-white"}),n(e,k)},$$slots:{default:!0}});var P=s(D,2);L(P,{"data-placement":"right-end",children:(e,i)=>{a();var k=no(),h=s(l(k));U(h,{class:"ms-2 h-6 w-6 text-white"}),n(e,k)},$$slots:{default:!0}}),O(C);var u=s(C,2);G(u,{simple:!0,get placement(){return F(w)},triggeredBy:"[data-placement]",children:(e,i)=>{var k=so(),h=l(k);f(h,{children:(o,r)=>{a();var d=p("Dashboard");n(o,d)},$$slots:{default:!0}});var $=s(h,2);f($,{children:(o,r)=>{a();var d=p("Settings");n(o,d)},$$slots:{default:!0}});var m=s($,2);f(m,{children:(o,r)=>{a();var d=p("Earnings");n(o,d)},$$slots:{default:!0}});var g=s(m,2);f(g,{children:(o,r)=>{a();var d=p("Sign out");n(o,d)},$$slots:{default:!0}}),n(e,k)},$$slots:{default:!0}}),Aa("mousedown",C,e=>{const i=e.target?.dataset.placement;i&&J(w,i,!0)}),n(E,y)}Wa(["mousedown"]);var po=v("Scale<!>",1),Fn=v("<!> <!> <!> <!>",1),oo=v("Blur<!>",1);function eo(E){var w=Fn(),y=l(w);L(y,{children:(u,e)=>{a();var i=po(),k=s(l(i));U(k,{class:"ms-2 h-6 w-6 text-white"}),n(u,i)},$$slots:{default:!0}});var C=s(y,2);G(C,{simple:!0,get transition(){return Ha},transitionParams:{duration:800},children:(u,e)=>{var i=Fn(),k=l(i);f(k,{children:(g,o)=>{a();var r=p("Dashboard");n(g,r)},$$slots:{default:!0}});var h=s(k,2);f(h,{children:(g,o)=>{a();var r=p("Settings");n(g,r)},$$slots:{default:!0}});var $=s(h,2);f($,{children:(g,o)=>{a();var r=p("Earnings");n(g,r)},$$slots:{default:!0}});var m=s($,2);f(m,{children:(g,o)=>{a();var r=p("Sign out");n(g,r)},$$slots:{default:!0}}),n(u,i)},$$slots:{default:!0}});var D=s(C,2);L(D,{children:(u,e)=>{a();var i=oo(),k=s(l(i));U(k,{class:"ms-2 h-6 w-6 text-white"}),n(u,i)},$$slots:{default:!0}});var P=s(D,2);G(P,{simple:!0,get transition(){return Ga},transitionParams:{duration:800},children:(u,e)=>{var i=Fn(),k=l(i);f(k,{children:(g,o)=>{a();var r=p("Dashboard");n(g,r)},$$slots:{default:!0}});var h=s(k,2);f(h,{children:(g,o)=>{a();var r=p("Settings");n(g,r)},$$slots:{default:!0}});var $=s(h,2);f($,{children:(g,o)=>{a();var r=p("Earnings");n(g,r)},$$slots:{default:!0}});var m=s($,2);f(m,{children:(g,o)=>{a();var r=p("Sign out");n(g,r)},$$slots:{default:!0}}),n(u,i)},$$slots:{default:!0}}),n(E,w)}var co=v("Dropdown button<!>",1),Us=v("<!> <!>",1);function lo(E){const w=P=>{P.preventDefault(),alert("Clicked on: "+P.target)};var y=Us(),C=l(y);L(C,{children:(P,u)=>{a();var e=co(),i=s(l(e));U(i,{class:"ms-2 h-6 w-6 text-white"}),n(P,e)},$$slots:{default:!0}});var D=s(C,2);

1G(D,{simple:!0,children:(P,u)=>{var e=Us(),i=l(e);f(i,{href:"/link",onclick:w,children:(h,$)=>{a();var m=p("Rendered as link");n(h,m)},$$slots:{default:!0}});var k=s(i,2);f(k,{onclick:w,children:(h,$)=>{a();var m=p("Rendered as button");n(h,m)},$$slots:{default:!0}}),n(P,e)},$$slots:{default:!0}}),n(E,y)}var uo=v("Dropdown button<!>",1),Ts=v("<!> <!>",1);function ro(E){var w=Ts(),y=l(w);L(y,{children:(D,P)=>{a();var u=uo(),e=s(l(u));U(e,{class:"ms-2 h-6 w-6 text-white"}),n(D,u)},$$slots:{default:!0}});var C=s(y,2);G(C,{simple:!0,onclose:D=>console.log("Dropdown closed",D),children:(D,P)=>{var u=Ts(),e=l(u);f(e,{children:(k,h)=>{a();var $=p("Dashboard");n(k,$)},$$slots:{default:!0}});var i=s(e,2);f(i,{children:(k,h)=>{a();var $=p("Settings");n(k,$)},$$slots:{default:!0}}),n(D,u)},$$slots:{default:!0}}),n(E,w)}var io=v("Dropdown button<!>",1),Ms=v("<!> <!>",1);function ko(E){var w=Ms(),y=l(w);L(y,{children:(D,P)=>{a();var u=io(),e=s(l(u));U(e,{class:"ms-2 h-6 w-6 text-white"}),n(D,u)},$$slots:{default:!0}});var C=s(y,2);G(C,{simple:!0,ontoggle:D=>{D.newState==="closed"&&console.log("closed by ontoggle")},children:(D,P)=>{var u=Ms(),e=l(u);f(e,{children:(k,h)=>{a();var $=p("Dashboard");n(k,$)},$$slots:{default:!0}});var i=s(e,2);f(i,{children:(k,h)=>{a();var $=p("Settings");n(k,$)},$$slots:{default:!0}}),n(D,u)},$$slots:{default:!0}}),n(E,w)}const Js={layout:"componentLayout",title:"Svelte Dropdown - Flowbite",breadcrumb_title:"Svelte Dropdown",component_title:"Dropdown",dir:"Components",description:"Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements",thumbnailSize:"w-28"},{layout:ae,title:te,breadcrumb_title:pe,component_title:mo,dir:oe,description:ee,thumbnailSize:ce}=Js;var go=v('<p>The dropdown component can be used to show a list of menu items when clicking on an element such as a button and hiding it when clicking outside of the triggering element.</p> <!> <div><!></div> <!> <p>If you want to show a dropdown menu when clicking on an element add the <!> and <!> components.</p> <div><!></div> <!> <p>Utilize the <!> prop within the <!> component to incorporate a hyperlink. To initiate the application of the active class, include the <!> prop within the <!> component:</p> <div><!></div> <p>To change the active class, use the <!> prop:</p> <div><!></div> <!> <p>You can use the <!> component to add separate elements inside the dropdown menu. Note that you have a natural divider between main content of the <!> and its header and footer.</p> <div><!></div> <!> <p>Use this example to show extra information outside of the list of menu items inside the dropdown.</p> <div><!></div> <!> <p>Use this example to enable multi-level dropdown menus by adding stacked elements inside of each other.</p> <div><!></div> <!> <p>Use <!> and <!> to navigate between buttons or links in the dropdown. Press <!> to close it.</p> <!> <p>When you want to control your dropdown open status via javascript code you can bind to <!> property.</p> <div><!></div> <!> <p>Add multiple checkbox elements inside your dropdown menu to enable more advanced input interaction.</p> <div><!></div> <!> <p>Use this example to update the background color of a menu item when using a list of checkbox elements.</p> <div><!></div> <!> <p>Add an extra helper text to each checkbox element inside the dropdown menu list with this example.</p> <div><!></div> <!> <p>Add multiple radio elements inside your dropdown menu to enable more advanced input interaction.</p> <div><!></div> <!> <p>Use this example to update the background color of a menu item when using a list of radio elements.</p> <div><!></div> <!> <p>Add an extra helper text to each radio element inside the dropdown menu list with this example.</p> <div><!></div> <!> <p>Show a list of toggle switch elements inside the dropdown menu to enable a yes or no type of choice.</p> <div><!></div> <!> <p>You can also use the dropdown element inside a navigation bar and add a second level of navigation hierarchy, but make sure to use Navbar components.</p> <div><!></div> <!> <p>This example can be used when you want to show a long list of items that won’t affect the height of the dropdown menu by enabling a scrolling behaviour.</p> <div><!></div> <!> <p>Use this example if you want to add a search bar inside the dropdown menu to be able to filter through a long list of menu items with scrolling behaviour.</p> <div><!></div> <!> <p>Use the menu icon trigger element on components such as cards as an alternative element to the button.</p> <div><!></div> <!> <p>Use this example to show a list of notifications inside your application by providing more detailed information such as the user avatar, content and time of notification triggered by a notification bell icon.</p> <div><!></div> <!> <p>This example can be used to show a list of menu items and options when a user is logged into your application.</p> <div><!></div> <!> <p>Use this example to also show the name or email of the user next to the avatar for the dropdown menu.</p> <div><!></div> <!> <p>

1The dropdown menus work with buttons of all sizes including smaller or larger ones.</p> <div><!></div> <!> <p>You can also use the <!> options to choose the placement of the dropdown menu. By default the positioning is set to the bottom side of the button.</p> <div><!></div> <!> <p>As dropdown is implemented using the <a href="https://floating-ui.com" rel="nofollow">Floating UI</a> library, placement can be further specified by using the <!> type defined in <a href="https://floating-ui.com/docs/computePosition#placement" rel="nofollow">Floating UI docs</a></p> <div><!></div> <!> <p>Since the <!> component extends <!>, it also supports the <!> and <!> props for customizing animations.</p> <div><!></div> <!> <p><!> renders to link or button or div wrapped with <!> element depending whether you supplied the <!> or <!> property.</p> <div><!></div> <!> <p>Use <!> to run a callback when the dropdown closes. For more control over state changes, use <!> which fires on both open and close events.</p> <div><!></div> <div><!></div> <!> <p>The component has the following props, type, and default values. See <a href="/docs/pages/typescript">types page</a> for type information.</p> <!> <!> <ul><li><a href="https://flowbite.com/docs/components/dropdown/" rel="nofollow">Flowbite Dropdown</a></li></ul> <!> <!> <!> <!>',1);function le(E,w){const y=Ca(w,["children","$$slots","$$events","$$legacy"]);ln(w,!1);const C=Qa(mo);Ba(),Oa(E,Sa(()=>y,()=>Js,{children:(D,P)=>{var u=go(),e=s(l(u),2);z(e,{children:(c,b)=>{a();var t=p("Setup");n(c,t)}});var i=s(e,2),k=S(i);N(k,{src:`<script lang="ts">
2  import { Dropdown, DropdownItem, DropdownDivider, DropdownHeader } from "flowbite-svelte";
3<\/script>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,hideOutput:!0},example:t=>{},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
4  <span class="token keyword">import</span> <span class="token punctuation">{</span> Dropdown<span class="token punctuation">,</span> DropdownItem<span class="token punctuation">,</span> DropdownDivider<span class="token punctuation">,</span> DropdownHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
5</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>`),n(t,x)},$$slots:{example:!0,code:!0}}),O(i);var h=s(i,2);z(h,{children:(c,b)=>{a();var t=p("Examples");n(c,t)}});var $=s(h,2),m=s(S($));T(m,{children:(c,b)=>{a();var t=p("Dropdown");n(c,t)}});var g=s(m,2);T(g,{children:(c,b)=>{a();var t=p("DropdownItem");n(c,t)}}),a(),O($);var o=s($,2),r=S(o);N(r,{src:`<script lang="ts">
6  import { Button, Dropdown, DropdownItem } from "flowbite-svelte";
7  import { ChevronDownOutline } from "flowbite-svelte-icons";
8<\/script>
9
10<Button>Dropdown button<ChevronDownOutline class="ms-2 h-6 w-6 text-white" /></Button>
11<Dropdown simple>
12  <DropdownItem>Dashboard</DropdownItem>
13  <DropdownItem>Settings</DropdownItem>
14  <DropdownItem>Earnings</DropdownItem>
15  <DropdownItem>Sign out</DropdownItem>
16</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start h-64",hideResponsiveButtons:!0},example:t=>{tt(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
17  <span class="token keyword">

17import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> DropdownItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
18  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
19</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
20
21<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
22<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span><span class="token punctuation">></span></span>
23  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Dashboard<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
24  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Settings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
25  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Earnings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
26  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Sign out<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
27<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)},$$slots:{example:!0,code:!0}}),O(o);var d=s(o,2);z(d,{children:(c,b)=>{a();var t=p("Adding links and active class");n(c,t)}});var I=s(d,2),_=s(S(I));T(_,{children:(c,b)=>{a();var t=p("href");n(c,t)}});var B=s(_,2);T(B,{children:(c,b)=>{a();var t=p("DropdownItem");n(c,t)}});var H=s(B,2);T(H,{children:(c,b)=>{a();var t=p("activeUrl");n(c,t)}});var j=s(H,2);T(j,{children:(c,b)=>{a();var t=p("Dropdown");n(c,t)}}),a(),O(I);var M=s(I,2),V=S(M);N(V,{src:`<script lang="ts">
28  import { Button, Dropdown, DropdownItem } from "flowbite-svelte";
29  import { ChevronDownOutline } from "flowbite-svelte-icons";
30  import { page } from "$app/state";
31  let activeUrl = $derived(page.url.pathname);
32<\/script>
33
34<Button>Dropdown button<ChevronDownOutline class="ms-2 h-6 w-6 text-white" /></Button>
35<Dropdown {activeUrl} simple>
36  <DropdownItem href="/">Home</DropdownItem>
37  <DropdownItem href="/docs/components/dropdown">Dropdown</DropdownItem>

38  <DropdownItem href="/docs/components/accordion">Accordion</DropdownItem>
39  <DropdownItem href="/docs/components/alert">Alert</DropdownItem>
40</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start h-64",hideResponsiveButtons:!0},example:t=>{ct(t,{})},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
41  <span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> DropdownItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
42  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
43  <span class="token keyword">import</span> <span class="token punctuation">{</span> page <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"$app/state"</span><span class="token punctuation">;</span>
44  <span class="token keyword">let</span>

44 activeUrl <span class="token operator">=</span> <span class="token function">$derived</span><span class="token punctuation">(</span>page<span class="token punctuation">.</span>url<span class="token punctuation">.</span>pathname<span class="token punctuation">)</span><span class="token punctuation">;</span>
45</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
46
47<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
48<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token language-javascript"><span class="token punctuation">{</span>activeUrl<span class="token punctuation">}</span></span> <span class="token attr-name">simple</span><span class="token punctuation">></span></span>
49  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
50  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/docs/components/dropdown<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
51  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/docs/components/accordion<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Accordion<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
52  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/docs/components/alert<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Alert<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
53<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)},$$slots:{example:!0,code:!0}}),O(M);var X=s(M,2),q=s(S(X));T(q,{children:(c,b)=>{a();var t=p("activeClass");n(c,t)}}),a(),O(X);var on=s(X,2),en=S(on);N(en,{src:`<script lang="ts">
54  import { Button, Dropdown, DropdownItem } from "flowbite-svelte";
55  import { ChevronDownOutline } from "flowbite-svelte-icons";
56  import { page } from "$app/state";
57  let activeUrl = $derived(page.url.pathname);
58  let activeClass = "text-green-500 dark:text-green-300 hover:text-green-700 dark:hover:text-green-500";
59<\/script>
60
61<Button>Dropdown button<ChevronDownOutline class="ms-2 h-6 w-6 text-white" /></Button>
62<Dropdown {activeUrl} class={activeClass} simple>
63  <DropdownItem href="/">Home</DropdownItem>
64  <DropdownItem href="/docs/components/dropdown">Dropdown</DropdownItem>

65  <DropdownItem href="/docs/components/accordion">Accordion</DropdownItem>
66  <DropdownItem href="/docs/components/alert">Alert</DropdownItem>
67</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start h-64",hideResponsiveButtons:!0},example:t=>{it(t,{})},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
68  <span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> DropdownItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
69  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
70  <span class="token keyword">import</span> <span class="token punctuation">{</span> page <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"$app/state"</span><span class="token punctuation">;</span>
71  <span class="token keyword">let</span>

71 activeUrl <span class="token operator">=</span> <span class="token function">$derived</span><span class="token punctuation">(</span>page<span class="token punctuation">.</span>url<span class="token punctuation">.</span>pathname<span class="token punctuation">)</span><span class="token punctuation">;</span>
72  <span class="token keyword">let</span> activeClass <span class="token operator">=</span> <span class="token string">"text-green-500 dark:text-green-300 hover:text-green-700 dark:hover:text-green-500"</span><span class="token punctuation">;</span>
73</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
74
75<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
76<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token language-javascript"><span class="token punctuation">{</span>activeUrl<span class="token punctuation">}</span></span> <span class="token attr-name">class=</span><span class="token language-javascript"><span class="token punctuation">{</span>activeClass<span class="token punctuation">}</span></span> <span class="token attr-name">simple</span><span class="token punctuation">></span></span>
77  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
78  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/docs/components/dropdown<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
79  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/docs/components/accordion<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Accordion<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
80  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/docs/components/alert<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Alert<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
81<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)}

81,$$slots:{example:!0,code:!0}}),O(on);var Kn=s(on,2);z(Kn,{children:(c,b)=>{a();var t=p("Dropdown divider");n(c,t)}});var rn=s(Kn,2),Xn=s(S(rn));T(Xn,{children:(c,b)=>{a();var t=p("DropdownDivider");n(c,t)}});var qs=s(Xn,2);T(qs,{children:(c,b)=>{a();var t=p("Dropdown");n(c,t)}}),a(),O(rn);var kn=s(rn,2),Ys=S(kn);N(Ys,{src:`<script lang="ts">
82  import { Button, Dropdown, DropdownItem, DropdownDivider } from "flowbite-svelte";
83  import { ChevronDownOutline } from "flowbite-svelte-icons";
84<\/script>
85
86<Button>Dropdown button<ChevronDownOutline class="ms-2 h-6 w-6 text-white" /></Button>
87<Dropdown simple>
88  <DropdownItem>Dashboard</DropdownItem>
89  <DropdownDivider />
90  <DropdownItem>Settings</DropdownItem>
91  <DropdownItem>Earnings</DropdownItem>
92  <DropdownItem>Separated link</DropdownItem>
93</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start h-64",hideResponsiveButtons:!0},example:t=>{gt(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
94  <span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> DropdownItem<span class="token punctuation">,</span> DropdownDivider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
95  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
96</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
97
98<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
99<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span><span class="token punctuation">></span></span>
100  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Dashboard<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
101  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownDivider</span> <span class="token punctuation">/></span></span>
102  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Settings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
103  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Earnings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
104  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
105<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)}

105,$$slots:{example:!0,code:!0}}),O(kn);var Zn=s(kn,2);z(Zn,{children:(c,b)=>{a();var t=p("Dropdown header");n(c,t)}});var dn=s(Zn,4),Ks=S(dn);N(Ks,{src:`<script lang="ts">
106  import { Button, Dropdown, DropdownItem, DropdownGroup, DropdownHeader } from "flowbite-svelte";
107  import { ChevronDownOutline } from "flowbite-svelte-icons";
108<\/script>
109
110<Button>Dropdown button<ChevronDownOutline class="ms-2 h-6 w-6 text-white" /></Button>
111<Dropdown>
112  <DropdownHeader>
113    <span class="text-heading block text-sm">Bonnie Green</span>
114    <span class="block truncate text-sm font-medium">[email protected]</span>
115  </DropdownHeader>
116  <DropdownGroup>
117    <DropdownItem>Dashboard</DropdownItem>
118    <DropdownItem>Settings</DropdownItem>
119    <DropdownItem>Earnings</DropdownItem>
120    <DropdownItem>Sign out</DropdownItem>
121  </DropdownGroup>
122</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start h-80",hideResponsiveButtons:!0},example:t=>{ft(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
123  <span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> DropdownItem<span class="token punctuation">,</span> DropdownGroup<span class="token punctuation">,</span> DropdownHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
124  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
125</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
126
127<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
128<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span><span class="token punctuation">></span></span>
129  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownHeader</span><span class="token punctuation">></span></span>
130    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-heading block text-sm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Bonnie Green<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
131    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block truncate text-sm font-medium<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>[email protected]<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
132  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownHeader</span><span class="token punctuation">></span></span>
133  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownGroup</span><span class="token punctuation">></span></span>
134    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Dashboard<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
135    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Settings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
136    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Earnings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
137    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Sign out<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
138  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownGroup</span><span class="token punctuation">></span></span>
139<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)}

139,$$slots:{example:!0,code:!0}}),O(dn);var Qn=s(dn,2);z(Qn,{children:(c,b)=>{a();var t=p("Multi-level dropdown");n(c,t)}});var mn=s(Qn,4),Xs=S(mn);N(Xs,{src:`<script lang="ts">
140  import { Button, Dropdown, DropdownItem } from "flowbite-svelte";
141  import { ChevronDownOutline, ChevronRightOutline } from "flowbite-svelte-icons";
142<\/script>
143
144<Button>Dropdown button<ChevronDownOutline class="ms-2 h-6 w-6 text-white" /></Button>
145<Dropdown simple>
146  <DropdownItem>Dashboard</DropdownItem>
147  <DropdownItem class="flex items-center justify-between">
148    Dropdown<ChevronRightOutline class="text-fg-brand ms-2 h-6 w-6" />
149  </DropdownItem>
150  <Dropdown simple placement="right-start">
151    <DropdownItem>Overview</DropdownItem>
152    <DropdownItem>My downloads</DropdownItem>
153    <DropdownItem>Billing</DropdownItem>
154  </Dropdown>
155  <DropdownItem>Earnings</DropdownItem>
156  <DropdownItem>Sign out</DropdownItem>
157</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start h-64",hideResponsiveButtons:!0},example:t=>{yt(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
158  <span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> DropdownItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
159  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline<span class="token punctuation">,</span> ChevronRightOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
160</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
161
162<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
163<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span><span class="token punctuation">></span></span>
164  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Dashboard<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
165  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex items-center justify-between<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
166    Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronRightOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-fg-brand ms-2 h-6 w-6<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
167  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
168  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>right-start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
169    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Overview<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
170    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>My downloads<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
171    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Billing<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
172  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>
173  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Earnings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
174  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Sign out<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
175<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)}

175,$$slots:{example:!0,code:!0}}),O(mn);var ns=s(mn,2);z(ns,{children:(c,b)=>{a();var t=p("A11y");n(c,t)}});var gn=s(ns,2),ss=s(S(gn));T(ss,{children:(c,b)=>{a();var t=p("Tab");n(c,t)}});var as=s(ss,2);T(as,{children:(c,b)=>{a();var t=p("Shift+Tab");n(c,t)}});var Zs=s(as,2);T(Zs,{children:(c,b)=>{a();var t=p("ESC");n(c,t)}}),a(),O(gn);var ts=s(gn,2);z(ts,{children:(c,b)=>{a();var t=p("Programmatic open/close");n(c,t)}});var vn=s(ts,2),Qs=s(S(vn));T(Qs,{children:(c,b)=>{a();var t=p("open");n(c,t)}}),a(),O(vn);var wn=s(vn,2),na=S(wn);N(na,{src:`<script lang="ts">
176  import { Button, Dropdown, DropdownItem, P } from "flowbite-svelte";
177  import { ChevronDownOutline, ChevronRightOutline } from "flowbite-svelte-icons";
178  let isOpen = $state(false);
179<\/script>
180
181<P>Current dropdown state: {isOpen ? "Open" : "Closed"}</P>
182<Button onclick={() => (isOpen = false)}>Close Btn</Button>
183
184<Button onclick={() => (isOpen = true)}>
185  Dropdown<ChevronDownOutline class="ms-2 h-6 w-6 text-white" />
186</Button>
187
188<Dropdown bind:isOpen simple>
189  <DropdownItem onclick={() => (isOpen = false)}>Dashboard (close)</DropdownItem>
190  <DropdownItem class="flex items-center justify-between">
191    Dropdown<ChevronRightOutline class="text-fg-brand ms-2 h-6 w-6" />
192  </DropdownItem>
193  <Dropdown simple placement="right-start">
194    <DropdownItem onclick={() => (isOpen = false)}>Overview (close)</DropdownItem>
195    <DropdownItem>My downloads</DropdownItem>
196    <DropdownItem>Billing</DropdownItem>
197  </Dropdown>
198  <DropdownItem>Earnings</DropdownItem>
199  <DropdownItem>Sign out</DropdownItem>
200</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex flex-col h-96 items-center gap-4 justify-start",hideResponsiveButtons:!0},example:t=>{Ct(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
201  <span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> DropdownItem<span class="token punctuation">,</span> <span class="token constant">P</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
202  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline<span class="token punctuation">,</span> ChevronRightOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
203  <span class="token keyword">let</span> isOpen <span class="token operator">=</span> <span class="token function">$state</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
204</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
205
206<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>P</span><span class="token punctuation">></span></span>Current dropdown state: <span class="token language-javascript"><span class="token punctuation">{</span>isOpen <span class="token operator">?</span> <span class="token string">"Open"</span> <span class="token operator">:</span> <span class="token string">"Closed"</span><span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>P</span><span class="token punctuation">></span></span>
207<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onclick=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>isOpen <span class="token operator">=</span> <span class="token boolean">

207false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Close Btn<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
208
209<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onclick=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>isOpen <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
210  Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
211<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
212
213<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name"><span class="token namespace">bind:</span>isOpen</span> <span class="token attr-name">simple</span><span class="token punctuation">></span></span>
214  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">onclick=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>isOpen <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Dashboard (close)<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
215  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex items-center justify-between<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
216    Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronRightOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-fg-brand ms-2 h-6 w-6<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
217  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
218  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>right-start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
219    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">onclick=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>isOpen <span class="token operator">=</span> <span class="token boolean">

219false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Overview (close)<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
220    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>My downloads<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
221    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Billing<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
222  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>
223  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Earnings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
224  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Sign out<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
225<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)},$$slots:{example:!0,code:!0}}),O(wn);var ps=s(wn,2);z(ps,{children:(c,b)=>{a();var t=p("Dropdown with checkbox");n(c,t)}});var hn=s(ps,4),sa=S(hn);N(sa,{src:`<script lang="ts">
226  import { Button, Dropdown, Checkbox } from "flowbite-svelte";
227  import { ChevronDownOutline } from "flowbite-svelte-icons";
228<\/script>
229
230<Button>Dropdown checkbox<ChevronDownOutline class="ms-2 h-6 w-6 text-white" /></Button>
231<Dropdown simple class="w-44 space-y-3 p-3 text-sm">
232  <li>
233    <Checkbox>Default checkbox</Checkbox>
234  </li>
235  <li>
236    <Checkbox checked>Checked state</Checkbox>
237  </li>
238  <li>
239    <Checkbox>Default checkbox</Checkbox>
240  </li>
241</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start h-52",hideResponsiveButtons:!0},example:t=>{Et(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
242  <span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> Checkbox <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
243  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
244</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
245
246<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Dropdown checkbox<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>

246ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
247<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>w-44 space-y-3 p-3 text-sm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
248  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
249    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Checkbox</span><span class="token punctuation">></span></span>Default checkbox<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Checkbox</span><span class="token punctuation">></span></span>
250  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
251  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
252    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Checkbox</span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>

252Checked state<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Checkbox</span><span class="token punctuation">></span></span>
253  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
254  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
255    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Checkbox</span><span class="token punctuation">></span></span>Default checkbox<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Checkbox</span><span class="token punctuation">></span></span>
256  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
257<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)},$$slots:{example:!0,code:!0}}),O(hn);var os=s(hn,2);tn(os,{children:(c,b)=>{a();var t=p("Background hover");n(c,t)}});var fn=s(os,4),aa=S(fn);N(aa,{src:`<script lang="ts">
258  import { Button, Dropdown, Checkbox } from "flowbite-svelte";
259  import { ChevronDownOutline } from "flowbite-svelte-icons";
260<\/script>
261
262<Button>Dropdown checkbox<ChevronDownOutline class="ms-2 h-6 w-6 text-white" /></Button>
263<Dropdown simple class="w-48 space-y-1 p-3 text-sm">
264  <li class="hover:bg-neutral-tertiary-medium rounded-sm p-2">
265    <Checkbox>Default checkbox</Checkbox>
266  </li>
267  <li class="hover:bg-neutral-tertiary-medium rounded-sm p-2">
268    <Checkbox checked>Checked state</Checkbox>
269  </li>
270  <li class="hover:bg-neutral-tertiary-medium rounded-sm p-2">
271    <Checkbox>Default checkbox</Checkbox>
272  </li>
273</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start h-56",hideResponsiveButtons:!0},example:t=>{Lt(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
274  <span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> Checkbox <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
275  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
276</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
277
278<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Dropdown checkbox<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
279<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>w-48 space-y-1 p-3 text-sm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
280  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hover:bg-neutral-tertiary-medium rounded-sm p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
281    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Checkbox</span><span class="token punctuation">></span></span>Default checkbox<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Checkbox</span><span class="token punctuation">></span></span>
282  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
283  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hover:bg-neutral-tertiary-medium rounded-sm p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
284    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Checkbox</span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>

284Checked state<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Checkbox</span><span class="token punctuation">></span></span>
285  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
286  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hover:bg-neutral-tertiary-medium rounded-sm p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
287    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Checkbox</span><span class="token punctuation">></span></span>Default checkbox<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Checkbox</span><span class="token punctuation">></span></span>
288  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
289<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)},$$slots:{example:!0,code:!0}}),O(fn);var es=s(fn,2);tn(es,{children:(c,b)=>{a();var t=p("Helper text");n(c,t)}});var $n=s(es,4),ta=S($n);N(ta,{src:`<script lang="ts">
290  import { Button, Dropdown, Checkbox, Helper } from "flowbite-svelte";
291  import { ChevronDownOutline } from "flowbite-svelte-icons";
292<\/script>
293
294<Button>Dropdown checkbox<ChevronDownOutline class="ms-2 h-6 w-6 text-white" /></Button>
295<Dropdown simple class="w-60 space-y-1 p-3 text-sm">
296  <li class="hover:bg-neutral-tertiary-medium rounded-sm p-2">
297    <Checkbox>Enable notifications</Checkbox>
298    <Helper class="ps-6">Some helpful instruction goes over here.</Helper>
299  </li>
300  <li class="hover:bg-neutral-tertiary-medium rounded-sm p-2">
301    <Checkbox checked>Enable 2FA auth</Checkbox>
302    <Helper class="ps-6">Some helpful instruction goes over here.</Helper>
303  </li>
304  <li class="hover:bg-neutral-tertiary-medium rounded-sm p-2">
305    <Checkbox>Subscribe newsletter</Checkbox>
306    <Helper class="ps-6">Some helpful instruction goes over here.</Helper>
307  </li>
308</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start h-96",hideResponsiveButtons:!0},example:t=>{zt(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
309  <span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> Checkbox<span class="token punctuation">,</span> Helper <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
310  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
311</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
312
313<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Dropdown checkbox<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>

313ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
314<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>w-60 space-y-1 p-3 text-sm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
315  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hover:bg-neutral-tertiary-medium rounded-sm p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
316    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Checkbox</span><span class="token punctuation">></span></span>Enable notifications<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Checkbox</span><span class="token punctuation">></span></span>
317    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Helper</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ps-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Some helpful instruction goes over here.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Helper</span><span class="token punctuation">></span></span>
318  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
319  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hover:bg-neutral-tertiary-medium rounded-sm p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
320    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Checkbox</span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>Enable 2FA auth<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Checkbox</span><span class="token punctuation">></span></span>
321    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Helper</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ps-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Some helpful instruction goes over here.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Helper</span><span class="token punctuation">></span></span>
322  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
323  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hover:bg-neutral-tertiary-medium rounded-sm p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
324    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Checkbox</span><span class="token punctuation">></span></span>Subscribe newsletter<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Checkbox</span><span class="token punctuation">></span></span>
325    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Helper</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ps-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Some helpful instruction goes over here.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Helper</span><span class="token punctuation">></span></span>
326  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
327<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)}

327,$$slots:{example:!0,code:!0}}),O($n);var cs=s($n,2);z(cs,{children:(c,b)=>{a();var t=p("Dropdown with radio");n(c,t)}});var Dn=s(cs,4),pa=S(Dn);N(pa,{src:`<script lang="ts">
328  import { Button, Dropdown, Radio } from "flowbite-svelte";
329  import { ChevronDownOutline } from "flowbite-svelte-icons";
330  let group1 = $state(2);
331<\/script>
332
333<Button>
334  Dropdown radio {group1}<ChevronDownOutline class="ms-2 h-6 w-6 text-white" />
335</Button>
336<Dropdown simple class="w-44 space-y-3 p-3 text-sm">
337  <li>
338    <Radio name="group1" bind:group={group1} value={1}>Default radio</Radio>
339  </li>
340  <li>
341    <Radio name="group1" bind:group={group1} value={2}>Checked state</Radio>
342  </li>
343  <li>
344    <Radio name="group1" bind:group={group1} value={3}>Default radio</Radio>
345  </li>
346</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start h-64",hideResponsiveButtons:!0},example:t=>{Ft(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
347  <span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> Radio <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
348  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
349  <span class="token keyword">let</span> group1 <span class="token operator">=</span> <span class="token function">$state</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
350</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
351
352<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>
353  Dropdown radio <span class="token language-javascript"><span class="token punctuation">{</span>group1<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
354<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
355<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>w-44 space-y-3 p-3 text-sm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
356  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
357    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>group1<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>group=</span><span class="token language-javascript"><span class="token punctuation">{</span>group1<span class="token punctuation">}</span></span> <span class="token attr-name">value=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Default radio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio</span><span class="token punctuation">></span></span>
358  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
359  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
360    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>group1<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>group=</span><span class="token language-javascript"><span class="token punctuation">{</span>group1<span class="token punctuation">}</span></span> <span class="token attr-name">value=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>

360Checked state<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio</span><span class="token punctuation">></span></span>
361  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
362  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
363    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>group1<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>group=</span><span class="token language-javascript"><span class="token punctuation">{</span>group1<span class="token punctuation">}</span></span> <span class="token attr-name">value=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Default radio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio</span><span class="token punctuation">></span></span>
364  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
365<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)},$$slots:{example:!0,code:!0}}),O(Dn);var ls=s(Dn,2);tn(ls,{children:(c,b)=>{a();var t=p("Background hover");n(c,t)}});var _n=s(ls,4),oa=S(_n);N(oa,{src:`<script lang="ts">
366  import { Button, Dropdown, Radio } from "flowbite-svelte";
367  import { ChevronDownOutline } from "flowbite-svelte-icons";
368  let group2 = $state(2);
369<\/script>
370
371<Button>Dropdown radio<ChevronDownOutline class="ms-2 h-6 w-6 text-white" /></Button>
372<Dropdown simple class="w-48 space-y-1 p-3">
373  <li class="hover:bg-neutral-tertiary-medium rounded-sm p-2">
374    <Radio name="group2" bind:group={group2} value={1}>Default radio</Radio>
375  </li>
376  <li class="hover:bg-neutral-tertiary-medium rounded-sm p-2">
377    <Radio name="group2" bind:group={group2} value={2}>Checked state</Radio>
378  </li>
379  <li class="hover:bg-neutral-tertiary-medium rounded-sm p-2">
380    <Radio name="group2" bind:group={group2} value={3}>Default radio</Radio>
381  </li>
382</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start h-64",hideResponsiveButtons:!0},example:t=>{Yt(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
383  <span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> Radio <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
384  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
385  <span class="token keyword">let</span> group2 <span class="token operator">=</span> <span class="token function">$state</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
386</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
387
388<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Dropdown radio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>

388ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
389<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>w-48 space-y-1 p-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
390  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hover:bg-neutral-tertiary-medium rounded-sm p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
391    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>group2<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>group=</span><span class="token language-javascript"><span class="token punctuation">{</span>group2<span class="token punctuation">}</span></span> <span class="token attr-name">value=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Default radio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio</span><span class="token punctuation">></span></span>
392  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
393  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hover:bg-neutral-tertiary-medium rounded-sm p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
394    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>group2<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>group=</span><span class="token language-javascript"><span class="token punctuation">{</span>group2<span class="token punctuation">}</span></span> <span class="token attr-name">value=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>

394Checked state<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio</span><span class="token punctuation">></span></span>
395  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
396  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hover:bg-neutral-tertiary-medium rounded-sm p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
397    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>group2<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>group=</span><span class="token language-javascript"><span class="token punctuation">{</span>group2<span class="token punctuation">}</span></span> <span class="token attr-name">value=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Default radio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio</span><span class="token punctuation">></span></span>
398  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
399<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)},$$slots:{example:!0,code:!0}}),O(_n);var us=s(_n,2);tn(us,{children:(c,b)=>{a();var t=p("Helper text");n(c,t)}});var xn=s(us,4),ea=S(xn);N(ea,{src:`<script lang="ts">
400  import { Button, Dropdown, Radio, Helper } from "flowbite-svelte";
401  import { ChevronDownOutline } from "flowbite-svelte-icons";
402  let group3 = $state(2);
403<\/script>
404
405<Button>Dropdown radio<ChevronDownOutline class="ms-2 h-6 w-6 text-white" /></Button>
406<Dropdown simple class="w-60 space-y-1 p-3">
407  <li class="hover:bg-neutral-tertiary-medium rounded-sm p-2">
408    <Radio name="group3" bind:group={group3} value={1}>Enable notifications</Radio>
409    <Helper class="ps-6">Some helpful instruction goes over here.</Helper>
410  </li>
411  <li class="hover:bg-neutral-tertiary-medium rounded-sm p-2">
412    <Radio name="group3" bind:group={group3} value={2}>

412Enable 2FA auth</Radio>
413    <Helper class="ps-6">Some helpful instruction goes over here.</Helper>
414  </li>
415  <li class="hover:bg-neutral-tertiary-medium rounded-sm p-2">
416    <Radio name="group3" bind:group={group3} value={3}>Subscribe newsletter</Radio>
417    <Helper class="ps-6">Some helpful instruction goes over here.</Helper>
418  </li>
419</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start h-96",hideResponsiveButtons:!0},example:t=>{Qt(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
420  <span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> Radio<span class="token punctuation">,</span> Helper <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
421  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
422  <span class="token keyword">let</span> group3 <span class="token operator">=</span> <span class="token function">$state</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
423</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
424
425<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Dropdown radio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
426<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>w-60 space-y-1 p-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
427  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hover:bg-neutral-tertiary-medium rounded-sm p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
428    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>group3<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>group=</span><span class="token language-javascript"><span class="token punctuation">{</span>group3<span class="token punctuation">}</span></span> <span class="token attr-name">value=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Enable notifications<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio</span><span class="token punctuation">></span></span>
429    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Helper</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ps-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Some helpful instruction goes over here.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Helper</span><span class="token punctuation">></span></span>
430  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
431  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hover:bg-neutral-tertiary-medium rounded-sm p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
432    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>group3<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>group=</span><span class="token language-javascript"><span class="token punctuation">{</span>group3<span class="token punctuation">}</span></span> <span class="token attr-name">value=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Enable 2FA auth<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio</span><span class="token punctuation">></span></span>
433    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Helper</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ps-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Some helpful instruction goes over here.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Helper</span><span class="token punctuation">></span></span>
434  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
435  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hover:bg-neutral-tertiary-medium rounded-sm p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
436    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>group3<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>group=</span><span class="token language-javascript"><span class="token punctuation">{</span>group3<span class="token punctuation">}</span></span> <span class="token attr-name">value=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Subscribe newsletter<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio</span><span class="token punctuation">></span></span>
437    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Helper</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ps-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Some helpful instruction goes over here.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Helper</span><span class="token punctuation">></span></span>
438  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
439<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)}

439,$$slots:{example:!0,code:!0}}),O(xn);var rs=s(xn,2);z(rs,{children:(c,b)=>{a();var t=p("Dropdown with toggle switch");n(c,t)}});var bn=s(rs,4),ca=S(bn);N(ca,{src:`<script lang="ts">
440  import { Button, Dropdown, Toggle } from "flowbite-svelte";
441  import { ChevronDownOutline } from "flowbite-svelte-icons";
442<\/script>
443
444<Button>Dropdown toggle<ChevronDownOutline class="ms-2 h-6 w-6 text-white" /></Button>
445<Dropdown simple class="w-56 space-y-1 p-3">
446  <li>
447    <Toggle class="hover:bg-neutral-tertiary-medium rounded-sm p-2">Default toggle</Toggle>
448  </li>
449  <li>
450    <Toggle class="hover:bg-neutral-tertiary-medium rounded-sm p-2" checked>Checked state</Toggle>
451  </li>
452  <li>
453    <Toggle class="hover:bg-neutral-tertiary-medium rounded-sm p-2">Default toggle</Toggle>
454  </li>
455</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start h-64",hideResponsiveButtons:!0},example:t=>{tp(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
456  <span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> Toggle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
457  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
458</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
459
460<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Dropdown toggle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
461<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>w-56 space-y-1 p-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
462  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
463    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Toggle</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hover:bg-neutral-tertiary-medium rounded-sm p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Default toggle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Toggle</span><span class="token punctuation">></span></span>
464  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
465  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
466    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Toggle</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hover:bg-neutral-tertiary-medium rounded-sm p-2<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>

466Checked state<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Toggle</span><span class="token punctuation">></span></span>
467  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
468  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
469    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Toggle</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hover:bg-neutral-tertiary-medium rounded-sm p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Default toggle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Toggle</span><span class="token punctuation">></span></span>
470  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
471<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)},$$slots:{example:!0,code:!0}}),O(bn);var is=s(bn,2);z(is,{children:(c,b)=>{a();var t=p("Dropdown navbar");n(c,t)}});var yn=s(is,4),la=S(yn);N(la,{src:`<script lang="ts">
472  import { Dropdown, DropdownItem, Navbar, NavBrand, NavHamburger, NavUl, NavLi } from "flowbite-svelte";
473  import { ChevronDownOutline } from "flowbite-svelte-icons";
474<\/script>
475
476<Navbar>
477  <NavBrand href="/">
478    <img src="/images/flowbite-svelte-icon-logo.svg" class="me-3 h-6 sm:h-9" alt="Flowbite Logo" />

479    <span class="text-heading self-center text-xl font-semibold whitespace-nowrap">Flowbite</span>
480  </NavBrand>
481  <NavHamburger />
482  <NavUl class="ms-3 pt-1">
483    <NavLi href="/">Home</NavLi>
484    <NavLi class="cursor-pointer">
485      Dropdown<ChevronDownOutline class="text-fg-brand ms-2 inline h-6 w-6" />
486    </NavLi>
487    <Dropdown simple>
488      <DropdownItem>Dashboard</DropdownItem>
489      <DropdownItem>Settings</DropdownItem>
490      <DropdownItem>Earnings</DropdownItem>
491      <DropdownItem>Sign out</DropdownItem>
492    </Dropdown>
493    <NavLi href="#">Services</NavLi>
494    <NavLi href="#">Pricing</NavLi>
495    <NavLi href="#">Contact</NavLi>
496  </NavUl>
497</Navbar>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start h-96",hideResponsiveButtons:!0},example:t=>{up(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
498  <span class="token keyword">import</span> <span class="token punctuation">{</span> Dropdown<span class="token punctuation">,</span> DropdownItem<span class="token punctuation">,</span> Navbar<span class="token punctuation">,</span> NavBrand<span class="token punctuation">,</span> NavHamburger<span class="token punctuation">,</span> NavUl<span class="token punctuation">,</span> NavLi <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
499  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
500</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
501
502<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Navbar</span><span class="token punctuation">></span></span>
503  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>NavBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
504    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/images/flowbite-svelte-icon-logo.svg<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>me-3 h-6 sm:h-9<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Flowbite Logo<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
505    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>

505text-heading self-center text-xl font-semibold whitespace-nowrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Flowbite<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
506  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>NavBrand</span><span class="token punctuation">></span></span>
507  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>NavHamburger</span> <span class="token punctuation">/></span></span>
508  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>NavUl</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-3 pt-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
509    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>NavLi</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>NavLi</span><span class="token punctuation">></span></span>
510    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>NavLi</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>cursor-pointer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
511      Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-fg-brand ms-2 inline h-6 w-6<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
512    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>NavLi</span><span class="token punctuation">></span></span>
513    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span><span class="token punctuation">></span></span>
514      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Dashboard<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
515      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Settings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
516      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Earnings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
517      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Sign out<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
518    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>
519    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>NavLi</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Services<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>NavLi</span><span class="token punctuation">></span></span>
520    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>NavLi</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Pricing<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>NavLi</span><span class="token punctuation">></span></span>
521    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>NavLi</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Contact<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>NavLi</span><span class="token punctuation">></span></span>
522  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>

522NavUl</span><span class="token punctuation">></span></span>
523<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Navbar</span><span class="token punctuation">></span></span>`),n(t,x)},$$slots:{example:!0,code:!0}}),O(yn);var ks=s(yn,2);z(ks,{children:(c,b)=>{a();var t=p("Dropdown with scrolling");n(c,t)}});var In=s(ks,4),ua=S(In);N(ua,{src:`<script lang="ts">
524  import { Button, Dropdown, DropdownItem, DropdownGroup, Avatar } from "flowbite-svelte";
525  import { ChevronDownOutline } from "flowbite-svelte-icons";
526<\/script>
527
528<Button>Project users<ChevronDownOutline class="ms-2 h-6 w-6 text-white" /></Button>
529<Dropdown class="h-48 w-48 overflow-y-auto py-1">
530  <DropdownGroup>
531    <DropdownItem class="flex items-center gap-2 text-base font-semibold">
532      <Avatar src="/images/people/profile-picture-1.jpg" size="xs" />Jese Leos
533    </DropdownItem>
534    <DropdownItem class="flex items-center gap-2 text-base font-semibold">
535      <Avatar src="/images/people/profile-picture-2.jpg" size="xs" />Robert Gouth
536    </DropdownItem>
537    <DropdownItem class="flex items-center gap-2 text-base font-semibold">
538      <Avatar src="/images/people/profile-picture-5.jpg" size="xs" />Bonnie Green
539    </DropdownItem>
540    <DropdownItem class="flex items-center gap-2 text-base font-semibold">
541      <Avatar src="/images/people/profile-picture-1.jpg" size="xs" />Robert Wall
542    </DropdownItem>
543    <DropdownItem class="flex items-center gap-2 text-base font-semibold">
544      <Avatar src="/images/people/profile-picture-2.jpg" size="xs" />Joseph Mcfall
545    </DropdownItem>
546    <DropdownItem class="flex items-center gap-2 text-base font-semibold">
547      <Avatar src="/images/people/profile-picture-5.jpg" size="xs" />Leslie Livingston
548    </DropdownItem>
549  </DropdownGroup>
550  <a href="/" class="text-fg-brand bg-neutral-tertiary hover:bg-neutral-tertiary-medium -mb-1 flex items-center px-3 py-2 text-sm font-medium hover:underline">
551    <ChevronDownOutline class="ms-2 h-6 w-6" />Add new user
552  </a>
553</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start h-80",hideResponsiveButtons:!0},example:t=>{$p(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
554  <span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> DropdownItem<span class="token punctuation">,</span> DropdownGroup<span class="token punctuation">,</span> Avatar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
555  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
556</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
557
558<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Project users<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
559<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>h-48 w-48 overflow-y-auto py-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
560  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownGroup</span><span class="token punctuation">></span></span>
561    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex items-center gap-2 text-base font-semibold<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>

562      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Avatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/images/people/profile-picture-1.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>xs<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>Jese Leos
563    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
564    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex items-center gap-2 text-base font-semibold<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
565      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Avatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/images/people/profile-picture-2.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>xs<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>Robert Gouth
566    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
567    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex items-center gap-2 text-base font-semibold<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
568      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Avatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/images/people/profile-picture-5.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>xs<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>Bonnie Green
569    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
570    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex items-center gap-2 text-base font-semibold<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
571      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Avatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/images/people/profile-picture-1.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>xs<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>Robert Wall
572    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
573    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex items-center gap-2 text-base font-semibold<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>

574      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Avatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/images/people/profile-picture-2.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>xs<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>Joseph Mcfall
575    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
576    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex items-center gap-2 text-base font-semibold<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
577      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Avatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/images/people/profile-picture-5.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>xs<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>Leslie Livingston
578    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
579  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownGroup</span><span class="token punctuation">></span></span>
580  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-fg-brand bg-neutral-tertiary hover:bg-neutral-tertiary-medium -mb-1 flex items-center px-3 py-2 text-sm font-medium hover:underline<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
581    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-2 h-6 w-6<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>Add new user
582  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
583<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)},$$slots:{example:!0,code:!0}}),O(In);var ds=s(In,2);z(ds,{children:(c,b)=>{a();var t=p("Dropdown with search");n(c,t)}});var Pn=s(ds,4),ra=S(Pn);N(ra,{src:`<script lang="ts">
584  import { Button, Dropdown, DropdownGroup, Checkbox, Search } from "flowbite-svelte";
585  import { ChevronDownOutline, UserRemoveSolid } from "flowbite-svelte-icons";
586  let searchTerm = $state("");
587  const people = [
588    { name: "Robert Gouth", checked: false },
589    { name: "Jese Leos", checked: false },
590    { name: "Bonnie Green", checked: true }
591  ];
592  let filteredItems = $derived(people.filter((person) => person.name.toLowerCase().indexOf(searchTerm?.toLowerCase()) !== -1));
593<\/script>
594
595<Button>Dropdown search<ChevronDownOutline class="ms-2 h-6 w-6 text-white" /></Button>
596<Dropdown>
597  <div class="p-3">
598    <Search size="md" bind:value={searchTerm} />
599  </div>
600  <DropdownGroup class="h-24 overflow-y-auto">
601    {#each filteredItems as person (person.name)}
602      <li class="hover:bg-neutral-tertiary-medium rounded-sm p-2">
603        <Checkbox bind:checked={person.checked}>{person.name}</Checkbox>
604      </li>
605    {/each}
606  </DropdownGroup>
607  <a href="/" class="bg-neutral-tertiary text-fg-danger hover:bg-neutral-tertiary-medium -mb-1 flex items-center p-3 text-sm font-medium hover:underline">
608    <UserRemoveSolid class="text-fg-danger me-2 h-4 w-4" />Delete user
609  </a>
610</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,

610class:"flex justify-center items-start h-96",hideResponsiveButtons:!0},example:t=>{yp(t,{})},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
611  <span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> DropdownGroup<span class="token punctuation">,</span> Checkbox<span class="token punctuation">,</span> Search <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
612  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline<span class="token punctuation">,</span> UserRemoveSolid <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
613  <span class="token keyword">let</span> searchTerm <span class="token operator">=</span> <span class="token function">$state</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
614  <span class="token keyword">const</span> people <span class="token operator">=</span> <span class="token punctuation">[</span>
615    <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Robert Gouth"</span><span class="token punctuation">,</span> <span class="token literal-property property">checked</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
616    <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Jese Leos"</span><span class="token punctuation">,</span> <span class="token literal-property property">checked</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
617    <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Bonnie Green"</span><span class="token punctuation">,</span> <span class="token literal-property property">checked</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
618  <span class="token punctuation">]</span><span class="token punctuation">;</span>
619  <span class="token keyword">let</span> filteredItems <span class="token operator">=</span> <span class="token function">$derived</span><span class="token punctuation">(</span>people<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">person</span><span class="token punctuation">)</span> <span class="token operator">=></span> person<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>searchTerm<span class="token operator">?.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
620</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
621
622<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Dropdown search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>

622ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
623<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span><span class="token punctuation">></span></span>
624  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>p-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
625    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Search</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>value=</span><span class="token language-javascript"><span class="token punctuation">{</span>searchTerm<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
626  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
627  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>h-24 overflow-y-auto<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
628    <span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">filteredItems </span><span class="token keyword">as</span> <span class="token language-javascript">person </span><span class="token language-javascript"><span class="token punctuation">(</span>person<span class="token punctuation">.</span>name<span class="token punctuation">)</span></span><span class="token punctuation">}</span></span>
629      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hover:bg-neutral-tertiary-medium rounded-sm p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
630        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Checkbox</span> <span class="token attr-name"><span class="token namespace">bind:</span>checked=</span><span class="token language-javascript"><span class="token punctuation">{</span>person<span class="token punctuation">.</span>checked<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>person<span class="token punctuation">.</span>name<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Checkbox</span><span class="token punctuation">></span></span>
631      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
632    <span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span>
633  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownGroup</span><span class="token punctuation">></span></span>
634  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>bg-neutral-tertiary text-fg-danger hover:bg-neutral-tertiary-medium -mb-1 flex items-center p-3 text-sm font-medium hover:underline<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
635    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>UserRemoveSolid</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-fg-danger me-2 h-4 w-4<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>Delete user
636  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
637<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)}

637,$$slots:{example:!0,code:!0}}),O(Pn);var ms=s(Pn,2);z(ms,{children:(c,b)=>{a();var t=p("Menu icon");n(c,t)}});var Bn=s(ms,4),ia=S(Bn);N(ia,{src:`<script lang="ts">
638  import { Dropdown, DropdownItem } from "flowbite-svelte";
639  import { DotsHorizontalOutline, DotsVerticalOutline } from "flowbite-svelte-icons";
640<\/script>
641
642<DotsHorizontalOutline class="dots-menu text-body" />
643<DotsVerticalOutline class="dots-menu text-body" />
644<Dropdown simple triggeredBy=".dots-menu">
645  <DropdownItem>Dashboard</DropdownItem>
646  <DropdownItem>Settings</DropdownItem>
647  <DropdownItem>Earnings</DropdownItem>
648  <DropdownItem>Sign out</DropdownItem>
649</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start gap-4 h-60",hideResponsiveButtons:!0},example:t=>{Bp(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
650  <span class="token keyword">import</span> <span class="token punctuation">{</span> Dropdown<span class="token punctuation">,</span> DropdownItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
651  <span class="token keyword">import</span> <span class="token punctuation">{</span> DotsHorizontalOutline<span class="token punctuation">,</span> DotsVerticalOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
652</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
653
654<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DotsHorizontalOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dots-menu text-body<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
655<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DotsVerticalOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dots-menu text-body<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
656<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span> <span class="token attr-name">triggeredBy</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>.dots-menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
657  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Dashboard<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
658  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Settings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
659  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Earnings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
660  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Sign out<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
661<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)}

661,$$slots:{example:!0,code:!0}}),O(Bn);var gs=s(Bn,2);z(gs,{children:(c,b)=>{a();var t=p("Notification bell");n(c,t)}});var Cn=s(gs,4),ka=S(Cn);N(ka,{src:`<script lang="ts">
662  import { Dropdown, DropdownItem, DropdownGroup, Avatar } from "flowbite-svelte";
663  import { BellSolid, EyeSolid } from "flowbite-svelte-icons";
664<\/script>
665
666<div id="bell" class="text-body hover:text-heading inline-flex items-center text-center text-sm font-medium focus:outline-hidden">
667  <BellSolid class="h-8 w-8" />
668  <div class="relative flex">
669    <div class="border-buffer bg-danger relative end-4 -top-2 inline-flex h-3 w-3 rounded-full border-2"></div>
670  </div>
671</div>
672<Dropdown triggeredBy="#bell" class="divide-default w-full max-w-sm divide-y rounded-sm">
673  <div class="py-2 text-center font-bold">Notifications</div>
674  <DropdownGroup>
675    <DropdownItem class="flex space-x-4 rtl:space-x-reverse">
676      <Avatar src="/images/people/profile-picture-1.jpg" dot={{ color: "neutral" }} />
677      <div class="w-full ps-3">
678        <div class="text-body mb-1.5 text-sm">
679          New message from <span class="text-heading font-semibold">Jese Leos</span>
680          : "Hey, what's up? All set for the presentation?"
681        </div>
682        <div class="text-fg-brand text-xs">a few moments ago</div>
683      </div>
684    </DropdownItem>
685    <DropdownItem class="flex space-x-4 rtl:space-x-reverse">
686      <Avatar src="/images/people/profile-picture-2.jpg" dot={{ color: "danger" }} />
687      <div class="w-full ps-3">
688        <div class="text-body mb-1.5 text-sm">
689          <span class="text-heading font-semibold">Joseph Mcfall</span>
690          and
691          <span class="text-heading font-medium">5 others</span>
692          started following you.
693        </div>
694        <div class="text-fg-brand text-xs">10 minutes ago</div>
695      </div>
696    </DropdownItem>
697    <DropdownItem class="flex space-x-4 rtl:space-x-reverse">
698      <Avatar src="/images/people/profile-picture-5.jpg" dot={{ color: "success" }} />
699      <div class="w-full ps-3">
700        <div class="text-body mb-1.5 text-sm">
701          <span class="text-heading font-semibold">Bonnie Green</span>
702          and
703          <span class="text-heading font-medium">141 others</span>
704          love your story. See it and view more stories.
705        </div>
706        <div class="text-fg-brand text-xs">44 minutes ago</div>
707      </div>
708    </DropdownItem>
709  </DropdownGroup>
710  <a href="/" class="bg-neutral-tertiary text-heading hover:bg-neutral-tertiary-medium -my-1 block py-2 text-center text-sm font-medium">
711    <div class="inline-flex items-center">
712      <EyeSolid class="text-body me-2 h-4 w-4" />
713      View all
714    </div>
715  </a>
716</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start h-104",hideResponsiveButtons:!0},example:t=>{Hp(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
717  <span class="token keyword">import</span> <span class="token punctuation">{</span> Dropdown<span class="token punctuation">,</span> DropdownItem<span class="token punctuation">,</span> DropdownGroup<span class="token punctuation">,</span> Avatar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
718  <span class="token keyword">import</span> <span class="token punctuation">{</span> BellSolid<span class="token punctuation">,</span> EyeSolid <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
719</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
720
721<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>bell<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-body hover:text-heading inline-flex items-center text-center text-sm font-medium focus:outline-hidden<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
722  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BellSolid</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>h-8 w-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
723  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>relative flex<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
724    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>border-buffer bg-danger relative end-4 -top-2 inline-flex h-3 w-3 rounded-full border-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
725  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
726<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
727<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">triggeredBy</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#bell<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>divide-default w-full max-w-sm divide-y rounded-sm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
728  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>py-2 text-center font-bold<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Notifications<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
729  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownGroup</span><span class="token punctuation">></span></span>
730    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex space-x-4 rtl:space-x-reverse<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>

731      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Avatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/images/people/profile-picture-1.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">dot=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">"neutral"</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
732      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>w-full ps-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
733        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-body mb-1.5 text-sm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
734          New message from <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-heading font-semibold<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Jese Leos<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
735          : "Hey, what's up? All set for the presentation?"
736        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
737        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-fg-brand text-xs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>a few moments ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
738      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
739    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
740    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex space-x-4 rtl:space-x-reverse<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
741      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Avatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/images/people/profile-picture-2.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">dot=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">"danger"</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>

742      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>w-full ps-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
743        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-body mb-1.5 text-sm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
744          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-heading font-semibold<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Joseph Mcfall<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
745          and
746          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-heading font-medium<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>5 others<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
747          started following you.
748        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
749        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-fg-brand text-xs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>10 minutes ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
750      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
751    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
752    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex space-x-4 rtl:space-x-reverse<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
753      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Avatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/images/people/profile-picture-5.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">dot=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">"success"</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>

754      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>w-full ps-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
755        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-body mb-1.5 text-sm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
756          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-heading font-semibold<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Bonnie Green<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
757          and
758          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-heading font-medium<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>141 others<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
759          love your story. See it and view more stories.
760        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
761        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-fg-brand text-xs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>44 minutes ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
762      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
763    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
764  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownGroup</span><span class="token punctuation">></span></span>
765  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>bg-neutral-tertiary text-heading hover:bg-neutral-tertiary-medium -my-1 block py-2 text-center text-sm font-medium<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
766    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inline-flex items-center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>

767      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>EyeSolid</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-body me-2 h-4 w-4<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
768      View all
769    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
770  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
771<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)},$$slots:{example:!0,code:!0}}),O(Cn);var vs=s(Cn,2);z(vs,{children:(c,b)=>{a();var t=p("User avatar");n(c,t)}});var Sn=s(vs,4),da=S(Sn);N(da,{src:`<script lang="ts">
772  import { Dropdown, DropdownItem, Avatar, DropdownHeader, DropdownGroup } from "flowbite-svelte";
773<\/script>
774
775<Avatar class="acs" src="/images/people/profile-picture-5.jpg" dot={{ color: "neutral" }} />
776<Dropdown triggeredBy=".acs">
777  <DropdownHeader>
778    <span class="text-heading block text-sm">Bonnie Green</span>
779    <span class="block truncate text-sm font-medium">[email protected]</span>
780  </DropdownHeader>
781  <DropdownGroup>
782    <DropdownItem>Dashboard</DropdownItem>
783    <DropdownItem>Settings</DropdownItem>
784    <DropdownItem>Earnings</DropdownItem>
785    <DropdownItem>Sign out</DropdownItem>
786  </DropdownGroup>
787</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start h-80",hideResponsiveButtons:!0},example:t=>{Ap(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
788  <span class="token keyword">import</span> <span class="token punctuation">{</span> Dropdown<span class="token punctuation">,</span> DropdownItem<span class="token punctuation">,</span> Avatar<span class="token punctuation">,</span> DropdownHeader<span class="token punctuation">,</span> DropdownGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
789</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
790
791<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Avatar</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>acs<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/images/people/profile-picture-5.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">dot=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">"neutral"</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
792<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">triggeredBy</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>.acs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
793  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownHeader</span><span class="token punctuation">></span></span>
794    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-heading block text-sm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Bonnie Green<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
795    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block truncate text-sm font-medium<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>[email protected]<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
796  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownHeader</span><span class="token punctuation">></span></span>
797  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownGroup</span><span class="token punctuation">></span></span>
798    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Dashboard<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
799    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Settings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
800    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Earnings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
801    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Sign out<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
802  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownGroup</span><span class="token punctuation">></span></span>
803<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)}

803,$$slots:{example:!0,code:!0}}),O(Sn);var ws=s(Sn,2);z(ws,{children:(c,b)=>{a();var t=p("Avatar with name");n(c,t)}});var On=s(ws,4),ma=S(On);N(ma,{src:`<script lang="ts">
804  import { Button, Dropdown, DropdownItem, Avatar, DropdownHeader, DropdownGroup } from "flowbite-svelte";
805<\/script>
806
807<Button pill id="avatar_with_name" class="p-1!">
808  <Avatar src="/images/people/profile-picture-5.jpg" class="me-2" />
809  Bonnie Green
810</Button>
811<Dropdown triggeredBy="#avatar_with_name">
812  <DropdownHeader>
813    <span class="text-heading block text-sm">Bonnie Green</span>
814    <span class="block truncate text-sm font-medium">[email protected]</span>
815  </DropdownHeader>
816  <DropdownGroup>
817    <DropdownItem>Dashboard</DropdownItem>
818    <DropdownItem>Settings</DropdownItem>
819    <DropdownItem>Earnings</DropdownItem>
820  </DropdownGroup>
821  <DropdownHeader>Sign out</DropdownHeader>
822</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start h-80",hideResponsiveButtons:!0},example:t=>{Up(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
823  <span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> DropdownItem<span class="token punctuation">,</span> Avatar<span class="token punctuation">,</span> DropdownHeader<span class="token punctuation">,</span> DropdownGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
824</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
825
826<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">pill</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>avatar_with_name<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>p-1!<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
827  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Avatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/images/people/profile-picture-5.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>me-2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
828  Bonnie Green
829<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
830<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">triggeredBy</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#avatar_with_name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
831  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownHeader</span><span class="token punctuation">></span></span>
832    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-heading block text-sm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Bonnie Green<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
833    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block truncate text-sm font-medium<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>[email protected]<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
834  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownHeader</span><span class="token punctuation">></span></span>
835  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownGroup</span><span class="token punctuation">></span></span>
836    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Dashboard<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
837    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Settings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
838    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Earnings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
839  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownGroup</span><span class="token punctuation">></span></span>
840  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownHeader</span><span class="token punctuation">></span></span>Sign out<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownHeader</span><span class="token punctuation">></span></span>
841<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)}

841,$$slots:{example:!0,code:!0}}),O(On);var hs=s(On,2);z(hs,{children:(c,b)=>{a();var t=p("Sizes");n(c,t)}});var jn=s(hs,4),ga=S(jn);N(ga,{src:`<script lang="ts">
842  import { Button, Dropdown, DropdownItem, DropdownHeader, DropdownGroup } from "flowbite-svelte";
843  import { ChevronDownOutline } from "flowbite-svelte-icons";
844<\/script>
845
846<Dropdown triggeredBy=".sizes">
847  <DropdownGroup>
848    <DropdownItem>Dashboard</DropdownItem>
849    <DropdownItem>Settings</DropdownItem>
850    <DropdownItem>Earnings</DropdownItem>
851  </DropdownGroup>
852  <DropdownHeader>Sign out</DropdownHeader>
853</Dropdown>
854<Button class="sizes" size="sm">
855  Small dropdown<ChevronDownOutline class="ms-2 h-6 w-6 text-white" />
856</Button>
857<Button class="sizes" size="lg">
858  Large dropdown<ChevronDownOutline class="ms-2 h-6 w-6 text-white" />
859</Button>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start gap-4 h-80",hideResponsiveButtons:!0},example:t=>{Vp(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
860  <span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> DropdownItem<span class="token punctuation">,</span> DropdownHeader<span class="token punctuation">,</span> DropdownGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
861  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
862</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
863
864<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">triggeredBy</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>.sizes<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
865  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownGroup</span><span class="token punctuation">></span></span>
866    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Dashboard<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
867    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Settings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
868    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Earnings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
869  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownGroup</span><span class="token punctuation">></span></span>
870  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownHeader</span><span class="token punctuation">></span></span>Sign out<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownHeader</span><span class="token punctuation">></span></span>
871<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>
872<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sizes<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
873  Small dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>

873ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
874<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
875<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sizes<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
876  Large dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
877<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>`),n(t,x)},$$slots:{example:!0,code:!0}}),O(jn);var fs=s(jn,2);z(fs,{children:(c,b)=>{a();var t=p("Placement");n(c,t)}});var En=s(fs,2),va=s(S(En));T(va,{children:(c,b)=>{a();var t=p("placement={top|right|bottom|left}");n(c,t)}}),a(),O(En);var Rn=s(En,2),wa=S(Rn);N(wa,{src:`<script lang="ts">
878  import { Button, Dropdown, DropdownItem } from "flowbite-svelte";
879  import { ChevronDownOutline, ChevronUpOutline, ChevronRightOutline, ChevronLeftOutline } from "flowbite-svelte-icons";
880<\/script>
881
882<Dropdown simple placement="top" triggeredBy="#top-dd">
883  <DropdownItem>Dashboard</DropdownItem>
884  <DropdownItem>Settings</DropdownItem>
885  <DropdownItem>Earnings</DropdownItem>
886  <DropdownItem>Sign out</DropdownItem>
887</Dropdown>
888<Dropdown simple placement="bottom" triggeredBy="#bottom-dd">
889  <DropdownItem>Dashboard</DropdownItem>
890  <DropdownItem>Settings</DropdownItem>
891  <DropdownItem>Earnings</DropdownItem>
892  <DropdownItem>Sign out</DropdownItem>
893</Dropdown>
894<Dropdown simple placement="right" triggeredBy="#right-dd">
895  <DropdownItem>Dashboard</DropdownItem>
896  <DropdownItem>Settings</DropdownItem>
897  <DropdownItem>Earnings</DropdownItem>
898  <DropdownItem>Sign out</DropdownItem>
899</Dropdown>
900<Dropdown simple placement="left" triggeredBy="#left-dd">
901  <DropdownItem>Dashboard</DropdownItem>
902  <DropdownItem>Settings</DropdownItem>
903  <DropdownItem>Earnings</DropdownItem>
904  <DropdownItem>Sign out</DropdownItem>
905</Dropdown>
906
907<!-- svelte-ignore a11y_no_static_element_interactions -->
908<div id="placements" class="my-8 flex h-96 flex-col items-center justify-center gap-2">
909  <Button id="top-dd">Dropdown top<ChevronUpOutline class="ms-2 h-6 w-6 text-white" /></Button>
910  <div class="flex space-x-2 rtl:space-x-reverse">
911    <Button id="left-dd"><ChevronLeftOutline class="me-2 h-6 w-6 text-white" />Dropdown left</Button>
912    <Button id="right-dd">Dropdown right<ChevronRightOutline class="ms-2 h-6 w-6 text-white" /></Button>
913  </div>
914  <Button id="bottom-dd">Dropdown bottom<ChevronDownOutline class="ms-2 h-6 w-6 text-white" /></Button>
915</div>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,hideResponsiveButtons:!0},example:t=>{Zp(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
916  <span class="token keyword">

916import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> DropdownItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
917  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline<span class="token punctuation">,</span> ChevronUpOutline<span class="token punctuation">,</span> ChevronRightOutline<span class="token punctuation">,</span> ChevronLeftOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
918</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
919
920<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">triggeredBy</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#top-dd<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
921  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Dashboard<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
922  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Settings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
923  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Earnings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
924  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Sign out<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
925<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>
926<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>bottom<span class="token punctuation">"</span></span> <span class="token attr-name">triggeredBy</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#bottom-dd<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
927  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Dashboard<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
928  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Settings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
929  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Earnings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
930  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Sign out<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
931<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>
932<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span> <span class="token attr-name">triggeredBy</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#right-dd<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
933  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Dashboard<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
934  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Settings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
935  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Earnings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
936  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Sign out<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
937<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>
938<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span> <span class="token attr-name">triggeredBy</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#left-dd<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
939  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Dashboard<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
940  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Settings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
941  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Earnings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
942  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Sign out<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
943<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>
944
945<span class="token comment">&lt;!-- svelte-ignore a11y_no_static_element_interactions --></span>
946<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>placements<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>my-8 flex h-96 flex-col items-center justify-center gap-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
947  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>top-dd<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Dropdown top<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronUpOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>

947ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
948  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex space-x-2 rtl:space-x-reverse<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
949    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>left-dd<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronLeftOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>me-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>Dropdown left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
950    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>right-dd<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Dropdown right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronRightOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
951  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
952  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>bottom-dd<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Dropdown bottom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
953<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>`),n(t,x)},$$slots:{example:!0,code:!0}}),O(Rn);var $s=s(Rn,2);z($s,{children:(c,b)=>{a();var t=p("Double placement");n(c,t)}});var Hn=s($s,2),ha=s(S(Hn),3);T(ha,{children:(c,b)=>{a();var t=p("Placement");n(c,t)}}),a(2),O(Hn);var Gn=s(Hn,2),fa=S(Gn);N(fa,{src:`<script lang="ts">
954  import { Button, Dropdown, DropdownItem } from "flowbite-svelte";
955  import type { Placement } from "@floating-ui/dom";
956  import { ChevronDownOutline, ChevronUpOutline } from "flowbite-svelte-icons";
957  let placement: Placement | undefined = $state("left");
958<\/script>
959
960<!-- svelte-ignore a11y_no_static_element_interactions -->
961<div
962  onmousedown={(e) => {
963    const placementValue = (e.target as HTMLElement | null)?.dataset.placement;
964    if (placementValue) placement = placementValue as Placement;
965  }}
966>

967  <Button data-placement="left-start">
968    Left start<ChevronUpOutline class="ms-2 h-6 w-6 text-white" />
969  </Button>
970  <Button data-placement="right-end">
971    Right end<ChevronDownOutline class="ms-2 h-6 w-6 text-white" />
972  </Button>
973</div>
974
975<Dropdown simple {placement} triggeredBy="[data-placement]">
976  <DropdownItem>Dashboard</DropdownItem>
977  <DropdownItem>Settings</DropdownItem>
978  <DropdownItem>Earnings</DropdownItem>
979  <DropdownItem>Sign out</DropdownItem>
980</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-center gap-2 h-96",hideResponsiveButtons:!0},example:t=>{to(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
981  <span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> DropdownItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
982  <span class="token keyword">import</span> type <span class="token punctuation">{</span> Placement <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@floating-ui/dom"</span><span class="token punctuation">;</span>
983  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline<span class="token punctuation">,</span> ChevronUpOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
984  <span class="token keyword">let</span> <span class="token literal-property property">placement</span><span class="token operator">:</span> Placement <span class="token operator">|</span> <span class="token keyword">undefined</span> <span class="token operator">=</span> <span class="token function">$state</span><span class="token punctuation">(</span><span class="token string">"left"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
985</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
986
987<span class="token comment">&lt;!-- svelte-ignore a11y_no_static_element_interactions --></span>
988<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span>
989  <span class="token attr-name">onmousedown=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
990    <span class="token keyword">const</span> placementValue <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>target <span class="token keyword">as</span> HTMLElement <span class="token operator">|</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token operator">?.</span>dataset<span class="token punctuation">.</span>placement<span class="token punctuation">;</span>
991    <span class="token keyword">if</span> <span class="token punctuation">(</span>placementValue<span class="token punctuation">)</span> placement <span class="token operator">=</span> placementValue <span class="token keyword">as</span> Placement<span class="token punctuation">;</span>
992  <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
993<span class="token punctuation">></span></span>
994  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">data-placement</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>left-start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
995    Left start<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronUpOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>

995ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
996  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
997  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">data-placement</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>right-end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
998    Right end<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
999  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
1000<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
1001
1002<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span> <span class="token language-javascript"><span class="token punctuation">{</span>placement<span class="token punctuation">}</span></span> <span class="token attr-name">triggeredBy</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>[data-placement]<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1003  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Dashboard<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
1004  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Settings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
1005  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Earnings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
1006  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Sign out<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
1007<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)},$$slots:{example:!0,code:!0}}),O(Gn);var Ds=s(Gn,2);z(Ds,{children:(c,b)=>{a();var t=p("Transition");n(c,t)}});var Ln=s(Ds,2),_s=s(S(Ln));T(_s,{children:(c,b)=>{a();var t=p("Dropdown");n(c,t)}});var xs=s(_s,2);T(xs,{children:(c,b)=>{a();var t=p("Popper");n(c,t)}});var bs=s(xs,2);T(bs,{children:(c,b)=>{a();var t=p("transition");n(c,t)}});var $a=s(bs,2);T($a,{children:(c,b)=>{a();var t=p("transitionParams");n(c,t)}}),a(),O(Ln);var An=s(Ln,2),Da=S(An);N(Da,{src:`<script lang="ts">
1008  import { Button, Dropdown, DropdownItem } from "flowbite-svelte";
1009  import { ChevronDownOutline } from "flowbite-svelte-icons";
1010  import { scale, blur } from "svelte/transition";
1011<\/script>
1012
1013<Button>Scale<ChevronDownOutline class="ms-2 h-6 w-6 text-white" /></Button>
1014<Dropdown simple transition={scale}

1014 transitionParams={{ duration: 800 }}>
1015  <DropdownItem>Dashboard</DropdownItem>
1016  <DropdownItem>Settings</DropdownItem>
1017  <DropdownItem>Earnings</DropdownItem>
1018  <DropdownItem>Sign out</DropdownItem>
1019</Dropdown>
1020
1021<Button>Blur<ChevronDownOutline class="ms-2 h-6 w-6 text-white" /></Button>
1022<Dropdown simple transition={blur} transitionParams={{ duration: 800 }}>
1023  <DropdownItem>Dashboard</DropdownItem>
1024  <DropdownItem>Settings</DropdownItem>
1025  <DropdownItem>Earnings</DropdownItem>
1026  <DropdownItem>Sign out</DropdownItem>
1027</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start space-x-4 h-64",hideResponsiveButtons:!0},example:t=>{eo(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
1028  <span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> DropdownItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
1029  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
1030  <span class="token keyword">import</span> <span class="token punctuation">{</span> scale<span class="token punctuation">,</span> blur <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"svelte/transition"</span><span class="token punctuation">;</span>
1031</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
1032
1033<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Scale<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
1034<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span> <span class="token attr-name">transition=</span><span class="token language-javascript"><span class="token punctuation">{</span>scale<span class="token punctuation">}</span></span> <span class="token attr-name">transitionParams=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">800</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
1035  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Dashboard<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
1036  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Settings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
1037  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Earnings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
1038  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Sign out<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
1039<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>
1040
1041<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Blur<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>

1041ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
1042<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span> <span class="token attr-name">transition=</span><span class="token language-javascript"><span class="token punctuation">{</span>blur<span class="token punctuation">}</span></span> <span class="token attr-name">transitionParams=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">800</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
1043  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Dashboard<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
1044  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Settings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
1045  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Earnings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
1046  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Sign out<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
1047<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)},$$slots:{example:!0,code:!0}}),O(An);var ys=s(An,2);z(ys,{children:(c,b)=>{a();var t=p("Events");n(c,t)}});var Wn=s(ys,2),Is=S(Wn);T(Is,{children:(c,b)=>{a();var t=p("DropdownItem");n(c,t)}});var Ps=s(Is,2);T(Ps,{children:(c,b)=>{a();var t=p("<li/>");n(c,t)}});var Bs=s(Ps,2);T(Bs,{children:(c,b)=>{a();var t=p("href");n(c,t)}});var _a=s(Bs,2);T(_a,{children:(c,b)=>{a();var t=p("onclick");n(c,t)}}),a(),O(Wn);var Nn=s(Wn,2),xa=S(Nn);N(xa,{src:`<script lang="ts">
1048  import { Button, Dropdown, DropdownItem } from "flowbite-svelte";
1049  import { ChevronDownOutline } from "flowbite-svelte-icons";
1050  const handleClick = (e: MouseEvent) => {
1051    e.preventDefault();
1052    alert("Clicked on: " + e.target);
1053  };
1054<\/script>
1055
1056<Button>Dropdown button<ChevronDownOutline class="ms-2 h-6 w-6 text-white" /></Button>
1057<Dropdown simple>
1058  <DropdownItem href="/link" onclick={handleClick}>Rendered as link</DropdownItem>
1059  <DropdownItem onclick={handleClick}>Rendered as button</DropdownItem>
1060</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start h-44",hideResponsiveButtons:!0},example:t=>{lo(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
1061  <span class="token keyword">

1061import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> DropdownItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
1062  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
1063  <span class="token keyword">const</span> <span class="token function-variable function">handleClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">e</span><span class="token operator">:</span> MouseEvent</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
1064    e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
1065    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Clicked on: "</span> <span class="token operator">+</span> e<span class="token punctuation">.</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span>
1066  <span class="token punctuation">}</span><span class="token punctuation">;</span>
1067</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
1068
1069<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
1070<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span><span class="token punctuation">></span></span>
1071  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/link<span class="token punctuation">"</span></span> <span class="token attr-name">onclick=</span><span class="token language-javascript"><span class="token punctuation">{</span>handleClick<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Rendered as link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
1072  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span> <span class="token attr-name">onclick=</span><span class="token language-javascript"><span class="token punctuation">{</span>handleClick<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Rendered as button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
1073<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)}

1073,$$slots:{example:!0,code:!0}}),O(Nn);var Cs=s(Nn,2);tn(Cs,{children:(c,b)=>{a();var t=p("onclose and ontoggle");n(c,t)}});var zn=s(Cs,2),Ss=s(S(zn));T(Ss,{children:(c,b)=>{a();var t=p("onclose");n(c,t)}});var ba=s(Ss,2);T(ba,{children:(c,b)=>{a();var t=p("ontoggle");n(c,t)}}),a(),O(zn);var Un=s(zn,2),ya=S(Un);N(ya,{src:`<script lang="ts">
1074  import { Button, Dropdown, DropdownItem } from "flowbite-svelte";
1075  import { ChevronDownOutline } from "flowbite-svelte-icons";
1076  // onclose fires only when closing
1077<\/script>
1078
1079<Button>Dropdown button<ChevronDownOutline class="ms-2 h-6 w-6 text-white" /></Button>
1080<Dropdown simple onclose={(ev) => console.log("Dropdown closed", ev)}>
1081  <DropdownItem>Dashboard</DropdownItem>
1082  <DropdownItem>Settings</DropdownItem>
1083</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start h-44",hideResponsiveButtons:!0},example:t=>{ro(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
1084  <span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> DropdownItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
1085  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
1086  <span class="token comment">// onclose fires only when closing</span>
1087</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
1088
1089<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
1090<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">simple</span> <span class="token attr-name">onclose=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Dropdown closed"</span><span class="token punctuation">,</span> ev<span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
1091  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Dashboard<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
1092  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Settings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
1093<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)}

1093,$$slots:{example:!0,code:!0}}),O(Un);var Tn=s(Un,2),Ia=S(Tn);N(Ia,{src:`<script lang="ts">
1094  import { Button, Dropdown, DropdownItem } from "flowbite-svelte";
1095  import { ChevronDownOutline } from "flowbite-svelte-icons";
1096<\/script>
1097
1098<Button>Dropdown button<ChevronDownOutline class="ms-2 h-6 w-6 text-white" /></Button>
1099<Dropdown
1100  simple
1101  ontoggle={(ev) => {
1102    // ontoggle fires on all state changes (open/closed), requiring the state check
1103    if (ev.newState === "closed") {
1104      console.log("closed by ontoggle");
1105    }
1106  }}
1107>
1108  <DropdownItem>Dashboard</DropdownItem>
1109  <DropdownItem>Settings</DropdownItem>
1110</Dropdown>`,meta:{Wrapper:"/src/routes/utils/ExampleWrapper.svelte",filename:"/src/routes/docs/components/dropdown.md",example:!0,class:"flex justify-center items-start h-44",hideResponsiveButtons:!0},example:t=>{ko(t)},code:t=>{var x=A(),R=l(x);W(R,()=>`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
1111  <span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> DropdownItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte"</span><span class="token punctuation">;</span>
1112  <span class="token keyword">import</span> <span class="token punctuation">{</span> ChevronDownOutline <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"flowbite-svelte-icons"</span><span class="token punctuation">;</span>
1113</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
1114
1115<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ChevronDownOutline</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-2 h-6 w-6 text-white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
1116<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span>
1117  <span class="token attr-name">simple</span>
1118  <span class="token attr-name">ontoggle=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
1119    <span class="token comment">// ontoggle fires on all state changes (open/closed), requiring the state check</span>
1120    <span class="token keyword">if</span> <span class="token punctuation">(</span>ev<span class="token punctuation">.</span>newState <span class="token operator">===</span> <span class="token string">"closed"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
1121      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"closed by ontoggle"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
1122    <span class="token punctuation">}</span>
1123  <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
1124<span class="token punctuation">></span></span>
1125  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Dashboard<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
1126  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DropdownItem</span><span class="token punctuation">></span></span>Settings<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DropdownItem</span><span class="token punctuation">></span></span>
1127<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>`),n(t,x)}

1127,$$slots:{example:!0,code:!0}}),O(Tn);var Os=s(Tn,2);z(Os,{children:(c,b)=>{a();var t=p("Component data");n(c,t)}});var js=s(Os,4);Xa(js,{get dirName(){return C}});var Es=s(js,2);z(Es,{children:(c,b)=>{a();var t=p("References");n(c,t)}});var Rs=s(Es,4);z(Rs,{children:(c,b)=>{a();var t=p("GitHub Links");n(c,t)}});var Hs=s(Rs,2);Za(Hs,{});var Gs=s(Hs,2);z(Gs,{children:(c,b)=>{a();var t=p("LLM Link");n(c,t)}});var Pa=s(Gs,2);Ka(Pa,{}),n(D,u)},$$slots:{default:!0}})),un()}export{le as default,Js as metadata};