@vielzeug/refine 26.10.7 → 26.10.10

package/dist/checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.cjs","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 { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\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 { ICON_TAG } from '../../content/icon/icon';\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":"+rBAiFA,IAAa,EAAe,gBAC5B,EAAA,EAAA,OAAA,CAAyB,EAAc,CACrC,eAAgB,GAChB,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,iBACH,QAAS,EAAA,KAAK,KAAK,EAAK,EACxB,MAAO,EAAA,KAAK,OAAO,EACnB,OAAQ,EAAA,KAAK,OAAO,EACpB,cAAe,EAAA,KAAK,KAAK,EAAK,EAC9B,KAAM,EAAA,KAAK,OAAO,EAClB,SAAU,EAAA,KAAK,KAAK,EAAK,EACzB,MAAO,EAAA,KAAK,OAAO,IAAI,CACzB,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EAEb,GAAA,EAAW,EAAA,OAAA,CAAO,EAAA,kBAAkB,EAEpC,EAAY,EAAA,gBAAgB,CAChC,QAAS,EAAM,QACf,wBAAyB,GACzB,UAAA,EAAU,EAAA,SAAA,KAAe,EAAM,SAAS,OAAS,EAAQ,GAAU,SAAS,KAAM,EAClF,MAAO,EAAM,MACb,MAAO,EACP,OAAQ,EAAM,OACd,cAAe,EAAM,cACrB,SAAW,GAAY,CACrB,EAAU,kBAAkB,QAAQ,EACpC,EAAA,gBAAgB,EAAI,EAAQ,OAAO,EAI/B,KAEJ,EAAA,yBAAyB,EAAI,OAAO,EACpC,EAAA,yBAAyB,EAAI,QAAQ,EACvC,EACA,OAAQ,WACR,SAAU,EAAM,SAChB,OAAQ,EAAA,gBAAgB,EAAA,SAAS,EACjC,MAAO,EAAM,KACf,CAAC,EAED,EAAU,iBAAA,EACR,EAAA,SAAA,CAAwB,CACtB,SAAU,EAAU,SACpB,QAAS,EAAU,MACnB,YAAc,GAAM,EACpB,kBAAmB,EAAU,kBAC7B,SAAU,EAAU,SACpB,MAAO,EAAU,kBACnB,CAAC,CACH,EAEA,GAAM,CACJ,cACA,UACA,WACA,YACA,cACA,gBACA,aACA,gBACA,WACE,EA2BJ,OAzBA,EAAA,mBACE,MACM,EAAQ,MACb,GAAU,CACT,EAAQ,MAAQ,CAClB,CACF,EAEA,EAAA,sBACE,EAAM,KACN,CACE,cACA,UACA,WACA,YACA,cACA,gBACA,aACA,gBACA,UACA,SAAU,EAAM,QAClB,EACA,UACF,EAEO,EAAA,IAAI;;;;;;;6CAO8B,EAAQ;QAC7C,EAAA,mBAAmB,EAAa,EAAW,CAAU,EAAE;KAE7D,EACA,OAAQ,CACN,EAAA,gBACA,EAAA,6BACA,EAAA,mBACA,EAAA,mBACA,EAAA,iBAAiB,EAAA,mBAAmB,EACpC,EAAA,OACF,CACF,CAAC"}
+{"version":3,"file":"checkbox.cjs","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 { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\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 { ICON_TAG } from '../../content/icon/icon';\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        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":"+rBAiFA,IAAa,EAAe,gBAC5B,EAAA,EAAA,OAAA,CAAyB,EAAc,CACrC,eAAgB,GAChB,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,iBACH,QAAS,EAAA,KAAK,KAAK,EAAK,EACxB,MAAO,EAAA,KAAK,OAAO,EACnB,OAAQ,EAAA,KAAK,OAAO,EACpB,cAAe,EAAA,KAAK,KAAK,EAAK,EAC9B,KAAM,EAAA,KAAK,OAAO,EAClB,SAAU,EAAA,KAAK,KAAK,EAAK,EACzB,MAAO,EAAA,KAAK,OAAO,IAAI,CACzB,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EAEb,GAAA,EAAW,EAAA,OAAA,CAAO,EAAA,kBAAkB,EAEpC,EAAY,EAAA,gBAAgB,CAChC,QAAS,EAAM,QACf,wBAAyB,GACzB,UAAA,EAAU,EAAA,SAAA,KAAe,EAAM,SAAS,OAAS,EAAQ,GAAU,SAAS,KAAM,EAClF,MAAO,EAAM,MACb,MAAO,EACP,OAAQ,EAAM,OACd,cAAe,EAAM,cACrB,SAAW,GAAY,CACrB,EAAU,kBAAkB,QAAQ,EACpC,EAAA,gBAAgB,EAAI,EAAQ,OAAO,EAI/B,KAEJ,EAAA,yBAAyB,EAAI,OAAO,EACpC,EAAA,yBAAyB,EAAI,QAAQ,EACvC,EACA,OAAQ,WACR,SAAU,EAAM,SAChB,OAAQ,EAAA,gBAAgB,EAAA,SAAS,EACjC,MAAO,EAAM,KACf,CAAC,EAED,EAAU,iBAAA,EACR,EAAA,SAAA,CAAwB,CACtB,SAAU,EAAU,SACpB,QAAS,EAAU,MACnB,YAAc,GAAM,EACpB,SAAU,EAAU,SACpB,MAAO,EAAU,kBACnB,CAAC,CACH,EAEA,GAAM,CACJ,cACA,UACA,WACA,YACA,cACA,gBACA,aACA,gBACA,WACE,EA2BJ,OAzBA,EAAA,mBACE,MACM,EAAQ,MACb,GAAU,CACT,EAAQ,MAAQ,CAClB,CACF,EAEA,EAAA,sBACE,EAAM,KACN,CACE,cACA,UACA,WACA,YACA,cACA,gBACA,aACA,gBACA,UACA,SAAU,EAAM,QAClB,EACA,UACF,EAEO,EAAA,IAAI;;;;;;;6CAO8B,EAAQ;QAC7C,EAAA,mBAAmB,EAAa,EAAW,CAAU,EAAE;KAE7D,EACA,OAAQ,CACN,EAAA,gBACA,EAAA,6BACA,EAAA,mBACA,EAAA,mBACA,EAAA,iBAAiB,EAAA,mBAAmB,EACpC,EAAA,OACF,CACF,CAAC"}

package/dist/checkbox.js

@@ -1,4 +1,4 @@
-import{defineFieldChecked as e,dispatchNativeFieldEvent as t,setFieldChecked as n}from"./inputs/shared/native-field-event.js";import{coarsePointerMixin as r}from"./styles/mixins/accessibility.css.js";import{sizeVariantMixin as i}from"./styles/mixins/shape.css.js";import{disabledStateMixin as a}from"./styles/mixins/states.css.js";import{colorThemeMixin as o,forcedColorsFormControlMixin as s}from"./styles/mixins/theme.css.js";import{createCheckable as c}from"./core/checkable.js";import{lifecycleSignal as l}from"./core/ore.js";import{disablableBundle as u,sizableBundle as d,themableBundle as f}from"./shared/prop-bundles.js";import{CONTROL_SIZE_PRESET as p}from"./shared/size-presets.js";import{ICON_TAG as m}from"./icon.js";import{applyCheckableBinding as h}from"./inputs/shared/field-binding.js";import{renderHelperRegion as g}from"./inputs/shared/templates.js";import{CHECKBOX_GROUP_CTX as _}from"./checkbox-group.js";import v from"./inputs/checkbox/checkbox.css.js";import{computed as y}from"@vielzeug/ripple";import{define as b,getHost as x,html as S,inject as C,onCleanup as w,prop as T,useField as E}from"@vielzeug/ore";var D=`ore-checkbox`;b(D,{formAssociated:!0,props:{...f,...d,...u,checked:T.bool(!1),error:T.string(),helper:T.string(),indeterminate:T.bool(!1),name:T.string(),required:T.bool(!1),value:T.string(`on`)},setup(r){let i=x(),a=C(_),o=c({checked:r.checked,clearIndeterminateFirst:!0,disabled:y(()=>r.disabled.value||!!a?.disabled.value),error:r.error,group:a,helper:r.helper,indeterminate:r.indeterminate,onToggle:e=>{o.triggerValidation(`change`),n(i,e.checked),!a&&(t(i,`input`),t(i,`change`))},prefix:`checkbox`,required:r.required,signal:l(w),value:r.value});o.attachFormField(E({disabled:o.disabled,onReset:o.reset,toFormValue:e=>e,validationMessage:o.validationMessage,validity:o.validity,value:o.checkableFormValue}));let{assistiveId:s,checked:u,disabled:d,errorText:f,handleClick:p,handleKeydown:m,helperText:v,indeterminate:b,labelId:T}=o;return e(i,()=>u.value,e=>{u.value=e}),h(r.size,{assistiveId:s,checked:u,disabled:d,errorText:f,handleClick:p,handleKeydown:m,helperText:v,indeterminate:b,labelId:T,required:r.required},`checkbox`),S`
+import{defineFieldChecked as e,dispatchNativeFieldEvent as t,setFieldChecked as n}from"./inputs/shared/native-field-event.js";import{coarsePointerMixin as r}from"./styles/mixins/accessibility.css.js";import{sizeVariantMixin as i}from"./styles/mixins/shape.css.js";import{disabledStateMixin as a}from"./styles/mixins/states.css.js";import{colorThemeMixin as o,forcedColorsFormControlMixin as s}from"./styles/mixins/theme.css.js";import{createCheckable as c}from"./core/checkable.js";import{lifecycleSignal as l}from"./core/ore.js";import{disablableBundle as u,sizableBundle as d,themableBundle as f}from"./shared/prop-bundles.js";import{CONTROL_SIZE_PRESET as p}from"./shared/size-presets.js";import{ICON_TAG as m}from"./icon.js";import{applyCheckableBinding as h}from"./inputs/shared/field-binding.js";import{renderHelperRegion as g}from"./inputs/shared/templates.js";import{CHECKBOX_GROUP_CTX as _}from"./checkbox-group.js";import v from"./inputs/checkbox/checkbox.css.js";import{computed as y}from"@vielzeug/ripple";import{define as b,getHost as x,html as S,inject as C,onCleanup as w,prop as T,useField as E}from"@vielzeug/ore";var D=`ore-checkbox`;b(D,{formAssociated:!0,props:{...f,...d,...u,checked:T.bool(!1),error:T.string(),helper:T.string(),indeterminate:T.bool(!1),name:T.string(),required:T.bool(!1),value:T.string(`on`)},setup(r){let i=x(),a=C(_),o=c({checked:r.checked,clearIndeterminateFirst:!0,disabled:y(()=>r.disabled.value||!!a?.disabled.value),error:r.error,group:a,helper:r.helper,indeterminate:r.indeterminate,onToggle:e=>{o.triggerValidation(`change`),n(i,e.checked),!a&&(t(i,`input`),t(i,`change`))},prefix:`checkbox`,required:r.required,signal:l(w),value:r.value});o.attachFormField(E({disabled:o.disabled,onReset:o.reset,toFormValue:e=>e,validity:o.validity,value:o.checkableFormValue}));let{assistiveId:s,checked:u,disabled:d,errorText:f,handleClick:p,handleKeydown:m,helperText:v,indeterminate:b,labelId:T}=o;return e(i,()=>u.value,e=>{u.value=e}),h(r.size,{assistiveId:s,checked:u,disabled:d,errorText:f,handleClick:p,handleKeydown:m,helperText:v,indeterminate:b,labelId:T,required:r.required},`checkbox`),S`
       <div class="checkbox-wrapper" part="checkbox">
         <div class="box" part="box">
           <ore-icon class="checkmark" name="check" size="14" stroke-width="2" aria-hidden="true"></ore-icon>

package/dist/checkbox.js.map

@@ -1 +1 @@
-{"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 { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\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 { ICON_TAG } from '../../content/icon/icon';\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":"2mCAiFA,IAAa,EAAe,eAC5B,EAAyB,EAAc,CACrC,eAAgB,GAChB,MAAO,CACL,GAAG,EACH,GAAG,EACH,GAAG,EACH,QAAS,EAAK,KAAK,EAAK,EACxB,MAAO,EAAK,OAAO,EACnB,OAAQ,EAAK,OAAO,EACpB,cAAe,EAAK,KAAK,EAAK,EAC9B,KAAM,EAAK,OAAO,EAClB,SAAU,EAAK,KAAK,EAAK,EACzB,MAAO,EAAK,OAAO,IAAI,CACzB,EACA,MAAM,EAAO,CACX,IAAM,EAAK,EAAQ,EAEb,EAAW,EAAO,CAAkB,EAEpC,EAAY,EAAgB,CAChC,QAAS,EAAM,QACf,wBAAyB,GACzB,SAAU,MAAe,EAAM,SAAS,OAAS,EAAQ,GAAU,SAAS,KAAM,EAClF,MAAO,EAAM,MACb,MAAO,EACP,OAAQ,EAAM,OACd,cAAe,EAAM,cACrB,SAAW,GAAY,CACrB,EAAU,kBAAkB,QAAQ,EACpC,EAAgB,EAAI,EAAQ,OAAO,EAI/B,KAEJ,EAAyB,EAAI,OAAO,EACpC,EAAyB,EAAI,QAAQ,EACvC,EACA,OAAQ,WACR,SAAU,EAAM,SAChB,OAAQ,EAAgB,CAAS,EACjC,MAAO,EAAM,KACf,CAAC,EAED,EAAU,gBACR,EAAwB,CACtB,SAAU,EAAU,SACpB,QAAS,EAAU,MACnB,YAAc,GAAM,EACpB,kBAAmB,EAAU,kBAC7B,SAAU,EAAU,SACpB,MAAO,EAAU,kBACnB,CAAC,CACH,EAEA,GAAM,CACJ,cACA,UACA,WACA,YACA,cACA,gBACA,aACA,gBACA,WACE,EA2BJ,OAzBA,EACE,MACM,EAAQ,MACb,GAAU,CACT,EAAQ,MAAQ,CAClB,CACF,EAEA,EACE,EAAM,KACN,CACE,cACA,UACA,WACA,YACA,cACA,gBACA,aACA,gBACA,UACA,SAAU,EAAM,QAClB,EACA,UACF,EAEO,CAAI;;;;;;;6CAO8B,EAAQ;QAC7C,EAAmB,EAAa,EAAW,CAAU,EAAE;KAE7D,EACA,OAAQ,CACN,EACA,EACA,EACA,EACA,EAAiB,CAAmB,EACpC,CACF,CACF,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 { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\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 { ICON_TAG } from '../../content/icon/icon';\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        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":"2mCAiFA,IAAa,EAAe,eAC5B,EAAyB,EAAc,CACrC,eAAgB,GAChB,MAAO,CACL,GAAG,EACH,GAAG,EACH,GAAG,EACH,QAAS,EAAK,KAAK,EAAK,EACxB,MAAO,EAAK,OAAO,EACnB,OAAQ,EAAK,OAAO,EACpB,cAAe,EAAK,KAAK,EAAK,EAC9B,KAAM,EAAK,OAAO,EAClB,SAAU,EAAK,KAAK,EAAK,EACzB,MAAO,EAAK,OAAO,IAAI,CACzB,EACA,MAAM,EAAO,CACX,IAAM,EAAK,EAAQ,EAEb,EAAW,EAAO,CAAkB,EAEpC,EAAY,EAAgB,CAChC,QAAS,EAAM,QACf,wBAAyB,GACzB,SAAU,MAAe,EAAM,SAAS,OAAS,EAAQ,GAAU,SAAS,KAAM,EAClF,MAAO,EAAM,MACb,MAAO,EACP,OAAQ,EAAM,OACd,cAAe,EAAM,cACrB,SAAW,GAAY,CACrB,EAAU,kBAAkB,QAAQ,EACpC,EAAgB,EAAI,EAAQ,OAAO,EAI/B,KAEJ,EAAyB,EAAI,OAAO,EACpC,EAAyB,EAAI,QAAQ,EACvC,EACA,OAAQ,WACR,SAAU,EAAM,SAChB,OAAQ,EAAgB,CAAS,EACjC,MAAO,EAAM,KACf,CAAC,EAED,EAAU,gBACR,EAAwB,CACtB,SAAU,EAAU,SACpB,QAAS,EAAU,MACnB,YAAc,GAAM,EACpB,SAAU,EAAU,SACpB,MAAO,EAAU,kBACnB,CAAC,CACH,EAEA,GAAM,CACJ,cACA,UACA,WACA,YACA,cACA,gBACA,aACA,gBACA,WACE,EA2BJ,OAzBA,EACE,MACM,EAAQ,MACb,GAAU,CACT,EAAQ,MAAQ,CAClB,CACF,EAEA,EACE,EAAM,KACN,CACE,cACA,UACA,WACA,YACA,cACA,gBACA,aACA,gBACA,UACA,SAAU,EAAM,QAClB,EACA,UACF,EAEO,CAAI;;;;;;;6CAO8B,EAAQ;QAC7C,EAAmB,EAAa,EAAW,CAAU,EAAE;KAE7D,EACA,OAAQ,CACN,EACA,EACA,EACA,EACA,EAAiB,CAAmB,EACpC,CACF,CACF,CAAC"}

package/dist/chip.cjs

@@ -1,7 +1,7 @@
-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("./styles/mixins/variants.css.cjs"),i=require("./icon.cjs"),a=require("./feedback/chip/chip.css.cjs");let o=require("@vielzeug/ripple"),s=require("@vielzeug/ore");var c=`ore-chip`;(0,s.define)(c,{props:{checked:{default:void 0,parse:e=>e==null?void 0:e!==`false`,reflect:!1},color:s.prop.string(),"default-checked":s.prop.bool(!1),disabled:s.prop.bool(!1),label:s.prop.string(),layout:s.prop.oneOf([`inline`,`stacked`],`inline`),mode:s.prop.oneOf([`static`,`removable`,`selectable`,`action`],`static`),rounded:s.prop.string(),size:s.prop.string(),value:s.prop.string(),variant:s.prop.string()},setup(e){let t=(0,s.useEmit)(),n=(0,o.signal)(e.checked.value!==void 0),r=(0,o.signal)(!n.value&&e[`default-checked`].value);(0,o.watch)(e.checked,e=>{e!==void 0&&(n.value=!0)});let i=(0,o.computed)(()=>e.mode.value===`selectable`?n.value?e.checked.value??!1:r.value:!1);(0,s.bind)({attr:{checked:()=>e.mode.value===`selectable`&&i.value?!0:void 0}});function handleRemove(n){e.disabled.value||t(`remove`,{originalEvent:n,value:e.value.value})}function handleSelectableActivate(a){if(a.stopPropagation(),e.disabled.value)return;let o=!i.value;n.value||(r.value=o),t(`change`,{checked:o,originalEvent:a,value:e.value.value})}function handleActionClick(n){e.disabled.value||t(`click`,{originalEvent:n,value:e.value.value})}let renderChipContent=()=>s.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("./styles/mixins/variants.css.cjs"),i=require("./shared/types.cjs"),a=require("./icon.cjs"),o=require("./feedback/chip/chip.css.cjs");let s=require("@vielzeug/ripple"),c=require("@vielzeug/ore");var l=[``,...i.ROUNDED_SIZES],u=[`solid`,`flat`,`bordered`,`outline`,`ghost`,`frost`],d=`ore-chip`;(0,c.define)(d,{props:{checked:{default:void 0,parse:e=>e==null?void 0:e!==`false`,reflect:!1},color:c.prop.oneOf(i.THEME_COLORS),"default-checked":c.prop.bool(!1),disabled:c.prop.bool(!1),label:c.prop.string(),layout:c.prop.oneOf([`inline`,`stacked`],`inline`),mode:c.prop.oneOf([`static`,`removable`,`selectable`,`action`],`static`),rounded:c.prop.oneOf(l),size:c.prop.oneOf(i.COMPONENT_SIZES),value:c.prop.string(),variant:c.prop.oneOf(u)},setup(e){let t=(0,c.useEmit)(),n=(0,s.signal)(e.checked.value!==void 0),r=(0,s.signal)(!n.value&&e[`default-checked`].value);(0,s.watch)(e.checked,e=>{e!==void 0&&(n.value=!0)});let i=(0,s.computed)(()=>e.mode.value===`selectable`?n.value?e.checked.value??!1:r.value:!1);(0,c.bind)({attr:{checked:()=>e.mode.value===`selectable`&&i.value?!0:void 0}});function handleRemove(n){e.disabled.value||t(`remove`,{originalEvent:n,value:e.value.value})}function handleSelectableActivate(a){if(a.stopPropagation(),e.disabled.value)return;let o=!i.value;n.value||(r.value=o),t(`change`,{checked:o,originalEvent:a,value:e.value.value})}function handleActionClick(n){e.disabled.value||t(`click`,{originalEvent:n,value:e.value.value})}let renderChipContent=()=>c.html`
       <slot name="icon"></slot>
       <span class="label"><slot></slot></span>
-    `,removeBtnLabel=()=>{let t=e.label.value||e.value.value;return t?`Remove ${t}`:`Remove`},renderRemoveButton=()=>s.html`
+    `,removeBtnLabel=()=>{let t=e.label.value||e.value.value;return t?`Remove ${t}`:`Remove`},renderRemoveButton=()=>c.html`
       <button
         class="remove-btn"
         part="remove-btn"
@@ -12,7 +12,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         @click="${handleRemove}">
         <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
       </button>
-    `,renderSelectableChip=()=>s.html`
+    `,renderSelectableChip=()=>c.html`
       <button
         class="chip-btn"
         part="chip-btn"
@@ -24,7 +24,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         @click="${handleSelectableActivate}">
         <span class="chip" part="chip">${renderChipContent()}</span>
       </button>
-    `,renderActionChip=()=>s.html`
+    `,renderActionChip=()=>c.html`
       <button
         class="chip-btn"
         part="chip-btn"
@@ -34,11 +34,11 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         @click="${handleActionClick}">
         <span class="chip" part="chip">${renderChipContent()}</span>
       </button>
-    `,renderStaticChip=()=>s.html`
+    `,renderStaticChip=()=>c.html`
       <span class="chip" part="chip">${renderChipContent()}</span>
-    `,renderRemovableChip=()=>s.html`
+    `,renderRemovableChip=()=>c.html`
       <span class="chip" part="chip">${renderChipContent()} ${renderRemoveButton()}</span>
-    `;return s.html`
+    `;return c.html`
       ${()=>{let t=e.mode.value;return t===`selectable`?renderSelectableChip():t===`action`?renderActionChip():t===`removable`?renderRemovableChip():renderStaticChip()}}
-    `},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)`}}),r.frostVariantMixin(`.chip`),n.forcedColorsMixin,a.default]}),exports.CHIP_TAG=c,exports.ICON_TAG=i.ICON_TAG;
+    `},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)`}}),r.frostVariantMixin(`.chip`),n.forcedColorsMixin,o.default]}),exports.CHIP_TAG=d,exports.ICON_TAG=a.ICON_TAG;
 //# 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 { bind, define, html, prop, useEmit } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\nimport {\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsMixin,\n  frostVariantMixin,\n  roundedVariantMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n// ============================================\n// Styles\n// ============================================\nimport componentStyles from './chip.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\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  /** Content layout: 'inline' (default) keeps icon and label on one line; 'stacked' places the icon above a wrapping label */\n  layout?: 'inline' | 'stacked';\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'>;\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' | 'frost'\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 {string}  layout    - Content layout: 'inline' (default) | 'stacked': stacked places the icon above a wrapping label, for tile-like selectable chips\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-icon-size       - Size of the slotted icon (default: 1em)\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    layout: prop.oneOf(['inline', 'stacked'] as const, 'inline'),\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'>>(),\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    frostVariantMixin('.chip'),\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';\nimport {\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsMixin,\n  frostVariantMixin,\n  roundedVariantMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport { COMPONENT_SIZES, ROUNDED_SIZES, THEME_COLORS } from '../../types';\n// ============================================\n// Styles\n// ============================================\nimport componentStyles from './chip.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\n\nconst CHIP_ROUNDED = ['', ...ROUNDED_SIZES] as const;\nconst CHIP_VARIANTS = ['solid', 'flat', 'bordered', 'outline', 'ghost', 'frost'] as const;\n\n// ============================================\n// Types\n// ============================================\n\n/** Chip component properties */\ntype ChipBaseProps = {\n  /** Theme color */\n  color?: (typeof THEME_COLORS)[number];\n  /** Disable interactions */\n  disabled?: boolean;\n  /** Accessible label (required for icon-only chips) */\n  label?: string;\n  /** Content layout: 'inline' (default) keeps icon and label on one line; 'stacked' places the icon above a wrapping label */\n  layout?: 'inline' | 'stacked';\n  /** Border radius override */\n  rounded?: (typeof CHIP_ROUNDED)[number];\n  /** Component size */\n  size?: (typeof COMPONENT_SIZES)[number];\n  /** Value associated with this chip: included in emitted event detail */\n  value?: string;\n  /** Visual style variant */\n  variant?: (typeof CHIP_VARIANTS)[number];\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' | 'frost'\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 {string}  layout    - Content layout: 'inline' (default) | 'stacked': stacked places the icon above a wrapping label, for tile-like selectable chips\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-icon-size       - Size of the slotted icon (default: 1em)\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.oneOf(THEME_COLORS),\n    'default-checked': prop.bool(false),\n    disabled: prop.bool(false),\n    label: prop.string(),\n    layout: prop.oneOf(['inline', 'stacked'] as const, 'inline'),\n    mode: prop.oneOf(['static', 'removable', 'selectable', 'action'] as const, 'static'),\n    rounded: prop.oneOf(CHIP_ROUNDED),\n    size: prop.oneOf(COMPONENT_SIZES),\n    value: prop.string(),\n    variant: prop.oneOf(CHIP_VARIANTS),\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    frostVariantMixin('.chip'),\n    forcedColorsMixin,\n    componentStyles,\n  ],\n});\n"],"mappings":"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"}

package/dist/chip.js

@@ -1,7 +1,7 @@
-import{roundedVariantMixin as e,sizeVariantMixin as t}from"./styles/mixins/shape.css.js";import{disabledStateMixin as n}from"./styles/mixins/states.css.js";import{colorThemeMixin as r,forcedColorsMixin as i}from"./styles/mixins/theme.css.js";import{frostVariantMixin as a}from"./styles/mixins/variants.css.js";import{ICON_TAG as o}from"./icon.js";import s from"./feedback/chip/chip.css.js";import{computed as c,signal as l,watch as u}from"@vielzeug/ripple";import{bind as d,define as f,html as p,prop as m,useEmit as h}from"@vielzeug/ore";var g=`ore-chip`;f(g,{props:{checked:{default:void 0,parse:e=>e==null?void 0:e!==`false`,reflect:!1},color:m.string(),"default-checked":m.bool(!1),disabled:m.bool(!1),label:m.string(),layout:m.oneOf([`inline`,`stacked`],`inline`),mode:m.oneOf([`static`,`removable`,`selectable`,`action`],`static`),rounded:m.string(),size:m.string(),value:m.string(),variant:m.string()},setup(e){let t=h(),n=l(e.checked.value!==void 0),r=l(!n.value&&e[`default-checked`].value);u(e.checked,e=>{e!==void 0&&(n.value=!0)});let i=c(()=>e.mode.value===`selectable`?n.value?e.checked.value??!1:r.value:!1);d({attr:{checked:()=>e.mode.value===`selectable`&&i.value?!0:void 0}});function handleRemove(n){e.disabled.value||t(`remove`,{originalEvent:n,value:e.value.value})}function handleSelectableActivate(a){if(a.stopPropagation(),e.disabled.value)return;let o=!i.value;n.value||(r.value=o),t(`change`,{checked:o,originalEvent:a,value:e.value.value})}function handleActionClick(n){e.disabled.value||t(`click`,{originalEvent:n,value:e.value.value})}let renderChipContent=()=>p`
+import{roundedVariantMixin as e,sizeVariantMixin as t}from"./styles/mixins/shape.css.js";import{disabledStateMixin as n}from"./styles/mixins/states.css.js";import{colorThemeMixin as r,forcedColorsMixin as i}from"./styles/mixins/theme.css.js";import{frostVariantMixin as a}from"./styles/mixins/variants.css.js";import{COMPONENT_SIZES as o,ROUNDED_SIZES as s,THEME_COLORS as c}from"./shared/types.js";import{ICON_TAG as l}from"./icon.js";import u from"./feedback/chip/chip.css.js";import{computed as d,signal as f,watch as p}from"@vielzeug/ripple";import{bind as m,define as h,html as g,prop as _,useEmit as v}from"@vielzeug/ore";var y=[``,...s],b=[`solid`,`flat`,`bordered`,`outline`,`ghost`,`frost`],x=`ore-chip`;h(x,{props:{checked:{default:void 0,parse:e=>e==null?void 0:e!==`false`,reflect:!1},color:_.oneOf(c),"default-checked":_.bool(!1),disabled:_.bool(!1),label:_.string(),layout:_.oneOf([`inline`,`stacked`],`inline`),mode:_.oneOf([`static`,`removable`,`selectable`,`action`],`static`),rounded:_.oneOf(y),size:_.oneOf(o),value:_.string(),variant:_.oneOf(b)},setup(e){let t=v(),n=f(e.checked.value!==void 0),r=f(!n.value&&e[`default-checked`].value);p(e.checked,e=>{e!==void 0&&(n.value=!0)});let i=d(()=>e.mode.value===`selectable`?n.value?e.checked.value??!1:r.value:!1);m({attr:{checked:()=>e.mode.value===`selectable`&&i.value?!0:void 0}});function handleRemove(n){e.disabled.value||t(`remove`,{originalEvent:n,value:e.value.value})}function handleSelectableActivate(a){if(a.stopPropagation(),e.disabled.value)return;let o=!i.value;n.value||(r.value=o),t(`change`,{checked:o,originalEvent:a,value:e.value.value})}function handleActionClick(n){e.disabled.value||t(`click`,{originalEvent:n,value:e.value.value})}let renderChipContent=()=>g`
       <slot name="icon"></slot>
       <span class="label"><slot></slot></span>
-    `,removeBtnLabel=()=>{let t=e.label.value||e.value.value;return t?`Remove ${t}`:`Remove`},renderRemoveButton=()=>p`
+    `,removeBtnLabel=()=>{let t=e.label.value||e.value.value;return t?`Remove ${t}`:`Remove`},renderRemoveButton=()=>g`
       <button
         class="remove-btn"
         part="remove-btn"
@@ -12,7 +12,7 @@ import{roundedVariantMixin as e,sizeVariantMixin as t}from"./styles/mixins/shape
         @click="${handleRemove}">
         <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
       </button>
-    `,renderSelectableChip=()=>p`
+    `,renderSelectableChip=()=>g`
       <button
         class="chip-btn"
         part="chip-btn"
@@ -24,7 +24,7 @@ import{roundedVariantMixin as e,sizeVariantMixin as t}from"./styles/mixins/shape
         @click="${handleSelectableActivate}">
         <span class="chip" part="chip">${renderChipContent()}</span>
       </button>
-    `,renderActionChip=()=>p`
+    `,renderActionChip=()=>g`
       <button
         class="chip-btn"
         part="chip-btn"
@@ -34,11 +34,11 @@ import{roundedVariantMixin as e,sizeVariantMixin as t}from"./styles/mixins/shape
         @click="${handleActionClick}">
         <span class="chip" part="chip">${renderChipContent()}</span>
       </button>
-    `,renderStaticChip=()=>p`
+    `,renderStaticChip=()=>g`
       <span class="chip" part="chip">${renderChipContent()}</span>
-    `,renderRemovableChip=()=>p`
+    `,renderRemovableChip=()=>g`
       <span class="chip" part="chip">${renderChipContent()} ${renderRemoveButton()}</span>
-    `;return p`
+    `;return g`
       ${()=>{let t=e.mode.value;return t===`selectable`?renderSelectableChip():t===`action`?renderActionChip():t===`removable`?renderRemovableChip():renderStaticChip()}}
-    `},styles:[r,n,e,t({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)`}}),a(`.chip`),i,s]});export{g as CHIP_TAG,o as ICON_TAG};
+    `},styles:[r,n,e,t({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)`}}),a(`.chip`),i,u]});export{x as CHIP_TAG,l as ICON_TAG};
 //# sourceMappingURL=chip.js.map

package/dist/chip.js.map

@@ -1 +1 @@
-{"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';\nimport {\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsMixin,\n  frostVariantMixin,\n  roundedVariantMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n// ============================================\n// Styles\n// ============================================\nimport componentStyles from './chip.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\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  /** Content layout: 'inline' (default) keeps icon and label on one line; 'stacked' places the icon above a wrapping label */\n  layout?: 'inline' | 'stacked';\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'>;\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' | 'frost'\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 {string}  layout    - Content layout: 'inline' (default) | 'stacked': stacked places the icon above a wrapping label, for tile-like selectable chips\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-icon-size       - Size of the slotted icon (default: 1em)\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    layout: prop.oneOf(['inline', 'stacked'] as const, 'inline'),\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'>>(),\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    frostVariantMixin('.chip'),\n    forcedColorsMixin,\n    componentStyles,\n  ],\n});\n"],"mappings":"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"}
+{"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';\nimport {\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsMixin,\n  frostVariantMixin,\n  roundedVariantMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport { COMPONENT_SIZES, ROUNDED_SIZES, THEME_COLORS } from '../../types';\n// ============================================\n// Styles\n// ============================================\nimport componentStyles from './chip.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\n\nconst CHIP_ROUNDED = ['', ...ROUNDED_SIZES] as const;\nconst CHIP_VARIANTS = ['solid', 'flat', 'bordered', 'outline', 'ghost', 'frost'] as const;\n\n// ============================================\n// Types\n// ============================================\n\n/** Chip component properties */\ntype ChipBaseProps = {\n  /** Theme color */\n  color?: (typeof THEME_COLORS)[number];\n  /** Disable interactions */\n  disabled?: boolean;\n  /** Accessible label (required for icon-only chips) */\n  label?: string;\n  /** Content layout: 'inline' (default) keeps icon and label on one line; 'stacked' places the icon above a wrapping label */\n  layout?: 'inline' | 'stacked';\n  /** Border radius override */\n  rounded?: (typeof CHIP_ROUNDED)[number];\n  /** Component size */\n  size?: (typeof COMPONENT_SIZES)[number];\n  /** Value associated with this chip: included in emitted event detail */\n  value?: string;\n  /** Visual style variant */\n  variant?: (typeof CHIP_VARIANTS)[number];\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' | 'frost'\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 {string}  layout    - Content layout: 'inline' (default) | 'stacked': stacked places the icon above a wrapping label, for tile-like selectable chips\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-icon-size       - Size of the slotted icon (default: 1em)\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.oneOf(THEME_COLORS),\n    'default-checked': prop.bool(false),\n    disabled: prop.bool(false),\n    label: prop.string(),\n    layout: prop.oneOf(['inline', 'stacked'] as const, 'inline'),\n    mode: prop.oneOf(['static', 'removable', 'selectable', 'action'] as const, 'static'),\n    rounded: prop.oneOf(CHIP_ROUNDED),\n    size: prop.oneOf(COMPONENT_SIZES),\n    value: prop.string(),\n    variant: prop.oneOf(CHIP_VARIANTS),\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    frostVariantMixin('.chip'),\n    forcedColorsMixin,\n    componentStyles,\n  ],\n});\n"],"mappings":"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"}

package/dist/combobox.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./inputs/shared/native-field-event.cjs"),t=require("./styles/mixins/accessibility.css.cjs"),n=require("./styles/mixins/shape.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./core/keyboard.cjs"),a=require("./core/choice-field.cjs"),o=require("./core/ore.cjs"),s=require("./core/option-list.cjs"),c=require("./chip.cjs"),l=require("./inputs/combobox/combobox.css.cjs"),u=require("./inputs/combobox/combobox-options.cjs"),d=require("./input.cjs");let f=require("@vielzeug/ripple"),p=require("@vielzeug/ore");var m=`ore-combobox-option`;(0,p.define)(m,{setup(){return p.html``}});var h=`ore-combobox`;(0,p.define)(h,{formAssociated:!0,props:{autoclose:p.prop.bool(!1),color:p.prop.string(),creatable:p.prop.bool(!1),disabled:p.prop.bool(!1),error:p.prop.string(),fullwidth:p.prop.bool(!1),helper:p.prop.string(),"hide-label":p.prop.bool(!1),label:p.prop.string(),"label-placement":p.prop.oneOf([`inset`,`outside`],`inset`),loading:p.prop.bool(!1),multiple:p.prop.bool(!1),name:p.prop.string(),"no-filter":p.prop.bool(!1),options:p.prop.data(),placeholder:p.prop.string(`Select...`),required:p.prop.bool(!1),rounded:p.prop.string(),size:p.prop.string(),success:p.prop.bool(!1),value:p.prop.string(),variant:p.prop.string()},setup(t){let n=(0,p.getHost)(),r=(0,p.useEmit)(),c=p.watchEffect,l=(0,f.signal)(``),d=null,m=null,h=null,g=null,_=(0,p.ref)(),v=o.lifecycleSignal(p.onCleanup),y=a.createChoiceField({disabled:t.disabled,error:t.error,helper:t.helper,label:t.label,labelPlacement:t[`label-placement`],multiple:t.multiple,prefix:`combobox`,required:t.required,signal:v,value:t.value}),b=(0,f.signal)([]),x=s.createListboxDropdown({getBoundary:()=>n,getFocusedOptionElement:()=>h?.querySelector(`[data-focused]`)??null,getItems:()=>b.value,getOptionId:e=>`${y.fieldId}-opt-${e}`,getPanel:()=>h,getReference:()=>m,getTrigger:()=>d,isDisabled:()=>y.disabled.value,isItemDisabled:e=>e.disabled,onClose:e=>{r(`open-change`,{open:!1,reason:e}),v.aborted||restoreQueryFromSelection(),y.triggerValidation(`blur`)},onOpen:e=>r(`open-change`,{open:!0,reason:e}),restoreFocus:!1,signal:v}),{disabled:S,fieldId:C,selectedValues:w,triggerValidation:T}=y;y.attachFormField((0,p.useField)({disabled:y.disabled,onReset:y.reset,toFormValue:e=>e,validationMessage:y.validationMessage,validity:y.validity,value:y.formValue}));let{focusedIndex:E,isOpen:D,scrollFocusedIntoView:O,updatePosition:k}=x,isMultiple=()=>!!t.multiple.value,isCreatable=()=>!!t.creatable.value,isNoFilter=()=>!!t[`no-filter`].value;(0,p.bind)({attr:{open:()=>D.value?!0:void 0,size:t.size,variant:t.variant}});let A=null,j=!1,M=(0,f.computed)(()=>w.value[0]??``);Object.defineProperty(n,"value",{configurable:!0,get:()=>y.formValue.value,set:e=>{let t=e;if(Array.isArray(t)){y.setValues(t.map(e=>String(e??``)));return}if(t==null||t===``){y.clear();return}y.setValues(isMultiple()?String(t).split(`,`):[String(t)])}});let hasValue=()=>w.value.length>0;function focusLiveInput(){d?.focus()}let N=(0,f.signal)([]),P=(0,f.signal)([]),isLoading=()=>!!t.loading.value;function normalizeOption(e){return{disabled:!!e.disabled,disabledReason:e.disabledReason,iconEl:e.iconEl??null,label:e.label??e.value,value:e.value}}let F=(0,f.computed)(()=>{let e=t.options.value,n=Array.isArray(e)?e.map(normalizeOption):N.value;return P.value.length===0?n:[...n,...P.value]}),I={clear:()=>{y.clear()},remove:e=>{y.removeValue(e)},select:e=>{y.selectValue(e)},toggle:e=>{y.toggleValue(e)}};function readOptions(e=Array.from(n.children)){if(N.value=u.parseSlottedOptions(e),!isMultiple()){let e=F.value.find(e=>e.value===M.value);l.value=e?.label??M.value}}readOptions(),c(()=>{let e=u.filterOptions(F.value,l.value,isNoFilter());b.value=isMultiple()?e.filter(e=>!w.value.includes(e.value)):e});let L=(0,f.computed)(()=>u.getCreatableLabel(l.value,isCreatable(),b.value)),inputPlaceholder=()=>isMultiple()&&w.value.length>0?``:t.placeholder.value||``;function emitChange(){e.dispatchNativeFieldEvent(n,`input`),e.dispatchNativeFieldEvent(n,`change`)}function removeChip(e){e.stopPropagation();let t=e.detail?.value;t!==void 0&&(I.remove(t),emitChange(),T(`change`))}function restoreQueryFromSelection(){if(!isMultiple()){let e=F.value.find(e=>e.value===M.value);j=!0,l.value=e?.label??``,Promise.resolve().then(()=>{j=!1});return}l.value=``}c(()=>{if(D.value&&!isMultiple()&&M.value&&E.value===-1&&l.value===``){let e=b.value.findIndex(e=>e.value===M.value);e>=0&&x.set(e)}});function openPopup(e=!0,t=`programmatic`){if(h&&`showPopover`in h&&!h.matches(`:popover-open`)&&h.showPopover(),e&&(A=l.value,l.value=``),!isMultiple()&&M.value){let e=u.filterOptions(F.value,``,isNoFilter()).findIndex(e=>e.value===M.value);e>=0&&x.set(e)}x.open(t),!isMultiple()&&M.value&&E.value>=0&&requestAnimationFrame(()=>{O()})}function closePopup(e=`programmatic`){x.close(e)}let R=i.createInteraction({disabled:S,onPress:()=>{D.value||openPopup(!0,`click`),focusLiveInput()}}),z=i.createInteraction({disabled:S,keys:[`Enter`],onPress:e=>{let t=b.value;D.value&&E.value>=0&&E.value<t.length?selectOption(t[E.value],e):D.value&&E.value===-1&&L.value?createOption(l.value,e):D.value||openPopup(!0,`keyboard`)}});function selectOption(e,n){e.disabled||(isMultiple()?(I.toggle(e.value),l.value=``,emitChange(),T(`change`),t.autoclose.value&&closePopup(),focusLiveInput(),requestAnimationFrame(()=>focusLiveInput())):(I.select(e.value),l.value=e.label,emitChange(),T(`change`),closePopup(),focusLiveInput()))}function resolveOptionFromElement(e){let t=e.getAttribute(`data-option-index`),n=t?Number(t):-1;if(Number.isInteger(n)&&n>=0&&n<b.value.length)return b.value[n]??null;let r=e.getAttribute(`data-option-value`);if(r){let e=b.value.find(e=>e.value===r);if(e)return e}let i=e.querySelector(`span`)?.textContent?.trim()??e.textContent?.trim()??``;return i?b.value.find(e=>e.label===i||e.value===i)??null:null}function clearValue(e){e.stopPropagation(),I.clear(),l.value=``,emitChange(),T(`change`),focusLiveInput()}function handleInput(e){let t=e.target,n=t.value;if(!j&&n!==l.value){if(l.value=n,!isMultiple()){let e=w.value[0],t=e?F.value.find(t=>t.value===e)?.label??e:``;n===``&&A===t&&(A=null)}x.navigate(`first`),D.value||openPopup(!1,`keyboard`),r(`search`,{query:t.value})}}function handleFocus(){}function handleKeydown(e){if(!S.value&&!x.handleKeydown(e))switch(e.key){case`ArrowDown`:e.preventDefault(),D.value?x.navigate(`next`):(openPopup(!0,`keyboard`),x.navigate(`first`));break;case`ArrowUp`:e.preventDefault(),D.value?x.navigate(`prev`):openPopup(!0,`keyboard`);break;case`Backspace`:isMultiple()&&!l.value&&w.value.length>0&&(y.removeValue(w.value[w.value.length-1]??``),emitChange(),T(`change`));break;case`Enter`:z.handleKeydown(e);break;case`Tab`:closePopup(`programmatic`)}}function createOption(e,t){let n=e.trim();if(!n)return;let r={disabled:!1,iconEl:null,label:n,value:u.makeCreatableValue(n)};P.value=[...P.value,r],selectOption(r,t)}let observeLightDomOptions=()=>{let e=new MutationObserver(()=>{readOptions()});return e.observe(n,{attributeFilter:[`disabled`,`disabled-reason`,`label`,`value`],attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()},B=observeLightDomOptions(),createListboxListeners=e=>{let handleActivate=e=>{let t=e.target;if(!(t instanceof Element))return;if(t.closest(`.no-results-create`)){e.preventDefault(),e.stopPropagation(),createOption(l.value,e);return}let n=t.closest(`.option`);if(!n)return;e.preventDefault(),e.stopPropagation();let r=resolveOptionFromElement(n);r&&!r.disabled&&selectOption(r,e)},handlePointerMove=e=>{let t=e.target;if(!(t instanceof Element))return;let n=t.closest(`.option`);if(!n)return;let r=resolveOptionFromElement(n);if(!r)return;let i=b.value.findIndex(e=>e.value===r.value);i>=0&&x.set(i)};return e.addEventListener(`click`,handleActivate),e.addEventListener(`pointermove`,handlePointerMove),()=>{e.removeEventListener(`click`,handleActivate),e.removeEventListener(`pointermove`,handlePointerMove)}},V=null,H=null,setListboxElement=e=>{g=e,H!==e&&(V?.(),V=null,H=null,e&&(V=createListboxListeners(e),H=e))},ensureListboxListeners=()=>{g&&(H===g&&V||(V?.(),V=createListboxListeners(g),H=g))};c(()=>{ensureListboxListeners(),D.value?(h&&`showPopover`in h&&!h.matches(`:popover-open`)&&h.showPopover(),k()):h&&`hidePopover`in h&&h.matches(`:popover-open`)&&h.hidePopover()}),(0,p.onElement)(_,e=>{m=e;let t=e.shadowRoot?.querySelector(`input`)??null;if(!t)return;d=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`,`${C}-listbox`);let handleInputClick=()=>{D.value||openPopup(!0,`click`),focusLiveInput()};return t.addEventListener(`input`,handleInput),t.addEventListener(`keydown`,handleKeydown),t.addEventListener(`focus`,handleFocus),t.addEventListener(`click`,handleInputClick),()=>{d=null,m=null,t.removeEventListener(`input`,handleInput),t.removeEventListener(`keydown`,handleKeydown),t.removeEventListener(`focus`,handleFocus),t.removeEventListener(`click`,handleInputClick)}}),c(()=>{if(!_.value)return;let e=d;e&&(e.setAttribute(`aria-expanded`,String(D.value)),S.value?e.setAttribute(`aria-disabled`,`true`):e.removeAttribute(`aria-disabled`),t.error.value?(e.setAttribute(`aria-invalid`,`true`),e.setAttribute(`aria-errormessage`,`${C}-error`)):(e.removeAttribute(`aria-invalid`),e.removeAttribute(`aria-errormessage`)))}),c(()=>{if(!_.value)return;let e=d;e&&e.value!==l.value&&(e.value=l.value)}),(0,p.onCleanup)(()=>{V?.(),V=null,H=null,B()});let hideLabel=()=>t[`hide-label`].value,inputAriaLabel=()=>hideLabel()?t.label.value??``:null,inputLabel=()=>hideLabel()?``:t.label.value??``,inputColor=()=>t.color?.value??void 0,inputSize=()=>t.size?.value??void 0,inputVariant=()=>t.variant?.value??void 0,inputRounded=()=>t.rounded?.value??void 0,inputFullwidth=()=>t.fullwidth.value?!0:void 0;return p.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./inputs/shared/native-field-event.cjs"),t=require("./styles/mixins/accessibility.css.cjs"),n=require("./styles/mixins/shape.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./core/keyboard.cjs"),a=require("./core/choice-field.cjs"),o=require("./core/ore.cjs"),s=require("./core/option-list.cjs"),c=require("./shared/types.cjs"),l=require("./chip.cjs"),u=require("./inputs/combobox/combobox.css.cjs"),d=require("./inputs/combobox/combobox-options.cjs"),f=require("./input.cjs");let p=require("@vielzeug/ripple"),m=require("@vielzeug/ore");var h=`ore-combobox-option`;(0,m.define)(h,{setup(){return m.html``}});var g=`ore-combobox`;(0,m.define)(g,{formAssociated:!0,props:{autoclose:m.prop.bool(!1),color:m.prop.oneOf(c.THEME_COLORS),creatable:m.prop.bool(!1),disabled:m.prop.bool(!1),error:m.prop.string(),fullwidth:m.prop.bool(!1),helper:m.prop.string(),"hide-label":m.prop.bool(!1),label:m.prop.string(),"label-placement":m.prop.oneOf([`inset`,`outside`],`inset`),loading:m.prop.bool(!1),multiple:m.prop.bool(!1),name:m.prop.string(),"no-filter":m.prop.bool(!1),options:m.prop.data(),placeholder:m.prop.string(`Select...`),required:m.prop.bool(!1),rounded:m.prop.oneOf(c.ROUNDED_SIZES),size:m.prop.oneOf(c.COMPONENT_SIZES),success:m.prop.bool(!1),value:m.prop.string(),variant:m.prop.oneOf(c.FIELD_VARIANTS)},setup(t){let n=(0,m.getHost)(),r=(0,m.useEmit)(),c=m.watchEffect,l=(0,p.signal)(``),u=null,f=null,h=null,g=null,_=(0,m.ref)(),v=o.lifecycleSignal(m.onCleanup),y=a.createChoiceField({disabled:t.disabled,error:t.error,helper:t.helper,label:t.label,labelPlacement:t[`label-placement`],multiple:t.multiple,prefix:`combobox`,required:t.required,signal:v,value:t.value}),b=(0,p.signal)([]),x=s.createListboxDropdown({getBoundary:()=>n,getFocusedOptionElement:()=>h?.querySelector(`[data-focused]`)??null,getItems:()=>b.value,getOptionId:e=>`${y.fieldId}-opt-${e}`,getPanel:()=>h,getReference:()=>f,getTrigger:()=>u,isDisabled:()=>y.disabled.value,isItemDisabled:e=>e.disabled,onClose:e=>{r(`open-change`,{open:!1,reason:e}),v.aborted||restoreQueryFromSelection(),y.triggerValidation(`blur`)},onOpen:e=>r(`open-change`,{open:!0,reason:e}),restoreFocus:!1,signal:v}),{disabled:S,fieldId:C,selectedValues:w,triggerValidation:T}=y;y.attachFormField((0,m.useField)({disabled:y.disabled,onReset:y.reset,toFormValue:e=>e,validity:y.validity,value:y.formValue}));let{focusedIndex:E,isOpen:D,scrollFocusedIntoView:O,updatePosition:k}=x,isMultiple=()=>!!t.multiple.value,isCreatable=()=>!!t.creatable.value,isNoFilter=()=>!!t[`no-filter`].value;(0,m.bind)({attr:{open:()=>D.value?!0:void 0,size:t.size,variant:t.variant}});let A=null,j=!1,M=(0,p.computed)(()=>w.value[0]??``);Object.defineProperty(n,"value",{configurable:!0,get:()=>y.formValue.value,set:e=>{let t=e;if(Array.isArray(t)){y.setValues(t.map(e=>String(e??``)));return}if(t==null||t===``){y.clear();return}y.setValues(isMultiple()?String(t).split(`,`):[String(t)])}});let hasValue=()=>w.value.length>0;function focusLiveInput(){u?.focus()}let N=(0,p.signal)([]),P=(0,p.signal)([]),isLoading=()=>!!t.loading.value;function normalizeOption(e){return{disabled:!!e.disabled,disabledReason:e.disabledReason,iconEl:e.iconEl??null,label:e.label??e.value,value:e.value}}let F=(0,p.computed)(()=>{let e=t.options.value,n=Array.isArray(e)?e.map(normalizeOption):N.value;return P.value.length===0?n:[...n,...P.value]}),I={clear:()=>{y.clear()},remove:e=>{y.removeValue(e)},select:e=>{y.selectValue(e)},toggle:e=>{y.toggleValue(e)}};function readOptions(e=Array.from(n.children)){if(N.value=d.parseSlottedOptions(e),!isMultiple()){let e=F.value.find(e=>e.value===M.value);l.value=e?.label??M.value}}readOptions(),c(()=>{let e=d.filterOptions(F.value,l.value,isNoFilter());b.value=isMultiple()?e.filter(e=>!w.value.includes(e.value)):e});let L=(0,p.computed)(()=>d.getCreatableLabel(l.value,isCreatable(),b.value)),inputPlaceholder=()=>isMultiple()&&w.value.length>0?``:t.placeholder.value||``;function emitChange(){e.dispatchNativeFieldEvent(n,`input`),e.dispatchNativeFieldEvent(n,`change`)}function removeChip(e){e.stopPropagation();let t=e.detail?.value;t!==void 0&&(I.remove(t),emitChange(),T(`change`))}function restoreQueryFromSelection(){if(!isMultiple()){let e=F.value.find(e=>e.value===M.value);j=!0,l.value=e?.label??``,Promise.resolve().then(()=>{j=!1});return}l.value=``}c(()=>{if(D.value&&!isMultiple()&&M.value&&E.value===-1&&l.value===``){let e=b.value.findIndex(e=>e.value===M.value);e>=0&&x.set(e)}});function openPopup(e=!0,t=`programmatic`){if(h&&`showPopover`in h&&!h.matches(`:popover-open`)&&h.showPopover(),e&&(A=l.value,l.value=``),!isMultiple()&&M.value){let e=d.filterOptions(F.value,``,isNoFilter()).findIndex(e=>e.value===M.value);e>=0&&x.set(e)}x.open(t),!isMultiple()&&M.value&&E.value>=0&&requestAnimationFrame(()=>{O()})}function closePopup(e=`programmatic`){x.close(e)}let R=i.createInteraction({disabled:S,onPress:()=>{D.value||openPopup(!0,`click`),focusLiveInput()}}),z=i.createInteraction({disabled:S,keys:[`Enter`],onPress:e=>{let t=b.value;D.value&&E.value>=0&&E.value<t.length?selectOption(t[E.value],e):D.value&&E.value===-1&&L.value?createOption(l.value,e):D.value||openPopup(!0,`keyboard`)}});function selectOption(e,n){e.disabled||(isMultiple()?(I.toggle(e.value),l.value=``,emitChange(),T(`change`),t.autoclose.value&&closePopup(),focusLiveInput(),requestAnimationFrame(()=>focusLiveInput())):(I.select(e.value),l.value=e.label,emitChange(),T(`change`),closePopup(),focusLiveInput()))}function resolveOptionFromElement(e){let t=e.getAttribute(`data-option-index`),n=t?Number(t):-1;if(Number.isInteger(n)&&n>=0&&n<b.value.length)return b.value[n]??null;let r=e.getAttribute(`data-option-value`);if(r){let e=b.value.find(e=>e.value===r);if(e)return e}let i=e.querySelector(`span`)?.textContent?.trim()??e.textContent?.trim()??``;return i?b.value.find(e=>e.label===i||e.value===i)??null:null}function clearValue(e){e.stopPropagation(),I.clear(),l.value=``,emitChange(),T(`change`),focusLiveInput()}function handleInput(e){let t=e.target,n=t.value;if(!j&&n!==l.value){if(l.value=n,!isMultiple()){let e=w.value[0],t=e?F.value.find(t=>t.value===e)?.label??e:``;n===``&&A===t&&(A=null)}x.navigate(`first`),D.value||openPopup(!1,`keyboard`),r(`search`,{query:t.value})}}function handleFocus(){}function handleKeydown(e){if(!S.value&&!x.handleKeydown(e))switch(e.key){case`ArrowDown`:e.preventDefault(),D.value?x.navigate(`next`):(openPopup(!0,`keyboard`),x.navigate(`first`));break;case`ArrowUp`:e.preventDefault(),D.value?x.navigate(`prev`):openPopup(!0,`keyboard`);break;case`Backspace`:isMultiple()&&!l.value&&w.value.length>0&&(y.removeValue(w.value[w.value.length-1]??``),emitChange(),T(`change`));break;case`Enter`:z.handleKeydown(e);break;case`Tab`:closePopup(`programmatic`)}}function createOption(e,t){let n=e.trim();if(!n)return;let r={disabled:!1,iconEl:null,label:n,value:d.makeCreatableValue(n)};P.value=[...P.value,r],selectOption(r,t)}let observeLightDomOptions=()=>{let e=new MutationObserver(()=>{readOptions()});return e.observe(n,{attributeFilter:[`disabled`,`disabled-reason`,`label`,`value`],attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()},B=observeLightDomOptions(),createListboxListeners=e=>{let handleActivate=e=>{let t=e.target;if(!(t instanceof Element))return;if(t.closest(`.no-results-create`)){e.preventDefault(),e.stopPropagation(),createOption(l.value,e);return}let n=t.closest(`.option`);if(!n)return;e.preventDefault(),e.stopPropagation();let r=resolveOptionFromElement(n);r&&!r.disabled&&selectOption(r,e)},handlePointerMove=e=>{let t=e.target;if(!(t instanceof Element))return;let n=t.closest(`.option`);if(!n)return;let r=resolveOptionFromElement(n);if(!r)return;let i=b.value.findIndex(e=>e.value===r.value);i>=0&&x.set(i)};return e.addEventListener(`click`,handleActivate),e.addEventListener(`pointermove`,handlePointerMove),()=>{e.removeEventListener(`click`,handleActivate),e.removeEventListener(`pointermove`,handlePointerMove)}},V=null,H=null,setListboxElement=e=>{g=e,H!==e&&(V?.(),V=null,H=null,e&&(V=createListboxListeners(e),H=e))},ensureListboxListeners=()=>{g&&(H===g&&V||(V?.(),V=createListboxListeners(g),H=g))};c(()=>{ensureListboxListeners(),D.value?(h&&`showPopover`in h&&!h.matches(`:popover-open`)&&h.showPopover(),k()):h&&`hidePopover`in h&&h.matches(`:popover-open`)&&h.hidePopover()}),(0,m.onElement)(_,e=>{f=e;let t=e.shadowRoot?.querySelector(`input`)??null;if(!t)return;u=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`,`${C}-listbox`);let handleInputClick=()=>{D.value||openPopup(!0,`click`),focusLiveInput()};return t.addEventListener(`input`,handleInput),t.addEventListener(`keydown`,handleKeydown),t.addEventListener(`focus`,handleFocus),t.addEventListener(`click`,handleInputClick),()=>{u=null,f=null,t.removeEventListener(`input`,handleInput),t.removeEventListener(`keydown`,handleKeydown),t.removeEventListener(`focus`,handleFocus),t.removeEventListener(`click`,handleInputClick)}}),c(()=>{if(!_.value)return;let e=u;e&&(e.setAttribute(`aria-expanded`,String(D.value)),S.value?e.setAttribute(`aria-disabled`,`true`):e.removeAttribute(`aria-disabled`),t.error.value?(e.setAttribute(`aria-invalid`,`true`),e.setAttribute(`aria-errormessage`,`${C}-error`)):(e.removeAttribute(`aria-invalid`),e.removeAttribute(`aria-errormessage`)))}),c(()=>{if(!_.value)return;let e=u;e&&e.value!==l.value&&(e.value=l.value)}),(0,m.onCleanup)(()=>{V?.(),V=null,H=null,B()});let hideLabel=()=>t[`hide-label`].value,inputAriaLabel=()=>hideLabel()?t.label.value??``:null,inputLabel=()=>hideLabel()?``:t.label.value??``,inputColor=()=>t.color?.value??void 0,inputSize=()=>t.size?.value??void 0,inputVariant=()=>t.variant?.value??void 0,inputRounded=()=>t.rounded?.value??void 0,inputFullwidth=()=>t.fullwidth.value?!0:void 0;return m.html`
       <slot></slot>
       <ore-input
         class="trigger"
@@ -23,7 +23,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         <div slot="prefix" class="chips-row">
           <!-- Keep chip list diffing isolated so input node identity stays stable. -->
           <span class="chips-list">
-            ${()=>(isMultiple()?w.value:[]).map(e=>p.html`
+            ${()=>(isMultiple()?w.value:[]).map(e=>m.html`
                   <ore-chip
                     value=${e}
                     label=${F.value.find(t=>t.value===e)?.label??e}
@@ -77,15 +77,15 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           style="${()=>D.value&&b.value.length>0?`height:${b.value.length*36}px;`:``}"
           aria-label="${()=>t.label.value||t.placeholder.value||`Options`}"
           ref=${e=>{setListboxElement(e)}}>
-          ${()=>D.value?isLoading()?p.html`
+          ${()=>D.value?isLoading()?m.html`
                 <div class="dropdown-loading">Loading...</div>
-              `:b.value.length===0?L.value?p.html`
+              `:b.value.length===0?L.value?m.html`
                   <button type="button" class="no-results-create" ?data-focused=${()=>E.value===-1}>
                     ${L.value}
                   </button>
-                `:p.html`
+                `:m.html`
                 <div class="no-results" role="presentation">No results found</div>
-              `:b.value.map((e,t)=>p.html`
+              `:b.value.map((e,t)=>m.html`
                 <div
                   class="option"
                   role="option"
@@ -99,7 +99,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                   ?data-selected=${()=>isMultiple()?w.value.includes(e.value):M.value===e.value}
                   ?data-disabled=${e.disabled}>
                   <span>${e.label}</span>
-                  ${e.disabled&&e.disabledReason?p.html`<small class="disabled-reason" title="${e.disabledReason}">${e.disabledReason}</small>`:p.html``}
+                  ${e.disabled&&e.disabledReason?m.html`<small class="disabled-reason" title="${e.disabledReason}">${e.disabledReason}</small>`:m.html``}
                   <span class="option-check" aria-hidden="true">
                     <ore-icon name="check" size="14" stroke-width="2.5" aria-hidden="true"></ore-icon>
                   </span>
@@ -107,5 +107,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               `):``}
         </div>
       </div>
-    `},shadow:{delegatesFocus:!0},styles:[r.colorThemeMixin,t.reducedMotionMixin,n.roundedVariantMixin,t.srOnlyMixin,l.default]}),exports.CHIP_TAG=c.CHIP_TAG,exports.COMBOBOX_OPTION_TAG=m,exports.COMBOBOX_TAG=h,exports.INPUT_TAG=d.INPUT_TAG;
+    `},shadow:{delegatesFocus:!0},styles:[r.colorThemeMixin,t.reducedMotionMixin,n.roundedVariantMixin,t.srOnlyMixin,u.default]}),exports.CHIP_TAG=l.CHIP_TAG,exports.COMBOBOX_OPTION_TAG=h,exports.COMBOBOX_TAG=g,exports.INPUT_TAG=f.INPUT_TAG;
 //# sourceMappingURL=combobox.cjs.map