@vielzeug/buildit 2.0.0 → 2.1.0

package/dist/select.js

@@ -1,102 +1,116 @@
-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 "./icon.js";
+import { disablableBundle as e, loadableBundle as t, roundableBundle as n, sizableBundle as r, themableBundle as i } from "./inputs/shared/bundles.js";
+import { sizeVariantMixin as a } from "./styles/mixins/shape.css.js";
+import { disabledLoadingMixin as o } from "./styles/mixins/states.css.js";
+import { forcedColorsFocusMixin as s } from "./styles/mixins/theme.css.js";
+import { formFieldMixins as c } from "./styles/index.js";
+import { S as l } from "./packages/craftit/dist/controls/field-control.js";
+import { n as u } from "./packages/craftit/dist/controls/list-control.js";
+import { n as d } from "./packages/craftit/dist/controls/list-key-control.js";
+import "./packages/craftit/dist/controls.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 { createDropdownPositioner as f } from "./inputs/shared/dom-sync/dropdown.js";
+import { FORM_CTX as p } from "./inputs/shared/form-context.js";
+import { mountFormContextSync as m } from "./inputs/shared/dom-sync/form-context.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({
+import { createChoiceChangeDetail as h } from "./inputs/shared/utils/choice-change.js";
+import { FIELD_SIZE_PRESET as g } from "./inputs/shared/design-presets.js";
+import { syncAria as ee } from "./utils/aria.js";
+import _ from "./inputs/select/select.css?inline.js";
+import { computed as v, define as y, html as b, inject as x, onCleanup as te, onMount as ne, signal as S, watch as C } from "@vielzeug/craftit";
+var w = y("bit-select", {
 	formAssociated: !0,
 	props: {
-		color: { default: void 0 },
-		disabled: { default: !1 },
+		...i,
+		...r,
+		...e,
+		...t,
+		...n,
 		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 }
+		fullwidth: !1,
+		helper: "",
+		label: "",
+		"label-placement": "inset",
+		multiple: !1,
+		name: "",
+		options: {
+			default: void 0,
+			reflect: !1
+		},
+		placeholder: "",
+		required: !1,
+		value: "",
+		variant: 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();
+	setup({ emit: e, host: t, props: n, shadowRoot: r, slots: i }) {
+		let a = S([]), o = S(!1), s = S(-1), c = v(() => !!n.loading.value);
+		function g(e) {
+			return {
+				disabled: !!e.disabled,
+				group: e.group,
+				label: e.label ?? e.value,
+				value: e.value
+			};
+		}
+		let _ = v(() => n.options.value?.map(g) ?? a.value), y = x(p, void 0);
+		m(t.el, y, n);
+		let w = l({
+			context: y,
+			disabled: n.disabled,
+			error: n.error,
+			getValue: (e) => e,
+			helper: n.helper,
+			label: n.label,
+			labelPlacement: n["label-placement"],
+			mapControlledValue: (e) => e,
+			multiple: n.multiple,
+			name: n.name,
+			prefix: "select",
+			value: n.value
+		}), T = w.assistive, { triggerValidation: E } = w, D = w.selectedItems, O = w.disabled;
+		t.bind("attr", {
+			"has-error": () => n.error.value ? !0 : void 0,
+			open: () => o.value ? !0 : void 0
+		});
+		let { fieldId: k, labelInsetId: A, labelInsetRef: re, labelOutsideId: j, labelOutsideRef: M } = w, N = `listbox-${k}`, P = null, F = null;
 		function I() {
-			let e = t.shadowRoot?.querySelector("slot");
+			let e = r?.querySelector("slot");
 			if (!e) return;
-			let n = e.assignedElements({ flatten: !0 }), r = [];
-			for (let e of n) if (e.tagName === "OPTION") {
+			let t = e.assignedElements({ flatten: !0 }), n = [];
+			for (let e of t) if (e.tagName === "OPTION") {
 				let t = e;
-				r.push({
+				n.push({
 					disabled: t.disabled,
 					label: t.text || t.value,
 					value: t.value
 				});
 			} else if (e.tagName === "OPTGROUP") {
-				let t = e, n = t.label;
+				let t = e, r = t.label;
 				for (let e of Array.from(t.querySelectorAll("option"))) {
 					let t = e;
-					r.push({
+					n.push({
 						disabled: t.disabled,
-						group: n,
+						group: r,
 						label: t.text || t.value,
 						value: t.value
 					});
 				}
 			}
-			f.value = r;
+			a.value = n;
 		}
-		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,
+		let L = v(() => {
+			if (D.value.length === 0) return "";
+			if (n.multiple.value && D.value.length > 1) return `${D.value.length} selected`;
+			let e = D.value[0];
+			return _.value.find((t) => t.value === e)?.label ?? e;
+		}), R = v(() => n.multiple.value ? D.value.map((e) => ({
+			label: _.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) {
+		})) : []), z = v(() => n.multiple.value && D.value.length > 0), B = v(() => L.value || n.placeholder.value || ""), V = v(() => !!n.label.value);
+		function H(e) {
 			let t = [], n = /* @__PURE__ */ new Map();
 			for (let t of e) {
 				let e = t.group;
@@ -116,202 +130,191 @@ var T = g({
 			}
 			return t;
 		}
-		let W = h(() => U(T.value));
-		function G(e) {
-			return T.value.find((t) => t.value === e)?.label ?? e;
+		let U = v(() => H(_.value));
+		function W(e) {
+			return _.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 G(t) {
+			let n = D.value;
+			e("change", h(n, n.map((e) => W(e)), t));
 		}
-		function q(e) {
+		function K(e) {
 			e.stopPropagation();
 			let t = e.detail?.value;
-			t !== void 0 && (r.value = r.value.filter((e) => e !== t), K(e), O("change"));
+			t !== void 0 && (w.removeValue(t), G(e), E("change"));
 		}
-		let J = c(() => M, () => N), Y = o({
-			getIndex: () => g.value,
-			getItems: () => T.value,
+		let q = f(() => P, () => F), J = u({
+			getIndex: () => s.value,
+			getItems: () => _.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();
+				s.value = e, $();
 			}
+		}), Y = d({
+			control: J,
+			disabled: () => !o.value
 		});
-		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 X(t = "programmatic") {
+			O.value || o.value || (o.value = !0, e("open", { reason: t }), requestAnimationFrame(() => q.updatePosition()), requestAnimationFrame(() => {
+				let e = D.value.length > 0 ? _.value.findIndex((e) => e.value === D.value[0]) : 0;
+				e >= 0 ? (s.value = e, $()) : s.value = 0;
+			}));
 		}
-		function Q(e = "programmatic") {
-			X.close({ reason: e }), O("blur");
+		function Z(t = "programmatic") {
+			o.value && (o.value = !1, J.reset(), e("close", { reason: t }), E("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 Q(e, t) {
+			e.disabled || (n.multiple.value ? w.toggleItem(e.value) : (w.selectItem(e.value), Z()), G(t), E("change"));
 		}
-		function oe() {
-			let e = g.value;
+		function $() {
+			let e = s.value;
 			if (e >= 0) {
-				(N?.querySelector(`#${k}-opt-${e}`))?.scrollIntoView({ block: "nearest" });
+				(F?.querySelector(`#${k}-opt-${e}`))?.scrollIntoView({ block: "nearest" });
 				return;
 			}
-			N && N.querySelector("[data-focused]")?.scrollIntoView({ block: "nearest" });
+			F && F.querySelector("[data-focused]")?.scrollIntoView({ block: "nearest" });
 		}
-		function se(e) {
-			if (n.disabled.value) return;
-			let t = T.value;
-			switch (e.key) {
+		function ie(e) {
+			if (!O.value && !(o.value && Y.handleKeydown(e))) 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();
+					if (e.preventDefault(), o.value) {
+						let t = s.value, n = _.value;
+						t >= 0 && t < n.length && Q(n[t], e);
+					} else X("trigger");
 					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());
+					o.value || (e.preventDefault(), X("trigger"));
 					break;
 				case "Escape":
-					e.preventDefault(), Q("escape");
-					break;
-				case "Home":
-					p.value && (e.preventDefault(), Y.first());
+					e.preventDefault(), Z("escape");
 					break;
 				case "Tab":
-					Q();
+					Z();
 					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();
+		return ne(() => {
+			if (C(i.elements(), () => I(), { immediate: !0 }), P) {
+				let e = (e) => {
+					e.stopPropagation(), !O.value && (o.value ? Z("trigger") : X("trigger"));
+				}, t = (e) => {
+					ie(e);
+				};
+				P.addEventListener("click", e), P.addEventListener("keydown", t), ee(P, {
+					activedescendant: () => s.value >= 0 ? `${k}-opt-${s.value}` : null,
+					disabled: () => O.value,
+					expanded: () => o.value ? "true" : "false",
+					invalid: () => !!n.error.value,
+					labelledby: () => V.value ? `${j} ${A}` : null
+				}), te(() => {
+					P?.removeEventListener("click", e), P?.removeEventListener("keydown", t);
+				});
+			}
+			let e = (e) => {
+				if (!o.value) return;
+				let n = e.composedPath();
+				n.includes(t.el) || F && n.includes(F) || P && n.includes(P) || Z("outside-click");
 			};
-		}), _`<slot style="display:none"></slot>
+			return document.addEventListener("click", e), () => {
+				q.destroy(), document.removeEventListener("click", e);
+			};
+		}), b`<slot style="display:none"></slot>
       <div class="select-wrapper">
-        <label class="label-outside" id="${A}" ref=${P} hidden></label>
+        <label class="label-outside" id="${j}" ref=${M} hidden></label>
         <div
           class="field"
           ref=${(e) => {
-			M = e;
+			P = e;
 		}}
           role="combobox"
-          tabindex=${() => n.disabled.value ? "-1" : "0"}
-          aria-controls="${j}"
+          tabindex=${() => O.value ? "-1" : "0"}
+          aria-controls="${N}"
           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>
+          aria-labelledby="${j} ${A}">
+          <label class="label-inset" id="${A}" ref=${re} hidden></label>
           <div class="trigger-row">
-            <div class="chips-row" ?hidden=${() => !B.value}>
-              ${() => R.value.map((e) => _`
+            <div class="chips-row" ?hidden=${() => !z.value}>
+              ${() => R.value.map((e) => b`
                     <bit-chip
                       value=${e.value}
-                      aria-label=${e.label}
+                      label=${e.label}
                       mode="removable"
                       variant="flat"
                       size="sm"
                       color=${() => n.color.value}
-                      @remove=${q}>
+                      @remove=${K}>
                       ${e.label}
                     </bit-chip>
                   `)}
             </div>
             <span
               class="trigger-value ${() => L.value ? "" : "trigger-placeholder"}"
-              ?hidden=${() => B.value}
-              >${() => V.value}</span
+              ?hidden=${() => z.value}
+              >${() => B.value}</span
             >
           </div>
           <span class="trigger-icon" aria-hidden="true">
-            ${a}
+            <bit-icon name="chevron-down" size="14" stroke-width="2" aria-hidden="true"></bit-icon>
             <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}
+          ?hidden=${() => T.value.hidden}
+          style=${() => T.value.isError ? "color: var(--color-error);" : ""}>
+          ${() => T.value.text}
         </div>
       </div>
       <div
         class="dropdown"
-        ?data-open=${() => p.value}
+        ?data-open=${() => o.value}
         role="listbox"
-        id="${j}"
+        id="${N}"
         aria-label="Options"
         ref=${(e) => {
-			N = e;
+			F = 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
+        <div class="dropdown-loading" ?hidden=${() => !c.value}>Loading…</div>
+        <div class="dropdown-empty" ?hidden=${() => c.value || _.value.length > 0}>No options</div>
+        <div class="options-list" ?hidden=${() => c.value || _.value.length === 0}>
+          ${() => U.value.map((e) => e.type === "group" ? b`<div class="optgroup-label" role="presentation">${e.label}</div>` : b`<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-selected=${() => String(D.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-focused=${() => s.value === e.idx}
+                    ?data-selected=${() => D.value.includes(e.opt.value)}
                     ?data-disabled=${() => e.opt.disabled}
                     @click=${(t) => {
-			t.stopPropagation(), $(e.opt, t);
+			t.stopPropagation(), Q(e.opt, t);
 		}}
                     @pointerenter=${() => {
-			g.value = e.idx;
+			s.value = e.idx;
 		}}>
                     <span>${e.opt.label}</span>
-                    <span class="option-check" aria-hidden="true">${i}</span>
+                    <span class="option-check" aria-hidden="true">
+                      <bit-icon name="check" size="14" stroke-width="2.5" aria-hidden="true"></bit-icon>
+                    </span>
                   </div>`)}
         </div>
       </div>`;
 	},
 	shadow: { delegatesFocus: !0 },
 	styles: [
-		e(f),
-		...r,
-		t(),
-		n(".field"),
-		p
-	],
-	tag: "bit-select"
+		a(g),
+		...c,
+		o(),
+		s(".field"),
+		_
+	]
 });
 //#endregion
-export { T as SELECT_TAG };
+export { w as SELECT_TAG };
 
 //# sourceMappingURL=select.js.map

package/dist/select.js.map

@@ -1 +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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"}
+{"version":3,"file":"select.js","names":[],"sources":["../src/inputs/select/select.ts"],"sourcesContent":["import type {\n  OverlayCloseDetail,\n  OverlayCloseReason,\n  OverlayOpenDetail,\n  OverlayOpenReason,\n} from '@vielzeug/craftit/controls';\n\nimport { define, computed, html, inject, onCleanup, onMount, signal, watch } from '@vielzeug/craftit';\nimport { createChoiceFieldControl, createListControl, createListKeyControl } from '@vielzeug/craftit/controls';\n\nimport type { VisualVariant } from '../../types';\n\nimport '../../feedback/chip/chip';\nimport '../../content/icon/icon';\nimport type { SelectableFieldProps } from '../shared/base-props';\n\nimport { disabledLoadingMixin, forcedColorsFocusMixin, formFieldMixins, sizeVariantMixin } from '../../styles';\nimport { syncAria } from '../../utils/aria';\nimport {\n  disablableBundle,\n  loadableBundle,\n  roundableBundle,\n  sizableBundle,\n  themableBundle,\n  type PropBundle,\n} from '../shared/bundles';\nimport { FIELD_SIZE_PRESET } from '../shared/design-presets';\nimport { createDropdownPositioner, mountFormContextSync } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\nimport { type ChoiceChangeDetail, createChoiceChangeDetail } from '../shared/utils';\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\nexport type BitSelectOptionInput = {\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  close: OverlayCloseDetail;\n  open: OverlayOpenDetail;\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?: BitSelectOptionInput[];\n  /** Mark the field as required */\n  required?: boolean;\n};\n\nconst selectProps = {\n  ...themableBundle,\n  ...sizableBundle,\n  ...disablableBundle,\n  ...loadableBundle,\n  ...roundableBundle,\n  error: { default: '' as string, omit: true },\n  fullwidth: false,\n  helper: '',\n  label: '',\n  'label-placement': 'inset',\n  multiple: false,\n  name: '',\n  options: { default: undefined as BitSelectOptionInput[] | undefined, reflect: false },\n  placeholder: '',\n  required: false,\n  value: '',\n  variant: undefined,\n} satisfies PropBundle<BitSelectProps>;\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 * @fires open - Fired when the dropdown opens. detail: { reason: 'trigger' | 'programmatic' }\n * @fires close - Fired when the dropdown closes. detail: { reason: 'escape' | 'outside-click' | 'programmatic' | 'trigger' }\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 = define<BitSelectProps, BitSelectEvents>('bit-select', {\n  formAssociated: true,\n  props: selectProps,\n  setup({ emit, host, props, shadowRoot, slots }) {\n    // ────────────────────────────────────────────────────────────────\n    // State & Context\n    // ────────────────────────────────────────────────────────────────\n\n    const slottedOptions = signal<OptionItem[]>([]);\n    const isOpen = signal(false);\n    const focusedIndex = signal(-1);\n    const isLoading = computed(() => Boolean(props.loading.value));\n\n    // Merged options: explicit prop value overrides slotted options\n    function normalizeOption(option: BitSelectOptionInput): OptionItem {\n      return {\n        disabled: Boolean(option.disabled),\n        group: option.group,\n        label: option.label ?? option.value,\n        value: option.value,\n      };\n    }\n\n    const options = computed(() => props.options.value?.map(normalizeOption) ?? slottedOptions.value);\n    const formCtx = inject(FORM_CTX, undefined);\n\n    mountFormContextSync(host.el, formCtx, props);\n\n    const choice = createChoiceFieldControl<string>({\n      context: formCtx,\n      disabled: props.disabled,\n      error: props.error,\n      getValue: (value) => value,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      mapControlledValue: (value) => value,\n      multiple: props.multiple,\n      name: props.name,\n      prefix: 'select',\n      value: props.value,\n    });\n    const assistiveText = choice.assistive;\n    const { triggerValidation } = choice;\n    const selectedValues = choice.selectedItems;\n    const isDisabled = choice.disabled;\n\n    // ────────────────────────────────────────────────────────────────\n    // DOM State Sync\n    // ────────────────────────────────────────────────────────────────\n\n    // Sync host attributes for CSS hooks\n    host.bind('attr', {\n      'has-error': () => (props.error.value ? true : undefined),\n      open: () => (isOpen.value ? true : undefined),\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Accessibility & DOM References\n    // ────────────────────────────────────────────────────────────────\n\n    const { fieldId: selectId, labelInsetId, labelInsetRef, labelOutsideId, labelOutsideRef } = choice;\n    const listboxId = `listbox-${selectId}`;\n\n    let triggerEl: HTMLElement | null = null;\n    let dropdownEl: HTMLElement | null = null;\n\n    // ────────────────────────────────────────────────────────────────\n    // Option Reading from Slot\n    // ────────────────────────────────────────────────────────────────\n\n    function readOptions() {\n      const slot = 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\n      slottedOptions.value = items;\n    }\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 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      choice.removeValue(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 = createListControl<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 openListKeys = createListKeyControl({\n      control: listNavigation,\n      disabled: () => !isOpen.value,\n    });\n\n    // ============================================\n    // Open / Close\n    // ============================================\n    function open(reason: OverlayOpenReason = 'programmatic') {\n      if (isDisabled.value || isOpen.value) return;\n\n      isOpen.value = true;\n      emit('open', { reason });\n      requestAnimationFrame(() => positioner.updatePosition());\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        if (selectedIndex >= 0) {\n          focusedIndex.value = selectedIndex;\n          scrollFocusedIntoView();\n        } else {\n          focusedIndex.value = 0;\n        }\n      });\n    }\n\n    function close(reason: OverlayCloseReason = 'programmatic') {\n      if (!isOpen.value) return;\n\n      isOpen.value = false;\n      listNavigation.reset();\n      emit('close', { reason });\n\n      triggerValidation('blur');\n    }\n\n    // ============================================\n    // Selection\n    // ============================================\n    function selectOption(opt: OptionItem, e?: Event) {\n      if (opt.disabled) return;\n\n      if (props.multiple.value) {\n        choice.toggleItem(opt.value);\n      } else {\n        choice.selectItem(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 (isDisabled.value) return;\n\n      if (isOpen.value && openListKeys.handleKeydown(e)) return;\n\n      switch (e.key) {\n        case ' ':\n        case 'Enter':\n          e.preventDefault();\n\n          if (isOpen.value) {\n            const idx = focusedIndex.value;\n            const opts = options.value;\n\n            if (idx >= 0 && idx < opts.length) selectOption(opts[idx], e);\n          } else {\n            open('trigger');\n          }\n\n          break;\n        case 'ArrowDown':\n        case 'ArrowUp':\n          if (!isOpen.value) {\n            e.preventDefault();\n            open('trigger');\n          }\n\n          break;\n        case 'Escape':\n          e.preventDefault();\n          close('escape');\n          break;\n        case 'Tab':\n          close();\n          break;\n      }\n    }\n\n    onMount(() => {\n      watch(slots.elements(), () => readOptions(), { immediate: true });\n\n      if (triggerEl) {\n        const onTriggerClick = (event: MouseEvent) => {\n          event.stopPropagation();\n\n          if (isDisabled.value) return;\n\n          if (isOpen.value) close('trigger');\n          else open('trigger');\n        };\n        const onTriggerKeydown = (event: KeyboardEvent) => {\n          handleTriggerKeydown(event);\n        };\n\n        triggerEl.addEventListener('click', onTriggerClick);\n        triggerEl.addEventListener('keydown', onTriggerKeydown);\n\n        syncAria(triggerEl, {\n          activedescendant: () => (focusedIndex.value >= 0 ? `${selectId}-opt-${focusedIndex.value}` : null),\n          disabled: () => isDisabled.value,\n          expanded: () => (isOpen.value ? 'true' : 'false'),\n          invalid: () => !!props.error.value,\n          labelledby: () => (hasLabel.value ? `${labelOutsideId} ${labelInsetId}` : null),\n        });\n\n        onCleanup(() => {\n          triggerEl?.removeEventListener('click', onTriggerClick);\n          triggerEl?.removeEventListener('keydown', onTriggerKeydown);\n        });\n      }\n\n      const onDocumentClick = (event: Event) => {\n        if (!isOpen.value) return;\n\n        const path = event.composedPath();\n\n        if (\n          path.includes(host.el) ||\n          (dropdownEl && path.includes(dropdownEl)) ||\n          (triggerEl && path.includes(triggerEl))\n        ) {\n          return;\n        }\n\n        close('outside-click');\n      };\n\n      document.addEventListener('click', onDocumentClick);\n\n      return () => {\n        positioner.destroy();\n        document.removeEventListener('click', onDocumentClick);\n      };\n    });\n\n    return html`<slot style=\"display:none\"></slot>\n      <div class=\"select-wrapper\">\n        <label class=\"label-outside\" id=\"${labelOutsideId}\" ref=${labelOutsideRef} hidden></label>\n        <div\n          class=\"field\"\n          ref=${(el: HTMLElement) => {\n            triggerEl = el;\n          }}\n          role=\"combobox\"\n          tabindex=${() => (isDisabled.value ? '-1' : '0')}\n          aria-controls=\"${listboxId}\"\n          aria-expanded=\"false\"\n          aria-labelledby=\"${labelOutsideId} ${labelInsetId}\">\n          <label class=\"label-inset\" id=\"${labelInsetId}\" 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                      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            <bit-icon name=\"chevron-down\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></bit-icon>\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\">\n                      <bit-icon name=\"check\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></bit-icon>\n                    </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});\n"],"mappings":"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"}