carbon-components-svelte/assets/UIShell.80f3648f.js

let n=document.createElement("style");n.innerHTML="",document.head.appendChild(n);import{S as a,i as s,s as t,c as p,a as e,m as o,t as c,b as l,d as u,g as i,h as k,j as r,k as d,l as g,n as v,o as m,p as S,N as H,q as N,r as h,Y as L}from"./index.e7d8faec.js";import"./Button.2d988908.js";import"./index.afebacfb.js";import{C as f,P as w}from"./Preview.56cdfa1f.js";import"./ChevronDown16.a487f433.js";import"./Loading.f65f7ed1.js";import"./Column.a6aa8264.js";import"./Content.9363af19.js";import"./store.7f148588.js";function P(n){let a,s,t,p,e,o,c,l,u,L,f,w,P,x,I,b,M,C;return{c(){a=i("div"),s=i("ul"),t=i("li"),p=i("a"),e=k("Usage"),o=r(),c=i("ul"),l=i("li"),u=i("a"),L=k("Header with side navigation"),f=r(),w=i("li"),P=i("a"),x=k("Header with app switcher"),I=r(),b=i("li"),M=i("a"),C=k("Header with utilities"),this.h()},l(n){a=d(n,"DIV",{slot:!0});var i=g(a);s=d(i,"UL",{class:!0});var k=g(s);t=d(k,"LI",{class:!0});var r=g(t);p=d(r,"A",{class:!0,href:!0});var H=g(p);e=v(H,"Usage"),H.forEach(m),o=S(r),c=d(r,"UL",{class:!0});var N=g(c);l=d(N,"LI",{class:!0});var h=g(l);u=d(h,"A",{class:!0,href:!0});var $=g(u);L=v($,"Header with side navigation"),$.forEach(m),h.forEach(m),f=S(N),w=d(N,"LI",{class:!0});var O=g(w);P=d(O,"A",{class:!0,href:!0});var j=g(P);x=v(j,"Header with app switcher"),j.forEach(m),O.forEach(m),I=S(N),b=d(N,"LI",{class:!0});var A=g(b);M=d(A,"A",{class:!0,href:!0});var D=g(M);C=v(D,"Header with utilities"),D.forEach(m),A.forEach(m),N.forEach(m),r.forEach(m),k.forEach(m),i.forEach(m),this.h()},h(){H(p,"class","bx--link"),H(p,"href","#usage"),H(u,"class","bx--link"),H(u,"href","#header-with-side-navigation"),H(l,"class","bx--list__item"),H(P,"class","bx--link"),H(P,"href","#header-with-app-switcher"),H(w,"class","bx--list__item"),H(M,"class","bx--link"),H(M,"href","#header-with-utilities"),H(b,"class","bx--list__item"),H(c,"class","bx--list--unordered bx--list--nested"),H(t,"class","bx--list__item"),H(s,"class","bx--list--unordered"),H(a,"slot","aside")},m(n,i){N(n,a,i),h(a,s),h(s,t),h(t,p),h(p,e),h(t,o),h(t,c),h(c,l),h(l,u),h(u,L),h(c,f),h(c,w),h(w,P),h(P,x),h(c,I),h(c,b),h(b,M),h(M,C)},d(n){n&&m(a)}}}function x(n){let a,s,t,f,P,x,I,b,M,C,$,O,j,A,D,G;return f=new w({props:{framed:!0,src:"/framed/UIShell/HeaderNav",codeRaw:'<script>\n  import {\n    Header,\n    HeaderNav,\n    HeaderNavItem,\n    HeaderNavMenu,\n    SideNav,\n    SideNavItems,\n    SideNavMenu,\n    SideNavMenuItem,\n    SideNavLink,\n    SkipToContent,\n    Content,\n    Grid,\n    Row,\n    Column,\n  } from "carbon-components-svelte";\n\n  let isSideNavOpen = false;\n<\/script>\n\n<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>\n  <div slot="skip-to-content">\n    <SkipToContent />\n  </div>\n\n  <HeaderNav>\n    <HeaderNavItem href="/" text="Link 1" />\n    <HeaderNavItem href="/" text="Link 2" />\n    <HeaderNavItem href="/" text="Link 3" />\n    <HeaderNavMenu text="Menu">\n      <HeaderNavItem href="/" text="Link 1" />\n      <HeaderNavItem href="/" text="Link 2" />\n      <HeaderNavItem href="/" text="Link 3" />\n    </HeaderNavMenu>\n  </HeaderNav>\n</Header>\n\n<SideNav bind:isOpen={isSideNavOpen}>\n  <SideNavItems>\n    <SideNavLink text="Link 1" />\n    <SideNavLink text="Link 2" />\n    <SideNavLink text="Link 3" />\n    <SideNavMenu text="Menu">\n      <SideNavMenuItem href="/" text="Link 1" />\n      <SideNavMenuItem href="/" text="Link 2" />\n      <SideNavMenuItem href="/" text="Link 3" />\n    </SideNavMenu>\n  </SideNavItems>\n</SideNav>\n\n<Content>\n  <Grid>\n    <Row>\n      <Column>\n        <h1>Welcome</h1>\n      </Column>\n    </Row>\n  </Grid>\n</Content>\n',code:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n  <span class="token keyword">import</span> <span class="token punctuation">{</span>\n    Header<span class="token punctuation">,</span>\n    HeaderNav<span class="token punctuation">,</span>\n    HeaderNavItem<span class="token punctuation">,</span>\n    HeaderNavMenu<span class="token punctuation">,</span>\n    SideNav<span class="token punctuation">,</span>\n    SideNavItems<span class="token punctuation">,</span>\n    SideNavMenu<span class="token punctuation">,</span>\n    SideNavMenuItem<span class="token punctuation">,</span>\n    SideNavLink<span class="token punctuation">,</span>\n    SkipToContent<span class="token punctuation">,</span>\n    Content<span class="token punctuation">,</span>\n    Grid<span class="token punctuation">,</span>\n    Row<span class="token punctuation">,</span>\n    Column<span class="token punctuation">,</span>\n  <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>\n\n  <span class="token keyword">let</span> isSideNavOpen <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n</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\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Header</span> <span class="token attr-name">company</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>IBM<span class="token punctuation">"</span></span> <span class="token attr-name">platformName</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Carbon Svelte<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>isSideNavOpen</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>skip-to-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SkipToContent</span> <span class="token punctuation">/></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderNav</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderNavItem</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">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderNavItem</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">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderNavItem</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">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 3<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderNavMenu</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderNavItem</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">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderNavItem</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">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderNavItem</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">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 3<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderNavMenu</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderNav</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Header</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNav</span> <span class="token attr-name"><span class="token namespace">bind:</span>isOpen=</span><span class="token language-javascript"><span class="token punctuation">{</span>isSideNavOpen<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavItems</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavLink</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavLink</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavLink</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 3<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavMenu</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavMenuItem</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">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavMenuItem</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">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavMenuItem</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">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 3<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>SideNavMenu</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>SideNavItems</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>SideNav</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Content</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Grid</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Welcome<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Grid</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Content</span><span class="token punctuation">></span></span>\n'}}),M=new w({props:{framed:!0,src:"/framed/UIShell/HeaderSwitcher",codeRaw:'<script>\n  import {\n    Header,\n    HeaderUtilities,\n    HeaderAction,\n    HeaderPanelLinks,\n    HeaderPanelDivider,\n    HeaderPanelLink,\n    SideNav,\n    SideNavItems,\n    SideNavMenu,\n    SideNavMenuItem,\n    SideNavLink,\n    SkipToContent,\n    Content,\n    Grid,\n    Row,\n    Column,\n  } from "carbon-components-svelte";\n\n  let isSideNavOpen = false;\n  let isOpen = false;\n<\/script>\n\n<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>\n  <div slot="skip-to-content">\n    <SkipToContent />\n  </div>\n  <HeaderUtilities>\n    <HeaderAction bind:isOpen>\n      <HeaderPanelLinks>\n        <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>\n        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>\n        <HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>\n        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>\n        <HeaderPanelLink>Switcher item 2</HeaderPanelLink>\n        <HeaderPanelLink>Switcher item 3</HeaderPanelLink>\n        <HeaderPanelLink>Switcher item 4</HeaderPanelLink>\n        <HeaderPanelLink>Switcher item 5</HeaderPanelLink>\n      </HeaderPanelLinks>\n    </HeaderAction>\n  </HeaderUtilities>\n</Header>\n\n<SideNav bind:isOpen={isSideNavOpen}>\n  <SideNavItems>\n    <SideNavLink text="Link 1" />\n    <SideNavLink text="Link 2" />\n    <SideNavLink text="Link 3" />\n    <SideNavMenu text="Menu">\n      <SideNavMenuItem href="/" text="Link 1" />\n      <SideNavMenuItem href="/" text="Link 2" />\n      <SideNavMenuItem href="/" text="Link 3" />\n    </SideNavMenu>\n  </SideNavItems>\n</SideNav>\n\n<Content>\n  <Grid>\n    <Row>\n      <Column>\n        <h1>Welcome</h1>\n      </Column>\n    </Row>\n  </Grid>\n</Content>\n',code:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n  <span class="token keyword">import</span> <span class="token punctuation">{</span>\n    Header<span class="token punctuation">,</span>\n    HeaderUtilities<span class="token punctuation">,</span>\n    HeaderAction<span class="token punctuation">,</span>\n    HeaderPanelLinks<span class="token punctuation">,</span>\n    HeaderPanelDivider<span class="token punctuation">,</span>\n    HeaderPanelLink<span class="token punctuation">,</span>\n    SideNav<span class="token punctuation">,</span>\n    SideNavItems<span class="token punctuation">,</span>\n    SideNavMenu<span class="token punctuation">,</span>\n    SideNavMenuItem<span class="token punctuation">,</span>\n    SideNavLink<span class="token punctuation">,</span>\n    SkipToContent<span class="token punctuation">,</span>\n    Content<span class="token punctuation">,</span>\n    Grid<span class="token punctuation">,</span>\n    Row<span class="token punctuation">,</span>\n    Column<span class="token punctuation">,</span>\n  <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>\n\n  <span class="token keyword">let</span> isSideNavOpen <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n  <span class="token keyword">let</span> isOpen <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n</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\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Header</span> <span class="token attr-name">company</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>IBM<span class="token punctuation">"</span></span> <span class="token attr-name">platformName</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Carbon Svelte<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>isSideNavOpen</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>skip-to-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SkipToContent</span> <span class="token punctuation">/></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderUtilities</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderAction</span> <span class="token attr-name"><span class="token namespace">bind:</span>isOpen</span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderPanelLinks</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderPanelDivider</span><span class="token punctuation">></span></span>Switcher subject 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderPanelDivider</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderPanelLink</span><span class="token punctuation">></span></span>Switcher item 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderPanelLink</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderPanelDivider</span><span class="token punctuation">></span></span>Switcher subject 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderPanelDivider</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderPanelLink</span><span class="token punctuation">></span></span>Switcher item 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderPanelLink</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderPanelLink</span><span class="token punctuation">></span></span>Switcher item 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderPanelLink</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderPanelLink</span><span class="token punctuation">></span></span>Switcher item 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderPanelLink</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderPanelLink</span><span class="token punctuation">></span></span>Switcher item 4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderPanelLink</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderPanelLink</span><span class="token punctuation">></span></span>Switcher item 5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderPanelLink</span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderPanelLinks</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderAction</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderUtilities</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Header</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNav</span> <span class="token attr-name"><span class="token namespace">bind:</span>isOpen=</span><span class="token language-javascript"><span class="token punctuation">{</span>isSideNavOpen<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavItems</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavLink</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavLink</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavLink</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 3<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavMenu</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavMenuItem</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">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavMenuItem</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">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavMenuItem</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">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 3<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>SideNavMenu</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>SideNavItems</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>SideNav</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Content</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Grid</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Welcome<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Grid</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Content</span><span class="token punctuation">></span></span>\n'}}),A=new w({props:{framed:!0,src:"/framed/UIShell/HeaderUtilities",codeRaw:'<script>\n  import {\n    Header,\n    HeaderUtilities,\n    HeaderAction,\n    HeaderActionSearch,\n    HeaderGlobalAction,\n    HeaderPanelLinks,\n    HeaderPanelDivider,\n    HeaderPanelLink,\n    SideNav,\n    SideNavItems,\n    SideNavMenu,\n    SideNavMenuItem,\n    SideNavLink,\n    SkipToContent,\n    Content,\n    Grid,\n    Row,\n    Column,\n  } from "carbon-components-svelte";\n  import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20";\n\n  let isSideNavOpen = false;\n  let isOpen = false;\n<\/script>\n\n<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>\n  <div slot="skip-to-content">\n    <SkipToContent />\n  </div>\n  <HeaderUtilities>\n    <HeaderActionSearch />\n    <HeaderGlobalAction aria-label="Settings" icon={SettingsAdjust20} />\n    <HeaderAction bind:isOpen>\n      <HeaderPanelLinks>\n        <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>\n        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>\n        <HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>\n        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>\n        <HeaderPanelLink>Switcher item 2</HeaderPanelLink>\n        <HeaderPanelLink>Switcher item 3</HeaderPanelLink>\n        <HeaderPanelLink>Switcher item 4</HeaderPanelLink>\n        <HeaderPanelLink>Switcher item 5</HeaderPanelLink>\n      </HeaderPanelLinks>\n    </HeaderAction>\n  </HeaderUtilities>\n</Header>\n\n<SideNav bind:isOpen={isSideNavOpen}>\n  <SideNavItems>\n    <SideNavLink text="Link 1" />\n    <SideNavLink text="Link 2" />\n    <SideNavLink text="Link 3" />\n    <SideNavMenu text="Menu">\n      <SideNavMenuItem href="/" text="Link 1" />\n      <SideNavMenuItem href="/" text="Link 2" />\n      <SideNavMenuItem href="/" text="Link 3" />\n    </SideNavMenu>\n  </SideNavItems>\n</SideNav>\n\n<Content>\n  <Grid>\n    <Row>\n      <Column>\n        <h1>Welcome</h1>\n      </Column>\n    </Row>\n  </Grid>\n</Content>\n',code:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n  <span class="token keyword">import</span> <span class="token punctuation">{</span>\n    Header<span class="token punctuation">,</span>\n    HeaderUtilities<span class="token punctuation">,</span>\n    HeaderAction<span class="token punctuation">,</span>\n    HeaderActionSearch<span class="token punctuation">,</span>\n    HeaderGlobalAction<span class="token punctuation">,</span>\n    HeaderPanelLinks<span class="token punctuation">,</span>\n    HeaderPanelDivider<span class="token punctuation">,</span>\n    HeaderPanelLink<span class="token punctuation">,</span>\n    SideNav<span class="token punctuation">,</span>\n    SideNavItems<span class="token punctuation">,</span>\n    SideNavMenu<span class="token punctuation">,</span>\n    SideNavMenuItem<span class="token punctuation">,</span>\n    SideNavLink<span class="token punctuation">,</span>\n    SkipToContent<span class="token punctuation">,</span>\n    Content<span class="token punctuation">,</span>\n    Grid<span class="token punctuation">,</span>\n    Row<span class="token punctuation">,</span>\n    Column<span class="token punctuation">,</span>\n  <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>\n  <span class="token keyword">import</span> SettingsAdjust20 <span class="token keyword">from</span> <span class="token string">"carbon-icons-svelte/lib/SettingsAdjust20"</span><span class="token punctuation">;</span>\n\n  <span class="token keyword">let</span> isSideNavOpen <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n  <span class="token keyword">let</span> isOpen <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n</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\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Header</span> <span class="token attr-name">company</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>IBM<span class="token punctuation">"</span></span> <span class="token attr-name">platformName</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Carbon Svelte<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>isSideNavOpen</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>skip-to-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SkipToContent</span> <span class="token punctuation">/></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderUtilities</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderActionSearch</span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderGlobalAction</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Settings<span class="token punctuation">"</span></span> <span class="token attr-name">icon=</span><span class="token language-javascript"><span class="token punctuation">{</span>SettingsAdjust20<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderAction</span> <span class="token attr-name"><span class="token namespace">bind:</span>isOpen</span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderPanelLinks</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderPanelDivider</span><span class="token punctuation">></span></span>Switcher subject 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderPanelDivider</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderPanelLink</span><span class="token punctuation">></span></span>Switcher item 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderPanelLink</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderPanelDivider</span><span class="token punctuation">></span></span>Switcher subject 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderPanelDivider</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderPanelLink</span><span class="token punctuation">></span></span>Switcher item 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderPanelLink</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderPanelLink</span><span class="token punctuation">></span></span>Switcher item 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderPanelLink</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderPanelLink</span><span class="token punctuation">></span></span>Switcher item 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderPanelLink</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderPanelLink</span><span class="token punctuation">></span></span>Switcher item 4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderPanelLink</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HeaderPanelLink</span><span class="token punctuation">></span></span>Switcher item 5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderPanelLink</span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderPanelLinks</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderAction</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>HeaderUtilities</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Header</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNav</span> <span class="token attr-name"><span class="token namespace">bind:</span>isOpen=</span><span class="token language-javascript"><span class="token punctuation">{</span>isSideNavOpen<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavItems</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavLink</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavLink</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavLink</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 3<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavMenu</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavMenuItem</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">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavMenuItem</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">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SideNavMenuItem</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">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Link 3<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>SideNavMenu</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>SideNavItems</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>SideNav</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Content</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Grid</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Welcome<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Grid</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Content</span><span class="token punctuation">></span></span>\n'}}),{c(){a=i("h3"),s=k("Header with side navigation"),t=r(),p(f.$$.fragment),P=r(),x=i("h3"),I=k("Header with app switcher"),b=r(),p(M.$$.fragment),C=r(),$=i("h3"),O=k("Header with utilities"),j=r(),p(A.$$.fragment),D=r(),this.h()},l(n){a=d(n,"H3",{id:!0});var p=g(a);s=v(p,"Header with side navigation"),p.forEach(m),t=S(n),e(f.$$.fragment,n),P=S(n),x=d(n,"H3",{id:!0});var o=g(x);I=v(o,"Header with app switcher"),o.forEach(m),b=S(n),e(M.$$.fragment,n),C=S(n),$=d(n,"H3",{id:!0});var c=g($);O=v(c,"Header with utilities"),c.forEach(m),j=S(n),e(A.$$.fragment,n),D=S(n),this.h()},h(){H(a,"id","header-with-side-navigation"),H(x,"id","header-with-app-switcher"),H($,"id","header-with-utilities")},m(n,p){N(n,a,p),h(a,s),N(n,t,p),o(f,n,p),N(n,P,p),N(n,x,p),h(x,I),N(n,b,p),o(M,n,p),N(n,C,p),N(n,$,p),h($,O),N(n,j,p),o(A,n,p),N(n,D,p),G=!0},p:L,i(n){G||(c(f.$$.fragment,n),c(M.$$.fragment,n),c(A.$$.fragment,n),G=!0)},o(n){l(f.$$.fragment,n),l(M.$$.fragment,n),l(A.$$.fragment,n),G=!1},d(n){n&&m(a),n&&m(t),u(f,n),n&&m(P),n&&m(x),n&&m(b),u(M,n),n&&m(C),n&&m($),n&&m(j),u(A,n),n&&m(D)}}}function I(n){let a,s;return a=new f({props:{$$slots:{default:[x],aside:[P]},$$scope:{ctx:n}}}),{c(){p(a.$$.fragment)},l(n){e(a.$$.fragment,n)},m(n,t){o(a,n,t),s=!0},p(n,[s]){const t={};1&s&&(t.$$scope={dirty:s,ctx:n}),a.$set(t)},i(n){s||(c(a.$$.fragment,n),s=!0)},o(n){l(a.$$.fragment,n),s=!1},d(n){u(a,n)}}}export default class extends a{constructor(n){super(),s(this,n,null,I,t,{})}}