@vielzeug/refine 2.1.0 → 2.1.2

package/dist/checkbox.js

@@ -1,9 +1,9 @@
-import { lifecycleSignal as e } from "./core/ore.js";
-import { createCheckable as t } from "./core/checkable.js";
-import { coarsePointerMixin as n } from "./styles/mixins/accessibility.css.js";
-import { sizeVariantMixin as r } from "./styles/mixins/shape.css.js";
-import { disabledStateMixin as i } from "./styles/mixins/states.css.js";
-import { colorThemeMixin as a, forcedColorsFormControlMixin as o } from "./styles/mixins/theme.css.js";
+import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
+import { sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
+import { disabledStateMixin as n } from "./styles/mixins/states.css.js";
+import { colorThemeMixin as r, forcedColorsFormControlMixin as i } from "./styles/mixins/theme.css.js";
+import { createCheckable as a } from "./core/checkable.js";
+import { lifecycleSignal as o } from "./core/ore.js";
 import { disablableBundle as s, sizableBundle as c, themableBundle as l } from "./shared/prop-bundles.js";
 import { CONTROL_SIZE_PRESET as u } from "./shared/size-presets.js";
 import { applyCheckableBinding as d } from "./inputs/shared/field-binding.js";
@@ -29,36 +29,36 @@ v(E, {
 		required: C.bool(!1),
 		value: C.string("on")
 	},
-	setup(n) {
-		let r = y(), i = x(p), a = t({
-			checked: n.checked,
+	setup(e) {
+		let t = y(), n = x(p), r = a({
+			checked: e.checked,
 			clearIndeterminateFirst: !0,
-			disabled: T(() => n.disabled.value || !!i?.disabled.value),
-			error: n.error,
-			group: i,
-			helper: n.helper,
-			indeterminate: n.indeterminate,
+			disabled: T(() => e.disabled.value || !!n?.disabled.value),
+			error: e.error,
+			group: n,
+			helper: e.helper,
+			indeterminate: e.indeterminate,
 			onToggle: (e) => {
-				a.triggerValidation("change"), g(r, e.checked), !i && (h(r, "input"), h(r, "change"));
+				r.triggerValidation("change"), g(t, e.checked), !n && (h(t, "input"), h(t, "change"));
 			},
 			prefix: "checkbox",
-			required: n.required,
-			signal: e(S),
-			value: n.value
+			required: e.required,
+			signal: o(S),
+			value: e.value
 		});
-		a.attachFormField(w({
-			disabled: a.disabled,
-			onReset: a.reset,
+		r.attachFormField(w({
+			disabled: r.disabled,
+			onReset: r.reset,
 			toFormValue: (e) => e,
-			validationMessage: a.validationMessage,
-			validity: a.validity,
-			value: a.checkableFormValue
+			validationMessage: r.validationMessage,
+			validity: r.validity,
+			value: r.checkableFormValue
 		}));
-		let { assistiveId: o, checked: s, disabled: c, errorText: l, handleClick: u, handleKeydown: _, helperText: v, indeterminate: C, labelId: E } = a;
-		return m(r, () => s.value, (e) => {
+		let { assistiveId: i, checked: s, disabled: c, errorText: l, handleClick: u, handleKeydown: _, helperText: v, indeterminate: C, labelId: E } = r;
+		return m(t, () => s.value, (e) => {
 			s.value = e;
-		}), d(n.size, {
-			assistiveId: o,
+		}), d(e.size, {
+			assistiveId: i,
 			checked: s,
 			disabled: c,
 			errorText: l,
@@ -67,7 +67,7 @@ v(E, {
 			helperText: v,
 			indeterminate: C,
 			labelId: E,
-			required: n.required
+			required: e.required
 		}, "checkbox"), b`
       <div class="checkbox-wrapper" part="checkbox">
         <div class="box" part="box">
@@ -76,15 +76,15 @@ v(E, {
         </div>
       </div>
       <span class="label" part="label" id="${E}"><slot></slot></span>
-      ${f(o, l, v)}
+      ${f(i, l, v)}
     `;
 	},
 	styles: [
-		a,
-		o,
+		r,
 		i,
 		n,
-		r(u),
+		e,
+		t(u),
 		_
 	]
 });

package/dist/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":[],"sources":["../src/inputs/checkbox/checkbox.ts"],"sourcesContent":["import { define, html, inject, prop, getHost, onCleanup } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\n\nimport { lifecycleSignal, createCheckable } from '../../core';\nimport '../../content/icon/icon';\nimport { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport { CHECKBOX_GROUP_CTX } from '../checkbox-group/checkbox-group';\nimport { applyCheckableBinding } from '../shared/field-binding';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './checkbox.css?inline';\n\nexport type OreCheckboxEvents = {\n  change: Event;\n  input: Event;\n};\n\nexport type OreCheckboxProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the checkbox */\n  helper?: string;\n  /** Indeterminate state (partially checked) */\n  indeterminate?: boolean;\n  /** Require this checkbox to be checked for native form validation (e.g. a consent checkbox) */\n  required?: boolean;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A customizable checkbox component with theme colors, sizes, and indeterminate state support.\n *\n * @element ore-checkbox\n *\n * @attr {boolean} checked - Checked state\n * @attr {boolean} disabled - Disable checkbox interaction\n * @attr {boolean} indeterminate - Indeterminate (partially checked) state\n * @attr {boolean} required - Require this checkbox to be checked for native form validation\n * @attr {string} value - Field value submitted with forms\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Checkbox size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the checkbox\n *\n * @fires input - Emitted when checkbox is toggled.\n * @fires change - Emitted when checkbox is toggled.\n *\n * @slot - Checkbox label text\n *\n * @cssprop --checkbox-size - Control size (width and height)\n * @cssprop --checkbox-radius - Control border radius\n * @cssprop --checkbox-bg - Unchecked background color\n * @cssprop --checkbox-border-color - Unchecked border color\n * @cssprop --checkbox-checked-bg - Checked/indeterminate background color\n * @cssprop --checkbox-color - Checkmark icon color\n * @cssprop --checkbox-font-size - Label font size\n * @part checkbox - The checkbox wrapper element\n * @part box - The visual checkbox box\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-checkbox name=\"agree\" required>I agree to the terms</ore-checkbox>\n * <ore-checkbox checked color=\"primary\" size=\"lg\">Enabled by default</ore-checkbox>\n * <ore-checkbox error=\"This field is required\" helper=\"Check to continue\">Accept</ore-checkbox>\n * ```\n */\nexport const CHECKBOX_TAG = 'ore-checkbox' as const;\ndefine<OreCheckboxProps>(CHECKBOX_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    indeterminate: prop.bool(false),\n    name: prop.string(),\n    required: prop.bool(false),\n    value: prop.string('on'),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const groupCtx = inject(CHECKBOX_GROUP_CTX);\n\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: true,\n      disabled: computed(() => props.disabled.value || Boolean(groupCtx?.disabled.value)),\n      error: props.error,\n      group: groupCtx,\n      helper: props.helper,\n      indeterminate: props.indeterminate,\n      onToggle: (payload) => {\n        checkable.triggerValidation('change');\n        setFieldChecked(el, payload.checked);\n\n        // In a checkbox-group, the group owns change emission/state updates.\n        // Emitting here would bubble to the group and toggle a second time.\n        if (groupCtx) return;\n\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      prefix: 'checkbox',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        onReset: checkable.reset,\n        toFormValue: (v) => v,\n        validationMessage: checkable.validationMessage,\n        validity: checkable.validity,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const {\n      assistiveId,\n      checked,\n      disabled,\n      errorText,\n      handleClick,\n      handleKeydown,\n      helperText,\n      indeterminate,\n      labelId,\n    } = checkable;\n\n    defineFieldChecked(\n      el,\n      () => checked.value,\n      (value) => {\n        checked.value = value;\n      },\n    );\n\n    applyCheckableBinding(\n      props.size,\n      {\n        assistiveId,\n        checked,\n        disabled,\n        errorText,\n        handleClick,\n        handleKeydown,\n        helperText,\n        indeterminate,\n        labelId,\n        required: props.required,\n      },\n      'checkbox',\n    );\n\n    return html`\n      <div class=\"checkbox-wrapper\" part=\"checkbox\">\n        <div class=\"box\" part=\"box\">\n          <ore-icon class=\"checkmark\" name=\"check\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          <ore-icon class=\"dash\" name=\"minus\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    coarsePointerMixin,\n    sizeVariantMixin(CONTROL_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":";;;;;;;;;;;;;;;;AAoFA,IAAa,IAAe;AAC5B,EAAyB,GAAc;CACrC,gBAAgB;CAChB,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,SAAS,EAAK,KAAK,EAAK;EACxB,OAAO,EAAK,OAAO;EACnB,QAAQ,EAAK,OAAO;EACpB,eAAe,EAAK,KAAK,EAAK;EAC9B,MAAM,EAAK,OAAO;EAClB,UAAU,EAAK,KAAK,EAAK;EACzB,OAAO,EAAK,OAAO,IAAI;CACzB;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GAEb,IAAW,EAAO,CAAkB,GAEpC,IAAY,EAAgB;GAChC,SAAS,EAAM;GACf,yBAAyB;GACzB,UAAU,QAAe,EAAM,SAAS,SAAS,EAAQ,GAAU,SAAS,KAAM;GAClF,OAAO,EAAM;GACb,OAAO;GACP,QAAQ,EAAM;GACd,eAAe,EAAM;GACrB,WAAW,MAAY;IACrB,EAAU,kBAAkB,QAAQ,GACpC,EAAgB,GAAI,EAAQ,OAAO,GAI/B,OAEJ,EAAyB,GAAI,OAAO,GACpC,EAAyB,GAAI,QAAQ;GACvC;GACA,QAAQ;GACR,UAAU,EAAM;GAChB,QAAQ,EAAgB,CAAS;GACjC,OAAO,EAAM;EACf,CAAC;EAED,EAAU,gBACR,EAAwB;GACtB,UAAU,EAAU;GACpB,SAAS,EAAU;GACnB,cAAc,MAAM;GACpB,mBAAmB,EAAU;GAC7B,UAAU,EAAU;GACpB,OAAO,EAAU;EACnB,CAAC,CACH;EAEA,IAAM,EACJ,gBACA,YACA,aACA,cACA,gBACA,kBACA,eACA,kBACA,eACE;EA2BJ,OAzBA,EACE,SACM,EAAQ,QACb,MAAU;GACT,EAAQ,QAAQ;EAClB,CACF,GAEA,EACE,EAAM,MACN;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,UAAU,EAAM;EAClB,GACA,UACF,GAEO,CAAI;;;;;;;6CAO8B,EAAQ;QAC7C,EAAmB,GAAa,GAAW,CAAU,EAAE;;CAE7D;CACA,QAAQ;EACN;EACA;EACA;EACA;EACA,EAAiB,CAAmB;EACpC;CACF;AACF,CAAC"}
+{"version":3,"file":"checkbox.js","names":[],"sources":["../src/inputs/checkbox/checkbox.ts"],"sourcesContent":["import { define, getHost, html, inject, onCleanup, prop, useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createCheckable, lifecycleSignal } from '../../core';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\nimport '../../content/icon/icon';\nimport { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport { CHECKBOX_GROUP_CTX } from '../checkbox-group/checkbox-group';\nimport { applyCheckableBinding } from '../shared/field-binding';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './checkbox.css?inline';\n\nexport type OreCheckboxEvents = {\n  change: Event;\n  input: Event;\n};\n\nexport type OreCheckboxProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the checkbox */\n  helper?: string;\n  /** Indeterminate state (partially checked) */\n  indeterminate?: boolean;\n  /** Require this checkbox to be checked for native form validation (e.g. a consent checkbox) */\n  required?: boolean;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A customizable checkbox component with theme colors, sizes, and indeterminate state support.\n *\n * @element ore-checkbox\n *\n * @attr {boolean} checked - Checked state\n * @attr {boolean} disabled - Disable checkbox interaction\n * @attr {boolean} indeterminate - Indeterminate (partially checked) state\n * @attr {boolean} required - Require this checkbox to be checked for native form validation\n * @attr {string} value - Field value submitted with forms\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Checkbox size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the checkbox\n *\n * @fires input - Emitted when checkbox is toggled.\n * @fires change - Emitted when checkbox is toggled.\n *\n * @slot - Checkbox label text\n *\n * @cssprop --checkbox-size - Control size (width and height)\n * @cssprop --checkbox-radius - Control border radius\n * @cssprop --checkbox-bg - Unchecked background color\n * @cssprop --checkbox-border-color - Unchecked border color\n * @cssprop --checkbox-checked-bg - Checked/indeterminate background color\n * @cssprop --checkbox-color - Checkmark icon color\n * @cssprop --checkbox-font-size - Label font size\n * @part checkbox - The checkbox wrapper element\n * @part box - The visual checkbox box\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-checkbox name=\"agree\" required>I agree to the terms</ore-checkbox>\n * <ore-checkbox checked color=\"primary\" size=\"lg\">Enabled by default</ore-checkbox>\n * <ore-checkbox error=\"This field is required\" helper=\"Check to continue\">Accept</ore-checkbox>\n * ```\n */\nexport const CHECKBOX_TAG = 'ore-checkbox' as const;\ndefine<OreCheckboxProps>(CHECKBOX_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    indeterminate: prop.bool(false),\n    name: prop.string(),\n    required: prop.bool(false),\n    value: prop.string('on'),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const groupCtx = inject(CHECKBOX_GROUP_CTX);\n\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: true,\n      disabled: computed(() => props.disabled.value || Boolean(groupCtx?.disabled.value)),\n      error: props.error,\n      group: groupCtx,\n      helper: props.helper,\n      indeterminate: props.indeterminate,\n      onToggle: (payload) => {\n        checkable.triggerValidation('change');\n        setFieldChecked(el, payload.checked);\n\n        // In a checkbox-group, the group owns change emission/state updates.\n        // Emitting here would bubble to the group and toggle a second time.\n        if (groupCtx) return;\n\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      prefix: 'checkbox',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        onReset: checkable.reset,\n        toFormValue: (v) => v,\n        validationMessage: checkable.validationMessage,\n        validity: checkable.validity,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const {\n      assistiveId,\n      checked,\n      disabled,\n      errorText,\n      handleClick,\n      handleKeydown,\n      helperText,\n      indeterminate,\n      labelId,\n    } = checkable;\n\n    defineFieldChecked(\n      el,\n      () => checked.value,\n      (value) => {\n        checked.value = value;\n      },\n    );\n\n    applyCheckableBinding(\n      props.size,\n      {\n        assistiveId,\n        checked,\n        disabled,\n        errorText,\n        handleClick,\n        handleKeydown,\n        helperText,\n        indeterminate,\n        labelId,\n        required: props.required,\n      },\n      'checkbox',\n    );\n\n    return html`\n      <div class=\"checkbox-wrapper\" part=\"checkbox\">\n        <div class=\"box\" part=\"box\">\n          <ore-icon class=\"checkmark\" name=\"check\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          <ore-icon class=\"dash\" name=\"minus\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    coarsePointerMixin,\n    sizeVariantMixin(CONTROL_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":";;;;;;;;;;;;;;;;AAiFA,IAAa,IAAe;AAC5B,EAAyB,GAAc;CACrC,gBAAgB;CAChB,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,SAAS,EAAK,KAAK,EAAK;EACxB,OAAO,EAAK,OAAO;EACnB,QAAQ,EAAK,OAAO;EACpB,eAAe,EAAK,KAAK,EAAK;EAC9B,MAAM,EAAK,OAAO;EAClB,UAAU,EAAK,KAAK,EAAK;EACzB,OAAO,EAAK,OAAO,IAAI;CACzB;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GAEb,IAAW,EAAO,CAAkB,GAEpC,IAAY,EAAgB;GAChC,SAAS,EAAM;GACf,yBAAyB;GACzB,UAAU,QAAe,EAAM,SAAS,SAAS,EAAQ,GAAU,SAAS,KAAM;GAClF,OAAO,EAAM;GACb,OAAO;GACP,QAAQ,EAAM;GACd,eAAe,EAAM;GACrB,WAAW,MAAY;IACrB,EAAU,kBAAkB,QAAQ,GACpC,EAAgB,GAAI,EAAQ,OAAO,GAI/B,OAEJ,EAAyB,GAAI,OAAO,GACpC,EAAyB,GAAI,QAAQ;GACvC;GACA,QAAQ;GACR,UAAU,EAAM;GAChB,QAAQ,EAAgB,CAAS;GACjC,OAAO,EAAM;EACf,CAAC;EAED,EAAU,gBACR,EAAwB;GACtB,UAAU,EAAU;GACpB,SAAS,EAAU;GACnB,cAAc,MAAM;GACpB,mBAAmB,EAAU;GAC7B,UAAU,EAAU;GACpB,OAAO,EAAU;EACnB,CAAC,CACH;EAEA,IAAM,EACJ,gBACA,YACA,aACA,cACA,gBACA,kBACA,eACA,kBACA,eACE;EA2BJ,OAzBA,EACE,SACM,EAAQ,QACb,MAAU;GACT,EAAQ,QAAQ;EAClB,CACF,GAEA,EACE,EAAM,MACN;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,UAAU,EAAM;EAClB,GACA,UACF,GAEO,CAAI;;;;;;;6CAO8B,EAAQ;QAC7C,EAAmB,GAAa,GAAW,CAAU,EAAE;;CAE7D;CACA,QAAQ;EACN;EACA;EACA;EACA;EACA,EAAiB,CAAmB;EACpC;CACF;AACF,CAAC"}

package/dist/chip.cjs

@@ -1,44 +1,44 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./styles/mixins/states.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./feedback/chip/chip.css.cjs");let i=require("@vielzeug/ore"),a=require("@vielzeug/ripple"),o=require("@vielzeug/ripple/watch");var s=`ore-chip`;(0,i.define)(s,{props:{checked:{default:void 0,parse:e=>e==null?void 0:e!==`false`,reflect:!1},color:i.prop.string(),"default-checked":i.prop.bool(!1),disabled:i.prop.bool(!1),label:i.prop.string(),mode:i.prop.oneOf([`static`,`removable`,`selectable`,`action`],`static`),rounded:i.prop.string(),size:i.prop.string(),value:i.prop.string(),variant:i.prop.string()},setup(e){let t=(0,i.useEmit)(),n=(0,a.signal)(e.checked.value!==void 0),r=(0,a.signal)(!n.value&&e[`default-checked`].value);(0,o.watch)(e.checked,e=>{e!==void 0&&(n.value=!0)});let s=(0,a.computed)(()=>e.mode.value===`selectable`?n.value?e.checked.value??!1:r.value:!1);(0,i.bind)({attr:{checked:()=>e.mode.value===`selectable`&&s.value?!0:void 0}});function c(n){e.disabled.value||t(`remove`,{originalEvent:n,value:e.value.value})}function l(i){if(i.stopPropagation(),e.disabled.value)return;let a=!s.value;n.value||(r.value=a),t(`change`,{checked:a,originalEvent:i,value:e.value.value})}function u(n){e.disabled.value||t(`click`,{originalEvent:n,value:e.value.value})}let d=()=>i.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./styles/mixins/states.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./feedback/chip/chip.css.cjs");let i=require("@vielzeug/ore"),a=require("@vielzeug/ripple");var o=`ore-chip`;(0,i.define)(o,{props:{checked:{default:void 0,parse:e=>e==null?void 0:e!==`false`,reflect:!1},color:i.prop.string(),"default-checked":i.prop.bool(!1),disabled:i.prop.bool(!1),label:i.prop.string(),mode:i.prop.oneOf([`static`,`removable`,`selectable`,`action`],`static`),rounded:i.prop.string(),size:i.prop.string(),value:i.prop.string(),variant:i.prop.string()},setup(e){let t=(0,i.useEmit)(),n=(0,a.signal)(e.checked.value!==void 0),r=(0,a.signal)(!n.value&&e[`default-checked`].value);(0,a.watch)(e.checked,e=>{e!==void 0&&(n.value=!0)});let o=(0,a.computed)(()=>e.mode.value===`selectable`?n.value?e.checked.value??!1:r.value:!1);(0,i.bind)({attr:{checked:()=>e.mode.value===`selectable`&&o.value?!0:void 0}});function s(n){e.disabled.value||t(`remove`,{originalEvent:n,value:e.value.value})}function c(i){if(i.stopPropagation(),e.disabled.value)return;let a=!o.value;n.value||(r.value=a),t(`change`,{checked:a,originalEvent:i,value:e.value.value})}function l(n){e.disabled.value||t(`click`,{originalEvent:n,value:e.value.value})}let u=()=>i.html`
       <slot name="icon"></slot>
       <span class="label"><slot></slot></span>
-    `,f=()=>{let t=e.label.value||e.value.value;return t?`Remove ${t}`:`Remove`},p=()=>i.html`
+    `,d=()=>{let t=e.label.value||e.value.value;return t?`Remove ${t}`:`Remove`},f=()=>i.html`
       <button
         class="remove-btn"
         part="remove-btn"
         type="button"
-        aria-label="${f}"
+        aria-label="${d}"
         ?hidden="${()=>e.mode.value!==`removable`}"
         disabled="${e.disabled}"
-        @click="${c}">
+        @click="${s}">
         <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
       </button>
-    `,m=()=>i.html`
+    `,p=()=>i.html`
       <button
         class="chip-btn"
         part="chip-btn"
         type="button"
         role="checkbox"
-        aria-checked="${()=>String(s.value)}"
+        aria-checked="${()=>String(o.value)}"
         aria-label="${e.label}"
         disabled="${e.disabled}"
-        @click="${l}">
-        <span class="chip" part="chip">${d()}</span>
+        @click="${c}">
+        <span class="chip" part="chip">${u()}</span>
       </button>
-    `,h=()=>i.html`
+    `,m=()=>i.html`
       <button
         class="chip-btn"
         part="chip-btn"
         type="button"
         aria-label="${e.label}"
         disabled="${e.disabled}"
-        @click="${u}">
-        <span class="chip" part="chip">${d()}</span>
+        @click="${l}">
+        <span class="chip" part="chip">${u()}</span>
       </button>
+    `,h=()=>i.html`
+      <span class="chip" part="chip">${u()}</span>
     `,g=()=>i.html`
-      <span class="chip" part="chip">${d()}</span>
-    `,_=()=>i.html`
-      <span class="chip" part="chip">${d()} ${p()}</span>
+      <span class="chip" part="chip">${u()} ${f()}</span>
     `;return i.html`
-      ${()=>{let t=e.mode.value;return t===`selectable`?m():t===`action`?h():t===`removable`?_():g()}}
-    `},styles:[n.colorThemeMixin,t.disabledStateMixin,e.roundedVariantMixin,e.sizeVariantMixin({lg:{"--_font-size":`var(--text-sm)`,"--_gap":`var(--size-1-5)`,"--_padding-x":`var(--size-3)`,"--_padding-y":`var(--size-1)`},sm:{"--_font-size":`var(--text-xs)`,"--_gap":`var(--size-0-5)`,"--_padding-x":`var(--size-2-5)`,"--_padding-y":`var(--size-px)`}}),n.forcedColorsMixin,r.default]}),exports.CHIP_TAG=s;
+      ${()=>{let t=e.mode.value;return t===`selectable`?p():t===`action`?m():t===`removable`?g():h()}}
+    `},styles:[n.colorThemeMixin,t.disabledStateMixin,e.roundedVariantMixin,e.sizeVariantMixin({lg:{"--_font-size":`var(--text-sm)`,"--_gap":`var(--size-1-5)`,"--_padding-x":`var(--size-3)`,"--_padding-y":`var(--size-1)`},sm:{"--_font-size":`var(--text-xs)`,"--_gap":`var(--size-0-5)`,"--_padding-x":`var(--size-2-5)`,"--_padding-y":`var(--size-px)`}}),n.forcedColorsMixin,r.default]}),exports.CHIP_TAG=o;
 //# sourceMappingURL=chip.cjs.map

package/dist/chip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chip.cjs","names":[],"sources":["../src/feedback/chip/chip.ts"],"sourcesContent":["import { define, html, prop, bind, useEmit } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport {\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsMixin,\n  roundedVariantMixin,\n  sizeVariantMixin,\n} from '../../styles';\n// ============================================\n// Styles\n// ============================================\nimport componentStyles from './chip.css?inline';\n\n// ============================================\n// Types\n// ============================================\n\n/** Chip component properties */\ntype ChipBaseProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interactions */\n  disabled?: boolean;\n  /** Accessible label (required for icon-only chips) */\n  label?: string;\n  /** Border radius override */\n  rounded?: RoundedSize | '';\n  /** Component size */\n  size?: ComponentSize;\n  /** Value associated with this chip — included in emitted event detail */\n  value?: string;\n  /** Visual style variant */\n  variant?: Exclude<VisualVariant, 'text' | 'frost'>;\n};\n\ntype OreChipMode = 'static' | 'removable' | 'selectable' | 'action';\n\n/** Read-only presentation chip */\ntype StaticChipProps = {\n  mode?: Extract<OreChipMode, 'static'>;\n};\n\n/** Removable chip mode */\ntype RemovableChipProps = {\n  mode: Extract<OreChipMode, 'removable'>;\n};\n\n/** Selectable chip mode */\ntype SelectableChipProps = {\n  /** Controlled checked state for `mode=\"selectable\"` */\n  checked?: boolean | undefined;\n  /** Initial checked state for uncontrolled `mode=\"selectable\"` */\n  'default-checked'?: boolean;\n  mode: Extract<OreChipMode, 'selectable'>;\n};\n\n/** Action chip mode — behaves like a button, fires a click event without maintaining state */\ntype ActionChipProps = {\n  mode: Extract<OreChipMode, 'action'>;\n};\n\ntype OreChipComponentProps = ChipBaseProps & {\n  checked?: boolean | undefined;\n  'default-checked'?: boolean;\n  mode?: OreChipMode;\n};\n\nexport type OreChipEvents = {\n  change: { checked: boolean; originalEvent: Event; value: string | undefined };\n  click: { originalEvent: MouseEvent; value: string | undefined };\n  remove: { originalEvent: MouseEvent; value: string | undefined };\n};\n\nexport type OreChipProps = ChipBaseProps &\n  (StaticChipProps | RemovableChipProps | SelectableChipProps | ActionChipProps);\n\n/**\n * A compact, styled label element. Supports icons, a remove button, colors, sizes, and variants.\n * Commonly used to represent tags, filters, or selected options in a multiselect field.\n *\n * @element ore-chip\n *\n * @attr {string}  label     - Accessible label (required for icon-only chips)\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 {string}  mode      - Interaction mode: 'static' | 'removable' | 'selectable' | 'action'\n * @attr {boolean} disabled  - Disable the chip\n * @attr {string}  value     - Value included in emitted event detail\n * @attr {boolean} checked   - Controlled checked state for selectable chips\n * @attr {boolean} default-checked - Initial checked state for uncontrolled selectable chips\n *\n * @fires remove - Fired when the remove button is clicked. detail: { value: string, originalEvent: MouseEvent }\n * @fires change - Fired when a selectable chip toggles. detail: { checked: boolean, value: string, originalEvent: Event }\n * @fires click  - Fired when an action chip is clicked. detail: { value: string, originalEvent: MouseEvent }\n *\n * @slot         - Chip label text\n * @slot icon    - Leading icon or decoration\n *\n * @cssprop --chip-bg              - Background color\n * @cssprop --chip-color           - Text color\n * @cssprop --chip-border-color    - Border color\n * @cssprop --chip-radius          - Border radius\n * @cssprop --chip-font-size       - Font size\n * @cssprop --chip-font-weight     - Font weight\n * @cssprop --chip-padding-x       - Horizontal padding\n * @cssprop --chip-padding-y       - Vertical padding\n * @cssprop --chip-gap             - Gap between icon, label and remove button\n * @cssprop --chip-hover-bg        - Background on hover (interactive modes)\n * @cssprop --chip-hover-color     - Text color on hover (interactive modes)\n * @cssprop --chip-hover-border-color - Border color on hover (interactive modes)\n * @cssprop --chip-active-bg       - Background when pressed (interactive modes)\n * @cssprop --chip-active-color    - Text color when pressed (interactive modes)\n * @cssprop --chip-remove-bg       - Remove button background (bordered/outline variants)\n * @cssprop --chip-remove-color    - Remove button icon color (bordered/outline variants)\n * @cssprop --chip-remove-hover-bg - Remove button background on hover\n *\n * @part remove-btn - Remove action button.\n * @part chip-btn - Shadow part for the `chip-btn` element.\n * @part chip - Shadow part for the `chip` element.\n * @example\n * ```html\n * <!-- Static chip (read-only) -->\n * <ore-chip color=\"primary\">Design</ore-chip>\n *\n * <!-- Removable chip -->\n * <ore-chip color=\"success\" variant=\"flat\" mode=\"removable\" value=\"ts\">\n *   TypeScript\n * </ore-chip>\n *\n * <!-- Selectable chip (controlled) -->\n * <ore-chip color=\"info\" variant=\"flat\" mode=\"selectable\" checked value=\"ui\">\n *   UI\n * </ore-chip>\n *\n * <!-- Selectable chip (uncontrolled) -->\n * <ore-chip color=\"info\" variant=\"flat\" mode=\"selectable\" default-checked value=\"ui\">\n *   UI\n * </ore-chip>\n *\n * <!-- Action chip (acts like a button) -->\n * <ore-chip color=\"warning\" mode=\"action\" value=\"add\">\n *   <svg slot=\"icon\" ...></svg>\n *   Add Item\n * </ore-chip>\n *\n * <!-- Icon-only chip -->\n * <ore-chip color=\"error\" mode=\"action\" label=\"Delete\">\n *   <svg slot=\"icon\" ...></svg>\n * </ore-chip>\n * ```\n */\nexport const CHIP_TAG = 'ore-chip' as const;\ndefine<OreChipComponentProps>(CHIP_TAG, {\n  props: {\n    checked: {\n      default: undefined as OreChipComponentProps['checked'],\n      parse: (value: string | null) => (value == null ? undefined : value !== 'false'),\n      reflect: false,\n    },\n    color: prop.string<ThemeColor>(),\n    'default-checked': prop.bool(false),\n    disabled: prop.bool(false),\n    label: prop.string(),\n    mode: prop.oneOf(['static', 'removable', 'selectable', 'action'] as const, 'static'),\n    rounded: prop.string<RoundedSize | ''>(),\n    size: prop.string<ComponentSize>(),\n    value: prop.string(),\n    variant: prop.string<Exclude<VisualVariant, 'text' | 'frost'>>(),\n  },\n\n  setup(props) {\n    const emit = useEmit<OreChipEvents>();\n\n    // ============================================\n    // State Management\n    // ============================================\n    // Once a checked prop is provided, treat the chip as controlled for the rest of its lifecycle.\n    const isControlled = signal(props.checked.value !== undefined);\n    // Internal tracking for uncontrolled selectable chips; seeded from default-checked.\n    const checkedState = signal(!isControlled.value && props['default-checked'].value);\n\n    watch(props.checked, (value) => {\n      if (value !== undefined) {\n        isControlled.value = true;\n      }\n    });\n\n    // Effective checked value — reactive to checked prop changes in controlled mode.\n    const isChecked = computed(() => {\n      if (props.mode.value !== 'selectable') return false;\n\n      if (isControlled.value) {\n        return props.checked.value ?? false;\n      }\n\n      return checkedState.value;\n    });\n\n    bind({\n      attr: {\n        checked: () => (props.mode.value === 'selectable' && isChecked.value ? true : undefined),\n      },\n    });\n    // ============================================\n    // Event Handlers\n    // ============================================\n    function handleRemove(e: MouseEvent) {\n      if (props.disabled.value) return;\n\n      emit('remove', { originalEvent: e, value: props.value.value });\n    }\n\n    function handleSelectableActivate(e: MouseEvent) {\n      e.stopPropagation();\n\n      if (props.disabled.value) return;\n\n      const nextChecked = !isChecked.value;\n\n      if (!isControlled.value) {\n        checkedState.value = nextChecked;\n      }\n\n      emit('change', { checked: nextChecked, originalEvent: e, value: props.value.value });\n    }\n\n    function handleActionClick(e: MouseEvent) {\n      if (props.disabled.value) return;\n\n      emit('click', { originalEvent: e, value: props.value.value });\n    }\n\n    // ============================================\n    // Template Helpers\n    // ============================================\n    const renderChipContent = () => html`\n      <slot name=\"icon\"></slot>\n      <span class=\"label\"><slot></slot></span>\n    `;\n\n    const removeBtnLabel = () => {\n      const label = props.label.value || props.value.value;\n\n      return label ? `Remove ${label}` : 'Remove';\n    };\n\n    const renderRemoveButton = () => html`\n      <button\n        class=\"remove-btn\"\n        part=\"remove-btn\"\n        type=\"button\"\n        aria-label=\"${removeBtnLabel}\"\n        ?hidden=\"${() => props.mode.value !== 'removable'}\"\n        disabled=\"${props.disabled}\"\n        @click=\"${handleRemove}\">\n        <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n      </button>\n    `;\n\n    const renderSelectableChip = () => html`\n      <button\n        class=\"chip-btn\"\n        part=\"chip-btn\"\n        type=\"button\"\n        role=\"checkbox\"\n        aria-checked=\"${() => String(isChecked.value)}\"\n        aria-label=\"${props.label}\"\n        disabled=\"${props.disabled}\"\n        @click=\"${handleSelectableActivate}\">\n        <span class=\"chip\" part=\"chip\">${renderChipContent()}</span>\n      </button>\n    `;\n\n    const renderActionChip = () => html`\n      <button\n        class=\"chip-btn\"\n        part=\"chip-btn\"\n        type=\"button\"\n        aria-label=\"${props.label}\"\n        disabled=\"${props.disabled}\"\n        @click=\"${handleActionClick}\">\n        <span class=\"chip\" part=\"chip\">${renderChipContent()}</span>\n      </button>\n    `;\n\n    const renderStaticChip = () => html`\n      <span class=\"chip\" part=\"chip\">${renderChipContent()}</span>\n    `;\n\n    const renderRemovableChip = () => html`\n      <span class=\"chip\" part=\"chip\">${renderChipContent()} ${renderRemoveButton()}</span>\n    `;\n\n    // ============================================\n    // Render\n    // ============================================\n    return html`\n      ${() => {\n        const mode = props.mode.value;\n\n        if (mode === 'selectable') return renderSelectableChip();\n\n        if (mode === 'action') return renderActionChip();\n\n        if (mode === 'removable') return renderRemovableChip();\n\n        return renderStaticChip();\n      }}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    disabledStateMixin,\n    roundedVariantMixin,\n    sizeVariantMixin({\n      lg: {\n        '--_font-size': 'var(--text-sm)',\n        '--_gap': 'var(--size-1-5)',\n        '--_padding-x': 'var(--size-3)',\n        '--_padding-y': 'var(--size-1)',\n      },\n      sm: {\n        '--_font-size': 'var(--text-xs)',\n        '--_gap': 'var(--size-0-5)',\n        '--_padding-x': 'var(--size-2-5)',\n        '--_padding-y': 'var(--size-px)',\n      },\n    }),\n    forcedColorsMixin,\n    componentStyles,\n  ],\n});\n"],"mappings":"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"}
+{"version":3,"file":"chip.cjs","names":[],"sources":["../src/feedback/chip/chip.ts"],"sourcesContent":["import { bind, define, html, prop, useEmit } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport {\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsMixin,\n  roundedVariantMixin,\n  sizeVariantMixin,\n} from '../../styles';\n// ============================================\n// Styles\n// ============================================\nimport componentStyles from './chip.css?inline';\n\n// ============================================\n// Types\n// ============================================\n\n/** Chip component properties */\ntype ChipBaseProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interactions */\n  disabled?: boolean;\n  /** Accessible label (required for icon-only chips) */\n  label?: string;\n  /** Border radius override */\n  rounded?: RoundedSize | '';\n  /** Component size */\n  size?: ComponentSize;\n  /** Value associated with this chip — included in emitted event detail */\n  value?: string;\n  /** Visual style variant */\n  variant?: Exclude<VisualVariant, 'text' | 'frost'>;\n};\n\ntype OreChipMode = 'static' | 'removable' | 'selectable' | 'action';\n\n/** Read-only presentation chip */\ntype StaticChipProps = {\n  mode?: Extract<OreChipMode, 'static'>;\n};\n\n/** Removable chip mode */\ntype RemovableChipProps = {\n  mode: Extract<OreChipMode, 'removable'>;\n};\n\n/** Selectable chip mode */\ntype SelectableChipProps = {\n  /** Controlled checked state for `mode=\"selectable\"` */\n  checked?: boolean | undefined;\n  /** Initial checked state for uncontrolled `mode=\"selectable\"` */\n  'default-checked'?: boolean;\n  mode: Extract<OreChipMode, 'selectable'>;\n};\n\n/** Action chip mode — behaves like a button, fires a click event without maintaining state */\ntype ActionChipProps = {\n  mode: Extract<OreChipMode, 'action'>;\n};\n\ntype OreChipComponentProps = ChipBaseProps & {\n  checked?: boolean | undefined;\n  'default-checked'?: boolean;\n  mode?: OreChipMode;\n};\n\nexport type OreChipEvents = {\n  change: { checked: boolean; originalEvent: Event; value: string | undefined };\n  click: { originalEvent: MouseEvent; value: string | undefined };\n  remove: { originalEvent: MouseEvent; value: string | undefined };\n};\n\nexport type OreChipProps = ChipBaseProps &\n  (StaticChipProps | RemovableChipProps | SelectableChipProps | ActionChipProps);\n\n/**\n * A compact, styled label element. Supports icons, a remove button, colors, sizes, and variants.\n * Commonly used to represent tags, filters, or selected options in a multiselect field.\n *\n * @element ore-chip\n *\n * @attr {string}  label     - Accessible label (required for icon-only chips)\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 {string}  mode      - Interaction mode: 'static' | 'removable' | 'selectable' | 'action'\n * @attr {boolean} disabled  - Disable the chip\n * @attr {string}  value     - Value included in emitted event detail\n * @attr {boolean} checked   - Controlled checked state for selectable chips\n * @attr {boolean} default-checked - Initial checked state for uncontrolled selectable chips\n *\n * @fires remove - Fired when the remove button is clicked. detail: { value: string, originalEvent: MouseEvent }\n * @fires change - Fired when a selectable chip toggles. detail: { checked: boolean, value: string, originalEvent: Event }\n * @fires click  - Fired when an action chip is clicked. detail: { value: string, originalEvent: MouseEvent }\n *\n * @slot         - Chip label text\n * @slot icon    - Leading icon or decoration\n *\n * @cssprop --chip-bg              - Background color\n * @cssprop --chip-color           - Text color\n * @cssprop --chip-border-color    - Border color\n * @cssprop --chip-radius          - Border radius\n * @cssprop --chip-font-size       - Font size\n * @cssprop --chip-font-weight     - Font weight\n * @cssprop --chip-padding-x       - Horizontal padding\n * @cssprop --chip-padding-y       - Vertical padding\n * @cssprop --chip-gap             - Gap between icon, label and remove button\n * @cssprop --chip-hover-bg        - Background on hover (interactive modes)\n * @cssprop --chip-hover-color     - Text color on hover (interactive modes)\n * @cssprop --chip-hover-border-color - Border color on hover (interactive modes)\n * @cssprop --chip-active-bg       - Background when pressed (interactive modes)\n * @cssprop --chip-active-color    - Text color when pressed (interactive modes)\n * @cssprop --chip-remove-bg       - Remove button background (bordered/outline variants)\n * @cssprop --chip-remove-color    - Remove button icon color (bordered/outline variants)\n * @cssprop --chip-remove-hover-bg - Remove button background on hover\n *\n * @part remove-btn - Remove action button.\n * @part chip-btn - Shadow part for the `chip-btn` element.\n * @part chip - Shadow part for the `chip` element.\n * @example\n * ```html\n * <!-- Static chip (read-only) -->\n * <ore-chip color=\"primary\">Design</ore-chip>\n *\n * <!-- Removable chip -->\n * <ore-chip color=\"success\" variant=\"flat\" mode=\"removable\" value=\"ts\">\n *   TypeScript\n * </ore-chip>\n *\n * <!-- Selectable chip (controlled) -->\n * <ore-chip color=\"info\" variant=\"flat\" mode=\"selectable\" checked value=\"ui\">\n *   UI\n * </ore-chip>\n *\n * <!-- Selectable chip (uncontrolled) -->\n * <ore-chip color=\"info\" variant=\"flat\" mode=\"selectable\" default-checked value=\"ui\">\n *   UI\n * </ore-chip>\n *\n * <!-- Action chip (acts like a button) -->\n * <ore-chip color=\"warning\" mode=\"action\" value=\"add\">\n *   <svg slot=\"icon\" ...></svg>\n *   Add Item\n * </ore-chip>\n *\n * <!-- Icon-only chip -->\n * <ore-chip color=\"error\" mode=\"action\" label=\"Delete\">\n *   <svg slot=\"icon\" ...></svg>\n * </ore-chip>\n * ```\n */\nexport const CHIP_TAG = 'ore-chip' as const;\ndefine<OreChipComponentProps>(CHIP_TAG, {\n  props: {\n    checked: {\n      default: undefined as OreChipComponentProps['checked'],\n      parse: (value: string | null) => (value == null ? undefined : value !== 'false'),\n      reflect: false,\n    },\n    color: prop.string<ThemeColor>(),\n    'default-checked': prop.bool(false),\n    disabled: prop.bool(false),\n    label: prop.string(),\n    mode: prop.oneOf(['static', 'removable', 'selectable', 'action'] as const, 'static'),\n    rounded: prop.string<RoundedSize | ''>(),\n    size: prop.string<ComponentSize>(),\n    value: prop.string(),\n    variant: prop.string<Exclude<VisualVariant, 'text' | 'frost'>>(),\n  },\n\n  setup(props) {\n    const emit = useEmit<OreChipEvents>();\n\n    // ============================================\n    // State Management\n    // ============================================\n    // Once a checked prop is provided, treat the chip as controlled for the rest of its lifecycle.\n    const isControlled = signal(props.checked.value !== undefined);\n    // Internal tracking for uncontrolled selectable chips; seeded from default-checked.\n    const checkedState = signal(!isControlled.value && props['default-checked'].value);\n\n    watch(props.checked, (value) => {\n      if (value !== undefined) {\n        isControlled.value = true;\n      }\n    });\n\n    // Effective checked value — reactive to checked prop changes in controlled mode.\n    const isChecked = computed(() => {\n      if (props.mode.value !== 'selectable') return false;\n\n      if (isControlled.value) {\n        return props.checked.value ?? false;\n      }\n\n      return checkedState.value;\n    });\n\n    bind({\n      attr: {\n        checked: () => (props.mode.value === 'selectable' && isChecked.value ? true : undefined),\n      },\n    });\n    // ============================================\n    // Event Handlers\n    // ============================================\n    function handleRemove(e: MouseEvent) {\n      if (props.disabled.value) return;\n\n      emit('remove', { originalEvent: e, value: props.value.value });\n    }\n\n    function handleSelectableActivate(e: MouseEvent) {\n      e.stopPropagation();\n\n      if (props.disabled.value) return;\n\n      const nextChecked = !isChecked.value;\n\n      if (!isControlled.value) {\n        checkedState.value = nextChecked;\n      }\n\n      emit('change', { checked: nextChecked, originalEvent: e, value: props.value.value });\n    }\n\n    function handleActionClick(e: MouseEvent) {\n      if (props.disabled.value) return;\n\n      emit('click', { originalEvent: e, value: props.value.value });\n    }\n\n    // ============================================\n    // Template Helpers\n    // ============================================\n    const renderChipContent = () => html`\n      <slot name=\"icon\"></slot>\n      <span class=\"label\"><slot></slot></span>\n    `;\n\n    const removeBtnLabel = () => {\n      const label = props.label.value || props.value.value;\n\n      return label ? `Remove ${label}` : 'Remove';\n    };\n\n    const renderRemoveButton = () => html`\n      <button\n        class=\"remove-btn\"\n        part=\"remove-btn\"\n        type=\"button\"\n        aria-label=\"${removeBtnLabel}\"\n        ?hidden=\"${() => props.mode.value !== 'removable'}\"\n        disabled=\"${props.disabled}\"\n        @click=\"${handleRemove}\">\n        <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n      </button>\n    `;\n\n    const renderSelectableChip = () => html`\n      <button\n        class=\"chip-btn\"\n        part=\"chip-btn\"\n        type=\"button\"\n        role=\"checkbox\"\n        aria-checked=\"${() => String(isChecked.value)}\"\n        aria-label=\"${props.label}\"\n        disabled=\"${props.disabled}\"\n        @click=\"${handleSelectableActivate}\">\n        <span class=\"chip\" part=\"chip\">${renderChipContent()}</span>\n      </button>\n    `;\n\n    const renderActionChip = () => html`\n      <button\n        class=\"chip-btn\"\n        part=\"chip-btn\"\n        type=\"button\"\n        aria-label=\"${props.label}\"\n        disabled=\"${props.disabled}\"\n        @click=\"${handleActionClick}\">\n        <span class=\"chip\" part=\"chip\">${renderChipContent()}</span>\n      </button>\n    `;\n\n    const renderStaticChip = () => html`\n      <span class=\"chip\" part=\"chip\">${renderChipContent()}</span>\n    `;\n\n    const renderRemovableChip = () => html`\n      <span class=\"chip\" part=\"chip\">${renderChipContent()} ${renderRemoveButton()}</span>\n    `;\n\n    // ============================================\n    // Render\n    // ============================================\n    return html`\n      ${() => {\n        const mode = props.mode.value;\n\n        if (mode === 'selectable') return renderSelectableChip();\n\n        if (mode === 'action') return renderActionChip();\n\n        if (mode === 'removable') return renderRemovableChip();\n\n        return renderStaticChip();\n      }}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    disabledStateMixin,\n    roundedVariantMixin,\n    sizeVariantMixin({\n      lg: {\n        '--_font-size': 'var(--text-sm)',\n        '--_gap': 'var(--size-1-5)',\n        '--_padding-x': 'var(--size-3)',\n        '--_padding-y': 'var(--size-1)',\n      },\n      sm: {\n        '--_font-size': 'var(--text-xs)',\n        '--_gap': 'var(--size-0-5)',\n        '--_padding-x': 'var(--size-2-5)',\n        '--_padding-y': 'var(--size-px)',\n      },\n    }),\n    forcedColorsMixin,\n    componentStyles,\n  ],\n});\n"],"mappings":"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"}

package/dist/chip.js

@@ -3,8 +3,7 @@ import { disabledStateMixin as n } from "./styles/mixins/states.css.js";
 import { colorThemeMixin as r, forcedColorsMixin as i } from "./styles/mixins/theme.css.js";
 import a from "./feedback/chip/chip.css.js";
 import { bind as o, define as s, html as c, prop as l, useEmit as u } from "@vielzeug/ore";
-import { computed as d, signal as f } from "@vielzeug/ripple";
-import { watch as p } from "@vielzeug/ripple/watch";
+import { computed as d, signal as f, watch as p } from "@vielzeug/ripple";
 //#region src/feedback/chip/chip.ts
 var m = "ore-chip";
 s(m, {

package/dist/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","names":[],"sources":["../src/feedback/chip/chip.ts"],"sourcesContent":["import { define, html, prop, bind, useEmit } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport {\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsMixin,\n  roundedVariantMixin,\n  sizeVariantMixin,\n} from '../../styles';\n// ============================================\n// Styles\n// ============================================\nimport componentStyles from './chip.css?inline';\n\n// ============================================\n// Types\n// ============================================\n\n/** Chip component properties */\ntype ChipBaseProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interactions */\n  disabled?: boolean;\n  /** Accessible label (required for icon-only chips) */\n  label?: string;\n  /** Border radius override */\n  rounded?: RoundedSize | '';\n  /** Component size */\n  size?: ComponentSize;\n  /** Value associated with this chip — included in emitted event detail */\n  value?: string;\n  /** Visual style variant */\n  variant?: Exclude<VisualVariant, 'text' | 'frost'>;\n};\n\ntype OreChipMode = 'static' | 'removable' | 'selectable' | 'action';\n\n/** Read-only presentation chip */\ntype StaticChipProps = {\n  mode?: Extract<OreChipMode, 'static'>;\n};\n\n/** Removable chip mode */\ntype RemovableChipProps = {\n  mode: Extract<OreChipMode, 'removable'>;\n};\n\n/** Selectable chip mode */\ntype SelectableChipProps = {\n  /** Controlled checked state for `mode=\"selectable\"` */\n  checked?: boolean | undefined;\n  /** Initial checked state for uncontrolled `mode=\"selectable\"` */\n  'default-checked'?: boolean;\n  mode: Extract<OreChipMode, 'selectable'>;\n};\n\n/** Action chip mode — behaves like a button, fires a click event without maintaining state */\ntype ActionChipProps = {\n  mode: Extract<OreChipMode, 'action'>;\n};\n\ntype OreChipComponentProps = ChipBaseProps & {\n  checked?: boolean | undefined;\n  'default-checked'?: boolean;\n  mode?: OreChipMode;\n};\n\nexport type OreChipEvents = {\n  change: { checked: boolean; originalEvent: Event; value: string | undefined };\n  click: { originalEvent: MouseEvent; value: string | undefined };\n  remove: { originalEvent: MouseEvent; value: string | undefined };\n};\n\nexport type OreChipProps = ChipBaseProps &\n  (StaticChipProps | RemovableChipProps | SelectableChipProps | ActionChipProps);\n\n/**\n * A compact, styled label element. Supports icons, a remove button, colors, sizes, and variants.\n * Commonly used to represent tags, filters, or selected options in a multiselect field.\n *\n * @element ore-chip\n *\n * @attr {string}  label     - Accessible label (required for icon-only chips)\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 {string}  mode      - Interaction mode: 'static' | 'removable' | 'selectable' | 'action'\n * @attr {boolean} disabled  - Disable the chip\n * @attr {string}  value     - Value included in emitted event detail\n * @attr {boolean} checked   - Controlled checked state for selectable chips\n * @attr {boolean} default-checked - Initial checked state for uncontrolled selectable chips\n *\n * @fires remove - Fired when the remove button is clicked. detail: { value: string, originalEvent: MouseEvent }\n * @fires change - Fired when a selectable chip toggles. detail: { checked: boolean, value: string, originalEvent: Event }\n * @fires click  - Fired when an action chip is clicked. detail: { value: string, originalEvent: MouseEvent }\n *\n * @slot         - Chip label text\n * @slot icon    - Leading icon or decoration\n *\n * @cssprop --chip-bg              - Background color\n * @cssprop --chip-color           - Text color\n * @cssprop --chip-border-color    - Border color\n * @cssprop --chip-radius          - Border radius\n * @cssprop --chip-font-size       - Font size\n * @cssprop --chip-font-weight     - Font weight\n * @cssprop --chip-padding-x       - Horizontal padding\n * @cssprop --chip-padding-y       - Vertical padding\n * @cssprop --chip-gap             - Gap between icon, label and remove button\n * @cssprop --chip-hover-bg        - Background on hover (interactive modes)\n * @cssprop --chip-hover-color     - Text color on hover (interactive modes)\n * @cssprop --chip-hover-border-color - Border color on hover (interactive modes)\n * @cssprop --chip-active-bg       - Background when pressed (interactive modes)\n * @cssprop --chip-active-color    - Text color when pressed (interactive modes)\n * @cssprop --chip-remove-bg       - Remove button background (bordered/outline variants)\n * @cssprop --chip-remove-color    - Remove button icon color (bordered/outline variants)\n * @cssprop --chip-remove-hover-bg - Remove button background on hover\n *\n * @part remove-btn - Remove action button.\n * @part chip-btn - Shadow part for the `chip-btn` element.\n * @part chip - Shadow part for the `chip` element.\n * @example\n * ```html\n * <!-- Static chip (read-only) -->\n * <ore-chip color=\"primary\">Design</ore-chip>\n *\n * <!-- Removable chip -->\n * <ore-chip color=\"success\" variant=\"flat\" mode=\"removable\" value=\"ts\">\n *   TypeScript\n * </ore-chip>\n *\n * <!-- Selectable chip (controlled) -->\n * <ore-chip color=\"info\" variant=\"flat\" mode=\"selectable\" checked value=\"ui\">\n *   UI\n * </ore-chip>\n *\n * <!-- Selectable chip (uncontrolled) -->\n * <ore-chip color=\"info\" variant=\"flat\" mode=\"selectable\" default-checked value=\"ui\">\n *   UI\n * </ore-chip>\n *\n * <!-- Action chip (acts like a button) -->\n * <ore-chip color=\"warning\" mode=\"action\" value=\"add\">\n *   <svg slot=\"icon\" ...></svg>\n *   Add Item\n * </ore-chip>\n *\n * <!-- Icon-only chip -->\n * <ore-chip color=\"error\" mode=\"action\" label=\"Delete\">\n *   <svg slot=\"icon\" ...></svg>\n * </ore-chip>\n * ```\n */\nexport const CHIP_TAG = 'ore-chip' as const;\ndefine<OreChipComponentProps>(CHIP_TAG, {\n  props: {\n    checked: {\n      default: undefined as OreChipComponentProps['checked'],\n      parse: (value: string | null) => (value == null ? undefined : value !== 'false'),\n      reflect: false,\n    },\n    color: prop.string<ThemeColor>(),\n    'default-checked': prop.bool(false),\n    disabled: prop.bool(false),\n    label: prop.string(),\n    mode: prop.oneOf(['static', 'removable', 'selectable', 'action'] as const, 'static'),\n    rounded: prop.string<RoundedSize | ''>(),\n    size: prop.string<ComponentSize>(),\n    value: prop.string(),\n    variant: prop.string<Exclude<VisualVariant, 'text' | 'frost'>>(),\n  },\n\n  setup(props) {\n    const emit = useEmit<OreChipEvents>();\n\n    // ============================================\n    // State Management\n    // ============================================\n    // Once a checked prop is provided, treat the chip as controlled for the rest of its lifecycle.\n    const isControlled = signal(props.checked.value !== undefined);\n    // Internal tracking for uncontrolled selectable chips; seeded from default-checked.\n    const checkedState = signal(!isControlled.value && props['default-checked'].value);\n\n    watch(props.checked, (value) => {\n      if (value !== undefined) {\n        isControlled.value = true;\n      }\n    });\n\n    // Effective checked value — reactive to checked prop changes in controlled mode.\n    const isChecked = computed(() => {\n      if (props.mode.value !== 'selectable') return false;\n\n      if (isControlled.value) {\n        return props.checked.value ?? false;\n      }\n\n      return checkedState.value;\n    });\n\n    bind({\n      attr: {\n        checked: () => (props.mode.value === 'selectable' && isChecked.value ? true : undefined),\n      },\n    });\n    // ============================================\n    // Event Handlers\n    // ============================================\n    function handleRemove(e: MouseEvent) {\n      if (props.disabled.value) return;\n\n      emit('remove', { originalEvent: e, value: props.value.value });\n    }\n\n    function handleSelectableActivate(e: MouseEvent) {\n      e.stopPropagation();\n\n      if (props.disabled.value) return;\n\n      const nextChecked = !isChecked.value;\n\n      if (!isControlled.value) {\n        checkedState.value = nextChecked;\n      }\n\n      emit('change', { checked: nextChecked, originalEvent: e, value: props.value.value });\n    }\n\n    function handleActionClick(e: MouseEvent) {\n      if (props.disabled.value) return;\n\n      emit('click', { originalEvent: e, value: props.value.value });\n    }\n\n    // ============================================\n    // Template Helpers\n    // ============================================\n    const renderChipContent = () => html`\n      <slot name=\"icon\"></slot>\n      <span class=\"label\"><slot></slot></span>\n    `;\n\n    const removeBtnLabel = () => {\n      const label = props.label.value || props.value.value;\n\n      return label ? `Remove ${label}` : 'Remove';\n    };\n\n    const renderRemoveButton = () => html`\n      <button\n        class=\"remove-btn\"\n        part=\"remove-btn\"\n        type=\"button\"\n        aria-label=\"${removeBtnLabel}\"\n        ?hidden=\"${() => props.mode.value !== 'removable'}\"\n        disabled=\"${props.disabled}\"\n        @click=\"${handleRemove}\">\n        <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n      </button>\n    `;\n\n    const renderSelectableChip = () => html`\n      <button\n        class=\"chip-btn\"\n        part=\"chip-btn\"\n        type=\"button\"\n        role=\"checkbox\"\n        aria-checked=\"${() => String(isChecked.value)}\"\n        aria-label=\"${props.label}\"\n        disabled=\"${props.disabled}\"\n        @click=\"${handleSelectableActivate}\">\n        <span class=\"chip\" part=\"chip\">${renderChipContent()}</span>\n      </button>\n    `;\n\n    const renderActionChip = () => html`\n      <button\n        class=\"chip-btn\"\n        part=\"chip-btn\"\n        type=\"button\"\n        aria-label=\"${props.label}\"\n        disabled=\"${props.disabled}\"\n        @click=\"${handleActionClick}\">\n        <span class=\"chip\" part=\"chip\">${renderChipContent()}</span>\n      </button>\n    `;\n\n    const renderStaticChip = () => html`\n      <span class=\"chip\" part=\"chip\">${renderChipContent()}</span>\n    `;\n\n    const renderRemovableChip = () => html`\n      <span class=\"chip\" part=\"chip\">${renderChipContent()} ${renderRemoveButton()}</span>\n    `;\n\n    // ============================================\n    // Render\n    // ============================================\n    return html`\n      ${() => {\n        const mode = props.mode.value;\n\n        if (mode === 'selectable') return renderSelectableChip();\n\n        if (mode === 'action') return renderActionChip();\n\n        if (mode === 'removable') return renderRemovableChip();\n\n        return renderStaticChip();\n      }}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    disabledStateMixin,\n    roundedVariantMixin,\n    sizeVariantMixin({\n      lg: {\n        '--_font-size': 'var(--text-sm)',\n        '--_gap': 'var(--size-1-5)',\n        '--_padding-x': 'var(--size-3)',\n        '--_padding-y': 'var(--size-1)',\n      },\n      sm: {\n        '--_font-size': 'var(--text-xs)',\n        '--_gap': 'var(--size-0-5)',\n        '--_padding-x': 'var(--size-2-5)',\n        '--_padding-y': 'var(--size-px)',\n      },\n    }),\n    forcedColorsMixin,\n    componentStyles,\n  ],\n});\n"],"mappings":";;;;;;;;AA+JA,IAAa,IAAW;AACxB,EAA8B,GAAU;CACtC,OAAO;EACL,SAAS;GACP,SAAS,KAAA;GACT,QAAQ,MAA0B,KAAS,OAAO,KAAA,IAAY,MAAU;GACxE,SAAS;EACX;EACA,OAAO,EAAK,OAAmB;EAC/B,mBAAmB,EAAK,KAAK,EAAK;EAClC,UAAU,EAAK,KAAK,EAAK;EACzB,OAAO,EAAK,OAAO;EACnB,MAAM,EAAK,MAAM;GAAC;GAAU;GAAa;GAAc;EAAQ,GAAY,QAAQ;EACnF,SAAS,EAAK,OAAyB;EACvC,MAAM,EAAK,OAAsB;EACjC,OAAO,EAAK,OAAO;EACnB,SAAS,EAAK,OAAiD;CACjE;CAEA,MAAM,GAAO;EACX,IAAM,IAAO,EAAuB,GAM9B,IAAe,EAAO,EAAM,QAAQ,UAAU,KAAA,CAAS,GAEvD,IAAe,EAAO,CAAC,EAAa,SAAS,EAAM,kBAAkB,CAAC,KAAK;EAEjF,EAAM,EAAM,UAAU,MAAU;GAC9B,AAAI,MAAU,KAAA,MACZ,EAAa,QAAQ;EAEzB,CAAC;EAGD,IAAM,IAAY,QACZ,EAAM,KAAK,UAAU,eAErB,EAAa,QACR,EAAM,QAAQ,SAAS,KAGzB,EAAa,QAN0B,EAO/C;EAED,EAAK,EACH,MAAM,EACJ,eAAgB,EAAM,KAAK,UAAU,gBAAgB,EAAU,QAAQ,KAAO,KAAA,EAChF,EACF,CAAC;EAID,SAAS,EAAa,GAAe;GAC/B,EAAM,SAAS,SAEnB,EAAK,UAAU;IAAE,eAAe;IAAG,OAAO,EAAM,MAAM;GAAM,CAAC;EAC/D;EAEA,SAAS,EAAyB,GAAe;GAG/C,IAFA,EAAE,gBAAgB,GAEd,EAAM,SAAS,OAAO;GAE1B,IAAM,IAAc,CAAC,EAAU;GAM/B,AAJK,EAAa,UAChB,EAAa,QAAQ,IAGvB,EAAK,UAAU;IAAE,SAAS;IAAa,eAAe;IAAG,OAAO,EAAM,MAAM;GAAM,CAAC;EACrF;EAEA,SAAS,EAAkB,GAAe;GACpC,EAAM,SAAS,SAEnB,EAAK,SAAS;IAAE,eAAe;IAAG,OAAO,EAAM,MAAM;GAAM,CAAC;EAC9D;EAKA,IAAM,UAA0B,CAAI;;;OAK9B,UAAuB;GAC3B,IAAM,IAAQ,EAAM,MAAM,SAAS,EAAM,MAAM;GAE/C,OAAO,IAAQ,UAAU,MAAU;EACrC,GAEM,UAA2B,CAAI;;;;;sBAKnB,EAAe;yBACZ,EAAM,KAAK,UAAU,YAAY;oBACtC,EAAM,SAAS;kBACjB,EAAa;;;OAKrB,UAA6B,CAAI;;;;;;8BAMb,OAAO,EAAU,KAAK,EAAE;sBAChC,EAAM,MAAM;oBACd,EAAM,SAAS;kBACjB,EAAyB;yCACF,EAAkB,EAAE;;OAInD,UAAyB,CAAI;;;;;sBAKjB,EAAM,MAAM;oBACd,EAAM,SAAS;kBACjB,EAAkB;yCACK,EAAkB,EAAE;;OAInD,UAAyB,CAAI;uCACA,EAAkB,EAAE;OAGjD,UAA4B,CAAI;uCACH,EAAkB,EAAE,GAAG,EAAmB,EAAE;;EAM/E,OAAO,CAAI;cACD;GACN,IAAM,IAAO,EAAM,KAAK;GAQxB,OANI,MAAS,eAAqB,EAAqB,IAEnD,MAAS,WAAiB,EAAiB,IAE3C,MAAS,cAAoB,EAAoB,IAE9C,EAAiB;EAC1B,EAAE;;CAEN;CACA,QAAQ;EACN;EACA;EACA;EACA,EAAiB;GACf,IAAI;IACF,gBAAgB;IAChB,UAAU;IACV,gBAAgB;IAChB,gBAAgB;GAClB;GACA,IAAI;IACF,gBAAgB;IAChB,UAAU;IACV,gBAAgB;IAChB,gBAAgB;GAClB;EACF,CAAC;EACD;EACA;CACF;AACF,CAAC"}
+{"version":3,"file":"chip.js","names":[],"sources":["../src/feedback/chip/chip.ts"],"sourcesContent":["import { bind, define, html, prop, useEmit } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport {\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsMixin,\n  roundedVariantMixin,\n  sizeVariantMixin,\n} from '../../styles';\n// ============================================\n// Styles\n// ============================================\nimport componentStyles from './chip.css?inline';\n\n// ============================================\n// Types\n// ============================================\n\n/** Chip component properties */\ntype ChipBaseProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interactions */\n  disabled?: boolean;\n  /** Accessible label (required for icon-only chips) */\n  label?: string;\n  /** Border radius override */\n  rounded?: RoundedSize | '';\n  /** Component size */\n  size?: ComponentSize;\n  /** Value associated with this chip — included in emitted event detail */\n  value?: string;\n  /** Visual style variant */\n  variant?: Exclude<VisualVariant, 'text' | 'frost'>;\n};\n\ntype OreChipMode = 'static' | 'removable' | 'selectable' | 'action';\n\n/** Read-only presentation chip */\ntype StaticChipProps = {\n  mode?: Extract<OreChipMode, 'static'>;\n};\n\n/** Removable chip mode */\ntype RemovableChipProps = {\n  mode: Extract<OreChipMode, 'removable'>;\n};\n\n/** Selectable chip mode */\ntype SelectableChipProps = {\n  /** Controlled checked state for `mode=\"selectable\"` */\n  checked?: boolean | undefined;\n  /** Initial checked state for uncontrolled `mode=\"selectable\"` */\n  'default-checked'?: boolean;\n  mode: Extract<OreChipMode, 'selectable'>;\n};\n\n/** Action chip mode — behaves like a button, fires a click event without maintaining state */\ntype ActionChipProps = {\n  mode: Extract<OreChipMode, 'action'>;\n};\n\ntype OreChipComponentProps = ChipBaseProps & {\n  checked?: boolean | undefined;\n  'default-checked'?: boolean;\n  mode?: OreChipMode;\n};\n\nexport type OreChipEvents = {\n  change: { checked: boolean; originalEvent: Event; value: string | undefined };\n  click: { originalEvent: MouseEvent; value: string | undefined };\n  remove: { originalEvent: MouseEvent; value: string | undefined };\n};\n\nexport type OreChipProps = ChipBaseProps &\n  (StaticChipProps | RemovableChipProps | SelectableChipProps | ActionChipProps);\n\n/**\n * A compact, styled label element. Supports icons, a remove button, colors, sizes, and variants.\n * Commonly used to represent tags, filters, or selected options in a multiselect field.\n *\n * @element ore-chip\n *\n * @attr {string}  label     - Accessible label (required for icon-only chips)\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 {string}  mode      - Interaction mode: 'static' | 'removable' | 'selectable' | 'action'\n * @attr {boolean} disabled  - Disable the chip\n * @attr {string}  value     - Value included in emitted event detail\n * @attr {boolean} checked   - Controlled checked state for selectable chips\n * @attr {boolean} default-checked - Initial checked state for uncontrolled selectable chips\n *\n * @fires remove - Fired when the remove button is clicked. detail: { value: string, originalEvent: MouseEvent }\n * @fires change - Fired when a selectable chip toggles. detail: { checked: boolean, value: string, originalEvent: Event }\n * @fires click  - Fired when an action chip is clicked. detail: { value: string, originalEvent: MouseEvent }\n *\n * @slot         - Chip label text\n * @slot icon    - Leading icon or decoration\n *\n * @cssprop --chip-bg              - Background color\n * @cssprop --chip-color           - Text color\n * @cssprop --chip-border-color    - Border color\n * @cssprop --chip-radius          - Border radius\n * @cssprop --chip-font-size       - Font size\n * @cssprop --chip-font-weight     - Font weight\n * @cssprop --chip-padding-x       - Horizontal padding\n * @cssprop --chip-padding-y       - Vertical padding\n * @cssprop --chip-gap             - Gap between icon, label and remove button\n * @cssprop --chip-hover-bg        - Background on hover (interactive modes)\n * @cssprop --chip-hover-color     - Text color on hover (interactive modes)\n * @cssprop --chip-hover-border-color - Border color on hover (interactive modes)\n * @cssprop --chip-active-bg       - Background when pressed (interactive modes)\n * @cssprop --chip-active-color    - Text color when pressed (interactive modes)\n * @cssprop --chip-remove-bg       - Remove button background (bordered/outline variants)\n * @cssprop --chip-remove-color    - Remove button icon color (bordered/outline variants)\n * @cssprop --chip-remove-hover-bg - Remove button background on hover\n *\n * @part remove-btn - Remove action button.\n * @part chip-btn - Shadow part for the `chip-btn` element.\n * @part chip - Shadow part for the `chip` element.\n * @example\n * ```html\n * <!-- Static chip (read-only) -->\n * <ore-chip color=\"primary\">Design</ore-chip>\n *\n * <!-- Removable chip -->\n * <ore-chip color=\"success\" variant=\"flat\" mode=\"removable\" value=\"ts\">\n *   TypeScript\n * </ore-chip>\n *\n * <!-- Selectable chip (controlled) -->\n * <ore-chip color=\"info\" variant=\"flat\" mode=\"selectable\" checked value=\"ui\">\n *   UI\n * </ore-chip>\n *\n * <!-- Selectable chip (uncontrolled) -->\n * <ore-chip color=\"info\" variant=\"flat\" mode=\"selectable\" default-checked value=\"ui\">\n *   UI\n * </ore-chip>\n *\n * <!-- Action chip (acts like a button) -->\n * <ore-chip color=\"warning\" mode=\"action\" value=\"add\">\n *   <svg slot=\"icon\" ...></svg>\n *   Add Item\n * </ore-chip>\n *\n * <!-- Icon-only chip -->\n * <ore-chip color=\"error\" mode=\"action\" label=\"Delete\">\n *   <svg slot=\"icon\" ...></svg>\n * </ore-chip>\n * ```\n */\nexport const CHIP_TAG = 'ore-chip' as const;\ndefine<OreChipComponentProps>(CHIP_TAG, {\n  props: {\n    checked: {\n      default: undefined as OreChipComponentProps['checked'],\n      parse: (value: string | null) => (value == null ? undefined : value !== 'false'),\n      reflect: false,\n    },\n    color: prop.string<ThemeColor>(),\n    'default-checked': prop.bool(false),\n    disabled: prop.bool(false),\n    label: prop.string(),\n    mode: prop.oneOf(['static', 'removable', 'selectable', 'action'] as const, 'static'),\n    rounded: prop.string<RoundedSize | ''>(),\n    size: prop.string<ComponentSize>(),\n    value: prop.string(),\n    variant: prop.string<Exclude<VisualVariant, 'text' | 'frost'>>(),\n  },\n\n  setup(props) {\n    const emit = useEmit<OreChipEvents>();\n\n    // ============================================\n    // State Management\n    // ============================================\n    // Once a checked prop is provided, treat the chip as controlled for the rest of its lifecycle.\n    const isControlled = signal(props.checked.value !== undefined);\n    // Internal tracking for uncontrolled selectable chips; seeded from default-checked.\n    const checkedState = signal(!isControlled.value && props['default-checked'].value);\n\n    watch(props.checked, (value) => {\n      if (value !== undefined) {\n        isControlled.value = true;\n      }\n    });\n\n    // Effective checked value — reactive to checked prop changes in controlled mode.\n    const isChecked = computed(() => {\n      if (props.mode.value !== 'selectable') return false;\n\n      if (isControlled.value) {\n        return props.checked.value ?? false;\n      }\n\n      return checkedState.value;\n    });\n\n    bind({\n      attr: {\n        checked: () => (props.mode.value === 'selectable' && isChecked.value ? true : undefined),\n      },\n    });\n    // ============================================\n    // Event Handlers\n    // ============================================\n    function handleRemove(e: MouseEvent) {\n      if (props.disabled.value) return;\n\n      emit('remove', { originalEvent: e, value: props.value.value });\n    }\n\n    function handleSelectableActivate(e: MouseEvent) {\n      e.stopPropagation();\n\n      if (props.disabled.value) return;\n\n      const nextChecked = !isChecked.value;\n\n      if (!isControlled.value) {\n        checkedState.value = nextChecked;\n      }\n\n      emit('change', { checked: nextChecked, originalEvent: e, value: props.value.value });\n    }\n\n    function handleActionClick(e: MouseEvent) {\n      if (props.disabled.value) return;\n\n      emit('click', { originalEvent: e, value: props.value.value });\n    }\n\n    // ============================================\n    // Template Helpers\n    // ============================================\n    const renderChipContent = () => html`\n      <slot name=\"icon\"></slot>\n      <span class=\"label\"><slot></slot></span>\n    `;\n\n    const removeBtnLabel = () => {\n      const label = props.label.value || props.value.value;\n\n      return label ? `Remove ${label}` : 'Remove';\n    };\n\n    const renderRemoveButton = () => html`\n      <button\n        class=\"remove-btn\"\n        part=\"remove-btn\"\n        type=\"button\"\n        aria-label=\"${removeBtnLabel}\"\n        ?hidden=\"${() => props.mode.value !== 'removable'}\"\n        disabled=\"${props.disabled}\"\n        @click=\"${handleRemove}\">\n        <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n      </button>\n    `;\n\n    const renderSelectableChip = () => html`\n      <button\n        class=\"chip-btn\"\n        part=\"chip-btn\"\n        type=\"button\"\n        role=\"checkbox\"\n        aria-checked=\"${() => String(isChecked.value)}\"\n        aria-label=\"${props.label}\"\n        disabled=\"${props.disabled}\"\n        @click=\"${handleSelectableActivate}\">\n        <span class=\"chip\" part=\"chip\">${renderChipContent()}</span>\n      </button>\n    `;\n\n    const renderActionChip = () => html`\n      <button\n        class=\"chip-btn\"\n        part=\"chip-btn\"\n        type=\"button\"\n        aria-label=\"${props.label}\"\n        disabled=\"${props.disabled}\"\n        @click=\"${handleActionClick}\">\n        <span class=\"chip\" part=\"chip\">${renderChipContent()}</span>\n      </button>\n    `;\n\n    const renderStaticChip = () => html`\n      <span class=\"chip\" part=\"chip\">${renderChipContent()}</span>\n    `;\n\n    const renderRemovableChip = () => html`\n      <span class=\"chip\" part=\"chip\">${renderChipContent()} ${renderRemoveButton()}</span>\n    `;\n\n    // ============================================\n    // Render\n    // ============================================\n    return html`\n      ${() => {\n        const mode = props.mode.value;\n\n        if (mode === 'selectable') return renderSelectableChip();\n\n        if (mode === 'action') return renderActionChip();\n\n        if (mode === 'removable') return renderRemovableChip();\n\n        return renderStaticChip();\n      }}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    disabledStateMixin,\n    roundedVariantMixin,\n    sizeVariantMixin({\n      lg: {\n        '--_font-size': 'var(--text-sm)',\n        '--_gap': 'var(--size-1-5)',\n        '--_padding-x': 'var(--size-3)',\n        '--_padding-y': 'var(--size-1)',\n      },\n      sm: {\n        '--_font-size': 'var(--text-xs)',\n        '--_gap': 'var(--size-0-5)',\n        '--_padding-x': 'var(--size-2-5)',\n        '--_padding-y': 'var(--size-px)',\n      },\n    }),\n    forcedColorsMixin,\n    componentStyles,\n  ],\n});\n"],"mappings":";;;;;;;AA8JA,IAAa,IAAW;AACxB,EAA8B,GAAU;CACtC,OAAO;EACL,SAAS;GACP,SAAS,KAAA;GACT,QAAQ,MAA0B,KAAS,OAAO,KAAA,IAAY,MAAU;GACxE,SAAS;EACX;EACA,OAAO,EAAK,OAAmB;EAC/B,mBAAmB,EAAK,KAAK,EAAK;EAClC,UAAU,EAAK,KAAK,EAAK;EACzB,OAAO,EAAK,OAAO;EACnB,MAAM,EAAK,MAAM;GAAC;GAAU;GAAa;GAAc;EAAQ,GAAY,QAAQ;EACnF,SAAS,EAAK,OAAyB;EACvC,MAAM,EAAK,OAAsB;EACjC,OAAO,EAAK,OAAO;EACnB,SAAS,EAAK,OAAiD;CACjE;CAEA,MAAM,GAAO;EACX,IAAM,IAAO,EAAuB,GAM9B,IAAe,EAAO,EAAM,QAAQ,UAAU,KAAA,CAAS,GAEvD,IAAe,EAAO,CAAC,EAAa,SAAS,EAAM,kBAAkB,CAAC,KAAK;EAEjF,EAAM,EAAM,UAAU,MAAU;GAC9B,AAAI,MAAU,KAAA,MACZ,EAAa,QAAQ;EAEzB,CAAC;EAGD,IAAM,IAAY,QACZ,EAAM,KAAK,UAAU,eAErB,EAAa,QACR,EAAM,QAAQ,SAAS,KAGzB,EAAa,QAN0B,EAO/C;EAED,EAAK,EACH,MAAM,EACJ,eAAgB,EAAM,KAAK,UAAU,gBAAgB,EAAU,QAAQ,KAAO,KAAA,EAChF,EACF,CAAC;EAID,SAAS,EAAa,GAAe;GAC/B,EAAM,SAAS,SAEnB,EAAK,UAAU;IAAE,eAAe;IAAG,OAAO,EAAM,MAAM;GAAM,CAAC;EAC/D;EAEA,SAAS,EAAyB,GAAe;GAG/C,IAFA,EAAE,gBAAgB,GAEd,EAAM,SAAS,OAAO;GAE1B,IAAM,IAAc,CAAC,EAAU;GAM/B,AAJK,EAAa,UAChB,EAAa,QAAQ,IAGvB,EAAK,UAAU;IAAE,SAAS;IAAa,eAAe;IAAG,OAAO,EAAM,MAAM;GAAM,CAAC;EACrF;EAEA,SAAS,EAAkB,GAAe;GACpC,EAAM,SAAS,SAEnB,EAAK,SAAS;IAAE,eAAe;IAAG,OAAO,EAAM,MAAM;GAAM,CAAC;EAC9D;EAKA,IAAM,UAA0B,CAAI;;;OAK9B,UAAuB;GAC3B,IAAM,IAAQ,EAAM,MAAM,SAAS,EAAM,MAAM;GAE/C,OAAO,IAAQ,UAAU,MAAU;EACrC,GAEM,UAA2B,CAAI;;;;;sBAKnB,EAAe;yBACZ,EAAM,KAAK,UAAU,YAAY;oBACtC,EAAM,SAAS;kBACjB,EAAa;;;OAKrB,UAA6B,CAAI;;;;;;8BAMb,OAAO,EAAU,KAAK,EAAE;sBAChC,EAAM,MAAM;oBACd,EAAM,SAAS;kBACjB,EAAyB;yCACF,EAAkB,EAAE;;OAInD,UAAyB,CAAI;;;;;sBAKjB,EAAM,MAAM;oBACd,EAAM,SAAS;kBACjB,EAAkB;yCACK,EAAkB,EAAE;;OAInD,UAAyB,CAAI;uCACA,EAAkB,EAAE;OAGjD,UAA4B,CAAI;uCACH,EAAkB,EAAE,GAAG,EAAmB,EAAE;;EAM/E,OAAO,CAAI;cACD;GACN,IAAM,IAAO,EAAM,KAAK;GAQxB,OANI,MAAS,eAAqB,EAAqB,IAEnD,MAAS,WAAiB,EAAiB,IAE3C,MAAS,cAAoB,EAAoB,IAE9C,EAAiB;EAC1B,EAAE;;CAEN;CACA,QAAQ;EACN;EACA;EACA;EACA,EAAiB;GACf,IAAI;IACF,gBAAgB;IAChB,UAAU;IACV,gBAAgB;IAChB,gBAAgB;GAClB;GACA,IAAI;IACF,gBAAgB;IAChB,UAAU;IACV,gBAAgB;IAChB,gBAAgB;GAClB;EACF,CAAC;EACD;EACA;CACF;AACF,CAAC"}

package/dist/combobox.cjs

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