@vielzeug/buildit 2.0.0 → 2.1.0

package/dist/separator.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const t=require(`./content/separator/separator.css?inline.cjs`);let n=require(`@vielzeug/craftit`);var r=(0,n.defineComponent)({props:{color:(0,n.typed)(void 0),decorative:(0,n.typed)(!0),label:(0,n.typed)(void 0),orientation:(0,n.typed)(`horizontal`)},setup({props:e}){return n.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const t=require(`./content/separator/separator.css?inline.cjs`);let n=require(`@vielzeug/craftit`);var r=(0,n.define)(`bit-separator`,{props:{color:void 0,decorative:!0,label:void 0,orientation:`horizontal`},setup({props:e}){return n.html`
       ${()=>e.label.value?n.html`
               <div class="separator-wrapper" part="wrapper">
                 <hr
@@ -22,5 +22,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                 :aria-hidden="${()=>e.decorative.value?`true`:null}"
                 :aria-orientation="${()=>e.orientation.value}" />
             `}
-    `},styles:[e.colorThemeMixin,t.default],tag:`bit-separator`});exports.SEPARATOR_TAG=r;
+    `},styles:[e.colorThemeMixin,t.default]});exports.SEPARATOR_TAG=r;
 //# sourceMappingURL=separator.cjs.map

package/dist/separator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"separator.cjs","names":[],"sources":["../src/content/separator/separator.ts"],"sourcesContent":["import { defineComponent, html, typed } from '@vielzeug/craftit';\n\nimport type { ThemeColor } from '../../types';\n\nimport { colorThemeMixin } from '../../styles';\nimport componentStyles from './separator.css?inline';\n\n/** Separator component properties */\nexport type BitSeparatorProps = {\n  /** Theme color tint */\n  color?: ThemeColor;\n  /** Decorative only (default true) — set to false for semantic separators */\n  decorative?: boolean;\n  /** Optional label text centered on the separator */\n  label?: string;\n  /** Orientation of the separator */\n  orientation?: 'horizontal' | 'vertical';\n};\n\n/**\n * A simple visual divider between sections of content.\n *\n * @element bit-separator\n *\n * @attr {string} orientation - 'horizontal' (default) | 'vertical'\n * @attr {boolean} decorative - When true (default), aria-hidden is applied\n * @attr {string} label - Optional centered label text\n * @attr {string} color - Theme color\n *\n * @cssprop --separator-color - Line color\n * @cssprop --separator-size - Line thickness\n * @cssprop --separator-spacing - Vertical margin\n *\n * @example\n * ```html\n * <bit-separator></bit-separator>\n * <bit-separator label=\"or\"></bit-separator>\n * <bit-separator orientation=\"vertical\"></bit-separator>\n * ```\n */\nexport const SEPARATOR_TAG = defineComponent<BitSeparatorProps>({\n  props: {\n    color: typed<BitSeparatorProps['color']>(undefined),\n    decorative: typed<boolean>(true),\n    label: typed<string | undefined>(undefined),\n    orientation: typed<BitSeparatorProps['orientation']>('horizontal'),\n  },\n  setup({ props }) {\n    return html`\n      ${() =>\n        props.label.value\n          ? html`\n              <div class=\"separator-wrapper\" part=\"wrapper\">\n                <hr\n                  class=\"separator\"\n                  part=\"separator\"\n                  :role=\"${() => (props.decorative.value ? 'none' : 'separator')}\"\n                  :aria-hidden=\"${() => (props.decorative.value ? 'true' : null)}\"\n                  :aria-orientation=\"${() => props.orientation.value}\" />\n                <span class=\"separator-label\" part=\"label\">${() => props.label.value}</span>\n                <hr\n                  class=\"separator\"\n                  part=\"separator\"\n                  :role=\"${() => (props.decorative.value ? 'none' : 'separator')}\"\n                  :aria-hidden=\"${() => (props.decorative.value ? 'true' : null)}\" />\n              </div>\n            `\n          : html`\n              <hr\n                class=\"separator\"\n                part=\"separator\"\n                :role=\"${() => (props.decorative.value ? 'none' : 'separator')}\"\n                :aria-hidden=\"${() => (props.decorative.value ? 'true' : null)}\"\n                :aria-orientation=\"${() => props.orientation.value}\" />\n            `}\n    `;\n  },\n  styles: [colorThemeMixin, componentStyles],\n  tag: 'bit-separator',\n});\n"],"mappings":"qPAwCA,IAAa,GAAA,EAAA,EAAA,iBAAmD,CAC9D,MAAO,CACL,OAAA,EAAA,EAAA,OAAyC,IAAA,GAAU,CACnD,YAAA,EAAA,EAAA,OAA2B,GAAK,CAChC,OAAA,EAAA,EAAA,OAAiC,IAAA,GAAU,CAC3C,aAAA,EAAA,EAAA,OAAqD,aAAa,CACnE,CACD,MAAM,CAAE,SAAS,CACf,MAAO,GAAA,IAAI;YAEP,EAAM,MAAM,MACR,EAAA,IAAI;;;;;+BAKkB,EAAM,WAAW,MAAQ,OAAS,YAAa;sCACxC,EAAM,WAAW,MAAQ,OAAS,KAAM;2CACpC,EAAM,YAAY,MAAM;iEACF,EAAM,MAAM,MAAM;;;;+BAInD,EAAM,WAAW,MAAQ,OAAS,YAAa;sCACxC,EAAM,WAAW,MAAQ,OAAS,KAAM;;cAGrE,EAAA,IAAI;;;;6BAIgB,EAAM,WAAW,MAAQ,OAAS,YAAa;oCACxC,EAAM,WAAW,MAAQ,OAAS,KAAM;yCACpC,EAAM,YAAY,MAAM;cACrD;OAGZ,OAAQ,CAAC,EAAA,gBAAiB,EAAA,QAAgB,CAC1C,IAAK,gBACN,CAAC"}
+{"version":3,"file":"separator.cjs","names":[],"sources":["../src/content/separator/separator.ts"],"sourcesContent":["import { define, html } from '@vielzeug/craftit';\n\nimport type { ThemeColor } from '../../types';\n\nimport { colorThemeMixin } from '../../styles';\nimport componentStyles from './separator.css?inline';\n\n/** Separator component properties */\nexport type BitSeparatorProps = {\n  /** Theme color tint */\n  color?: ThemeColor;\n  /** Decorative only (default true) — set to false for semantic separators */\n  decorative?: boolean;\n  /** Optional label text centered on the separator */\n  label?: string;\n  /** Orientation of the separator */\n  orientation?: 'horizontal' | 'vertical';\n};\n\n/**\n * A simple visual divider between sections of content.\n *\n * @element bit-separator\n *\n * @attr {string} orientation - 'horizontal' (default) | 'vertical'\n * @attr {boolean} decorative - When true (default), aria-hidden is applied\n * @attr {string} label - Optional centered label text\n * @attr {string} color - Theme color\n *\n * @cssprop --separator-color - Line color\n * @cssprop --separator-size - Line thickness\n * @cssprop --separator-spacing - Vertical margin\n *\n * @example\n * ```html\n * <bit-separator></bit-separator>\n * <bit-separator label=\"or\"></bit-separator>\n * <bit-separator orientation=\"vertical\"></bit-separator>\n * ```\n */\nexport const SEPARATOR_TAG = define<BitSeparatorProps>('bit-separator', {\n  props: {\n    color: undefined,\n    decorative: true,\n    label: undefined,\n    orientation: 'horizontal',\n  },\n  setup({ props }) {\n    return html`\n      ${() =>\n        props.label.value\n          ? html`\n              <div class=\"separator-wrapper\" part=\"wrapper\">\n                <hr\n                  class=\"separator\"\n                  part=\"separator\"\n                  :role=\"${() => (props.decorative.value ? 'none' : 'separator')}\"\n                  :aria-hidden=\"${() => (props.decorative.value ? 'true' : null)}\"\n                  :aria-orientation=\"${() => props.orientation.value}\" />\n                <span class=\"separator-label\" part=\"label\">${() => props.label.value}</span>\n                <hr\n                  class=\"separator\"\n                  part=\"separator\"\n                  :role=\"${() => (props.decorative.value ? 'none' : 'separator')}\"\n                  :aria-hidden=\"${() => (props.decorative.value ? 'true' : null)}\" />\n              </div>\n            `\n          : html`\n              <hr\n                class=\"separator\"\n                part=\"separator\"\n                :role=\"${() => (props.decorative.value ? 'none' : 'separator')}\"\n                :aria-hidden=\"${() => (props.decorative.value ? 'true' : null)}\"\n                :aria-orientation=\"${() => props.orientation.value}\" />\n            `}\n    `;\n  },\n  styles: [colorThemeMixin, componentStyles],\n});\n"],"mappings":"qPAwCA,IAAa,GAAA,EAAA,EAAA,QAA0C,gBAAiB,CACtE,MAAO,CACL,MAAO,IAAA,GACP,WAAY,GACZ,MAAO,IAAA,GACP,YAAa,aACd,CACD,MAAM,CAAE,SAAS,CACf,MAAO,GAAA,IAAI;YAEP,EAAM,MAAM,MACR,EAAA,IAAI;;;;;+BAKkB,EAAM,WAAW,MAAQ,OAAS,YAAa;sCACxC,EAAM,WAAW,MAAQ,OAAS,KAAM;2CACpC,EAAM,YAAY,MAAM;iEACF,EAAM,MAAM,MAAM;;;;+BAInD,EAAM,WAAW,MAAQ,OAAS,YAAa;sCACxC,EAAM,WAAW,MAAQ,OAAS,KAAM;;cAGrE,EAAA,IAAI;;;;6BAIgB,EAAM,WAAW,MAAQ,OAAS,YAAa;oCACxC,EAAM,WAAW,MAAQ,OAAS,KAAM;yCACpC,EAAM,YAAY,MAAM;cACrD;OAGZ,OAAQ,CAAC,EAAA,gBAAiB,EAAA,QAAgB,CAC3C,CAAC"}

package/dist/separator.js

@@ -1,14 +1,14 @@
 import { colorThemeMixin as e } from "./styles/mixins/theme.css.js";
 import "./styles/index.js";
 import t from "./content/separator/separator.css?inline.js";
-import { defineComponent as n, html as r, typed as i } from "@vielzeug/craftit";
+import { define as n, html as r } from "@vielzeug/craftit";
 //#region src/content/separator/separator.ts
-var a = n({
+var i = n("bit-separator", {
 	props: {
-		color: i(void 0),
-		decorative: i(!0),
-		label: i(void 0),
-		orientation: i("horizontal")
+		color: void 0,
+		decorative: !0,
+		label: void 0,
+		orientation: "horizontal"
 	},
 	setup({ props: e }) {
 		return r`
@@ -37,10 +37,9 @@ var a = n({
             `}
     `;
 	},
-	styles: [e, t],
-	tag: "bit-separator"
+	styles: [e, t]
 });
 //#endregion
-export { a as SEPARATOR_TAG };
+export { i as SEPARATOR_TAG };
 
 //# sourceMappingURL=separator.js.map

package/dist/separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"separator.js","names":[],"sources":["../src/content/separator/separator.ts"],"sourcesContent":["import { defineComponent, html, typed } from '@vielzeug/craftit';\n\nimport type { ThemeColor } from '../../types';\n\nimport { colorThemeMixin } from '../../styles';\nimport componentStyles from './separator.css?inline';\n\n/** Separator component properties */\nexport type BitSeparatorProps = {\n  /** Theme color tint */\n  color?: ThemeColor;\n  /** Decorative only (default true) — set to false for semantic separators */\n  decorative?: boolean;\n  /** Optional label text centered on the separator */\n  label?: string;\n  /** Orientation of the separator */\n  orientation?: 'horizontal' | 'vertical';\n};\n\n/**\n * A simple visual divider between sections of content.\n *\n * @element bit-separator\n *\n * @attr {string} orientation - 'horizontal' (default) | 'vertical'\n * @attr {boolean} decorative - When true (default), aria-hidden is applied\n * @attr {string} label - Optional centered label text\n * @attr {string} color - Theme color\n *\n * @cssprop --separator-color - Line color\n * @cssprop --separator-size - Line thickness\n * @cssprop --separator-spacing - Vertical margin\n *\n * @example\n * ```html\n * <bit-separator></bit-separator>\n * <bit-separator label=\"or\"></bit-separator>\n * <bit-separator orientation=\"vertical\"></bit-separator>\n * ```\n */\nexport const SEPARATOR_TAG = defineComponent<BitSeparatorProps>({\n  props: {\n    color: typed<BitSeparatorProps['color']>(undefined),\n    decorative: typed<boolean>(true),\n    label: typed<string | undefined>(undefined),\n    orientation: typed<BitSeparatorProps['orientation']>('horizontal'),\n  },\n  setup({ props }) {\n    return html`\n      ${() =>\n        props.label.value\n          ? html`\n              <div class=\"separator-wrapper\" part=\"wrapper\">\n                <hr\n                  class=\"separator\"\n                  part=\"separator\"\n                  :role=\"${() => (props.decorative.value ? 'none' : 'separator')}\"\n                  :aria-hidden=\"${() => (props.decorative.value ? 'true' : null)}\"\n                  :aria-orientation=\"${() => props.orientation.value}\" />\n                <span class=\"separator-label\" part=\"label\">${() => props.label.value}</span>\n                <hr\n                  class=\"separator\"\n                  part=\"separator\"\n                  :role=\"${() => (props.decorative.value ? 'none' : 'separator')}\"\n                  :aria-hidden=\"${() => (props.decorative.value ? 'true' : null)}\" />\n              </div>\n            `\n          : html`\n              <hr\n                class=\"separator\"\n                part=\"separator\"\n                :role=\"${() => (props.decorative.value ? 'none' : 'separator')}\"\n                :aria-hidden=\"${() => (props.decorative.value ? 'true' : null)}\"\n                :aria-orientation=\"${() => props.orientation.value}\" />\n            `}\n    `;\n  },\n  styles: [colorThemeMixin, componentStyles],\n  tag: 'bit-separator',\n});\n"],"mappings":";;;;;AAwCA,IAAa,IAAgB,EAAmC;CAC9D,OAAO;EACL,OAAO,EAAkC,KAAA,EAAU;EACnD,YAAY,EAAe,GAAK;EAChC,OAAO,EAA0B,KAAA,EAAU;EAC3C,aAAa,EAAwC,aAAa;EACnE;CACD,MAAM,EAAE,YAAS;AACf,SAAO,CAAI;cAEP,EAAM,MAAM,QACR,CAAI;;;;;iCAKkB,EAAM,WAAW,QAAQ,SAAS,YAAa;wCACxC,EAAM,WAAW,QAAQ,SAAS,KAAM;6CACpC,EAAM,YAAY,MAAM;mEACF,EAAM,MAAM,MAAM;;;;iCAInD,EAAM,WAAW,QAAQ,SAAS,YAAa;wCACxC,EAAM,WAAW,QAAQ,SAAS,KAAM;;gBAGrE,CAAI;;;;+BAIgB,EAAM,WAAW,QAAQ,SAAS,YAAa;sCACxC,EAAM,WAAW,QAAQ,SAAS,KAAM;2CACpC,EAAM,YAAY,MAAM;cACrD;;;CAGZ,QAAQ,CAAC,GAAiB,EAAgB;CAC1C,KAAK;CACN,CAAC"}
+{"version":3,"file":"separator.js","names":[],"sources":["../src/content/separator/separator.ts"],"sourcesContent":["import { define, html } from '@vielzeug/craftit';\n\nimport type { ThemeColor } from '../../types';\n\nimport { colorThemeMixin } from '../../styles';\nimport componentStyles from './separator.css?inline';\n\n/** Separator component properties */\nexport type BitSeparatorProps = {\n  /** Theme color tint */\n  color?: ThemeColor;\n  /** Decorative only (default true) — set to false for semantic separators */\n  decorative?: boolean;\n  /** Optional label text centered on the separator */\n  label?: string;\n  /** Orientation of the separator */\n  orientation?: 'horizontal' | 'vertical';\n};\n\n/**\n * A simple visual divider between sections of content.\n *\n * @element bit-separator\n *\n * @attr {string} orientation - 'horizontal' (default) | 'vertical'\n * @attr {boolean} decorative - When true (default), aria-hidden is applied\n * @attr {string} label - Optional centered label text\n * @attr {string} color - Theme color\n *\n * @cssprop --separator-color - Line color\n * @cssprop --separator-size - Line thickness\n * @cssprop --separator-spacing - Vertical margin\n *\n * @example\n * ```html\n * <bit-separator></bit-separator>\n * <bit-separator label=\"or\"></bit-separator>\n * <bit-separator orientation=\"vertical\"></bit-separator>\n * ```\n */\nexport const SEPARATOR_TAG = define<BitSeparatorProps>('bit-separator', {\n  props: {\n    color: undefined,\n    decorative: true,\n    label: undefined,\n    orientation: 'horizontal',\n  },\n  setup({ props }) {\n    return html`\n      ${() =>\n        props.label.value\n          ? html`\n              <div class=\"separator-wrapper\" part=\"wrapper\">\n                <hr\n                  class=\"separator\"\n                  part=\"separator\"\n                  :role=\"${() => (props.decorative.value ? 'none' : 'separator')}\"\n                  :aria-hidden=\"${() => (props.decorative.value ? 'true' : null)}\"\n                  :aria-orientation=\"${() => props.orientation.value}\" />\n                <span class=\"separator-label\" part=\"label\">${() => props.label.value}</span>\n                <hr\n                  class=\"separator\"\n                  part=\"separator\"\n                  :role=\"${() => (props.decorative.value ? 'none' : 'separator')}\"\n                  :aria-hidden=\"${() => (props.decorative.value ? 'true' : null)}\" />\n              </div>\n            `\n          : html`\n              <hr\n                class=\"separator\"\n                part=\"separator\"\n                :role=\"${() => (props.decorative.value ? 'none' : 'separator')}\"\n                :aria-hidden=\"${() => (props.decorative.value ? 'true' : null)}\"\n                :aria-orientation=\"${() => props.orientation.value}\" />\n            `}\n    `;\n  },\n  styles: [colorThemeMixin, componentStyles],\n});\n"],"mappings":";;;;;AAwCA,IAAa,IAAgB,EAA0B,iBAAiB;CACtE,OAAO;EACL,OAAO,KAAA;EACP,YAAY;EACZ,OAAO,KAAA;EACP,aAAa;EACd;CACD,MAAM,EAAE,YAAS;AACf,SAAO,CAAI;cAEP,EAAM,MAAM,QACR,CAAI;;;;;iCAKkB,EAAM,WAAW,QAAQ,SAAS,YAAa;wCACxC,EAAM,WAAW,QAAQ,SAAS,KAAM;6CACpC,EAAM,YAAY,MAAM;mEACF,EAAM,MAAM,MAAM;;;;iCAInD,EAAM,WAAW,QAAQ,SAAS,YAAa;wCACxC,EAAM,WAAW,QAAQ,SAAS,KAAM;;gBAGrE,CAAI;;;;+BAIgB,EAAM,WAAW,QAAQ,SAAS,YAAa;sCACxC,EAAM,WAAW,QAAQ,SAAS,KAAM;2CACpC,EAAM,YAAY,MAAM;cACrD;;;CAGZ,QAAQ,CAAC,GAAiB,EAAgB;CAC3C,CAAC"}

package/dist/sidebar.cjs

@@ -1,69 +1,78 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/accessibility.css.cjs`);require(`./styles/index.cjs`);const t=require(`./icons.cjs`),n=require(`./layout/sidebar/sidebar.css?inline.cjs`),r=require(`./layout/sidebar/sidebar-group.css?inline.cjs`),i=require(`./layout/sidebar/sidebar-item.css?inline.cjs`);let a=require(`@vielzeug/craftit`);var o=(0,a.createContext)(`SidebarContext`),s=(0,a.defineComponent)({props:{collapsed:{default:void 0,type:Boolean},collapsible:{default:!1,type:Boolean},"default-collapsed":{default:!1,type:Boolean},label:{default:`Sidebar navigation`},responsive:{default:void 0},variant:{default:void 0}},setup({emit:e,host:n,props:r,slots:i}){let s=(0,a.computed)(()=>i.has(`header`).value),c=(0,a.computed)(()=>i.has(`footer`).value),l=(0,a.signal)(n.hasAttribute(`collapsed`)),u=(0,a.signal)(l.value?n.hasAttribute(`collapsed`):r[`default-collapsed`].value),d=(0,a.computed)(()=>u.value);(0,a.provide)(o,{collapsed:d,variant:r.variant});let f=(t,n)=>{d.value!==t&&(l.value||(u.value=t),e(`collapsed-change`,{collapsed:t,source:n}))},p=()=>{f(!d.value,`toggle`)};return(0,a.effect)(()=>{n.toggleAttribute(`data-collapsed`,d.value)}),(0,a.onMount)(()=>{let e=n;e.setCollapsed=e=>f(!!e,`api`),e.toggle=p;let t,i=new MutationObserver(()=>{!n.hasAttribute(`collapsed`)&&!l.value||(l.value=!0,u.value=n.hasAttribute(`collapsed`))});return i.observe(n,{attributeFilter:[`collapsed`],attributes:!0}),(0,a.watch)(r.responsive,e=>{t?.(),t=void 0;let n=String(e??``).trim();if(!n)return;let r=window.matchMedia(n),i=e=>{f(e.matches,`responsive`)};f(r.matches,`responsive`),r.addEventListener(`change`,i),t=()=>{r.removeEventListener(`change`,i)}},{immediate:!0}),()=>{i.disconnect(),t?.()}}),a.html`
-      <nav aria-label="${()=>r.label.value}" part="nav">
-        <div class="sidebar-header" part="header" ?hidden=${()=>!s.value&&!r.collapsible.value}>
-          <slot name="header"></slot>
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./icon.cjs`);const e=require(`./styles/mixins/accessibility.css.cjs`);require(`./styles/index.cjs`);const t=require(`./layout/sidebar/sidebar.css?inline.cjs`),n=require(`./layout/sidebar/sidebar-group.css?inline.cjs`),r=require(`./layout/sidebar/sidebar-item.css?inline.cjs`);let i=require(`@vielzeug/craftit`);var a=(0,i.createContext)(`SidebarContext`),o=(0,i.define)(`bit-sidebar`,{props:{collapsed:{default:void 0,type:Boolean},collapsible:!1,"default-collapsed":!1,label:`Sidebar navigation`,responsive:void 0,variant:void 0},setup({emit:e,host:t,props:n,slots:r}){let o=(0,i.computed)(()=>r.has(`header`).value),s=(0,i.computed)(()=>r.has(`footer`).value),c=(0,i.computed)(()=>r.has(`logo`).value),l=(0,i.signal)(t.el.hasAttribute(`collapsed`)),u=(0,i.signal)(l.value?t.el.hasAttribute(`collapsed`):n[`default-collapsed`].value),d=(0,i.computed)(()=>u.value);(0,i.provide)(a,{collapsed:d,variant:n.variant});let f=(t,n)=>{d.value!==t&&(l.value||(u.value=t),e(`collapsed-change`,{collapsed:t,source:n}))},p=()=>{f(!d.value,`toggle`)};return t.bind(`attr`,{"data-collapsed":()=>d.value?!0:void 0}),(0,i.onMount)(()=>{let e=t.el;e.setCollapsed=e=>f(!!e,`api`),e.toggle=p;let r,a=new MutationObserver(()=>{!t.el.hasAttribute(`collapsed`)&&!l.value||(l.value=!0,u.value=t.el.hasAttribute(`collapsed`))});return a.observe(t.el,{attributeFilter:[`collapsed`],attributes:!0}),(0,i.watch)(n.responsive,e=>{r?.(),r=void 0;let t=String(e??``).trim();if(!t)return;let n=window.matchMedia(t),i=e=>{f(e.matches,`responsive`)};f(n.matches,`responsive`),n.addEventListener(`change`,i),r=()=>{n.removeEventListener(`change`,i)}},{immediate:!0}),()=>{a.disconnect(),r?.()}}),i.html`
+      <nav aria-label="${()=>n.label.value}" part="nav">
+        <div class="sidebar-header" part="header" ?hidden=${()=>!o.value&&!n.collapsible.value}>
+          <span class="sidebar-logo" ?hidden=${()=>!c.value}>
+            <slot name="logo"></slot>
+          </span>
+          <span class="sidebar-header-content">
+            <slot name="header"></slot>
+          </span>
           <button
             class="toggle-btn"
             part="toggle-btn"
             type="button"
-            ?hidden=${()=>!r.collapsible.value}
+            ?hidden=${()=>!n.collapsible.value}
             aria-label="${()=>d.value?`Expand sidebar`:`Collapse sidebar`}"
             aria-expanded="${()=>String(!d.value)}"
             @click="${p}">
-            <span class="toggle-icon" aria-hidden="true">${t.chevronLeftIcon}</span>
+            <span class="toggle-icon" aria-hidden="true">
+              <bit-icon name="chevron-left" size="16" stroke-width="2" aria-hidden="true"></bit-icon>
+            </span>
           </button>
         </div>
         <div class="sidebar-content" part="content">
           <slot></slot>
         </div>
-        <div class="sidebar-footer" part="footer" ?hidden=${()=>!c.value}>
+        <div class="sidebar-footer" part="footer" ?hidden=${()=>!s.value}>
           <slot name="footer"></slot>
         </div>
       </nav>
-    `},styles:[e.coarsePointerMixin,e.reducedMotionMixin,n.default],tag:`bit-sidebar`}),c=(0,a.defineComponent)({props:{collapsible:{default:!1,type:Boolean},"default-open":{default:!0,type:Boolean},label:{default:``},open:{default:void 0,type:Boolean}},setup({emit:e,host:n,props:r,slots:i}){let s=(0,a.computed)(()=>i.has(`icon`).value),c=(0,a.inject)(o,void 0);(0,a.effect)(()=>{n.toggleAttribute(`sidebar-collapsed`,c?.collapsed.value??!1)});let l=(0,a.computed)(()=>r.open.value!==void 0),u=(0,a.signal)(r[`default-open`].value),d=(0,a.computed)(()=>r.collapsible.value?l.value?r.open.value??!1:u.value:!0);return(0,a.watch)(r.open,e=>{e!==void 0&&(u.value=e)}),(0,a.effect)(()=>{n.toggleAttribute(`open`,d.value)}),a.html`
-      <details class="group" part="group" ?open=${()=>d.value} @click="${t=>{if(!(t.target instanceof HTMLElement)||!t.target.closest(`.group-header`)||(t.stopPropagation(),t.preventDefault(),!r.collapsible.value))return;let n=!d.value;r.open.value!==n&&(l.value||(u.value=n),e(`open-change`,{open:n}))}}">
+    `},styles:[e.coarsePointerMixin,e.reducedMotionMixin,t.default]}),s=(0,i.define)(`bit-sidebar-group`,{props:{collapsible:!1,"default-open":!0,label:``,open:{default:void 0,type:Boolean}},setup({host:e,props:t,slots:n}){let r=(0,i.computed)(()=>n.has(`icon`).value),o=(0,i.inject)(a,void 0);e.bind(`attr`,{"sidebar-collapsed":()=>o?.collapsed.value?!0:void 0});let s=(0,i.computed)(()=>t.open.value!==void 0),c=(0,i.signal)(t[`default-open`].value),l=(0,i.computed)(()=>t.collapsible.value?s.value?t.open.value??!1:c.value:!0);return(0,i.watch)(t.open,e=>{e!==void 0&&(c.value=e)}),e.bind(`attr`,{open:()=>l.value?!0:void 0}),i.html`
+      <details class="group" part="group" ?open=${()=>l.value}>
         <summary
           class="group-header"
           part="group-header"
-          :aria-expanded="${()=>r.collapsible.value?String(r.open.value):null}">
-          <span class="group-icon" part="group-icon" ?hidden=${()=>!s.value} aria-hidden="true">
+          :aria-expanded="${()=>t.collapsible.value?String(t.open.value):null}"
+          @click=${e=>{t.collapsible.value||e.preventDefault()}}>
+          <span class="group-icon" part="group-icon" ?hidden=${()=>!r.value} aria-hidden="true">
             <slot name="icon"></slot>
           </span>
-          <span class="group-label" part="group-label">${()=>r.label.value}</span>
-          <span class="chevron" ?hidden=${()=>!r.collapsible.value} aria-hidden="true">${t.chevronRightIcon}</span>
+          <span class="group-label" part="group-label">${()=>t.label.value}</span>
+          <span class="chevron" ?hidden=${()=>!t.collapsible.value} aria-hidden="true">
+            <bit-icon name="chevron-right" size="12" stroke-width="2" aria-hidden="true"></bit-icon>
+          </span>
         </summary>
         <div class="group-items" part="group-items" role="list">
           <slot></slot>
         </div>
       </details>
-    `},styles:[e.reducedMotionMixin,r.default],tag:`bit-sidebar-group`}),l=(0,a.defineComponent)({props:{active:{default:!1,type:Boolean},disabled:{default:!1,type:Boolean},href:{default:void 0},rel:{default:void 0},target:{default:void 0}},setup({host:e,props:t,slots:n}){let r=(0,a.computed)(()=>n.has(`icon`).value),i=(0,a.computed)(()=>n.has(`end`).value),s=(0,a.inject)(o,void 0);(0,a.effect)(()=>{e.toggleAttribute(`sidebar-collapsed`,s?.collapsed.value??!1)});let c=(0,a.computed)(()=>!!t.href.value&&!t.disabled.value),l=()=>a.html`
+    `},styles:[e.reducedMotionMixin,n.default]}),c=(0,i.define)(`bit-sidebar-item`,{props:{active:!1,disabled:!1,href:void 0,rel:void 0,target:void 0},setup({host:e,props:t,slots:n}){let r=(0,i.computed)(()=>n.has(`icon`).value),o=(0,i.computed)(()=>n.has(`end`).value),s=(0,i.inject)(a,void 0);e.bind(`attr`,{"sidebar-collapsed":()=>s?.collapsed.value?!0:void 0});let c=(0,i.computed)(()=>!!t.href.value&&!t.disabled.value),l=()=>i.html`
       <span class="item-icon" part="item-icon" ?hidden=${()=>!r.value} aria-hidden="true">
         <slot name="icon"></slot>
       </span>
       <span class="item-label" part="item-label"><slot></slot></span>
-      <span class="item-end" part="item-end" ?hidden=${()=>!i.value}>
+      <span class="item-end" part="item-end" ?hidden=${()=>!o.value}>
         <slot name="end"></slot>
       </span>
-    `;return a.html`
-      ${()=>c.value?a.html`
-              <a
-                class="item"
-                part="item"
-                href="${()=>t.href.value}"
-                :rel="${()=>t.rel.value??null}"
-                :target="${()=>t.target.value??null}"
-                :aria-current="${()=>t.active.value?`page`:null}">
-                ${l()}
-              </a>
-            `:a.html`
-              <button
-                class="item"
-                part="item"
-                type="button"
-                :aria-current="${()=>t.active.value?`page`:null}"
-                :disabled="${()=>t.disabled.value||null}">
-                ${l()}
-              </button>
-            `}
-    `},styles:[e.coarsePointerMixin,i.default],tag:`bit-sidebar-item`});exports.SIDEBAR_CTX=o,exports.SIDEBAR_GROUP_TAG=c,exports.SIDEBAR_ITEM_TAG=l,exports.SIDEBAR_TAG=s;
+    `;return i.html`
+      ${()=>c.value?i.html`
+            <a
+              class="item"
+              part="item"
+              href="${()=>t.href.value}"
+              :rel="${()=>t.rel.value??null}"
+              :target="${()=>t.target.value??null}"
+              :aria-current="${()=>t.active.value?`page`:null}">
+              ${l()}
+            </a>
+          `:t.disabled.value?i.html` <div class="item" part="item" tabindex="-1" aria-disabled="true">${l()}</div> `:i.html`
+            <button
+              class="item"
+              part="item"
+              type="button"
+              :aria-current="${()=>t.active.value?`page`:null}">
+              ${l()}
+            </button>
+          `}
+    `},styles:[e.coarsePointerMixin,r.default]});exports.SIDEBAR_CTX=a,exports.SIDEBAR_GROUP_TAG=s,exports.SIDEBAR_ITEM_TAG=c,exports.SIDEBAR_TAG=o;
 //# sourceMappingURL=sidebar.cjs.map

package/dist/sidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.cjs","names":[],"sources":["../src/layout/sidebar/sidebar.ts"],"sourcesContent":["import {\n  computed,\n  createContext,\n  defineComponent,\n  effect,\n  html,\n  inject,\n  onMount,\n  provide,\n  signal,\n  type ReadonlySignal,\n  watch,\n} from '@vielzeug/craftit';\n\nimport { chevronLeftIcon, chevronRightIcon } from '../../icons';\nimport { coarsePointerMixin, reducedMotionMixin } from '../../styles';\n\n// ─── Types ────────────────────────────────────────────────────────────────\n\ntype SidebarVariant = 'floating' | 'inset';\ntype SidebarCollapseSource = 'api' | 'responsive' | 'toggle';\n\n/** Context provided by `bit-sidebar` to its `bit-sidebar-group` and `bit-sidebar-item` children. */\nexport type SidebarContext = {\n  collapsed: ReadonlySignal<boolean>;\n  variant: ReadonlySignal<SidebarVariant | undefined>;\n};\n\n/** Injection key for the sidebar context. */\nexport const SIDEBAR_CTX = createContext<SidebarContext>('SidebarContext');\n\n// ─── bit-sidebar styles ──────────────────────────────────────────────────────\n\nimport sidebarStyles from './sidebar.css?inline';\n\n/** bit-sidebar element interface */\nexport type SidebarElement = HTMLElement &\n  BitSidebarProps & {\n    /** Set collapsed state imperatively. */\n    setCollapsed(next: boolean): void;\n    /** Toggle between collapsed and expanded. */\n    toggle(): void;\n  };\n\n/** Sidebar component properties */\n\nexport type BitSidebarEvents = {\n  'collapsed-change': { collapsed: boolean; source: SidebarCollapseSource };\n};\n\nexport type BitSidebarGroupEvents = {\n  'open-change': { open: boolean };\n};\n\nexport type BitSidebarProps = {\n  /** Controlled collapsed state */\n  collapsed?: boolean;\n  /** Whether the sidebar supports collapsing */\n  collapsible?: boolean;\n  /** Initial collapsed state in uncontrolled mode */\n  'default-collapsed'?: boolean;\n  /**\n   * Accessible label for the navigation landmark.\n   * Use to distinguish multiple navigation regions on a page.\n   * @default 'Sidebar navigation'\n   */\n  label?: string;\n  /**\n   * CSS media query that, when it matches, automatically collapses the sidebar.\n   * Unset by default — no automatic collapse.\n   * @example 'responsive=\"(max-width: 768px)\"'\n   */\n  responsive?: string;\n  /** Visual style variant */\n  variant?: SidebarVariant;\n};\n\n/**\n * `bit-sidebar` — A collapsible navigation sidebar with group and item support.\n *\n * @element bit-sidebar\n *\n * @attr {boolean} collapsed - Controlled collapsed state\n * @attr {boolean} default-collapsed - Initial collapsed state for uncontrolled sidebars\n * @attr {boolean} collapsible - Show the collapse toggle button\n * @attr {string} variant - Visual variant: 'floating' | 'inset'\n * @attr {string} label - Accessible aria-label for the nav landmark\n *\n * @slot header - Branding or logo content above the nav\n * @slot - Navigation content (bit-sidebar-group / bit-sidebar-item)\n * @slot footer - Footer content below the nav (user info, settings, etc.)\n *\n * @fires collapsed-change - Fired when collapsed state changes\n *\n * @cssprop --sidebar-width - Expanded sidebar width (default: 16rem)\n * @cssprop --sidebar-collapsed-width - Collapsed sidebar width (default: 3.5rem)\n * @cssprop --sidebar-bg - Sidebar background color\n * @cssprop --sidebar-border-color - Border color\n *\n * @attr {string} responsive - CSS media query that auto-collapses the sidebar when it matches (e.g. '(max-width: 768px)')\n *\n * @example\n * ```html\n * <bit-sidebar collapsible label=\"App navigation\">\n *   <span slot=\"header\">My App</span>\n *   <bit-sidebar-group label=\"Main\">\n *     <bit-sidebar-item href=\"/dashboard\" active>Dashboard</bit-sidebar-item>\n *     <bit-sidebar-item href=\"/settings\">Settings</bit-sidebar-item>\n *   </bit-sidebar-group>\n * </bit-sidebar>\n *\n * <!-- Auto-collapse on mobile -->\n * <bit-sidebar collapsible responsive=\"(max-width: 768px)\">...</bit-sidebar>\n * ```\n */\nexport const SIDEBAR_TAG = defineComponent<BitSidebarProps, BitSidebarEvents>({\n  props: {\n    collapsed: { default: undefined, type: Boolean },\n    collapsible: { default: false, type: Boolean },\n    'default-collapsed': { default: false, type: Boolean },\n    label: { default: 'Sidebar navigation' },\n    responsive: { default: undefined },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props, slots }) {\n    const hasHeader = computed(() => slots.has('header').value);\n    const hasFooter = computed(() => slots.has('footer').value);\n\n    const isControlled = signal(host.hasAttribute('collapsed'));\n    const collapsedState = signal(\n      isControlled.value ? host.hasAttribute('collapsed') : props['default-collapsed'].value,\n    );\n\n    const isCollapsed = computed(() => collapsedState.value);\n\n    provide(SIDEBAR_CTX, {\n      collapsed: isCollapsed as ReadonlySignal<boolean>,\n      variant: props.variant as ReadonlySignal<SidebarVariant | undefined>,\n    });\n\n    const setCollapsed = (next: boolean, source: SidebarCollapseSource) => {\n      if (isCollapsed.value === next) return;\n\n      if (!isControlled.value) {\n        collapsedState.value = next;\n      }\n\n      emit('collapsed-change', { collapsed: next, source });\n    };\n    const doToggle = () => {\n      setCollapsed(!isCollapsed.value, 'toggle');\n    };\n\n    effect(() => {\n      host.toggleAttribute('data-collapsed', isCollapsed.value);\n    });\n\n    onMount(() => {\n      const el = host as SidebarElement;\n\n      el.setCollapsed = (next) => setCollapsed(Boolean(next), 'api');\n      el.toggle = doToggle;\n\n      let mediaCleanup: (() => void) | undefined;\n      const observer = new MutationObserver(() => {\n        if (!host.hasAttribute('collapsed') && !isControlled.value) return;\n\n        isControlled.value = true;\n        collapsedState.value = host.hasAttribute('collapsed');\n      });\n\n      observer.observe(host, {\n        attributeFilter: ['collapsed'],\n        attributes: true,\n      });\n\n      watch(\n        props.responsive,\n        (query) => {\n          mediaCleanup?.();\n          mediaCleanup = undefined;\n\n          const mediaQuery = String(query ?? '').trim();\n\n          if (!mediaQuery) return;\n\n          const mql = window.matchMedia(mediaQuery);\n          const onChange = (event: MediaQueryListEvent) => {\n            setCollapsed(event.matches, 'responsive');\n          };\n\n          setCollapsed(mql.matches, 'responsive');\n          mql.addEventListener('change', onChange);\n\n          mediaCleanup = () => {\n            mql.removeEventListener('change', onChange);\n          };\n        },\n        { immediate: true },\n      );\n\n      return () => {\n        observer.disconnect();\n        mediaCleanup?.();\n      };\n    });\n\n    return html`\n      <nav aria-label=\"${() => props.label.value}\" part=\"nav\">\n        <div class=\"sidebar-header\" part=\"header\" ?hidden=${() => !hasHeader.value && !props.collapsible.value}>\n          <slot name=\"header\"></slot>\n          <button\n            class=\"toggle-btn\"\n            part=\"toggle-btn\"\n            type=\"button\"\n            ?hidden=${() => !props.collapsible.value}\n            aria-label=\"${() => (isCollapsed.value ? 'Expand sidebar' : 'Collapse sidebar')}\"\n            aria-expanded=\"${() => String(!isCollapsed.value)}\"\n            @click=\"${doToggle}\">\n            <span class=\"toggle-icon\" aria-hidden=\"true\">${chevronLeftIcon}</span>\n          </button>\n        </div>\n        <div class=\"sidebar-content\" part=\"content\">\n          <slot></slot>\n        </div>\n        <div class=\"sidebar-footer\" part=\"footer\" ?hidden=${() => !hasFooter.value}>\n          <slot name=\"footer\"></slot>\n        </div>\n      </nav>\n    `;\n  },\n  styles: [coarsePointerMixin, reducedMotionMixin, sidebarStyles],\n  tag: 'bit-sidebar',\n});\n\n// ─── bit-sidebar-group styles ────────────────────────────────────────────────\n\nimport groupStyles from './sidebar-group.css?inline';\n\n/** Sidebar group properties */\nexport type BitSidebarGroupProps = {\n  /** Whether this group can be collapsed */\n  collapsible?: boolean;\n  /** Initial open state in uncontrolled mode */\n  'default-open'?: boolean;\n  /** Accessible label for the group */\n  label?: string;\n  /** Controlled open state */\n  open?: boolean;\n};\n\n/**\n * `bit-sidebar-group` — A labelled section within `bit-sidebar`.\n *\n * @element bit-sidebar-group\n *\n * @attr {string} label - Group label text\n * @attr {boolean} collapsible - Whether this group can be toggled open/closed\n * @attr {boolean} open - Controlled expanded state\n * @attr {boolean} default-open - Initial expanded state in uncontrolled mode\n *\n * @slot - Navigation items (`bit-sidebar-item`)\n * @slot icon - Icon displayed before the label\n *\n * @fires open-change - Fired when the group open state changes (collapsible groups only)\n *\n * @example\n * ```html\n * <bit-sidebar-group label=\"Main\" collapsible open>\n *   <bit-sidebar-item href=\"/home\">Home</bit-sidebar-item>\n * </bit-sidebar-group>\n * ```\n */\nexport const SIDEBAR_GROUP_TAG = defineComponent<BitSidebarGroupProps, BitSidebarGroupEvents>({\n  props: {\n    collapsible: { default: false, type: Boolean },\n    'default-open': { default: true, type: Boolean },\n    label: { default: '' },\n    open: { default: undefined, type: Boolean },\n  },\n  setup({ emit, host, props, slots }) {\n    const hasIcon = computed(() => slots.has('icon').value);\n    const sidebarCtx = inject(SIDEBAR_CTX, undefined);\n\n    effect(() => {\n      host.toggleAttribute('sidebar-collapsed', sidebarCtx?.collapsed.value ?? false);\n    });\n\n    const isControlled = computed(() => props.open.value !== undefined);\n    const openState = signal(props['default-open'].value);\n    const isOpen = computed(() => {\n      if (!props.collapsible.value) return true;\n\n      if (isControlled.value) return props.open.value ?? false;\n\n      return openState.value;\n    });\n\n    watch(props.open, (value) => {\n      if (value === undefined) return;\n\n      openState.value = value;\n    });\n\n    effect(() => {\n      host.toggleAttribute('open', isOpen.value);\n    });\n\n    const handleGroupClick = (e: MouseEvent) => {\n      if (!(e.target instanceof HTMLElement) || !e.target.closest('.group-header')) return;\n\n      e.stopPropagation();\n      e.preventDefault();\n\n      if (!props.collapsible.value) {\n        return;\n      }\n\n      const next = !isOpen.value;\n\n      if (props.open.value === next) return;\n\n      if (!isControlled.value) {\n        openState.value = next;\n      }\n\n      emit('open-change', { open: next });\n    };\n\n    return html`\n      <details class=\"group\" part=\"group\" ?open=${() => isOpen.value} @click=\"${handleGroupClick}\">\n        <summary\n          class=\"group-header\"\n          part=\"group-header\"\n          :aria-expanded=\"${() => (props.collapsible.value ? String(props.open.value) : null)}\">\n          <span class=\"group-icon\" part=\"group-icon\" ?hidden=${() => !hasIcon.value} aria-hidden=\"true\">\n            <slot name=\"icon\"></slot>\n          </span>\n          <span class=\"group-label\" part=\"group-label\">${() => props.label.value}</span>\n          <span class=\"chevron\" ?hidden=${() => !props.collapsible.value} aria-hidden=\"true\">${chevronRightIcon}</span>\n        </summary>\n        <div class=\"group-items\" part=\"group-items\" role=\"list\">\n          <slot></slot>\n        </div>\n      </details>\n    `;\n  },\n  styles: [reducedMotionMixin, groupStyles],\n  tag: 'bit-sidebar-group',\n});\n\n// ─── bit-sidebar-item styles ─────────────────────────────────────────────────\n\nimport itemStyles from './sidebar-item.css?inline';\n\n/** Sidebar item properties */\nexport type BitSidebarItemProps = {\n  /** Whether this item represents the current page/section */\n  active?: boolean;\n  /** Whether this item is disabled */\n  disabled?: boolean;\n  /** Navigation href — renders an `<a>` when set, otherwise a `<button>` */\n  href?: string;\n  /**\n   * Relationship of the linked URL (`rel` attribute on the inner `<a>`).\n   * Only applies when `href` is set.\n   */\n  rel?: string;\n  /**\n   * Browsing context for the link (`target` attribute on the inner `<a>`).\n   * Only applies when `href` is set.\n   */\n  target?: string;\n};\n\n/**\n * `bit-sidebar-item` — An individual navigation item in a `bit-sidebar`.\n *\n * Renders as an `<a>` when `href` is provided, otherwise as a `<button>`.\n * Marks the active page via `aria-current=\"page\"` when the `active` attribute is set.\n *\n * @element bit-sidebar-item\n *\n * @attr {string} href - Link URL; renders an anchor when set\n * @attr {boolean} active - Marks the item as the current page\n * @attr {boolean} disabled - Disables the item\n * @attr {string} rel - Anchor `rel` attribute (links only)\n * @attr {string} target - Anchor `target` attribute (links only)\n *\n * @slot - Label text\n * @slot icon - Leading icon\n * @slot end - Trailing content (badge, shortcut, arrow, etc.)\n *\n * @part item - The inner anchor or button element\n * @part item-icon - The icon wrapper\n * @part item-label - The label wrapper\n * @part item-end - The trailing content wrapper\n *\n * @cssprop --sidebar-item-color - Default text color\n * @cssprop --sidebar-item-hover-bg - Hover background\n * @cssprop --sidebar-item-hover-color - Hover text color\n * @cssprop --sidebar-item-active-bg - Active background\n * @cssprop --sidebar-item-active-color - Active text color\n * @cssprop --sidebar-item-indicator - Active indicator bar color\n *\n * @example\n * ```html\n * <bit-sidebar-item href=\"/dashboard\" active>\n *   <span slot=\"icon\">🏠</span>\n *   Dashboard\n * </bit-sidebar-item>\n *\n * <bit-sidebar-item href=\"/users\">\n *   <span slot=\"icon\">👤</span>\n *   Users\n *   <bit-badge slot=\"end\" color=\"primary\">3</bit-badge>\n * </bit-sidebar-item>\n * ```\n */\nexport const SIDEBAR_ITEM_TAG = defineComponent<BitSidebarItemProps>({\n  props: {\n    active: { default: false, type: Boolean },\n    disabled: { default: false, type: Boolean },\n    href: { default: undefined },\n    rel: { default: undefined },\n    target: { default: undefined },\n  },\n  setup({ host, props, slots }) {\n    const hasIcon = computed(() => slots.has('icon').value);\n    const hasEnd = computed(() => slots.has('end').value);\n    const sidebarCtx = inject(SIDEBAR_CTX, undefined);\n\n    effect(() => {\n      host.toggleAttribute('sidebar-collapsed', sidebarCtx?.collapsed.value ?? false);\n    });\n\n    const isLink = computed(() => !!props.href.value && !props.disabled.value);\n    const renderItemContent = () => html`\n      <span class=\"item-icon\" part=\"item-icon\" ?hidden=${() => !hasIcon.value} aria-hidden=\"true\">\n        <slot name=\"icon\"></slot>\n      </span>\n      <span class=\"item-label\" part=\"item-label\"><slot></slot></span>\n      <span class=\"item-end\" part=\"item-end\" ?hidden=${() => !hasEnd.value}>\n        <slot name=\"end\"></slot>\n      </span>\n    `;\n\n    return html`\n      ${() =>\n        isLink.value\n          ? html`\n              <a\n                class=\"item\"\n                part=\"item\"\n                href=\"${() => props.href.value}\"\n                :rel=\"${() => props.rel.value ?? null}\"\n                :target=\"${() => props.target.value ?? null}\"\n                :aria-current=\"${() => (props.active.value ? 'page' : null)}\">\n                ${renderItemContent()}\n              </a>\n            `\n          : html`\n              <button\n                class=\"item\"\n                part=\"item\"\n                type=\"button\"\n                :aria-current=\"${() => (props.active.value ? 'page' : null)}\"\n                :disabled=\"${() => props.disabled.value || null}\">\n                ${renderItemContent()}\n              </button>\n            `}\n    `;\n  },\n  styles: [coarsePointerMixin, itemStyles],\n  tag: 'bit-sidebar-item',\n});\n"],"mappings":"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"}
+{"version":3,"file":"sidebar.cjs","names":[],"sources":["../src/layout/sidebar/sidebar.ts"],"sourcesContent":["import {\n  define,\n  computed,\n  createContext,\n  html,\n  inject,\n  onMount,\n  provide,\n  signal,\n  type ReadonlySignal,\n  watch,\n} from '@vielzeug/craftit';\n\nimport '../../content/icon/icon';\nimport { coarsePointerMixin, reducedMotionMixin } from '../../styles';\n\n// ─── Types ────────────────────────────────────────────────────────────────\n\ntype SidebarVariant = 'floating' | 'inset';\ntype SidebarCollapseSource = 'api' | 'responsive' | 'toggle';\n\n/** Context provided by `bit-sidebar` to its `bit-sidebar-group` and `bit-sidebar-item` children. */\nexport type SidebarContext = {\n  collapsed: ReadonlySignal<boolean>;\n  variant: ReadonlySignal<SidebarVariant | undefined>;\n};\n\n/** Injection key for the sidebar context. */\nexport const SIDEBAR_CTX = createContext<SidebarContext>('SidebarContext');\n\n// ─── bit-sidebar styles ──────────────────────────────────────────────────────\n\nimport sidebarStyles from './sidebar.css?inline';\n\n/** bit-sidebar element interface */\nexport type SidebarElement = HTMLElement &\n  BitSidebarProps & {\n    /** Set collapsed state imperatively. */\n    setCollapsed(next: boolean): void;\n    /** Toggle between collapsed and expanded. */\n    toggle(): void;\n  };\n\n/** Sidebar component properties */\n\nexport type BitSidebarEvents = {\n  'collapsed-change': { collapsed: boolean; source: SidebarCollapseSource };\n};\n\nexport type BitSidebarGroupEvents = {\n  'open-change': { open: boolean };\n};\n\nexport type BitSidebarProps = {\n  /** Controlled collapsed state */\n  collapsed?: boolean;\n  /** Whether the sidebar supports collapsing */\n  collapsible?: boolean;\n  /** Initial collapsed state in uncontrolled mode */\n  'default-collapsed'?: boolean;\n  /**\n   * Accessible label for the navigation landmark.\n   * Use to distinguish multiple navigation regions on a page.\n   * @default 'Sidebar navigation'\n   */\n  label?: string;\n  /**\n   * CSS media query that, when it matches, automatically collapses the sidebar.\n   * Unset by default — no automatic collapse.\n   * @example 'responsive=\"(max-width: 768px)\"'\n   */\n  responsive?: string;\n  /** Visual style variant */\n  variant?: SidebarVariant;\n};\n\n/**\n * `bit-sidebar` — A collapsible navigation sidebar with group and item support.\n *\n * @element bit-sidebar\n *\n * @attr {boolean} collapsed - Controlled collapsed state\n * @attr {boolean} default-collapsed - Initial collapsed state for uncontrolled sidebars\n * @attr {boolean} collapsible - Show the collapse toggle button\n * @attr {string} variant - Visual variant: 'floating' | 'inset'\n * @attr {string} label - Accessible aria-label for the nav landmark\n *\n * @slot header - Branding or logo content above the nav\n * @slot - Navigation content (bit-sidebar-group / bit-sidebar-item)\n * @slot footer - Footer content below the nav (user info, settings, etc.)\n *\n * @fires collapsed-change - Fired when collapsed state changes\n *\n * @cssprop --sidebar-width - Expanded sidebar width (default: 16rem)\n * @cssprop --sidebar-collapsed-width - Collapsed sidebar width (default: 3.5rem)\n * @cssprop --sidebar-bg - Sidebar background color\n * @cssprop --sidebar-border-color - Border color\n *\n * @example\n * ```html\n * <bit-sidebar collapsible label=\"App navigation\">\n *   <span slot=\"header\">My App</span>\n *   <bit-sidebar-group label=\"Main\">\n *     <bit-sidebar-item href=\"/dashboard\" active>Dashboard</bit-sidebar-item>\n *     <bit-sidebar-item href=\"/settings\">Settings</bit-sidebar-item>\n *   </bit-sidebar-group>\n * </bit-sidebar>\n *\n * <!-- Auto-collapse on mobile -->\n * <bit-sidebar collapsible responsive=\"(max-width: 768px)\">...</bit-sidebar>\n * ```\n */\nexport const SIDEBAR_TAG = define<BitSidebarProps, BitSidebarEvents>('bit-sidebar', {\n  props: {\n    collapsed: { default: undefined, type: Boolean },\n    collapsible: false,\n    'default-collapsed': false,\n    label: 'Sidebar navigation',\n    responsive: undefined,\n    variant: undefined,\n  },\n  setup({ emit, host, props, slots }) {\n    const hasHeader = computed(() => slots.has('header').value);\n    const hasFooter = computed(() => slots.has('footer').value);\n    const hasLogo = computed(() => slots.has('logo').value);\n\n    const isControlled = signal(host.el.hasAttribute('collapsed'));\n    const collapsedState = signal(\n      isControlled.value ? host.el.hasAttribute('collapsed') : props['default-collapsed'].value,\n    );\n\n    const isCollapsed = computed(() => collapsedState.value);\n\n    provide(SIDEBAR_CTX, {\n      collapsed: isCollapsed as ReadonlySignal<boolean>,\n      variant: props.variant,\n    });\n\n    const setCollapsed = (next: boolean, source: SidebarCollapseSource) => {\n      if (isCollapsed.value === next) return;\n\n      if (!isControlled.value) {\n        collapsedState.value = next;\n      }\n\n      emit('collapsed-change', { collapsed: next, source });\n    };\n    const doToggle = () => {\n      setCollapsed(!isCollapsed.value, 'toggle');\n    };\n\n    host.bind('attr', {\n      'data-collapsed': () => (isCollapsed.value ? true : undefined),\n    });\n\n    onMount(() => {\n      const el = host.el as SidebarElement;\n\n      el.setCollapsed = (next) => setCollapsed(Boolean(next), 'api');\n      el.toggle = doToggle;\n\n      let mediaCleanup: (() => void) | undefined;\n      const observer = new MutationObserver(() => {\n        if (!host.el.hasAttribute('collapsed') && !isControlled.value) return;\n\n        isControlled.value = true;\n        collapsedState.value = host.el.hasAttribute('collapsed');\n      });\n\n      observer.observe(host.el, {\n        attributeFilter: ['collapsed'],\n        attributes: true,\n      });\n\n      watch(\n        props.responsive,\n        (query) => {\n          mediaCleanup?.();\n          mediaCleanup = undefined;\n\n          const mediaQuery = String(query ?? '').trim();\n\n          if (!mediaQuery) return;\n\n          const mql = window.matchMedia(mediaQuery);\n          const onChange = (event: MediaQueryListEvent) => {\n            setCollapsed(event.matches, 'responsive');\n          };\n\n          setCollapsed(mql.matches, 'responsive');\n          mql.addEventListener('change', onChange);\n\n          mediaCleanup = () => {\n            mql.removeEventListener('change', onChange);\n          };\n        },\n        { immediate: true },\n      );\n\n      return () => {\n        observer.disconnect();\n        mediaCleanup?.();\n      };\n    });\n\n    return html`\n      <nav aria-label=\"${() => props.label.value}\" part=\"nav\">\n        <div class=\"sidebar-header\" part=\"header\" ?hidden=${() => !hasHeader.value && !props.collapsible.value}>\n          <span class=\"sidebar-logo\" ?hidden=${() => !hasLogo.value}>\n            <slot name=\"logo\"></slot>\n          </span>\n          <span class=\"sidebar-header-content\">\n            <slot name=\"header\"></slot>\n          </span>\n          <button\n            class=\"toggle-btn\"\n            part=\"toggle-btn\"\n            type=\"button\"\n            ?hidden=${() => !props.collapsible.value}\n            aria-label=\"${() => (isCollapsed.value ? 'Expand sidebar' : 'Collapse sidebar')}\"\n            aria-expanded=\"${() => String(!isCollapsed.value)}\"\n            @click=\"${doToggle}\">\n            <span class=\"toggle-icon\" aria-hidden=\"true\">\n              <bit-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></bit-icon>\n            </span>\n          </button>\n        </div>\n        <div class=\"sidebar-content\" part=\"content\">\n          <slot></slot>\n        </div>\n        <div class=\"sidebar-footer\" part=\"footer\" ?hidden=${() => !hasFooter.value}>\n          <slot name=\"footer\"></slot>\n        </div>\n      </nav>\n    `;\n  },\n  styles: [coarsePointerMixin, reducedMotionMixin, sidebarStyles],\n});\n\n// ─── bit-sidebar-group styles ────────────────────────────────────────────────\n\nimport groupStyles from './sidebar-group.css?inline';\n\n/** Sidebar group properties */\nexport type BitSidebarGroupProps = {\n  /** Whether this group can be collapsed */\n  collapsible?: boolean;\n  /** Initial open state in uncontrolled mode */\n  'default-open'?: boolean;\n  /** Accessible label for the group */\n  label?: string;\n  /** Controlled open state */\n  open?: boolean;\n};\n\n/**\n * `bit-sidebar-group` — A labelled section within `bit-sidebar`.\n *\n * @element bit-sidebar-group\n *\n * @attr {string} label - Group label text\n * @attr {boolean} collapsible - Whether this group can be toggled open/closed\n * @attr {boolean} open - Controlled expanded state\n * @attr {boolean} default-open - Initial expanded state in uncontrolled mode\n *\n * @slot - Navigation items (`bit-sidebar-item`)\n * @slot icon - Icon displayed before the label\n *\n * @fires open-change - Fired when the group open state changes (collapsible groups only)\n *\n * @example\n * ```html\n * <bit-sidebar-group label=\"Main\" collapsible open>\n *   <bit-sidebar-item href=\"/home\">Home</bit-sidebar-item>\n * </bit-sidebar-group>\n * ```\n */\nexport const SIDEBAR_GROUP_TAG = define<BitSidebarGroupProps, BitSidebarGroupEvents>('bit-sidebar-group', {\n  props: {\n    collapsible: false,\n    'default-open': true,\n    label: '',\n    open: { default: undefined, type: Boolean },\n  },\n  setup({ host, props, slots }) {\n    const hasIcon = computed(() => slots.has('icon').value);\n    const sidebarCtx = inject(SIDEBAR_CTX, undefined);\n\n    host.bind('attr', {\n      'sidebar-collapsed': () => (sidebarCtx?.collapsed.value ? true : undefined),\n    });\n\n    const isControlled = computed(() => props.open.value !== undefined);\n    const openState = signal(props['default-open'].value);\n    const isOpen = computed(() => {\n      if (!props.collapsible.value) return true;\n\n      if (isControlled.value) return props.open.value ?? false;\n\n      return openState.value;\n    });\n\n    watch(props.open, (value) => {\n      if (value === undefined) return;\n\n      openState.value = value;\n    });\n\n    host.bind('attr', {\n      open: () => (isOpen.value ? true : undefined),\n    });\n\n    return html`\n      <details class=\"group\" part=\"group\" ?open=${() => isOpen.value}>\n        <summary\n          class=\"group-header\"\n          part=\"group-header\"\n          :aria-expanded=\"${() => (props.collapsible.value ? String(props.open.value) : null)}\"\n          @click=${(e: MouseEvent) => {\n            if (!props.collapsible.value) {\n              e.preventDefault();\n            }\n          }}>\n          <span class=\"group-icon\" part=\"group-icon\" ?hidden=${() => !hasIcon.value} aria-hidden=\"true\">\n            <slot name=\"icon\"></slot>\n          </span>\n          <span class=\"group-label\" part=\"group-label\">${() => props.label.value}</span>\n          <span class=\"chevron\" ?hidden=${() => !props.collapsible.value} aria-hidden=\"true\">\n            <bit-icon name=\"chevron-right\" size=\"12\" stroke-width=\"2\" aria-hidden=\"true\"></bit-icon>\n          </span>\n        </summary>\n        <div class=\"group-items\" part=\"group-items\" role=\"list\">\n          <slot></slot>\n        </div>\n      </details>\n    `;\n  },\n  styles: [reducedMotionMixin, groupStyles],\n});\n\n// ─── bit-sidebar-item styles ─────────────────────────────────────────────────\n\nimport itemStyles from './sidebar-item.css?inline';\n\n/** Sidebar item properties */\nexport type BitSidebarItemProps = {\n  /** Whether this item represents the current page/section */\n  active?: boolean;\n  /** Whether this item is disabled */\n  disabled?: boolean;\n  /** Navigation href — renders an `<a>` when set, otherwise a `<button>` */\n  href?: string;\n  /**\n   * Relationship of the linked URL (`rel` attribute on the inner `<a>`).\n   * Only applies when `href` is set.\n   */\n  rel?: string;\n  /**\n   * Browsing context for the link (`target` attribute on the inner `<a>`).\n   * Only applies when `href` is set.\n   */\n  target?: string;\n};\n\n/**\n * `bit-sidebar-item` — An individual navigation item in a `bit-sidebar`.\n *\n * Renders as an `<a>` when `href` is provided, otherwise as a `<button>`.\n * Marks the active page via `aria-current=\"page\"` when the `active` attribute is set.\n *\n * @element bit-sidebar-item\n *\n * @attr {string} href - Link URL; renders an anchor when set\n * @attr {boolean} active - Marks the item as the current page\n * @attr {boolean} disabled - Disables the item\n * @attr {string} rel - Anchor `rel` attribute (links only)\n * @attr {string} target - Anchor `target` attribute (links only)\n *\n * @slot - Label text\n * @slot icon - Leading icon\n * @slot end - Trailing content (badge, shortcut, arrow, etc.)\n *\n * @part item - The inner anchor or button element\n * @part item-icon - The icon wrapper\n * @part item-label - The label wrapper\n * @part item-end - The trailing content wrapper\n *\n * @cssprop --sidebar-item-color - Default text color\n * @cssprop --sidebar-item-hover-bg - Hover background\n * @cssprop --sidebar-item-hover-color - Hover text color\n * @cssprop --sidebar-item-active-bg - Active background\n * @cssprop --sidebar-item-active-color - Active text color\n * @cssprop --sidebar-item-indicator - Active indicator bar color\n *\n * @example\n * ```html\n * <bit-sidebar-item href=\"/dashboard\" active>\n *   <span slot=\"icon\">🏠</span>\n *   Dashboard\n * </bit-sidebar-item>\n *\n * <bit-sidebar-item href=\"/users\">\n *   <span slot=\"icon\">👤</span>\n *   Users\n *   <bit-badge slot=\"end\" color=\"primary\">3</bit-badge>\n * </bit-sidebar-item>\n * ```\n */\nexport const SIDEBAR_ITEM_TAG = define<BitSidebarItemProps>('bit-sidebar-item', {\n  props: {\n    active: false,\n    disabled: false,\n    href: undefined,\n    rel: undefined,\n    target: undefined,\n  },\n  setup({ host, props, slots }) {\n    const hasIcon = computed(() => slots.has('icon').value);\n    const hasEnd = computed(() => slots.has('end').value);\n    const sidebarCtx = inject(SIDEBAR_CTX, undefined);\n\n    host.bind('attr', {\n      'sidebar-collapsed': () => (sidebarCtx?.collapsed.value ? true : undefined),\n    });\n\n    const isLink = computed(() => !!props.href.value && !props.disabled.value);\n    const renderItemContent = () => html`\n      <span class=\"item-icon\" part=\"item-icon\" ?hidden=${() => !hasIcon.value} aria-hidden=\"true\">\n        <slot name=\"icon\"></slot>\n      </span>\n      <span class=\"item-label\" part=\"item-label\"><slot></slot></span>\n      <span class=\"item-end\" part=\"item-end\" ?hidden=${() => !hasEnd.value}>\n        <slot name=\"end\"></slot>\n      </span>\n    `;\n\n    return html`\n      ${() => {\n        if (isLink.value) {\n          return html`\n            <a\n              class=\"item\"\n              part=\"item\"\n              href=\"${() => props.href.value}\"\n              :rel=\"${() => props.rel.value ?? null}\"\n              :target=\"${() => props.target.value ?? null}\"\n              :aria-current=\"${() => (props.active.value ? 'page' : null)}\">\n              ${renderItemContent()}\n            </a>\n          `;\n        } else if (props.disabled.value) {\n          return html` <div class=\"item\" part=\"item\" tabindex=\"-1\" aria-disabled=\"true\">${renderItemContent()}</div> `;\n        } else {\n          return html`\n            <button\n              class=\"item\"\n              part=\"item\"\n              type=\"button\"\n              :aria-current=\"${() => (props.active.value ? 'page' : null)}\">\n              ${renderItemContent()}\n            </button>\n          `;\n        }\n      }}\n    `;\n  },\n  styles: [coarsePointerMixin, itemStyles],\n});\n"],"mappings":"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"}