@vielzeug/refine 1.3.1 → 1.4.0

package/dist/select.js

@@ -1,17 +1,17 @@
 import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
 import { disablableBundle as t, loadableBundle as n, roundableBundle as r, sizableBundle as i, themableBundle as a } from "./shared/prop-bundles.js";
 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 { useField as l } from "./ore/dist/forms/field.js";
+import { createChoiceField as ee } from "./headless/choice-field.js";
+import { createOptionList as s } from "./headless/option-list.js";
+import { useField as c } 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";
+import { FORM_CTX as l, useFormContext as u } from "./inputs/shared/form-context.js";
+import d from "./inputs/select/select.css.js";
+import { bind as f, define as p, getHost as m, html as h, inject as g, onCleanup as _, onMounted as v, prop as y, useEmit as b, useSlots as x } from "@vielzeug/ore";
+import { computed as S, effect as C, signal as w, watch as T } from "@vielzeug/ripple";
 //#region src/inputs/select/select.ts
-var D = "ore-select";
-m(D, {
+var E = "ore-select";
+p(E, {
 	formAssociated: !0,
 	props: {
 		...a,
@@ -19,22 +19,22 @@ m(D, {
 		...t,
 		...n,
 		...r,
-		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()
+		error: y.string(),
+		fullwidth: y.bool(!1),
+		helper: y.string(),
+		label: y.string(),
+		"label-placement": y.oneOf(["inset", "outside"], "inset"),
+		multiple: y.bool(!1),
+		name: y.string(),
+		options: y.json(void 0),
+		placeholder: y.string(),
+		required: y.bool(!1),
+		value: y.string(),
+		variant: y.string()
 	},
 	setup(e) {
-		let t = h(), n = x(), r = S(), i = t.shadowRoot, a = T([]), f = C(() => !!e.loading.value);
-		function m(e) {
+		let t = m(), n = b(), r = x(), i = t.shadowRoot, a = w([]), d = S(() => !!e.loading.value);
+		function p(e) {
 			return {
 				disabled: !!e.disabled,
 				group: e.group,
@@ -42,48 +42,51 @@ m(D, {
 				value: e.value
 			};
 		}
-		let b = C(() => {
+		let y = S(() => {
 			let t = e.options.value;
-			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,
+			return Array.isArray(t) ? t.map(p) : a.value;
+		}), E = g(l), D = u(e, E), O = null, k = null, A = o(_), j = ee({
+			disabled: D.disabled,
 			error: e.error,
-			getFormField: () => M,
 			helper: e.helper,
 			label: e.label,
 			labelPlacement: e["label-placement"],
 			multiple: e.multiple,
 			prefix: "select",
-			signal: j,
-			validateOn: D?.validateOn,
+			required: e.required,
+			signal: A,
+			validateOn: E?.validateOn,
 			value: e.value
 		});
-		M = l({
-			disabled: N.disabled,
+		j.attachFormField(c({
+			disabled: j.disabled,
+			onReset: j.reset,
 			toFormValue: (e) => e,
-			value: N.formValue
-		});
-		let P = c({
+			validationMessage: j.validationMessage,
+			validity: j.validity,
+			value: j.formValue
+		}));
+		let M = s({
 			getBoundary: () => t,
-			getFocusedOptionElement: () => A?.querySelector("[data-focused]") ?? null,
-			getItems: () => b.value,
-			getPanel: () => A,
-			getReference: () => k,
-			getTrigger: () => k,
-			isDisabled: () => N.disabled.value,
+			getFocusedOptionElement: () => k?.querySelector("[data-focused]") ?? null,
+			getItems: () => y.value,
+			getPanel: () => k,
+			getReference: () => O,
+			getTrigger: () => O,
+			isDisabled: () => j.disabled.value,
 			onClose: (e) => {
-				n("close", { reason: e }), N.triggerValidation("blur");
+				n("close", { reason: e }), j.triggerValidation("blur");
 			},
 			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: {
+			signal: A
+		}), { triggerValidation: N } = j, P = j.selectedValues, F = j.disabled, { fieldId: I } = j, L = `listbox-${I}`, { focusedIndex: R, isOpen: z } = M;
+		f({ attr: {
 			"has-error": () => e.error.value ? !0 : void 0,
-			open: () => V.value ? !0 : void 0,
-			size: O.size,
-			variant: O.variant
+			open: () => z.value ? !0 : void 0,
+			size: D.size,
+			variant: D.variant
 		} });
-		function H() {
+		function B() {
 			let e = i?.querySelector("slot");
 			if (!e) return;
 			let t = e.assignedElements({ flatten: !0 }), n = [];
@@ -108,16 +111,16 @@ m(D, {
 			}
 			a.value = n;
 		}
-		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,
+		let V = S(() => {
+			if (P.value.length === 0) return "";
+			if (e.multiple.value && P.value.length > 1) return `${P.value.length} selected`;
+			let t = P.value[0];
+			return y.value.find((e) => e.value === t)?.label ?? t;
+		}), H = S(() => e.multiple.value ? P.value.map((e) => ({
+			label: y.value.find((t) => t.value === e)?.label ?? e,
 			value: e
-		})) : []), G = C(() => e.multiple.value && I.value.length > 0), K = C(() => U.value || e.placeholder.value || "");
-		function q(e) {
+		})) : []), U = S(() => e.multiple.value && P.value.length > 0), W = S(() => V.value || e.placeholder.value || "");
+		function G(e) {
 			let t = [], n = /* @__PURE__ */ new Map();
 			for (let t of e) {
 				let e = t.group, r = n.get(e);
@@ -137,102 +140,102 @@ m(D, {
 			}
 			return t;
 		}
-		let J = C(() => q(b.value));
-		function Y(e) {
-			return b.value.find((t) => t.value === e)?.label ?? e;
+		let K = S(() => G(y.value));
+		function q(e) {
+			return y.value.find((t) => t.value === e)?.label ?? e;
 		}
-		function X(e) {
-			let t = I.value, r = t.map((e) => Y(e));
+		function J(e) {
+			let t = P.value, r = t.map((e) => q(e));
 			n("change", {
 				labels: r,
 				originalEvent: e,
 				values: t
 			});
 		}
-		function ee(e) {
+		function te(e) {
 			e.stopPropagation();
 			let t = e.detail?.value;
-			t !== void 0 && (N.removeValue(t), X(e), F("change"));
+			t !== void 0 && (j.removeValue(t), J(e), N("change"));
 		}
-		function Z(e = "programmatic") {
-			P.open(e), requestAnimationFrame(() => {
-				let e = I.value.length > 0 ? b.value.findIndex((e) => e.value === I.value[0]) : -1;
+		function Y(e = "programmatic") {
+			M.open(e), requestAnimationFrame(() => {
+				let e = P.value.length > 0 ? y.value.findIndex((e) => e.value === P.value[0]) : -1;
 				if (e >= 0) {
-					P.set(e);
+					M.set(e);
 					return;
 				}
-				P.navigate("first");
+				M.navigate("first");
 			});
 		}
-		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(t, n) {
+			t.disabled || (e.multiple.value ? j.toggleValue(t.value) : (j.selectValue(t.value), M.close()), J(n), N("change"));
 		}
-		function $(e) {
-			if (!L.value && !P.handleKeydown(e)) switch (e.key) {
+		function Z(e) {
+			if (!F.value && !M.handleKeydown(e)) switch (e.key) {
 				case " ":
 				case "Enter":
-					if (e.preventDefault(), V.value) {
-						let t = B.value, n = b.value;
-						t >= 0 && t < n.length && Q(n[t], e);
-					} else Z("keyboard");
+					if (e.preventDefault(), z.value) {
+						let t = R.value, n = y.value;
+						t >= 0 && t < n.length && X(n[t], e);
+					} else Y("keyboard");
 					break;
 				case "Tab":
-					P.close();
+					M.close();
 					break;
 			}
 		}
-		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();
+		let Q = () => W.value, ne = () => e.label.value ?? "", re = () => e.placeholder.value ?? "", ie = () => e["label-placement"].value ?? "inset", ae = () => e.color?.value ?? void 0, oe = () => D.size?.value ?? void 0, $ = () => D.variant?.value ?? void 0, se = () => e.rounded?.value ?? void 0, ce = () => e.helper.value ?? "", le = () => e.error.value ?? "", ue = () => F.value ? !0 : void 0, de = () => e.required.value ? !0 : void 0, fe = () => e.fullwidth.value ? !0 : void 0, pe = () => e.loading.value ? !0 : void 0, me = () => F.value ? "-1" : "0";
+		T(r.elements(), () => B(), { immediate: !0 });
+		let he = C(() => {
+			z.value ? k && "showPopover" in k && !k.matches(":popover-open") && k.showPopover() : k && "hidePopover" in k && k.matches(":popover-open") && k.hidePopover();
 		});
-		return v(() => ge.dispose()), y(() => {
+		return _(() => he.dispose()), v(() => {
 			let e = null, t = null;
-			return k && (e = (e) => {
-				e.stopPropagation(), !L.value && (V.value ? P.close("trigger") : Z("click"));
+			return O && (e = (e) => {
+				e.stopPropagation(), !F.value && (z.value ? M.close("trigger") : Y("click"));
 			}, t = (e) => {
-				$(e);
-			}, k.addEventListener("click", e), k.addEventListener("keydown", t)), () => {
-				k && e && k.removeEventListener("click", e), k && t && k.removeEventListener("keydown", t);
+				Z(e);
+			}, O.addEventListener("click", e), O.addEventListener("keydown", t)), () => {
+				O && e && O.removeEventListener("click", e), O && t && O.removeEventListener("keydown", t);
 			};
-		}), g`<slot style="display:none"></slot>
+		}), h`<slot style="display:none"></slot>
       <ore-input
         class="trigger"
         part="trigger"
         readonly
-        tabindex="${he}"
+        tabindex="${me}"
         role="combobox"
         aria-haspopup="listbox"
-        aria-controls="${z}"
-        :aria-disabled="${() => L.value ? "true" : null}"
-        :aria-expanded="${() => String(V.value)}"
+        aria-controls="${L}"
+        :aria-disabled="${() => F.value ? "true" : null}"
+        :aria-expanded="${() => String(z.value)}"
         :aria-invalid="${() => e.error.value ? "true" : null}"
-        :value="${te}"
+        :value="${Q}"
         :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}"
+        :variant="${$}"
+        :rounded="${se}"
+        :helper="${ce}"
+        :error="${le}"
+        ?disabled="${ue}"
+        ?required="${de}"
+        ?fullwidth="${fe}"
+        ?loading="${pe}"
         ref="${(e) => {
-			k = e;
+			O = e;
 		}}">
-        <div slot="prefix" class="chips-row" ?hidden="${() => !G.value}">
-          ${() => W.value.map((t) => g`<ore-chip
+        <div slot="prefix" class="chips-row" ?hidden="${() => !U.value}">
+          ${() => H.value.map((t) => h`<ore-chip
                   value="${t.value}"
                   label="${t.label}"
                   mode="removable"
                   variant="flat"
                   size="sm"
                   color="${e.color}"
-                  @remove="${ee}">
+                  @remove="${te}">
                   ${t.label}
                 </ore-chip>`)}
         </div>
@@ -247,32 +250,32 @@ m(D, {
         class="dropdown"
         part="dropdown"
         popover="manual"
-        ?data-open="${V}"
+        ?data-open="${z}"
         role="listbox"
-        id="${z}"
+        id="${L}"
         aria-label="Options"
         ref="${(e) => {
-			A = e;
+			k = e;
 		}}">
-        <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
+        <div class="dropdown-loading" ?hidden="${() => !d.value}">Loading…</div>
+        <div class="dropdown-empty" ?hidden="${() => d.value || y.value.length > 0}">No options</div>
+        <div class="options-list" ?hidden="${() => d.value || y.value.length === 0}">
+          ${() => K.value.map((e) => e.type === "group" ? h`<div class="optgroup-label" role="presentation">${e.label}</div>` : h`<div
                     class="option"
                     role="option"
-                    id="${`${R}-opt-${e.idx}`}"
+                    id="${`${I}-opt-${e.idx}`}"
                     data-option-index="${String(e.idx)}"
                     data-option-value="${e.opt.value}"
-                    aria-selected="${() => String(I.value.includes(e.opt.value))}"
+                    aria-selected="${() => String(P.value.includes(e.opt.value))}"
                     aria-disabled="${() => String(e.opt.disabled)}"
-                    ?data-focused="${() => B.value === e.idx}"
-                    ?data-selected="${() => I.value.includes(e.opt.value)}"
+                    ?data-focused="${() => R.value === e.idx}"
+                    ?data-selected="${() => P.value.includes(e.opt.value)}"
                     ?data-disabled="${() => e.opt.disabled}"
                     @click="${(t) => {
-			t.stopPropagation(), Q(e.opt, t);
+			t.stopPropagation(), X(e.opt, t);
 		}}"
                     @pointerenter="${() => {
-			P.set(e.idx);
+			M.set(e.idx);
 		}}">
                     <span>${e.opt.label}</span>
                     <span class="option-check" aria-hidden="true">
@@ -283,9 +286,9 @@ m(D, {
       </div>`;
 	},
 	shadow: { delegatesFocus: !0 },
-	styles: [e, f]
+	styles: [e, d]
 });
 //#endregion
-export { D as SELECT_TAG };
+export { E 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, 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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"}
+{"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    const choice = createChoiceField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      multiple: props.multiple,\n      prefix: 'select',\n      required: props.required,\n      signal: abortSignal,\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    choice.attachFormField(\n      useField<string>({\n        disabled: choice.disabled,\n        onReset: choice.reset,\n        toFormValue: (v) => v,\n        validationMessage: choice.validationMessage,\n        validity: choice.validity,\n        value: choice.formValue,\n      }),\n    );\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/shared/size-presets.cjs

@@ -1,2 +1,2 @@
-var e={lg:{"--_field-height":`var(--size-12)`,"--_padding":`var(--size-2-5) var(--size-3-5)`,fontSize:`var(--text-base)`,gap:`var(--size-2-5)`},md:{"--_field-height":`var(--size-10)`,"--_padding":`var(--size-1-5) var(--size-3)`,fontSize:`var(--text-sm)`,gap:`var(--size-2)`},sm:{"--_field-height":`var(--size-8)`,"--_padding":`var(--size-1) var(--size-2)`,fontSize:`var(--text-xs)`,gap:`var(--size-1-5)`}},t={lg:{"--_padding":`var(--size-2-5) var(--size-3-5)`,fontSize:`var(--text-base)`,gap:`var(--size-2-5)`},md:{"--_padding":`var(--size-1-5) var(--size-3)`,fontSize:`var(--text-sm)`,gap:`var(--size-2)`},sm:{"--_padding":`var(--size-1) var(--size-2)`,fontSize:`var(--text-xs)`,gap:`var(--size-1-5)`}},n={lg:{fontSize:`var(--text-base)`,gap:`var(--size-2-5)`,size:`var(--size-6)`},sm:{fontSize:`var(--text-xs)`,gap:`var(--size-1-5)`,size:`var(--size-4)`}},r={lg:{fontSize:`var(--text-base)`,gap:`var(--size-3)`,height:`var(--size-7)`,thumbSize:`var(--size-6)`,width:`var(--size-14)`},sm:{fontSize:`var(--text-xs)`,gap:`var(--size-2)`,height:`var(--size-5)`,thumbSize:`var(--size-4)`,width:`var(--size-9)`}},i={lg:{fontSize:`var(--text-base)`,height:`calc(var(--size-5) - var(--size-1))`,size:`var(--size-5)`},md:{fontSize:`var(--text-base)`,height:`var(--size-3)`,size:`var(--size-5)`},sm:{fontSize:`var(--text-xs)`,height:`var(--size-2)`,size:`var(--size-4)`}},a={lg:{"--_min-height":`var(--size-40)`,fontSize:`var(--text-base)`},md:{"--_min-height":`var(--size-32)`,fontSize:`var(--text-sm)`},sm:{"--_min-height":`var(--size-28)`,fontSize:`var(--text-xs)`}};exports.CONTROL_SIZE_PRESET=n,exports.FIELD_SIZE_PRESET=e,exports.FILE_INPUT_SIZE_PRESET=a,exports.SLIDER_SIZE_PRESET=i,exports.SWITCH_SIZE_PRESET=r,exports.TEXTAREA_SIZE_PRESET=t;
+var e={lg:{"--_field-height":`var(--size-12)`,"--_padding":`var(--size-2-5) var(--size-3-5)`,fontSize:`var(--text-base)`,gap:`var(--size-2-5)`},md:{"--_field-height":`var(--size-10)`,"--_padding":`var(--size-1-5) var(--size-3)`,fontSize:`var(--text-sm)`,gap:`var(--size-2)`},sm:{"--_field-height":`var(--size-8)`,"--_padding":`var(--size-1) var(--size-2)`,fontSize:`var(--text-xs)`,gap:`var(--size-1-5)`}},t={lg:{"--_padding":`var(--size-2-5) var(--size-3-5)`,fontSize:`var(--text-base)`,gap:`var(--size-2-5)`},md:{"--_padding":`var(--size-1-5) var(--size-3)`,fontSize:`var(--text-sm)`,gap:`var(--size-2)`},sm:{"--_padding":`var(--size-1) var(--size-2)`,fontSize:`var(--text-xs)`,gap:`var(--size-1-5)`}},n={lg:{fontSize:`var(--text-base)`,gap:`var(--size-2-5)`,size:`var(--size-6)`},sm:{fontSize:`var(--text-xs)`,gap:`var(--size-1-5)`,size:`var(--size-4)`}},r={lg:{fontSize:`var(--text-base)`,gap:`var(--size-3)`,height:`var(--size-7)`,thumbSize:`var(--size-6)`,width:`var(--size-14)`},sm:{fontSize:`var(--text-xs)`,gap:`var(--size-2)`,height:`var(--size-5)`,thumbSize:`var(--size-4)`,width:`var(--size-9)`}},i={lg:{fontSize:`var(--text-base)`,height:`calc(var(--size-5) - var(--size-1))`,size:`var(--size-5)`},md:{fontSize:`var(--text-base)`,height:`var(--size-3)`,size:`var(--size-5)`},sm:{fontSize:`var(--text-xs)`,height:`var(--size-2)`,size:`var(--size-4)`}},a={lg:{"--_padding":`var(--size-4)`,fontSize:`var(--text-base)`,gap:`var(--size-2-5)`},md:{"--_padding":`var(--size-3)`,fontSize:`var(--text-sm)`,gap:`var(--size-2)`},sm:{"--_padding":`var(--size-2)`,fontSize:`var(--text-xs)`,gap:`var(--size-1-5)`}},o={lg:{"--_min-height":`var(--size-40)`,fontSize:`var(--text-base)`},md:{"--_min-height":`var(--size-32)`,fontSize:`var(--text-sm)`},sm:{"--_min-height":`var(--size-28)`,fontSize:`var(--text-xs)`}};exports.CONTROL_SIZE_PRESET=n,exports.FIELD_SIZE_PRESET=e,exports.FILE_INPUT_SIZE_PRESET=o,exports.MESSAGE_COMPOSER_SIZE_PRESET=a,exports.SLIDER_SIZE_PRESET=i,exports.SWITCH_SIZE_PRESET=r,exports.TEXTAREA_SIZE_PRESET=t;
 //# sourceMappingURL=size-presets.cjs.map

package/dist/shared/size-presets.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"size-presets.cjs","names":[],"sources":["../../src/shared/size-presets.ts"],"sourcesContent":["import type { SizeConfig } from '../styles/mixins/shape.css';\nimport type { ComponentSize } from './types';\n\n/** A preset with an entry for every ComponentSize key. */\ntype FullSizePreset = Record<ComponentSize, SizeConfig>;\n\n/** A preset that may omit some ComponentSize keys (sizeVariantMixin fills the gaps with its defaults). */\ntype PartialSizePreset = Partial<Record<ComponentSize, SizeConfig>>;\n\nexport const FIELD_SIZE_PRESET = {\n  lg: {\n    '--_field-height': 'var(--size-12)',\n    '--_padding': 'var(--size-2-5) var(--size-3-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_field-height': 'var(--size-10)',\n    '--_padding': 'var(--size-1-5) var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_field-height': 'var(--size-8)',\n    '--_padding': 'var(--size-1) var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\nexport const TEXTAREA_SIZE_PRESET = {\n  lg: {\n    '--_padding': 'var(--size-2-5) var(--size-3-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_padding': 'var(--size-1-5) var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_padding': 'var(--size-1) var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\n/** Shared size preset for checkbox and radio (icon + label layout). */\nexport const CONTROL_SIZE_PRESET = {\n  lg: {\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n    size: 'var(--size-6)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n    size: 'var(--size-4)',\n  },\n} satisfies PartialSizePreset;\n\n/** Shared size preset for the switch toggle control. */\nexport const SWITCH_SIZE_PRESET = {\n  lg: {\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-3)',\n    height: 'var(--size-7)',\n    thumbSize: 'var(--size-6)',\n    width: 'var(--size-14)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-2)',\n    height: 'var(--size-5)',\n    thumbSize: 'var(--size-4)',\n    width: 'var(--size-9)',\n  },\n} satisfies PartialSizePreset;\n\n/** Shared size preset for the slider track/thumb. */\nexport const SLIDER_SIZE_PRESET = {\n  lg: {\n    fontSize: 'var(--text-base)',\n    height: 'calc(var(--size-5) - var(--size-1))',\n    size: 'var(--size-5)',\n  },\n  md: {\n    fontSize: 'var(--text-base)',\n    height: 'var(--size-3)',\n    size: 'var(--size-5)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    height: 'var(--size-2)',\n    size: 'var(--size-4)',\n  },\n} satisfies FullSizePreset;\n\n/** Shared size preset for the file-input dropzone. */\nexport const FILE_INPUT_SIZE_PRESET = {\n  lg: {\n    '--_min-height': 'var(--size-40)',\n    fontSize: 'var(--text-base)',\n  },\n  md: {\n    '--_min-height': 'var(--size-32)',\n    fontSize: 'var(--text-sm)',\n  },\n  sm: {\n    '--_min-height': 'var(--size-28)',\n    fontSize: 'var(--text-xs)',\n  },\n} satisfies FullSizePreset;\n"],"mappings":"AASA,IAAa,EAAoB,CAC/B,GAAI,CACF,kBAAmB,iBACnB,aAAc,kCACd,SAAU,mBACV,IAAK,iBACP,EACA,GAAI,CACF,kBAAmB,iBACnB,aAAc,gCACd,SAAU,iBACV,IAAK,eACP,EACA,GAAI,CACF,kBAAmB,gBACnB,aAAc,8BACd,SAAU,iBACV,IAAK,iBACP,CACF,EAEa,EAAuB,CAClC,GAAI,CACF,aAAc,kCACd,SAAU,mBACV,IAAK,iBACP,EACA,GAAI,CACF,aAAc,gCACd,SAAU,iBACV,IAAK,eACP,EACA,GAAI,CACF,aAAc,8BACd,SAAU,iBACV,IAAK,iBACP,CACF,EAGa,EAAsB,CACjC,GAAI,CACF,SAAU,mBACV,IAAK,kBACL,KAAM,eACR,EACA,GAAI,CACF,SAAU,iBACV,IAAK,kBACL,KAAM,eACR,CACF,EAGa,EAAqB,CAChC,GAAI,CACF,SAAU,mBACV,IAAK,gBACL,OAAQ,gBACR,UAAW,gBACX,MAAO,gBACT,EACA,GAAI,CACF,SAAU,iBACV,IAAK,gBACL,OAAQ,gBACR,UAAW,gBACX,MAAO,eACT,CACF,EAGa,EAAqB,CAChC,GAAI,CACF,SAAU,mBACV,OAAQ,sCACR,KAAM,eACR,EACA,GAAI,CACF,SAAU,mBACV,OAAQ,gBACR,KAAM,eACR,EACA,GAAI,CACF,SAAU,iBACV,OAAQ,gBACR,KAAM,eACR,CACF,EAGa,EAAyB,CACpC,GAAI,CACF,gBAAiB,iBACjB,SAAU,kBACZ,EACA,GAAI,CACF,gBAAiB,iBACjB,SAAU,gBACZ,EACA,GAAI,CACF,gBAAiB,iBACjB,SAAU,gBACZ,CACF"}
+{"version":3,"file":"size-presets.cjs","names":[],"sources":["../../src/shared/size-presets.ts"],"sourcesContent":["import type { SizeConfig } from '../styles/mixins/shape.css';\nimport type { ComponentSize } from './types';\n\n/** A preset with an entry for every ComponentSize key. */\ntype FullSizePreset = Record<ComponentSize, SizeConfig>;\n\n/** A preset that may omit some ComponentSize keys (sizeVariantMixin fills the gaps with its defaults). */\ntype PartialSizePreset = Partial<Record<ComponentSize, SizeConfig>>;\n\nexport const FIELD_SIZE_PRESET = {\n  lg: {\n    '--_field-height': 'var(--size-12)',\n    '--_padding': 'var(--size-2-5) var(--size-3-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_field-height': 'var(--size-10)',\n    '--_padding': 'var(--size-1-5) var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_field-height': 'var(--size-8)',\n    '--_padding': 'var(--size-1) var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\nexport const TEXTAREA_SIZE_PRESET = {\n  lg: {\n    '--_padding': 'var(--size-2-5) var(--size-3-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_padding': 'var(--size-1-5) var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_padding': 'var(--size-1) var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\n/** Shared size preset for checkbox and radio (icon + label layout). */\nexport const CONTROL_SIZE_PRESET = {\n  lg: {\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n    size: 'var(--size-6)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n    size: 'var(--size-4)',\n  },\n} satisfies PartialSizePreset;\n\n/** Shared size preset for the switch toggle control. */\nexport const SWITCH_SIZE_PRESET = {\n  lg: {\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-3)',\n    height: 'var(--size-7)',\n    thumbSize: 'var(--size-6)',\n    width: 'var(--size-14)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-2)',\n    height: 'var(--size-5)',\n    thumbSize: 'var(--size-4)',\n    width: 'var(--size-9)',\n  },\n} satisfies PartialSizePreset;\n\n/** Shared size preset for the slider track/thumb. */\nexport const SLIDER_SIZE_PRESET = {\n  lg: {\n    fontSize: 'var(--text-base)',\n    height: 'calc(var(--size-5) - var(--size-1))',\n    size: 'var(--size-5)',\n  },\n  md: {\n    fontSize: 'var(--text-base)',\n    height: 'var(--size-3)',\n    size: 'var(--size-5)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    height: 'var(--size-2)',\n    size: 'var(--size-4)',\n  },\n} satisfies FullSizePreset;\n\n/**\n * Size preset for the message composer card. Padding is symmetric (unlike\n * `TEXTAREA_SIZE_PRESET`'s field-shaped padding) since this scales a card that wraps a field\n * *and* a toolbar row, not a bare field — `md`'s padding matches the value the card used before\n * `size` scaled anything, so the default look is unchanged.\n */\nexport const MESSAGE_COMPOSER_SIZE_PRESET = {\n  lg: {\n    '--_padding': 'var(--size-4)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_padding': 'var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_padding': 'var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\n/** Shared size preset for the file-input dropzone. */\nexport const FILE_INPUT_SIZE_PRESET = {\n  lg: {\n    '--_min-height': 'var(--size-40)',\n    fontSize: 'var(--text-base)',\n  },\n  md: {\n    '--_min-height': 'var(--size-32)',\n    fontSize: 'var(--text-sm)',\n  },\n  sm: {\n    '--_min-height': 'var(--size-28)',\n    fontSize: 'var(--text-xs)',\n  },\n} satisfies FullSizePreset;\n"],"mappings":"AASA,IAAa,EAAoB,CAC/B,GAAI,CACF,kBAAmB,iBACnB,aAAc,kCACd,SAAU,mBACV,IAAK,iBACP,EACA,GAAI,CACF,kBAAmB,iBACnB,aAAc,gCACd,SAAU,iBACV,IAAK,eACP,EACA,GAAI,CACF,kBAAmB,gBACnB,aAAc,8BACd,SAAU,iBACV,IAAK,iBACP,CACF,EAEa,EAAuB,CAClC,GAAI,CACF,aAAc,kCACd,SAAU,mBACV,IAAK,iBACP,EACA,GAAI,CACF,aAAc,gCACd,SAAU,iBACV,IAAK,eACP,EACA,GAAI,CACF,aAAc,8BACd,SAAU,iBACV,IAAK,iBACP,CACF,EAGa,EAAsB,CACjC,GAAI,CACF,SAAU,mBACV,IAAK,kBACL,KAAM,eACR,EACA,GAAI,CACF,SAAU,iBACV,IAAK,kBACL,KAAM,eACR,CACF,EAGa,EAAqB,CAChC,GAAI,CACF,SAAU,mBACV,IAAK,gBACL,OAAQ,gBACR,UAAW,gBACX,MAAO,gBACT,EACA,GAAI,CACF,SAAU,iBACV,IAAK,gBACL,OAAQ,gBACR,UAAW,gBACX,MAAO,eACT,CACF,EAGa,EAAqB,CAChC,GAAI,CACF,SAAU,mBACV,OAAQ,sCACR,KAAM,eACR,EACA,GAAI,CACF,SAAU,mBACV,OAAQ,gBACR,KAAM,eACR,EACA,GAAI,CACF,SAAU,iBACV,OAAQ,gBACR,KAAM,eACR,CACF,EAQa,EAA+B,CAC1C,GAAI,CACF,aAAc,gBACd,SAAU,mBACV,IAAK,iBACP,EACA,GAAI,CACF,aAAc,gBACd,SAAU,iBACV,IAAK,eACP,EACA,GAAI,CACF,aAAc,gBACd,SAAU,iBACV,IAAK,iBACP,CACF,EAGa,EAAyB,CACpC,GAAI,CACF,gBAAiB,iBACjB,SAAU,kBACZ,EACA,GAAI,CACF,gBAAiB,iBACjB,SAAU,gBACZ,EACA,GAAI,CACF,gBAAiB,iBACjB,SAAU,gBACZ,CACF"}

package/dist/shared/size-presets.d.ts

@@ -83,6 +83,29 @@ export declare const SLIDER_SIZE_PRESET: {
         size: string;
     };
 };
+/**
+ * Size preset for the message composer card. Padding is symmetric (unlike
+ * `TEXTAREA_SIZE_PRESET`'s field-shaped padding) since this scales a card that wraps a field
+ * *and* a toolbar row, not a bare field — `md`'s padding matches the value the card used before
+ * `size` scaled anything, so the default look is unchanged.
+ */
+export declare const MESSAGE_COMPOSER_SIZE_PRESET: {
+    lg: {
+        '--_padding': string;
+        fontSize: string;
+        gap: string;
+    };
+    md: {
+        '--_padding': string;
+        fontSize: string;
+        gap: string;
+    };
+    sm: {
+        '--_padding': string;
+        fontSize: string;
+        gap: string;
+    };
+};
 /** Shared size preset for the file-input dropzone. */
 export declare const FILE_INPUT_SIZE_PRESET: {
     lg: {

package/dist/shared/size-presets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"size-presets.d.ts","sourceRoot":"","sources":["../../src/shared/size-presets.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;CAmBJ,CAAC;AAE3B,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;CAgBP,CAAC;AAE3B,uEAAuE;AACvE,eAAO,MAAM,mBAAmB;;;;;;;;;;;CAWH,CAAC;AAE9B,wDAAwD;AACxD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;CAeF,CAAC;AAE9B,qDAAqD;AACrD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;CAgBL,CAAC;AAE3B,sDAAsD;AACtD,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;CAaT,CAAC"}
+{"version":3,"file":"size-presets.d.ts","sourceRoot":"","sources":["../../src/shared/size-presets.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;CAmBJ,CAAC;AAE3B,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;CAgBP,CAAC;AAE3B,uEAAuE;AACvE,eAAO,MAAM,mBAAmB;;;;;;;;;;;CAWH,CAAC;AAE9B,wDAAwD;AACxD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;CAeF,CAAC;AAE9B,qDAAqD;AACrD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;CAgBL,CAAC;AAE3B;;;;;GAKG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;CAgBf,CAAC;AAE3B,sDAAsD;AACtD,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;CAaT,CAAC"}