@vielzeug/buildit 2.0.0

package/dist/select.js

@@ -0,0 +1,317 @@
+import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
+import { disabledLoadingMixin as t } from "./styles/mixins/states.css.js";
+import { forcedColorsFocusMixin as n } from "./styles/mixins/theme.css.js";
+import { formFieldMixins as r } from "./styles/index.js";
+import { checkIcon as i, chevronDownIcon as a } from "./icons.js";
+import "./chip.js";
+import { e as o } from "./craftit/dist/labs/list.js";
+import { t as s } from "./craftit/dist/labs/overlay.js";
+import "./craftit/dist/labs.js";
+import { createDropdownPositioner as c } from "./inputs/shared/dom-sync/dropdown.js";
+import { resolveMergedAssistiveText as l } from "./inputs/shared/utils/assistive-text.js";
+import { createChoiceChangeDetail as u } from "./inputs/shared/utils/choice-change.js";
+import { computeControlledCsvState as ee } from "./inputs/shared/utils/controlled-csv.js";
+import { FORM_CTX as te } from "./inputs/shared/form-context.js";
+import { mountLabelSyncStandalone as d } from "./inputs/shared/dom-sync/label-sync.js";
+import "./inputs/shared/dom-sync/index.js";
+import { createFieldValidation as ne } from "./inputs/shared/validation/index.js";
+import { FIELD_SIZE_PRESET as f } from "./inputs/shared/design-presets.js";
+import p from "./inputs/select/select.css?inline.js";
+import { aria as m, computed as h, createFormIds as re, defineComponent as g, defineField as ie, effect as ae, html as _, inject as v, onMount as y, onSlotChange as b, ref as x, signal as S, typed as C, watch as w } from "@vielzeug/craftit";
+//#region src/inputs/select/select.ts
+var T = g({
+	formAssociated: !0,
+	props: {
+		color: { default: void 0 },
+		disabled: { default: !1 },
+		error: {
+			default: "",
+			omit: !0
+		},
+		fullwidth: { default: !1 },
+		helper: { default: "" },
+		label: { default: "" },
+		"label-placement": { default: "inset" },
+		loading: { default: !1 },
+		multiple: { default: !1 },
+		name: { default: "" },
+		options: C(void 0, { reflect: !1 }),
+		placeholder: { default: "" },
+		required: { default: !1 },
+		rounded: { default: void 0 },
+		size: { default: void 0 },
+		value: { default: "" },
+		variant: { default: void 0 }
+	},
+	setup({ emit: e, host: t, props: n }) {
+		let r = S([]), f = S([]), p = S(!1), g = S(-1), C = h(() => !!n.loading.value), T = h(() => {
+			let e = n.options.value;
+			return e === void 0 ? f.value : e;
+		}), E = v(te, void 0), D = h(() => r.value.join(",")), { triggerValidation: O } = ne(E, ie({
+			disabled: h(() => !!n.disabled.value || !!E?.disabled.value),
+			value: D
+		}, { onReset: () => {
+			r.value = [];
+		} }));
+		w(p, (e) => {
+			t.toggleAttribute("open", ((e) => !!e)(e));
+		}, { immediate: !0 }), w(n.error, (e) => {
+			t.toggleAttribute("has-error", ((e) => !!e)(e));
+		}, { immediate: !0 });
+		let { fieldId: k, labelId: A } = re("select", n.name.value), j = `listbox-${k}`, M = null, N = null, P = x(), F = x();
+		function I() {
+			let e = t.shadowRoot?.querySelector("slot");
+			if (!e) return;
+			let n = e.assignedElements({ flatten: !0 }), r = [];
+			for (let e of n) if (e.tagName === "OPTION") {
+				let t = e;
+				r.push({
+					disabled: t.disabled,
+					label: t.text || t.value,
+					value: t.value
+				});
+			} else if (e.tagName === "OPTGROUP") {
+				let t = e, n = t.label;
+				for (let e of Array.from(t.querySelectorAll("option"))) {
+					let t = e;
+					r.push({
+						disabled: t.disabled,
+						group: n,
+						label: t.text || t.value,
+						value: t.value
+					});
+				}
+			}
+			f.value = r;
+		}
+		ae(() => {
+			r.value = ee(n.value.value).values;
+		});
+		let L = h(() => {
+			if (r.value.length === 0) return "";
+			if (n.multiple.value && r.value.length > 1) return `${r.value.length} selected`;
+			let e = r.value[0];
+			return T.value.find((t) => t.value === e)?.label ?? e;
+		}), R = h(() => n.multiple.value ? r.value.map((e) => ({
+			label: T.value.find((t) => t.value === e)?.label ?? e,
+			value: e
+		})) : []), z = h(() => l(n.error.value, n.helper.value)), B = h(() => n.multiple.value && r.value.length > 0), V = h(() => L.value || n.placeholder.value || ""), H = h(() => !!n.label.value);
+		function U(e) {
+			let t = [], n = /* @__PURE__ */ new Map();
+			for (let t of e) {
+				let e = t.group;
+				n.has(e) || n.set(e, []), n.get(e).push(t);
+			}
+			let r = 0;
+			for (let [e, i] of n) {
+				e !== void 0 && t.push({
+					label: e,
+					type: "group"
+				});
+				for (let e of i) t.push({
+					idx: r++,
+					opt: e,
+					type: "option"
+				});
+			}
+			return t;
+		}
+		let W = h(() => U(T.value));
+		function G(e) {
+			return T.value.find((t) => t.value === e)?.label ?? e;
+		}
+		function K(t) {
+			let n = r.value;
+			e("change", u(n, n.map((e) => G(e)), t));
+		}
+		function q(e) {
+			e.stopPropagation();
+			let t = e.detail?.value;
+			t !== void 0 && (r.value = r.value.filter((e) => e !== t), K(e), O("change"));
+		}
+		let J = c(() => M, () => N), Y = o({
+			getIndex: () => g.value,
+			getItems: () => T.value,
+			isItemDisabled: (e) => e.disabled,
+			setIndex: (e) => {
+				g.value = e, oe();
+			}
+		}), X = s({
+			getBoundaryElement: () => t,
+			getPanelElement: () => N,
+			getTriggerElement: () => M,
+			isDisabled: () => !!n.disabled.value,
+			isOpen: () => p.value,
+			positioner: {
+				floating: () => N,
+				reference: () => M,
+				update: () => J.updatePosition()
+			},
+			setOpen: (e) => {
+				p.value = e, e || Y.reset();
+			}
+		});
+		function Z() {
+			X.open(), requestAnimationFrame(() => {
+				let e = r.value.length > 0 ? T.value.findIndex((e) => e.value === r.value[0]) : 0;
+				Y.set(e >= 0 ? e : 0);
+			});
+		}
+		function Q(e = "programmatic") {
+			X.close({ reason: e }), O("blur");
+		}
+		function $(e, t) {
+			e.disabled || (n.multiple.value ? r.value = r.value.includes(e.value) ? r.value.filter((t) => t !== e.value) : [...r.value, e.value] : (r.value = [e.value], Q()), K(t), O("change"));
+		}
+		function oe() {
+			let e = g.value;
+			if (e >= 0) {
+				(N?.querySelector(`#${k}-opt-${e}`))?.scrollIntoView({ block: "nearest" });
+				return;
+			}
+			N && N.querySelector("[data-focused]")?.scrollIntoView({ block: "nearest" });
+		}
+		function se(e) {
+			if (n.disabled.value) return;
+			let t = T.value;
+			switch (e.key) {
+				case " ":
+				case "Enter":
+					if (e.preventDefault(), p.value) {
+						let n = g.value;
+						n >= 0 && n < t.length && $(t[n], e);
+					} else Z();
+					break;
+				case "ArrowDown":
+					e.preventDefault(), p.value ? Y.next() : Z();
+					break;
+				case "ArrowUp":
+					e.preventDefault(), p.value ? Y.prev() : Z();
+					break;
+				case "End":
+					p.value && (e.preventDefault(), Y.last());
+					break;
+				case "Escape":
+					e.preventDefault(), Q("escape");
+					break;
+				case "Home":
+					p.value && (e.preventDefault(), Y.first());
+					break;
+				case "Tab":
+					Q();
+					break;
+			}
+		}
+		return y(() => {
+			b("default", I), I(), d(F, P, n), M && m(M, {
+				activedescendant: () => g.value >= 0 ? `${k}-opt-${g.value}` : null,
+				disabled: () => n.disabled.value,
+				expanded: () => p.value ? "true" : "false",
+				invalid: () => !!n.error.value,
+				labelledby: () => H.value ? A : null
+			});
+			let e = X.bindOutsideClick(document);
+			return () => {
+				J.destroy(), e();
+			};
+		}), _`<slot style="display:none"></slot>
+      <div class="select-wrapper">
+        <label class="label-outside" id="${A}" ref=${P} hidden></label>
+        <div
+          class="field"
+          ref=${(e) => {
+			M = e;
+		}}
+          role="combobox"
+          tabindex=${() => n.disabled.value ? "-1" : "0"}
+          aria-controls="${j}"
+          aria-expanded="false"
+          aria-labelledby="${A}"
+          @click=${(e) => {
+			e.stopPropagation(), p.value ? Q() : Z();
+		}}
+          @keydown=${se}>
+          <label class="label-inset" id="${A}" ref=${F} hidden></label>
+          <div class="trigger-row">
+            <div class="chips-row" ?hidden=${() => !B.value}>
+              ${() => R.value.map((e) => _`
+                    <bit-chip
+                      value=${e.value}
+                      aria-label=${e.label}
+                      mode="removable"
+                      variant="flat"
+                      size="sm"
+                      color=${() => n.color.value}
+                      @remove=${q}>
+                      ${e.label}
+                    </bit-chip>
+                  `)}
+            </div>
+            <span
+              class="trigger-value ${() => L.value ? "" : "trigger-placeholder"}"
+              ?hidden=${() => B.value}
+              >${() => V.value}</span
+            >
+          </div>
+          <span class="trigger-icon" aria-hidden="true">
+            ${a}
+            <span class="loader" aria-label="Loading"></span>
+          </span>
+        </div>
+        <div
+          class="helper-text"
+          aria-live="polite"
+          ?hidden=${() => z.value.hidden}
+          style=${() => z.value.isError ? "color: var(--color-error);" : ""}>
+          ${() => z.value.text}
+        </div>
+      </div>
+      <div
+        class="dropdown"
+        ?data-open=${() => p.value}
+        role="listbox"
+        id="${j}"
+        aria-label="Options"
+        ref=${(e) => {
+			N = e;
+		}}>
+        <div class="dropdown-loading" ?hidden=${() => !C.value}>Loading…</div>
+        <div class="dropdown-empty" ?hidden=${() => C.value || T.value.length > 0}>No options</div>
+        <div class="options-list" ?hidden=${() => C.value || T.value.length === 0}>
+          ${() => W.value.map((e) => e.type === "group" ? _`<div class="optgroup-label" role="presentation">${e.label}</div>` : _`<div
+                    class="option"
+                    role="option"
+                    id=${`${k}-opt-${e.idx}`}
+                    data-option-index=${() => String(e.idx)}
+                    data-option-value=${e.opt.value}
+                    aria-selected=${() => String(r.value.includes(e.opt.value))}
+                    aria-disabled=${() => String(e.opt.disabled)}
+                    ?data-focused=${() => g.value === e.idx}
+                    ?data-selected=${() => r.value.includes(e.opt.value)}
+                    ?data-disabled=${() => e.opt.disabled}
+                    @click=${(t) => {
+			t.stopPropagation(), $(e.opt, t);
+		}}
+                    @pointerenter=${() => {
+			g.value = e.idx;
+		}}>
+                    <span>${e.opt.label}</span>
+                    <span class="option-check" aria-hidden="true">${i}</span>
+                  </div>`)}
+        </div>
+      </div>`;
+	},
+	shadow: { delegatesFocus: !0 },
+	styles: [
+		e(f),
+		...r,
+		t(),
+		n(".field"),
+		p
+	],
+	tag: "bit-select"
+});
+//#endregion
+export { T as SELECT_TAG };
+
+//# sourceMappingURL=select.js.map

package/dist/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","names":[],"sources":["../src/inputs/select/select.ts"],"sourcesContent":["import {\n  aria,\n  computed,\n  createFormIds,\n  defineComponent,\n  defineField,\n  effect,\n  html,\n  inject,\n  onMount,\n  onSlotChange,\n  ref,\n  signal,\n  typed,\n  watch,\n} from '@vielzeug/craftit';\nimport { createListNavigation, createOverlayControl } from '@vielzeug/craftit/labs';\n\nimport type { VisualVariant } from '../../types';\n\nimport '../../feedback/chip/chip';\nimport type { SelectableFieldProps } from '../shared/base-props';\n\nimport { checkIcon, chevronDownIcon } from '../../icons';\nimport { disabledLoadingMixin, forcedColorsFocusMixin, formFieldMixins, sizeVariantMixin } from '../../styles';\nimport { FIELD_SIZE_PRESET } from '../shared/design-presets';\nimport { createDropdownPositioner, mountLabelSyncStandalone } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\nimport {\n  type ChoiceChangeDetail,\n  computeControlledCsvState,\n  createChoiceChangeDetail,\n  resolveMergedAssistiveText,\n} from '../shared/utils';\nimport { createFieldValidation } from '../shared/validation';\nimport componentStyles from './select.css?inline';\n\n// ============================================\n// Types\n// ============================================\n\ntype OptionItem = {\n  disabled: boolean;\n  group?: string;\n  label: string;\n  value: string;\n};\n\ntype FlatRow =\n  | {\n      idx: number;\n      opt: OptionItem;\n      type: 'option';\n    }\n  | {\n      label: string;\n      type: 'group';\n    };\n\n// ============================================\n// Styles\n// ============================================\n\n// ============================================\n// Component Props\n// ============================================\n\n/** Select component properties */\n\nexport type BitSelectEvents = {\n  change: ChoiceChangeDetail;\n};\n\nexport type BitSelectProps = SelectableFieldProps<Exclude<VisualVariant, 'glass' | 'text' | 'frost'>> & {\n  /** Show loading state in dropdown */\n  loading?: boolean;\n  /** Allow selecting multiple options */\n  multiple?: boolean;\n  /** JS options array (alternative to slotted <option> elements) */\n  options?: OptionItem[];\n  /** Mark the field as required */\n  required?: boolean;\n};\n\n/**\n * A fully custom form-associated select dropdown with keyboard navigation and ARIA support.\n * Reads `<option>` and `<optgroup>` children from the default slot.\n *\n * @element bit-select\n *\n * @attr {string} label - Label text\n * @attr {string} label-placement - 'inset' | 'outside'\n * @attr {string} value - Current selected value(s) (comma-separated for multiple)\n * @attr {string} placeholder - Placeholder when no option selected\n * @attr {string} name - Form field name\n * @attr {boolean} multiple - Enable multi-select\n * @attr {boolean} disabled - Disable the select\n * @attr {boolean} required - Required field\n * @attr {string} helper - Helper text below the select\n * @attr {string} error - Error message\n * @attr {string} color - Theme color\n * @attr {string} variant - Visual variant\n * @attr {string} size - Component size\n * @attr {string} rounded - Border radius\n * @attr {boolean} fullwidth - Expand to full width\n *\n * @fires change - Fired when selection changes. detail: { value: string, values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - `<option>` and `<optgroup>` elements\n *\n * @cssprop --select-bg - Background\n * @cssprop --select-border-color - Border color\n * @cssprop --select-radius - Border radius\n * @cssprop --select-padding - Padding\n * @cssprop --select-font-size - Font size\n * @cssprop --select-placeholder-color - Placeholder text color\n *\n * @example\n * ```html\n * <bit-select label=\"Role\" value=\"admin\">\n *   <option value=\"admin\">Administrator</option>\n *   <option value=\"editor\">Editor</option>\n *   <option value=\"viewer\">Viewer</option>\n * </bit-select>\n *\n * <bit-select label=\"Tags\" multiple color=\"primary\">\n *   <optgroup label=\"Frontend\">\n *     <option value=\"react\">React</option>\n *     <option value=\"vue\">Vue</option>\n *   </optgroup>\n *   <optgroup label=\"Backend\">\n *     <option value=\"node\">Node.js</option>\n *   </optgroup>\n * </bit-select>\n * ```\n */\nexport const SELECT_TAG = defineComponent<BitSelectProps, BitSelectEvents>({\n  formAssociated: true,\n  props: {\n    color: { default: undefined },\n    disabled: { default: false },\n    error: { default: '', omit: true },\n    fullwidth: { default: false },\n    helper: { default: '' },\n    label: { default: '' },\n    'label-placement': { default: 'inset' },\n    loading: { default: false },\n    multiple: { default: false },\n    name: { default: '' },\n    options: typed<OptionItem[] | undefined>(undefined, { reflect: false }),\n    placeholder: { default: '' },\n    required: { default: false },\n    rounded: { default: undefined },\n    size: { default: undefined },\n    value: { default: '' },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    // ============================================\n    // State\n    // ============================================\n    const selectedValues = signal<string[]>([]);\n    const slottedOptions = signal<OptionItem[]>([]);\n    const isOpen = signal(false);\n    const focusedIndex = signal(-1);\n    const isLoading = computed(() => Boolean(props.loading.value));\n    // Merged options: explicit prop value overrides slotted options.\n    const options = computed(() => {\n      const propOptions = props.options.value;\n\n      return propOptions !== undefined ? propOptions : slottedOptions.value;\n    });\n    const formCtx = inject(FORM_CTX, undefined);\n    // Form-associated value (comma-separated for multiple)\n    const formValue = computed(() => selectedValues.value.join(','));\n    const fd = defineField(\n      { disabled: computed(() => Boolean(props.disabled.value) || Boolean(formCtx?.disabled.value)), value: formValue },\n      {\n        onReset: () => {\n          selectedValues.value = [];\n        },\n      },\n    );\n\n    const { triggerValidation } = createFieldValidation(formCtx, fd);\n\n    // Sync host attributes from component state for CSS hooks.\n    watch(\n      isOpen,\n      (value) => {\n        host.toggleAttribute('open', ((value) => Boolean(value))(value));\n      },\n      { immediate: true },\n    );\n    watch(\n      props.error,\n      (value) => {\n        host.toggleAttribute('has-error', ((value) => Boolean(value))(value));\n      },\n      { immediate: true },\n    );\n\n    // Accessibility IDs\n    const { fieldId: selectId, labelId } = createFormIds('select', props.name.value);\n    const listboxId = `listbox-${selectId}`;\n    // DOM refs\n    let triggerEl: HTMLElement | null = null;\n    let dropdownEl: HTMLElement | null = null;\n    // Refs for dynamic content\n    const labelOutsideRef = ref<HTMLSpanElement>();\n    const labelInsetRef = ref<HTMLSpanElement>();\n\n    // ============================================\n    // Option reading from slot\n    // ============================================\n    function readOptions() {\n      const slot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot');\n\n      if (!slot) return;\n\n      const assigned = slot.assignedElements({ flatten: true });\n      const items: OptionItem[] = [];\n\n      for (const el of assigned) {\n        if (el.tagName === 'OPTION') {\n          const opt = el as HTMLOptionElement;\n\n          items.push({ disabled: opt.disabled, label: opt.text || opt.value, value: opt.value });\n        } else if (el.tagName === 'OPTGROUP') {\n          const group = el as HTMLOptGroupElement;\n          const groupLabel = group.label;\n\n          for (const child of Array.from(group.querySelectorAll('option'))) {\n            const opt = child as HTMLOptionElement;\n\n            items.push({ disabled: opt.disabled, group: groupLabel, label: opt.text || opt.value, value: opt.value });\n          }\n        }\n      }\n      slottedOptions.value = items;\n    }\n    // Initialize selectedValues from prop\n    effect(() => {\n      selectedValues.value = computeControlledCsvState(props.value.value).values;\n    });\n\n    // ============================================\n    // Display value\n    // ============================================\n    const displayLabel = computed(() => {\n      if (selectedValues.value.length === 0) return '';\n\n      if (props.multiple.value && selectedValues.value.length > 1) {\n        return `${selectedValues.value.length} selected`;\n      }\n\n      const first = selectedValues.value[0];\n\n      return options.value.find((o) => o.value === first)?.label ?? first;\n    });\n    const selectedChipItems = computed(() => {\n      if (!props.multiple.value) return [];\n\n      return selectedValues.value.map((value) => ({\n        label: options.value.find((o) => o.value === value)?.label ?? value,\n        value,\n      }));\n    });\n    const assistiveText = computed(() => resolveMergedAssistiveText(props.error.value, props.helper.value));\n    const showChips = computed(() => props.multiple.value && selectedValues.value.length > 0);\n    const triggerText = computed(() => displayLabel.value || props.placeholder.value || '');\n    const hasLabel = computed(() => !!props.label.value);\n\n    function buildFlatList(opts: OptionItem[]): FlatRow[] {\n      const flat: FlatRow[] = [];\n      const groups = new Map<string | undefined, OptionItem[]>();\n\n      for (const opt of opts) {\n        const key = opt.group;\n\n        if (!groups.has(key)) groups.set(key, []);\n\n        groups.get(key)!.push(opt);\n      }\n\n      let globalIdx = 0;\n\n      for (const [groupLabel, groupOpts] of groups) {\n        if (groupLabel !== undefined) flat.push({ label: groupLabel, type: 'group' });\n\n        for (const opt of groupOpts) flat.push({ idx: globalIdx++, opt, type: 'option' });\n      }\n\n      return flat;\n    }\n\n    const flatRows = computed(() => buildFlatList(options.value));\n\n    function getLabelForValue(value: string): string {\n      return options.value.find((option) => option.value === value)?.label ?? value;\n    }\n\n    function emitChange(originalEvent?: Event): void {\n      const values = selectedValues.value;\n      const labels = values.map((value) => getLabelForValue(value));\n\n      emit('change', createChoiceChangeDetail(values, labels, originalEvent));\n    }\n\n    function removeChip(event: Event): void {\n      event.stopPropagation();\n\n      const value = (event as CustomEvent<{ value?: string }>).detail?.value;\n\n      if (value === undefined) return;\n\n      selectedValues.value = selectedValues.value.filter((v) => v !== value);\n      emitChange(event);\n      triggerValidation('change');\n    }\n\n    // ============================================\n    // Dropdown positioning (shared positioner)\n    // ============================================\n    const positioner = createDropdownPositioner(\n      () => triggerEl,\n      () => dropdownEl,\n    );\n\n    const listNavigation = createListNavigation<OptionItem>({\n      getIndex: () => focusedIndex.value,\n      getItems: () => options.value,\n      isItemDisabled: (option) => option.disabled,\n      setIndex: (index) => {\n        focusedIndex.value = index;\n        scrollFocusedIntoView();\n      },\n    });\n\n    const overlay = createOverlayControl({\n      getBoundaryElement: () => host,\n      getPanelElement: () => dropdownEl,\n      getTriggerElement: () => triggerEl,\n      isDisabled: () => Boolean(props.disabled.value),\n      isOpen: () => isOpen.value,\n      positioner: {\n        floating: () => dropdownEl,\n        reference: () => triggerEl,\n        update: () => positioner.updatePosition(),\n      },\n      setOpen: (next) => {\n        isOpen.value = next;\n\n        if (!next) listNavigation.reset();\n      },\n    });\n\n    // ============================================\n    // Open / Close\n    // ============================================\n    function open() {\n      overlay.open();\n\n      requestAnimationFrame(() => {\n        const selectedIndex =\n          selectedValues.value.length > 0\n            ? options.value.findIndex((option) => option.value === selectedValues.value[0])\n            : 0;\n\n        listNavigation.set(selectedIndex >= 0 ? selectedIndex : 0);\n      });\n    }\n\n    function close(reason: 'escape' | 'programmatic' = 'programmatic') {\n      overlay.close({ reason });\n      triggerValidation('blur');\n    }\n    // ============================================\n    // Selection\n    // ============================================\n    function selectOption(opt: OptionItem, e?: Event) {\n      if (opt.disabled) return;\n\n      if (props.multiple.value) {\n        selectedValues.value = selectedValues.value.includes(opt.value)\n          ? selectedValues.value.filter((entry) => entry !== opt.value)\n          : [...selectedValues.value, opt.value];\n      } else {\n        selectedValues.value = [opt.value];\n        close();\n      }\n\n      emitChange(e);\n      triggerValidation('change');\n    }\n    // ============================================\n    // Keyboard navigation\n    // ============================================\n    function scrollFocusedIntoView() {\n      const idx = focusedIndex.value;\n\n      if (idx >= 0) {\n        const focusedOptionEl = dropdownEl?.querySelector<HTMLElement>(`#${selectId}-opt-${idx}`);\n\n        focusedOptionEl?.scrollIntoView({ block: 'nearest' });\n\n        return;\n      }\n\n      if (!dropdownEl) return;\n\n      const focusedEl = dropdownEl.querySelector<HTMLElement>('[data-focused]');\n\n      focusedEl?.scrollIntoView({ block: 'nearest' });\n    }\n    function handleTriggerKeydown(e: KeyboardEvent) {\n      if (props.disabled.value) return;\n\n      const opts = options.value;\n\n      switch (e.key) {\n        case ' ':\n        case 'Enter':\n          e.preventDefault();\n\n          if (isOpen.value) {\n            const idx = focusedIndex.value;\n\n            if (idx >= 0 && idx < opts.length) selectOption(opts[idx], e);\n          } else {\n            open();\n          }\n\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n\n          if (!isOpen.value) {\n            open();\n          } else {\n            listNavigation.next();\n          }\n\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n\n          if (!isOpen.value) {\n            open();\n          } else {\n            listNavigation.prev();\n          }\n\n          break;\n        case 'End':\n          if (isOpen.value) {\n            e.preventDefault();\n            listNavigation.last();\n          }\n\n          break;\n        case 'Escape':\n          e.preventDefault();\n          close('escape');\n          break;\n        case 'Home':\n          if (isOpen.value) {\n            e.preventDefault();\n            listNavigation.first();\n          }\n\n          break;\n        case 'Tab':\n          close();\n          break;\n      }\n    }\n    onMount(() => {\n      onSlotChange('default', readOptions);\n      // Ensure initial light-DOM <option>/<optgroup> content is available immediately.\n      readOptions();\n      mountLabelSyncStandalone(labelInsetRef, labelOutsideRef, props);\n\n      if (triggerEl) {\n        aria(triggerEl, {\n          activedescendant: () => (focusedIndex.value >= 0 ? `${selectId}-opt-${focusedIndex.value}` : null),\n          disabled: () => props.disabled.value,\n          expanded: () => (isOpen.value ? 'true' : 'false'),\n          invalid: () => !!props.error.value,\n          labelledby: () => (hasLabel.value ? labelId : null),\n        });\n      }\n\n      const removeOutsideClick = overlay.bindOutsideClick(document);\n\n      return () => {\n        positioner.destroy();\n        removeOutsideClick();\n      };\n    });\n\n    return html`<slot style=\"display:none\"></slot>\n      <div class=\"select-wrapper\">\n        <label class=\"label-outside\" id=\"${labelId}\" ref=${labelOutsideRef} hidden></label>\n        <div\n          class=\"field\"\n          ref=${(el: HTMLElement) => {\n            triggerEl = el;\n          }}\n          role=\"combobox\"\n          tabindex=${() => (props.disabled.value ? '-1' : '0')}\n          aria-controls=\"${listboxId}\"\n          aria-expanded=\"false\"\n          aria-labelledby=\"${labelId}\"\n          @click=${(e: MouseEvent) => {\n            e.stopPropagation();\n\n            if (isOpen.value) close();\n            else open();\n          }}\n          @keydown=${handleTriggerKeydown}>\n          <label class=\"label-inset\" id=\"${labelId}\" ref=${labelInsetRef} hidden></label>\n          <div class=\"trigger-row\">\n            <div class=\"chips-row\" ?hidden=${() => !showChips.value}>\n              ${() =>\n                selectedChipItems.value.map(\n                  (item) => html`\n                    <bit-chip\n                      value=${item.value}\n                      aria-label=${item.label}\n                      mode=\"removable\"\n                      variant=\"flat\"\n                      size=\"sm\"\n                      color=${() => props.color.value}\n                      @remove=${removeChip}>\n                      ${item.label}\n                    </bit-chip>\n                  `,\n                )}\n            </div>\n            <span\n              class=\"trigger-value ${() => (displayLabel.value ? '' : 'trigger-placeholder')}\"\n              ?hidden=${() => showChips.value}\n              >${() => triggerText.value}</span\n            >\n          </div>\n          <span class=\"trigger-icon\" aria-hidden=\"true\">\n            ${chevronDownIcon}\n            <span class=\"loader\" aria-label=\"Loading\"></span>\n          </span>\n        </div>\n        <div\n          class=\"helper-text\"\n          aria-live=\"polite\"\n          ?hidden=${() => assistiveText.value.hidden}\n          style=${() => (assistiveText.value.isError ? 'color: var(--color-error);' : '')}>\n          ${() => assistiveText.value.text}\n        </div>\n      </div>\n      <div\n        class=\"dropdown\"\n        ?data-open=${() => isOpen.value}\n        role=\"listbox\"\n        id=\"${listboxId}\"\n        aria-label=\"Options\"\n        ref=${(el: HTMLElement) => {\n          dropdownEl = el;\n        }}>\n        <div class=\"dropdown-loading\" ?hidden=${() => !isLoading.value}>Loading…</div>\n        <div class=\"dropdown-empty\" ?hidden=${() => isLoading.value || options.value.length > 0}>No options</div>\n        <div class=\"options-list\" ?hidden=${() => isLoading.value || options.value.length === 0}>\n          ${() =>\n            flatRows.value.map((row) =>\n              row.type === 'group'\n                ? html`<div class=\"optgroup-label\" role=\"presentation\">${row.label}</div>`\n                : html`<div\n                    class=\"option\"\n                    role=\"option\"\n                    id=${`${selectId}-opt-${row.idx}`}\n                    data-option-index=${() => String(row.idx)}\n                    data-option-value=${row.opt.value}\n                    aria-selected=${() => String(selectedValues.value.includes(row.opt.value))}\n                    aria-disabled=${() => String(row.opt.disabled)}\n                    ?data-focused=${() => focusedIndex.value === row.idx}\n                    ?data-selected=${() => selectedValues.value.includes(row.opt.value)}\n                    ?data-disabled=${() => row.opt.disabled}\n                    @click=${(e: MouseEvent) => {\n                      e.stopPropagation();\n                      selectOption(row.opt, e);\n                    }}\n                    @pointerenter=${() => {\n                      focusedIndex.value = row.idx;\n                    }}>\n                    <span>${row.opt.label}</span>\n                    <span class=\"option-check\" aria-hidden=\"true\">${checkIcon}</span>\n                  </div>`,\n            )}\n        </div>\n      </div>`;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    sizeVariantMixin(FIELD_SIZE_PRESET),\n    ...formFieldMixins,\n    disabledLoadingMixin(),\n    forcedColorsFocusMixin('.field'),\n    componentStyles,\n  ],\n  tag: 'bit-select',\n});\n"],"mappings":"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"}

package/dist/separator.cjs

@@ -0,0 +1,26 @@
+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`
+      ${()=>e.label.value?n.html`
+              <div class="separator-wrapper" part="wrapper">
+                <hr
+                  class="separator"
+                  part="separator"
+                  :role="${()=>e.decorative.value?`none`:`separator`}"
+                  :aria-hidden="${()=>e.decorative.value?`true`:null}"
+                  :aria-orientation="${()=>e.orientation.value}" />
+                <span class="separator-label" part="label">${()=>e.label.value}</span>
+                <hr
+                  class="separator"
+                  part="separator"
+                  :role="${()=>e.decorative.value?`none`:`separator`}"
+                  :aria-hidden="${()=>e.decorative.value?`true`:null}" />
+              </div>
+            `:n.html`
+              <hr
+                class="separator"
+                part="separator"
+                :role="${()=>e.decorative.value?`none`:`separator`}"
+                :aria-hidden="${()=>e.decorative.value?`true`:null}"
+                :aria-orientation="${()=>e.orientation.value}" />
+            `}
+    `},styles:[e.colorThemeMixin,t.default],tag:`bit-separator`});exports.SEPARATOR_TAG=r;
+//# sourceMappingURL=separator.cjs.map

package/dist/separator.cjs.map

@@ -0,0 +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"}

package/dist/separator.js

@@ -0,0 +1,46 @@
+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";
+//#region src/content/separator/separator.ts
+var a = n({
+	props: {
+		color: i(void 0),
+		decorative: i(!0),
+		label: i(void 0),
+		orientation: i("horizontal")
+	},
+	setup({ props: e }) {
+		return r`
+      ${() => e.label.value ? r`
+              <div class="separator-wrapper" part="wrapper">
+                <hr
+                  class="separator"
+                  part="separator"
+                  :role="${() => e.decorative.value ? "none" : "separator"}"
+                  :aria-hidden="${() => e.decorative.value ? "true" : null}"
+                  :aria-orientation="${() => e.orientation.value}" />
+                <span class="separator-label" part="label">${() => e.label.value}</span>
+                <hr
+                  class="separator"
+                  part="separator"
+                  :role="${() => e.decorative.value ? "none" : "separator"}"
+                  :aria-hidden="${() => e.decorative.value ? "true" : null}" />
+              </div>
+            ` : r`
+              <hr
+                class="separator"
+                part="separator"
+                :role="${() => e.decorative.value ? "none" : "separator"}"
+                :aria-hidden="${() => e.decorative.value ? "true" : null}"
+                :aria-orientation="${() => e.orientation.value}" />
+            `}
+    `;
+	},
+	styles: [e, t],
+	tag: "bit-separator"
+});
+//#endregion
+export { a as SEPARATOR_TAG };
+
+//# sourceMappingURL=separator.js.map

package/dist/separator.js.map

@@ -0,0 +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"}

package/dist/sidebar.cjs

@@ -0,0 +1,69 @@
+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>
+          <button
+            class="toggle-btn"
+            part="toggle-btn"
+            type="button"
+            ?hidden=${()=>!r.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>
+          </button>
+        </div>
+        <div class="sidebar-content" part="content">
+          <slot></slot>
+        </div>
+        <div class="sidebar-footer" part="footer" ?hidden=${()=>!c.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}))}}">
+        <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">
+            <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>
+        </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`
+      <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}>
+        <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;
+//# sourceMappingURL=sidebar.cjs.map

package/dist/sidebar.cjs.map

@@ -0,0 +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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"}