@vielzeug/refine 1.3.1 → 1.4.1

package/dist/headless/auto-resize.cjs

@@ -0,0 +1,2 @@
+var e=(e={})=>{let t=null,n=()=>{!t||e.enabled?.value===!1||(t.style.height=`auto`,t.style.height=`${t.scrollHeight}px`)};return{recompute:n,wire:e=>(t=e,e.addEventListener(`input`,n),requestAnimationFrame(n),()=>{e.removeEventListener(`input`,n),t===e&&(t=null)})}};exports.createAutoResize=e;
+//# sourceMappingURL=auto-resize.cjs.map

package/dist/headless/auto-resize.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-resize.cjs","names":[],"sources":["../../src/headless/auto-resize.ts"],"sourcesContent":["import type { Readable } from '@vielzeug/ripple';\n\nexport type AutoResizeOptions = {\n  /** Gates growth; omit for an always-on composer field, or pass a signal for a toggleable `auto-resize` attribute. */\n  enabled?: Readable<boolean | undefined>;\n};\n\nexport type AutoResizeControl = {\n  /** Recomputes height from the wired element's current content. No-ops when `enabled` is false or nothing is wired. */\n  recompute: () => void;\n  /** Wire onto the raw `<textarea>` when it mounts. Returns a detach function to call on unmount. */\n  wire: (el: HTMLTextAreaElement) => () => void;\n};\n\n/**\n * Grows a `<textarea>`'s height to fit its content, shared by every component that offers\n * auto-resize (`ore-textarea`, `ore-message-composer`) instead of each reimplementing it.\n *\n * Owns only height — manual-resize cursor/direction is a per-component styling concern, not\n * shared behavior, so it stays local to whichever component renders a resize handle.\n *\n * @example\n * ```ts\n * const autoResize = createAutoResize({ enabled: props['auto-resize'] });\n *\n * onElement(textareaRef, (el) => autoResize.wire(el));\n * // after a programmatic value change that doesn't fire a native `input` event:\n * autoResize.recompute();\n * ```\n */\nexport const createAutoResize = (options: AutoResizeOptions = {}): AutoResizeControl => {\n  let wiredEl: HTMLTextAreaElement | null = null;\n\n  const recompute = (): void => {\n    if (!wiredEl || options.enabled?.value === false) return;\n\n    wiredEl.style.height = 'auto';\n    wiredEl.style.height = `${wiredEl.scrollHeight}px`;\n  };\n\n  const wire = (el: HTMLTextAreaElement): (() => void) => {\n    wiredEl = el;\n    el.addEventListener('input', recompute);\n\n    // Deferred a frame: right after mount, the browser hasn't necessarily finished laying out\n    // the textarea yet, so a synchronous `scrollHeight` read here can be stale — often reading\n    // as 0 and collapsing the field until the next real `input` event happens to correct it.\n    // `ore-textarea` has always worked around this locally with its own extra `requestAnimationFrame`\n    // call; folding the deferral into `wire()` itself means every consumer gets it for free.\n    requestAnimationFrame(recompute);\n\n    return () => {\n      el.removeEventListener('input', recompute);\n\n      if (wiredEl === el) wiredEl = null;\n    };\n  };\n\n  return { recompute, wire };\n};\n"],"mappings":"AA8BA,IAAa,GAAoB,EAA6B,CAAC,IAAyB,CACtF,IAAI,EAAsC,KAEpC,MAAwB,CACxB,CAAC,GAAW,EAAQ,SAAS,QAAU,KAE3C,EAAQ,MAAM,OAAS,OACvB,EAAQ,MAAM,OAAS,GAAG,EAAQ,aAAa,IACjD,EAoBA,MAAO,CAAE,YAAW,KAlBN,IACZ,EAAU,EACV,EAAG,iBAAiB,QAAS,CAAS,EAOtC,sBAAsB,CAAS,MAElB,CACX,EAAG,oBAAoB,QAAS,CAAS,EAErC,IAAY,IAAI,EAAU,KAChC,EAGuB,CAC3B"}

package/dist/headless/auto-resize.d.ts

@@ -0,0 +1,29 @@
+import type { Readable } from '@vielzeug/ripple';
+export type AutoResizeOptions = {
+    /** Gates growth; omit for an always-on composer field, or pass a signal for a toggleable `auto-resize` attribute. */
+    enabled?: Readable<boolean | undefined>;
+};
+export type AutoResizeControl = {
+    /** Recomputes height from the wired element's current content. No-ops when `enabled` is false or nothing is wired. */
+    recompute: () => void;
+    /** Wire onto the raw `<textarea>` when it mounts. Returns a detach function to call on unmount. */
+    wire: (el: HTMLTextAreaElement) => () => void;
+};
+/**
+ * Grows a `<textarea>`'s height to fit its content, shared by every component that offers
+ * auto-resize (`ore-textarea`, `ore-message-composer`) instead of each reimplementing it.
+ *
+ * Owns only height — manual-resize cursor/direction is a per-component styling concern, not
+ * shared behavior, so it stays local to whichever component renders a resize handle.
+ *
+ * @example
+ * ```ts
+ * const autoResize = createAutoResize({ enabled: props['auto-resize'] });
+ *
+ * onElement(textareaRef, (el) => autoResize.wire(el));
+ * // after a programmatic value change that doesn't fire a native `input` event:
+ * autoResize.recompute();
+ * ```
+ */
+export declare const createAutoResize: (options?: AutoResizeOptions) => AutoResizeControl;
+//# sourceMappingURL=auto-resize.d.ts.map

package/dist/headless/auto-resize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-resize.d.ts","sourceRoot":"","sources":["../../src/headless/auto-resize.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,qHAAqH;IACrH,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;CACzC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,sHAAsH;IACtH,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,mGAAmG;IACnG,IAAI,EAAE,CAAC,EAAE,EAAE,mBAAmB,KAAK,MAAM,IAAI,CAAC;CAC/C,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,gBAAgB,GAAI,UAAS,iBAAsB,KAAG,iBA6BlE,CAAC"}

package/dist/headless/auto-resize.js

@@ -0,0 +1,16 @@
+//#region src/headless/auto-resize.ts
+var e = (e = {}) => {
+	let t = null, n = () => {
+		!t || e.enabled?.value === !1 || (t.style.height = "auto", t.style.height = `${t.scrollHeight}px`);
+	};
+	return {
+		recompute: n,
+		wire: (e) => (t = e, e.addEventListener("input", n), requestAnimationFrame(n), () => {
+			e.removeEventListener("input", n), t === e && (t = null);
+		})
+	};
+};
+//#endregion
+export { e as createAutoResize };
+
+//# sourceMappingURL=auto-resize.js.map

package/dist/headless/auto-resize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-resize.js","names":[],"sources":["../../src/headless/auto-resize.ts"],"sourcesContent":["import type { Readable } from '@vielzeug/ripple';\n\nexport type AutoResizeOptions = {\n  /** Gates growth; omit for an always-on composer field, or pass a signal for a toggleable `auto-resize` attribute. */\n  enabled?: Readable<boolean | undefined>;\n};\n\nexport type AutoResizeControl = {\n  /** Recomputes height from the wired element's current content. No-ops when `enabled` is false or nothing is wired. */\n  recompute: () => void;\n  /** Wire onto the raw `<textarea>` when it mounts. Returns a detach function to call on unmount. */\n  wire: (el: HTMLTextAreaElement) => () => void;\n};\n\n/**\n * Grows a `<textarea>`'s height to fit its content, shared by every component that offers\n * auto-resize (`ore-textarea`, `ore-message-composer`) instead of each reimplementing it.\n *\n * Owns only height — manual-resize cursor/direction is a per-component styling concern, not\n * shared behavior, so it stays local to whichever component renders a resize handle.\n *\n * @example\n * ```ts\n * const autoResize = createAutoResize({ enabled: props['auto-resize'] });\n *\n * onElement(textareaRef, (el) => autoResize.wire(el));\n * // after a programmatic value change that doesn't fire a native `input` event:\n * autoResize.recompute();\n * ```\n */\nexport const createAutoResize = (options: AutoResizeOptions = {}): AutoResizeControl => {\n  let wiredEl: HTMLTextAreaElement | null = null;\n\n  const recompute = (): void => {\n    if (!wiredEl || options.enabled?.value === false) return;\n\n    wiredEl.style.height = 'auto';\n    wiredEl.style.height = `${wiredEl.scrollHeight}px`;\n  };\n\n  const wire = (el: HTMLTextAreaElement): (() => void) => {\n    wiredEl = el;\n    el.addEventListener('input', recompute);\n\n    // Deferred a frame: right after mount, the browser hasn't necessarily finished laying out\n    // the textarea yet, so a synchronous `scrollHeight` read here can be stale — often reading\n    // as 0 and collapsing the field until the next real `input` event happens to correct it.\n    // `ore-textarea` has always worked around this locally with its own extra `requestAnimationFrame`\n    // call; folding the deferral into `wire()` itself means every consumer gets it for free.\n    requestAnimationFrame(recompute);\n\n    return () => {\n      el.removeEventListener('input', recompute);\n\n      if (wiredEl === el) wiredEl = null;\n    };\n  };\n\n  return { recompute, wire };\n};\n"],"mappings":";AA8BA,IAAa,KAAoB,IAA6B,CAAC,MAAyB;CACtF,IAAI,IAAsC,MAEpC,UAAwB;EACxB,CAAC,KAAW,EAAQ,SAAS,UAAU,OAE3C,EAAQ,MAAM,SAAS,QACvB,EAAQ,MAAM,SAAS,GAAG,EAAQ,aAAa;CACjD;CAoBA,OAAO;EAAE;EAAW,OAlBN,OACZ,IAAU,GACV,EAAG,iBAAiB,SAAS,CAAS,GAOtC,sBAAsB,CAAS,SAElB;GAGX,AAFA,EAAG,oBAAoB,SAAS,CAAS,GAErC,MAAY,MAAI,IAAU;EAChC;CAGuB;AAC3B"}

package/dist/headless/checkable.cjs

@@ -1,2 +1,2 @@
-const e=require("./field-base.cjs"),t=require("./signals.cjs"),n=require("./keyboard.cjs");let r=require("@vielzeug/ripple");var i=i=>{let a=t.syncedSignal(i.checked,i.signal,Boolean),o=i.indeterminate?t.syncedSignal(i.indeterminate,i.signal,Boolean):(0,r.signal)(!1),s=(0,r.computed)(()=>o.value?null:a.value?i.value.value??``:null),c=e.createField(i),l=e=>({checked:a.value,originalEvent:e,value:i.value.value??``}),u=e=>{if(!c.disabled.value){if(i.group){o.value=!1,i.group.toggle(i.value.value??``,e),i.onToggle?.(l(e));return}i.clearIndeterminateFirst&&o.value||(a.value=!a.value),o.value=!1,i.onToggle?.(l(e))}},d=n.createInteraction({disabled:c.disabled,onPress:e=>u(e)});return{...c,checkableFormValue:s,checked:a,handleClick:d.handleClick,handleKeydown:d.handleKeydown,indeterminate:o,toggle:u}};exports.createCheckable=i;
+const e=require("./field-base.cjs"),t=require("./signals.cjs"),n=require("./keyboard.cjs");let r=require("@vielzeug/ripple");var i=i=>{let a=t.syncedSignal(i.checked,i.signal,Boolean),o=i.indeterminate?t.syncedSignal(i.indeterminate,i.signal,Boolean):(0,r.signal)(!1),s=a.value,c=o.value,l=!1,u=(0,r.computed)(()=>o.value?null:a.value?i.value.value??``:null),d=e.createField(i),f=(0,r.computed)(()=>i.required?.value&&(!a.value||o.value)?{valueMissing:!0}:null),p=(0,r.computed)(()=>f.value?i.requiredMessage?.value||`This field is required.`:``),m=()=>{a.value=l?s:!!i.checked.value,o.value=l?c:!!i.indeterminate?.value,l=!1,d.triggerValidation(`change`)},h=e=>({checked:a.value,originalEvent:e,value:i.value.value??``}),g=e=>{if(!d.disabled.value){if(l=!0,i.group){o.value=!1,i.group.toggle(i.value.value??``,e),i.onToggle?.(h(e));return}i.clearIndeterminateFirst&&o.value||(a.value=!a.value),o.value=!1,i.onToggle?.(h(e))}},_=n.createInteraction({disabled:d.disabled,onPress:e=>g(e)});return{...d,checkableFormValue:u,checked:a,handleClick:_.handleClick,handleKeydown:_.handleKeydown,indeterminate:o,reset:m,toggle:g,validationMessage:p,validity:f}};exports.createCheckable=i;
 //# sourceMappingURL=checkable.cjs.map

package/dist/headless/checkable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkable.cjs","names":[],"sources":["../../src/headless/checkable.ts"],"sourcesContent":["import { computed, type Readable, type Signal, signal } from '@vielzeug/ripple';\n\nimport { createField, type ControlValidationMode, type FieldHandle } from './field-base';\nimport { createInteraction } from './keyboard';\nimport { syncedSignal } from './signals';\n\n// ── Checkable control ─────────────────────────────────────────────────────────\n\nexport type CheckableChangePayload = {\n  checked: boolean;\n  originalEvent?: Event;\n  value: string;\n};\n\nexport type CheckableOptions = {\n  checked: Readable<boolean | undefined>;\n  clearIndeterminateFirst?: boolean;\n  disabled?: Readable<boolean | undefined>;\n  error?: Readable<string | undefined>;\n  /**\n   * Returns the underlying form field object used for validation triggering.\n   * Called lazily — safe to return `null` before the first render.\n   */\n  getFormField?: () => { reportValidity(): void } | null;\n  group?: { toggle: (value: string, originalEvent?: Event) => void };\n  helper?: Readable<string | undefined>;\n  indeterminate?: Readable<boolean | undefined>;\n  onToggle?: (payload: CheckableChangePayload) => void;\n  prefix?: string;\n  /** `AbortSignal` from the component lifecycle. All reactive subscriptions are torn down on abort. */\n  signal: AbortSignal;\n  validateOn?: Readable<ControlValidationMode>;\n  value: Readable<string | undefined>;\n};\n\nexport type CheckableHandle = FieldHandle & {\n  /** The form submission value: null when unchecked/indeterminate, the value string when checked. */\n  checkableFormValue: Readable<string | null>;\n  checked: Signal<boolean>;\n  handleClick: (event: MouseEvent) => boolean;\n  handleKeydown: (event: KeyboardEvent) => boolean;\n  indeterminate: Signal<boolean>;\n  toggle: (event: Event) => void;\n};\n\nexport const createCheckable = (options: CheckableOptions): CheckableHandle => {\n  const checked = syncedSignal(options.checked, options.signal, Boolean);\n  const indeterminate = options.indeterminate\n    ? syncedSignal(options.indeterminate, options.signal, Boolean)\n    : signal(false);\n\n  const checkableFormValue = computed<string | null>(() =>\n    indeterminate.value ? null : checked.value ? (options.value.value ?? '') : null,\n  );\n\n  const field = createField(options);\n\n  const createPayload = (event: Event): CheckableChangePayload => ({\n    checked: checked.value,\n    originalEvent: event,\n    value: options.value.value ?? '',\n  });\n\n  const toggle = (event: Event): void => {\n    if (field.disabled.value) return;\n\n    if (options.group) {\n      indeterminate.value = false;\n      options.group.toggle(options.value.value ?? '', event);\n      options.onToggle?.(createPayload(event));\n\n      return;\n    }\n\n    if (options.clearIndeterminateFirst && indeterminate.value) {\n      indeterminate.value = false;\n    } else {\n      checked.value = !checked.value;\n      indeterminate.value = false;\n    }\n\n    options.onToggle?.(createPayload(event));\n  };\n\n  const interaction = createInteraction({\n    disabled: field.disabled,\n    onPress: (event) => toggle(event),\n  });\n\n  return {\n    ...field,\n    checkableFormValue,\n    checked,\n    handleClick: interaction.handleClick,\n    handleKeydown: interaction.handleKeydown,\n    indeterminate,\n    toggle,\n  };\n};\n"],"mappings":"6HA6CA,IAAa,EAAmB,GAA+C,CAC7E,IAAM,EAAU,EAAA,aAAa,EAAQ,QAAS,EAAQ,OAAQ,OAAO,EAC/D,EAAgB,EAAQ,cAC1B,EAAA,aAAa,EAAQ,cAAe,EAAQ,OAAQ,OAAO,GAAA,EAAA,EAAA,OAAA,CACpD,EAAK,EAEV,GAAA,EAAA,EAAA,SAAA,KACJ,EAAc,MAAQ,KAAO,EAAQ,MAAS,EAAQ,MAAM,OAAS,GAAM,IAC7E,EAEM,EAAQ,EAAA,YAAY,CAAO,EAE3B,EAAiB,IAA0C,CAC/D,QAAS,EAAQ,MACjB,cAAe,EACf,MAAO,EAAQ,MAAM,OAAS,EAChC,GAEM,EAAU,GAAuB,CACjC,MAAM,SAAS,MAEnB,IAAI,EAAQ,MAAO,CACjB,EAAc,MAAQ,GACtB,EAAQ,MAAM,OAAO,EAAQ,MAAM,OAAS,GAAI,CAAK,EACrD,EAAQ,WAAW,EAAc,CAAK,CAAC,EAEvC,MACF,CAEI,EAAQ,yBAA2B,EAAc,QAGnD,EAAQ,MAAQ,CAAC,EAAQ,OAFzB,EAAc,MAAQ,GAMxB,EAAQ,WAAW,EAAc,CAAK,CAAC,CATvC,CAUF,EAEM,EAAc,EAAA,kBAAkB,CACpC,SAAU,EAAM,SAChB,QAAU,GAAU,EAAO,CAAK,CAClC,CAAC,EAED,MAAO,CACL,GAAG,EACH,qBACA,UACA,YAAa,EAAY,YACzB,cAAe,EAAY,cAC3B,gBACA,QACF,CACF"}
+{"version":3,"file":"checkable.cjs","names":[],"sources":["../../src/headless/checkable.ts"],"sourcesContent":["import { computed, type Readable, type Signal, signal } from '@vielzeug/ripple';\n\nimport { createField, type ControlValidationMode, type FieldHandle } from './field-base';\nimport { createInteraction } from './keyboard';\nimport { syncedSignal } from './signals';\n\n// ── Checkable control ─────────────────────────────────────────────────────────\n\nexport type CheckableChangePayload = {\n  checked: boolean;\n  originalEvent?: Event;\n  value: string;\n};\n\nexport type CheckableOptions = {\n  checked: Readable<boolean | undefined>;\n  clearIndeterminateFirst?: boolean;\n  disabled?: Readable<boolean | undefined>;\n  error?: Readable<string | undefined>;\n  group?: { toggle: (value: string, originalEvent?: Event) => void };\n  helper?: Readable<string | undefined>;\n  indeterminate?: Readable<boolean | undefined>;\n  onToggle?: (payload: CheckableChangePayload) => void;\n  prefix?: string;\n  /** Marks an unchecked control invalid — feeds `validity`/`validationMessage` (see below). */\n  required?: Readable<boolean | undefined>;\n  /** Message for the unchecked+required case. Defaults to `'This field is required.'`. */\n  requiredMessage?: Readable<string | undefined>;\n  /** `AbortSignal` from the component lifecycle. All reactive subscriptions are torn down on abort. */\n  signal: AbortSignal;\n  validateOn?: Readable<ControlValidationMode>;\n  value: Readable<string | undefined>;\n};\n\nexport type CheckableHandle = FieldHandle & {\n  /** The form submission value: null when unchecked/indeterminate, the value string when checked. */\n  checkableFormValue: Readable<string | null>;\n  checked: Signal<boolean>;\n  handleClick: (event: MouseEvent) => boolean;\n  handleKeydown: (event: KeyboardEvent) => boolean;\n  indeterminate: Signal<boolean>;\n  /**\n   * Restores `checked`/`indeterminate` to their native \"default\" value: whatever `checked`/\n   * `indeterminate` currently hold, if the user has never interacted with this control yet, or\n   * the value snapshotted at creation, if they have. Two states, not one, because this\n   * component reflects the interactive `checked` state back onto the host's `checked` attribute\n   * (for `:host([checked])` styling, since shadow-DOM custom elements have no native `:checked`\n   * pseudo-class to style against) — so `options.checked` itself changes on every click and\n   * can't double as \"the default to revert to\" post-interaction, the way an uncontrolled\n   * `<input>`'s `value` attribute can (see `createTextField`'s `reset()`, which has no\n   * \"post-interaction\" case to handle for exactly that reason). Wire into\n   * `useField({ onReset: checkable.reset })`.\n   */\n  reset: () => void;\n  toggle: (event: Event) => void;\n  /** Reactive validation message paired with `validity`. Empty string when valid. */\n  validationMessage: Readable<string>;\n  /**\n   * Reactive `ValidityStateFlags` — `{ valueMissing: true }` while `required` and unchecked\n   * (indeterminate counts as unchecked), `null` (valid) otherwise. Pass straight to\n   * `useField({ validity: checkable.validity })`.\n   */\n  validity: Readable<ValidityStateFlags | null>;\n};\n\nexport const createCheckable = (options: CheckableOptions): CheckableHandle => {\n  const checked = syncedSignal(options.checked, options.signal, Boolean);\n  const indeterminate = options.indeterminate\n    ? syncedSignal(options.indeterminate, options.signal, Boolean)\n    : signal(false);\n  const initialChecked = checked.value;\n  const initialIndeterminate = indeterminate.value;\n  // Set the moment the user first interacts — see `reset()`'s doc comment for why this\n  // matters: before that point, `options.checked` is still a reliable \"current default\" to\n  // resync from (e.g. an async-loaded value arriving after mount); after it, `options.checked`\n  // is contaminated by the click-driven attribute reflection and the frozen snapshot is the\n  // only value that still represents \"the default\" in the native sense.\n  let dirty = false;\n\n  const checkableFormValue = computed<string | null>(() =>\n    indeterminate.value ? null : checked.value ? (options.value.value ?? '') : null,\n  );\n\n  const field = createField(options);\n\n  const validity = computed<ValidityStateFlags | null>(() =>\n    options.required?.value && (!checked.value || indeterminate.value) ? { valueMissing: true } : null,\n  );\n  const validationMessage = computed(() =>\n    validity.value ? options.requiredMessage?.value || 'This field is required.' : '',\n  );\n\n  const reset = (): void => {\n    checked.value = dirty ? initialChecked : Boolean(options.checked.value);\n    indeterminate.value = dirty ? initialIndeterminate : Boolean(options.indeterminate?.value);\n    dirty = false;\n    field.triggerValidation('change');\n  };\n\n  const createPayload = (event: Event): CheckableChangePayload => ({\n    checked: checked.value,\n    originalEvent: event,\n    value: options.value.value ?? '',\n  });\n\n  const toggle = (event: Event): void => {\n    if (field.disabled.value) return;\n\n    dirty = true;\n\n    if (options.group) {\n      indeterminate.value = false;\n      options.group.toggle(options.value.value ?? '', event);\n      options.onToggle?.(createPayload(event));\n\n      return;\n    }\n\n    if (options.clearIndeterminateFirst && indeterminate.value) {\n      indeterminate.value = false;\n    } else {\n      checked.value = !checked.value;\n      indeterminate.value = false;\n    }\n\n    options.onToggle?.(createPayload(event));\n  };\n\n  const interaction = createInteraction({\n    disabled: field.disabled,\n    onPress: (event) => toggle(event),\n  });\n\n  return {\n    ...field,\n    checkableFormValue,\n    checked,\n    handleClick: interaction.handleClick,\n    handleKeydown: interaction.handleKeydown,\n    indeterminate,\n    reset,\n    toggle,\n    validationMessage,\n    validity,\n  };\n};\n"],"mappings":"6HAiEA,IAAa,EAAmB,GAA+C,CAC7E,IAAM,EAAU,EAAA,aAAa,EAAQ,QAAS,EAAQ,OAAQ,OAAO,EAC/D,EAAgB,EAAQ,cAC1B,EAAA,aAAa,EAAQ,cAAe,EAAQ,OAAQ,OAAO,GAAA,EAAA,EAAA,OAAA,CACpD,EAAK,EACV,EAAiB,EAAQ,MACzB,EAAuB,EAAc,MAMvC,EAAQ,GAEN,GAAA,EAAA,EAAA,SAAA,KACJ,EAAc,MAAQ,KAAO,EAAQ,MAAS,EAAQ,MAAM,OAAS,GAAM,IAC7E,EAEM,EAAQ,EAAA,YAAY,CAAO,EAE3B,GAAA,EAAA,EAAA,SAAA,KACJ,EAAQ,UAAU,QAAU,CAAC,EAAQ,OAAS,EAAc,OAAS,CAAE,aAAc,EAAK,EAAI,IAChG,EACM,GAAA,EAAA,EAAA,SAAA,KACJ,EAAS,MAAQ,EAAQ,iBAAiB,OAAS,0BAA4B,EACjF,EAEM,MAAoB,CACxB,EAAQ,MAAQ,EAAQ,EAAiB,EAAQ,EAAQ,QAAQ,MACjE,EAAc,MAAQ,EAAQ,EAAuB,EAAQ,EAAQ,eAAe,MACpF,EAAQ,GACR,EAAM,kBAAkB,QAAQ,CAClC,EAEM,EAAiB,IAA0C,CAC/D,QAAS,EAAQ,MACjB,cAAe,EACf,MAAO,EAAQ,MAAM,OAAS,EAChC,GAEM,EAAU,GAAuB,CACjC,MAAM,SAAS,MAInB,IAFA,EAAQ,GAEJ,EAAQ,MAAO,CACjB,EAAc,MAAQ,GACtB,EAAQ,MAAM,OAAO,EAAQ,MAAM,OAAS,GAAI,CAAK,EACrD,EAAQ,WAAW,EAAc,CAAK,CAAC,EAEvC,MACF,CAEI,EAAQ,yBAA2B,EAAc,QAGnD,EAAQ,MAAQ,CAAC,EAAQ,OAFzB,EAAc,MAAQ,GAMxB,EAAQ,WAAW,EAAc,CAAK,CAAC,CATvC,CAUF,EAEM,EAAc,EAAA,kBAAkB,CACpC,SAAU,EAAM,SAChB,QAAU,GAAU,EAAO,CAAK,CAClC,CAAC,EAED,MAAO,CACL,GAAG,EACH,qBACA,UACA,YAAa,EAAY,YACzB,cAAe,EAAY,cAC3B,gBACA,QACA,SACA,oBACA,UACF,CACF"}

package/dist/headless/checkable.d.ts

@@ -10,13 +10,6 @@ export type CheckableOptions = {
     clearIndeterminateFirst?: boolean;
     disabled?: Readable<boolean | undefined>;
     error?: Readable<string | undefined>;
-    /**
-     * Returns the underlying form field object used for validation triggering.
-     * Called lazily — safe to return `null` before the first render.
-     */
-    getFormField?: () => {
-        reportValidity(): void;
-    } | null;
     group?: {
         toggle: (value: string, originalEvent?: Event) => void;
     };
@@ -24,6 +17,10 @@ export type CheckableOptions = {
     indeterminate?: Readable<boolean | undefined>;
     onToggle?: (payload: CheckableChangePayload) => void;
     prefix?: string;
+    /** Marks an unchecked control invalid — feeds `validity`/`validationMessage` (see below). */
+    required?: Readable<boolean | undefined>;
+    /** Message for the unchecked+required case. Defaults to `'This field is required.'`. */
+    requiredMessage?: Readable<string | undefined>;
     /** `AbortSignal` from the component lifecycle. All reactive subscriptions are torn down on abort. */
     signal: AbortSignal;
     validateOn?: Readable<ControlValidationMode>;
@@ -36,7 +33,28 @@ export type CheckableHandle = FieldHandle & {
     handleClick: (event: MouseEvent) => boolean;
     handleKeydown: (event: KeyboardEvent) => boolean;
     indeterminate: Signal<boolean>;
+    /**
+     * Restores `checked`/`indeterminate` to their native "default" value: whatever `checked`/
+     * `indeterminate` currently hold, if the user has never interacted with this control yet, or
+     * the value snapshotted at creation, if they have. Two states, not one, because this
+     * component reflects the interactive `checked` state back onto the host's `checked` attribute
+     * (for `:host([checked])` styling, since shadow-DOM custom elements have no native `:checked`
+     * pseudo-class to style against) — so `options.checked` itself changes on every click and
+     * can't double as "the default to revert to" post-interaction, the way an uncontrolled
+     * `<input>`'s `value` attribute can (see `createTextField`'s `reset()`, which has no
+     * "post-interaction" case to handle for exactly that reason). Wire into
+     * `useField({ onReset: checkable.reset })`.
+     */
+    reset: () => void;
     toggle: (event: Event) => void;
+    /** Reactive validation message paired with `validity`. Empty string when valid. */
+    validationMessage: Readable<string>;
+    /**
+     * Reactive `ValidityStateFlags` — `{ valueMissing: true }` while `required` and unchecked
+     * (indeterminate counts as unchecked), `null` (valid) otherwise. Pass straight to
+     * `useField({ validity: checkable.validity })`.
+     */
+    validity: Readable<ValidityStateFlags | null>;
 };
 export declare const createCheckable: (options: CheckableOptions) => CheckableHandle;
 //# sourceMappingURL=checkable.d.ts.map

package/dist/headless/checkable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkable.d.ts","sourceRoot":"","sources":["../../src/headless/checkable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,QAAQ,EAAE,KAAK,MAAM,EAAU,MAAM,kBAAkB,CAAC;AAEhF,OAAO,EAAe,KAAK,qBAAqB,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAMzF,MAAM,MAAM,sBAAsB,GAAG;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACvC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACrC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM;QAAE,cAAc,IAAI,IAAI,CAAA;KAAE,GAAG,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE;QAAE,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,KAAK,KAAK,IAAI,CAAA;KAAE,CAAC;IACnE,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACtC,aAAa,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qGAAqG;IACrG,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,CAAC,EAAE,QAAQ,CAAC,qBAAqB,CAAC,CAAC;IAC7C,KAAK,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C,mGAAmG;IACnG,kBAAkB,EAAE,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC5C,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACzB,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,OAAO,CAAC;IAC5C,aAAa,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,OAAO,CAAC;IACjD,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,SAAS,gBAAgB,KAAG,eAqD3D,CAAC"}
+{"version":3,"file":"checkable.d.ts","sourceRoot":"","sources":["../../src/headless/checkable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,QAAQ,EAAE,KAAK,MAAM,EAAU,MAAM,kBAAkB,CAAC;AAEhF,OAAO,EAAe,KAAK,qBAAqB,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAMzF,MAAM,MAAM,sBAAsB,GAAG;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACvC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE;QAAE,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,KAAK,KAAK,IAAI,CAAA;KAAE,CAAC;IACnE,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACtC,aAAa,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACzC,wFAAwF;IACxF,eAAe,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC/C,qGAAqG;IACrG,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,CAAC,EAAE,QAAQ,CAAC,qBAAqB,CAAC,CAAC;IAC7C,KAAK,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C,mGAAmG;IACnG,kBAAkB,EAAE,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC5C,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACzB,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,OAAO,CAAC;IAC5C,aAAa,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,OAAO,CAAC;IACjD,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAC/B;;;;;;;;;;;OAWG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC/B,mFAAmF;IACnF,iBAAiB,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IACpC;;;;OAIG;IACH,QAAQ,EAAE,QAAQ,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC;CAC/C,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,SAAS,gBAAgB,KAAG,eAgF3D,CAAC"}

package/dist/headless/checkable.js

@@ -4,30 +4,35 @@ import { createInteraction as n } from "./keyboard.js";
 import { computed as r, signal as i } from "@vielzeug/ripple";
 //#region src/headless/checkable.ts
 var a = (a) => {
-	let o = t(a.checked, a.signal, Boolean), s = a.indeterminate ? t(a.indeterminate, a.signal, Boolean) : i(!1), c = r(() => s.value ? null : o.value ? a.value.value ?? "" : null), l = e(a), u = (e) => ({
+	let o = t(a.checked, a.signal, Boolean), s = a.indeterminate ? t(a.indeterminate, a.signal, Boolean) : i(!1), c = o.value, l = s.value, u = !1, d = r(() => s.value ? null : o.value ? a.value.value ?? "" : null), f = e(a), p = r(() => a.required?.value && (!o.value || s.value) ? { valueMissing: !0 } : null), m = r(() => p.value ? a.requiredMessage?.value || "This field is required." : ""), h = () => {
+		o.value = u ? c : !!a.checked.value, s.value = u ? l : !!a.indeterminate?.value, u = !1, f.triggerValidation("change");
+	}, g = (e) => ({
 		checked: o.value,
 		originalEvent: e,
 		value: a.value.value ?? ""
-	}), d = (e) => {
-		if (!l.disabled.value) {
-			if (a.group) {
-				s.value = !1, a.group.toggle(a.value.value ?? "", e), a.onToggle?.(u(e));
+	}), _ = (e) => {
+		if (!f.disabled.value) {
+			if (u = !0, a.group) {
+				s.value = !1, a.group.toggle(a.value.value ?? "", e), a.onToggle?.(g(e));
 				return;
 			}
-			a.clearIndeterminateFirst && s.value || (o.value = !o.value), s.value = !1, a.onToggle?.(u(e));
+			a.clearIndeterminateFirst && s.value || (o.value = !o.value), s.value = !1, a.onToggle?.(g(e));
 		}
-	}, f = n({
-		disabled: l.disabled,
-		onPress: (e) => d(e)
+	}, v = n({
+		disabled: f.disabled,
+		onPress: (e) => _(e)
 	});
 	return {
-		...l,
-		checkableFormValue: c,
+		...f,
+		checkableFormValue: d,
 		checked: o,
-		handleClick: f.handleClick,
-		handleKeydown: f.handleKeydown,
+		handleClick: v.handleClick,
+		handleKeydown: v.handleKeydown,
 		indeterminate: s,
-		toggle: d
+		reset: h,
+		toggle: _,
+		validationMessage: m,
+		validity: p
 	};
 };
 //#endregion

package/dist/headless/checkable.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkable.js","names":[],"sources":["../../src/headless/checkable.ts"],"sourcesContent":["import { computed, type Readable, type Signal, signal } from '@vielzeug/ripple';\n\nimport { createField, type ControlValidationMode, type FieldHandle } from './field-base';\nimport { createInteraction } from './keyboard';\nimport { syncedSignal } from './signals';\n\n// ── Checkable control ─────────────────────────────────────────────────────────\n\nexport type CheckableChangePayload = {\n  checked: boolean;\n  originalEvent?: Event;\n  value: string;\n};\n\nexport type CheckableOptions = {\n  checked: Readable<boolean | undefined>;\n  clearIndeterminateFirst?: boolean;\n  disabled?: Readable<boolean | undefined>;\n  error?: Readable<string | undefined>;\n  /**\n   * Returns the underlying form field object used for validation triggering.\n   * Called lazily — safe to return `null` before the first render.\n   */\n  getFormField?: () => { reportValidity(): void } | null;\n  group?: { toggle: (value: string, originalEvent?: Event) => void };\n  helper?: Readable<string | undefined>;\n  indeterminate?: Readable<boolean | undefined>;\n  onToggle?: (payload: CheckableChangePayload) => void;\n  prefix?: string;\n  /** `AbortSignal` from the component lifecycle. All reactive subscriptions are torn down on abort. */\n  signal: AbortSignal;\n  validateOn?: Readable<ControlValidationMode>;\n  value: Readable<string | undefined>;\n};\n\nexport type CheckableHandle = FieldHandle & {\n  /** The form submission value: null when unchecked/indeterminate, the value string when checked. */\n  checkableFormValue: Readable<string | null>;\n  checked: Signal<boolean>;\n  handleClick: (event: MouseEvent) => boolean;\n  handleKeydown: (event: KeyboardEvent) => boolean;\n  indeterminate: Signal<boolean>;\n  toggle: (event: Event) => void;\n};\n\nexport const createCheckable = (options: CheckableOptions): CheckableHandle => {\n  const checked = syncedSignal(options.checked, options.signal, Boolean);\n  const indeterminate = options.indeterminate\n    ? syncedSignal(options.indeterminate, options.signal, Boolean)\n    : signal(false);\n\n  const checkableFormValue = computed<string | null>(() =>\n    indeterminate.value ? null : checked.value ? (options.value.value ?? '') : null,\n  );\n\n  const field = createField(options);\n\n  const createPayload = (event: Event): CheckableChangePayload => ({\n    checked: checked.value,\n    originalEvent: event,\n    value: options.value.value ?? '',\n  });\n\n  const toggle = (event: Event): void => {\n    if (field.disabled.value) return;\n\n    if (options.group) {\n      indeterminate.value = false;\n      options.group.toggle(options.value.value ?? '', event);\n      options.onToggle?.(createPayload(event));\n\n      return;\n    }\n\n    if (options.clearIndeterminateFirst && indeterminate.value) {\n      indeterminate.value = false;\n    } else {\n      checked.value = !checked.value;\n      indeterminate.value = false;\n    }\n\n    options.onToggle?.(createPayload(event));\n  };\n\n  const interaction = createInteraction({\n    disabled: field.disabled,\n    onPress: (event) => toggle(event),\n  });\n\n  return {\n    ...field,\n    checkableFormValue,\n    checked,\n    handleClick: interaction.handleClick,\n    handleKeydown: interaction.handleKeydown,\n    indeterminate,\n    toggle,\n  };\n};\n"],"mappings":";;;;;AA6CA,IAAa,KAAmB,MAA+C;CAC7E,IAAM,IAAU,EAAa,EAAQ,SAAS,EAAQ,QAAQ,OAAO,GAC/D,IAAgB,EAAQ,gBAC1B,EAAa,EAAQ,eAAe,EAAQ,QAAQ,OAAO,IAC3D,EAAO,EAAK,GAEV,IAAqB,QACzB,EAAc,QAAQ,OAAO,EAAQ,QAAS,EAAQ,MAAM,SAAS,KAAM,IAC7E,GAEM,IAAQ,EAAY,CAAO,GAE3B,KAAiB,OAA0C;EAC/D,SAAS,EAAQ;EACjB,eAAe;EACf,OAAO,EAAQ,MAAM,SAAS;CAChC,IAEM,KAAU,MAAuB;EACjC,OAAM,SAAS,OAEnB;OAAI,EAAQ,OAAO;IAGjB,AAFA,EAAc,QAAQ,IACtB,EAAQ,MAAM,OAAO,EAAQ,MAAM,SAAS,IAAI,CAAK,GACrD,EAAQ,WAAW,EAAc,CAAK,CAAC;IAEvC;GACF;GASA,AAPI,EAAQ,2BAA2B,EAAc,UAGnD,EAAQ,QAAQ,CAAC,EAAQ,QAFzB,EAAc,QAAQ,IAMxB,EAAQ,WAAW,EAAc,CAAK,CAAC;EATvC;CAUF,GAEM,IAAc,EAAkB;EACpC,UAAU,EAAM;EAChB,UAAU,MAAU,EAAO,CAAK;CAClC,CAAC;CAED,OAAO;EACL,GAAG;EACH;EACA;EACA,aAAa,EAAY;EACzB,eAAe,EAAY;EAC3B;EACA;CACF;AACF"}
+{"version":3,"file":"checkable.js","names":[],"sources":["../../src/headless/checkable.ts"],"sourcesContent":["import { computed, type Readable, type Signal, signal } from '@vielzeug/ripple';\n\nimport { createField, type ControlValidationMode, type FieldHandle } from './field-base';\nimport { createInteraction } from './keyboard';\nimport { syncedSignal } from './signals';\n\n// ── Checkable control ─────────────────────────────────────────────────────────\n\nexport type CheckableChangePayload = {\n  checked: boolean;\n  originalEvent?: Event;\n  value: string;\n};\n\nexport type CheckableOptions = {\n  checked: Readable<boolean | undefined>;\n  clearIndeterminateFirst?: boolean;\n  disabled?: Readable<boolean | undefined>;\n  error?: Readable<string | undefined>;\n  group?: { toggle: (value: string, originalEvent?: Event) => void };\n  helper?: Readable<string | undefined>;\n  indeterminate?: Readable<boolean | undefined>;\n  onToggle?: (payload: CheckableChangePayload) => void;\n  prefix?: string;\n  /** Marks an unchecked control invalid — feeds `validity`/`validationMessage` (see below). */\n  required?: Readable<boolean | undefined>;\n  /** Message for the unchecked+required case. Defaults to `'This field is required.'`. */\n  requiredMessage?: Readable<string | undefined>;\n  /** `AbortSignal` from the component lifecycle. All reactive subscriptions are torn down on abort. */\n  signal: AbortSignal;\n  validateOn?: Readable<ControlValidationMode>;\n  value: Readable<string | undefined>;\n};\n\nexport type CheckableHandle = FieldHandle & {\n  /** The form submission value: null when unchecked/indeterminate, the value string when checked. */\n  checkableFormValue: Readable<string | null>;\n  checked: Signal<boolean>;\n  handleClick: (event: MouseEvent) => boolean;\n  handleKeydown: (event: KeyboardEvent) => boolean;\n  indeterminate: Signal<boolean>;\n  /**\n   * Restores `checked`/`indeterminate` to their native \"default\" value: whatever `checked`/\n   * `indeterminate` currently hold, if the user has never interacted with this control yet, or\n   * the value snapshotted at creation, if they have. Two states, not one, because this\n   * component reflects the interactive `checked` state back onto the host's `checked` attribute\n   * (for `:host([checked])` styling, since shadow-DOM custom elements have no native `:checked`\n   * pseudo-class to style against) — so `options.checked` itself changes on every click and\n   * can't double as \"the default to revert to\" post-interaction, the way an uncontrolled\n   * `<input>`'s `value` attribute can (see `createTextField`'s `reset()`, which has no\n   * \"post-interaction\" case to handle for exactly that reason). Wire into\n   * `useField({ onReset: checkable.reset })`.\n   */\n  reset: () => void;\n  toggle: (event: Event) => void;\n  /** Reactive validation message paired with `validity`. Empty string when valid. */\n  validationMessage: Readable<string>;\n  /**\n   * Reactive `ValidityStateFlags` — `{ valueMissing: true }` while `required` and unchecked\n   * (indeterminate counts as unchecked), `null` (valid) otherwise. Pass straight to\n   * `useField({ validity: checkable.validity })`.\n   */\n  validity: Readable<ValidityStateFlags | null>;\n};\n\nexport const createCheckable = (options: CheckableOptions): CheckableHandle => {\n  const checked = syncedSignal(options.checked, options.signal, Boolean);\n  const indeterminate = options.indeterminate\n    ? syncedSignal(options.indeterminate, options.signal, Boolean)\n    : signal(false);\n  const initialChecked = checked.value;\n  const initialIndeterminate = indeterminate.value;\n  // Set the moment the user first interacts — see `reset()`'s doc comment for why this\n  // matters: before that point, `options.checked` is still a reliable \"current default\" to\n  // resync from (e.g. an async-loaded value arriving after mount); after it, `options.checked`\n  // is contaminated by the click-driven attribute reflection and the frozen snapshot is the\n  // only value that still represents \"the default\" in the native sense.\n  let dirty = false;\n\n  const checkableFormValue = computed<string | null>(() =>\n    indeterminate.value ? null : checked.value ? (options.value.value ?? '') : null,\n  );\n\n  const field = createField(options);\n\n  const validity = computed<ValidityStateFlags | null>(() =>\n    options.required?.value && (!checked.value || indeterminate.value) ? { valueMissing: true } : null,\n  );\n  const validationMessage = computed(() =>\n    validity.value ? options.requiredMessage?.value || 'This field is required.' : '',\n  );\n\n  const reset = (): void => {\n    checked.value = dirty ? initialChecked : Boolean(options.checked.value);\n    indeterminate.value = dirty ? initialIndeterminate : Boolean(options.indeterminate?.value);\n    dirty = false;\n    field.triggerValidation('change');\n  };\n\n  const createPayload = (event: Event): CheckableChangePayload => ({\n    checked: checked.value,\n    originalEvent: event,\n    value: options.value.value ?? '',\n  });\n\n  const toggle = (event: Event): void => {\n    if (field.disabled.value) return;\n\n    dirty = true;\n\n    if (options.group) {\n      indeterminate.value = false;\n      options.group.toggle(options.value.value ?? '', event);\n      options.onToggle?.(createPayload(event));\n\n      return;\n    }\n\n    if (options.clearIndeterminateFirst && indeterminate.value) {\n      indeterminate.value = false;\n    } else {\n      checked.value = !checked.value;\n      indeterminate.value = false;\n    }\n\n    options.onToggle?.(createPayload(event));\n  };\n\n  const interaction = createInteraction({\n    disabled: field.disabled,\n    onPress: (event) => toggle(event),\n  });\n\n  return {\n    ...field,\n    checkableFormValue,\n    checked,\n    handleClick: interaction.handleClick,\n    handleKeydown: interaction.handleKeydown,\n    indeterminate,\n    reset,\n    toggle,\n    validationMessage,\n    validity,\n  };\n};\n"],"mappings":";;;;;AAiEA,IAAa,KAAmB,MAA+C;CAC7E,IAAM,IAAU,EAAa,EAAQ,SAAS,EAAQ,QAAQ,OAAO,GAC/D,IAAgB,EAAQ,gBAC1B,EAAa,EAAQ,eAAe,EAAQ,QAAQ,OAAO,IAC3D,EAAO,EAAK,GACV,IAAiB,EAAQ,OACzB,IAAuB,EAAc,OAMvC,IAAQ,IAEN,IAAqB,QACzB,EAAc,QAAQ,OAAO,EAAQ,QAAS,EAAQ,MAAM,SAAS,KAAM,IAC7E,GAEM,IAAQ,EAAY,CAAO,GAE3B,IAAW,QACf,EAAQ,UAAU,UAAU,CAAC,EAAQ,SAAS,EAAc,SAAS,EAAE,cAAc,GAAK,IAAI,IAChG,GACM,IAAoB,QACxB,EAAS,QAAQ,EAAQ,iBAAiB,SAAS,4BAA4B,EACjF,GAEM,UAAoB;EAIxB,AAHA,EAAQ,QAAQ,IAAQ,IAAiB,EAAQ,EAAQ,QAAQ,OACjE,EAAc,QAAQ,IAAQ,IAAuB,EAAQ,EAAQ,eAAe,OACpF,IAAQ,IACR,EAAM,kBAAkB,QAAQ;CAClC,GAEM,KAAiB,OAA0C;EAC/D,SAAS,EAAQ;EACjB,eAAe;EACf,OAAO,EAAQ,MAAM,SAAS;CAChC,IAEM,KAAU,MAAuB;EACjC,OAAM,SAAS,OAInB;OAFA,IAAQ,IAEJ,EAAQ,OAAO;IAGjB,AAFA,EAAc,QAAQ,IACtB,EAAQ,MAAM,OAAO,EAAQ,MAAM,SAAS,IAAI,CAAK,GACrD,EAAQ,WAAW,EAAc,CAAK,CAAC;IAEvC;GACF;GASA,AAPI,EAAQ,2BAA2B,EAAc,UAGnD,EAAQ,QAAQ,CAAC,EAAQ,QAFzB,EAAc,QAAQ,IAMxB,EAAQ,WAAW,EAAc,CAAK,CAAC;EATvC;CAUF,GAEM,IAAc,EAAkB;EACpC,UAAU,EAAM;EAChB,UAAU,MAAU,EAAO,CAAK;CAClC,CAAC;CAED,OAAO;EACL,GAAG;EACH;EACA;EACA,aAAa,EAAY;EACzB,eAAe,EAAY;EAC3B;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/headless/choice-field.cjs

@@ -1,2 +1,2 @@
-const e=require("./field-base.cjs");let t=require("@vielzeug/ripple");var n=e=>e?Array.isArray(e)?e.filter(Boolean):e.split(`,`).map(e=>e.trim()).filter(Boolean):[],r=r=>{let i=(0,t.signal)([]),a=(0,t.computed)(()=>!!r.multiple?.value),o=(0,t.computed)(()=>a.value?i.value.join(`,`):i.value[0]??``),s=e=>{let t=a.value?e:e.slice(0,1);return[...new Set(t.filter(Boolean))]},c=e=>{i.value=s(e)},l=()=>c([]),u=e=>{i.value=i.value.filter(t=>t!==e)},d=e=>{if(a.value){i.value.includes(e)||c([...i.value,e]);return}c([e])},f=e=>{a.value&&i.value.includes(e)?u(e):d(e)},p=e=>{c(n(e))},m=e.createField(r),h=(0,t.watch)(r.value,p,{immediate:!0});if(r.signal.addEventListener(`abort`,()=>h.dispose(),{once:!0}),r.multiple){let e=(0,t.watch)(r.multiple,()=>p(r.value.value));r.signal.addEventListener(`abort`,()=>e.dispose(),{once:!0})}return{...m,clear:l,formValue:o,removeValue:u,selectedValue:(0,t.computed)(()=>i.value[0]),selectedValues:i,selectValue:d,setValues:c,toggleValue:f}};exports.createChoiceField=r;
+const e=require("./field-base.cjs");let t=require("@vielzeug/ripple");var n=e=>e?Array.isArray(e)?e.filter(Boolean):e.split(`,`).map(e=>e.trim()).filter(Boolean):[],r=r=>{let i=(0,t.signal)([]),a=(0,t.computed)(()=>!!r.multiple?.value),o=(0,t.computed)(()=>a.value?i.value.join(`,`):i.value[0]??``),s=e=>{let t=a.value?e:e.slice(0,1);return[...new Set(t.filter(Boolean))]},c=!1,l=e=>{i.value=s(e)},u=e=>{c=!0,l(e)},d=()=>u([]),f=e=>{c=!0,i.value=i.value.filter(t=>t!==e)},p=e=>{if(a.value){i.value.includes(e)||u([...i.value,e]);return}u([e])},m=e=>{a.value&&i.value.includes(e)?f(e):p(e)},h=e=>{l(n(e))},g=e.createField(r),_=(0,t.computed)(()=>r.required?.value&&i.value.length===0?{valueMissing:!0}:null),v=(0,t.computed)(()=>_.value?r.requiredMessage?.value||`Please make a selection.`:``),y=(0,t.watch)(r.value,h,{immediate:!0});if(r.signal.addEventListener(`abort`,()=>y.dispose(),{once:!0}),r.multiple){let e=(0,t.watch)(r.multiple,()=>h(r.value.value));r.signal.addEventListener(`abort`,()=>e.dispose(),{once:!0})}let b=i.value,x=()=>{l(c?b:n(r.value.value)),c=!1,g.triggerValidation(`change`)};return{...g,clear:d,formValue:o,removeValue:f,reset:x,selectedValue:(0,t.computed)(()=>i.value[0]),selectedValues:i,selectValue:p,setValues:u,toggleValue:m,validationMessage:v,validity:_}};exports.createChoiceField=r;
 //# sourceMappingURL=choice-field.cjs.map

package/dist/headless/choice-field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"choice-field.cjs","names":[],"sources":["../../src/headless/choice-field.ts"],"sourcesContent":["import { computed, type Readable, signal, watch } from '@vielzeug/ripple';\n\nimport { createField, type FieldHandle, type FieldOptions } from './field-base';\n\n// ── Choice change event payload ──────────────────────────────────────────────────────────────\n\nexport type ChoiceChangeDetail = {\n  labels: string[];\n  originalEvent?: Event;\n  values: string[];\n};\n\n// ── Choice field ──────────────────────────────────────────────────────────────────────\n\nexport type ChoiceFieldOptions = FieldOptions & {\n  multiple?: Readable<boolean | undefined>;\n  /** `AbortSignal` from the component lifecycle. All internal subscriptions are disposed on abort. */\n  signal: AbortSignal;\n  /**\n   * Current selection value(s). Accepts a comma-separated string\n   * (legacy/single-select form serialisation) or a `string[]` array.\n   * The field normalises both formats internally via `parseChoiceValues`.\n   */\n  value: Readable<string | string[] | undefined>;\n};\n\nexport type ChoiceFieldHandle = FieldHandle & {\n  clear: () => void;\n  formValue: Readable<string>;\n  removeValue: (value: string) => void;\n  selectedValue: Readable<string | undefined>;\n  selectedValues: Readable<string[]>;\n  selectValue: (value: string) => void;\n  setValues: (values: string[]) => void;\n  /**\n   * Toggles `value` in the selection.\n   * - **Multiple mode**: adds if absent, removes if present.\n   * - **Single mode**: always selects `value` (acts like `selectValue` — cannot\n   *   deselect; use `clear()` to reset a single-select field).\n   */\n  toggleValue: (value: string) => void;\n};\n\nconst parseChoiceValues = (raw: string | string[] | undefined): string[] => {\n  if (!raw) return [];\n\n  if (Array.isArray(raw)) return raw.filter(Boolean);\n\n  return raw\n    .split(',')\n    .map((entry) => entry.trim())\n    .filter(Boolean);\n};\n\nexport const createChoiceField = (options: ChoiceFieldOptions): ChoiceFieldHandle => {\n  const selectedValues = signal<string[]>([]);\n  const isMultiple = computed(() => Boolean(options.multiple?.value));\n  const formValue = computed(() =>\n    isMultiple.value ? selectedValues.value.join(',') : (selectedValues.value[0] ?? ''),\n  );\n\n  const normalizeValues = (values: string[]): string[] => {\n    const normalized = isMultiple.value ? values : values.slice(0, 1);\n\n    return [...new Set(normalized.filter(Boolean))];\n  };\n\n  const setValues = (values: string[]): void => {\n    selectedValues.value = normalizeValues(values);\n  };\n  const clear = (): void => setValues([]);\n  const removeValue = (value: string): void => {\n    selectedValues.value = selectedValues.value.filter((v) => v !== value);\n  };\n\n  const selectValue = (value: string): void => {\n    if (isMultiple.value) {\n      if (!selectedValues.value.includes(value)) setValues([...selectedValues.value, value]);\n\n      return;\n    }\n\n    setValues([value]);\n  };\n\n  const toggleValue = (value: string): void => {\n    if (isMultiple.value) {\n      if (selectedValues.value.includes(value)) removeValue(value);\n      else selectValue(value);\n    } else {\n      selectValue(value);\n    }\n  };\n\n  const syncFromProp = (nextValue: string | string[] | undefined): void => {\n    setValues(parseChoiceValues(nextValue));\n  };\n\n  const field = createField(options);\n\n  const valueSub = watch(options.value, syncFromProp, { immediate: true });\n\n  options.signal.addEventListener('abort', () => valueSub.dispose(), { once: true });\n\n  if (options.multiple) {\n    const multipleSub = watch(options.multiple, () => syncFromProp(options.value.value));\n\n    options.signal.addEventListener('abort', () => multipleSub.dispose(), { once: true });\n  }\n\n  return {\n    ...field,\n    clear,\n    formValue,\n    removeValue,\n    selectedValue: computed(() => selectedValues.value[0]),\n    selectedValues,\n    selectValue,\n    setValues,\n    toggleValue,\n  };\n};\n"],"mappings":"sEA2CA,IAAM,EAAqB,GACpB,EAED,MAAM,QAAQ,CAAG,EAAU,EAAI,OAAO,OAAO,EAE1C,EACJ,MAAM,GAAG,CAAC,CACV,IAAK,GAAU,EAAM,KAAK,CAAC,CAAC,CAC5B,OAAO,OAAO,EAPA,CAAC,EAUP,EAAqB,GAAmD,CACnF,IAAM,GAAA,EAAA,EAAA,OAAA,CAAkC,CAAC,CAAC,EACpC,GAAA,EAAA,EAAA,SAAA,KAA4B,EAAQ,EAAQ,UAAU,KAAM,EAC5D,GAAA,EAAA,EAAA,SAAA,KACJ,EAAW,MAAQ,EAAe,MAAM,KAAK,GAAG,EAAK,EAAe,MAAM,IAAM,EAClF,EAEM,EAAmB,GAA+B,CACtD,IAAM,EAAa,EAAW,MAAQ,EAAS,EAAO,MAAM,EAAG,CAAC,EAEhE,MAAO,CAAC,GAAG,IAAI,IAAI,EAAW,OAAO,OAAO,CAAC,CAAC,CAChD,EAEM,EAAa,GAA2B,CAC5C,EAAe,MAAQ,EAAgB,CAAM,CAC/C,EACM,MAAoB,EAAU,CAAC,CAAC,EAChC,EAAe,GAAwB,CAC3C,EAAe,MAAQ,EAAe,MAAM,OAAQ,GAAM,IAAM,CAAK,CACvE,EAEM,EAAe,GAAwB,CAC3C,GAAI,EAAW,MAAO,CACf,EAAe,MAAM,SAAS,CAAK,GAAG,EAAU,CAAC,GAAG,EAAe,MAAO,CAAK,CAAC,EAErF,MACF,CAEA,EAAU,CAAC,CAAK,CAAC,CACnB,EAEM,EAAe,GAAwB,CACvC,EAAW,OACT,EAAe,MAAM,SAAS,CAAK,EAAG,EAAY,CAAK,EACtD,EAAY,CAAK,CAI1B,EAEM,EAAgB,GAAmD,CACvE,EAAU,EAAkB,CAAS,CAAC,CACxC,EAEM,EAAQ,EAAA,YAAY,CAAO,EAE3B,GAAA,EAAA,EAAA,MAAA,CAAiB,EAAQ,MAAO,EAAc,CAAE,UAAW,EAAK,CAAC,EAIvE,GAFA,EAAQ,OAAO,iBAAiB,YAAe,EAAS,QAAQ,EAAG,CAAE,KAAM,EAAK,CAAC,EAE7E,EAAQ,SAAU,CACpB,IAAM,GAAA,EAAA,EAAA,MAAA,CAAoB,EAAQ,aAAgB,EAAa,EAAQ,MAAM,KAAK,CAAC,EAEnF,EAAQ,OAAO,iBAAiB,YAAe,EAAY,QAAQ,EAAG,CAAE,KAAM,EAAK,CAAC,CACtF,CAEA,MAAO,CACL,GAAG,EACH,QACA,YACA,cACA,eAAA,EAAA,EAAA,SAAA,KAA8B,EAAe,MAAM,EAAE,EACrD,iBACA,cACA,YACA,aACF,CACF"}
+{"version":3,"file":"choice-field.cjs","names":[],"sources":["../../src/headless/choice-field.ts"],"sourcesContent":["import { computed, type Readable, signal, watch } from '@vielzeug/ripple';\n\nimport { createField, type FieldHandle, type FieldOptions } from './field-base';\n\n// ── Choice change event payload ──────────────────────────────────────────────────────────────\n\nexport type ChoiceChangeDetail = {\n  labels: string[];\n  originalEvent?: Event;\n  values: string[];\n};\n\n// ── Choice field ──────────────────────────────────────────────────────────────────────\n\nexport type ChoiceFieldOptions = FieldOptions & {\n  multiple?: Readable<boolean | undefined>;\n  /** Marks an empty selection invalid — feeds `validity`/`validationMessage` (see below). */\n  required?: Readable<boolean | undefined>;\n  /** Message for the empty-selection+required case. Defaults to `'Please make a selection.'`. */\n  requiredMessage?: Readable<string | undefined>;\n  /** `AbortSignal` from the component lifecycle. All internal subscriptions are disposed on abort. */\n  signal: AbortSignal;\n  /**\n   * Current selection value(s). Accepts a comma-separated string\n   * (legacy/single-select form serialisation) or a `string[]` array.\n   * The field normalises both formats internally via `parseChoiceValues`.\n   */\n  value: Readable<string | string[] | undefined>;\n};\n\nexport type ChoiceFieldHandle = FieldHandle & {\n  clear: () => void;\n  formValue: Readable<string>;\n  removeValue: (value: string) => void;\n  /**\n   * Restores the selection to its native \"default\": whatever `value` currently holds, if the\n   * user has never changed the selection yet, or the value snapshotted at creation, if they\n   * have. Two states, not one — see `createCheckable`'s `reset()` for the identical situation\n   * with `checked`, and why: `ore-radio-group`/`ore-checkbox-group` reflect the current\n   * selection back onto the host's `value`/`values` attribute for `:host([value])` styling\n   * (there's no native form control here to carry it), so `options.value` changes on every\n   * selection and can't double as \"the default to revert to\" post-interaction.\n   */\n  reset: () => void;\n  selectedValue: Readable<string | undefined>;\n  selectedValues: Readable<string[]>;\n  selectValue: (value: string) => void;\n  setValues: (values: string[]) => void;\n  /**\n   * Toggles `value` in the selection.\n   * - **Multiple mode**: adds if absent, removes if present.\n   * - **Single mode**: always selects `value` (acts like `selectValue` — cannot\n   *   deselect; use `clear()` to reset a single-select field).\n   */\n  toggleValue: (value: string) => void;\n  /** Reactive validation message paired with `validity`. Empty string when valid. */\n  validationMessage: Readable<string>;\n  /**\n   * Reactive `ValidityStateFlags` — `{ valueMissing: true }` while `required` and no option is\n   * selected, `null` (valid) otherwise. Pass straight to `useField({ validity: choice.validity })`.\n   */\n  validity: Readable<ValidityStateFlags | null>;\n};\n\nconst parseChoiceValues = (raw: string | string[] | undefined): string[] => {\n  if (!raw) return [];\n\n  if (Array.isArray(raw)) return raw.filter(Boolean);\n\n  return raw\n    .split(',')\n    .map((entry) => entry.trim())\n    .filter(Boolean);\n};\n\nexport const createChoiceField = (options: ChoiceFieldOptions): ChoiceFieldHandle => {\n  const selectedValues = signal<string[]>([]);\n  const isMultiple = computed(() => Boolean(options.multiple?.value));\n  const formValue = computed(() =>\n    isMultiple.value ? selectedValues.value.join(',') : (selectedValues.value[0] ?? ''),\n  );\n\n  const normalizeValues = (values: string[]): string[] => {\n    const normalized = isMultiple.value ? values : values.slice(0, 1);\n\n    return [...new Set(normalized.filter(Boolean))];\n  };\n\n  // Set the moment the user first changes the selection — see `reset()`'s doc comment for why\n  // this matters: before that point, `options.value` is still a reliable \"current default\" to\n  // resync from (e.g. an async-loaded value arriving after mount); after it, `options.value` is\n  // contaminated by the selection-driven attribute reflection (on the components where that\n  // applies) and the frozen snapshot is the only value that still represents \"the default\".\n  let dirty = false;\n\n  // The actual state setter, shared by every mutation path. Deliberately *not* where `dirty`\n  // gets set — `syncFromProp` (below) calls this directly to stay exempt from it, since mirroring\n  // an external prop change is never \"the user changed the selection\".\n  const applyValues = (values: string[]): void => {\n    selectedValues.value = normalizeValues(values);\n  };\n\n  const setValues = (values: string[]): void => {\n    dirty = true;\n    applyValues(values);\n  };\n  const clear = (): void => setValues([]);\n  const removeValue = (value: string): void => {\n    dirty = true;\n    selectedValues.value = selectedValues.value.filter((v) => v !== value);\n  };\n\n  const selectValue = (value: string): void => {\n    if (isMultiple.value) {\n      if (!selectedValues.value.includes(value)) setValues([...selectedValues.value, value]);\n\n      return;\n    }\n\n    setValues([value]);\n  };\n\n  const toggleValue = (value: string): void => {\n    if (isMultiple.value) {\n      if (selectedValues.value.includes(value)) removeValue(value);\n      else selectValue(value);\n    } else {\n      selectValue(value);\n    }\n  };\n\n  const syncFromProp = (nextValue: string | string[] | undefined): void => {\n    applyValues(parseChoiceValues(nextValue));\n  };\n\n  const field = createField(options);\n\n  const validity = computed<ValidityStateFlags | null>(() =>\n    options.required?.value && selectedValues.value.length === 0 ? { valueMissing: true } : null,\n  );\n  const validationMessage = computed(() =>\n    validity.value ? options.requiredMessage?.value || 'Please make a selection.' : '',\n  );\n\n  const valueSub = watch(options.value, syncFromProp, { immediate: true });\n\n  options.signal.addEventListener('abort', () => valueSub.dispose(), { once: true });\n\n  if (options.multiple) {\n    const multipleSub = watch(options.multiple, () => syncFromProp(options.value.value));\n\n    options.signal.addEventListener('abort', () => multipleSub.dispose(), { once: true });\n  }\n\n  const initialValues = selectedValues.value;\n  const reset = (): void => {\n    applyValues(dirty ? initialValues : parseChoiceValues(options.value.value));\n    dirty = false;\n    field.triggerValidation('change');\n  };\n\n  return {\n    ...field,\n    clear,\n    formValue,\n    removeValue,\n    reset,\n    selectedValue: computed(() => selectedValues.value[0]),\n    selectedValues,\n    selectValue,\n    setValues,\n    toggleValue,\n    validationMessage,\n    validity,\n  };\n};\n"],"mappings":"sEAgEA,IAAM,EAAqB,GACpB,EAED,MAAM,QAAQ,CAAG,EAAU,EAAI,OAAO,OAAO,EAE1C,EACJ,MAAM,GAAG,CAAC,CACV,IAAK,GAAU,EAAM,KAAK,CAAC,CAAC,CAC5B,OAAO,OAAO,EAPA,CAAC,EAUP,EAAqB,GAAmD,CACnF,IAAM,GAAA,EAAA,EAAA,OAAA,CAAkC,CAAC,CAAC,EACpC,GAAA,EAAA,EAAA,SAAA,KAA4B,EAAQ,EAAQ,UAAU,KAAM,EAC5D,GAAA,EAAA,EAAA,SAAA,KACJ,EAAW,MAAQ,EAAe,MAAM,KAAK,GAAG,EAAK,EAAe,MAAM,IAAM,EAClF,EAEM,EAAmB,GAA+B,CACtD,IAAM,EAAa,EAAW,MAAQ,EAAS,EAAO,MAAM,EAAG,CAAC,EAEhE,MAAO,CAAC,GAAG,IAAI,IAAI,EAAW,OAAO,OAAO,CAAC,CAAC,CAChD,EAOI,EAAQ,GAKN,EAAe,GAA2B,CAC9C,EAAe,MAAQ,EAAgB,CAAM,CAC/C,EAEM,EAAa,GAA2B,CAC5C,EAAQ,GACR,EAAY,CAAM,CACpB,EACM,MAAoB,EAAU,CAAC,CAAC,EAChC,EAAe,GAAwB,CAC3C,EAAQ,GACR,EAAe,MAAQ,EAAe,MAAM,OAAQ,GAAM,IAAM,CAAK,CACvE,EAEM,EAAe,GAAwB,CAC3C,GAAI,EAAW,MAAO,CACf,EAAe,MAAM,SAAS,CAAK,GAAG,EAAU,CAAC,GAAG,EAAe,MAAO,CAAK,CAAC,EAErF,MACF,CAEA,EAAU,CAAC,CAAK,CAAC,CACnB,EAEM,EAAe,GAAwB,CACvC,EAAW,OACT,EAAe,MAAM,SAAS,CAAK,EAAG,EAAY,CAAK,EACtD,EAAY,CAAK,CAI1B,EAEM,EAAgB,GAAmD,CACvE,EAAY,EAAkB,CAAS,CAAC,CAC1C,EAEM,EAAQ,EAAA,YAAY,CAAO,EAE3B,GAAA,EAAA,EAAA,SAAA,KACJ,EAAQ,UAAU,OAAS,EAAe,MAAM,SAAW,EAAI,CAAE,aAAc,EAAK,EAAI,IAC1F,EACM,GAAA,EAAA,EAAA,SAAA,KACJ,EAAS,MAAQ,EAAQ,iBAAiB,OAAS,2BAA6B,EAClF,EAEM,GAAA,EAAA,EAAA,MAAA,CAAiB,EAAQ,MAAO,EAAc,CAAE,UAAW,EAAK,CAAC,EAIvE,GAFA,EAAQ,OAAO,iBAAiB,YAAe,EAAS,QAAQ,EAAG,CAAE,KAAM,EAAK,CAAC,EAE7E,EAAQ,SAAU,CACpB,IAAM,GAAA,EAAA,EAAA,MAAA,CAAoB,EAAQ,aAAgB,EAAa,EAAQ,MAAM,KAAK,CAAC,EAEnF,EAAQ,OAAO,iBAAiB,YAAe,EAAY,QAAQ,EAAG,CAAE,KAAM,EAAK,CAAC,CACtF,CAEA,IAAM,EAAgB,EAAe,MAC/B,MAAoB,CACxB,EAAY,EAAQ,EAAgB,EAAkB,EAAQ,MAAM,KAAK,CAAC,EAC1E,EAAQ,GACR,EAAM,kBAAkB,QAAQ,CAClC,EAEA,MAAO,CACL,GAAG,EACH,QACA,YACA,cACA,QACA,eAAA,EAAA,EAAA,SAAA,KAA8B,EAAe,MAAM,EAAE,EACrD,iBACA,cACA,YACA,cACA,oBACA,UACF,CACF"}

package/dist/headless/choice-field.d.ts

@@ -7,6 +7,10 @@ export type ChoiceChangeDetail = {
 };
 export type ChoiceFieldOptions = FieldOptions & {
     multiple?: Readable<boolean | undefined>;
+    /** Marks an empty selection invalid — feeds `validity`/`validationMessage` (see below). */
+    required?: Readable<boolean | undefined>;
+    /** Message for the empty-selection+required case. Defaults to `'Please make a selection.'`. */
+    requiredMessage?: Readable<string | undefined>;
     /** `AbortSignal` from the component lifecycle. All internal subscriptions are disposed on abort. */
     signal: AbortSignal;
     /**
@@ -20,6 +24,16 @@ export type ChoiceFieldHandle = FieldHandle & {
     clear: () => void;
     formValue: Readable<string>;
     removeValue: (value: string) => void;
+    /**
+     * Restores the selection to its native "default": whatever `value` currently holds, if the
+     * user has never changed the selection yet, or the value snapshotted at creation, if they
+     * have. Two states, not one — see `createCheckable`'s `reset()` for the identical situation
+     * with `checked`, and why: `ore-radio-group`/`ore-checkbox-group` reflect the current
+     * selection back onto the host's `value`/`values` attribute for `:host([value])` styling
+     * (there's no native form control here to carry it), so `options.value` changes on every
+     * selection and can't double as "the default to revert to" post-interaction.
+     */
+    reset: () => void;
     selectedValue: Readable<string | undefined>;
     selectedValues: Readable<string[]>;
     selectValue: (value: string) => void;
@@ -31,6 +45,13 @@ export type ChoiceFieldHandle = FieldHandle & {
      *   deselect; use `clear()` to reset a single-select field).
      */
     toggleValue: (value: string) => void;
+    /** Reactive validation message paired with `validity`. Empty string when valid. */
+    validationMessage: Readable<string>;
+    /**
+     * Reactive `ValidityStateFlags` — `{ valueMissing: true }` while `required` and no option is
+     * selected, `null` (valid) otherwise. Pass straight to `useField({ validity: choice.validity })`.
+     */
+    validity: Readable<ValidityStateFlags | null>;
 };
 export declare const createChoiceField: (options: ChoiceFieldOptions) => ChoiceFieldHandle;
 //# sourceMappingURL=choice-field.d.ts.map

package/dist/headless/choice-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"choice-field.d.ts","sourceRoot":"","sources":["../../src/headless/choice-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,QAAQ,EAAiB,MAAM,kBAAkB,CAAC;AAE1E,OAAO,EAAe,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAIhF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC;AAIF,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG;IAC9C,QAAQ,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACzC,oGAAoG;IACpG,MAAM,EAAE,WAAW,CAAC;IACpB;;;;OAIG;IACH,KAAK,EAAE,QAAQ,CAAC,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG;IAC5C,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC5B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC5C,cAAc,EAAE,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC;IACnC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC;;;;;OAKG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAaF,eAAO,MAAM,iBAAiB,GAAI,SAAS,kBAAkB,KAAG,iBAmE/D,CAAC"}
+{"version":3,"file":"choice-field.d.ts","sourceRoot":"","sources":["../../src/headless/choice-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,QAAQ,EAAiB,MAAM,kBAAkB,CAAC;AAE1E,OAAO,EAAe,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAIhF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC;AAIF,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG;IAC9C,QAAQ,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACzC,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACzC,+FAA+F;IAC/F,eAAe,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC/C,oGAAoG;IACpG,MAAM,EAAE,WAAW,CAAC;IACpB;;;;OAIG;IACH,KAAK,EAAE,QAAQ,CAAC,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG;IAC5C,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC5B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;;;;;;;OAQG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,aAAa,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC5C,cAAc,EAAE,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC;IACnC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC;;;;;OAKG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,mFAAmF;IACnF,iBAAiB,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IACpC;;;OAGG;IACH,QAAQ,EAAE,QAAQ,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC;CAC/C,CAAC;AAaF,eAAO,MAAM,iBAAiB,GAAI,SAAS,kBAAkB,KAAG,iBAoG/D,CAAC"}

package/dist/headless/choice-field.js

@@ -5,35 +5,43 @@ var i = (e) => e ? Array.isArray(e) ? e.filter(Boolean) : e.split(",").map((e) =
 	let o = n([]), s = t(() => !!a.multiple?.value), c = t(() => s.value ? o.value.join(",") : o.value[0] ?? ""), l = (e) => {
 		let t = s.value ? e : e.slice(0, 1);
 		return [...new Set(t.filter(Boolean))];
-	}, u = (e) => {
+	}, u = !1, d = (e) => {
 		o.value = l(e);
-	}, d = () => u([]), f = (e) => {
-		o.value = o.value.filter((t) => t !== e);
-	}, p = (e) => {
+	}, f = (e) => {
+		u = !0, d(e);
+	}, p = () => f([]), m = (e) => {
+		u = !0, o.value = o.value.filter((t) => t !== e);
+	}, h = (e) => {
 		if (s.value) {
-			o.value.includes(e) || u([...o.value, e]);
+			o.value.includes(e) || f([...o.value, e]);
 			return;
 		}
-		u([e]);
-	}, m = (e) => {
-		s.value && o.value.includes(e) ? f(e) : p(e);
-	}, h = (e) => {
-		u(i(e));
-	}, g = e(a), _ = r(a.value, h, { immediate: !0 });
-	if (a.signal.addEventListener("abort", () => _.dispose(), { once: !0 }), a.multiple) {
-		let e = r(a.multiple, () => h(a.value.value));
+		f([e]);
+	}, g = (e) => {
+		s.value && o.value.includes(e) ? m(e) : h(e);
+	}, _ = (e) => {
+		d(i(e));
+	}, v = e(a), y = t(() => a.required?.value && o.value.length === 0 ? { valueMissing: !0 } : null), b = t(() => y.value ? a.requiredMessage?.value || "Please make a selection." : ""), x = r(a.value, _, { immediate: !0 });
+	if (a.signal.addEventListener("abort", () => x.dispose(), { once: !0 }), a.multiple) {
+		let e = r(a.multiple, () => _(a.value.value));
 		a.signal.addEventListener("abort", () => e.dispose(), { once: !0 });
 	}
+	let S = o.value, C = () => {
+		d(u ? S : i(a.value.value)), u = !1, v.triggerValidation("change");
+	};
 	return {
-		...g,
-		clear: d,
+		...v,
+		clear: p,
 		formValue: c,
-		removeValue: f,
+		removeValue: m,
+		reset: C,
 		selectedValue: t(() => o.value[0]),
 		selectedValues: o,
-		selectValue: p,
-		setValues: u,
-		toggleValue: m
+		selectValue: h,
+		setValues: f,
+		toggleValue: g,
+		validationMessage: b,
+		validity: y
 	};
 };
 //#endregion

package/dist/headless/choice-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"choice-field.js","names":[],"sources":["../../src/headless/choice-field.ts"],"sourcesContent":["import { computed, type Readable, signal, watch } from '@vielzeug/ripple';\n\nimport { createField, type FieldHandle, type FieldOptions } from './field-base';\n\n// ── Choice change event payload ──────────────────────────────────────────────────────────────\n\nexport type ChoiceChangeDetail = {\n  labels: string[];\n  originalEvent?: Event;\n  values: string[];\n};\n\n// ── Choice field ──────────────────────────────────────────────────────────────────────\n\nexport type ChoiceFieldOptions = FieldOptions & {\n  multiple?: Readable<boolean | undefined>;\n  /** `AbortSignal` from the component lifecycle. All internal subscriptions are disposed on abort. */\n  signal: AbortSignal;\n  /**\n   * Current selection value(s). Accepts a comma-separated string\n   * (legacy/single-select form serialisation) or a `string[]` array.\n   * The field normalises both formats internally via `parseChoiceValues`.\n   */\n  value: Readable<string | string[] | undefined>;\n};\n\nexport type ChoiceFieldHandle = FieldHandle & {\n  clear: () => void;\n  formValue: Readable<string>;\n  removeValue: (value: string) => void;\n  selectedValue: Readable<string | undefined>;\n  selectedValues: Readable<string[]>;\n  selectValue: (value: string) => void;\n  setValues: (values: string[]) => void;\n  /**\n   * Toggles `value` in the selection.\n   * - **Multiple mode**: adds if absent, removes if present.\n   * - **Single mode**: always selects `value` (acts like `selectValue` — cannot\n   *   deselect; use `clear()` to reset a single-select field).\n   */\n  toggleValue: (value: string) => void;\n};\n\nconst parseChoiceValues = (raw: string | string[] | undefined): string[] => {\n  if (!raw) return [];\n\n  if (Array.isArray(raw)) return raw.filter(Boolean);\n\n  return raw\n    .split(',')\n    .map((entry) => entry.trim())\n    .filter(Boolean);\n};\n\nexport const createChoiceField = (options: ChoiceFieldOptions): ChoiceFieldHandle => {\n  const selectedValues = signal<string[]>([]);\n  const isMultiple = computed(() => Boolean(options.multiple?.value));\n  const formValue = computed(() =>\n    isMultiple.value ? selectedValues.value.join(',') : (selectedValues.value[0] ?? ''),\n  );\n\n  const normalizeValues = (values: string[]): string[] => {\n    const normalized = isMultiple.value ? values : values.slice(0, 1);\n\n    return [...new Set(normalized.filter(Boolean))];\n  };\n\n  const setValues = (values: string[]): void => {\n    selectedValues.value = normalizeValues(values);\n  };\n  const clear = (): void => setValues([]);\n  const removeValue = (value: string): void => {\n    selectedValues.value = selectedValues.value.filter((v) => v !== value);\n  };\n\n  const selectValue = (value: string): void => {\n    if (isMultiple.value) {\n      if (!selectedValues.value.includes(value)) setValues([...selectedValues.value, value]);\n\n      return;\n    }\n\n    setValues([value]);\n  };\n\n  const toggleValue = (value: string): void => {\n    if (isMultiple.value) {\n      if (selectedValues.value.includes(value)) removeValue(value);\n      else selectValue(value);\n    } else {\n      selectValue(value);\n    }\n  };\n\n  const syncFromProp = (nextValue: string | string[] | undefined): void => {\n    setValues(parseChoiceValues(nextValue));\n  };\n\n  const field = createField(options);\n\n  const valueSub = watch(options.value, syncFromProp, { immediate: true });\n\n  options.signal.addEventListener('abort', () => valueSub.dispose(), { once: true });\n\n  if (options.multiple) {\n    const multipleSub = watch(options.multiple, () => syncFromProp(options.value.value));\n\n    options.signal.addEventListener('abort', () => multipleSub.dispose(), { once: true });\n  }\n\n  return {\n    ...field,\n    clear,\n    formValue,\n    removeValue,\n    selectedValue: computed(() => selectedValues.value[0]),\n    selectedValues,\n    selectValue,\n    setValues,\n    toggleValue,\n  };\n};\n"],"mappings":";;;AA2CA,IAAM,KAAqB,MACpB,IAED,MAAM,QAAQ,CAAG,IAAU,EAAI,OAAO,OAAO,IAE1C,EACJ,MAAM,GAAG,CAAC,CACV,KAAK,MAAU,EAAM,KAAK,CAAC,CAAC,CAC5B,OAAO,OAAO,IAPA,CAAC,GAUP,KAAqB,MAAmD;CACnF,IAAM,IAAiB,EAAiB,CAAC,CAAC,GACpC,IAAa,QAAe,EAAQ,EAAQ,UAAU,KAAM,GAC5D,IAAY,QAChB,EAAW,QAAQ,EAAe,MAAM,KAAK,GAAG,IAAK,EAAe,MAAM,MAAM,EAClF,GAEM,KAAmB,MAA+B;EACtD,IAAM,IAAa,EAAW,QAAQ,IAAS,EAAO,MAAM,GAAG,CAAC;EAEhE,OAAO,CAAC,GAAG,IAAI,IAAI,EAAW,OAAO,OAAO,CAAC,CAAC;CAChD,GAEM,KAAa,MAA2B;EAC5C,EAAe,QAAQ,EAAgB,CAAM;CAC/C,GACM,UAAoB,EAAU,CAAC,CAAC,GAChC,KAAe,MAAwB;EAC3C,EAAe,QAAQ,EAAe,MAAM,QAAQ,MAAM,MAAM,CAAK;CACvE,GAEM,KAAe,MAAwB;EAC3C,IAAI,EAAW,OAAO;GACpB,AAAK,EAAe,MAAM,SAAS,CAAK,KAAG,EAAU,CAAC,GAAG,EAAe,OAAO,CAAK,CAAC;GAErF;EACF;EAEA,EAAU,CAAC,CAAK,CAAC;CACnB,GAEM,KAAe,MAAwB;EAC3C,AAAI,EAAW,SACT,EAAe,MAAM,SAAS,CAAK,IAAG,EAAY,CAAK,IACtD,EAAY,CAAK;CAI1B,GAEM,KAAgB,MAAmD;EACvE,EAAU,EAAkB,CAAS,CAAC;CACxC,GAEM,IAAQ,EAAY,CAAO,GAE3B,IAAW,EAAM,EAAQ,OAAO,GAAc,EAAE,WAAW,GAAK,CAAC;CAIvE,IAFA,EAAQ,OAAO,iBAAiB,eAAe,EAAS,QAAQ,GAAG,EAAE,MAAM,GAAK,CAAC,GAE7E,EAAQ,UAAU;EACpB,IAAM,IAAc,EAAM,EAAQ,gBAAgB,EAAa,EAAQ,MAAM,KAAK,CAAC;EAEnF,EAAQ,OAAO,iBAAiB,eAAe,EAAY,QAAQ,GAAG,EAAE,MAAM,GAAK,CAAC;CACtF;CAEA,OAAO;EACL,GAAG;EACH;EACA;EACA;EACA,eAAe,QAAe,EAAe,MAAM,EAAE;EACrD;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"choice-field.js","names":[],"sources":["../../src/headless/choice-field.ts"],"sourcesContent":["import { computed, type Readable, signal, watch } from '@vielzeug/ripple';\n\nimport { createField, type FieldHandle, type FieldOptions } from './field-base';\n\n// ── Choice change event payload ──────────────────────────────────────────────────────────────\n\nexport type ChoiceChangeDetail = {\n  labels: string[];\n  originalEvent?: Event;\n  values: string[];\n};\n\n// ── Choice field ──────────────────────────────────────────────────────────────────────\n\nexport type ChoiceFieldOptions = FieldOptions & {\n  multiple?: Readable<boolean | undefined>;\n  /** Marks an empty selection invalid — feeds `validity`/`validationMessage` (see below). */\n  required?: Readable<boolean | undefined>;\n  /** Message for the empty-selection+required case. Defaults to `'Please make a selection.'`. */\n  requiredMessage?: Readable<string | undefined>;\n  /** `AbortSignal` from the component lifecycle. All internal subscriptions are disposed on abort. */\n  signal: AbortSignal;\n  /**\n   * Current selection value(s). Accepts a comma-separated string\n   * (legacy/single-select form serialisation) or a `string[]` array.\n   * The field normalises both formats internally via `parseChoiceValues`.\n   */\n  value: Readable<string | string[] | undefined>;\n};\n\nexport type ChoiceFieldHandle = FieldHandle & {\n  clear: () => void;\n  formValue: Readable<string>;\n  removeValue: (value: string) => void;\n  /**\n   * Restores the selection to its native \"default\": whatever `value` currently holds, if the\n   * user has never changed the selection yet, or the value snapshotted at creation, if they\n   * have. Two states, not one — see `createCheckable`'s `reset()` for the identical situation\n   * with `checked`, and why: `ore-radio-group`/`ore-checkbox-group` reflect the current\n   * selection back onto the host's `value`/`values` attribute for `:host([value])` styling\n   * (there's no native form control here to carry it), so `options.value` changes on every\n   * selection and can't double as \"the default to revert to\" post-interaction.\n   */\n  reset: () => void;\n  selectedValue: Readable<string | undefined>;\n  selectedValues: Readable<string[]>;\n  selectValue: (value: string) => void;\n  setValues: (values: string[]) => void;\n  /**\n   * Toggles `value` in the selection.\n   * - **Multiple mode**: adds if absent, removes if present.\n   * - **Single mode**: always selects `value` (acts like `selectValue` — cannot\n   *   deselect; use `clear()` to reset a single-select field).\n   */\n  toggleValue: (value: string) => void;\n  /** Reactive validation message paired with `validity`. Empty string when valid. */\n  validationMessage: Readable<string>;\n  /**\n   * Reactive `ValidityStateFlags` — `{ valueMissing: true }` while `required` and no option is\n   * selected, `null` (valid) otherwise. Pass straight to `useField({ validity: choice.validity })`.\n   */\n  validity: Readable<ValidityStateFlags | null>;\n};\n\nconst parseChoiceValues = (raw: string | string[] | undefined): string[] => {\n  if (!raw) return [];\n\n  if (Array.isArray(raw)) return raw.filter(Boolean);\n\n  return raw\n    .split(',')\n    .map((entry) => entry.trim())\n    .filter(Boolean);\n};\n\nexport const createChoiceField = (options: ChoiceFieldOptions): ChoiceFieldHandle => {\n  const selectedValues = signal<string[]>([]);\n  const isMultiple = computed(() => Boolean(options.multiple?.value));\n  const formValue = computed(() =>\n    isMultiple.value ? selectedValues.value.join(',') : (selectedValues.value[0] ?? ''),\n  );\n\n  const normalizeValues = (values: string[]): string[] => {\n    const normalized = isMultiple.value ? values : values.slice(0, 1);\n\n    return [...new Set(normalized.filter(Boolean))];\n  };\n\n  // Set the moment the user first changes the selection — see `reset()`'s doc comment for why\n  // this matters: before that point, `options.value` is still a reliable \"current default\" to\n  // resync from (e.g. an async-loaded value arriving after mount); after it, `options.value` is\n  // contaminated by the selection-driven attribute reflection (on the components where that\n  // applies) and the frozen snapshot is the only value that still represents \"the default\".\n  let dirty = false;\n\n  // The actual state setter, shared by every mutation path. Deliberately *not* where `dirty`\n  // gets set — `syncFromProp` (below) calls this directly to stay exempt from it, since mirroring\n  // an external prop change is never \"the user changed the selection\".\n  const applyValues = (values: string[]): void => {\n    selectedValues.value = normalizeValues(values);\n  };\n\n  const setValues = (values: string[]): void => {\n    dirty = true;\n    applyValues(values);\n  };\n  const clear = (): void => setValues([]);\n  const removeValue = (value: string): void => {\n    dirty = true;\n    selectedValues.value = selectedValues.value.filter((v) => v !== value);\n  };\n\n  const selectValue = (value: string): void => {\n    if (isMultiple.value) {\n      if (!selectedValues.value.includes(value)) setValues([...selectedValues.value, value]);\n\n      return;\n    }\n\n    setValues([value]);\n  };\n\n  const toggleValue = (value: string): void => {\n    if (isMultiple.value) {\n      if (selectedValues.value.includes(value)) removeValue(value);\n      else selectValue(value);\n    } else {\n      selectValue(value);\n    }\n  };\n\n  const syncFromProp = (nextValue: string | string[] | undefined): void => {\n    applyValues(parseChoiceValues(nextValue));\n  };\n\n  const field = createField(options);\n\n  const validity = computed<ValidityStateFlags | null>(() =>\n    options.required?.value && selectedValues.value.length === 0 ? { valueMissing: true } : null,\n  );\n  const validationMessage = computed(() =>\n    validity.value ? options.requiredMessage?.value || 'Please make a selection.' : '',\n  );\n\n  const valueSub = watch(options.value, syncFromProp, { immediate: true });\n\n  options.signal.addEventListener('abort', () => valueSub.dispose(), { once: true });\n\n  if (options.multiple) {\n    const multipleSub = watch(options.multiple, () => syncFromProp(options.value.value));\n\n    options.signal.addEventListener('abort', () => multipleSub.dispose(), { once: true });\n  }\n\n  const initialValues = selectedValues.value;\n  const reset = (): void => {\n    applyValues(dirty ? initialValues : parseChoiceValues(options.value.value));\n    dirty = false;\n    field.triggerValidation('change');\n  };\n\n  return {\n    ...field,\n    clear,\n    formValue,\n    removeValue,\n    reset,\n    selectedValue: computed(() => selectedValues.value[0]),\n    selectedValues,\n    selectValue,\n    setValues,\n    toggleValue,\n    validationMessage,\n    validity,\n  };\n};\n"],"mappings":";;;AAgEA,IAAM,KAAqB,MACpB,IAED,MAAM,QAAQ,CAAG,IAAU,EAAI,OAAO,OAAO,IAE1C,EACJ,MAAM,GAAG,CAAC,CACV,KAAK,MAAU,EAAM,KAAK,CAAC,CAAC,CAC5B,OAAO,OAAO,IAPA,CAAC,GAUP,KAAqB,MAAmD;CACnF,IAAM,IAAiB,EAAiB,CAAC,CAAC,GACpC,IAAa,QAAe,EAAQ,EAAQ,UAAU,KAAM,GAC5D,IAAY,QAChB,EAAW,QAAQ,EAAe,MAAM,KAAK,GAAG,IAAK,EAAe,MAAM,MAAM,EAClF,GAEM,KAAmB,MAA+B;EACtD,IAAM,IAAa,EAAW,QAAQ,IAAS,EAAO,MAAM,GAAG,CAAC;EAEhE,OAAO,CAAC,GAAG,IAAI,IAAI,EAAW,OAAO,OAAO,CAAC,CAAC;CAChD,GAOI,IAAQ,IAKN,KAAe,MAA2B;EAC9C,EAAe,QAAQ,EAAgB,CAAM;CAC/C,GAEM,KAAa,MAA2B;EAE5C,AADA,IAAQ,IACR,EAAY,CAAM;CACpB,GACM,UAAoB,EAAU,CAAC,CAAC,GAChC,KAAe,MAAwB;EAE3C,AADA,IAAQ,IACR,EAAe,QAAQ,EAAe,MAAM,QAAQ,MAAM,MAAM,CAAK;CACvE,GAEM,KAAe,MAAwB;EAC3C,IAAI,EAAW,OAAO;GACpB,AAAK,EAAe,MAAM,SAAS,CAAK,KAAG,EAAU,CAAC,GAAG,EAAe,OAAO,CAAK,CAAC;GAErF;EACF;EAEA,EAAU,CAAC,CAAK,CAAC;CACnB,GAEM,KAAe,MAAwB;EAC3C,AAAI,EAAW,SACT,EAAe,MAAM,SAAS,CAAK,IAAG,EAAY,CAAK,IACtD,EAAY,CAAK;CAI1B,GAEM,KAAgB,MAAmD;EACvE,EAAY,EAAkB,CAAS,CAAC;CAC1C,GAEM,IAAQ,EAAY,CAAO,GAE3B,IAAW,QACf,EAAQ,UAAU,SAAS,EAAe,MAAM,WAAW,IAAI,EAAE,cAAc,GAAK,IAAI,IAC1F,GACM,IAAoB,QACxB,EAAS,QAAQ,EAAQ,iBAAiB,SAAS,6BAA6B,EAClF,GAEM,IAAW,EAAM,EAAQ,OAAO,GAAc,EAAE,WAAW,GAAK,CAAC;CAIvE,IAFA,EAAQ,OAAO,iBAAiB,eAAe,EAAS,QAAQ,GAAG,EAAE,MAAM,GAAK,CAAC,GAE7E,EAAQ,UAAU;EACpB,IAAM,IAAc,EAAM,EAAQ,gBAAgB,EAAa,EAAQ,MAAM,KAAK,CAAC;EAEnF,EAAQ,OAAO,iBAAiB,eAAe,EAAY,QAAQ,GAAG,EAAE,MAAM,GAAK,CAAC;CACtF;CAEA,IAAM,IAAgB,EAAe,OAC/B,UAAoB;EAGxB,AAFA,EAAY,IAAQ,IAAgB,EAAkB,EAAQ,MAAM,KAAK,CAAC,GAC1E,IAAQ,IACR,EAAM,kBAAkB,QAAQ;CAClC;CAEA,OAAO;EACL,GAAG;EACH;EACA;EACA;EACA;EACA,eAAe,QAAe,EAAe,MAAM,EAAE;EACrD;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/headless/composer.cjs

@@ -0,0 +1,2 @@
+let e=require("@vielzeug/ripple");var t=e=>!e||e.trim()===``,n=n=>{let r=(0,e.computed)(()=>!t(n.value.value)&&!n.disabled?.value&&!n.loading?.value),i=e=>{r.value&&n.onSend(e)};return{canSend:r,handleKeydown:e=>{if(e.key!==`Enter`||e.isComposing)return;let t=n.sendShortcut?.value??`enter`,r=e.metaKey||e.ctrlKey;(t===`mod+enter`?!r:e.shiftKey)||(e.preventDefault(),i(e))},keyShortcutsHint:(0,e.computed)(()=>(n.sendShortcut?.value??`enter`)===`mod+enter`?`Control+Enter Meta+Enter`:`Enter`),send:i}};exports.createComposerControl=n;
+//# sourceMappingURL=composer.cjs.map

package/dist/headless/composer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"composer.cjs","names":[],"sources":["../../src/headless/composer.ts"],"sourcesContent":["import type { Readable } from '@vielzeug/ripple';\n\nimport { computed } from '@vielzeug/ripple';\n\n/**\n * Keyboard shortcut that triggers a send:\n * - `'enter'` (default) — Enter sends, Shift+Enter inserts a newline.\n * - `'mod+enter'` — Enter always inserts a newline; Ctrl/Cmd+Enter sends.\n */\nexport type SendShortcut = 'enter' | 'mod+enter';\n\nexport type ComposerControlOptions = {\n  disabled?: Readable<boolean | undefined>;\n  /** Blocks further sends (e.g. a send is already in flight) without disabling editing. */\n  loading?: Readable<boolean | undefined>;\n  /** Called for a send attempt that passed the `canSend` guard. */\n  onSend: (event: KeyboardEvent | MouseEvent) => void;\n  sendShortcut?: Readable<SendShortcut | undefined>;\n  value: Readable<string | undefined>;\n};\n\nexport type ComposerControl = {\n  /** Whether the current value is non-blank and the control isn't disabled/loading. */\n  canSend: Readable<boolean>;\n  /** Wire onto the raw `<textarea>`'s `keydown` — intercepts the resolved send shortcut. */\n  handleKeydown: (event: KeyboardEvent) => void;\n  /** `aria-keyshortcuts` value describing the resolved shortcut. */\n  keyShortcutsHint: Readable<string>;\n  /** Attempts a send; no-ops when `canSend` is false. Wire onto the send button's `click`. */\n  send: (event: KeyboardEvent | MouseEvent) => void;\n};\n\nconst isBlank = (value: string | undefined): boolean => !value || value.trim() === '';\n\n/**\n * Send-gesture logic for a message/comment composer — decides *when* a send is allowed\n * and *whether* a given keydown counts as one. Owns no DOM, value state, or event dispatch;\n * the component wires `handleKeydown`/`send` and decides what a send actually does.\n *\n * @example\n * ```ts\n * const composer = createComposerControl({\n *   onSend: (event) => attemptSend(event),\n *   sendShortcut: props['send-shortcut'],\n *   value,\n * });\n * // <textarea @keydown=\"${composer.handleKeydown}\" aria-keyshortcuts=\"${composer.keyShortcutsHint}\">\n * // <button ?disabled=\"${() => !composer.canSend.value}\" @click=\"${composer.send}\">\n * ```\n */\nexport const createComposerControl = (options: ComposerControlOptions): ComposerControl => {\n  const canSend = computed(() => !isBlank(options.value.value) && !options.disabled?.value && !options.loading?.value);\n\n  const send = (event: KeyboardEvent | MouseEvent): void => {\n    if (!canSend.value) return;\n\n    options.onSend(event);\n  };\n\n  const handleKeydown = (event: KeyboardEvent): void => {\n    // A composing IME candidate selection also fires `Enter` — never treat that as a send.\n    if (event.key !== 'Enter' || event.isComposing) return;\n\n    const mode = options.sendShortcut?.value ?? 'enter';\n    const hasModifier = event.metaKey || event.ctrlKey;\n\n    if (mode === 'mod+enter' ? !hasModifier : event.shiftKey) return;\n\n    event.preventDefault();\n    send(event);\n  };\n\n  const keyShortcutsHint = computed(() =>\n    (options.sendShortcut?.value ?? 'enter') === 'mod+enter' ? 'Control+Enter Meta+Enter' : 'Enter',\n  );\n\n  return { canSend, handleKeydown, keyShortcutsHint, send };\n};\n"],"mappings":"kCAgCA,IAAM,EAAW,GAAuC,CAAC,GAAS,EAAM,KAAK,IAAM,GAkBtE,EAAyB,GAAqD,CACzF,IAAM,GAAA,EAAA,EAAA,SAAA,KAAyB,CAAC,EAAQ,EAAQ,MAAM,KAAK,GAAK,CAAC,EAAQ,UAAU,OAAS,CAAC,EAAQ,SAAS,KAAK,EAE7G,EAAQ,GAA4C,CACnD,EAAQ,OAEb,EAAQ,OAAO,CAAK,CACtB,EAmBA,MAAO,CAAE,UAAS,cAjBK,GAA+B,CAEpD,GAAI,EAAM,MAAQ,SAAW,EAAM,YAAa,OAEhD,IAAM,EAAO,EAAQ,cAAc,OAAS,QACtC,EAAc,EAAM,SAAW,EAAM,SAEvC,IAAS,YAAc,CAAC,EAAc,EAAM,YAEhD,EAAM,eAAe,EACrB,EAAK,CAAK,EACZ,EAMiC,kBAAA,EAAA,EAAA,SAAA,MAH9B,EAAQ,cAAc,OAAS,WAAa,YAAc,2BAA6B,OAGzD,EAAkB,MAAK,CAC1D"}

package/dist/headless/composer.d.ts

@@ -0,0 +1,44 @@
+import type { Readable } from '@vielzeug/ripple';
+/**
+ * Keyboard shortcut that triggers a send:
+ * - `'enter'` (default) — Enter sends, Shift+Enter inserts a newline.
+ * - `'mod+enter'` — Enter always inserts a newline; Ctrl/Cmd+Enter sends.
+ */
+export type SendShortcut = 'enter' | 'mod+enter';
+export type ComposerControlOptions = {
+    disabled?: Readable<boolean | undefined>;
+    /** Blocks further sends (e.g. a send is already in flight) without disabling editing. */
+    loading?: Readable<boolean | undefined>;
+    /** Called for a send attempt that passed the `canSend` guard. */
+    onSend: (event: KeyboardEvent | MouseEvent) => void;
+    sendShortcut?: Readable<SendShortcut | undefined>;
+    value: Readable<string | undefined>;
+};
+export type ComposerControl = {
+    /** Whether the current value is non-blank and the control isn't disabled/loading. */
+    canSend: Readable<boolean>;
+    /** Wire onto the raw `<textarea>`'s `keydown` — intercepts the resolved send shortcut. */
+    handleKeydown: (event: KeyboardEvent) => void;
+    /** `aria-keyshortcuts` value describing the resolved shortcut. */
+    keyShortcutsHint: Readable<string>;
+    /** Attempts a send; no-ops when `canSend` is false. Wire onto the send button's `click`. */
+    send: (event: KeyboardEvent | MouseEvent) => void;
+};
+/**
+ * Send-gesture logic for a message/comment composer — decides *when* a send is allowed
+ * and *whether* a given keydown counts as one. Owns no DOM, value state, or event dispatch;
+ * the component wires `handleKeydown`/`send` and decides what a send actually does.
+ *
+ * @example
+ * ```ts
+ * const composer = createComposerControl({
+ *   onSend: (event) => attemptSend(event),
+ *   sendShortcut: props['send-shortcut'],
+ *   value,
+ * });
+ * // <textarea @keydown="${composer.handleKeydown}" aria-keyshortcuts="${composer.keyShortcutsHint}">
+ * // <button ?disabled="${() => !composer.canSend.value}" @click="${composer.send}">
+ * ```
+ */
+export declare const createComposerControl: (options: ComposerControlOptions) => ComposerControl;
+//# sourceMappingURL=composer.d.ts.map

package/dist/headless/composer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composer.d.ts","sourceRoot":"","sources":["../../src/headless/composer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIjD;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,WAAW,CAAC;AAEjD,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACzC,yFAAyF;IACzF,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACxC,iEAAiE;IACjE,MAAM,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,UAAU,KAAK,IAAI,CAAC;IACpD,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,GAAG,SAAS,CAAC,CAAC;IAClD,KAAK,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,qFAAqF;IACrF,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC3B,0FAA0F;IAC1F,aAAa,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,kEAAkE;IAClE,gBAAgB,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IACnC,4FAA4F;IAC5F,IAAI,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,UAAU,KAAK,IAAI,CAAC;CACnD,CAAC;AAIF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,qBAAqB,GAAI,SAAS,sBAAsB,KAAG,eA2BvE,CAAC"}

package/dist/headless/composer.js

@@ -0,0 +1,21 @@
+import { computed as e } from "@vielzeug/ripple";
+//#region src/headless/composer.ts
+var t = (e) => !e || e.trim() === "", n = (n) => {
+	let r = e(() => !t(n.value.value) && !n.disabled?.value && !n.loading?.value), i = (e) => {
+		r.value && n.onSend(e);
+	};
+	return {
+		canSend: r,
+		handleKeydown: (e) => {
+			if (e.key !== "Enter" || e.isComposing) return;
+			let t = n.sendShortcut?.value ?? "enter", r = e.metaKey || e.ctrlKey;
+			(t === "mod+enter" ? !r : e.shiftKey) || (e.preventDefault(), i(e));
+		},
+		keyShortcutsHint: e(() => (n.sendShortcut?.value ?? "enter") === "mod+enter" ? "Control+Enter Meta+Enter" : "Enter"),
+		send: i
+	};
+};
+//#endregion
+export { n as createComposerControl };
+
+//# sourceMappingURL=composer.js.map

package/dist/headless/composer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composer.js","names":[],"sources":["../../src/headless/composer.ts"],"sourcesContent":["import type { Readable } from '@vielzeug/ripple';\n\nimport { computed } from '@vielzeug/ripple';\n\n/**\n * Keyboard shortcut that triggers a send:\n * - `'enter'` (default) — Enter sends, Shift+Enter inserts a newline.\n * - `'mod+enter'` — Enter always inserts a newline; Ctrl/Cmd+Enter sends.\n */\nexport type SendShortcut = 'enter' | 'mod+enter';\n\nexport type ComposerControlOptions = {\n  disabled?: Readable<boolean | undefined>;\n  /** Blocks further sends (e.g. a send is already in flight) without disabling editing. */\n  loading?: Readable<boolean | undefined>;\n  /** Called for a send attempt that passed the `canSend` guard. */\n  onSend: (event: KeyboardEvent | MouseEvent) => void;\n  sendShortcut?: Readable<SendShortcut | undefined>;\n  value: Readable<string | undefined>;\n};\n\nexport type ComposerControl = {\n  /** Whether the current value is non-blank and the control isn't disabled/loading. */\n  canSend: Readable<boolean>;\n  /** Wire onto the raw `<textarea>`'s `keydown` — intercepts the resolved send shortcut. */\n  handleKeydown: (event: KeyboardEvent) => void;\n  /** `aria-keyshortcuts` value describing the resolved shortcut. */\n  keyShortcutsHint: Readable<string>;\n  /** Attempts a send; no-ops when `canSend` is false. Wire onto the send button's `click`. */\n  send: (event: KeyboardEvent | MouseEvent) => void;\n};\n\nconst isBlank = (value: string | undefined): boolean => !value || value.trim() === '';\n\n/**\n * Send-gesture logic for a message/comment composer — decides *when* a send is allowed\n * and *whether* a given keydown counts as one. Owns no DOM, value state, or event dispatch;\n * the component wires `handleKeydown`/`send` and decides what a send actually does.\n *\n * @example\n * ```ts\n * const composer = createComposerControl({\n *   onSend: (event) => attemptSend(event),\n *   sendShortcut: props['send-shortcut'],\n *   value,\n * });\n * // <textarea @keydown=\"${composer.handleKeydown}\" aria-keyshortcuts=\"${composer.keyShortcutsHint}\">\n * // <button ?disabled=\"${() => !composer.canSend.value}\" @click=\"${composer.send}\">\n * ```\n */\nexport const createComposerControl = (options: ComposerControlOptions): ComposerControl => {\n  const canSend = computed(() => !isBlank(options.value.value) && !options.disabled?.value && !options.loading?.value);\n\n  const send = (event: KeyboardEvent | MouseEvent): void => {\n    if (!canSend.value) return;\n\n    options.onSend(event);\n  };\n\n  const handleKeydown = (event: KeyboardEvent): void => {\n    // A composing IME candidate selection also fires `Enter` — never treat that as a send.\n    if (event.key !== 'Enter' || event.isComposing) return;\n\n    const mode = options.sendShortcut?.value ?? 'enter';\n    const hasModifier = event.metaKey || event.ctrlKey;\n\n    if (mode === 'mod+enter' ? !hasModifier : event.shiftKey) return;\n\n    event.preventDefault();\n    send(event);\n  };\n\n  const keyShortcutsHint = computed(() =>\n    (options.sendShortcut?.value ?? 'enter') === 'mod+enter' ? 'Control+Enter Meta+Enter' : 'Enter',\n  );\n\n  return { canSend, handleKeydown, keyShortcutsHint, send };\n};\n"],"mappings":";;AAgCA,IAAM,KAAW,MAAuC,CAAC,KAAS,EAAM,KAAK,MAAM,IAkBtE,KAAyB,MAAqD;CACzF,IAAM,IAAU,QAAe,CAAC,EAAQ,EAAQ,MAAM,KAAK,KAAK,CAAC,EAAQ,UAAU,SAAS,CAAC,EAAQ,SAAS,KAAK,GAE7G,KAAQ,MAA4C;EACnD,EAAQ,SAEb,EAAQ,OAAO,CAAK;CACtB;CAmBA,OAAO;EAAE;EAAS,gBAjBK,MAA+B;GAEpD,IAAI,EAAM,QAAQ,WAAW,EAAM,aAAa;GAEhD,IAAM,IAAO,EAAQ,cAAc,SAAS,SACtC,IAAc,EAAM,WAAW,EAAM;GAEvC,OAAS,cAAc,CAAC,IAAc,EAAM,cAEhD,EAAM,eAAe,GACrB,EAAK,CAAK;EACZ;EAMiC,kBAJR,SACtB,EAAQ,cAAc,SAAS,aAAa,cAAc,6BAA6B,OAGzD;EAAkB;CAAK;AAC1D"}

package/dist/headless/field-base.cjs

@@ -1,2 +1,2 @@
-let e=require("@vielzeug/ore"),t=require("@vielzeug/ripple");var n=e=>(0,t.computed)(()=>({errorText:e.error?.value??``,helperText:e.helper?.value??``})),r=e=>(0,t.computed)(()=>{let t=e.value?.value??``,n=e.maxLength?.value,r=Number(n),i=Number.isFinite(r)&&r>0?r:null,a=i!==null,o=a?`${t.length} / ${i}`:``,s=a?t.length/i:0;return{counterAtLimit:a?s>=1:!1,counterNearLimit:a?s>=.9&&s<1:!1,counterText:o}}),i=r=>{let i=(0,t.computed)(()=>!!r.disabled?.value),a=r.validateOn,o=r.id??(0,e.createStableId)(r.prefix??`field`),s=(0,e.createStableId)(`helper`),c=e=>{a?.value===e&&r.getFormField?.()?.reportValidity()},l=(0,e.createStableId)(`label`),u=(0,e.createStableId)(`error`),d=r.label??(0,t.computed)(()=>void 0),f=r.hasLabel??(0,t.computed)(()=>!!d.value),p=n({error:r.error,helper:r.helper}),m=(0,t.computed)(()=>p.value.errorText||p.value.helperText?s:null),h=(0,t.computed)(()=>p.value.errorText?u:null),g=(0,t.computed)(()=>p.value.errorText?`true`:null),_=(0,t.computed)(()=>f.value?l:null);return{ariaDescribedBy:m,ariaErrorMessage:h,ariaInvalid:g,ariaLabelledBy:_,ariaProps:()=>({"aria-describedby":m.value,"aria-errormessage":h.value,"aria-invalid":g.value,"aria-labelledby":_.value}),assistiveId:s,disabled:i,errorId:u,errorText:(0,t.computed)(()=>p.value.errorText),fieldId:o,helperText:(0,t.computed)(()=>p.value.helperText),labelId:l,labelVisible:f,triggerValidation:c}};exports.createCounterState=r,exports.createErrorHelperState=n,exports.createField=i;
+const e=require("../_dev.cjs");let t=require("@vielzeug/ore"),n=require("@vielzeug/ripple");var r=e=>(0,n.computed)(()=>({errorText:e.error?.value??``,helperText:e.helper?.value??``})),i=e=>(0,n.computed)(()=>{let t=e.value?.value??``,n=e.maxLength?.value,r=Number(n),i=Number.isFinite(r)&&r>0?r:null,a=i!==null,o=a?`${t.length} / ${i}`:``,s=a?t.length/i:0;return{counterAtLimit:a?s>=1:!1,counterNearLimit:a?s>=.9&&s<1:!1,counterText:o}}),a=(e,t=`counter`)=>e?e.counterAtLimit?`${t} at-limit`:e.counterNearLimit?`${t} near-limit`:t:t,o=i=>{let a=(0,n.computed)(()=>!!i.disabled?.value),o=(0,t.createStableId)(`helper`),s=(0,t.createStableId)(`error`),c=r({error:i.error,helper:i.helper}),l=(0,n.computed)(()=>c.value.errorText||c.value.helperText?o:null),u=(0,n.computed)(()=>c.value.errorText?s:null),d=(0,n.computed)(()=>c.value.errorText?`true`:null),f=null;return{ariaDescribedBy:l,ariaErrorMessage:u,ariaInvalid:d,assistiveId:o,attachFormField:e=>{f=e},disabled:a,errorId:s,errorText:(0,n.computed)(()=>c.value.errorText),helperText:(0,n.computed)(()=>c.value.helperText),triggerValidation:t=>{if(i.validateOn?.value===t){if(!f){e.warn(`triggerValidation() called before attachFormField() — validation will not run. See createTextField()/createChoiceField()/createCheckable()'s attachFormField doc comment.`);return}f.reportValidity()}}}},s=e=>{let r=e.id??(0,t.createStableId)(e.prefix??`field`),i=(0,t.createStableId)(`label`),a=e.label??(0,n.computed)(()=>void 0),o=e.hasLabel??(0,n.computed)(()=>!!a.value);return{ariaLabelledBy:(0,n.computed)(()=>o.value?i:null),fieldId:r,labelId:i,labelVisible:o}},c=e=>({...o(e),...s(e)});exports.counterClassName=a,exports.createAssistiveState=o,exports.createCounterState=i,exports.createErrorHelperState=r,exports.createField=c,exports.createLabelState=s;
 //# sourceMappingURL=field-base.cjs.map