@vielzeug/buildit 2.0.0

package/dist/checkbox-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.js","names":[],"sources":["../src/inputs/checkbox-group/checkbox-group.ts"],"sourcesContent":["import {\n  computed,\n  createContext,\n  createId,\n  defineComponent,\n  effect,\n  handle,\n  html,\n  inject,\n  onMount,\n  onSlotChange,\n  provide,\n  type ReadonlySignal,\n  signal,\n} from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\nimport { createChoiceChangeDetail, parseCsvValues, type ChoiceChangeDetail } from '../shared/utils';\nimport componentStyles from './checkbox-group.css?inline';\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\nexport type CheckboxGroupContext = {\n  color: ReadonlySignal<ThemeColor | undefined>;\n  disabled: ReadonlySignal<boolean>;\n  size: ReadonlySignal<ComponentSize | undefined>;\n  toggle: (value: string, originalEvent?: Event) => void;\n  values: ReadonlySignal<string[]>;\n};\n\nexport const CHECKBOX_GROUP_CTX = createContext<CheckboxGroupContext>('CheckboxGroupContext');\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type BitCheckboxGroupProps = {\n  /** Theme color — propagated to all child bit-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  /** 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 bit-checkbox elements */\n  size?: ComponentSize;\n  /** Comma-separated list of currently checked values */\n  values?: string;\n};\n\nexport type BitCheckboxGroupEvents = {\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A fieldset wrapper that groups `bit-checkbox` elements, provides shared\n * `color` and `size` via context, and manages multi-value selection state.\n *\n * @element bit-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} color - Theme color\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 `bit-checkbox` elements here\n */\nexport const CHECKBOX_GROUP_TAG = defineComponent<BitCheckboxGroupProps, BitCheckboxGroupEvents>({\n  props: {\n    color: { default: undefined },\n    disabled: { default: false },\n    error: { default: '' },\n    helper: { default: '' },\n    label: { default: '' },\n    orientation: { default: 'vertical' },\n    required: { default: false },\n    size: { default: undefined },\n    values: { default: '' },\n  },\n  setup({ emit, host, props }) {\n    // Parse comma-separated value string into an array of checked values\n    const parseValues = (v: string | undefined): string[] => parseCsvValues(v);\n    const checkedValues = signal<string[]>(parseValues(props.values.value));\n\n    const getCheckboxes = (): HTMLElement[] => Array.from(host.getElementsByTagName('bit-checkbox')) as HTMLElement[];\n    const getLabelForValue = (value: string): string => {\n      const checkbox = getCheckboxes().find((item) => (item.getAttribute('value') ?? '') === value);\n\n      return checkbox?.textContent?.replace(/\\s+/g, ' ').trim() || value;\n    };\n    const emitChange = (originalEvent?: Event) => {\n      const values = checkedValues.value;\n\n      emit('change', createChoiceChangeDetail(values, values.map(getLabelForValue), originalEvent));\n    };\n\n    // Keep checkedValues in sync when prop changes externally\n    effect(() => {\n      checkedValues.value = parseValues(props.values.value);\n    });\n\n    const toggleCheckbox = (val: string, originalEvent?: Event) => {\n      const current = checkedValues.value;\n      const next = current.includes(val) ? current.filter((v) => v !== val) : [...current, val];\n\n      checkedValues.value = next;\n      host.setAttribute('values', next.join(','));\n      emitChange(originalEvent);\n    };\n    const formCtx = inject(FORM_CTX, undefined);\n\n    mountFormContextSync(host, formCtx, props);\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 bit-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 = Array.from(host.getElementsByTagName('bit-checkbox')) as HTMLElement[];\n\n      for (const checkbox of checkboxes) {\n        const val = checkbox.getAttribute('value') ?? '';\n\n        if (values.includes(val)) checkbox.setAttribute('checked', '');\n        else checkbox.removeAttribute('checked');\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        if (disabled) checkbox.setAttribute('disabled', '');\n        else checkbox.removeAttribute('disabled');\n      }\n    };\n\n    effect(syncChildren);\n\n    onMount(() => {\n      onSlotChange('default', syncChildren);\n      syncChildren();\n\n      handle(host, 'change', (e: Event) => {\n        if (e.target === host) return;\n\n        e.stopPropagation();\n\n        const val = (e.target as HTMLElement).getAttribute('value') ?? '';\n\n        toggleCheckbox(val, e);\n      });\n    });\n\n    const legendId = createId('checkbox-group-legend');\n    const errorId = `${legendId}-error`;\n    const helperId = `${legendId}-helper`;\n    const hasError = computed(() => Boolean(props.error.value));\n    const hasHelper = computed(() => Boolean(props.helper.value) && !hasError.value);\n\n    return html`\n      <fieldset\n        role=\"group\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        aria-invalid=\"${() => String(hasError.value)}\"\n        aria-errormessage=\"${() => (hasError.value ? errorId : null)}\"\n        aria-describedby=\"${() => (hasError.value ? errorId : hasHelper.value ? helperId : null)}\">\n        <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n          ${() => props.label.value}${() => (props.required.value ? html`<span aria-hidden=\"true\"> *</span>` : '')}\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.value}>\n          ${() => props.error.value}\n        </div>\n        <div class=\"helper-text\" id=\"${helperId}\" ?hidden=${() => !hasHelper.value}>${() => props.helper.value}</div>\n      </fieldset>\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin(), disabledStateMixin(), componentStyles],\n  tag: 'bit-checkbox-group',\n});\n"],"mappings":"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"}

package/dist/checkbox.cjs

@@ -0,0 +1,37 @@
+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/index.cjs`),r=require(`./craftit/dist/labs/a11y.cjs`),i=require(`./craftit/dist/labs/selectable.cjs`);require(`./craftit/dist/labs.cjs`);const a=require(`./inputs/shared/dom-sync/form-context.cjs`);require(`./inputs/shared/dom-sync/index.cjs`);const o=require(`./checkbox-group.cjs`),s=require(`./inputs/shared/composables/use-toggle-field.cjs`);require(`./inputs/shared/composables/index.cjs`);const c=require(`./inputs/shared/design-presets.cjs`),l=require(`./inputs/checkbox/checkbox.css?inline.cjs`);let u=require(`@vielzeug/craftit`);var d=(0,u.defineComponent)({formAssociated:!0,props:{checked:{default:!1},color:{default:void 0},disabled:{default:!1},error:{default:``},helper:{default:``},indeterminate:{default:!1},name:{default:``},size:{default:void 0},value:{default:`on`}},setup({emit:e,host:t,props:n,reflect:c}){let{checkedSignal:l,formCtx:d,triggerValidation:f}=s.useToggleField(n);a.mountFormContextSync(t,d,n);let p=(0,u.signal)(!!n.indeterminate.value);(0,u.watch)(n.indeterminate,e=>{p.value=!!e});let m=(0,u.inject)(o.CHECKBOX_GROUP_CTX,void 0),h=i.t({checked:l,clearIndeterminateFirst:!0,disabled:n.disabled,group:m,indeterminate:p,onToggle:t=>{f(`change`),!m&&e(`change`,h.changePayload(t))},value:n.value}),g=r.r(t,{checked:()=>h.indeterminate.value?`mixed`:h.checked.value?`true`:`false`,helperText:()=>n.error.value||n.helper.value,helperTone:()=>n.error.value?`error`:`default`,invalid:()=>!!n.error.value,role:`checkbox`});return c({checked:()=>h.checked.value,classMap:()=>({"is-checked":h.checked.value,"is-disabled":!!n.disabled.value,"is-indeterminate":h.indeterminate.value}),indeterminate:()=>h.indeterminate.value,onClick:e=>h.toggle(e),onKeydown:e=>{let t=e;(t.key===` `||t.key===`Enter`)&&(t.preventDefault(),h.toggle(e))},tabindex:()=>n.disabled.value?void 0:0}),u.html`
+      <div class="checkbox-wrapper" part="checkbox">
+        <div class="box" part="box">
+          <svg
+            class="checkmark"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            xmlns="http://www.w3.org/2000/svg">
+            <path d="M 20,6 9,17 4,12" />
+          </svg>
+          <svg
+            class="dash"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            xmlns="http://www.w3.org/2000/svg">
+            <path d="M 5,12 H 19" />
+          </svg>
+        </div>
+      </div>
+      <span class="label" part="label" data-a11y-label id="${g.labelId}"><slot></slot></span>
+      <div
+        class="helper-text"
+        part="helper-text"
+        data-a11y-helper
+        id="${g.helperId}"
+        aria-live="polite"
+        hidden></div>
+    `},styles:[...n.formControlMixins,e.coarsePointerMixin,t.sizeVariantMixin(c.CONTROL_SIZE_PRESET),l.default],tag:`bit-checkbox`});exports.CHECKBOX_TAG=d;
+//# sourceMappingURL=checkbox.cjs.map

package/dist/checkbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.cjs","names":[],"sources":["../src/inputs/checkbox/checkbox.ts"],"sourcesContent":["import { defineComponent, html, inject, signal, watch } from '@vielzeug/craftit';\nimport { useA11yControl, createCheckableControl } from '@vielzeug/craftit/labs';\n\nimport type { CheckableProps, DisablableProps, SizableProps, ThemableProps } from '../../types';\n\nimport { coarsePointerMixin, formControlMixins, sizeVariantMixin } from '../../styles';\nimport { CHECKBOX_GROUP_CTX } from '../checkbox-group/checkbox-group';\nimport { useToggleField } from '../shared/composables';\nimport { CONTROL_SIZE_PRESET } from '../shared/design-presets';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport componentStyles from './checkbox.css?inline';\n\nexport type BitCheckboxEvents = {\n  change: { checked: boolean; fieldValue: string; originalEvent?: Event; value: boolean };\n};\n\nexport type BitCheckboxProps = CheckableProps &\n  ThemableProps &\n  SizableProps &\n  DisablableProps & {\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  };\n\n/**\n * A customizable checkbox component with theme colors, sizes, and indeterminate state support.\n *\n * @element bit-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 {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: { value: boolean, checked: boolean, fieldValue: string, originalEvent?: Event }\n *\n * @slot - Checkbox label text\n *\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 */\nexport const CHECKBOX_TAG = defineComponent<BitCheckboxProps, BitCheckboxEvents>({\n  formAssociated: true,\n  props: {\n    checked: { default: false },\n    color: { default: undefined },\n    disabled: { default: false },\n    error: { default: '' },\n    helper: { default: '' },\n    indeterminate: { default: false },\n    name: { default: '' },\n    size: { default: undefined },\n    value: { default: 'on' },\n  },\n  setup({ emit, host, props, reflect }) {\n    // Form integration — provides checkedSignal and triggerValidation\n    const { checkedSignal, formCtx, triggerValidation } = useToggleField(props);\n\n    mountFormContextSync(host, formCtx, props);\n\n    // Separate writable indeterminate signal, synced from the prop\n    const indeterminateSignal = signal(Boolean(props.indeterminate.value));\n\n    watch(props.indeterminate, (v) => {\n      indeterminateSignal.value = Boolean(v);\n    });\n\n    const groupCtx = inject(CHECKBOX_GROUP_CTX, undefined);\n\n    // Pass the writable checkedSignal directly — toggle() mutates it in place\n    const controlHandle = createCheckableControl({\n      checked: checkedSignal,\n      clearIndeterminateFirst: true,\n      disabled: props.disabled,\n      group: groupCtx,\n      indeterminate: indeterminateSignal,\n      onToggle: (e) => {\n        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', controlHandle.changePayload(e));\n      },\n      value: props.value,\n    });\n\n    const a11y = useA11yControl(host, {\n      checked: () => {\n        if (controlHandle.indeterminate.value) return 'mixed';\n\n        return controlHandle.checked.value ? 'true' : 'false';\n      },\n      helperText: () => props.error.value || props.helper.value,\n      helperTone: () => (props.error.value ? 'error' : 'default'),\n      invalid: () => !!props.error.value,\n      role: 'checkbox',\n    });\n\n    reflect({\n      checked: () => controlHandle.checked.value,\n      classMap: () => ({\n        'is-checked': controlHandle.checked.value,\n        'is-disabled': !!props.disabled.value,\n        'is-indeterminate': controlHandle.indeterminate.value,\n      }),\n      indeterminate: () => controlHandle.indeterminate.value,\n      onClick: (e: Event) => controlHandle.toggle(e),\n      onKeydown: (e: Event) => {\n        const ke = e as KeyboardEvent;\n\n        if (ke.key === ' ' || ke.key === 'Enter') {\n          ke.preventDefault();\n          controlHandle.toggle(e);\n        }\n      },\n      tabindex: () => (props.disabled.value ? undefined : 0),\n    });\n\n    return html`\n      <div class=\"checkbox-wrapper\" part=\"checkbox\">\n        <div class=\"box\" part=\"box\">\n          <svg\n            class=\"checkmark\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M 20,6 9,17 4,12\" />\n          </svg>\n          <svg\n            class=\"dash\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M 5,12 H 19\" />\n          </svg>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" data-a11y-label id=\"${a11y.labelId}\"><slot></slot></span>\n      <div\n        class=\"helper-text\"\n        part=\"helper-text\"\n        data-a11y-helper\n        id=\"${a11y.helperId}\"\n        aria-live=\"polite\"\n        hidden></div>\n    `;\n  },\n  styles: [...formControlMixins, coarsePointerMixin, sizeVariantMixin(CONTROL_SIZE_PRESET), componentStyles],\n  tag: 'bit-checkbox',\n});\n"],"mappings":"stBAoDA,IAAa,GAAA,EAAA,EAAA,iBAAoE,CAC/E,eAAgB,GAChB,MAAO,CACL,QAAS,CAAE,QAAS,GAAO,CAC3B,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,SAAU,CAAE,QAAS,GAAO,CAC5B,MAAO,CAAE,QAAS,GAAI,CACtB,OAAQ,CAAE,QAAS,GAAI,CACvB,cAAe,CAAE,QAAS,GAAO,CACjC,KAAM,CAAE,QAAS,GAAI,CACrB,KAAM,CAAE,QAAS,IAAA,GAAW,CAC5B,MAAO,CAAE,QAAS,KAAM,CACzB,CACD,MAAM,CAAE,OAAM,OAAM,QAAO,WAAW,CAEpC,GAAM,CAAE,gBAAe,UAAS,qBAAsB,EAAA,eAAe,EAAM,CAE3E,EAAA,qBAAqB,EAAM,EAAS,EAAM,CAG1C,IAAM,GAAA,EAAA,EAAA,QAA6B,EAAQ,EAAM,cAAc,MAAO,EAEtE,EAAA,EAAA,OAAM,EAAM,cAAgB,GAAM,CAChC,EAAoB,MAAQ,EAAQ,GACpC,CAEF,IAAM,GAAA,EAAA,EAAA,QAAkB,EAAA,mBAAoB,IAAA,GAAU,CAGhD,EAAgB,EAAA,EAAuB,CAC3C,QAAS,EACT,wBAAyB,GACzB,SAAU,EAAM,SAChB,MAAO,EACP,cAAe,EACf,SAAW,GAAM,CACf,EAAkB,SAAS,CAIvB,IAEJ,EAAK,SAAU,EAAc,cAAc,EAAE,CAAC,EAEhD,MAAO,EAAM,MACd,CAAC,CAEI,EAAO,EAAA,EAAe,EAAM,CAChC,YACM,EAAc,cAAc,MAAc,QAEvC,EAAc,QAAQ,MAAQ,OAAS,QAEhD,eAAkB,EAAM,MAAM,OAAS,EAAM,OAAO,MACpD,eAAmB,EAAM,MAAM,MAAQ,QAAU,UACjD,YAAe,CAAC,CAAC,EAAM,MAAM,MAC7B,KAAM,WACP,CAAC,CAsBF,OApBA,EAAQ,CACN,YAAe,EAAc,QAAQ,MACrC,cAAiB,CACf,aAAc,EAAc,QAAQ,MACpC,cAAe,CAAC,CAAC,EAAM,SAAS,MAChC,mBAAoB,EAAc,cAAc,MACjD,EACD,kBAAqB,EAAc,cAAc,MACjD,QAAU,GAAa,EAAc,OAAO,EAAE,CAC9C,UAAY,GAAa,CACvB,IAAM,EAAK,GAEP,EAAG,MAAQ,KAAO,EAAG,MAAQ,WAC/B,EAAG,gBAAgB,CACnB,EAAc,OAAO,EAAE,GAG3B,aAAiB,EAAM,SAAS,MAAQ,IAAA,GAAY,EACrD,CAAC,CAEK,EAAA,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;6DA2B8C,EAAK,QAAQ;;;;;cAK5D,EAAK,SAAS;;;OAK1B,OAAQ,CAAC,GAAG,EAAA,kBAAmB,EAAA,mBAAoB,EAAA,iBAAiB,EAAA,oBAAoB,CAAE,EAAA,QAAgB,CAC1G,IAAK,eACN,CAAC"}

package/dist/checkbox.js

@@ -0,0 +1,115 @@
+import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
+import { sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
+import { formControlMixins as n } from "./styles/index.js";
+import { r } from "./craftit/dist/labs/a11y.js";
+import { t as i } from "./craftit/dist/labs/selectable.js";
+import "./craftit/dist/labs.js";
+import { mountFormContextSync as a } from "./inputs/shared/dom-sync/form-context.js";
+import "./inputs/shared/dom-sync/index.js";
+import { CHECKBOX_GROUP_CTX as o } from "./checkbox-group.js";
+import { useToggleField as s } from "./inputs/shared/composables/use-toggle-field.js";
+import "./inputs/shared/composables/index.js";
+import { CONTROL_SIZE_PRESET as c } from "./inputs/shared/design-presets.js";
+import l from "./inputs/checkbox/checkbox.css?inline.js";
+import { defineComponent as u, html as d, inject as f, signal as p, watch as m } from "@vielzeug/craftit";
+//#region src/inputs/checkbox/checkbox.ts
+var h = u({
+	formAssociated: !0,
+	props: {
+		checked: { default: !1 },
+		color: { default: void 0 },
+		disabled: { default: !1 },
+		error: { default: "" },
+		helper: { default: "" },
+		indeterminate: { default: !1 },
+		name: { default: "" },
+		size: { default: void 0 },
+		value: { default: "on" }
+	},
+	setup({ emit: e, host: t, props: n, reflect: c }) {
+		let { checkedSignal: l, formCtx: u, triggerValidation: h } = s(n);
+		a(t, u, n);
+		let g = p(!!n.indeterminate.value);
+		m(n.indeterminate, (e) => {
+			g.value = !!e;
+		});
+		let _ = f(o, void 0), v = i({
+			checked: l,
+			clearIndeterminateFirst: !0,
+			disabled: n.disabled,
+			group: _,
+			indeterminate: g,
+			onToggle: (t) => {
+				h("change"), !_ && e("change", v.changePayload(t));
+			},
+			value: n.value
+		}), y = r(t, {
+			checked: () => v.indeterminate.value ? "mixed" : v.checked.value ? "true" : "false",
+			helperText: () => n.error.value || n.helper.value,
+			helperTone: () => n.error.value ? "error" : "default",
+			invalid: () => !!n.error.value,
+			role: "checkbox"
+		});
+		return c({
+			checked: () => v.checked.value,
+			classMap: () => ({
+				"is-checked": v.checked.value,
+				"is-disabled": !!n.disabled.value,
+				"is-indeterminate": v.indeterminate.value
+			}),
+			indeterminate: () => v.indeterminate.value,
+			onClick: (e) => v.toggle(e),
+			onKeydown: (e) => {
+				let t = e;
+				(t.key === " " || t.key === "Enter") && (t.preventDefault(), v.toggle(e));
+			},
+			tabindex: () => n.disabled.value ? void 0 : 0
+		}), d`
+      <div class="checkbox-wrapper" part="checkbox">
+        <div class="box" part="box">
+          <svg
+            class="checkmark"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            xmlns="http://www.w3.org/2000/svg">
+            <path d="M 20,6 9,17 4,12" />
+          </svg>
+          <svg
+            class="dash"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            xmlns="http://www.w3.org/2000/svg">
+            <path d="M 5,12 H 19" />
+          </svg>
+        </div>
+      </div>
+      <span class="label" part="label" data-a11y-label id="${y.labelId}"><slot></slot></span>
+      <div
+        class="helper-text"
+        part="helper-text"
+        data-a11y-helper
+        id="${y.helperId}"
+        aria-live="polite"
+        hidden></div>
+    `;
+	},
+	styles: [
+		...n,
+		e,
+		t(c),
+		l
+	],
+	tag: "bit-checkbox"
+});
+//#endregion
+export { h as CHECKBOX_TAG };
+
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":[],"sources":["../src/inputs/checkbox/checkbox.ts"],"sourcesContent":["import { defineComponent, html, inject, signal, watch } from '@vielzeug/craftit';\nimport { useA11yControl, createCheckableControl } from '@vielzeug/craftit/labs';\n\nimport type { CheckableProps, DisablableProps, SizableProps, ThemableProps } from '../../types';\n\nimport { coarsePointerMixin, formControlMixins, sizeVariantMixin } from '../../styles';\nimport { CHECKBOX_GROUP_CTX } from '../checkbox-group/checkbox-group';\nimport { useToggleField } from '../shared/composables';\nimport { CONTROL_SIZE_PRESET } from '../shared/design-presets';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport componentStyles from './checkbox.css?inline';\n\nexport type BitCheckboxEvents = {\n  change: { checked: boolean; fieldValue: string; originalEvent?: Event; value: boolean };\n};\n\nexport type BitCheckboxProps = CheckableProps &\n  ThemableProps &\n  SizableProps &\n  DisablableProps & {\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  };\n\n/**\n * A customizable checkbox component with theme colors, sizes, and indeterminate state support.\n *\n * @element bit-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 {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: { value: boolean, checked: boolean, fieldValue: string, originalEvent?: Event }\n *\n * @slot - Checkbox label text\n *\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 */\nexport const CHECKBOX_TAG = defineComponent<BitCheckboxProps, BitCheckboxEvents>({\n  formAssociated: true,\n  props: {\n    checked: { default: false },\n    color: { default: undefined },\n    disabled: { default: false },\n    error: { default: '' },\n    helper: { default: '' },\n    indeterminate: { default: false },\n    name: { default: '' },\n    size: { default: undefined },\n    value: { default: 'on' },\n  },\n  setup({ emit, host, props, reflect }) {\n    // Form integration — provides checkedSignal and triggerValidation\n    const { checkedSignal, formCtx, triggerValidation } = useToggleField(props);\n\n    mountFormContextSync(host, formCtx, props);\n\n    // Separate writable indeterminate signal, synced from the prop\n    const indeterminateSignal = signal(Boolean(props.indeterminate.value));\n\n    watch(props.indeterminate, (v) => {\n      indeterminateSignal.value = Boolean(v);\n    });\n\n    const groupCtx = inject(CHECKBOX_GROUP_CTX, undefined);\n\n    // Pass the writable checkedSignal directly — toggle() mutates it in place\n    const controlHandle = createCheckableControl({\n      checked: checkedSignal,\n      clearIndeterminateFirst: true,\n      disabled: props.disabled,\n      group: groupCtx,\n      indeterminate: indeterminateSignal,\n      onToggle: (e) => {\n        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', controlHandle.changePayload(e));\n      },\n      value: props.value,\n    });\n\n    const a11y = useA11yControl(host, {\n      checked: () => {\n        if (controlHandle.indeterminate.value) return 'mixed';\n\n        return controlHandle.checked.value ? 'true' : 'false';\n      },\n      helperText: () => props.error.value || props.helper.value,\n      helperTone: () => (props.error.value ? 'error' : 'default'),\n      invalid: () => !!props.error.value,\n      role: 'checkbox',\n    });\n\n    reflect({\n      checked: () => controlHandle.checked.value,\n      classMap: () => ({\n        'is-checked': controlHandle.checked.value,\n        'is-disabled': !!props.disabled.value,\n        'is-indeterminate': controlHandle.indeterminate.value,\n      }),\n      indeterminate: () => controlHandle.indeterminate.value,\n      onClick: (e: Event) => controlHandle.toggle(e),\n      onKeydown: (e: Event) => {\n        const ke = e as KeyboardEvent;\n\n        if (ke.key === ' ' || ke.key === 'Enter') {\n          ke.preventDefault();\n          controlHandle.toggle(e);\n        }\n      },\n      tabindex: () => (props.disabled.value ? undefined : 0),\n    });\n\n    return html`\n      <div class=\"checkbox-wrapper\" part=\"checkbox\">\n        <div class=\"box\" part=\"box\">\n          <svg\n            class=\"checkmark\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M 20,6 9,17 4,12\" />\n          </svg>\n          <svg\n            class=\"dash\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M 5,12 H 19\" />\n          </svg>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" data-a11y-label id=\"${a11y.labelId}\"><slot></slot></span>\n      <div\n        class=\"helper-text\"\n        part=\"helper-text\"\n        data-a11y-helper\n        id=\"${a11y.helperId}\"\n        aria-live=\"polite\"\n        hidden></div>\n    `;\n  },\n  styles: [...formControlMixins, coarsePointerMixin, sizeVariantMixin(CONTROL_SIZE_PRESET), componentStyles],\n  tag: 'bit-checkbox',\n});\n"],"mappings":";;;;;;;;;;;;;;;AAoDA,IAAa,IAAe,EAAqD;CAC/E,gBAAgB;CAChB,OAAO;EACL,SAAS,EAAE,SAAS,IAAO;EAC3B,OAAO,EAAE,SAAS,KAAA,GAAW;EAC7B,UAAU,EAAE,SAAS,IAAO;EAC5B,OAAO,EAAE,SAAS,IAAI;EACtB,QAAQ,EAAE,SAAS,IAAI;EACvB,eAAe,EAAE,SAAS,IAAO;EACjC,MAAM,EAAE,SAAS,IAAI;EACrB,MAAM,EAAE,SAAS,KAAA,GAAW;EAC5B,OAAO,EAAE,SAAS,MAAM;EACzB;CACD,MAAM,EAAE,SAAM,SAAM,UAAO,cAAW;EAEpC,IAAM,EAAE,kBAAe,YAAS,yBAAsB,EAAe,EAAM;AAE3E,IAAqB,GAAM,GAAS,EAAM;EAG1C,IAAM,IAAsB,EAAO,EAAQ,EAAM,cAAc,MAAO;AAEtE,IAAM,EAAM,gBAAgB,MAAM;AAChC,KAAoB,QAAQ,EAAQ;IACpC;EAEF,IAAM,IAAW,EAAO,GAAoB,KAAA,EAAU,EAGhD,IAAgB,EAAuB;GAC3C,SAAS;GACT,yBAAyB;GACzB,UAAU,EAAM;GAChB,OAAO;GACP,eAAe;GACf,WAAW,MAAM;AACf,MAAkB,SAAS,EAIvB,MAEJ,EAAK,UAAU,EAAc,cAAc,EAAE,CAAC;;GAEhD,OAAO,EAAM;GACd,CAAC,EAEI,IAAO,EAAe,GAAM;GAChC,eACM,EAAc,cAAc,QAAc,UAEvC,EAAc,QAAQ,QAAQ,SAAS;GAEhD,kBAAkB,EAAM,MAAM,SAAS,EAAM,OAAO;GACpD,kBAAmB,EAAM,MAAM,QAAQ,UAAU;GACjD,eAAe,CAAC,CAAC,EAAM,MAAM;GAC7B,MAAM;GACP,CAAC;AAsBF,SApBA,EAAQ;GACN,eAAe,EAAc,QAAQ;GACrC,iBAAiB;IACf,cAAc,EAAc,QAAQ;IACpC,eAAe,CAAC,CAAC,EAAM,SAAS;IAChC,oBAAoB,EAAc,cAAc;IACjD;GACD,qBAAqB,EAAc,cAAc;GACjD,UAAU,MAAa,EAAc,OAAO,EAAE;GAC9C,YAAY,MAAa;IACvB,IAAM,IAAK;AAEX,KAAI,EAAG,QAAQ,OAAO,EAAG,QAAQ,aAC/B,EAAG,gBAAgB,EACnB,EAAc,OAAO,EAAE;;GAG3B,gBAAiB,EAAM,SAAS,QAAQ,KAAA,IAAY;GACrD,CAAC,EAEK,CAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;6DA2B8C,EAAK,QAAQ;;;;;cAK5D,EAAK,SAAS;;;;;CAK1B,QAAQ;EAAC,GAAG;EAAmB;EAAoB,EAAiB,EAAoB;EAAE;EAAgB;CAC1G,KAAK;CACN,CAAC"}

package/dist/chip.cjs

@@ -0,0 +1,56 @@
+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`);require(`./styles/index.cjs`);const r=require(`./feedback/chip/chip.css?inline.cjs`);let i=require(`@vielzeug/craftit`);var a=i.html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    width="0.75em"
+    height="0.75em"
+    aria-hidden="true">
+    <path d="M18 6 6 18M6 6l12 12" />
+  </svg>
+`,o=(0,i.defineComponent)({props:{"aria-label":(0,i.typed)(void 0),checked:(0,i.typed)(void 0,{parse:e=>e==null?void 0:e!==`false`}),color:(0,i.typed)(void 0),"default-checked":(0,i.typed)(!1),disabled:(0,i.typed)(!1),mode:(0,i.typed)(`static`),rounded:(0,i.typed)(void 0),size:(0,i.typed)(void 0),value:(0,i.typed)(void 0),variant:(0,i.typed)(void 0)},setup({emit:e,host:t,props:n}){let r=n.checked,o=n[`aria-label`],s=(0,i.signal)(r.value!==void 0),c=(0,i.signal)(!s.value&&n[`default-checked`].value);(0,i.watch)(r,e=>{e!==void 0&&(s.value=!0)});let l=(0,i.computed)(()=>n.mode.value===`selectable`?s.value?r.value??!1:c.value:!1);(0,i.watch)([l,n.mode],()=>{t.toggleAttribute(`checked`,n.mode.value===`selectable`&&l.value)},{immediate:!0});function u(t){t.stopPropagation(),!n.disabled.value&&e(`remove`,{originalEvent:t,value:n.value.value})}function d(t){if(t.stopPropagation(),n.disabled.value)return;let r=!l.value;s.value||(c.value=r),e(`change`,{checked:r,originalEvent:t,value:n.value.value})}function f(t){t.stopPropagation(),!n.disabled.value&&e(`click`,{originalEvent:t,value:n.value.value})}let p=()=>i.html`
+      <slot name="icon"></slot>
+      <span class="label"><slot></slot></span>
+    `,m=()=>i.html`
+      <button
+        class="remove-btn"
+        part="remove-btn"
+        type="button"
+        :aria-label="${()=>{let e=o.value||n.value.value;return e?`Remove ${e}`:`Remove`}}"
+        ?hidden="${()=>n.mode.value!==`removable`}"
+        :disabled="${()=>n.disabled.value}"
+        @click="${u}">
+        ${a}
+      </button>
+    `,h=()=>i.html`
+      <button
+        class="chip-btn"
+        part="chip-btn"
+        type="button"
+        role="checkbox"
+        :aria-checked="${()=>String(l.value)}"
+        :aria-label="${()=>o.value}"
+        :disabled="${()=>n.disabled.value}"
+        @click="${d}">
+        <span class="chip" part="chip"> ${p()} </span>
+      </button>
+    `,g=()=>i.html`
+      <button
+        class="chip-btn"
+        part="chip-btn"
+        type="button"
+        :aria-label="${()=>o.value}"
+        :disabled="${()=>n.disabled.value}"
+        @click="${f}">
+        <span class="chip" part="chip"> ${p()} </span>
+      </button>
+    `,_=()=>i.html` <span class="chip" part="chip"> ${p()} </span> `,v=()=>i.html`
+      <span class="chip" part="chip"> ${p()} ${m()} </span>
+    `;return i.html`
+      ${()=>{let e=n.mode.value;return e===`selectable`?h():e===`action`?g():e===`removable`?v():_()}}
+    `},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],tag:`bit-chip`});exports.CHIP_TAG=o;
+//# sourceMappingURL=chip.cjs.map

package/dist/chip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.cjs","names":[],"sources":["../src/feedback/chip/chip.ts"],"sourcesContent":["import { computed, defineComponent, html, signal, typed, watch } from '@vielzeug/craftit';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\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// Icons\n// ============================================\n\n// Small close icon for remove button (relative sizing for chip)\nconst CHIP_CLOSE_ICON = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    width=\"0.75em\"\n    height=\"0.75em\"\n    aria-hidden=\"true\">\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </svg>\n`;\n\n// ============================================\n// Types\n// ============================================\n\n/** Chip component properties */\ntype ChipBaseProps = {\n  /** Accessible label (required for icon-only chips) */\n  'aria-label'?: string;\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interactions */\n  disabled?: boolean;\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, 'glass' | 'text' | 'frost'>;\n};\n\ntype BitChipMode = 'static' | 'removable' | 'selectable' | 'action';\n\n/** Read-only presentation chip */\ntype StaticChipProps = {\n  mode?: Extract<BitChipMode, 'static'>;\n};\n\n/** Removable chip mode */\ntype RemovableChipProps = {\n  mode: Extract<BitChipMode, '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<BitChipMode, 'selectable'>;\n};\n\n/** Action chip mode — behaves like a button, fires a click event without maintaining state */\ntype ActionChipProps = {\n  mode: Extract<BitChipMode, 'action'>;\n};\n\ntype BitChipComponentProps = ChipBaseProps & {\n  checked?: boolean | undefined;\n  'default-checked'?: boolean;\n  mode?: BitChipMode;\n};\n\nexport type BitChipEvents = {\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 BitChipProps = 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 bit-chip\n *\n * @attr {string}  aria-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 * @slot         - Chip label text\n * @slot icon    - Leading icon or decoration\n *\n * @event remove - Fired when the remove button is clicked, with `detail.value` and `detail.originalEvent`\n * @event change - Fired when a selectable chip toggles, with `detail.checked`, `detail.value`, and `detail.originalEvent`\n * @event click  - Fired when an action chip is clicked, with `detail.value` and `detail.originalEvent`\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 *\n * @example\n * ```html\n * <!-- Static chip (read-only) -->\n * <bit-chip color=\"primary\">Design</bit-chip>\n *\n * <!-- Removable chip -->\n * <bit-chip color=\"success\" variant=\"flat\" mode=\"removable\" value=\"ts\">\n *   TypeScript\n * </bit-chip>\n *\n * <!-- Selectable chip (controlled) -->\n * <bit-chip color=\"info\" variant=\"flat\" mode=\"selectable\" checked value=\"ui\">\n *   UI\n * </bit-chip>\n *\n * <!-- Selectable chip (uncontrolled) -->\n * <bit-chip color=\"info\" variant=\"flat\" mode=\"selectable\" default-checked value=\"ui\">\n *   UI\n * </bit-chip>\n *\n * <!-- Action chip (acts like a button) -->\n * <bit-chip color=\"warning\" mode=\"action\" value=\"add\">\n *   <svg slot=\"icon\" ...></svg>\n *   Add Item\n * </bit-chip>\n *\n * <!-- Icon-only chip -->\n * <bit-chip color=\"error\" mode=\"action\" aria-label=\"Delete\">\n *   <svg slot=\"icon\" ...></svg>\n * </bit-chip>\n * ```\n */\nexport const CHIP_TAG = defineComponent<BitChipComponentProps, BitChipEvents>({\n  props: {\n    'aria-label': typed<BitChipComponentProps['aria-label']>(undefined),\n    checked: typed<BitChipComponentProps['checked']>(undefined, {\n      parse: (value) => (value == null ? undefined : value !== 'false'),\n    }),\n    color: typed<BitChipComponentProps['color']>(undefined),\n    'default-checked': typed<boolean>(false),\n    disabled: typed<boolean>(false),\n    mode: typed<BitChipMode>('static'),\n    rounded: typed<BitChipComponentProps['rounded']>(undefined),\n    size: typed<BitChipComponentProps['size']>(undefined),\n    value: typed<BitChipComponentProps['value']>(undefined),\n    variant: typed<BitChipComponentProps['variant']>(undefined),\n  },\n  setup({ emit, host, props }) {\n    const checkedProp = props.checked;\n    const ariaLabelProp = props['aria-label'];\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(checkedProp.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(checkedProp, (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 checkedProp.value ?? false;\n      }\n\n      return checkedState.value;\n    });\n\n    // Sync the [checked] attribute for CSS selectors across controlled and uncontrolled modes.\n    watch(\n      [isChecked, props.mode],\n      () => {\n        host.toggleAttribute('checked', props.mode.value === 'selectable' && isChecked.value);\n      },\n      { immediate: true },\n    );\n    // ============================================\n    // Event Handlers\n    // ============================================\n    function handleRemove(e: MouseEvent) {\n      e.stopPropagation();\n\n      if (props.disabled.value) return;\n\n      // Button's disabled attribute prevents this from firing when disabled\n      emit('remove', { originalEvent: e, value: props.value.value });\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    function handleActionClick(e: MouseEvent) {\n      e.stopPropagation();\n\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    const renderRemoveButton = () => html`\n      <button\n        class=\"remove-btn\"\n        part=\"remove-btn\"\n        type=\"button\"\n        :aria-label=\"${() => {\n          const label = ariaLabelProp.value || props.value.value;\n\n          return label ? `Remove ${label}` : 'Remove';\n        }}\"\n        ?hidden=\"${() => props.mode.value !== 'removable'}\"\n        :disabled=\"${() => props.disabled.value}\"\n        @click=\"${handleRemove}\">\n        ${CHIP_CLOSE_ICON}\n      </button>\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=\"${() => ariaLabelProp.value}\"\n        :disabled=\"${() => props.disabled.value}\"\n        @click=\"${handleSelectableActivate}\">\n        <span class=\"chip\" part=\"chip\"> ${renderChipContent()} </span>\n      </button>\n    `;\n    const renderActionChip = () => html`\n      <button\n        class=\"chip-btn\"\n        part=\"chip-btn\"\n        type=\"button\"\n        :aria-label=\"${() => ariaLabelProp.value}\"\n        :disabled=\"${() => props.disabled.value}\"\n        @click=\"${handleActionClick}\">\n        <span class=\"chip\" part=\"chip\"> ${renderChipContent()} </span>\n      </button>\n    `;\n    const renderStaticChip = () => html` <span class=\"chip\" part=\"chip\"> ${renderChipContent()} </span> `;\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  tag: 'bit-chip',\n});\n"],"mappings":"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"}

package/dist/chip.js

@@ -0,0 +1,140 @@
+import { roundedVariantMixin as e, sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
+import { disabledStateMixin as n } from "./styles/mixins/states.css.js";
+import { colorThemeMixin as r, forcedColorsMixin as i } from "./styles/mixins/theme.css.js";
+import "./styles/index.js";
+import a from "./feedback/chip/chip.css?inline.js";
+import { computed as o, defineComponent as s, html as c, signal as l, typed as u, watch as d } from "@vielzeug/craftit";
+//#region src/feedback/chip/chip.ts
+var f = c`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    width="0.75em"
+    height="0.75em"
+    aria-hidden="true">
+    <path d="M18 6 6 18M6 6l12 12" />
+  </svg>
+`, p = s({
+	props: {
+		"aria-label": u(void 0),
+		checked: u(void 0, { parse: (e) => e == null ? void 0 : e !== "false" }),
+		color: u(void 0),
+		"default-checked": u(!1),
+		disabled: u(!1),
+		mode: u("static"),
+		rounded: u(void 0),
+		size: u(void 0),
+		value: u(void 0),
+		variant: u(void 0)
+	},
+	setup({ emit: e, host: t, props: n }) {
+		let r = n.checked, i = n["aria-label"], a = l(r.value !== void 0), s = l(!a.value && n["default-checked"].value);
+		d(r, (e) => {
+			e !== void 0 && (a.value = !0);
+		});
+		let u = o(() => n.mode.value === "selectable" ? a.value ? r.value ?? !1 : s.value : !1);
+		d([u, n.mode], () => {
+			t.toggleAttribute("checked", n.mode.value === "selectable" && u.value);
+		}, { immediate: !0 });
+		function p(t) {
+			t.stopPropagation(), !n.disabled.value && e("remove", {
+				originalEvent: t,
+				value: n.value.value
+			});
+		}
+		function m(t) {
+			if (t.stopPropagation(), n.disabled.value) return;
+			let r = !u.value;
+			a.value || (s.value = r), e("change", {
+				checked: r,
+				originalEvent: t,
+				value: n.value.value
+			});
+		}
+		function h(t) {
+			t.stopPropagation(), !n.disabled.value && e("click", {
+				originalEvent: t,
+				value: n.value.value
+			});
+		}
+		let g = () => c`
+      <slot name="icon"></slot>
+      <span class="label"><slot></slot></span>
+    `, _ = () => c`
+      <button
+        class="remove-btn"
+        part="remove-btn"
+        type="button"
+        :aria-label="${() => {
+			let e = i.value || n.value.value;
+			return e ? `Remove ${e}` : "Remove";
+		}}"
+        ?hidden="${() => n.mode.value !== "removable"}"
+        :disabled="${() => n.disabled.value}"
+        @click="${p}">
+        ${f}
+      </button>
+    `, v = () => c`
+      <button
+        class="chip-btn"
+        part="chip-btn"
+        type="button"
+        role="checkbox"
+        :aria-checked="${() => String(u.value)}"
+        :aria-label="${() => i.value}"
+        :disabled="${() => n.disabled.value}"
+        @click="${m}">
+        <span class="chip" part="chip"> ${g()} </span>
+      </button>
+    `, y = () => c`
+      <button
+        class="chip-btn"
+        part="chip-btn"
+        type="button"
+        :aria-label="${() => i.value}"
+        :disabled="${() => n.disabled.value}"
+        @click="${h}">
+        <span class="chip" part="chip"> ${g()} </span>
+      </button>
+    `, b = () => c` <span class="chip" part="chip"> ${g()} </span> `, x = () => c`
+      <span class="chip" part="chip"> ${g()} ${_()} </span>
+    `;
+		return c`
+      ${() => {
+			let e = n.mode.value;
+			return e === "selectable" ? v() : e === "action" ? y() : e === "removable" ? x() : b();
+		}}
+    `;
+	},
+	styles: [
+		r,
+		n(),
+		e,
+		t({
+			lg: {
+				"--_font-size": "var(--text-sm)",
+				"--_gap": "var(--size-1-5)",
+				"--_padding-x": "var(--size-3)",
+				"--_padding-y": "var(--size-1)"
+			},
+			sm: {
+				"--_font-size": "var(--text-xs)",
+				"--_gap": "var(--size-0-5)",
+				"--_padding-x": "var(--size-2-5)",
+				"--_padding-y": "var(--size-px)"
+			}
+		}),
+		i,
+		a
+	],
+	tag: "bit-chip"
+});
+//#endregion
+export { p as CHIP_TAG };
+
+//# sourceMappingURL=chip.js.map

package/dist/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","names":[],"sources":["../src/feedback/chip/chip.ts"],"sourcesContent":["import { computed, defineComponent, html, signal, typed, watch } from '@vielzeug/craftit';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\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// Icons\n// ============================================\n\n// Small close icon for remove button (relative sizing for chip)\nconst CHIP_CLOSE_ICON = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    width=\"0.75em\"\n    height=\"0.75em\"\n    aria-hidden=\"true\">\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </svg>\n`;\n\n// ============================================\n// Types\n// ============================================\n\n/** Chip component properties */\ntype ChipBaseProps = {\n  /** Accessible label (required for icon-only chips) */\n  'aria-label'?: string;\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interactions */\n  disabled?: boolean;\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, 'glass' | 'text' | 'frost'>;\n};\n\ntype BitChipMode = 'static' | 'removable' | 'selectable' | 'action';\n\n/** Read-only presentation chip */\ntype StaticChipProps = {\n  mode?: Extract<BitChipMode, 'static'>;\n};\n\n/** Removable chip mode */\ntype RemovableChipProps = {\n  mode: Extract<BitChipMode, '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<BitChipMode, 'selectable'>;\n};\n\n/** Action chip mode — behaves like a button, fires a click event without maintaining state */\ntype ActionChipProps = {\n  mode: Extract<BitChipMode, 'action'>;\n};\n\ntype BitChipComponentProps = ChipBaseProps & {\n  checked?: boolean | undefined;\n  'default-checked'?: boolean;\n  mode?: BitChipMode;\n};\n\nexport type BitChipEvents = {\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 BitChipProps = 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 bit-chip\n *\n * @attr {string}  aria-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 * @slot         - Chip label text\n * @slot icon    - Leading icon or decoration\n *\n * @event remove - Fired when the remove button is clicked, with `detail.value` and `detail.originalEvent`\n * @event change - Fired when a selectable chip toggles, with `detail.checked`, `detail.value`, and `detail.originalEvent`\n * @event click  - Fired when an action chip is clicked, with `detail.value` and `detail.originalEvent`\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 *\n * @example\n * ```html\n * <!-- Static chip (read-only) -->\n * <bit-chip color=\"primary\">Design</bit-chip>\n *\n * <!-- Removable chip -->\n * <bit-chip color=\"success\" variant=\"flat\" mode=\"removable\" value=\"ts\">\n *   TypeScript\n * </bit-chip>\n *\n * <!-- Selectable chip (controlled) -->\n * <bit-chip color=\"info\" variant=\"flat\" mode=\"selectable\" checked value=\"ui\">\n *   UI\n * </bit-chip>\n *\n * <!-- Selectable chip (uncontrolled) -->\n * <bit-chip color=\"info\" variant=\"flat\" mode=\"selectable\" default-checked value=\"ui\">\n *   UI\n * </bit-chip>\n *\n * <!-- Action chip (acts like a button) -->\n * <bit-chip color=\"warning\" mode=\"action\" value=\"add\">\n *   <svg slot=\"icon\" ...></svg>\n *   Add Item\n * </bit-chip>\n *\n * <!-- Icon-only chip -->\n * <bit-chip color=\"error\" mode=\"action\" aria-label=\"Delete\">\n *   <svg slot=\"icon\" ...></svg>\n * </bit-chip>\n * ```\n */\nexport const CHIP_TAG = defineComponent<BitChipComponentProps, BitChipEvents>({\n  props: {\n    'aria-label': typed<BitChipComponentProps['aria-label']>(undefined),\n    checked: typed<BitChipComponentProps['checked']>(undefined, {\n      parse: (value) => (value == null ? undefined : value !== 'false'),\n    }),\n    color: typed<BitChipComponentProps['color']>(undefined),\n    'default-checked': typed<boolean>(false),\n    disabled: typed<boolean>(false),\n    mode: typed<BitChipMode>('static'),\n    rounded: typed<BitChipComponentProps['rounded']>(undefined),\n    size: typed<BitChipComponentProps['size']>(undefined),\n    value: typed<BitChipComponentProps['value']>(undefined),\n    variant: typed<BitChipComponentProps['variant']>(undefined),\n  },\n  setup({ emit, host, props }) {\n    const checkedProp = props.checked;\n    const ariaLabelProp = props['aria-label'];\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(checkedProp.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(checkedProp, (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 checkedProp.value ?? false;\n      }\n\n      return checkedState.value;\n    });\n\n    // Sync the [checked] attribute for CSS selectors across controlled and uncontrolled modes.\n    watch(\n      [isChecked, props.mode],\n      () => {\n        host.toggleAttribute('checked', props.mode.value === 'selectable' && isChecked.value);\n      },\n      { immediate: true },\n    );\n    // ============================================\n    // Event Handlers\n    // ============================================\n    function handleRemove(e: MouseEvent) {\n      e.stopPropagation();\n\n      if (props.disabled.value) return;\n\n      // Button's disabled attribute prevents this from firing when disabled\n      emit('remove', { originalEvent: e, value: props.value.value });\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    function handleActionClick(e: MouseEvent) {\n      e.stopPropagation();\n\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    const renderRemoveButton = () => html`\n      <button\n        class=\"remove-btn\"\n        part=\"remove-btn\"\n        type=\"button\"\n        :aria-label=\"${() => {\n          const label = ariaLabelProp.value || props.value.value;\n\n          return label ? `Remove ${label}` : 'Remove';\n        }}\"\n        ?hidden=\"${() => props.mode.value !== 'removable'}\"\n        :disabled=\"${() => props.disabled.value}\"\n        @click=\"${handleRemove}\">\n        ${CHIP_CLOSE_ICON}\n      </button>\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=\"${() => ariaLabelProp.value}\"\n        :disabled=\"${() => props.disabled.value}\"\n        @click=\"${handleSelectableActivate}\">\n        <span class=\"chip\" part=\"chip\"> ${renderChipContent()} </span>\n      </button>\n    `;\n    const renderActionChip = () => html`\n      <button\n        class=\"chip-btn\"\n        part=\"chip-btn\"\n        type=\"button\"\n        :aria-label=\"${() => ariaLabelProp.value}\"\n        :disabled=\"${() => props.disabled.value}\"\n        @click=\"${handleActionClick}\">\n        <span class=\"chip\" part=\"chip\"> ${renderChipContent()} </span>\n      </button>\n    `;\n    const renderStaticChip = () => html` <span class=\"chip\" part=\"chip\"> ${renderChipContent()} </span> `;\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  tag: 'bit-chip',\n});\n"],"mappings":";;;;;;;AAqBA,IAAM,IAAkB,CAAI;;;;;;;;;;;;;;GAiJf,IAAW,EAAsD;CAC5E,OAAO;EACL,cAAc,EAA2C,KAAA,EAAU;EACnE,SAAS,EAAwC,KAAA,GAAW,EAC1D,QAAQ,MAAW,KAAS,OAAO,KAAA,IAAY,MAAU,SAC1D,CAAC;EACF,OAAO,EAAsC,KAAA,EAAU;EACvD,mBAAmB,EAAe,GAAM;EACxC,UAAU,EAAe,GAAM;EAC/B,MAAM,EAAmB,SAAS;EAClC,SAAS,EAAwC,KAAA,EAAU;EAC3D,MAAM,EAAqC,KAAA,EAAU;EACrD,OAAO,EAAsC,KAAA,EAAU;EACvD,SAAS,EAAwC,KAAA,EAAU;EAC5D;CACD,MAAM,EAAE,SAAM,SAAM,YAAS;EAC3B,IAAM,IAAc,EAAM,SACpB,IAAgB,EAAM,eAKtB,IAAe,EAAO,EAAY,UAAU,KAAA,EAAU,EAEtD,IAAe,EAAO,CAAC,EAAa,SAAS,EAAM,mBAAmB,MAAM;AAElF,IAAM,IAAc,MAAU;AAC5B,GAAI,MAAU,KAAA,MACZ,EAAa,QAAQ;IAEvB;EAGF,IAAM,IAAY,QACZ,EAAM,KAAK,UAAU,eAErB,EAAa,QACR,EAAY,SAAS,KAGvB,EAAa,QAN0B,GAO9C;AAGF,IACE,CAAC,GAAW,EAAM,KAAK,QACjB;AACJ,KAAK,gBAAgB,WAAW,EAAM,KAAK,UAAU,gBAAgB,EAAU,MAAM;KAEvF,EAAE,WAAW,IAAM,CACpB;EAID,SAAS,EAAa,GAAe;AACnC,KAAE,iBAAiB,EAEf,GAAM,SAAS,SAGnB,EAAK,UAAU;IAAE,eAAe;IAAG,OAAO,EAAM,MAAM;IAAO,CAAC;;EAEhE,SAAS,EAAyB,GAAe;AAG/C,OAFA,EAAE,iBAAiB,EAEf,EAAM,SAAS,MAAO;GAE1B,IAAM,IAAc,CAAC,EAAU;AAM/B,GAJK,EAAa,UAChB,EAAa,QAAQ,IAGvB,EAAK,UAAU;IAAE,SAAS;IAAa,eAAe;IAAG,OAAO,EAAM,MAAM;IAAO,CAAC;;EAEtF,SAAS,EAAkB,GAAe;AACxC,KAAE,iBAAiB,EAEf,GAAM,SAAS,SAEnB,EAAK,SAAS;IAAE,eAAe;IAAG,OAAO,EAAM,MAAM;IAAO,CAAC;;EAM/D,IAAM,UAA0B,CAAI;;;OAI9B,UAA2B,CAAI;;;;;6BAKZ;GACnB,IAAM,IAAQ,EAAc,SAAS,EAAM,MAAM;AAEjD,UAAO,IAAQ,UAAU,MAAU;IACnC;yBACe,EAAM,KAAK,UAAU,YAAY;2BAC/B,EAAM,SAAS,MAAM;kBAC9B,EAAa;UACrB,EAAgB;;OAGhB,UAA6B,CAAI;;;;;;+BAMZ,OAAO,EAAU,MAAM,CAAC;6BAC1B,EAAc,MAAM;2BACtB,EAAM,SAAS,MAAM;kBAC9B,EAAyB;0CACD,GAAmB,CAAC;;OAGpD,UAAyB,CAAI;;;;;6BAKV,EAAc,MAAM;2BACtB,EAAM,SAAS,MAAM;kBAC9B,EAAkB;0CACM,GAAmB,CAAC;;OAGpD,UAAyB,CAAI,oCAAoC,GAAmB,CAAC,YACrF,UAA4B,CAAI;wCACF,GAAmB,CAAC,GAAG,GAAoB,CAAC;;AAMhF,SAAO,CAAI;cACD;GACN,IAAM,IAAO,EAAM,KAAK;AAQxB,UANI,MAAS,eAAqB,GAAsB,GAEpD,MAAS,WAAiB,GAAkB,GAE5C,MAAS,cAAoB,GAAqB,GAE/C,GAAkB;IACzB;;;CAGN,QAAQ;EACN;EACA,GAAoB;EACpB;EACA,EAAiB;GACf,IAAI;IACF,gBAAgB;IAChB,UAAU;IACV,gBAAgB;IAChB,gBAAgB;IACjB;GACD,IAAI;IACF,gBAAgB;IAChB,UAAU;IACV,gBAAgB;IAChB,gBAAgB;IACjB;GACF,CAAC;EACF;EACA;EACD;CACD,KAAK;CACN,CAAC"}

package/dist/combobox.cjs

@@ -0,0 +1,93 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/shape.css.cjs`),t=require(`./styles/mixins/states.css.cjs`),n=require(`./styles/mixins/theme.css.cjs`),r=require(`./styles/index.cjs`),i=require(`./icons.cjs`);require(`./chip.cjs`);const ee=require(`./craftit/dist/labs/list.cjs`),a=require(`./craftit/dist/labs/overlay.cjs`),o=require(`./craftit/dist/labs/selection.cjs`);require(`./craftit/dist/labs.cjs`);const s=require(`./inputs/shared/dom-sync/dropdown.cjs`),te=require(`./inputs/shared/utils/assistive-text.cjs`),ne=require(`./inputs/shared/utils/choice-change.cjs`),re=require(`./inputs/shared/utils/controlled-csv.cjs`),ie=require(`./inputs/shared/form-context.cjs`),c=require(`./inputs/shared/dom-sync/label-sync.cjs`);require(`./inputs/shared/dom-sync/index.cjs`);const ae=require(`./inputs/shared/validation/index.cjs`),l=require(`./inputs/shared/design-presets.cjs`),u=require(`./inputs/combobox/combobox-options.cjs`),oe=require(`./inputs/combobox/combobox-virtualizer.cjs`),d=require(`./inputs/combobox/combobox.css?inline.cjs`);let f=require(`@vielzeug/craftit`);var p=(0,f.defineComponent)({setup(){return f.html`<style>
+      ${f.css`
+      @layer buildit.base {
+        :host {
+          display: none;
+        }
+      }
+    `}
+    </style>`},tag:`bit-combobox-option`}),m=(0,f.defineComponent)({formAssociated:!0,props:{clearable:{default:!1},color:{default:void 0},creatable:{default:!1},disabled:{default:!1},error:{default:``,omit:!0},fullwidth:{default:!1},helper:{default:``},label:{default:``},"label-placement":{default:`inset`},loading:{default:!1},multiple:{default:!1},name:{default:``},"no-filter":{default:!1},options:(0,f.typed)(void 0,{reflect:!1}),placeholder:{default:``},rounded:{default:void 0},size:{default:void 0},value:{default:``},variant:{default:void 0}},setup({emit:e,host:t,props:n}){let{fieldId:r,helperId:l,labelId:d}=(0,f.createFormIds)(`combobox`,n.name.value),p=(0,f.ref)(),m=(0,f.ref)(),h=(0,f.inject)(ie.FORM_CTX,void 0),g=(0,f.signal)(String(n.value.value??``)),{triggerValidation:_}=ae.createFieldValidation(h,(0,f.defineField)({disabled:(0,f.computed)(()=>!!n.disabled.value||!!h?.disabled.value),value:g},{onReset:()=>{g.value=``,C.value=[],y.value=``}})),v=(0,f.signal)(!1),y=(0,f.signal)(``),b=(0,f.computed)(()=>!!n.disabled.value),x=(0,f.computed)(()=>!!n.multiple.value),se=(0,f.computed)(()=>!!n.creatable.value),S=(0,f.computed)(()=>!!n[`no-filter`].value);(0,f.watch)(v,e=>{t.toggleAttribute(`open`,(e=>!!e)(e))},{immediate:!0});let C=(0,f.signal)(n.value.value?[{label:``,value:n.value.value}]:[]),w=(0,f.signal)(-1),T=o.e({findByKey:e=>{let t=C.value.find(t=>t.value===e);if(t)return t;let n=F.value.find(t=>t.value===e);return n?{label:n.label,value:n.value}:{label:``,value:e}},getMode:()=>x.value?`multiple`:`single`,getSelected:()=>C.value,keyExtractor:e=>e.value,setSelected:e=>{C.value=e}}),E=e=>{let t=re.computeControlledCsvState(String(e??``));if(t.isEmpty){T.clear(),y.value=``,g.value=``;return}if(x.value){C.value=t.values.map(e=>({label:``,value:e})),g.value=t.formValue;return}C.value=[{label:``,value:t.firstValue}],g.value=t.firstValue};(0,f.watch)(n.value,e=>E(e),{immediate:!0}),(0,f.watch)(n.multiple,()=>E(n.value.value));let D=(0,f.computed)(()=>C.value[0]?.value??``),ce=(0,f.computed)(()=>C.value.length>0),le=(0,f.computed)(()=>!!n.label.value),O=null,k=null,A=null,j=null;function ue(){let e=t.shadowRoot?.querySelector(`input[role="combobox"]`)??null;return e&&(O=e),e??O}function M(){ue()?.focus()}let N=(0,f.signal)([]),P=(0,f.signal)([]),de=(0,f.computed)(()=>!!n.loading.value),F=(0,f.computed)(()=>{let e=n.options.value??N.value;return P.value.length===0?e:[...e,...P.value]});function I(e=Array.from(t.children)){N.value=u.parseSlottedOptions(e),C.value.length>0&&(C.value=u.backfillSelectionLabels(C.value,F.value),!x.value&&C.value.length===1&&(y.value=C.value[0]?.label??``))}let L=(0,f.computed)(()=>u.filterOptions(F.value,y.value,S.value)),R=(0,f.computed)(()=>u.getCreatableLabel(y.value,se.value,L.value)),z=(0,f.computed)(()=>te.resolveMergedAssistiveText(n.error.value,n.helper.value)),B=(0,f.computed)(()=>x.value&&C.value.length>0?``:n.placeholder.value||``),V=(0,f.computed)(()=>C.value.map(e=>e.value)),fe=(0,f.computed)(()=>C.value.map(e=>e.label?e.label:F.value.find(t=>t.value===e.value)?.label??e.value));function H(){g.value=T.serialize(`,`)}function U(t){e(`change`,ne.createChoiceChangeDetail(V.value,fe.value,t))}function pe(e){e.stopPropagation();let t=e.detail?.value;t!==void 0&&(T.remove(t),H(),U(e),_(`change`))}let W=s.createDropdownPositioner(()=>k,()=>A),G=ee.e({getIndex:()=>w.value,getItems:()=>L.value,isItemDisabled:e=>e.disabled,setIndex:e=>{w.value=e,ve()}}),K=a.t({getBoundaryElement:()=>t,getPanelElement:()=>A,getTriggerElement:()=>O,isDisabled:()=>b.value,isOpen:()=>v.value,positioner:{floating:()=>A,reference:()=>k,update:()=>W.updatePosition()},restoreFocus:!1,setOpen:(e,t)=>{v.value=e,e||G.reset()}}),q=e=>{(e.reason===`empty`||e.reason===`no-enabled-item`)&&(w.value=-1)};function J(e=!0,t=`programmatic`){e&&(y.value=``),K.open({reason:t})}function Y(e=`programmatic`){K.close({reason:e,restoreFocus:!1}),x.value?y.value=``:y.value=F.value.find(e=>e.value===D.value)?.label??``,_(`blur`)}function X(e,t){e.disabled||(x.value?(T.toggle(e.value),H(),y.value=``,U(t),_(`change`),M(),requestAnimationFrame(()=>M())):(T.select(e.value),y.value=e.label,g.value=e.value,U(t),_(`change`),Y(),M()))}function me(e){e.stopPropagation(),T.clear(),y.value=``,g.value=``,U(e),_(`change`),M()}function he(t){let n=t.target;y.value=n.value,x.value||T.clear(),q(G.first()),v.value||J(!1,`trigger`),e(`search`,{query:n.value})}function ge(){v.value||J(!1,`trigger`)}function _e(e){if(b.value)return;let t=L.value;switch(e.key){case`ArrowDown`:e.preventDefault(),v.value?q(G.next()):(J(!0,`trigger`),q(G.first()));break;case`ArrowUp`:e.preventDefault(),v.value?q(G.prev()):J(!0,`trigger`);break;case`Backspace`:x.value&&!y.value&&C.value.length>0&&(C.value=C.value.slice(0,-1),H(),U(e),_(`change`));break;case`End`:v.value&&(e.preventDefault(),q(G.last()));break;case`Enter`:e.preventDefault(),v.value&&w.value>=0&&w.value<t.length?X(t[w.value],e):v.value&&w.value===-1&&R.value?$(R.value,e):v.value||J();break;case`Escape`:e.preventDefault(),v.value&&Y(`escape`);break;case`Home`:v.value&&(e.preventDefault(),q(G.first()));break;case`Tab`:Y(`programmatic`);break;default:break}}function ve(){if(w.value>=0){Z.scrollToIndex(w.value,{align:`auto`});return}j&&j.querySelector(`[data-focused]`)?.scrollIntoView({block:`nearest`})}let{domVirtualList:Z,setupVirtualizer:ye,updateRenderedItemState:Q}=oe.createComboboxVirtualizer({checkIconHTML:i.checkIconHTML,comboId:r,getDropdownElement:()=>A,getFocusedIndex:()=>w.peek(),getIsMultiple:()=>x.peek(),getListboxElement:()=>j,getSelectedValue:()=>D.peek(),getSelectedValues:()=>C.peek(),onSelectOption:X,setFocusedIndex:e=>{w.value=e}});function $(e,t){let n={disabled:!1,iconEl:null,label:e,value:u.makeCreatableValue(e)};P.value=[...P.value,n],X(n,t)}return(0,f.onMount)(()=>{k=O?.closest(`.field`),A=t.shadowRoot?.querySelector(`.dropdown`)??null,j=t.shadowRoot?.querySelector(`[role="listbox"]`)??null;let e=K.bindOutsideClick(document);return(0,f.onSlotChange)(`default`,I),I(),(0,f.effect)(()=>{let e=L.value,t=v.value;t&&e.length>0?requestAnimationFrame(()=>ye(e,t)):Z.update(e,!1)}),c.mountLabelSyncStandalone(m,p,n),(0,f.effect)(()=>{if(j){for(let e of Array.from(j.querySelectorAll(`.no-results,.no-results-create,.dropdown-loading`)))e.remove();if(de.value){let e=document.createElement(`div`);e.className=`dropdown-loading`,e.textContent=`Loading…`,j.prepend(e)}else if(L.value.length===0)if(R.value){let e=document.createElement(`button`);e.type=`button`,e.className=`no-results-create`,e.textContent=`Create "${R.value}"`,w.value===-1&&e.setAttribute(`data-focused`,``),e.addEventListener(`pointerdown`,e=>{e.preventDefault()}),e.addEventListener(`click`,e=>{e.stopPropagation(),$(R.value,e)}),j.appendChild(e)}else{let e=document.createElement(`div`);e.className=`no-results`,e.setAttribute(`role`,`presentation`),e.textContent=`No results found`,j.appendChild(e)}Q()}}),(0,f.watch)([v,n.multiple,w,C,D],()=>{v.value&&Q()},{immediate:!0}),()=>{Z.destroy(),W.destroy(),e()}}),f.html`
+      <slot></slot>
+      <div class="combobox-wrapper" part="wrapper">
+        <label
+          class="label-outside"
+          for="${r}"
+          id="${d}"
+          ref=${p}
+          hidden
+          part="label"></label>
+        <div
+          class="field"
+          part="field"
+          @click="${()=>{v.value||J(!1,`trigger`),M()}}">
+          <label class="label-inset" for="${r}" id="${d}" ref=${m} hidden part="label"></label>
+          <div class="field-row">
+            <div class="chips-row">
+              <!-- Keep chip list diffing isolated so input node identity stays stable. -->
+              <span class="chips-list">
+                ${()=>(x.value?C.value:[]).map(e=>f.html`
+                      <bit-chip
+                        value=${e.value}
+                        aria-label=${e.label||e.value}
+                        mode="removable"
+                        variant="flat"
+                        size="sm"
+                        color=${()=>n.color.value}
+                        @remove=${pe}>
+                        ${e.label||e.value}
+                      </bit-chip>
+                    `)}
+              </span>
+              <input
+                ref=${e=>{if(O=e,!e){k=null;return}k=e.closest(`.field`),(0,f.aria)(e,{activedescendant:()=>w.value>=0?`${r}-opt-${w.value}`:null,autocomplete:`list`,controls:()=>`${r}-listbox`,describedby:()=>n.error.value||n.helper.value?l:null,disabled:()=>b.value,expanded:()=>v.value?`true`:`false`,invalid:()=>!!n.error.value,labelledby:()=>le.value?d:null})}}
+                class="input"
+                part="input"
+                type="text"
+                role="combobox"
+                autocomplete="off"
+                spellcheck="false"
+                id="${r}"
+                name="${()=>n.name.value}"
+                placeholder=${()=>B.value}
+                :disabled="${()=>b.value}"
+                @input=${he}
+                @keydown=${_e}
+                @focus=${ge}
+                .value=${y} />
+            </div>
+            <button
+              class="clear-btn"
+              part="clear-btn"
+              type="button"
+              aria-label="Clear"
+              tabindex="-1"
+              ?hidden=${()=>!ce.value}
+              @click="${me}">
+              ${i.clearIcon}
+            </button>
+            <span class="chevron" aria-hidden="true">
+              ${i.chevronDownIcon}
+              <span class="loader" aria-label="Loading"></span>
+            </span>
+          </div>
+        </div>
+
+        <div class="dropdown" part="dropdown" id="${()=>`${r}-dropdown`}" ?data-open=${()=>v.value}>
+          <div
+            role="listbox"
+            id="${()=>`${r}-listbox`}"
+            aria-label="${()=>n.label.value||n.placeholder.value||`Options`}"></div>
+        </div>
+
+        <span
+          class="helper-text"
+          id="${l}"
+          part="helper-text"
+          aria-live="polite"
+          ?hidden=${()=>z.value.hidden}
+          style=${()=>z.value.isError?`color: var(--color-error);`:``}
+          >${()=>z.value.text}</span
+        >
+      </div>
+    `},shadow:{delegatesFocus:!0},styles:[e.sizeVariantMixin(l.FIELD_SIZE_PRESET),...r.formFieldMixins,t.disabledLoadingMixin(),n.forcedColorsFocusMixin(`.input`),d.default],tag:`bit-combobox`});exports.COMBOBOX_OPTION_TAG=p,exports.COMBOBOX_TAG=m;
+//# sourceMappingURL=combobox.cjs.map