@vielzeug/buildit 2.0.0

package/dist/layout/grid-item/grid-item.d.ts

@@ -0,0 +1,47 @@
+/** Grid item component properties */
+export type BitGridItemProps = {
+    /** Align self vertically within the grid cell */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /** Explicit grid-column value — overrides col-span (e.g. '2 / 5', 'span 3', '1 / -1'). */
+    col?: string;
+    /** Span N columns. Use 'full' to span all columns (1 / -1). */
+    colSpan?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'full';
+    /** Justify self horizontally within the grid cell */
+    justify?: 'start' | 'center' | 'end' | 'stretch';
+    /** Explicit grid-row value — overrides row-span (e.g. '1 / 3', 'span 2'). */
+    row?: string;
+    /** Span N rows. Use 'full' to span all rows (1 / -1). */
+    rowSpan?: '1' | '2' | '3' | '4' | '5' | '6' | 'full';
+};
+/**
+ * bit-grid-item — A grid cell with declarative placement and span control.
+ *
+ * Use `col-span` / `row-span` for the common case of spanning columns/rows.
+ * Use `col` / `row` for full CSS grid-column / grid-row shorthand power
+ * (e.g. explicit placement, mixed span + start, negative lines).
+ *
+ * @element bit-grid-item
+ *
+ * @attr {string} col-span - Columns to span: '1'–'12' | 'full'
+ * @attr {string} row-span - Rows to span: '1'–'6' | 'full'
+ * @attr {string} col - CSS grid-column value (overrides col-span)
+ * @attr {string} row - CSS grid-row value (overrides row-span)
+ * @attr {string} align - align-self: 'start' | 'center' | 'end' | 'stretch'
+ * @attr {string} justify - justify-self: 'start' | 'center' | 'end' | 'stretch'
+ *
+ * @slot - Grid item content
+ *
+ * @example
+ * <!-- Span 2 columns -->
+ * <bit-grid-item col-span="2">Wide</bit-grid-item>
+ *
+ * @example
+ * <!-- Full-width row -->
+ * <bit-grid-item col-span="full">Banner</bit-grid-item>
+ *
+ * @example
+ * <!-- Explicit placement -->
+ * <bit-grid-item col="2 / 5" row="1 / 3">Placed</bit-grid-item>
+ */
+export declare const GRID_ITEM_TAG: string;
+//# sourceMappingURL=grid-item.d.ts.map

package/dist/layout/grid-item/grid-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-item.d.ts","sourceRoot":"","sources":["../../../src/layout/grid-item/grid-item.ts"],"names":[],"mappings":"AAIA,qCAAqC;AACrC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iDAAiD;IACjD,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAC/C,0FAA0F;IAC1F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC5F,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACjD,6EAA6E;IAC7E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,MAAM,CAAC;CACtD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,aAAa,QA2CxB,CAAC"}

package/dist/layout/index.cjs

@@ -0,0 +1 @@
+require(`../box.cjs`),require(`../grid-item.cjs`),require(`../grid.cjs`),require(`../sidebar.cjs`);

package/dist/layout/index.d.ts

@@ -0,0 +1,9 @@
+export { BOX_TAG } from './box/box';
+export type { BitBoxProps } from './box/box';
+export { GRID_ITEM_TAG } from './grid-item/grid-item';
+export type { BitGridItemProps } from './grid-item/grid-item';
+export { GRID_TAG } from './grid/grid';
+export type { BitGridProps } from './grid/grid';
+export { SIDEBAR_CTX, SIDEBAR_GROUP_TAG, SIDEBAR_ITEM_TAG, SIDEBAR_TAG } from './sidebar/sidebar';
+export type { BitSidebarEvents, BitSidebarGroupEvents, BitSidebarGroupProps, BitSidebarItemProps, BitSidebarProps, SidebarContext, SidebarElement, } from './sidebar/sidebar';
+//# sourceMappingURL=index.d.ts.map

package/dist/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAClG,YAAY,EACV,gBAAgB,EAChB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,eAAe,EACf,cAAc,EACd,cAAc,GACf,MAAM,mBAAmB,CAAC"}

package/dist/layout/index.js

@@ -0,0 +1,4 @@
+import "../box.js";
+import "../grid-item.js";
+import "../grid.js";
+import "../sidebar.js";

package/dist/layout/sidebar/sidebar-group.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{width:100%;display:block}.group{display:block}.group-header{all:unset;box-sizing:border-box;gap:var(--size-2);width:100%;min-height:var(--size-8);padding:var(--size-1) var(--size-2);color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:var(--rounded-sm);transition:background var(--transition-fast);outline:none;justify-content:flex-start;align-items:center;display:flex;position:relative}.group-header::-webkit-details-marker{display:none}:host([collapsible]) .group-header:hover{background:var(--color-contrast-100)}:host([collapsible]) .group-header:focus-visible{outline:var(--focus-ring)}:host(:not([collapsible])) .group-header{cursor:default}.group-label{text-overflow:ellipsis;font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;transition:opacity var(--transition-fast);flex:1;overflow:hidden}.group-icon{color:var(--color-contrast-400);flex-shrink:0;justify-content:center;align-items:center;display:flex}.chevron{color:var(--color-contrast-400);transition:var(--_motion-transition,transform var(--transition-normal));flex-shrink:0;justify-content:center;align-items:center;display:flex}:host([collapsible][open]) .chevron{transform:rotate(90deg)}.group-items{gap:var(--size-0-5);grid-template-columns:minmax(0,1fr);min-width:0;display:grid}:host([sidebar-collapsed]) .group-label,:host([sidebar-collapsed]) .chevron{pointer-events:none;opacity:0}}@layer buildit.variants{:host([sidebar-collapsed]) .group-header{padding-inline:var(--size-2);justify-content:center}}`;exports.default=e;
+//# sourceMappingURL=sidebar-group.css?inline.cjs.map

package/dist/layout/sidebar/sidebar-group.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-group.css?inline.cjs","names":[],"sources":["../../../src/layout/sidebar/sidebar-group.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .group {\n    display: block;\n  }\n\n  .group-header {\n    all: unset;\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: flex-start;\n    width: 100%;\n    min-height: var(--size-8);\n    padding: var(--size-1) var(--size-2);\n    color: inherit;\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    border-radius: var(--rounded-sm);\n    transition: background var(--transition-fast);\n  }\n\n  .group-header::-webkit-details-marker {\n    display: none;\n  }\n\n  /* Only show hover & focus when the group is collapsible */\n  :host([collapsible]) .group-header:hover {\n    background: var(--color-contrast-100);\n  }\n\n  :host([collapsible]) .group-header:focus-visible {\n    outline: var(--focus-ring);\n  }\n\n  :host(:not([collapsible])) .group-header {\n    cursor: default;\n  }\n\n  .group-label {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    white-space: nowrap;\n    transition: opacity var(--transition-fast);\n  }\n\n  .group-icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n  }\n\n  .chevron {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n    transition: var(--_motion-transition, transform var(--transition-normal));\n  }\n\n  :host([collapsible][open]) .chevron {\n    transform: rotate(90deg);\n  }\n\n  .group-items {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--size-0-5);\n    min-width: 0;\n  }\n\n  /* Collapsed-sidebar: hide label text but keep icon */\n  :host([sidebar-collapsed]) .group-label,\n  :host([sidebar-collapsed]) .chevron {\n    pointer-events: none;\n    opacity: 0;\n  }\n}\n\n@layer buildit.variants {\n  /* When the parent sidebar is collapsed, center the group icon */\n  :host([sidebar-collapsed]) .group-header {\n    justify-content: center;\n    padding-inline: var(--size-2);\n  }\n}\n"],"mappings":""}

package/dist/layout/sidebar/sidebar-group.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/layout/sidebar/sidebar-group.css?inline
+var e = "@layer buildit.base{:host{width:100%;display:block}.group{display:block}.group-header{all:unset;box-sizing:border-box;gap:var(--size-2);width:100%;min-height:var(--size-8);padding:var(--size-1) var(--size-2);color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:var(--rounded-sm);transition:background var(--transition-fast);outline:none;justify-content:flex-start;align-items:center;display:flex;position:relative}.group-header::-webkit-details-marker{display:none}:host([collapsible]) .group-header:hover{background:var(--color-contrast-100)}:host([collapsible]) .group-header:focus-visible{outline:var(--focus-ring)}:host(:not([collapsible])) .group-header{cursor:default}.group-label{text-overflow:ellipsis;font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;transition:opacity var(--transition-fast);flex:1;overflow:hidden}.group-icon{color:var(--color-contrast-400);flex-shrink:0;justify-content:center;align-items:center;display:flex}.chevron{color:var(--color-contrast-400);transition:var(--_motion-transition,transform var(--transition-normal));flex-shrink:0;justify-content:center;align-items:center;display:flex}:host([collapsible][open]) .chevron{transform:rotate(90deg)}.group-items{gap:var(--size-0-5);grid-template-columns:minmax(0,1fr);min-width:0;display:grid}:host([sidebar-collapsed]) .group-label,:host([sidebar-collapsed]) .chevron{pointer-events:none;opacity:0}}@layer buildit.variants{:host([sidebar-collapsed]) .group-header{padding-inline:var(--size-2);justify-content:center}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=sidebar-group.css?inline.js.map

package/dist/layout/sidebar/sidebar-group.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-group.css?inline.js","names":[],"sources":["../../../src/layout/sidebar/sidebar-group.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .group {\n    display: block;\n  }\n\n  .group-header {\n    all: unset;\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: flex-start;\n    width: 100%;\n    min-height: var(--size-8);\n    padding: var(--size-1) var(--size-2);\n    color: inherit;\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    border-radius: var(--rounded-sm);\n    transition: background var(--transition-fast);\n  }\n\n  .group-header::-webkit-details-marker {\n    display: none;\n  }\n\n  /* Only show hover & focus when the group is collapsible */\n  :host([collapsible]) .group-header:hover {\n    background: var(--color-contrast-100);\n  }\n\n  :host([collapsible]) .group-header:focus-visible {\n    outline: var(--focus-ring);\n  }\n\n  :host(:not([collapsible])) .group-header {\n    cursor: default;\n  }\n\n  .group-label {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    white-space: nowrap;\n    transition: opacity var(--transition-fast);\n  }\n\n  .group-icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n  }\n\n  .chevron {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n    transition: var(--_motion-transition, transform var(--transition-normal));\n  }\n\n  :host([collapsible][open]) .chevron {\n    transform: rotate(90deg);\n  }\n\n  .group-items {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--size-0-5);\n    min-width: 0;\n  }\n\n  /* Collapsed-sidebar: hide label text but keep icon */\n  :host([sidebar-collapsed]) .group-label,\n  :host([sidebar-collapsed]) .chevron {\n    pointer-events: none;\n    opacity: 0;\n  }\n}\n\n@layer buildit.variants {\n  /* When the parent sidebar is collapsed, center the group icon */\n  :host([sidebar-collapsed]) .group-header {\n    justify-content: center;\n    padding-inline: var(--size-2);\n  }\n}\n"],"mappings":""}

package/dist/layout/sidebar/sidebar-item.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{min-width:0;max-width:100%;display:block}.item{box-sizing:border-box;gap:var(--size-2);min-width:0;min-height:var(--_touch-target);padding:var(--size-1-5) var(--size-2);font-size:var(--sidebar-item-font-size,var(--text-sm));font-weight:var(--font-medium);color:var(--sidebar-item-color,var(--color-contrast-700));cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:var(--rounded-sm);transition:background var(--transition-fast), color var(--transition-fast);outline:none;align-items:center;text-decoration:none;display:flex;position:relative}a.item{text-decoration:none}.item:hover{color:var(--sidebar-item-hover-color,var(--color-contrast-900));background:var(--sidebar-item-hover-bg,var(--color-contrast-100))}.item:focus-visible{outline:var(--focus-ring);outline-offset:1px}:host([active]) .item{font-weight:var(--font-semibold);color:var(--sidebar-item-active-color,var(--color-primary));background:var(--sidebar-item-active-bg,var(--color-primary-100,color-mix(in srgb, var(--color-primary) 12%, transparent)))}:host([active]) .item:before{inset-block:var(--size-1);content:"";background:var(--sidebar-item-indicator,var(--color-primary));border-radius:var(--rounded-full);width:3px;position:absolute}:host([active]) .item:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))):before{left:0}:host([active]) .item:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):before{right:0}:host([disabled]) .item{pointer-events:none;cursor:not-allowed;opacity:.5}.item-icon{width:var(--size-5);height:var(--size-5);flex-shrink:0;justify-content:center;align-items:center;display:flex}.item-label{text-overflow:ellipsis;white-space:nowrap;min-width:0;transition:opacity var(--transition-fast);flex:1;overflow:hidden}.item-end{gap:var(--size-1);transition:opacity var(--transition-fast);flex-shrink:0;align-items:center;display:flex}:host([sidebar-collapsed]) .item-label,:host([sidebar-collapsed]) .item-end{pointer-events:none;opacity:0;width:0;overflow:hidden}:host([sidebar-collapsed]) .item{padding:var(--size-2) var(--size-4);justify-content:center;gap:0}:host([sidebar-collapsed][active]) .item:before{inset-block:var(--size-2)}}`;exports.default=e;
+//# sourceMappingURL=sidebar-item.css?inline.cjs.map

package/dist/layout/sidebar/sidebar-item.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-item.css?inline.cjs","names":[],"sources":["../../../src/layout/sidebar/sidebar-item.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    display: block;\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  .item {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    min-width: 0;\n    min-height: var(--_touch-target);\n    padding: var(--size-1-5) var(--size-2);\n    font-size: var(--sidebar-item-font-size, var(--text-sm));\n    font-weight: var(--font-medium);\n    color: var(--sidebar-item-color, var(--color-contrast-700));\n    text-decoration: none;\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  /* Make <a> items look like the container */\n  a.item {\n    text-decoration: none;\n  }\n\n  .item:hover {\n    color: var(--sidebar-item-hover-color, var(--color-contrast-900));\n    background: var(--sidebar-item-hover-bg, var(--color-contrast-100));\n  }\n\n  .item:focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: 1px;\n  }\n\n  :host([active]) .item {\n    font-weight: var(--font-semibold);\n    color: var(--sidebar-item-active-color, var(--color-primary));\n    background: var(\n      --sidebar-item-active-bg,\n      var(--color-primary-100, color-mix(in srgb, var(--color-primary) 12%, transparent))\n    );\n  }\n\n  :host([active]) .item::before {\n    position: absolute;\n    inset-block: var(--size-1);\n    inset-inline-start: 0;\n    width: 3px;\n    content: '';\n    background: var(--sidebar-item-indicator, var(--color-primary));\n    border-radius: var(--rounded-full);\n  }\n\n  :host([disabled]) .item {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .item-icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n  }\n\n  .item-label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    transition: opacity var(--transition-fast);\n  }\n\n  .item-end {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n    align-items: center;\n    transition: opacity var(--transition-fast);\n  }\n\n  /* Collapsed sidebar: hide text/end content */\n  :host([sidebar-collapsed]) .item-label,\n  :host([sidebar-collapsed]) .item-end {\n    width: 0;\n    overflow: hidden;\n    pointer-events: none;\n    opacity: 0;\n  }\n\n  :host([sidebar-collapsed]) .item {\n    gap: 0;\n    justify-content: center;\n    padding: var(--size-2) var(--size-4);\n  }\n\n  :host([sidebar-collapsed][active]) .item::before {\n    inset-block: var(--size-2);\n  }\n}\n"],"mappings":""}

package/dist/layout/sidebar/sidebar-item.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/layout/sidebar/sidebar-item.css?inline
+var e = "@layer buildit.base{:host{min-width:0;max-width:100%;display:block}.item{box-sizing:border-box;gap:var(--size-2);min-width:0;min-height:var(--_touch-target);padding:var(--size-1-5) var(--size-2);font-size:var(--sidebar-item-font-size,var(--text-sm));font-weight:var(--font-medium);color:var(--sidebar-item-color,var(--color-contrast-700));cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:var(--rounded-sm);transition:background var(--transition-fast), color var(--transition-fast);outline:none;align-items:center;text-decoration:none;display:flex;position:relative}a.item{text-decoration:none}.item:hover{color:var(--sidebar-item-hover-color,var(--color-contrast-900));background:var(--sidebar-item-hover-bg,var(--color-contrast-100))}.item:focus-visible{outline:var(--focus-ring);outline-offset:1px}:host([active]) .item{font-weight:var(--font-semibold);color:var(--sidebar-item-active-color,var(--color-primary));background:var(--sidebar-item-active-bg,var(--color-primary-100,color-mix(in srgb, var(--color-primary) 12%, transparent)))}:host([active]) .item:before{inset-block:var(--size-1);content:\"\";background:var(--sidebar-item-indicator,var(--color-primary));border-radius:var(--rounded-full);width:3px;position:absolute}:host([active]) .item:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))):before{left:0}:host([active]) .item:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):before{right:0}:host([disabled]) .item{pointer-events:none;cursor:not-allowed;opacity:.5}.item-icon{width:var(--size-5);height:var(--size-5);flex-shrink:0;justify-content:center;align-items:center;display:flex}.item-label{text-overflow:ellipsis;white-space:nowrap;min-width:0;transition:opacity var(--transition-fast);flex:1;overflow:hidden}.item-end{gap:var(--size-1);transition:opacity var(--transition-fast);flex-shrink:0;align-items:center;display:flex}:host([sidebar-collapsed]) .item-label,:host([sidebar-collapsed]) .item-end{pointer-events:none;opacity:0;width:0;overflow:hidden}:host([sidebar-collapsed]) .item{padding:var(--size-2) var(--size-4);justify-content:center;gap:0}:host([sidebar-collapsed][active]) .item:before{inset-block:var(--size-2)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=sidebar-item.css?inline.js.map

package/dist/layout/sidebar/sidebar-item.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-item.css?inline.js","names":[],"sources":["../../../src/layout/sidebar/sidebar-item.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    display: block;\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  .item {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    min-width: 0;\n    min-height: var(--_touch-target);\n    padding: var(--size-1-5) var(--size-2);\n    font-size: var(--sidebar-item-font-size, var(--text-sm));\n    font-weight: var(--font-medium);\n    color: var(--sidebar-item-color, var(--color-contrast-700));\n    text-decoration: none;\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  /* Make <a> items look like the container */\n  a.item {\n    text-decoration: none;\n  }\n\n  .item:hover {\n    color: var(--sidebar-item-hover-color, var(--color-contrast-900));\n    background: var(--sidebar-item-hover-bg, var(--color-contrast-100));\n  }\n\n  .item:focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: 1px;\n  }\n\n  :host([active]) .item {\n    font-weight: var(--font-semibold);\n    color: var(--sidebar-item-active-color, var(--color-primary));\n    background: var(\n      --sidebar-item-active-bg,\n      var(--color-primary-100, color-mix(in srgb, var(--color-primary) 12%, transparent))\n    );\n  }\n\n  :host([active]) .item::before {\n    position: absolute;\n    inset-block: var(--size-1);\n    inset-inline-start: 0;\n    width: 3px;\n    content: '';\n    background: var(--sidebar-item-indicator, var(--color-primary));\n    border-radius: var(--rounded-full);\n  }\n\n  :host([disabled]) .item {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .item-icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n  }\n\n  .item-label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    transition: opacity var(--transition-fast);\n  }\n\n  .item-end {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n    align-items: center;\n    transition: opacity var(--transition-fast);\n  }\n\n  /* Collapsed sidebar: hide text/end content */\n  :host([sidebar-collapsed]) .item-label,\n  :host([sidebar-collapsed]) .item-end {\n    width: 0;\n    overflow: hidden;\n    pointer-events: none;\n    opacity: 0;\n  }\n\n  :host([sidebar-collapsed]) .item {\n    gap: 0;\n    justify-content: center;\n    padding: var(--size-2) var(--size-4);\n  }\n\n  :host([sidebar-collapsed][active]) .item::before {\n    inset-block: var(--size-2);\n  }\n}\n"],"mappings":""}

package/dist/layout/sidebar/sidebar.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_sidebar-width:var(--sidebar-width,16rem);--_sidebar-collapsed-width:var(--sidebar-collapsed-width,3.5rem);--_sidebar-transition:var(--transition-normal);--_panel-bg:var(--sidebar-bg,var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-50) 85%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 85%, transparent)));--_panel-blur:var(--sidebar-panel-blur,var(--blur-md));--_panel-border-color:var(--sidebar-border-color,var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-900) 8%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 8%, transparent)));--_panel-radius:var(--sidebar-radius,0);--_panel-shadow:var(--sidebar-shadow,var(--shadow-xl));box-sizing:border-box;width:100%;min-width:var(--size-2xs);max-width:var(--_sidebar-width);height:100%;min-height:0;transition:var(--_motion-transition,width var(--_sidebar-transition), min-width var(--_sidebar-transition));display:block;overflow:visible}:host>nav{box-sizing:border-box;background:var(--_panel-bg);border:var(--border) solid var(--_panel-border-color);border-radius:var(--_panel-radius);width:100%;height:100%;min-height:0;box-shadow:var(--_panel-shadow);-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));flex-direction:column;display:flex;position:relative;overflow:hidden}:host([data-collapsed]){width:var(--_sidebar-collapsed-width);min-width:var(--_sidebar-collapsed-width);max-width:var(--_sidebar-collapsed-width)}.sidebar-header{gap:var(--size-2);min-height:var(--size-14);padding:var(--size-2);border-bottom:var(--border) solid var(--color-contrast-200);flex-shrink:0;align-items:center;display:flex;overflow:hidden}.sidebar-header slot{flex:1;min-width:0;display:block;overflow:hidden}.sidebar-content{gap:var(--size-2);min-width:0;padding:var(--size-4);scrollbar-width:thin;flex:1;grid-template-columns:minmax(0,1fr);align-content:start;display:grid;overflow:clip auto}.sidebar-footer{padding:var(--size-4);border-top:var(--border) solid var(--color-contrast-200);flex-shrink:0}.toggle-btn{all:unset;box-sizing:border-box;width:var(--size-8);height:var(--size-8);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:color var(--transition-fast), background var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.toggle-btn:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.toggle-btn:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.toggle-btn:hover{color:var(--color-contrast-800);background:var(--color-contrast-200)}.toggle-btn:focus-visible{outline:var(--focus-ring)}.toggle-icon{transition:var(--_motion-transition,transform var(--_sidebar-transition));justify-content:center;align-items:center;display:flex}:host([data-collapsed]) .toggle-icon,:host(:not([dir=rtl])[data-collapsed]) .toggle-icon,:host(:dir(ltr)[data-collapsed]) .toggle-icon,:host(:dir(rtl)) .toggle-icon{transform:rotate(180deg)}:host(:dir(rtl)[data-collapsed]) .toggle-icon{transform:rotate(0)}}@layer buildit.variants{:host([variant=floating]){height:calc(100% - var(--size-4));margin:var(--size-2);--_panel-radius:var(--rounded-xl)}:host([variant=inset]){--_panel-bg:var(--color-contrast-50);--_panel-shadow:none;--_panel-border-color:transparent}}`;exports.default=e;
+//# sourceMappingURL=sidebar.css?inline.cjs.map

package/dist/layout/sidebar/sidebar.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.css?inline.cjs","names":[],"sources":["../../../src/layout/sidebar/sidebar.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_sidebar-width: var(--sidebar-width, 16rem);\n    --_sidebar-collapsed-width: var(--sidebar-collapsed-width, 3.5rem);\n    --_sidebar-transition: var(--transition-normal);\n    --_panel-bg: var(\n      --sidebar-bg,\n      light-dark(\n        color-mix(in srgb, var(--color-contrast-50) 85%, transparent),\n        color-mix(in srgb, var(--color-contrast-100) 85%, transparent)\n      )\n    );\n    --_panel-blur: var(--sidebar-panel-blur, var(--blur-md));\n    --_panel-border-color: var(\n      --sidebar-border-color,\n      light-dark(\n        color-mix(in srgb, var(--color-contrast-900) 8%, transparent),\n        color-mix(in srgb, var(--color-contrast-100) 8%, transparent)\n      )\n    );\n    --_panel-radius: var(--sidebar-radius, 0);\n    --_panel-shadow: var(--sidebar-shadow, var(--shadow-xl));\n\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    min-width: var(--size-2xs);\n    max-width: var(--_sidebar-width);\n    height: 100%;\n    min-height: 0;\n    overflow: visible;\n    transition: var(--_motion-transition, width var(--_sidebar-transition), min-width var(--_sidebar-transition));\n  }\n\n  :host > nav {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--_panel-bg);\n    border: var(--border) solid var(--_panel-border-color);\n    border-radius: var(--_panel-radius);\n    box-shadow: var(--_panel-shadow);\n    backdrop-filter: blur(var(--_panel-blur));\n  }\n\n  :host([data-collapsed]) {\n    width: var(--_sidebar-collapsed-width);\n    min-width: var(--_sidebar-collapsed-width);\n    max-width: var(--_sidebar-collapsed-width);\n  }\n\n  .sidebar-header {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-2);\n    align-items: center;\n    min-height: var(--size-14);\n    padding: var(--size-2);\n    overflow: hidden;\n    border-bottom: var(--border) solid var(--color-contrast-200);\n  }\n\n  .sidebar-header slot {\n    display: block;\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  .sidebar-content {\n    display: grid;\n    flex: 1;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--size-2);\n    align-content: start;\n    min-width: 0;\n    padding: var(--size-4);\n    overflow: clip auto;\n    scrollbar-width: thin;\n  }\n\n  .sidebar-footer {\n    flex-shrink: 0;\n    padding: var(--size-4);\n    border-top: var(--border) solid var(--color-contrast-200);\n  }\n\n  .toggle-btn {\n    all: unset;\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-8);\n    height: var(--size-8);\n    margin-inline-start: auto;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      background var(--transition-fast);\n  }\n\n  .toggle-btn:hover {\n    color: var(--color-contrast-800);\n    background: var(--color-contrast-200);\n  }\n\n  .toggle-btn:focus-visible {\n    outline: var(--focus-ring);\n  }\n\n  .toggle-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: var(--_motion-transition, transform var(--_sidebar-transition));\n  }\n\n  :host([data-collapsed]) .toggle-icon {\n    transform: rotate(180deg);\n  }\n\n  :host(:not([dir='rtl'])[data-collapsed]) .toggle-icon,\n  :host(:dir(ltr)[data-collapsed]) .toggle-icon {\n    transform: rotate(180deg);\n  }\n\n  :host(:dir(rtl)) .toggle-icon {\n    transform: rotate(180deg);\n  }\n\n  :host(:dir(rtl)[data-collapsed]) .toggle-icon {\n    transform: rotate(0deg);\n  }\n}\n\n@layer buildit.variants {\n  /* ── floating ── */\n  :host([variant='floating']) {\n    height: calc(100% - var(--size-4));\n    margin: var(--size-2);\n\n    --_panel-radius: var(--rounded-xl);\n  }\n\n  /* ── inset ── */\n  :host([variant='inset']) {\n    --_panel-bg: var(--color-contrast-50);\n    --_panel-shadow: none;\n    --_panel-border-color: transparent;\n  }\n}\n"],"mappings":""}

package/dist/layout/sidebar/sidebar.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/layout/sidebar/sidebar.css?inline
+var e = "@layer buildit.base{:host{--_sidebar-width:var(--sidebar-width,16rem);--_sidebar-collapsed-width:var(--sidebar-collapsed-width,3.5rem);--_sidebar-transition:var(--transition-normal);--_panel-bg:var(--sidebar-bg,var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-50) 85%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 85%, transparent)));--_panel-blur:var(--sidebar-panel-blur,var(--blur-md));--_panel-border-color:var(--sidebar-border-color,var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-900) 8%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 8%, transparent)));--_panel-radius:var(--sidebar-radius,0);--_panel-shadow:var(--sidebar-shadow,var(--shadow-xl));box-sizing:border-box;width:100%;min-width:var(--size-2xs);max-width:var(--_sidebar-width);height:100%;min-height:0;transition:var(--_motion-transition,width var(--_sidebar-transition), min-width var(--_sidebar-transition));display:block;overflow:visible}:host>nav{box-sizing:border-box;background:var(--_panel-bg);border:var(--border) solid var(--_panel-border-color);border-radius:var(--_panel-radius);width:100%;height:100%;min-height:0;box-shadow:var(--_panel-shadow);-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));flex-direction:column;display:flex;position:relative;overflow:hidden}:host([data-collapsed]){width:var(--_sidebar-collapsed-width);min-width:var(--_sidebar-collapsed-width);max-width:var(--_sidebar-collapsed-width)}.sidebar-header{gap:var(--size-2);min-height:var(--size-14);padding:var(--size-2);border-bottom:var(--border) solid var(--color-contrast-200);flex-shrink:0;align-items:center;display:flex;overflow:hidden}.sidebar-header slot{flex:1;min-width:0;display:block;overflow:hidden}.sidebar-content{gap:var(--size-2);min-width:0;padding:var(--size-4);scrollbar-width:thin;flex:1;grid-template-columns:minmax(0,1fr);align-content:start;display:grid;overflow:clip auto}.sidebar-footer{padding:var(--size-4);border-top:var(--border) solid var(--color-contrast-200);flex-shrink:0}.toggle-btn{all:unset;box-sizing:border-box;width:var(--size-8);height:var(--size-8);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:color var(--transition-fast), background var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.toggle-btn:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.toggle-btn:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.toggle-btn:hover{color:var(--color-contrast-800);background:var(--color-contrast-200)}.toggle-btn:focus-visible{outline:var(--focus-ring)}.toggle-icon{transition:var(--_motion-transition,transform var(--_sidebar-transition));justify-content:center;align-items:center;display:flex}:host([data-collapsed]) .toggle-icon,:host(:not([dir=rtl])[data-collapsed]) .toggle-icon,:host(:dir(ltr)[data-collapsed]) .toggle-icon,:host(:dir(rtl)) .toggle-icon{transform:rotate(180deg)}:host(:dir(rtl)[data-collapsed]) .toggle-icon{transform:rotate(0)}}@layer buildit.variants{:host([variant=floating]){height:calc(100% - var(--size-4));margin:var(--size-2);--_panel-radius:var(--rounded-xl)}:host([variant=inset]){--_panel-bg:var(--color-contrast-50);--_panel-shadow:none;--_panel-border-color:transparent}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=sidebar.css?inline.js.map

package/dist/layout/sidebar/sidebar.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.css?inline.js","names":[],"sources":["../../../src/layout/sidebar/sidebar.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_sidebar-width: var(--sidebar-width, 16rem);\n    --_sidebar-collapsed-width: var(--sidebar-collapsed-width, 3.5rem);\n    --_sidebar-transition: var(--transition-normal);\n    --_panel-bg: var(\n      --sidebar-bg,\n      light-dark(\n        color-mix(in srgb, var(--color-contrast-50) 85%, transparent),\n        color-mix(in srgb, var(--color-contrast-100) 85%, transparent)\n      )\n    );\n    --_panel-blur: var(--sidebar-panel-blur, var(--blur-md));\n    --_panel-border-color: var(\n      --sidebar-border-color,\n      light-dark(\n        color-mix(in srgb, var(--color-contrast-900) 8%, transparent),\n        color-mix(in srgb, var(--color-contrast-100) 8%, transparent)\n      )\n    );\n    --_panel-radius: var(--sidebar-radius, 0);\n    --_panel-shadow: var(--sidebar-shadow, var(--shadow-xl));\n\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    min-width: var(--size-2xs);\n    max-width: var(--_sidebar-width);\n    height: 100%;\n    min-height: 0;\n    overflow: visible;\n    transition: var(--_motion-transition, width var(--_sidebar-transition), min-width var(--_sidebar-transition));\n  }\n\n  :host > nav {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--_panel-bg);\n    border: var(--border) solid var(--_panel-border-color);\n    border-radius: var(--_panel-radius);\n    box-shadow: var(--_panel-shadow);\n    backdrop-filter: blur(var(--_panel-blur));\n  }\n\n  :host([data-collapsed]) {\n    width: var(--_sidebar-collapsed-width);\n    min-width: var(--_sidebar-collapsed-width);\n    max-width: var(--_sidebar-collapsed-width);\n  }\n\n  .sidebar-header {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-2);\n    align-items: center;\n    min-height: var(--size-14);\n    padding: var(--size-2);\n    overflow: hidden;\n    border-bottom: var(--border) solid var(--color-contrast-200);\n  }\n\n  .sidebar-header slot {\n    display: block;\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  .sidebar-content {\n    display: grid;\n    flex: 1;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--size-2);\n    align-content: start;\n    min-width: 0;\n    padding: var(--size-4);\n    overflow: clip auto;\n    scrollbar-width: thin;\n  }\n\n  .sidebar-footer {\n    flex-shrink: 0;\n    padding: var(--size-4);\n    border-top: var(--border) solid var(--color-contrast-200);\n  }\n\n  .toggle-btn {\n    all: unset;\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-8);\n    height: var(--size-8);\n    margin-inline-start: auto;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      background var(--transition-fast);\n  }\n\n  .toggle-btn:hover {\n    color: var(--color-contrast-800);\n    background: var(--color-contrast-200);\n  }\n\n  .toggle-btn:focus-visible {\n    outline: var(--focus-ring);\n  }\n\n  .toggle-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: var(--_motion-transition, transform var(--_sidebar-transition));\n  }\n\n  :host([data-collapsed]) .toggle-icon {\n    transform: rotate(180deg);\n  }\n\n  :host(:not([dir='rtl'])[data-collapsed]) .toggle-icon,\n  :host(:dir(ltr)[data-collapsed]) .toggle-icon {\n    transform: rotate(180deg);\n  }\n\n  :host(:dir(rtl)) .toggle-icon {\n    transform: rotate(180deg);\n  }\n\n  :host(:dir(rtl)[data-collapsed]) .toggle-icon {\n    transform: rotate(0deg);\n  }\n}\n\n@layer buildit.variants {\n  /* ── floating ── */\n  :host([variant='floating']) {\n    height: calc(100% - var(--size-4));\n    margin: var(--size-2);\n\n    --_panel-radius: var(--rounded-xl);\n  }\n\n  /* ── inset ── */\n  :host([variant='inset']) {\n    --_panel-bg: var(--color-contrast-50);\n    --_panel-shadow: none;\n    --_panel-border-color: transparent;\n  }\n}\n"],"mappings":""}

package/dist/layout/sidebar/sidebar.d.ts

@@ -0,0 +1,190 @@
+import { type ReadonlySignal } from '@vielzeug/craftit';
+type SidebarVariant = 'floating' | 'inset';
+type SidebarCollapseSource = 'api' | 'responsive' | 'toggle';
+/** Context provided by `bit-sidebar` to its `bit-sidebar-group` and `bit-sidebar-item` children. */
+export type SidebarContext = {
+    collapsed: ReadonlySignal<boolean>;
+    variant: ReadonlySignal<SidebarVariant | undefined>;
+};
+/** Injection key for the sidebar context. */
+export declare const SIDEBAR_CTX: import("@vielzeug/craftit").InjectionKey<SidebarContext>;
+/** bit-sidebar element interface */
+export type SidebarElement = HTMLElement & BitSidebarProps & {
+    /** Set collapsed state imperatively. */
+    setCollapsed(next: boolean): void;
+    /** Toggle between collapsed and expanded. */
+    toggle(): void;
+};
+/** Sidebar component properties */
+export type BitSidebarEvents = {
+    'collapsed-change': {
+        collapsed: boolean;
+        source: SidebarCollapseSource;
+    };
+};
+export type BitSidebarGroupEvents = {
+    'open-change': {
+        open: boolean;
+    };
+};
+export type BitSidebarProps = {
+    /** Controlled collapsed state */
+    collapsed?: boolean;
+    /** Whether the sidebar supports collapsing */
+    collapsible?: boolean;
+    /** Initial collapsed state in uncontrolled mode */
+    'default-collapsed'?: boolean;
+    /**
+     * Accessible label for the navigation landmark.
+     * Use to distinguish multiple navigation regions on a page.
+     * @default 'Sidebar navigation'
+     */
+    label?: string;
+    /**
+     * CSS media query that, when it matches, automatically collapses the sidebar.
+     * Unset by default — no automatic collapse.
+     * @example 'responsive="(max-width: 768px)"'
+     */
+    responsive?: string;
+    /** Visual style variant */
+    variant?: SidebarVariant;
+};
+/**
+ * `bit-sidebar` — A collapsible navigation sidebar with group and item support.
+ *
+ * @element bit-sidebar
+ *
+ * @attr {boolean} collapsed - Controlled collapsed state
+ * @attr {boolean} default-collapsed - Initial collapsed state for uncontrolled sidebars
+ * @attr {boolean} collapsible - Show the collapse toggle button
+ * @attr {string} variant - Visual variant: 'floating' | 'inset'
+ * @attr {string} label - Accessible aria-label for the nav landmark
+ *
+ * @slot header - Branding or logo content above the nav
+ * @slot - Navigation content (bit-sidebar-group / bit-sidebar-item)
+ * @slot footer - Footer content below the nav (user info, settings, etc.)
+ *
+ * @fires collapsed-change - Fired when collapsed state changes
+ *
+ * @cssprop --sidebar-width - Expanded sidebar width (default: 16rem)
+ * @cssprop --sidebar-collapsed-width - Collapsed sidebar width (default: 3.5rem)
+ * @cssprop --sidebar-bg - Sidebar background color
+ * @cssprop --sidebar-border-color - Border color
+ *
+ * @attr {string} responsive - CSS media query that auto-collapses the sidebar when it matches (e.g. '(max-width: 768px)')
+ *
+ * @example
+ * ```html
+ * <bit-sidebar collapsible label="App navigation">
+ *   <span slot="header">My App</span>
+ *   <bit-sidebar-group label="Main">
+ *     <bit-sidebar-item href="/dashboard" active>Dashboard</bit-sidebar-item>
+ *     <bit-sidebar-item href="/settings">Settings</bit-sidebar-item>
+ *   </bit-sidebar-group>
+ * </bit-sidebar>
+ *
+ * <!-- Auto-collapse on mobile -->
+ * <bit-sidebar collapsible responsive="(max-width: 768px)">...</bit-sidebar>
+ * ```
+ */
+export declare const SIDEBAR_TAG: string;
+/** Sidebar group properties */
+export type BitSidebarGroupProps = {
+    /** Whether this group can be collapsed */
+    collapsible?: boolean;
+    /** Initial open state in uncontrolled mode */
+    'default-open'?: boolean;
+    /** Accessible label for the group */
+    label?: string;
+    /** Controlled open state */
+    open?: boolean;
+};
+/**
+ * `bit-sidebar-group` — A labelled section within `bit-sidebar`.
+ *
+ * @element bit-sidebar-group
+ *
+ * @attr {string} label - Group label text
+ * @attr {boolean} collapsible - Whether this group can be toggled open/closed
+ * @attr {boolean} open - Controlled expanded state
+ * @attr {boolean} default-open - Initial expanded state in uncontrolled mode
+ *
+ * @slot - Navigation items (`bit-sidebar-item`)
+ * @slot icon - Icon displayed before the label
+ *
+ * @fires open-change - Fired when the group open state changes (collapsible groups only)
+ *
+ * @example
+ * ```html
+ * <bit-sidebar-group label="Main" collapsible open>
+ *   <bit-sidebar-item href="/home">Home</bit-sidebar-item>
+ * </bit-sidebar-group>
+ * ```
+ */
+export declare const SIDEBAR_GROUP_TAG: string;
+/** Sidebar item properties */
+export type BitSidebarItemProps = {
+    /** Whether this item represents the current page/section */
+    active?: boolean;
+    /** Whether this item is disabled */
+    disabled?: boolean;
+    /** Navigation href — renders an `<a>` when set, otherwise a `<button>` */
+    href?: string;
+    /**
+     * Relationship of the linked URL (`rel` attribute on the inner `<a>`).
+     * Only applies when `href` is set.
+     */
+    rel?: string;
+    /**
+     * Browsing context for the link (`target` attribute on the inner `<a>`).
+     * Only applies when `href` is set.
+     */
+    target?: string;
+};
+/**
+ * `bit-sidebar-item` — An individual navigation item in a `bit-sidebar`.
+ *
+ * Renders as an `<a>` when `href` is provided, otherwise as a `<button>`.
+ * Marks the active page via `aria-current="page"` when the `active` attribute is set.
+ *
+ * @element bit-sidebar-item
+ *
+ * @attr {string} href - Link URL; renders an anchor when set
+ * @attr {boolean} active - Marks the item as the current page
+ * @attr {boolean} disabled - Disables the item
+ * @attr {string} rel - Anchor `rel` attribute (links only)
+ * @attr {string} target - Anchor `target` attribute (links only)
+ *
+ * @slot - Label text
+ * @slot icon - Leading icon
+ * @slot end - Trailing content (badge, shortcut, arrow, etc.)
+ *
+ * @part item - The inner anchor or button element
+ * @part item-icon - The icon wrapper
+ * @part item-label - The label wrapper
+ * @part item-end - The trailing content wrapper
+ *
+ * @cssprop --sidebar-item-color - Default text color
+ * @cssprop --sidebar-item-hover-bg - Hover background
+ * @cssprop --sidebar-item-hover-color - Hover text color
+ * @cssprop --sidebar-item-active-bg - Active background
+ * @cssprop --sidebar-item-active-color - Active text color
+ * @cssprop --sidebar-item-indicator - Active indicator bar color
+ *
+ * @example
+ * ```html
+ * <bit-sidebar-item href="/dashboard" active>
+ *   <span slot="icon">🏠</span>
+ *   Dashboard
+ * </bit-sidebar-item>
+ *
+ * <bit-sidebar-item href="/users">
+ *   <span slot="icon">👤</span>
+ *   Users
+ *   <bit-badge slot="end" color="primary">3</bit-badge>
+ * </bit-sidebar-item>
+ * ```
+ */
+export declare const SIDEBAR_ITEM_TAG: string;
+export {};
+//# sourceMappingURL=sidebar.d.ts.map

package/dist/layout/sidebar/sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar/sidebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,cAAc,EAEpB,MAAM,mBAAmB,CAAC;AAO3B,KAAK,cAAc,GAAG,UAAU,GAAG,OAAO,CAAC;AAC3C,KAAK,qBAAqB,GAAG,KAAK,GAAG,YAAY,GAAG,QAAQ,CAAC;AAE7D,oGAAoG;AACpG,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACnC,OAAO,EAAE,cAAc,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC;CACrD,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,WAAW,0DAAkD,CAAC;AAM3E,oCAAoC;AACpC,MAAM,MAAM,cAAc,GAAG,WAAW,GACtC,eAAe,GAAG;IAChB,wCAAwC;IACxC,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC,6CAA6C;IAC7C,MAAM,IAAI,IAAI,CAAC;CAChB,CAAC;AAEJ,mCAAmC;AAEnC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,kBAAkB,EAAE;QAAE,SAAS,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,qBAAqB,CAAA;KAAE,CAAC;CAC3E,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,aAAa,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,WAAW,QAsHtB,CAAC;AAMH,+BAA+B;AAC/B,MAAM,MAAM,oBAAoB,GAAG;IACjC,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8CAA8C;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,iBAAiB,QA4E5B,CAAC;AAMH,8BAA8B;AAC9B,MAAM,MAAM,mBAAmB,GAAG;IAChC,4DAA4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,eAAO,MAAM,gBAAgB,QAwD3B,CAAC"}

package/dist/menu.cjs

@@ -0,0 +1,133 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/accessibility.css.cjs`),t=require(`./styles/mixins/shape.css.cjs`),n=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const r=require(`./craftit/dist/labs/list.cjs`),i=require(`./craftit/dist/labs/overlay.cjs`);require(`./craftit/dist/labs.cjs`);const a=require(`./overlay/menu/menu.css?inline.cjs`);let o=require(`@vielzeug/craftit`),s=require(`@vielzeug/floatit`);var c=o.css`
+  ${n.colorThemeMixin}
+  ${t.sizeVariantMixin}
+  ${n.forcedColorsMixin}
+`,l=(0,o.defineComponent)({props:{checked:{default:!1,type:Boolean},disabled:{default:!1,type:Boolean},type:{default:void 0},value:{default:void 0}},setup({props:t}){let n=o.css`
+      @layer buildit.base {
+        :host {
+          display: block;
+          outline: none;
+        }
+
+        .item {
+          align-items: center;
+          border-radius: 0;
+          cursor: pointer;
+          display: flex;
+          font-size: var(--text-sm);
+          gap: var(--size-2);
+          line-height: var(--leading-normal);
+          padding: var(--size-1-5) var(--size-3);
+          transition:
+            background var(--transition-fast),
+            color var(--transition-fast);
+          user-select: none;
+          white-space: nowrap;
+        }
+
+        :host(:first-of-type) .item {
+          border-radius: var(--rounded-sm) var(--rounded-sm) 0 0;
+        }
+
+        :host(:last-child) .item {
+          border-radius: 0 0 var(--rounded-sm) var(--rounded-sm);
+        }
+
+        :host(:first-of-type:last-child) .item {
+          border-radius: var(--rounded-sm);
+        }
+
+        :host(:not([disabled])) .item:hover {
+          background: var(--color-contrast-100);
+        }
+
+        :host(:focus-visible) .item {
+          background: color-mix(in srgb, var(--color-primary) 12%, var(--color-contrast-100));
+          color: var(--color-primary);
+        }
+
+        /* Driven by JS via sync() — avoids :host() attribute selector edge-cases */
+        .item.is-checkable {
+          background: color-mix(in srgb, var(--color-contrast-900) 5%, var(--color-canvas));
+        }
+
+        .item.is-checked {
+          background: color-mix(in srgb, var(--color-primary) 18%, var(--color-canvas));
+          color: var(--color-primary);
+          font-weight: var(--font-medium);
+        }
+
+        :host([disabled]) .item {
+          color: var(--color-contrast-400);
+          cursor: not-allowed;
+          opacity: 0.6;
+          pointer-events: none;
+        }
+
+        .icon-slot {
+          display: contents;
+        }
+
+        .item-check {
+          align-items: center;
+          color: currentColor;
+          display: inline-flex;
+          flex-shrink: 0;
+          justify-content: center;
+          width: 1.25rem;
+        }
+
+        .item-label {
+          flex: 1;
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+      ${e.coarsePointerMixin}
+    `,r=(0,o.computed)(()=>t.type.value===`checkbox`||t.type.value===`radio`),i=(0,o.computed)(()=>r.value&&t.checked.value),a=(0,o.computed)(()=>t.type.value===`checkbox`?`menuitemcheckbox`:t.type.value===`radio`?`menuitemradio`:`menuitem`),s=(0,o.computed)(()=>t.type.value===`checkbox`?t.checked.value?`☑`:`☐`:t.type.value===`radio`?t.checked.value?`◉`:`◯`:``),c=(0,o.computed)(()=>`item${r.value?` is-checkable`:``}${i.value?` is-checked`:``}`),l=()=>o.html`
+      <span class="item-check" aria-hidden="true">${()=>s.value}</span>
+      <span class="icon-slot"><slot name="icon"></slot></span>
+      <span class="item-label"><slot></slot></span>
+    `;return o.html`
+      <style>
+        ${n}
+      </style>
+      ${()=>r.value?o.html`
+              <div
+                class="${()=>c.value}"
+                tabindex="-1"
+                role="${()=>a.value}"
+                aria-checked="${()=>String(i.value)}"
+                aria-disabled="${()=>String(t.disabled.value)}">
+                ${l()}
+              </div>
+            `:o.html`
+              <div
+                class="${()=>c.value}"
+                tabindex="-1"
+                role="menuitem"
+                aria-disabled="${()=>String(t.disabled.value)}">
+                <span class="icon-slot"><slot name="icon"></slot></span>
+                <span class="item-label"><slot></slot></span>
+              </div>
+            `}
+    `},tag:`bit-menu-item`}),u=(0,o.defineComponent)({setup(){return o.html`<style>
+      @layer buildit.base {
+        :host {
+          display: block;
+          margin: var(--size-1) 0;
+          border-top: var(--border) solid var(--color-contrast-200);
+        }
+      }
+    </style>`},tag:`bit-menu-separator`}),d=(0,o.defineComponent)({props:{color:{default:void 0},disabled:{default:!1},placement:{default:`bottom-start`},size:{default:void 0}},setup({emit:e,host:t,props:n}){let l=(0,o.createId)(`menu`),u=(0,o.signal)(!1),d=null,f=null;function p(){return Array.from(t.querySelectorAll(`bit-menu-item:not([disabled])`))}let m=-1,h=r.e({getIndex:()=>m,getItems:p,isItemDisabled:e=>e.hasAttribute(`disabled`),setIndex:e=>{m=e,p()[e]?.focus()}});function g(){!f||!d||(0,s.positionFloat)(d,f,{middleware:[(0,s.offset)(4),(0,s.flip)({padding:6}),(0,s.shift)({padding:6})],placement:n.placement.value})}let _=i.t({getBoundaryElement:()=>t,getPanelElement:()=>f,getTriggerElement:()=>d,isDisabled:()=>!!n.disabled.value,isOpen:()=>u.value,onClose:t=>e(`close`,{reason:t}),onOpen:t=>e(`open`,{reason:t}),positioner:{floating:()=>f,reference:()=>d,update:g},setOpen:e=>{u.value=e,e||h.reset()}}),v=n=>{let r=n.getAttribute(`type`);if(r===`checkbox`)n.hasAttribute(`checked`)?n.removeAttribute(`checked`):n.setAttribute(`checked`,``);else if(r===`radio`){for(let e of t.querySelectorAll(`bit-menu-item[type="radio"]`))e.removeAttribute(`checked`);n.setAttribute(`checked`,``)}let i=n.getAttribute(`value`)??``;e(`select`,{checked:r===`checkbox`||r===`radio`?n.hasAttribute(`checked`):void 0,value:i}),r!==`checkbox`&&r!==`radio`&&_.close({reason:`programmatic`})};function y(e){if(!u.value){(e.key===`Enter`||e.key===` `||e.key===`ArrowDown`)&&(e.preventDefault(),_.open(),requestAnimationFrame(()=>h.first()));return}switch(e.key){case` `:{e.preventDefault();let t=h.getActiveItem();t&&v(t);break}case`ArrowDown`:e.preventDefault(),h.next();break;case`ArrowUp`:e.preventDefault(),h.prev();break;case`End`:e.preventDefault(),h.last();break;case`Enter`:{e.preventDefault();let t=h.getActiveItem();t&&v(t);break}case`Escape`:e.preventDefault(),_.close({reason:`escape`});break;case`Home`:e.preventDefault(),h.first();break;case`Tab`:_.close({reason:`programmatic`});break}}return(0,o.onMount)(()=>{let e=t.shadowRoot?.querySelector(`slot[name="trigger"]`);f=t.shadowRoot?.querySelector(`.menu-panel`)??null;let r=null;function i(){r&&(r.removeEventListener(`click`,a),r.removeEventListener(`keydown`,y)),d=e?.assignedElements({flatten:!0})?.[0]??null,r=d,d&&((0,o.aria)(d,{controls:()=>l,disabled:()=>n.disabled.value,expanded:()=>u.value?`true`:`false`,haspopup:`menu`}),d.addEventListener(`click`,a),d.addEventListener(`keydown`,y))}function a(){_.toggle()}(0,o.onSlotChange)(`trigger`,i),(0,o.handle)(t,`click`,(e=>{if(!u.value)return;let t=e,n=t.composedPath().find(e=>e instanceof HTMLElement&&e.tagName===`BIT-MENU-ITEM`)??t.target?.closest(`bit-menu-item`)??null;!n||n.hasAttribute(`disabled`)||v(n)}));let s=_.bindOutsideClick(document);return(0,o.effect)(()=>{f?.toggleAttribute(`data-open`,u.value)}),(0,o.handle)(f,`keydown`,y),()=>{s(),r&&(r.removeEventListener(`click`,a),r.removeEventListener(`keydown`,y))}}),o.html`
+      <style>
+        ${a.default}${c}
+      </style>
+      <slot name="trigger"></slot>
+      <div class="menu-panel" id="${l}" role="menu" aria-orientation="vertical">
+        <slot></slot>
+      </div>
+    `},tag:`bit-menu`});exports.MENU_ITEM_TAG=l,exports.MENU_TAG=d,exports.SEPARATOR_TAG=u;
+//# sourceMappingURL=menu.cjs.map

package/dist/menu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.cjs","names":[],"sources":["../src/overlay/menu/menu.ts"],"sourcesContent":["import {\n  aria,\n  computed,\n  createId,\n  css,\n  defineComponent,\n  effect,\n  handle,\n  html,\n  onMount,\n  onSlotChange,\n  signal,\n} from '@vielzeug/craftit';\nimport {\n  createListNavigation,\n  createOverlayControl,\n  type OverlayOpenReason,\n  type OverlayCloseReason,\n} from '@vielzeug/craftit/labs';\nimport { flip, offset, positionFloat, shift } from '@vielzeug/floatit';\n\nimport type { AddEventListeners, ComponentSize, ThemeColor } from '../../types';\n\nimport { coarsePointerMixin, colorThemeMixin, forcedColorsMixin, sizeVariantMixin } from '../../styles';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface MenuSelectDetail {\n  value: string;\n  checked?: boolean;\n}\n\nexport type BitMenuItemType = 'checkbox' | 'radio';\n\nexport type BitMenuEvents = {\n  close: { reason: OverlayCloseReason };\n  open: { reason: OverlayOpenReason };\n  select: MenuSelectDetail;\n};\n\nexport type BitMenuItemProps = {\n  checked?: boolean;\n  disabled?: boolean;\n  type?: BitMenuItemType;\n  value?: string;\n};\n\nexport type BitMenuProps = {\n  color?: ThemeColor;\n  disabled?: boolean;\n  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n  size?: ComponentSize;\n};\n\n// ============================================\n// Styles\n// ============================================\n\nimport componentStyles from './menu.css?inline';\n\nconst themeStyles = /* css */ css`\n  ${colorThemeMixin}\n  ${sizeVariantMixin}\n  ${forcedColorsMixin}\n`;\n\n// ============================================\n// Menu Item Component\n// ============================================\n\nexport const MENU_ITEM_TAG = defineComponent<BitMenuItemProps>({\n  props: {\n    checked: { default: false, type: Boolean },\n    disabled: { default: false, type: Boolean },\n    type: { default: undefined },\n    value: { default: undefined },\n  },\n  setup({ props }) {\n    const itemStyles = /* css */ css`\n      @layer buildit.base {\n        :host {\n          display: block;\n          outline: none;\n        }\n\n        .item {\n          align-items: center;\n          border-radius: 0;\n          cursor: pointer;\n          display: flex;\n          font-size: var(--text-sm);\n          gap: var(--size-2);\n          line-height: var(--leading-normal);\n          padding: var(--size-1-5) var(--size-3);\n          transition:\n            background var(--transition-fast),\n            color var(--transition-fast);\n          user-select: none;\n          white-space: nowrap;\n        }\n\n        :host(:first-of-type) .item {\n          border-radius: var(--rounded-sm) var(--rounded-sm) 0 0;\n        }\n\n        :host(:last-child) .item {\n          border-radius: 0 0 var(--rounded-sm) var(--rounded-sm);\n        }\n\n        :host(:first-of-type:last-child) .item {\n          border-radius: var(--rounded-sm);\n        }\n\n        :host(:not([disabled])) .item:hover {\n          background: var(--color-contrast-100);\n        }\n\n        :host(:focus-visible) .item {\n          background: color-mix(in srgb, var(--color-primary) 12%, var(--color-contrast-100));\n          color: var(--color-primary);\n        }\n\n        /* Driven by JS via sync() — avoids :host() attribute selector edge-cases */\n        .item.is-checkable {\n          background: color-mix(in srgb, var(--color-contrast-900) 5%, var(--color-canvas));\n        }\n\n        .item.is-checked {\n          background: color-mix(in srgb, var(--color-primary) 18%, var(--color-canvas));\n          color: var(--color-primary);\n          font-weight: var(--font-medium);\n        }\n\n        :host([disabled]) .item {\n          color: var(--color-contrast-400);\n          cursor: not-allowed;\n          opacity: 0.6;\n          pointer-events: none;\n        }\n\n        .icon-slot {\n          display: contents;\n        }\n\n        .item-check {\n          align-items: center;\n          color: currentColor;\n          display: inline-flex;\n          flex-shrink: 0;\n          justify-content: center;\n          width: 1.25rem;\n        }\n\n        .item-label {\n          flex: 1;\n          min-width: 0;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n      }\n      ${coarsePointerMixin}\n    `;\n\n    const isCheckable = computed(() => props.type.value === 'checkbox' || props.type.value === 'radio');\n    const isChecked = computed(() => isCheckable.value && props.checked.value);\n    const itemRole = computed(() => {\n      if (props.type.value === 'checkbox') return 'menuitemcheckbox';\n\n      if (props.type.value === 'radio') return 'menuitemradio';\n\n      return 'menuitem';\n    });\n    const checkIndicator = computed(() => {\n      if (props.type.value === 'checkbox') return props.checked.value ? '☑' : '☐';\n\n      if (props.type.value === 'radio') return props.checked.value ? '◉' : '◯';\n\n      return '';\n    });\n    const itemClass = computed(\n      () => `item${isCheckable.value ? ' is-checkable' : ''}${isChecked.value ? ' is-checked' : ''}`,\n    );\n    const renderContent = () => html`\n      <span class=\"item-check\" aria-hidden=\"true\">${() => checkIndicator.value}</span>\n      <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n      <span class=\"item-label\"><slot></slot></span>\n    `;\n\n    return html`\n      <style>\n        ${itemStyles}\n      </style>\n      ${() =>\n        isCheckable.value\n          ? html`\n              <div\n                class=\"${() => itemClass.value}\"\n                tabindex=\"-1\"\n                role=\"${() => itemRole.value}\"\n                aria-checked=\"${() => String(isChecked.value)}\"\n                aria-disabled=\"${() => String(props.disabled.value)}\">\n                ${renderContent()}\n              </div>\n            `\n          : html`\n              <div\n                class=\"${() => itemClass.value}\"\n                tabindex=\"-1\"\n                role=\"menuitem\"\n                aria-disabled=\"${() => String(props.disabled.value)}\">\n                <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n                <span class=\"item-label\"><slot></slot></span>\n              </div>\n            `}\n    `;\n  },\n  tag: 'bit-menu-item',\n});\n\n// ============================================\n// Menu Separator\n// ============================================\n\nexport const SEPARATOR_TAG = defineComponent({\n  setup() {\n    return html`<style>\n      @layer buildit.base {\n        :host {\n          display: block;\n          margin: var(--size-1) 0;\n          border-top: var(--border) solid var(--color-contrast-200);\n        }\n      }\n    </style>`;\n  },\n  tag: 'bit-menu-separator',\n});\n\n// ============================================\n// Menu Component\n// ============================================\n\n/**\n * `bit-menu` — Action dropdown menu triggered by a slotted trigger element.\n * Nest `<bit-menu-item>` elements inside for menu options.\n *\n * @example\n * ```html\n * <bit-menu>\n *   <button slot=\"trigger\">Actions</button>\n *   <bit-menu-item value=\"edit\">Edit</bit-menu-item>\n *   <bit-menu-item value=\"delete\">Delete</bit-menu-item>\n * </bit-menu>\n * ```\n */\nexport const MENU_TAG = defineComponent<BitMenuProps, BitMenuEvents>({\n  props: {\n    color: { default: undefined },\n    disabled: { default: false },\n    placement: { default: 'bottom-start' },\n    size: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    const menuId = createId('menu');\n    const isOpen = signal(false);\n    let triggerEl: HTMLElement | null = null;\n    let panelEl: HTMLElement | null = null;\n\n    // ── Helpers ───────────────────────────────────────────────────────────────\n    function getItems(): HTMLElement[] {\n      return Array.from(host.querySelectorAll<HTMLElement>('bit-menu-item:not([disabled])'));\n    }\n\n    let focusedIndex = -1;\n\n    const listNavigation = createListNavigation<HTMLElement>({\n      getIndex: () => focusedIndex,\n      getItems,\n      isItemDisabled: (item) => item.hasAttribute('disabled'),\n      setIndex: (index) => {\n        focusedIndex = index;\n        getItems()[index]?.focus();\n      },\n    });\n\n    function updatePosition() {\n      if (!panelEl || !triggerEl) return;\n\n      positionFloat(triggerEl, panelEl, {\n        middleware: [offset(4), flip({ padding: 6 }), shift({ padding: 6 })],\n        placement: props.placement.value,\n      });\n    }\n\n    const overlay = createOverlayControl({\n      getBoundaryElement: () => host,\n      getPanelElement: () => panelEl,\n      getTriggerElement: () => triggerEl,\n      isDisabled: () => Boolean(props.disabled.value),\n      isOpen: () => isOpen.value,\n      onClose: (reason) => emit('close', { reason }),\n      onOpen: (reason) => emit('open', { reason }),\n      positioner: {\n        floating: () => panelEl,\n        reference: () => triggerEl,\n        update: updatePosition,\n      },\n      setOpen: (next) => {\n        isOpen.value = next;\n\n        if (!next) listNavigation.reset();\n      },\n    });\n\n    const activateItem = (item: HTMLElement): void => {\n      const type = item.getAttribute('type');\n\n      if (type === 'checkbox') {\n        const next = !item.hasAttribute('checked');\n\n        if (next) item.setAttribute('checked', '');\n        else item.removeAttribute('checked');\n      } else if (type === 'radio') {\n        for (const radio of host.querySelectorAll<HTMLElement>('bit-menu-item[type=\"radio\"]')) {\n          radio.removeAttribute('checked');\n        }\n        item.setAttribute('checked', '');\n      }\n\n      const value = item.getAttribute('value') ?? '';\n      const checked = type === 'checkbox' || type === 'radio' ? item.hasAttribute('checked') : undefined;\n\n      emit('select', { checked, value });\n\n      if (type !== 'checkbox' && type !== 'radio') {\n        overlay.close({ reason: 'programmatic' });\n      }\n    };\n\n    // ── Keyboard Navigation ───────────────────────────────────────────────────\n    function handleMenuKeydown(e: KeyboardEvent) {\n      const open = isOpen.value;\n\n      // When closed: open on Enter / Space / ArrowDown\n      if (!open) {\n        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n          e.preventDefault();\n          overlay.open();\n          requestAnimationFrame(() => listNavigation.first());\n        }\n\n        return;\n      }\n\n      // When open: navigate and activate\n      switch (e.key) {\n        case ' ': {\n          e.preventDefault();\n\n          const focused = listNavigation.getActiveItem();\n\n          if (focused) activateItem(focused);\n\n          break;\n        }\n        case 'ArrowDown':\n          e.preventDefault();\n          listNavigation.next();\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          listNavigation.prev();\n          break;\n        case 'End':\n          e.preventDefault();\n          listNavigation.last();\n          break;\n        case 'Enter': {\n          e.preventDefault();\n\n          const focused = listNavigation.getActiveItem();\n\n          if (focused) activateItem(focused);\n\n          break;\n        }\n        case 'Escape':\n          e.preventDefault();\n          overlay.close({ reason: 'escape' });\n          break;\n        case 'Home':\n          e.preventDefault();\n          listNavigation.first();\n          break;\n        case 'Tab':\n          overlay.close({ reason: 'programmatic' });\n          break;\n      }\n    }\n\n    // ── Lifecycle ─────────────────────────────────────────────────────────────\n    onMount(() => {\n      const triggerSlot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]');\n\n      panelEl = host.shadowRoot?.querySelector<HTMLElement>('.menu-panel') ?? null;\n\n      let prevTriggerEl: HTMLElement | null = null;\n\n      function resolveTrigger() {\n        if (prevTriggerEl) {\n          prevTriggerEl.removeEventListener('click', toggleMenu);\n          prevTriggerEl.removeEventListener('keydown', handleMenuKeydown);\n        }\n\n        const assigned = triggerSlot?.assignedElements({ flatten: true });\n\n        triggerEl = (assigned?.[0] as HTMLElement | undefined) ?? null;\n        prevTriggerEl = triggerEl;\n\n        if (triggerEl) {\n          aria(triggerEl, {\n            controls: () => menuId,\n            disabled: () => props.disabled.value,\n            expanded: () => (isOpen.value ? 'true' : 'false'),\n            haspopup: 'menu',\n          });\n          triggerEl.addEventListener('click', toggleMenu);\n          triggerEl.addEventListener('keydown', handleMenuKeydown);\n        }\n      }\n\n      function toggleMenu() {\n        overlay.toggle();\n      }\n\n      onSlotChange('trigger', resolveTrigger);\n\n      // Item activation via click\n      handle(host, 'click', ((e: Event) => {\n        if (!isOpen.value) return;\n\n        const me = e as MouseEvent;\n        const path = me.composedPath();\n        const itemFromPath = path.find(\n          (node): node is HTMLElement => node instanceof HTMLElement && node.tagName === 'BIT-MENU-ITEM',\n        );\n        const item = itemFromPath ?? (me.target as HTMLElement | null)?.closest<HTMLElement>('bit-menu-item') ?? null;\n\n        if (!item || item.hasAttribute('disabled')) return;\n\n        activateItem(item);\n      }) as EventListener);\n\n      const removeOutsideClick = overlay.bindOutsideClick(document);\n\n      effect(() => {\n        panelEl?.toggleAttribute('data-open', isOpen.value);\n      });\n\n      handle(panelEl, 'keydown', handleMenuKeydown as EventListener);\n\n      return () => {\n        removeOutsideClick();\n\n        if (prevTriggerEl) {\n          prevTriggerEl.removeEventListener('click', toggleMenu);\n          prevTriggerEl.removeEventListener('keydown', handleMenuKeydown);\n        }\n      };\n    });\n\n    return html`\n      <style>\n        ${componentStyles}${themeStyles}\n      </style>\n      <slot name=\"trigger\"></slot>\n      <div class=\"menu-panel\" id=\"${menuId}\" role=\"menu\" aria-orientation=\"vertical\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  tag: 'bit-menu',\n}) as unknown as AddEventListeners<BitMenuEvents>;\n"],"mappings":"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"}