@vielzeug/refine 1.8.0 → 2.0.1

package/dist/checkbox-group.js.map

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

package/dist/checkbox.cjs

@@ -1,11 +1,11 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./shared/size-presets.cjs"),o=require("./headless/ore.cjs"),s=require("./headless/checkable.cjs"),c=require("./inputs/shared/field-binding.cjs"),l=require("./inputs/shared/form-context.cjs"),u=require("./inputs/shared/templates.cjs"),d=require("./checkbox-group.cjs"),f=require("./inputs/checkbox/checkbox.css.cjs");let p=require("@vielzeug/ore"),m=require("@vielzeug/ripple"),h=require("@vielzeug/ore/forms");var g=`ore-checkbox`;(0,p.define)(g,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,checked:p.prop.bool(!1),error:p.prop.string(),helper:p.prop.string(),indeterminate:p.prop.bool(!1),name:p.prop.string(),required:p.prop.bool(!1),value:p.prop.string(`on`)},setup(e){let t=(0,p.useEmit)(),n=(0,p.inject)(l.FORM_CTX),r=l.useFormContext(e,n),i=(0,p.inject)(d.CHECKBOX_GROUP_CTX),a=s.createCheckable({checked:e.checked,clearIndeterminateFirst:!0,disabled:(0,m.computed)(()=>r.disabled.value||!!i?.disabled.value),error:e.error,group:i,helper:e.helper,indeterminate:e.indeterminate,onToggle:e=>{a.triggerValidation(`change`),!i&&t(`change`,e)},prefix:`checkbox`,required:e.required,signal:o.lifecycleSignal(p.onCleanup),validateOn:n?.validateOn,value:e.value});a.attachFormField((0,h.useField)({disabled:a.disabled,onReset:a.reset,toFormValue:e=>e,validationMessage:a.validationMessage,validity:a.validity,value:a.checkableFormValue}));let{assistiveId:f,checked:g,disabled:_,errorText:v,handleClick:y,handleKeydown:b,helperText:x,indeterminate:S,labelId:C}=a;return c.applyCheckableBinding(r.size,{assistiveId:f,checked:g,disabled:_,errorText:v,handleClick:y,handleKeydown:b,helperText:x,indeterminate:S,labelId:C,required:e.required},`checkbox`),p.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/ore.cjs"),t=require("./core/checkable.cjs"),n=require("./styles/mixins/accessibility.css.cjs"),r=require("./styles/mixins/shape.css.cjs"),i=require("./styles/mixins/states.css.cjs"),a=require("./styles/mixins/theme.css.cjs"),o=require("./shared/prop-bundles.cjs"),s=require("./shared/size-presets.cjs"),c=require("./inputs/shared/field-binding.cjs"),l=require("./inputs/shared/templates.cjs"),u=require("./checkbox-group.cjs"),d=require("./inputs/shared/native-field-event.cjs"),f=require("./inputs/checkbox/checkbox.css.cjs");let p=require("@vielzeug/ore"),m=require("@vielzeug/ripple");var h=`ore-checkbox`;(0,p.define)(h,{formAssociated:!0,props:{...o.themableBundle,...o.sizableBundle,...o.disablableBundle,checked:p.prop.bool(!1),error:p.prop.string(),helper:p.prop.string(),indeterminate:p.prop.bool(!1),name:p.prop.string(),required:p.prop.bool(!1),value:p.prop.string(`on`)},setup(n){let r=(0,p.getHost)(),i=(0,p.inject)(u.CHECKBOX_GROUP_CTX),a=t.createCheckable({checked:n.checked,clearIndeterminateFirst:!0,disabled:(0,m.computed)(()=>n.disabled.value||!!i?.disabled.value),error:n.error,group:i,helper:n.helper,indeterminate:n.indeterminate,onToggle:e=>{a.triggerValidation(`change`),d.setFieldChecked(r,e.checked),!i&&(d.dispatchNativeFieldEvent(r,`input`),d.dispatchNativeFieldEvent(r,`change`))},prefix:`checkbox`,required:n.required,signal:e.lifecycleSignal(p.onCleanup),value:n.value});a.attachFormField((0,p.useField)({disabled:a.disabled,onReset:a.reset,toFormValue:e=>e,validationMessage:a.validationMessage,validity:a.validity,value:a.checkableFormValue}));let{assistiveId:o,checked:s,disabled:f,errorText:h,handleClick:g,handleKeydown:_,helperText:v,indeterminate:y,labelId:b}=a;return d.defineFieldChecked(r,()=>s.value,e=>{s.value=e}),c.applyCheckableBinding(n.size,{assistiveId:o,checked:s,disabled:f,errorText:h,handleClick:g,handleKeydown:_,helperText:v,indeterminate:y,labelId:b,required:n.required},`checkbox`),p.html`
       <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>
           <ore-icon class="dash" name="minus" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
         </div>
       </div>
-      <span class="label" part="label" id="${C}"><slot></slot></span>
-      ${u.renderHelperRegion(f,v,x)}
-    `},styles:[r.colorThemeMixin,r.forcedColorsFormControlMixin,n.disabledStateMixin,e.coarsePointerMixin,t.sizeVariantMixin(a.CONTROL_SIZE_PRESET),f.default]}),exports.CHECKBOX_TAG=g;
+      <span class="label" part="label" id="${b}"><slot></slot></span>
+      ${l.renderHelperRegion(o,h,v)}
+    `},styles:[a.colorThemeMixin,a.forcedColorsFormControlMixin,i.disabledStateMixin,n.coarsePointerMixin,r.sizeVariantMixin(s.CONTROL_SIZE_PRESET),f.default]}),exports.CHECKBOX_TAG=h;
 //# sourceMappingURL=checkbox.cjs.map

package/dist/checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.cjs","names":[],"sources":["../src/inputs/checkbox/checkbox.ts"],"sourcesContent":["import { define, html, inject, prop, onCleanup, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\n\nimport { type CheckableChangePayload, lifecycleSignal, createCheckable } from '../../headless';\nimport '../../content/icon/icon';\nimport { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport { CHECKBOX_GROUP_CTX } from '../checkbox-group/checkbox-group';\nimport { applyCheckableBinding } from '../shared/field-binding';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './checkbox.css?inline';\n\nexport type OreCheckboxEvents = {\n  change: CheckableChangePayload;\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 `<ore-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 `<ore-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 change - Emitted when checkbox is toggled. detail: { checked: boolean, value: string, originalEvent?: Event }\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 emit = useEmit<OreCheckboxEvents>();\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n    const groupCtx = inject(CHECKBOX_GROUP_CTX);\n\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: true,\n      disabled: computed(() => fCtxProps.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\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        emit('change', payload);\n      },\n      prefix: 'checkbox',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\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    applyCheckableBinding(\n      fCtxProps.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":"0sBAkFA,IAAa,EAAe,4BACH,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,EAAA,EAAA,QAAA,CAAkC,EAElC,GAAA,EAAA,EAAA,OAAA,CAAiB,EAAA,QAAQ,EACzB,EAAY,EAAA,eAAe,EAAO,CAAO,EACzC,GAAA,EAAA,EAAA,OAAA,CAAkB,EAAA,kBAAkB,EAEpC,EAAY,EAAA,gBAAgB,CAChC,QAAS,EAAM,QACf,wBAAyB,GACzB,UAAA,EAAA,EAAA,SAAA,KAAyB,EAAU,SAAS,OAAS,EAAQ,GAAU,SAAS,KAAM,EACtF,MAAO,EAAM,MACb,MAAO,EACP,OAAQ,EAAM,OACd,cAAe,EAAM,cACrB,SAAW,GAAY,CACrB,EAAU,kBAAkB,QAAQ,EAIhC,IAEJ,EAAK,SAAU,CAAO,CACxB,EACA,OAAQ,WACR,SAAU,EAAM,SAChB,OAAQ,EAAA,gBAAgB,EAAA,SAAS,EACjC,WAAY,GAAS,WACrB,MAAO,EAAM,KACf,CAAC,EAED,EAAU,iBAAA,EAAA,EAAA,SAAA,CACgB,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,EAmBJ,OAjBA,EAAA,sBACE,EAAU,KACV,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, html, inject, prop, getHost, onCleanup } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\n\nimport { lifecycleSignal, createCheckable } from '../../core';\nimport '../../content/icon/icon';\nimport { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport { CHECKBOX_GROUP_CTX } from '../checkbox-group/checkbox-group';\nimport { applyCheckableBinding } from '../shared/field-binding';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './checkbox.css?inline';\n\nexport type OreCheckboxEvents = {\n  change: Event;\n  input: Event;\n};\n\nexport type OreCheckboxProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the checkbox */\n  helper?: string;\n  /** Indeterminate state (partially checked) */\n  indeterminate?: boolean;\n  /** Require this checkbox to be checked for native form validation (e.g. a consent checkbox) */\n  required?: boolean;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A customizable checkbox component with theme colors, sizes, and indeterminate state support.\n *\n * @element ore-checkbox\n *\n * @attr {boolean} checked - Checked state\n * @attr {boolean} disabled - Disable checkbox interaction\n * @attr {boolean} indeterminate - Indeterminate (partially checked) state\n * @attr {boolean} required - Require this checkbox to be checked for native form validation\n * @attr {string} value - Field value submitted with forms\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Checkbox size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the checkbox\n *\n * @fires input - Emitted when checkbox is toggled.\n * @fires change - Emitted when checkbox is toggled.\n *\n * @slot - Checkbox label text\n *\n * @cssprop --checkbox-size - Control size (width and height)\n * @cssprop --checkbox-radius - Control border radius\n * @cssprop --checkbox-bg - Unchecked background color\n * @cssprop --checkbox-border-color - Unchecked border color\n * @cssprop --checkbox-checked-bg - Checked/indeterminate background color\n * @cssprop --checkbox-color - Checkmark icon color\n * @cssprop --checkbox-font-size - Label font size\n * @part checkbox - The checkbox wrapper element\n * @part box - The visual checkbox box\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-checkbox name=\"agree\" required>I agree to the terms</ore-checkbox>\n * <ore-checkbox checked color=\"primary\" size=\"lg\">Enabled by default</ore-checkbox>\n * <ore-checkbox error=\"This field is required\" helper=\"Check to continue\">Accept</ore-checkbox>\n * ```\n */\nexport const CHECKBOX_TAG = 'ore-checkbox' as const;\ndefine<OreCheckboxProps>(CHECKBOX_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    indeterminate: prop.bool(false),\n    name: prop.string(),\n    required: prop.bool(false),\n    value: prop.string('on'),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const groupCtx = inject(CHECKBOX_GROUP_CTX);\n\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: true,\n      disabled: computed(() => props.disabled.value || Boolean(groupCtx?.disabled.value)),\n      error: props.error,\n      group: groupCtx,\n      helper: props.helper,\n      indeterminate: props.indeterminate,\n      onToggle: (payload) => {\n        checkable.triggerValidation('change');\n        setFieldChecked(el, payload.checked);\n\n        // In a checkbox-group, the group owns change emission/state updates.\n        // Emitting here would bubble to the group and toggle a second time.\n        if (groupCtx) return;\n\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      prefix: 'checkbox',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        onReset: checkable.reset,\n        toFormValue: (v) => v,\n        validationMessage: checkable.validationMessage,\n        validity: checkable.validity,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const {\n      assistiveId,\n      checked,\n      disabled,\n      errorText,\n      handleClick,\n      handleKeydown,\n      helperText,\n      indeterminate,\n      labelId,\n    } = checkable;\n\n    defineFieldChecked(\n      el,\n      () => checked.value,\n      (value) => {\n        checked.value = value;\n      },\n    );\n\n    applyCheckableBinding(\n      props.size,\n      {\n        assistiveId,\n        checked,\n        disabled,\n        errorText,\n        handleClick,\n        handleKeydown,\n        helperText,\n        indeterminate,\n        labelId,\n        required: props.required,\n      },\n      'checkbox',\n    );\n\n    return html`\n      <div class=\"checkbox-wrapper\" part=\"checkbox\">\n        <div class=\"box\" part=\"box\">\n          <ore-icon class=\"checkmark\" name=\"check\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          <ore-icon class=\"dash\" name=\"minus\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    coarsePointerMixin,\n    sizeVariantMixin(CONTROL_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":"uqBAoFA,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"}

package/dist/checkbox.js

@@ -1,52 +1,50 @@
-import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
-import { sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
-import { disabledStateMixin as n } from "./styles/mixins/states.css.js";
-import { colorThemeMixin as r, forcedColorsFormControlMixin as i } from "./styles/mixins/theme.css.js";
-import { disablableBundle as a, sizableBundle as o, themableBundle as s } from "./shared/prop-bundles.js";
-import { CONTROL_SIZE_PRESET as c } from "./shared/size-presets.js";
-import { lifecycleSignal as l } from "./headless/ore.js";
-import { createCheckable as u } from "./headless/checkable.js";
+import { lifecycleSignal as e } from "./core/ore.js";
+import { createCheckable as t } from "./core/checkable.js";
+import { coarsePointerMixin as n } from "./styles/mixins/accessibility.css.js";
+import { sizeVariantMixin as r } from "./styles/mixins/shape.css.js";
+import { disabledStateMixin as i } from "./styles/mixins/states.css.js";
+import { colorThemeMixin as a, forcedColorsFormControlMixin as o } from "./styles/mixins/theme.css.js";
+import { disablableBundle as s, sizableBundle as c, themableBundle as l } from "./shared/prop-bundles.js";
+import { CONTROL_SIZE_PRESET as u } from "./shared/size-presets.js";
 import { applyCheckableBinding as d } from "./inputs/shared/field-binding.js";
-import { FORM_CTX as f, useFormContext as p } from "./inputs/shared/form-context.js";
-import { renderHelperRegion as m } from "./inputs/shared/templates.js";
-import { CHECKBOX_GROUP_CTX as h } from "./checkbox-group.js";
-import g from "./inputs/checkbox/checkbox.css.js";
-import { define as _, html as v, inject as y, onCleanup as b, prop as x, useEmit as S } from "@vielzeug/ore";
-import { computed as C } from "@vielzeug/ripple";
-import { useField as w } from "@vielzeug/ore/forms";
+import { renderHelperRegion as f } from "./inputs/shared/templates.js";
+import { CHECKBOX_GROUP_CTX as p } from "./checkbox-group.js";
+import { defineFieldChecked as m, dispatchNativeFieldEvent as h, setFieldChecked as g } from "./inputs/shared/native-field-event.js";
+import _ from "./inputs/checkbox/checkbox.css.js";
+import { define as v, getHost as y, html as b, inject as x, onCleanup as S, prop as C, useField as w } from "@vielzeug/ore";
+import { computed as T } from "@vielzeug/ripple";
 //#region src/inputs/checkbox/checkbox.ts
-var T = "ore-checkbox";
-_(T, {
+var E = "ore-checkbox";
+v(E, {
 	formAssociated: !0,
 	props: {
+		...l,
+		...c,
 		...s,
-		...o,
-		...a,
-		checked: x.bool(!1),
-		error: x.string(),
-		helper: x.string(),
-		indeterminate: x.bool(!1),
-		name: x.string(),
-		required: x.bool(!1),
-		value: x.string("on")
+		checked: C.bool(!1),
+		error: C.string(),
+		helper: C.string(),
+		indeterminate: C.bool(!1),
+		name: C.string(),
+		required: C.bool(!1),
+		value: C.string("on")
 	},
-	setup(e) {
-		let t = S(), n = y(f), r = p(e, n), i = y(h), a = u({
-			checked: e.checked,
+	setup(n) {
+		let r = y(), i = x(p), a = t({
+			checked: n.checked,
 			clearIndeterminateFirst: !0,
-			disabled: C(() => r.disabled.value || !!i?.disabled.value),
-			error: e.error,
+			disabled: T(() => n.disabled.value || !!i?.disabled.value),
+			error: n.error,
 			group: i,
-			helper: e.helper,
-			indeterminate: e.indeterminate,
+			helper: n.helper,
+			indeterminate: n.indeterminate,
 			onToggle: (e) => {
-				a.triggerValidation("change"), !i && t("change", e);
+				a.triggerValidation("change"), g(r, e.checked), !i && (h(r, "input"), h(r, "change"));
 			},
 			prefix: "checkbox",
-			required: e.required,
-			signal: l(b),
-			validateOn: n?.validateOn,
-			value: e.value
+			required: n.required,
+			signal: e(S),
+			value: n.value
 		});
 		a.attachFormField(w({
 			disabled: a.disabled,
@@ -56,39 +54,41 @@ _(T, {
 			validity: a.validity,
 			value: a.checkableFormValue
 		}));
-		let { assistiveId: o, checked: s, disabled: c, errorText: g, handleClick: _, handleKeydown: x, helperText: T, indeterminate: E, labelId: D } = a;
-		return d(r.size, {
+		let { assistiveId: o, checked: s, disabled: c, errorText: l, handleClick: u, handleKeydown: _, helperText: v, indeterminate: C, labelId: E } = a;
+		return m(r, () => s.value, (e) => {
+			s.value = e;
+		}), d(n.size, {
 			assistiveId: o,
 			checked: s,
 			disabled: c,
-			errorText: g,
-			handleClick: _,
-			handleKeydown: x,
-			helperText: T,
-			indeterminate: E,
-			labelId: D,
-			required: e.required
-		}, "checkbox"), v`
+			errorText: l,
+			handleClick: u,
+			handleKeydown: _,
+			helperText: v,
+			indeterminate: C,
+			labelId: E,
+			required: n.required
+		}, "checkbox"), b`
       <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>
           <ore-icon class="dash" name="minus" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
         </div>
       </div>
-      <span class="label" part="label" id="${D}"><slot></slot></span>
-      ${m(o, g, T)}
+      <span class="label" part="label" id="${E}"><slot></slot></span>
+      ${f(o, l, v)}
     `;
 	},
 	styles: [
-		r,
+		a,
+		o,
 		i,
 		n,
-		e,
-		t(c),
-		g
+		r(u),
+		_
 	]
 });
 //#endregion
-export { T as CHECKBOX_TAG };
+export { E as CHECKBOX_TAG };
 
 //# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

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

package/dist/chip.cjs

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

package/dist/chip.cjs.map

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

package/dist/chip.js

@@ -3,7 +3,8 @@ import { disabledStateMixin as n } from "./styles/mixins/states.css.js";
 import { colorThemeMixin as r, forcedColorsMixin as i } from "./styles/mixins/theme.css.js";
 import a from "./feedback/chip/chip.css.js";
 import { bind as o, define as s, html as c, prop as l, useEmit as u } from "@vielzeug/ore";
-import { computed as d, signal as f, watch as p } from "@vielzeug/ripple";
+import { computed as d, signal as f } from "@vielzeug/ripple";
+import { watch as p } from "@vielzeug/ripple/watch";
 //#region src/feedback/chip/chip.ts
 var m = "ore-chip";
 s(m, {
@@ -67,9 +68,9 @@ s(m, {
         class="remove-btn"
         part="remove-btn"
         type="button"
-        :aria-label="${h}"
+        aria-label="${h}"
         ?hidden="${() => e.mode.value !== "removable"}"
-        :disabled="${e.disabled}"
+        disabled="${e.disabled}"
         @click="${a}">
         <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
       </button>
@@ -79,24 +80,26 @@ s(m, {
         part="chip-btn"
         type="button"
         role="checkbox"
-        :aria-checked="${() => String(i.value)}"
-        :aria-label="${e.label}"
-        :disabled="${e.disabled}"
+        aria-checked="${() => String(i.value)}"
+        aria-label="${e.label}"
+        disabled="${e.disabled}"
         @click="${s}">
-        <span class="chip" part="chip"> ${m()} </span>
+        <span class="chip" part="chip">${m()}</span>
       </button>
     `, v = () => c`
       <button
         class="chip-btn"
         part="chip-btn"
         type="button"
-        :aria-label="${e.label}"
-        :disabled="${e.disabled}"
+        aria-label="${e.label}"
+        disabled="${e.disabled}"
         @click="${l}">
-        <span class="chip" part="chip"> ${m()} </span>
+        <span class="chip" part="chip">${m()}</span>
       </button>
-    `, y = () => c` <span class="chip" part="chip"> ${m()} </span> `, b = () => c`
-      <span class="chip" part="chip"> ${m()} ${g()} </span>
+    `, y = () => c`
+      <span class="chip" part="chip">${m()}</span>
+    `, b = () => c`
+      <span class="chip" part="chip">${m()} ${g()}</span>
     `;
 		return c`
       ${() => {