@vielzeug/refine 1.1.3 → 1.3.1

package/dist/select.js

@@ -3,13 +3,15 @@ import { disablableBundle as t, loadableBundle as n, roundableBundle as r, sizab
 import { lifecycleSignal as o } from "./headless/ore.js";
 import { createChoiceField as s } from "./headless/choice-field.js";
 import { createOptionList as c } from "./headless/option-list.js";
-import { FORM_CTX as l, useFormContext as u } from "./inputs/shared/form-context.js";
-import d from "./inputs/select/select.css?inline.js";
-import { define as f, html as p, inject as m, prop as h, useField as g } from "@vielzeug/ore";
-import { computed as _, effect as v, signal as y, watch as b } from "@vielzeug/ripple";
+import { useField as l } from "./ore/dist/forms/field.js";
+import "./ore/dist/forms.js";
+import { FORM_CTX as u, useFormContext as d } from "./inputs/shared/form-context.js";
+import f from "./inputs/select/select.css.js";
+import { bind as p, define as m, getHost as h, html as g, inject as _, onCleanup as v, onMounted as y, prop as b, useEmit as x, useSlots as S } from "@vielzeug/ore";
+import { computed as C, effect as w, signal as T, watch as E } from "@vielzeug/ripple";
 //#region src/inputs/select/select.ts
-var x = "ore-select";
-f(x, {
+var D = "ore-select";
+m(D, {
 	formAssociated: !0,
 	props: {
 		...a,
@@ -17,22 +19,22 @@ f(x, {
 		...t,
 		...n,
 		...r,
-		error: h.string(),
-		fullwidth: h.bool(!1),
-		helper: h.string(),
-		label: h.string(),
-		"label-placement": h.oneOf(["inset", "outside"], "inset"),
-		multiple: h.bool(!1),
-		name: h.string(),
-		options: h.json(void 0),
-		placeholder: h.string(),
-		required: h.bool(!1),
-		value: h.string(),
-		variant: h.string()
+		error: b.string(),
+		fullwidth: b.bool(!1),
+		helper: b.string(),
+		label: b.string(),
+		"label-placement": b.oneOf(["inset", "outside"], "inset"),
+		multiple: b.bool(!1),
+		name: b.string(),
+		options: b.json(void 0),
+		placeholder: b.string(),
+		required: b.bool(!1),
+		value: b.string(),
+		variant: b.string()
 	},
-	setup(e, { bind: t, el: n, emit: r, onCleanup: i, onMounted: a, slots: d }) {
-		let f = n.shadowRoot, h = y([]), x = _(() => !!e.loading.value);
-		function S(e) {
+	setup(e) {
+		let t = h(), n = x(), r = S(), i = t.shadowRoot, a = T([]), f = C(() => !!e.loading.value);
+		function m(e) {
 			return {
 				disabled: !!e.disabled,
 				group: e.group,
@@ -40,49 +42,49 @@ f(x, {
 				value: e.value
 			};
 		}
-		let C = _(() => {
+		let b = C(() => {
 			let t = e.options.value;
-			return Array.isArray(t) ? t.map(S) : h.value;
-		}), w = m(l), T = u(t, e, w), E = null, D = null, O = o(i), k = null, A = s({
-			disabled: T.disabled,
+			return Array.isArray(t) ? t.map(m) : a.value;
+		}), D = _(u), O = d(e, D), k = null, A = null, j = o(v), M = null, N = s({
+			disabled: O.disabled,
 			error: e.error,
-			getFormField: () => k,
+			getFormField: () => M,
 			helper: e.helper,
 			label: e.label,
 			labelPlacement: e["label-placement"],
 			multiple: e.multiple,
 			prefix: "select",
-			signal: O,
-			validateOn: w?.validateOn,
+			signal: j,
+			validateOn: D?.validateOn,
 			value: e.value
 		});
-		k = g({
-			disabled: A.disabled,
+		M = l({
+			disabled: N.disabled,
 			toFormValue: (e) => e,
-			value: A.formValue
+			value: N.formValue
 		});
-		let j = c({
-			getBoundary: () => n,
-			getFocusedOptionElement: () => D?.querySelector("[data-focused]") ?? null,
-			getItems: () => C.value,
-			getPanel: () => D,
-			getReference: () => E,
-			getTrigger: () => E,
-			isDisabled: () => A.disabled.value,
+		let P = c({
+			getBoundary: () => t,
+			getFocusedOptionElement: () => A?.querySelector("[data-focused]") ?? null,
+			getItems: () => b.value,
+			getPanel: () => A,
+			getReference: () => k,
+			getTrigger: () => k,
+			isDisabled: () => N.disabled.value,
 			onClose: (e) => {
-				r("close", { reason: e }), A.triggerValidation("blur");
+				n("close", { reason: e }), N.triggerValidation("blur");
 			},
-			onOpen: (e) => r("open", { reason: e }),
-			signal: O
-		}), { triggerValidation: M } = A, N = A.selectedValues, P = A.disabled, { fieldId: F } = A, I = `listbox-${F}`, { focusedIndex: L, isOpen: R } = j;
-		t({ attr: {
+			onOpen: (e) => n("open", { reason: e }),
+			signal: j
+		}), { triggerValidation: F } = N, I = N.selectedValues, L = N.disabled, { fieldId: R } = N, z = `listbox-${R}`, { focusedIndex: B, isOpen: V } = P;
+		p({ attr: {
 			"has-error": () => e.error.value ? !0 : void 0,
-			open: () => R.value ? !0 : void 0,
-			size: T.size,
-			variant: T.variant
+			open: () => V.value ? !0 : void 0,
+			size: O.size,
+			variant: O.variant
 		} });
-		function z() {
-			let e = f?.querySelector("slot");
+		function H() {
+			let e = i?.querySelector("slot");
 			if (!e) return;
 			let t = e.assignedElements({ flatten: !0 }), n = [];
 			for (let e of t) if (e.tagName === "OPTION") {
@@ -104,18 +106,18 @@ f(x, {
 					});
 				}
 			}
-			h.value = n;
+			a.value = n;
 		}
-		let B = _(() => {
-			if (N.value.length === 0) return "";
-			if (e.multiple.value && N.value.length > 1) return `${N.value.length} selected`;
-			let t = N.value[0];
-			return C.value.find((e) => e.value === t)?.label ?? t;
-		}), V = _(() => e.multiple.value ? N.value.map((e) => ({
-			label: C.value.find((t) => t.value === e)?.label ?? e,
+		let U = C(() => {
+			if (I.value.length === 0) return "";
+			if (e.multiple.value && I.value.length > 1) return `${I.value.length} selected`;
+			let t = I.value[0];
+			return b.value.find((e) => e.value === t)?.label ?? t;
+		}), W = C(() => e.multiple.value ? I.value.map((e) => ({
+			label: b.value.find((t) => t.value === e)?.label ?? e,
 			value: e
-		})) : []), H = _(() => e.multiple.value && N.value.length > 0), U = _(() => B.value || e.placeholder.value || "");
-		function W(e) {
+		})) : []), G = C(() => e.multiple.value && I.value.length > 0), K = C(() => U.value || e.placeholder.value || "");
+		function q(e) {
 			let t = [], n = /* @__PURE__ */ new Map();
 			for (let t of e) {
 				let e = t.group, r = n.get(e);
@@ -135,14 +137,14 @@ f(x, {
 			}
 			return t;
 		}
-		let G = _(() => W(C.value));
-		function K(e) {
-			return C.value.find((t) => t.value === e)?.label ?? e;
+		let J = C(() => q(b.value));
+		function Y(e) {
+			return b.value.find((t) => t.value === e)?.label ?? e;
 		}
-		function q(e) {
-			let t = N.value;
-			r("change", {
-				labels: t.map((e) => K(e)),
+		function X(e) {
+			let t = I.value, r = t.map((e) => Y(e));
+			n("change", {
+				labels: r,
 				originalEvent: e,
 				values: t
 			});
@@ -150,80 +152,80 @@ f(x, {
 		function ee(e) {
 			e.stopPropagation();
 			let t = e.detail?.value;
-			t !== void 0 && (A.removeValue(t), q(e), M("change"));
+			t !== void 0 && (N.removeValue(t), X(e), F("change"));
 		}
-		function J(e = "programmatic") {
-			j.open(e), requestAnimationFrame(() => {
-				let e = N.value.length > 0 ? C.value.findIndex((e) => e.value === N.value[0]) : -1;
+		function Z(e = "programmatic") {
+			P.open(e), requestAnimationFrame(() => {
+				let e = I.value.length > 0 ? b.value.findIndex((e) => e.value === I.value[0]) : -1;
 				if (e >= 0) {
-					j.set(e);
+					P.set(e);
 					return;
 				}
-				j.navigate("first");
+				P.navigate("first");
 			});
 		}
-		function Y(t, n) {
-			t.disabled || (e.multiple.value ? A.toggleValue(t.value) : (A.selectValue(t.value), j.close()), q(n), M("change"));
+		function Q(t, n) {
+			t.disabled || (e.multiple.value ? N.toggleValue(t.value) : (N.selectValue(t.value), P.close()), X(n), F("change"));
 		}
-		function X(e) {
-			if (!P.value && !j.handleKeydown(e)) switch (e.key) {
+		function $(e) {
+			if (!L.value && !P.handleKeydown(e)) switch (e.key) {
 				case " ":
 				case "Enter":
-					if (e.preventDefault(), R.value) {
-						let t = L.value, n = C.value;
-						t >= 0 && t < n.length && Y(n[t], e);
-					} else J("keyboard");
+					if (e.preventDefault(), V.value) {
+						let t = B.value, n = b.value;
+						t >= 0 && t < n.length && Q(n[t], e);
+					} else Z("keyboard");
 					break;
 				case "Tab":
-					j.close();
+					P.close();
 					break;
 			}
 		}
-		let Z = () => U.value, Q = () => e.label.value ?? "", $ = () => e.placeholder.value ?? "", te = () => e["label-placement"].value ?? "inset", ne = () => e.color?.value ?? void 0, re = () => T.size?.value ?? void 0, ie = () => T.variant?.value ?? void 0, ae = () => e.rounded?.value ?? void 0, oe = () => e.helper.value ?? "", se = () => e.error.value ?? "", ce = () => P.value ? !0 : void 0, le = () => e.required.value ? !0 : void 0, ue = () => e.fullwidth.value ? !0 : void 0, de = () => e.loading.value ? !0 : void 0, fe = () => P.value ? "-1" : "0";
-		b(d.elements(), () => z(), { immediate: !0 });
-		let pe = v(() => {
-			R.value ? D && "showPopover" in D && !D.matches(":popover-open") && D.showPopover() : D && "hidePopover" in D && D.matches(":popover-open") && D.hidePopover();
+		let te = () => K.value, ne = () => e.label.value ?? "", re = () => e.placeholder.value ?? "", ie = () => e["label-placement"].value ?? "inset", ae = () => e.color?.value ?? void 0, oe = () => O.size?.value ?? void 0, se = () => O.variant?.value ?? void 0, ce = () => e.rounded?.value ?? void 0, le = () => e.helper.value ?? "", ue = () => e.error.value ?? "", de = () => L.value ? !0 : void 0, fe = () => e.required.value ? !0 : void 0, pe = () => e.fullwidth.value ? !0 : void 0, me = () => e.loading.value ? !0 : void 0, he = () => L.value ? "-1" : "0";
+		E(r.elements(), () => H(), { immediate: !0 });
+		let ge = w(() => {
+			V.value ? A && "showPopover" in A && !A.matches(":popover-open") && A.showPopover() : A && "hidePopover" in A && A.matches(":popover-open") && A.hidePopover();
 		});
-		return i(() => pe.dispose()), a(() => {
+		return v(() => ge.dispose()), y(() => {
 			let e = null, t = null;
-			return E && (e = (e) => {
-				e.stopPropagation(), !P.value && (R.value ? j.close("trigger") : J("click"));
+			return k && (e = (e) => {
+				e.stopPropagation(), !L.value && (V.value ? P.close("trigger") : Z("click"));
 			}, t = (e) => {
-				X(e);
-			}, E.addEventListener("click", e), E.addEventListener("keydown", t)), () => {
-				E && e && E.removeEventListener("click", e), E && t && E.removeEventListener("keydown", t);
+				$(e);
+			}, k.addEventListener("click", e), k.addEventListener("keydown", t)), () => {
+				k && e && k.removeEventListener("click", e), k && t && k.removeEventListener("keydown", t);
 			};
-		}), p`<slot style="display:none"></slot>
+		}), g`<slot style="display:none"></slot>
       <ore-input
         class="trigger"
         part="trigger"
         readonly
-        tabindex="${fe}"
+        tabindex="${he}"
         role="combobox"
         aria-haspopup="listbox"
-        aria-controls="${I}"
-        :aria-disabled="${() => P.value ? "true" : null}"
-        :aria-expanded="${() => String(R.value)}"
+        aria-controls="${z}"
+        :aria-disabled="${() => L.value ? "true" : null}"
+        :aria-expanded="${() => String(V.value)}"
         :aria-invalid="${() => e.error.value ? "true" : null}"
-        :value="${Z}"
-        :label="${Q}"
-        :placeholder="${$}"
-        :label-placement="${te}"
-        :color="${ne}"
-        :size="${re}"
-        :variant="${ie}"
-        :rounded="${ae}"
-        :helper="${oe}"
-        :error="${se}"
-        ?disabled="${ce}"
-        ?required="${le}"
-        ?fullwidth="${ue}"
-        ?loading="${de}"
+        :value="${te}"
+        :label="${ne}"
+        :placeholder="${re}"
+        :label-placement="${ie}"
+        :color="${ae}"
+        :size="${oe}"
+        :variant="${se}"
+        :rounded="${ce}"
+        :helper="${le}"
+        :error="${ue}"
+        ?disabled="${de}"
+        ?required="${fe}"
+        ?fullwidth="${pe}"
+        ?loading="${me}"
         ref="${(e) => {
-			E = e;
+			k = e;
 		}}">
-        <div slot="prefix" class="chips-row" ?hidden="${() => !H.value}">
-          ${() => V.value.map((t) => p`<ore-chip
+        <div slot="prefix" class="chips-row" ?hidden="${() => !G.value}">
+          ${() => W.value.map((t) => g`<ore-chip
                   value="${t.value}"
                   label="${t.label}"
                   mode="removable"
@@ -245,32 +247,32 @@ f(x, {
         class="dropdown"
         part="dropdown"
         popover="manual"
-        ?data-open="${R}"
+        ?data-open="${V}"
         role="listbox"
-        id="${I}"
+        id="${z}"
         aria-label="Options"
         ref="${(e) => {
-			D = e;
+			A = e;
 		}}">
-        <div class="dropdown-loading" ?hidden="${() => !x.value}">Loading…</div>
-        <div class="dropdown-empty" ?hidden="${() => x.value || C.value.length > 0}">No options</div>
-        <div class="options-list" ?hidden="${() => x.value || C.value.length === 0}">
-          ${() => G.value.map((e) => e.type === "group" ? p`<div class="optgroup-label" role="presentation">${e.label}</div>` : p`<div
+        <div class="dropdown-loading" ?hidden="${() => !f.value}">Loading…</div>
+        <div class="dropdown-empty" ?hidden="${() => f.value || b.value.length > 0}">No options</div>
+        <div class="options-list" ?hidden="${() => f.value || b.value.length === 0}">
+          ${() => J.value.map((e) => e.type === "group" ? g`<div class="optgroup-label" role="presentation">${e.label}</div>` : g`<div
                     class="option"
                     role="option"
-                    id="${`${F}-opt-${e.idx}`}"
+                    id="${`${R}-opt-${e.idx}`}"
                     data-option-index="${String(e.idx)}"
                     data-option-value="${e.opt.value}"
-                    aria-selected="${() => String(N.value.includes(e.opt.value))}"
+                    aria-selected="${() => String(I.value.includes(e.opt.value))}"
                     aria-disabled="${() => String(e.opt.disabled)}"
-                    ?data-focused="${() => L.value === e.idx}"
-                    ?data-selected="${() => N.value.includes(e.opt.value)}"
+                    ?data-focused="${() => B.value === e.idx}"
+                    ?data-selected="${() => I.value.includes(e.opt.value)}"
                     ?data-disabled="${() => e.opt.disabled}"
                     @click="${(t) => {
-			t.stopPropagation(), Y(e.opt, t);
+			t.stopPropagation(), Q(e.opt, t);
 		}}"
                     @pointerenter="${() => {
-			j.set(e.idx);
+			P.set(e.idx);
 		}}">
                     <span>${e.opt.label}</span>
                     <span class="option-check" aria-hidden="true">
@@ -281,9 +283,9 @@ f(x, {
       </div>`;
 	},
 	shadow: { delegatesFocus: !0 },
-	styles: [e, d]
+	styles: [e, f]
 });
 //#endregion
-export { x as SELECT_TAG };
+export { D 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 { define, useField, html, inject, prop } from '@vielzeug/ore';\nimport { computed, effect, signal, watch } from '@vielzeug/ripple';\n\nimport type { ChoiceChangeDetail, DropdownCloseReason, OverlayOpenDetail, OverlayOpenReason } from '../../headless';\nimport type { SelectableFieldProps } from '../../shared';\nimport type { VisualVariant } from '../../types';\n\nimport { lifecycleSignal, createChoiceField, createOptionList } from '../../headless';\nimport '../../feedback/chip/chip';\nimport '../../content/icon/icon';\nimport '../input/input';\nimport { disablableBundle, loadableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { reducedMotionMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './select.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────\n\ntype OptionItem = {\n  disabled: boolean;\n  group?: string;\n  label: string;\n  value: string;\n};\n\nexport type OreSelectOptionInput = {\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// ── Styles ─────────────────────────────────────────────────────────────\n\n// ── Component Props ─────────────────────────────────────────────────────────────\n\n/** Select component properties */\n\nexport type OreSelectEvents = {\n  change: ChoiceChangeDetail;\n  close: { reason: DropdownCloseReason };\n  open: OverlayOpenDetail;\n};\n\nexport type OreSelectProps = SelectableFieldProps<Exclude<VisualVariant, '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?: OreSelectOptionInput[];\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 ore-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: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\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' | 'outsideClick' | '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 * @part trigger - The `ore-input` trigger element that opens the dropdown.\n * @part dropdown - The dropdown listbox panel container.\n *\n * @example\n * ```html\n * <ore-select label=\"Role\" value=\"admin\">\n *   <option value=\"admin\">Administrator</option>\n *   <option value=\"editor\">Editor</option>\n *   <option value=\"viewer\">Viewer</option>\n * </ore-select>\n *\n * <ore-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 * </ore-select>\n * ```\n */\nexport const SELECT_TAG = 'ore-select' as const;\ndefine<OreSelectProps, OreSelectEvents>(SELECT_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    ...roundableBundle,\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    multiple: prop.bool(false),\n    name: prop.string(),\n    options: prop.json(undefined as OreSelectOptionInput[] | undefined),\n    placeholder: prop.string(),\n    required: prop.bool(false),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n  setup(props, { bind, el, emit, onCleanup, onMounted, slots }) {\n    const shadowRoot = el.shadowRoot;\n    // ────────────────────────────────────────────────────────────────\n    // State & Context\n    // ────────────────────────────────────────────────────────────────\n\n    const slottedOptions = signal<OptionItem[]>([]);\n    const isLoading = computed(() => Boolean(props.loading.value));\n\n    // Merged options: explicit prop value overrides slotted options\n    function normalizeOption(option: OreSelectOptionInput): 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(() => {\n      const explicitOptions = props.options.value;\n\n      return Array.isArray(explicitOptions) ? explicitOptions.map(normalizeOption) : slottedOptions.value;\n    });\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(bind, props, formCtx);\n\n    let triggerEl: HTMLElement | null = null;\n    let dropdownEl: HTMLElement | null = null;\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    let _formField: { reportValidity(): void } | null = null;\n    const choice = createChoiceField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      getFormField: () => _formField,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      multiple: props.multiple,\n      prefix: 'select',\n      signal: abortSignal,\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    _formField = useField<string>({ disabled: choice.disabled, toFormValue: (v) => v, value: choice.formValue });\n\n    const optionList = createOptionList<OptionItem>({\n      getBoundary: () => el,\n      getFocusedOptionElement: () => dropdownEl?.querySelector<HTMLElement>('[data-focused]') ?? null,\n      getItems: () => options.value,\n      getPanel: () => dropdownEl,\n      getReference: () => triggerEl,\n      getTrigger: () => triggerEl,\n      isDisabled: () => choice.disabled.value,\n      onClose: (reason) => {\n        emit('close', { reason });\n        choice.triggerValidation('blur');\n      },\n      onOpen: (reason) => emit('open', { reason }),\n      signal: abortSignal,\n    });\n\n    const { triggerValidation } = choice;\n    const selectedValues = choice.selectedValues;\n    const isDisabled = choice.disabled;\n\n    const { fieldId: selectId } = choice;\n    const listboxId = `listbox-${selectId}`;\n    const { focusedIndex, isOpen } = optionList;\n\n    // Sync host attributes for CSS hooks\n    bind({\n      attr: {\n        'has-error': () => (props.error.value ? true : undefined),\n        open: () => (isOpen.value ? true : undefined),\n        size: fCtxProps.size,\n        variant: fCtxProps.variant,\n      },\n    });\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\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        let group = groups.get(key);\n\n        if (!group) {\n          group = [];\n          groups.set(key, group);\n        }\n\n        group.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', { labels, originalEvent, values });\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    function openPopup(reason: OverlayOpenReason = 'programmatic') {\n      optionList.open(reason);\n\n      requestAnimationFrame(() => {\n        const selectedIndex =\n          selectedValues.value.length > 0\n            ? options.value.findIndex((option) => option.value === selectedValues.value[0])\n            : -1;\n\n        if (selectedIndex >= 0) {\n          optionList.set(selectedIndex);\n\n          return;\n        }\n\n        optionList.navigate('first');\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.toggleValue(opt.value);\n      } else {\n        choice.selectValue(opt.value);\n        optionList.close();\n      }\n\n      emitChange(e);\n      triggerValidation('change');\n    }\n\n    // Keyboard navigation\n\n    function handleTriggerKeydown(e: KeyboardEvent) {\n      if (isDisabled.value) return;\n\n      // Let optionList handle arrow key navigation\n      if (optionList.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            openPopup('keyboard');\n          }\n\n          break;\n        case 'Tab':\n          optionList.close();\n          break;\n      }\n    }\n\n    // ore-input prop helpers\n    const inputValue = () => triggerText.value;\n    const inputLabel = () => props.label.value ?? '';\n    const inputPlaceholder = () => props.placeholder.value ?? '';\n    const inputLabelPlacement = () => props['label-placement'].value ?? 'inset';\n    const inputColor = () => props.color?.value ?? undefined;\n    const inputSize = () => fCtxProps.size?.value ?? undefined;\n    const inputVariant = () => fCtxProps.variant?.value ?? undefined;\n    const inputRounded = () => props.rounded?.value ?? undefined;\n    const inputHelper = () => props.helper.value ?? '';\n    const inputError = () => props.error.value ?? '';\n    const inputDisabled = () => (isDisabled.value ? true : undefined);\n    const inputRequired = () => (props.required.value ? true : undefined);\n    const inputFullwidth = () => (props.fullwidth.value ? true : undefined);\n    const inputLoading = () => (props.loading.value ? true : undefined);\n    const tabIndexAttr = () => (isDisabled.value ? '-1' : '0');\n\n    watch(slots.elements(), () => readOptions(), { immediate: true });\n\n    const stopPopoverSync = effect(() => {\n      if (isOpen.value) {\n        if (dropdownEl && 'showPopover' in dropdownEl && !dropdownEl.matches(':popover-open')) dropdownEl.showPopover();\n      } else {\n        if (dropdownEl && 'hidePopover' in dropdownEl && dropdownEl.matches(':popover-open')) dropdownEl.hidePopover();\n      }\n    });\n\n    onCleanup(() => stopPopoverSync.dispose());\n\n    onMounted(() => {\n      let onTriggerClick: ((event: MouseEvent) => void) | null = null;\n      let onTriggerKeydown: ((event: KeyboardEvent) => void) | null = null;\n\n      if (triggerEl) {\n        onTriggerClick = (event: MouseEvent) => {\n          event.stopPropagation();\n\n          if (isDisabled.value) return;\n\n          if (isOpen.value) optionList.close('trigger');\n          else openPopup('click');\n        };\n        onTriggerKeydown = (event: KeyboardEvent) => {\n          handleTriggerKeydown(event);\n        };\n\n        triggerEl.addEventListener('click', onTriggerClick);\n        triggerEl.addEventListener('keydown', onTriggerKeydown);\n      }\n\n      return () => {\n        if (triggerEl && onTriggerClick) triggerEl.removeEventListener('click', onTriggerClick);\n\n        if (triggerEl && onTriggerKeydown) triggerEl.removeEventListener('keydown', onTriggerKeydown);\n      };\n    });\n\n    return html`<slot style=\"display:none\"></slot>\n      <ore-input\n        class=\"trigger\"\n        part=\"trigger\"\n        readonly\n        tabindex=\"${tabIndexAttr}\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-controls=\"${listboxId}\"\n        :aria-disabled=\"${() => (isDisabled.value ? 'true' : null)}\"\n        :aria-expanded=\"${() => String(isOpen.value)}\"\n        :aria-invalid=\"${() => (props.error.value ? 'true' : null)}\"\n        :value=\"${inputValue}\"\n        :label=\"${inputLabel}\"\n        :placeholder=\"${inputPlaceholder}\"\n        :label-placement=\"${inputLabelPlacement}\"\n        :color=\"${inputColor}\"\n        :size=\"${inputSize}\"\n        :variant=\"${inputVariant}\"\n        :rounded=\"${inputRounded}\"\n        :helper=\"${inputHelper}\"\n        :error=\"${inputError}\"\n        ?disabled=\"${inputDisabled}\"\n        ?required=\"${inputRequired}\"\n        ?fullwidth=\"${inputFullwidth}\"\n        ?loading=\"${inputLoading}\"\n        ref=\"${(el: HTMLElement) => {\n          triggerEl = el;\n        }}\">\n        <div slot=\"prefix\" class=\"chips-row\" ?hidden=\"${() => !showChips.value}\">\n          ${() =>\n            selectedChipItems.value.map(\n              (item) =>\n                html`<ore-chip\n                  value=\"${item.value}\"\n                  label=\"${item.label}\"\n                  mode=\"removable\"\n                  variant=\"flat\"\n                  size=\"sm\"\n                  color=\"${props.color}\"\n                  @remove=\"${removeChip}\">\n                  ${item.label}\n                </ore-chip>`,\n            )}\n        </div>\n        <span slot=\"suffix\" class=\"trigger-suffix\" aria-hidden=\"true\">\n          <span class=\"loader\"></span>\n          <span class=\"trigger-icon\">\n            <ore-icon name=\"chevron-down\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          </span>\n        </span>\n      </ore-input>\n      <div\n        class=\"dropdown\"\n        part=\"dropdown\"\n        popover=\"manual\"\n        ?data-open=\"${isOpen}\"\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                      optionList.set(row.idx);\n                    }}\">\n                    <span>${row.opt.label}</span>\n                    <span class=\"option-check\" aria-hidden=\"true\">\n                      <ore-icon name=\"check\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                    </span>\n                  </div>`,\n            )}\n        </div>\n      </div>`;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"select.js","names":[],"sources":["../src/inputs/select/select.ts"],"sourcesContent":["import { define, html, inject, prop, bind, getHost, onCleanup, onMounted, useEmit, useSlots } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, effect, signal, watch } from '@vielzeug/ripple';\n\nimport type { ChoiceChangeDetail, DropdownCloseReason, OverlayOpenDetail, OverlayOpenReason } from '../../headless';\nimport type { SelectableFieldProps } from '../../shared';\nimport type { VisualVariant } from '../../types';\n\nimport { lifecycleSignal, createChoiceField, createOptionList } from '../../headless';\nimport '../../feedback/chip/chip';\nimport '../../content/icon/icon';\nimport '../input/input';\nimport { disablableBundle, loadableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { reducedMotionMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './select.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────\n\ntype OptionItem = {\n  disabled: boolean;\n  group?: string;\n  label: string;\n  value: string;\n};\n\nexport type OreSelectOptionInput = {\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// ── Styles ─────────────────────────────────────────────────────────────\n\n// ── Component Props ─────────────────────────────────────────────────────────────\n\n/** Select component properties */\n\nexport type OreSelectEvents = {\n  change: ChoiceChangeDetail;\n  close: { reason: DropdownCloseReason };\n  open: OverlayOpenDetail;\n};\n\nexport type OreSelectProps = SelectableFieldProps<Exclude<VisualVariant, '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?: OreSelectOptionInput[];\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 ore-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: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\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' | 'outsideClick' | '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 * @part trigger - The `ore-input` trigger element that opens the dropdown.\n * @part dropdown - The dropdown listbox panel container.\n *\n * @example\n * ```html\n * <ore-select label=\"Role\" value=\"admin\">\n *   <option value=\"admin\">Administrator</option>\n *   <option value=\"editor\">Editor</option>\n *   <option value=\"viewer\">Viewer</option>\n * </ore-select>\n *\n * <ore-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 * </ore-select>\n * ```\n */\nexport const SELECT_TAG = 'ore-select' as const;\ndefine<OreSelectProps>(SELECT_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    ...roundableBundle,\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    multiple: prop.bool(false),\n    name: prop.string(),\n    options: prop.json(undefined as OreSelectOptionInput[] | undefined),\n    placeholder: prop.string(),\n    required: prop.bool(false),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreSelectEvents>();\n    const slots = useSlots();\n\n    const shadowRoot = el.shadowRoot;\n    // ────────────────────────────────────────────────────────────────\n    // State & Context\n    // ────────────────────────────────────────────────────────────────\n\n    const slottedOptions = signal<OptionItem[]>([]);\n    const isLoading = computed(() => Boolean(props.loading.value));\n\n    // Merged options: explicit prop value overrides slotted options\n    function normalizeOption(option: OreSelectOptionInput): 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(() => {\n      const explicitOptions = props.options.value;\n\n      return Array.isArray(explicitOptions) ? explicitOptions.map(normalizeOption) : slottedOptions.value;\n    });\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    let triggerEl: HTMLElement | null = null;\n    let dropdownEl: HTMLElement | null = null;\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    let _formField: { reportValidity(): void } | null = null;\n    const choice = createChoiceField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      getFormField: () => _formField,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      multiple: props.multiple,\n      prefix: 'select',\n      signal: abortSignal,\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    _formField = useField<string>({ disabled: choice.disabled, toFormValue: (v) => v, value: choice.formValue });\n\n    const optionList = createOptionList<OptionItem>({\n      getBoundary: () => el,\n      getFocusedOptionElement: () => dropdownEl?.querySelector<HTMLElement>('[data-focused]') ?? null,\n      getItems: () => options.value,\n      getPanel: () => dropdownEl,\n      getReference: () => triggerEl,\n      getTrigger: () => triggerEl,\n      isDisabled: () => choice.disabled.value,\n      onClose: (reason) => {\n        emit('close', { reason });\n        choice.triggerValidation('blur');\n      },\n      onOpen: (reason) => emit('open', { reason }),\n      signal: abortSignal,\n    });\n\n    const { triggerValidation } = choice;\n    const selectedValues = choice.selectedValues;\n    const isDisabled = choice.disabled;\n\n    const { fieldId: selectId } = choice;\n    const listboxId = `listbox-${selectId}`;\n    const { focusedIndex, isOpen } = optionList;\n\n    // Sync host attributes for CSS hooks\n    bind({\n      attr: {\n        'has-error': () => (props.error.value ? true : undefined),\n        open: () => (isOpen.value ? true : undefined),\n        size: fCtxProps.size,\n        variant: fCtxProps.variant,\n      },\n    });\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\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        let group = groups.get(key);\n\n        if (!group) {\n          group = [];\n          groups.set(key, group);\n        }\n\n        group.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', { labels, originalEvent, values });\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    function openPopup(reason: OverlayOpenReason = 'programmatic') {\n      optionList.open(reason);\n\n      requestAnimationFrame(() => {\n        const selectedIndex =\n          selectedValues.value.length > 0\n            ? options.value.findIndex((option) => option.value === selectedValues.value[0])\n            : -1;\n\n        if (selectedIndex >= 0) {\n          optionList.set(selectedIndex);\n\n          return;\n        }\n\n        optionList.navigate('first');\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.toggleValue(opt.value);\n      } else {\n        choice.selectValue(opt.value);\n        optionList.close();\n      }\n\n      emitChange(e);\n      triggerValidation('change');\n    }\n\n    // Keyboard navigation\n\n    function handleTriggerKeydown(e: KeyboardEvent) {\n      if (isDisabled.value) return;\n\n      // Let optionList handle arrow key navigation\n      if (optionList.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            openPopup('keyboard');\n          }\n\n          break;\n        case 'Tab':\n          optionList.close();\n          break;\n      }\n    }\n\n    // ore-input prop helpers\n    const inputValue = () => triggerText.value;\n    const inputLabel = () => props.label.value ?? '';\n    const inputPlaceholder = () => props.placeholder.value ?? '';\n    const inputLabelPlacement = () => props['label-placement'].value ?? 'inset';\n    const inputColor = () => props.color?.value ?? undefined;\n    const inputSize = () => fCtxProps.size?.value ?? undefined;\n    const inputVariant = () => fCtxProps.variant?.value ?? undefined;\n    const inputRounded = () => props.rounded?.value ?? undefined;\n    const inputHelper = () => props.helper.value ?? '';\n    const inputError = () => props.error.value ?? '';\n    const inputDisabled = () => (isDisabled.value ? true : undefined);\n    const inputRequired = () => (props.required.value ? true : undefined);\n    const inputFullwidth = () => (props.fullwidth.value ? true : undefined);\n    const inputLoading = () => (props.loading.value ? true : undefined);\n    const tabIndexAttr = () => (isDisabled.value ? '-1' : '0');\n\n    watch(slots.elements(), () => readOptions(), { immediate: true });\n\n    const stopPopoverSync = effect(() => {\n      if (isOpen.value) {\n        if (dropdownEl && 'showPopover' in dropdownEl && !dropdownEl.matches(':popover-open')) dropdownEl.showPopover();\n      } else {\n        if (dropdownEl && 'hidePopover' in dropdownEl && dropdownEl.matches(':popover-open')) dropdownEl.hidePopover();\n      }\n    });\n\n    onCleanup(() => stopPopoverSync.dispose());\n\n    onMounted(() => {\n      let onTriggerClick: ((event: MouseEvent) => void) | null = null;\n      let onTriggerKeydown: ((event: KeyboardEvent) => void) | null = null;\n\n      if (triggerEl) {\n        onTriggerClick = (event: MouseEvent) => {\n          event.stopPropagation();\n\n          if (isDisabled.value) return;\n\n          if (isOpen.value) optionList.close('trigger');\n          else openPopup('click');\n        };\n        onTriggerKeydown = (event: KeyboardEvent) => {\n          handleTriggerKeydown(event);\n        };\n\n        triggerEl.addEventListener('click', onTriggerClick);\n        triggerEl.addEventListener('keydown', onTriggerKeydown);\n      }\n\n      return () => {\n        if (triggerEl && onTriggerClick) triggerEl.removeEventListener('click', onTriggerClick);\n\n        if (triggerEl && onTriggerKeydown) triggerEl.removeEventListener('keydown', onTriggerKeydown);\n      };\n    });\n\n    return html`<slot style=\"display:none\"></slot>\n      <ore-input\n        class=\"trigger\"\n        part=\"trigger\"\n        readonly\n        tabindex=\"${tabIndexAttr}\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-controls=\"${listboxId}\"\n        :aria-disabled=\"${() => (isDisabled.value ? 'true' : null)}\"\n        :aria-expanded=\"${() => String(isOpen.value)}\"\n        :aria-invalid=\"${() => (props.error.value ? 'true' : null)}\"\n        :value=\"${inputValue}\"\n        :label=\"${inputLabel}\"\n        :placeholder=\"${inputPlaceholder}\"\n        :label-placement=\"${inputLabelPlacement}\"\n        :color=\"${inputColor}\"\n        :size=\"${inputSize}\"\n        :variant=\"${inputVariant}\"\n        :rounded=\"${inputRounded}\"\n        :helper=\"${inputHelper}\"\n        :error=\"${inputError}\"\n        ?disabled=\"${inputDisabled}\"\n        ?required=\"${inputRequired}\"\n        ?fullwidth=\"${inputFullwidth}\"\n        ?loading=\"${inputLoading}\"\n        ref=\"${(el: HTMLElement) => {\n          triggerEl = el;\n        }}\">\n        <div slot=\"prefix\" class=\"chips-row\" ?hidden=\"${() => !showChips.value}\">\n          ${() =>\n            selectedChipItems.value.map(\n              (item) =>\n                html`<ore-chip\n                  value=\"${item.value}\"\n                  label=\"${item.label}\"\n                  mode=\"removable\"\n                  variant=\"flat\"\n                  size=\"sm\"\n                  color=\"${props.color}\"\n                  @remove=\"${removeChip}\">\n                  ${item.label}\n                </ore-chip>`,\n            )}\n        </div>\n        <span slot=\"suffix\" class=\"trigger-suffix\" aria-hidden=\"true\">\n          <span class=\"loader\"></span>\n          <span class=\"trigger-icon\">\n            <ore-icon name=\"chevron-down\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          </span>\n        </span>\n      </ore-input>\n      <div\n        class=\"dropdown\"\n        part=\"dropdown\"\n        popover=\"manual\"\n        ?data-open=\"${isOpen}\"\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                      optionList.set(row.idx);\n                    }}\">\n                    <span>${row.opt.label}</span>\n                    <span class=\"option-check\" aria-hidden=\"true\">\n                      <ore-icon name=\"check\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                    </span>\n                  </div>`,\n            )}\n        </div>\n      </div>`;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/separator.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/theme.css.cjs"),t=require("./content/separator/separator.css?inline.cjs");let n=require("@vielzeug/ore");var r=`ore-separator`;(0,n.define)(r,{props:{color:n.prop.string(),decorative:n.prop.bool(!0),label:n.prop.string(),orientation:n.prop.oneOf([`horizontal`,`vertical`],`horizontal`)},setup(e){let t=()=>e.decorative.value?`none`:`separator`,r=()=>e.decorative.value?`true`:null;return n.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/theme.css.cjs"),t=require("./content/separator/separator.css.cjs");let n=require("@vielzeug/ore");var r=`ore-separator`;(0,n.define)(r,{props:{color:n.prop.string(),decorative:n.prop.bool(!0),label:n.prop.string(),orientation:n.prop.oneOf([`horizontal`,`vertical`],`horizontal`)},setup(e){let t=()=>e.decorative.value?`none`:`separator`,r=()=>e.decorative.value?`true`:null;return n.html`
       ${()=>e.label.value?n.html`
               <div class="separator-wrapper" part="wrapper">
                 <hr

package/dist/separator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"separator.cjs","names":[],"sources":["../src/content/separator/separator.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\n\nimport type { ThemeColor } from '../../types';\n\nimport { colorThemeMixin } from '../../styles';\nimport componentStyles from './separator.css?inline';\n\n/** Separator component properties */\nexport type OreSeparatorProps = {\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 ore-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: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @cssprop --separator-color - Line color\n * @cssprop --separator-size - Line thickness\n * @cssprop --separator-spacing - Vertical margin\n *\n * @part wrapper - Root wrapper container.\n * @part separator - Separator element.\n * @part label - Label element.\n * @example\n * ```html\n * <ore-separator></ore-separator>\n * <ore-separator label=\"or\"></ore-separator>\n * <ore-separator orientation=\"vertical\"></ore-separator>\n * ```\n */\nexport const SEPARATOR_TAG = 'ore-separator' as const;\ndefine<OreSeparatorProps>(SEPARATOR_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    decorative: prop.bool(true),\n    label: prop.string(),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'horizontal'),\n  },\n  setup(props) {\n    const roleAttr = () => (props.decorative.value ? 'none' : 'separator');\n    const ariaHidden = () => (props.decorative.value ? 'true' : null);\n\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=\"${roleAttr}\"\n                  :aria-hidden=\"${ariaHidden}\"\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=\"${roleAttr}\"\n                  :aria-hidden=\"${ariaHidden}\"\n                  :aria-orientation=\"${() => props.orientation.value}\" />\n              </div>\n            `\n          : html`\n              <hr\n                class=\"separator\"\n                part=\"separator\"\n                :role=\"${roleAttr}\"\n                :aria-hidden=\"${ariaHidden}\"\n                :aria-orientation=\"${() => props.orientation.value}\" />\n            `}\n    `;\n  },\n  styles: [colorThemeMixin, componentStyles],\n});\n"],"mappings":"6MA2CA,IAAa,EAAgB,6BACH,EAAe,CACvC,MAAO,CACL,MAAO,EAAA,KAAK,OAAmB,EAC/B,WAAY,EAAA,KAAK,KAAK,EAAI,EAC1B,MAAO,EAAA,KAAK,OAAO,EACnB,YAAa,EAAA,KAAK,MAAM,CAAC,aAAc,UAAU,EAAY,YAAY,CAC3E,EACA,MAAM,EAAO,CACX,IAAM,MAAkB,EAAM,WAAW,MAAQ,OAAS,YACpD,MAAoB,EAAM,WAAW,MAAQ,OAAS,KAE5D,MAAO,GAAA,IAAI;YAEP,EAAM,MAAM,MACR,EAAA,IAAI;;;;;2BAKW,EAAS;kCACF,EAAW;2CACA,EAAM,YAAY,MAAM;iEACF,EAAM,MAAM,MAAM;;;;2BAI1D,EAAS;kCACF,EAAW;2CACA,EAAM,YAAY,MAAM;;cAGzD,EAAA,IAAI;;;;yBAIS,EAAS;gCACF,EAAW;yCACA,EAAM,YAAY,MAAM;cACrD;KAEZ,EACA,OAAQ,CAAC,EAAA,gBAAiB,EAAA,OAAe,CAC3C,CAAC"}
+{"version":3,"file":"separator.cjs","names":[],"sources":["../src/content/separator/separator.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\n\nimport type { ThemeColor } from '../../types';\n\nimport { colorThemeMixin } from '../../styles';\nimport componentStyles from './separator.css?inline';\n\n/** Separator component properties */\nexport type OreSeparatorProps = {\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 ore-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: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @cssprop --separator-color - Line color\n * @cssprop --separator-size - Line thickness\n * @cssprop --separator-spacing - Vertical margin\n *\n * @part wrapper - Root wrapper container.\n * @part separator - Separator element.\n * @part label - Label element.\n * @example\n * ```html\n * <ore-separator></ore-separator>\n * <ore-separator label=\"or\"></ore-separator>\n * <ore-separator orientation=\"vertical\"></ore-separator>\n * ```\n */\nexport const SEPARATOR_TAG = 'ore-separator' as const;\ndefine<OreSeparatorProps>(SEPARATOR_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    decorative: prop.bool(true),\n    label: prop.string(),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'horizontal'),\n  },\n  setup(props) {\n    const roleAttr = () => (props.decorative.value ? 'none' : 'separator');\n    const ariaHidden = () => (props.decorative.value ? 'true' : null);\n\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=\"${roleAttr}\"\n                  :aria-hidden=\"${ariaHidden}\"\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=\"${roleAttr}\"\n                  :aria-hidden=\"${ariaHidden}\"\n                  :aria-orientation=\"${() => props.orientation.value}\" />\n              </div>\n            `\n          : html`\n              <hr\n                class=\"separator\"\n                part=\"separator\"\n                :role=\"${roleAttr}\"\n                :aria-hidden=\"${ariaHidden}\"\n                :aria-orientation=\"${() => props.orientation.value}\" />\n            `}\n    `;\n  },\n  styles: [colorThemeMixin, componentStyles],\n});\n"],"mappings":"sMA2CA,IAAa,EAAgB,6BACH,EAAe,CACvC,MAAO,CACL,MAAO,EAAA,KAAK,OAAmB,EAC/B,WAAY,EAAA,KAAK,KAAK,EAAI,EAC1B,MAAO,EAAA,KAAK,OAAO,EACnB,YAAa,EAAA,KAAK,MAAM,CAAC,aAAc,UAAU,EAAY,YAAY,CAC3E,EACA,MAAM,EAAO,CACX,IAAM,MAAkB,EAAM,WAAW,MAAQ,OAAS,YACpD,MAAoB,EAAM,WAAW,MAAQ,OAAS,KAE5D,MAAO,GAAA,IAAI;YAEP,EAAM,MAAM,MACR,EAAA,IAAI;;;;;2BAKW,EAAS;kCACF,EAAW;2CACA,EAAM,YAAY,MAAM;iEACF,EAAM,MAAM,MAAM;;;;2BAI1D,EAAS;kCACF,EAAW;2CACA,EAAM,YAAY,MAAM;;cAGzD,EAAA,IAAI;;;;yBAIS,EAAS;gCACF,EAAW;yCACA,EAAM,YAAY,MAAM;cACrD;KAEZ,EACA,OAAQ,CAAC,EAAA,gBAAiB,EAAA,OAAe,CAC3C,CAAC"}

package/dist/separator.js

@@ -1,5 +1,5 @@
 import { colorThemeMixin as e } from "./styles/mixins/theme.css.js";
-import t from "./content/separator/separator.css?inline.js";
+import t from "./content/separator/separator.css.js";
 import { define as n, html as r, prop as i } from "@vielzeug/ore";
 //#region src/content/separator/separator.ts
 var a = "ore-separator";