@vielzeug/refine 1.5.4 → 1.7.0

package/dist/checkbox-group.js

@@ -1,84 +1,82 @@
-import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
-import { disabledStateMixin as t } from "./styles/mixins/states.css.js";
-import { colorThemeMixin as n } from "./styles/mixins/theme.css.js";
-import { disablableBundle 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 { getChoiceLabel as c, getLightChildrenByTag as l } from "./headless/light-dom.js";
-import { FORM_CTX as u, useFormContext as d } from "./inputs/shared/form-context.js";
-import f from "./inputs/checkbox-group/checkbox-group.css.js";
-import { bind as p, createContext as m, createStableId as h, define as g, getHost as _, html as v, inject as y, onCleanup as b, prop as x, provide as S, useEmit as C, useSlots as w, watchEffect as T } from "@vielzeug/ore";
-import { when as E } from "@vielzeug/ore/directives";
-import { computed as D, signal as O } from "@vielzeug/ripple";
-import { useField as k } from "@vielzeug/ore/forms";
+import { disabledStateMixin as e } from "./styles/mixins/states.css.js";
+import { disablableBundle as t, sizableBundle as n, themableBundle as r } from "./shared/prop-bundles.js";
+import { lifecycleSignal as i } from "./headless/ore.js";
+import { createChoiceField as a } from "./headless/choice-field.js";
+import { getChoiceLabel as o, getLightChildrenByTag as s } from "./headless/light-dom.js";
+import { FORM_CTX as c, useFormContext as l } from "./inputs/shared/form-context.js";
+import u from "./inputs/checkbox-group/checkbox-group.css.js";
+import { bind as d, createContext as f, createStableId as p, define as m, getHost as h, html as g, inject as _, onCleanup as v, prop as y, provide as b, useEmit as x, useSlots as S, watchEffect as C } from "@vielzeug/ore";
+import { when as w } from "@vielzeug/ore/directives";
+import { computed as T, signal as E } from "@vielzeug/ripple";
+import { useField as D } from "@vielzeug/ore/forms";
 //#region src/inputs/checkbox-group/checkbox-group.ts
-var A = m("CheckboxGroupContext"), j = "ore-checkbox-group";
-g(j, {
+var O = f("CheckboxGroupContext"), k = "ore-checkbox-group";
+m(k, {
 	formAssociated: !0,
 	props: {
-		...a,
-		...i,
 		...r,
-		error: x.string(),
-		helper: x.string(),
-		label: x.string(),
-		name: x.string(),
-		orientation: x.string("vertical"),
-		required: x.bool(!1),
+		...n,
+		...t,
+		error: y.string(),
+		helper: y.string(),
+		label: y.string(),
+		name: y.string(),
+		orientation: y.string("vertical"),
+		required: y.bool(!1),
 		values: {
-			...x.string(),
+			...y.string(),
 			reflect: !1
 		}
 	},
 	setup(e) {
-		let t = _(), n = C(), r = w(), i = T, a = y(u), f = d(e, a), m = s({
-			disabled: f.disabled,
+		let t = h(), n = x(), r = S(), u = C, f = _(c), m = l(e, f), y = a({
+			disabled: m.disabled,
 			error: e.error,
 			helper: e.helper,
-			multiple: O(!0),
+			multiple: E(!0),
 			prefix: "checkbox-group",
 			required: e.required,
-			signal: o(b),
-			validateOn: a?.validateOn,
+			signal: i(v),
+			validateOn: f?.validateOn,
 			value: e.values
 		});
-		m.attachFormField(k({
-			disabled: m.disabled,
-			onReset: m.reset,
+		y.attachFormField(D({
+			disabled: y.disabled,
+			onReset: y.reset,
 			toFormValue: (e) => e,
-			validationMessage: m.validationMessage,
-			validity: m.validity,
-			value: m.formValue
+			validationMessage: y.validationMessage,
+			validity: y.validity,
+			value: y.formValue
 		}));
-		let g = m.selectedValues, x = () => l(t, "ore-checkbox"), j = (e) => c(x(), e), M = (e) => {
-			let t = g.value, r = t.map(j);
+		let k = y.selectedValues, A = () => s(t, "ore-checkbox"), j = (e) => o(A(), e), M = (e) => {
+			let t = k.value, r = t.map(j);
 			n("change", {
 				labels: r,
 				originalEvent: e,
 				values: t
 			});
 		}, N = (e, t) => {
-			m.toggleValue(e), m.triggerValidation("change"), M(t);
+			y.toggleValue(e), y.triggerValidation("change"), M(t);
 		};
-		S(A, {
+		b(O, {
 			color: e.color,
-			disabled: D(() => !!e.disabled.value),
+			disabled: T(() => !!e.disabled.value),
 			size: e.size,
 			toggle: N,
-			values: g
+			values: k
 		});
 		let P = () => {
-			let t = g.value, n = e.color.value, r = e.size.value, i = e.disabled.value, a = x();
+			let t = k.value, n = e.color.value, r = e.size.value, i = e.disabled.value, a = A();
 			for (let e of a) {
 				let a = e.getAttribute("value") ?? "";
 				e.toggleAttribute("checked", t.includes(a)), n ? e.setAttribute("color", n) : e.removeAttribute("color"), r ? e.setAttribute("size", r) : e.removeAttribute("size"), e.toggleAttribute("disabled", !!i);
 			}
 		};
-		i(() => {
+		u(() => {
 			r.elements().value, P();
-		}), i(() => {
+		}), u(() => {
 			r.elements().value;
-			let e = x().map((e) => {
+			let e = A().map((e) => {
 				let t = (t) => {
 					t.stopPropagation();
 					let n = (e.getAttribute("value") ?? "").trim();
@@ -92,11 +90,11 @@ g(j, {
 				for (let t of e) t();
 			};
 		});
-		let F = h("checkbox-group-legend"), I = `${F}-error`, L = `${F}-helper`, R = () => !!e.error.value, z = () => !!e.helper.value && !R();
-		return p({ attr: {
-			size: f.size,
-			values: m.formValue
-		} }), v`
+		let F = p("checkbox-group-legend"), I = `${F}-error`, L = `${F}-helper`, R = () => !!e.error.value, z = () => !!e.helper.value && !R();
+		return d({ attr: {
+			size: m.size,
+			values: y.formValue
+		} }), g`
       <fieldset
         role="group"
         aria-required="${() => String(!!e.required.value)}"
@@ -104,7 +102,7 @@ g(j, {
         aria-errormessage="${() => R() ? I : null}"
         aria-describedby="${() => R() ? I : z() ? L : null}">
         <legend id="${F}" ?hidden=${() => !e.label.value}>
-          ${e.label}${E(() => !!e.required.value, () => v`<span aria-hidden="true"> *</span>`)}
+          ${e.label}${w(() => !!e.required.value, () => g`<span aria-hidden="true"> *</span>`)}
         </legend>
         <div class="checkbox-group-items" part="items">
           <slot></slot>
@@ -114,14 +112,9 @@ g(j, {
       </fieldset>
     `;
 	},
-	styles: [
-		n,
-		e(),
-		t,
-		f
-	]
+	styles: [e, u]
 });
 //#endregion
-export { A as CHECKBOX_GROUP_CTX, j as CHECKBOX_GROUP_TAG };
+export { O as CHECKBOX_GROUP_CTX, k as CHECKBOX_GROUP_TAG };
 
 //# sourceMappingURL=checkbox-group.js.map

package/dist/checkbox-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.js","names":[],"sources":["../src/inputs/checkbox-group/checkbox-group.ts"],"sourcesContent":["import {\n  createContext,\n  createStableId,\n  define,\n  html,\n  inject,\n  prop,\n  bind,\n  getHost,\n  onCleanup,\n  provide,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, type Readable, signal } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport {\n  type ChoiceChangeDetail,\n  lifecycleSignal,\n  createChoiceField,\n  getChoiceLabel,\n  getLightChildrenByTag,\n} from '../../headless';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './checkbox-group.css?inline';\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\nexport type CheckboxGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  disabled: Readable<boolean>;\n  size: Readable<ComponentSize | undefined>;\n  toggle: (value: string, originalEvent?: Event) => void;\n  values: Readable<string[]>;\n};\n\nexport const CHECKBOX_GROUP_CTX = createContext<CheckboxGroupContext>('CheckboxGroupContext');\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type OreCheckboxGroupProps = {\n  /** Theme color — propagated to all child ore-checkbox elements */\n  color?: ThemeColor;\n  /** Disable all checkboxes in the group */\n  disabled?: boolean;\n  /** Error message shown below the group */\n  error?: string;\n  /** Helper text shown below the group */\n  helper?: string;\n  /** Legend / label for the fieldset. Required for accessibility. */\n  label?: string;\n  /** Form field name used during submission */\n  name?: string;\n  /** Layout direction of the checkbox options */\n  orientation?: 'vertical' | 'horizontal';\n  /** Mark the group as required */\n  required?: boolean;\n  /** Size — propagated to all child ore-checkbox elements */\n  size?: ComponentSize;\n  /** Comma-separated list of currently checked values */\n  values?: string;\n};\n\nexport type OreCheckboxGroupEvents = {\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A fieldset wrapper that groups `ore-checkbox` elements, provides shared\n * `color` and `size` via context, and manages multi-value selection state.\n *\n * @element ore-checkbox-group\n *\n * @attr {string} label - Legend text (required for a11y)\n * @attr {string} values - Comma-separated list of checked values\n * @attr {boolean} disabled - Disable all checkboxes in the group\n * @attr {string} error - Error message\n * @attr {string} helper - Helper text\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when selection changes. detail: { value: string, values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-checkbox` elements here\n *\n * @cssprop --checkbox-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --checkbox-group-gap - Gap between checkbox items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-checkbox-group name=\"fruits\" label=\"Favourite fruits\" required>\n *   <ore-checkbox value=\"apple\">Apple</ore-checkbox>\n *   <ore-checkbox value=\"banana\">Banana</ore-checkbox>\n *   <ore-checkbox value=\"cherry\">Cherry</ore-checkbox>\n * </ore-checkbox-group>\n * <ore-checkbox-group name=\"options\" orientation=\"horizontal\" color=\"primary\">\n *   <ore-checkbox value=\"a\">Option A</ore-checkbox>\n *   <ore-checkbox value=\"b\">Option B</ore-checkbox>\n * </ore-checkbox-group>\n * ```\n */\nexport const CHECKBOX_GROUP_TAG = 'ore-checkbox-group' as const;\ndefine<OreCheckboxGroupProps>(CHECKBOX_GROUP_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string(),\n    name: prop.string(),\n    orientation: prop.string('vertical'),\n    required: prop.bool(false),\n    // Not auto-reflected (`reflect: false`) — the derived, interaction-updated selection\n    // (`choice.formValue`) is the single writer for this attribute, via `bind()` below;\n    // letting `prop.string()`'s own default reflection also write the raw incoming value\n    // would leave two effects racing to set the same attribute from different sources.\n    values: { ...prop.string(), reflect: false },\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCheckboxGroupEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    const choice = createChoiceField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      helper: props.helper,\n      multiple: signal(true),\n      prefix: 'checkbox-group',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\n      value: props.values,\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 checkedValues = choice.selectedValues;\n\n    const getCheckboxes = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-checkbox');\n    const getLabelForValue = (value: string): string => getChoiceLabel(getCheckboxes(), value);\n    const emitChange = (originalEvent?: Event) => {\n      const values = checkedValues.value;\n\n      const labels = values.map(getLabelForValue);\n\n      emit('change', { labels, originalEvent, values });\n    };\n\n    const toggleCheckbox = (val: string, originalEvent?: Event) => {\n      choice.toggleValue(val);\n      choice.triggerValidation('change');\n      emitChange(originalEvent);\n    };\n\n    provide(CHECKBOX_GROUP_CTX, {\n      color: props.color,\n      disabled: computed(() => Boolean(props.disabled.value)),\n      size: props.size,\n      toggle: toggleCheckbox,\n      values: checkedValues,\n    });\n\n    // Sync checked state + color/size/disabled onto slotted ore-checkbox children\n    const syncChildren = () => {\n      const values = checkedValues.value;\n      const color = props.color.value;\n      const size = props.size.value;\n      const disabled = props.disabled.value;\n      const checkboxes = getCheckboxes();\n\n      for (const checkbox of checkboxes) {\n        const val = checkbox.getAttribute('value') ?? '';\n\n        checkbox.toggleAttribute('checked', values.includes(val));\n\n        if (color) checkbox.setAttribute('color', color);\n        else checkbox.removeAttribute('color');\n\n        if (size) checkbox.setAttribute('size', size);\n        else checkbox.removeAttribute('size');\n\n        checkbox.toggleAttribute('disabled', Boolean(disabled));\n      }\n    };\n\n    watch(() => {\n      void slots.elements().value;\n      syncChildren();\n    });\n\n    watch(() => {\n      void slots.elements().value;\n\n      const listeners = getCheckboxes().map((checkbox) => {\n        const handler = (event: Event) => {\n          event.stopPropagation();\n\n          const val = (checkbox.getAttribute('value') ?? '').trim();\n\n          if (!val) return;\n\n          toggleCheckbox(val, event);\n        };\n\n        checkbox.addEventListener('change', handler);\n\n        return () => {\n          checkbox.removeEventListener('change', handler);\n        };\n      });\n\n      return () => {\n        for (const dispose of listeners) dispose();\n      };\n    });\n\n    const legendId = createStableId('checkbox-group-legend');\n    const errorId = `${legendId}-error`;\n    const helperId = `${legendId}-helper`;\n    const hasError = () => Boolean(props.error.value);\n    const hasHelper = () => Boolean(props.helper.value) && !hasError();\n\n    // Reactive, not a one-off `el.setAttribute()` inside the click handler: the host's `values`\n    // attribute must stay in sync with the selection regardless of *why* it changed (a click,\n    // or `reset()` on ancestor form reset — neither of which should need its own copy of this).\n    bind({ attr: { size: fCtxProps.size, values: choice.formValue } });\n\n    return html`\n      <fieldset\n        role=\"group\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        aria-invalid=\"${() => String(hasError())}\"\n        aria-errormessage=\"${() => (hasError() ? errorId : null)}\"\n        aria-describedby=\"${() => (hasError() ? errorId : hasHelper() ? helperId : null)}\">\n        <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n          ${props.label}${when(\n            () => Boolean(props.required.value),\n            () => html`<span aria-hidden=\"true\"> *</span>`,\n          )}\n        </legend>\n        <div class=\"checkbox-group-items\" part=\"items\">\n          <slot></slot>\n        </div>\n        <div class=\"error-text\" id=\"${errorId}\" role=\"alert\" ?hidden=${() => !hasError()}>${props.error}</div>\n        <div class=\"helper-text\" id=\"${helperId}\" ?hidden=${() => !hasHelper()}>${props.helper}</div>\n      </fieldset>\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin(), disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"checkbox-group.js","names":[],"sources":["../src/inputs/checkbox-group/checkbox-group.ts"],"sourcesContent":["import {\n  createContext,\n  createStableId,\n  define,\n  html,\n  inject,\n  prop,\n  bind,\n  getHost,\n  onCleanup,\n  provide,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, type Readable, signal } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport {\n  type ChoiceChangeDetail,\n  lifecycleSignal,\n  createChoiceField,\n  getChoiceLabel,\n  getLightChildrenByTag,\n} from '../../headless';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { disabledStateMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './checkbox-group.css?inline';\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\nexport type CheckboxGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  disabled: Readable<boolean>;\n  size: Readable<ComponentSize | undefined>;\n  toggle: (value: string, originalEvent?: Event) => void;\n  values: Readable<string[]>;\n};\n\nexport const CHECKBOX_GROUP_CTX = createContext<CheckboxGroupContext>('CheckboxGroupContext');\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type OreCheckboxGroupProps = {\n  /** Theme color — propagated to all child ore-checkbox elements */\n  color?: ThemeColor;\n  /** Disable all checkboxes in the group */\n  disabled?: boolean;\n  /** Error message shown below the group */\n  error?: string;\n  /** Helper text shown below the group */\n  helper?: string;\n  /** Legend / label for the fieldset. Required for accessibility. */\n  label?: string;\n  /** Form field name used during submission */\n  name?: string;\n  /** Layout direction of the checkbox options */\n  orientation?: 'vertical' | 'horizontal';\n  /** Mark the group as required */\n  required?: boolean;\n  /** Size — propagated to all child ore-checkbox elements */\n  size?: ComponentSize;\n  /** Comma-separated list of currently checked values */\n  values?: string;\n};\n\nexport type OreCheckboxGroupEvents = {\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A fieldset wrapper that groups `ore-checkbox` elements, provides shared\n * `color` and `size` via context, and manages multi-value selection state.\n *\n * @element ore-checkbox-group\n *\n * @attr {string} label - Legend text (required for a11y)\n * @attr {string} values - Comma-separated list of checked values\n * @attr {boolean} disabled - Disable all checkboxes in the group\n * @attr {string} error - Error message\n * @attr {string} helper - Helper text\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when selection changes. detail: { value: string, values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-checkbox` elements here\n *\n * @cssprop --checkbox-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --checkbox-group-gap - Gap between checkbox items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-checkbox-group name=\"fruits\" label=\"Favourite fruits\" required>\n *   <ore-checkbox value=\"apple\">Apple</ore-checkbox>\n *   <ore-checkbox value=\"banana\">Banana</ore-checkbox>\n *   <ore-checkbox value=\"cherry\">Cherry</ore-checkbox>\n * </ore-checkbox-group>\n * <ore-checkbox-group name=\"options\" orientation=\"horizontal\" color=\"primary\">\n *   <ore-checkbox value=\"a\">Option A</ore-checkbox>\n *   <ore-checkbox value=\"b\">Option B</ore-checkbox>\n * </ore-checkbox-group>\n * ```\n */\nexport const CHECKBOX_GROUP_TAG = 'ore-checkbox-group' as const;\ndefine<OreCheckboxGroupProps>(CHECKBOX_GROUP_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string(),\n    name: prop.string(),\n    orientation: prop.string('vertical'),\n    required: prop.bool(false),\n    // Not auto-reflected (`reflect: false`) — the derived, interaction-updated selection\n    // (`choice.formValue`) is the single writer for this attribute, via `bind()` below;\n    // letting `prop.string()`'s own default reflection also write the raw incoming value\n    // would leave two effects racing to set the same attribute from different sources.\n    values: { ...prop.string(), reflect: false },\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCheckboxGroupEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    const choice = createChoiceField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      helper: props.helper,\n      multiple: signal(true),\n      prefix: 'checkbox-group',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\n      value: props.values,\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 checkedValues = choice.selectedValues;\n\n    const getCheckboxes = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-checkbox');\n    const getLabelForValue = (value: string): string => getChoiceLabel(getCheckboxes(), value);\n    const emitChange = (originalEvent?: Event) => {\n      const values = checkedValues.value;\n\n      const labels = values.map(getLabelForValue);\n\n      emit('change', { labels, originalEvent, values });\n    };\n\n    const toggleCheckbox = (val: string, originalEvent?: Event) => {\n      choice.toggleValue(val);\n      choice.triggerValidation('change');\n      emitChange(originalEvent);\n    };\n\n    provide(CHECKBOX_GROUP_CTX, {\n      color: props.color,\n      disabled: computed(() => Boolean(props.disabled.value)),\n      size: props.size,\n      toggle: toggleCheckbox,\n      values: checkedValues,\n    });\n\n    // Sync checked state + color/size/disabled onto slotted ore-checkbox children\n    const syncChildren = () => {\n      const values = checkedValues.value;\n      const color = props.color.value;\n      const size = props.size.value;\n      const disabled = props.disabled.value;\n      const checkboxes = getCheckboxes();\n\n      for (const checkbox of checkboxes) {\n        const val = checkbox.getAttribute('value') ?? '';\n\n        checkbox.toggleAttribute('checked', values.includes(val));\n\n        if (color) checkbox.setAttribute('color', color);\n        else checkbox.removeAttribute('color');\n\n        if (size) checkbox.setAttribute('size', size);\n        else checkbox.removeAttribute('size');\n\n        checkbox.toggleAttribute('disabled', Boolean(disabled));\n      }\n    };\n\n    watch(() => {\n      void slots.elements().value;\n      syncChildren();\n    });\n\n    watch(() => {\n      void slots.elements().value;\n\n      const listeners = getCheckboxes().map((checkbox) => {\n        const handler = (event: Event) => {\n          event.stopPropagation();\n\n          const val = (checkbox.getAttribute('value') ?? '').trim();\n\n          if (!val) return;\n\n          toggleCheckbox(val, event);\n        };\n\n        checkbox.addEventListener('change', handler);\n\n        return () => {\n          checkbox.removeEventListener('change', handler);\n        };\n      });\n\n      return () => {\n        for (const dispose of listeners) dispose();\n      };\n    });\n\n    const legendId = createStableId('checkbox-group-legend');\n    const errorId = `${legendId}-error`;\n    const helperId = `${legendId}-helper`;\n    const hasError = () => Boolean(props.error.value);\n    const hasHelper = () => Boolean(props.helper.value) && !hasError();\n\n    // Reactive, not a one-off `el.setAttribute()` inside the click handler: the host's `values`\n    // attribute must stay in sync with the selection regardless of *why* it changed (a click,\n    // or `reset()` on ancestor form reset — neither of which should need its own copy of this).\n    bind({ attr: { size: fCtxProps.size, values: choice.formValue } });\n\n    return html`\n      <fieldset\n        role=\"group\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        aria-invalid=\"${() => String(hasError())}\"\n        aria-errormessage=\"${() => (hasError() ? errorId : null)}\"\n        aria-describedby=\"${() => (hasError() ? errorId : hasHelper() ? helperId : null)}\">\n        <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n          ${props.label}${when(\n            () => Boolean(props.required.value),\n            () => html`<span aria-hidden=\"true\"> *</span>`,\n          )}\n        </legend>\n        <div class=\"checkbox-group-items\" part=\"items\">\n          <slot></slot>\n        </div>\n        <div class=\"error-text\" id=\"${errorId}\" role=\"alert\" ?hidden=${() => !hasError()}>${props.error}</div>\n        <div class=\"helper-text\" id=\"${helperId}\" ?hidden=${() => !hasHelper()}>${props.helper}</div>\n      </fieldset>\n    `;\n  },\n  styles: [disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/combobox.cjs

@@ -1,36 +1,37 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./headless/ore.cjs"),n=require("./headless/choice-field.cjs"),r=require("./headless/keyboard.cjs"),i=require("./headless/option-list.cjs"),a=require("./inputs/shared/form-context.cjs"),o=require("./inputs/combobox/combobox-options.cjs"),s=require("./inputs/combobox/combobox.css.cjs");let c=require("@vielzeug/ore"),l=require("@vielzeug/ripple"),ee=require("@vielzeug/ore/forms");var u=`ore-combobox`;(0,c.define)(u,{formAssociated:!0,props:{autoclose:c.prop.bool(!1),color:c.prop.string(),creatable:c.prop.bool(!1),disabled:c.prop.bool(!1),error:c.prop.string(),fullwidth:c.prop.bool(!1),helper:c.prop.string(),label:c.prop.string(),"label-placement":c.prop.oneOf([`inset`,`outside`],`inset`),loading:c.prop.bool(!1),multiple:c.prop.bool(!1),name:c.prop.string(),"no-filter":c.prop.bool(!1),options:c.prop.data(),placeholder:c.prop.string(`Select...`),required:c.prop.bool(!1),rounded:c.prop.string(),size:c.prop.string(),value:c.prop.string(),variant:c.prop.string()},setup(e){let s=(0,c.getHost)(),u=(0,c.useEmit)(),d=c.watchEffect,f=(0,c.inject)(a.FORM_CTX),p=a.useFormContext(e,f),m=(0,l.signal)(``),h=null,g=null,_=null,v=null,y=(0,c.ref)(),b=t.lifecycleSignal(c.onCleanup),x=n.createChoiceField({disabled:p.disabled,error:e.error,helper:e.helper,label:e.label,labelPlacement:e[`label-placement`],multiple:e.multiple,prefix:`combobox`,required:e.required,signal:b,validateOn:f?.validateOn,value:e.value}),S=(0,l.signal)([]),C=i.createOptionList({getBoundary:()=>s,getFocusedOptionElement:()=>_?.querySelector(`[data-focused]`)??null,getItems:()=>S.value,getOptionId:e=>`${x.fieldId}-opt-${e}`,getPanel:()=>_,getReference:()=>g,getTrigger:()=>h,isDisabled:()=>x.disabled.value,onClose:e=>{u(`close`,{reason:e}),b.aborted||fe(),x.triggerValidation(`blur`)},onOpen:e=>u(`open`,{reason:e}),restoreFocus:!1,signal:b}),{disabled:w,fieldId:T,selectedValues:E,triggerValidation:D}=x;x.attachFormField((0,ee.useField)({disabled:x.disabled,onReset:x.reset,toFormValue:e=>e,validationMessage:x.validationMessage,validity:x.validity,value:x.formValue}));let{focusedIndex:O,isOpen:k,scrollFocusedIntoView:te,updatePosition:ne}=C,A=()=>!!e.multiple.value,re=()=>!!e.creatable.value,ie=()=>!!e[`no-filter`].value;(0,c.bind)({attr:{open:()=>k.value?!0:void 0,size:p.size,variant:p.variant}});let j=null,M=!1,N=(0,l.computed)(()=>E.value[0]??``);Object.defineProperty(s,"value",{configurable:!0,get:()=>A()?E.value:N.value,set:e=>{let t=e;if(Array.isArray(t)){x.setValues(t.map(e=>String(e??``)));return}if(t==null||t===``){x.clear();return}x.setValues([String(t)])}});let ae=()=>E.value.length>0;function P(){h?.focus()}let F=(0,l.signal)([]),I=(0,l.signal)([]),oe=()=>!!e.loading.value;function se(e){return{disabled:!!e.disabled,iconEl:e.iconEl??null,label:e.label??e.value,value:e.value}}let L=(0,l.computed)(()=>{let t=e.options.value,n=Array.isArray(t)?t.map(se):F.value;return I.value.length===0?n:[...n,...I.value]}),R={clear:()=>{x.clear()},remove:e=>{x.removeValue(e)},select:e=>{x.selectValue(e)},toggle:e=>{x.toggleValue(e)}};function z(e=Array.from(s.children)){if(F.value=o.parseSlottedOptions(e),!A()){let e=L.value.find(e=>e.value===N.value);m.value=e?.label??N.value}}z(),d(()=>{let e=o.filterOptions(L.value,m.value,ie());S.value=A()?e.filter(e=>!E.value.includes(e.value)):e});let B=(0,l.computed)(()=>o.getCreatableLabel(m.value,re(),S.value)),ce=()=>A()&&E.value.length>0?``:e.placeholder.value||``,le=(0,l.computed)(()=>E.value),ue=(0,l.computed)(()=>E.value.map(e=>L.value.find(t=>t.value===e)?.label??e));function V(e){u(`change`,{labels:ue.value,originalEvent:e,values:le.value})}function de(e){e.stopPropagation();let t=e.detail?.value;t!==void 0&&(R.remove(t),V(e),D(`change`))}function fe(){if(!A()){let e=L.value.find(e=>e.value===N.value);M=!0,m.value=e?.label??``,Promise.resolve().then(()=>{M=!1});return}m.value=``}d(()=>{if(k.value&&!A()&&N.value&&O.value===-1&&m.value===``){let e=S.value.findIndex(e=>e.value===N.value);e>=0&&C.set(e)}});function H(e=!0,t=`programmatic`){if(e&&(j=m.value,m.value=``),!A()&&N.value){let e=o.filterOptions(L.value,``,ie()).findIndex(e=>e.value===N.value);e>=0&&C.set(e)}C.open(t),!A()&&N.value&&O.value>=0&&requestAnimationFrame(()=>{te()})}function U(e=`programmatic`){C.close(e)}let pe=r.createInteraction({disabled:w,onPress:()=>{k.value||H(!0,`click`),P()}}),me=r.createInteraction({disabled:w,keys:[`Enter`],onPress:e=>{let t=S.value;k.value&&O.value>=0&&O.value<t.length?W(t[O.value],e):k.value&&O.value===-1&&B.value?Y(m.value,e):k.value||H(!0,`keyboard`)}});function W(t,n){t.disabled||(A()?(R.toggle(t.value),m.value=``,V(n),D(`change`),e.autoclose.value&&U(),P(),requestAnimationFrame(()=>P())):(R.select(t.value),m.value=t.label,V(n),D(`change`),U(),P()))}function G(e){let t=e.getAttribute(`data-option-index`),n=t?Number(t):-1;if(Number.isInteger(n)&&n>=0&&n<S.value.length)return S.value[n]??null;let r=e.getAttribute(`data-option-value`);if(r){let e=S.value.find(e=>e.value===r);if(e)return e}let i=e.querySelector(`span`)?.textContent?.trim()??e.textContent?.trim()??``;return i?S.value.find(e=>e.label===i||e.value===i)??null:null}function he(e){e.stopPropagation(),R.clear(),m.value=``,V(e),D(`change`),P()}function K(e){let t=e.target,n=t.value;if(!M&&n!==m.value){if(m.value=n,!A()){let e=E.value[0],t=e?L.value.find(t=>t.value===e)?.label??e:``;n===``&&j===t&&(j=null)}C.navigate(`first`),k.value||H(!1,`keyboard`),u(`search`,{query:t.value})}}function q(){}function J(e){if(!w.value&&!C.handleKeydown(e))switch(e.key){case`ArrowDown`:e.preventDefault(),k.value?C.navigate(`next`):(H(!0,`keyboard`),C.navigate(`first`));break;case`ArrowUp`:e.preventDefault(),k.value?C.navigate(`prev`):H(!0,`keyboard`);break;case`Backspace`:A()&&!m.value&&E.value.length>0&&(x.removeValue(E.value[E.value.length-1]??``),V(e),D(`change`));break;case`Enter`:me.handleKeydown(e);break;case`Tab`:U(`programmatic`);break;default:break}}function Y(e,t){let n=e.trim();if(!n)return;let r={disabled:!1,iconEl:null,label:n,value:o.makeCreatableValue(n)};I.value=[...I.value,r],W(r,t)}let ge=(()=>{let e=new MutationObserver(()=>{z()});return e.observe(s,{attributeFilter:[`disabled`,`label`,`value`],attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()})(),X=e=>{let t=e.target;if(!(t instanceof Element))return;let n=t.closest(`.option`);if(!n)return;let r=G(n);if(!r||r.disabled)return;let i=S.value.findIndex(e=>e.value===r.value);i>=0&&C.set(i)},Z=s.shadowRoot;Z&&Z.addEventListener(`pointermove`,X);let _e=e=>{let t=e=>{let t=e.target;if(!(t instanceof Element))return;if(t.closest(`.no-results-create`)){e.preventDefault(),e.stopPropagation(),Y(m.value,e);return}let n=t.closest(`.option`);if(!n)return;e.preventDefault(),e.stopPropagation();let r=G(n);r&&W(r,e)},n=e=>{let t=e.target;if(!(t instanceof Element))return;let n=t.closest(`.option`);if(!n)return;let r=G(n);if(!r)return;let i=S.value.findIndex(e=>e.value===r.value);i>=0&&C.set(i)};return e.addEventListener(`click`,t),e.addEventListener(`pointermove`,n),()=>{e.removeEventListener(`click`,t),e.removeEventListener(`pointermove`,n)}},Q=null,$=null,ve=e=>{v=e,$!==e&&(Q?.(),Q=null,$=null,e&&(Q=_e(e),$=e))},ye=()=>{v&&($===v&&Q||(Q?.(),Q=_e(v),$=v))};return d(()=>{ye(),k.value?(_&&`showPopover`in _&&!_.matches(`:popover-open`)&&_.showPopover(),ne()):_&&`hidePopover`in _&&_.matches(`:popover-open`)&&_.hidePopover()}),(0,c.onElement)(y,e=>{g=e;let t=e.shadowRoot?.querySelector(`input`)??null;if(!t)return;h=t,t.setAttribute(`role`,`combobox`),t.setAttribute(`autocomplete`,`off`),t.setAttribute(`aria-autocomplete`,`list`),t.setAttribute(`aria-haspopup`,`listbox`),t.setAttribute(`spellcheck`,`false`),t.setAttribute(`aria-controls`,`${T}-listbox`);let n=()=>{k.value||H(!0,`click`),P()};return t.addEventListener(`input`,K),t.addEventListener(`keydown`,J),t.addEventListener(`focus`,q),t.addEventListener(`click`,n),()=>{h=null,g=null,t.removeEventListener(`input`,K),t.removeEventListener(`keydown`,J),t.removeEventListener(`focus`,q),t.removeEventListener(`click`,n)}}),d(()=>{if(!y.value)return;let t=h;t&&(t.setAttribute(`aria-expanded`,String(k.value)),w.value?t.setAttribute(`aria-disabled`,`true`):t.removeAttribute(`aria-disabled`),e.error.value?(t.setAttribute(`aria-invalid`,`true`),t.setAttribute(`aria-errormessage`,`${T}-error`)):(t.removeAttribute(`aria-invalid`),t.removeAttribute(`aria-errormessage`)))}),d(()=>{if(!y.value)return;let e=h;e&&e.value!==m.value&&(e.value=m.value)}),(0,c.onCleanup)(()=>{Z?.removeEventListener(`pointermove`,X),Q?.(),Q=null,$=null,ge()}),c.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./headless/ore.cjs"),i=require("./headless/choice-field.cjs"),a=require("./headless/keyboard.cjs"),ee=require("./headless/option-list.cjs"),o=require("./inputs/shared/form-context.cjs"),s=require("./inputs/combobox/combobox-options.cjs"),c=require("./inputs/combobox/combobox.css.cjs");let l=require("@vielzeug/ore"),u=require("@vielzeug/ripple"),te=require("@vielzeug/ore/forms");var d=`ore-combobox`;(0,l.define)(d,{formAssociated:!0,props:{autoclose:l.prop.bool(!1),color:l.prop.string(),creatable:l.prop.bool(!1),disabled:l.prop.bool(!1),error:l.prop.string(),fullwidth:l.prop.bool(!1),helper:l.prop.string(),label:l.prop.string(),"label-placement":l.prop.oneOf([`inset`,`outside`],`inset`),loading:l.prop.bool(!1),multiple:l.prop.bool(!1),name:l.prop.string(),"no-filter":l.prop.bool(!1),options:l.prop.data(),placeholder:l.prop.string(`Select...`),required:l.prop.bool(!1),rounded:l.prop.string(),size:l.prop.string(),success:l.prop.bool(!1),value:l.prop.string(),variant:l.prop.string()},setup(e){let t=(0,l.getHost)(),n=(0,l.useEmit)(),c=l.watchEffect,d=(0,l.inject)(o.FORM_CTX),f=o.useFormContext(e,d),p=(0,u.signal)(``),m=null,h=null,g=null,_=null,v=(0,l.ref)(),y=r.lifecycleSignal(l.onCleanup),b=i.createChoiceField({disabled:f.disabled,error:e.error,helper:e.helper,label:e.label,labelPlacement:e[`label-placement`],multiple:e.multiple,prefix:`combobox`,required:e.required,signal:y,validateOn:d?.validateOn,value:e.value}),x=(0,u.signal)([]),S=ee.createOptionList({getBoundary:()=>t,getFocusedOptionElement:()=>g?.querySelector(`[data-focused]`)??null,getItems:()=>x.value,getOptionId:e=>`${b.fieldId}-opt-${e}`,getPanel:()=>g,getReference:()=>h,getTrigger:()=>m,isDisabled:()=>b.disabled.value,onClose:e=>{n(`close`,{reason:e}),y.aborted||pe(),b.triggerValidation(`blur`)},onOpen:e=>n(`open`,{reason:e}),restoreFocus:!1,signal:y}),{disabled:C,fieldId:w,selectedValues:T,triggerValidation:E}=b;b.attachFormField((0,te.useField)({disabled:b.disabled,onReset:b.reset,toFormValue:e=>e,validationMessage:b.validationMessage,validity:b.validity,value:b.formValue}));let{focusedIndex:D,isOpen:O,scrollFocusedIntoView:ne,updatePosition:re}=S,k=()=>!!e.multiple.value,ie=()=>!!e.creatable.value,ae=()=>!!e[`no-filter`].value;(0,l.bind)({attr:{open:()=>O.value?!0:void 0,size:f.size,variant:f.variant}});let A=null,j=!1,M=(0,u.computed)(()=>T.value[0]??``);Object.defineProperty(t,"value",{configurable:!0,get:()=>k()?T.value:M.value,set:e=>{let t=e;if(Array.isArray(t)){b.setValues(t.map(e=>String(e??``)));return}if(t==null||t===``){b.clear();return}b.setValues([String(t)])}});let oe=()=>T.value.length>0;function N(){m?.focus()}let P=(0,u.signal)([]),F=(0,u.signal)([]),se=()=>!!e.loading.value;function ce(e){return{disabled:!!e.disabled,iconEl:e.iconEl??null,label:e.label??e.value,value:e.value}}let I=(0,u.computed)(()=>{let t=e.options.value,n=Array.isArray(t)?t.map(ce):P.value;return F.value.length===0?n:[...n,...F.value]}),L={clear:()=>{b.clear()},remove:e=>{b.removeValue(e)},select:e=>{b.selectValue(e)},toggle:e=>{b.toggleValue(e)}};function R(e=Array.from(t.children)){if(P.value=s.parseSlottedOptions(e),!k()){let e=I.value.find(e=>e.value===M.value);p.value=e?.label??M.value}}R(),c(()=>{let e=s.filterOptions(I.value,p.value,ae());x.value=k()?e.filter(e=>!T.value.includes(e.value)):e});let z=(0,u.computed)(()=>s.getCreatableLabel(p.value,ie(),x.value)),le=()=>k()&&T.value.length>0?``:e.placeholder.value||``,ue=(0,u.computed)(()=>T.value),de=(0,u.computed)(()=>T.value.map(e=>I.value.find(t=>t.value===e)?.label??e));function B(e){n(`change`,{labels:de.value,originalEvent:e,values:ue.value})}function fe(e){e.stopPropagation();let t=e.detail?.value;t!==void 0&&(L.remove(t),B(e),E(`change`))}function pe(){if(!k()){let e=I.value.find(e=>e.value===M.value);j=!0,p.value=e?.label??``,Promise.resolve().then(()=>{j=!1});return}p.value=``}c(()=>{if(O.value&&!k()&&M.value&&D.value===-1&&p.value===``){let e=x.value.findIndex(e=>e.value===M.value);e>=0&&S.set(e)}});function V(e=!0,t=`programmatic`){if(e&&(A=p.value,p.value=``),!k()&&M.value){let e=s.filterOptions(I.value,``,ae()).findIndex(e=>e.value===M.value);e>=0&&S.set(e)}S.open(t),!k()&&M.value&&D.value>=0&&requestAnimationFrame(()=>{ne()})}function H(e=`programmatic`){S.close(e)}let me=a.createInteraction({disabled:C,onPress:()=>{O.value||V(!0,`click`),N()}}),he=a.createInteraction({disabled:C,keys:[`Enter`],onPress:e=>{let t=x.value;O.value&&D.value>=0&&D.value<t.length?U(t[D.value],e):O.value&&D.value===-1&&z.value?J(p.value,e):O.value||V(!0,`keyboard`)}});function U(t,n){t.disabled||(k()?(L.toggle(t.value),p.value=``,B(n),E(`change`),e.autoclose.value&&H(),N(),requestAnimationFrame(()=>N())):(L.select(t.value),p.value=t.label,B(n),E(`change`),H(),N()))}function W(e){let t=e.getAttribute(`data-option-index`),n=t?Number(t):-1;if(Number.isInteger(n)&&n>=0&&n<x.value.length)return x.value[n]??null;let r=e.getAttribute(`data-option-value`);if(r){let e=x.value.find(e=>e.value===r);if(e)return e}let i=e.querySelector(`span`)?.textContent?.trim()??e.textContent?.trim()??``;return i?x.value.find(e=>e.label===i||e.value===i)??null:null}function ge(e){e.stopPropagation(),L.clear(),p.value=``,B(e),E(`change`),N()}function G(e){let t=e.target,r=t.value;if(!j&&r!==p.value){if(p.value=r,!k()){let e=T.value[0],t=e?I.value.find(t=>t.value===e)?.label??e:``;r===``&&A===t&&(A=null)}S.navigate(`first`),O.value||V(!1,`keyboard`),n(`search`,{query:t.value})}}function K(){}function q(e){if(!C.value&&!S.handleKeydown(e))switch(e.key){case`ArrowDown`:e.preventDefault(),O.value?S.navigate(`next`):(V(!0,`keyboard`),S.navigate(`first`));break;case`ArrowUp`:e.preventDefault(),O.value?S.navigate(`prev`):V(!0,`keyboard`);break;case`Backspace`:k()&&!p.value&&T.value.length>0&&(b.removeValue(T.value[T.value.length-1]??``),B(e),E(`change`));break;case`Enter`:he.handleKeydown(e);break;case`Tab`:H(`programmatic`);break;default:break}}function J(e,t){let n=e.trim();if(!n)return;let r={disabled:!1,iconEl:null,label:n,value:s.makeCreatableValue(n)};F.value=[...F.value,r],U(r,t)}let _e=(()=>{let e=new MutationObserver(()=>{R()});return e.observe(t,{attributeFilter:[`disabled`,`label`,`value`],attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()})(),Y=e=>{let t=e.target;if(!(t instanceof Element))return;let n=t.closest(`.option`);if(!n)return;let r=W(n);if(!r||r.disabled)return;let i=x.value.findIndex(e=>e.value===r.value);i>=0&&S.set(i)},X=t.shadowRoot;X&&X.addEventListener(`pointermove`,Y);let Z=e=>{let t=e=>{let t=e.target;if(!(t instanceof Element))return;if(t.closest(`.no-results-create`)){e.preventDefault(),e.stopPropagation(),J(p.value,e);return}let n=t.closest(`.option`);if(!n)return;e.preventDefault(),e.stopPropagation();let r=W(n);r&&U(r,e)},n=e=>{let t=e.target;if(!(t instanceof Element))return;let n=t.closest(`.option`);if(!n)return;let r=W(n);if(!r)return;let i=x.value.findIndex(e=>e.value===r.value);i>=0&&S.set(i)};return e.addEventListener(`click`,t),e.addEventListener(`pointermove`,n),()=>{e.removeEventListener(`click`,t),e.removeEventListener(`pointermove`,n)}},Q=null,$=null,ve=e=>{_=e,$!==e&&(Q?.(),Q=null,$=null,e&&(Q=Z(e),$=e))},ye=()=>{_&&($===_&&Q||(Q?.(),Q=Z(_),$=_))};return c(()=>{ye(),O.value?(g&&`showPopover`in g&&!g.matches(`:popover-open`)&&g.showPopover(),re()):g&&`hidePopover`in g&&g.matches(`:popover-open`)&&g.hidePopover()}),(0,l.onElement)(v,e=>{h=e;let t=e.shadowRoot?.querySelector(`input`)??null;if(!t)return;m=t,t.setAttribute(`role`,`combobox`),t.setAttribute(`autocomplete`,`off`),t.setAttribute(`aria-autocomplete`,`list`),t.setAttribute(`aria-haspopup`,`listbox`),t.setAttribute(`spellcheck`,`false`),t.setAttribute(`aria-controls`,`${w}-listbox`);let n=()=>{O.value||V(!0,`click`),N()};return t.addEventListener(`input`,G),t.addEventListener(`keydown`,q),t.addEventListener(`focus`,K),t.addEventListener(`click`,n),()=>{m=null,h=null,t.removeEventListener(`input`,G),t.removeEventListener(`keydown`,q),t.removeEventListener(`focus`,K),t.removeEventListener(`click`,n)}}),c(()=>{if(!v.value)return;let t=m;t&&(t.setAttribute(`aria-expanded`,String(O.value)),C.value?t.setAttribute(`aria-disabled`,`true`):t.removeAttribute(`aria-disabled`),e.error.value?(t.setAttribute(`aria-invalid`,`true`),t.setAttribute(`aria-errormessage`,`${w}-error`)):(t.removeAttribute(`aria-invalid`),t.removeAttribute(`aria-errormessage`)))}),c(()=>{if(!v.value)return;let e=m;e&&e.value!==p.value&&(e.value=p.value)}),(0,l.onCleanup)(()=>{X?.removeEventListener(`pointermove`,Y),Q?.(),Q=null,$=null,_e()}),l.html`
       <slot></slot>
       <ore-input
         class="trigger"
-        ref=${y}
+        ref=${v}
         :label="${()=>e.label.value??``}"
-        :placeholder="${ce}"
+        :placeholder="${le}"
         :label-placement="${()=>e[`label-placement`].value??`inset`}"
         :color="${()=>e.color?.value??void 0}"
-        :size="${()=>p.size?.value??void 0}"
-        :variant="${()=>p.variant?.value??void 0}"
+        :size="${()=>f.size?.value??void 0}"
+        :variant="${()=>f.variant?.value??void 0}"
         :rounded="${()=>e.rounded?.value??void 0}"
         :helper="${()=>e.helper.value??``}"
         :error="${()=>e.error.value??``}"
-        ?disabled="${w}"
+        ?disabled="${C}"
         ?required="${()=>!1}"
         ?fullwidth="${()=>e.fullwidth.value?!0:void 0}"
+        ?success="${()=>e.success.value}"
         :name="${()=>e.name.value??``}"
-        @click="${e=>{pe.handleClick(e)}}"
+        @click="${e=>{me.handleClick(e)}}"
         part="wrapper">
         <div slot="prefix" class="chips-row">
           <!-- Keep chip list diffing isolated so input node identity stays stable. -->
           <span class="chips-list">
-            ${()=>(A()?E.value:[]).map(t=>c.html`
+            ${()=>(k()?T.value:[]).map(t=>l.html`
                   <ore-chip
                     value=${t}
-                    label=${L.value.find(e=>e.value===t)?.label??t}
+                    label=${I.value.find(e=>e.value===t)?.label??t}
                     mode="removable"
                     variant="flat"
                     size="sm"
                     color="${e.color}"
-                    @remove=${de}>
-                    ${L.value.find(e=>e.value===t)?.label??t}
+                    @remove=${fe}>
+                    ${I.value.find(e=>e.value===t)?.label??t}
                   </ore-chip>
                 `)}
           </span>
@@ -42,8 +43,8 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
             type="button"
             aria-label="Clear"
             tabindex="-1"
-            ?hidden=${()=>!ae()}
-            @click="${he}">
+            ?hidden=${()=>!oe()}
+            @click="${ge}">
             <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
           </button>
           <span class="combobox-suffix-end">
@@ -56,7 +57,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
       </ore-input>
       <span
         class="sr-only"
-        id="${()=>`${T}-error`}"
+        id="${()=>`${w}-error`}"
         role="alert"
         aria-live="assertive"
         ?hidden="${()=>!e.error.value}"
@@ -65,32 +66,32 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
       <div
         class="dropdown"
         part="dropdown"
-        id="${()=>`${T}-dropdown`}"
+        id="${()=>`${w}-dropdown`}"
         popover="manual"
-        ?data-open=${()=>k.value}
-        ref=${e=>{_=e}}>
+        ?data-open=${()=>O.value}
+        ref=${e=>{g=e}}>
         <div
           role="listbox"
-          id="${()=>`${T}-listbox`}"
-          :style="${()=>k.value&&S.value.length>0?`height:${S.value.length*36}px;`:``}"
+          id="${()=>`${w}-listbox`}"
+          :style="${()=>O.value&&x.value.length>0?`height:${x.value.length*36}px;`:``}"
           aria-label="${()=>e.label.value||e.placeholder.value||`Options`}"
           ref=${e=>{ve(e)}}>
-          ${()=>k.value?oe()?c.html`<div class="dropdown-loading">Loading...</div>`:S.value.length===0?B.value?c.html`<button
+          ${()=>O.value?se()?l.html`<div class="dropdown-loading">Loading...</div>`:x.value.length===0?z.value?l.html`<button
                   type="button"
                   class="no-results-create"
-                  ?data-focused=${()=>O.value===-1}>
-                  ${B.value}
-                </button>`:c.html`<div class="no-results" role="presentation">No results found</div>`:S.value.map((e,t)=>c.html`<div
+                  ?data-focused=${()=>D.value===-1}>
+                  ${z.value}
+                </button>`:l.html`<div class="no-results" role="presentation">No results found</div>`:x.value.map((e,t)=>l.html`<div
                 class="option"
                 role="option"
-                id="${`${T}-opt-${t}`}"
+                id="${`${w}-opt-${t}`}"
                 data-option-index="${t}"
                 data-option-value="${e.value}"
-                :aria-selected="${()=>String(A()?E.value.includes(e.value):N.value===e.value)}"
+                :aria-selected="${()=>String(k()?T.value.includes(e.value):M.value===e.value)}"
                 aria-disabled="${String(e.disabled)}"
                 style="${`position:absolute;top:0;left:0;right:0;transform:translateY(${t*36}px);`}"
-                ?data-focused=${()=>O.value===t}
-                ?data-selected=${()=>A()?E.value.includes(e.value):N.value===e.value}
+                ?data-focused=${()=>D.value===t}
+                ?data-selected=${()=>k()?T.value.includes(e.value):M.value===e.value}
                 ?data-disabled=${e.disabled}>
                 <span>${e.label}</span>
                 <span class="option-check" aria-hidden="true"
@@ -99,5 +100,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               </div>`):``}
         </div>
       </div>
-    `},shadow:{delegatesFocus:!0},styles:[e.reducedMotionMixin,e.srOnlyMixin,s.default]}),exports.COMBOBOX_TAG=u;
+    `},shadow:{delegatesFocus:!0},styles:[n.colorThemeMixin,e.reducedMotionMixin,t.roundedVariantMixin,e.srOnlyMixin,c.default]}),exports.COMBOBOX_TAG=d;
 //# sourceMappingURL=combobox.cjs.map