@vielzeug/refine 1.1.1

package/dist/headless/announcer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"announcer.cjs","names":[],"sources":["../../src/headless/announcer.ts"],"sourcesContent":["// ── Live-Region Announcer ─────────────────────────────────────────────────────\n// Programmatic announcements to screen readers without requiring a visible\n// DOM element. Used for status messages, selection feedback, and count updates\n// that live in components where the visible element is hidden or absent.\n//\n// Two visually-hidden live regions are lazily created in `<body>` — one polite,\n// one assertive. The clear-then-set pattern forces AT to re-read even identical\n// consecutive messages.\n//\n// Usage:\n// ```ts\n// import { announce } from './announcer';\n// announce(`${selectedCount} items selected`);\n// announce('Error: field is required', { politeness: 'assertive' });\n// ```\n\nimport { SR_ONLY_INLINE_STYLE } from '../styles';\n\n// ── Visually-hidden style ─────────────────────────────────────────────────────\n// Shared with the CSS-side `.sr-only` mixin — see `src/styles/mixins/accessibility.css.ts`.\n\n// ── Per-document live regions (WeakMap for automatic GC + test isolation) ────\n\ntype DocumentRegions = { assertive?: HTMLElement; polite?: HTMLElement };\n\nconst _regions = new WeakMap<Document, DocumentRegions>();\nconst _timers = new WeakMap<HTMLElement, ReturnType<typeof setTimeout>>();\n\n/** Creates and mounts a visually-hidden live region with the given politeness. */\nconst createRegion = (politeness: 'assertive' | 'polite', doc: Document): HTMLElement => {\n  const el = doc.createElement('div');\n\n  el.setAttribute('aria-live', politeness);\n  el.setAttribute('aria-atomic', 'true');\n  el.setAttribute('data-block-announcer', politeness);\n  el.style.cssText = SR_ONLY_INLINE_STYLE;\n\n  doc.body.appendChild(el);\n\n  return el;\n};\n\n/**\n * Returns the live region for the requested politeness in the given document,\n * creating it on first access. Returns `null` outside a browser context.\n */\nconst getRegion = (politeness: 'assertive' | 'polite', doc: Document): HTMLElement | null => {\n  let regions = _regions.get(doc);\n\n  // Re-create if this specific region was removed from the DOM (e.g. by test teardown).\n  if (regions?.[politeness] && !doc.body.contains(regions[politeness])) {\n    regions[politeness] = undefined;\n  }\n\n  if (!regions?.[politeness]) {\n    if (!regions) {\n      regions = {};\n      _regions.set(doc, regions);\n    }\n\n    regions[politeness] = createRegion(politeness, doc);\n  }\n\n  return regions[politeness] ?? null;\n};\n\n// ── Public API ────────────────────────────────────────────────────────────────\n\nexport type AnnouncePoliteness = 'assertive' | 'polite';\n\nexport type AnnounceOptions = {\n  /**\n   * `'polite'` — queues the announcement; does not interrupt ongoing speech.\n   * `'assertive'` — interrupts immediately. Use sparingly; reserve for errors.\n   *\n   * Default: `'polite'`.\n   */\n  politeness?: AnnouncePoliteness;\n};\n\n/**\n * Announces a message to screen readers via a singleton visually-hidden\n * live region. Safe to call outside a component lifecycle (no cleanup needed).\n *\n * The clear-then-set pattern (50 ms delay) forces AT to re-read even when the\n * message text hasn't changed.\n *\n * @example\n * ```ts\n * announce('3 results found');\n * announce('Session expired', { politeness: 'assertive' });\n * ```\n */\nexport const announce = (message: string, options: AnnounceOptions = {}): void => {\n  if (typeof document === 'undefined') return;\n\n  const politeness = options.politeness ?? 'polite';\n  const region = getRegion(politeness, document);\n\n  if (!region) return;\n\n  // Clear immediately so AT registers a content change, then set after a short\n  // delay. The 50 ms window is the established minimum for most AT/browser combos.\n  region.textContent = '';\n\n  // Use a per-element timer so concurrent polite + assertive announcements don't\n  // clobber each other's pending writes.\n  const existing = _timers.get(region);\n\n  if (existing !== undefined) clearTimeout(existing);\n\n  const timer = setTimeout(() => {\n    region.textContent = message;\n    _timers.delete(region);\n  }, 50);\n\n  _timers.set(region, timer);\n};\n"],"mappings":"0DAyBA,IAAM,EAAW,IAAI,QACf,EAAU,IAAI,QAGd,GAAgB,EAAoC,IAA+B,CACvF,IAAM,EAAK,EAAI,cAAc,KAAK,EASlC,OAPA,EAAG,aAAa,YAAa,CAAU,EACvC,EAAG,aAAa,cAAe,MAAM,EACrC,EAAG,aAAa,uBAAwB,CAAU,EAClD,EAAG,MAAM,QAAU,EAAA,qBAEnB,EAAI,KAAK,YAAY,CAAE,EAEhB,CACT,EAMM,GAAa,EAAoC,IAAsC,CAC3F,IAAI,EAAU,EAAS,IAAI,CAAG,EAgB9B,OAbI,IAAU,IAAe,CAAC,EAAI,KAAK,SAAS,EAAQ,EAAW,IACjE,EAAQ,GAAc,IAAA,IAGnB,IAAU,KACR,IACH,EAAU,CAAC,EACX,EAAS,IAAI,EAAK,CAAO,GAG3B,EAAQ,GAAc,EAAa,EAAY,CAAG,GAG7C,EAAQ,IAAe,IAChC,EA6Ba,GAAY,EAAiB,EAA2B,CAAC,IAAY,CAChF,GAAI,OAAO,SAAa,IAAa,OAGrC,IAAM,EAAS,EADI,EAAQ,YAAc,SACJ,QAAQ,EAE7C,GAAI,CAAC,EAAQ,OAIb,EAAO,YAAc,GAIrB,IAAM,EAAW,EAAQ,IAAI,CAAM,EAE/B,IAAa,IAAA,IAAW,aAAa,CAAQ,EAEjD,IAAM,EAAQ,eAAiB,CAC7B,EAAO,YAAc,EACrB,EAAQ,OAAO,CAAM,CACvB,EAAG,EAAE,EAEL,EAAQ,IAAI,EAAQ,CAAK,CAC3B"}

package/dist/headless/announcer.d.ts

@@ -0,0 +1,25 @@
+export type AnnouncePoliteness = 'assertive' | 'polite';
+export type AnnounceOptions = {
+    /**
+     * `'polite'` — queues the announcement; does not interrupt ongoing speech.
+     * `'assertive'` — interrupts immediately. Use sparingly; reserve for errors.
+     *
+     * Default: `'polite'`.
+     */
+    politeness?: AnnouncePoliteness;
+};
+/**
+ * Announces a message to screen readers via a singleton visually-hidden
+ * live region. Safe to call outside a component lifecycle (no cleanup needed).
+ *
+ * The clear-then-set pattern (50 ms delay) forces AT to re-read even when the
+ * message text hasn't changed.
+ *
+ * @example
+ * ```ts
+ * announce('3 results found');
+ * announce('Session expired', { politeness: 'assertive' });
+ * ```
+ */
+export declare const announce: (message: string, options?: AnnounceOptions) => void;
+//# sourceMappingURL=announcer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"announcer.d.ts","sourceRoot":"","sources":["../../src/headless/announcer.ts"],"names":[],"mappings":"AAoEA,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,QAAQ,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;CACjC,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,GAAI,SAAS,MAAM,EAAE,UAAS,eAAoB,KAAG,IAwBzE,CAAC"}

package/dist/headless/announcer.js

@@ -0,0 +1,24 @@
+import { SR_ONLY_INLINE_STYLE as e } from "../styles/mixins/accessibility.css.js";
+//#region src/headless/announcer.ts
+var t = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), r = (t, n) => {
+	let r = n.createElement("div");
+	return r.setAttribute("aria-live", t), r.setAttribute("aria-atomic", "true"), r.setAttribute("data-block-announcer", t), r.style.cssText = e, n.body.appendChild(r), r;
+}, i = (e, n) => {
+	let i = t.get(n);
+	return i?.[e] && !n.body.contains(i[e]) && (i[e] = void 0), i?.[e] || (i || (i = {}, t.set(n, i)), i[e] = r(e, n)), i[e] ?? null;
+}, a = (e, t = {}) => {
+	if (typeof document > "u") return;
+	let r = i(t.politeness ?? "polite", document);
+	if (!r) return;
+	r.textContent = "";
+	let a = n.get(r);
+	a !== void 0 && clearTimeout(a);
+	let o = setTimeout(() => {
+		r.textContent = e, n.delete(r);
+	}, 50);
+	n.set(r, o);
+};
+//#endregion
+export { a as announce };
+
+//# sourceMappingURL=announcer.js.map

package/dist/headless/announcer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"announcer.js","names":[],"sources":["../../src/headless/announcer.ts"],"sourcesContent":["// ── Live-Region Announcer ─────────────────────────────────────────────────────\n// Programmatic announcements to screen readers without requiring a visible\n// DOM element. Used for status messages, selection feedback, and count updates\n// that live in components where the visible element is hidden or absent.\n//\n// Two visually-hidden live regions are lazily created in `<body>` — one polite,\n// one assertive. The clear-then-set pattern forces AT to re-read even identical\n// consecutive messages.\n//\n// Usage:\n// ```ts\n// import { announce } from './announcer';\n// announce(`${selectedCount} items selected`);\n// announce('Error: field is required', { politeness: 'assertive' });\n// ```\n\nimport { SR_ONLY_INLINE_STYLE } from '../styles';\n\n// ── Visually-hidden style ─────────────────────────────────────────────────────\n// Shared with the CSS-side `.sr-only` mixin — see `src/styles/mixins/accessibility.css.ts`.\n\n// ── Per-document live regions (WeakMap for automatic GC + test isolation) ────\n\ntype DocumentRegions = { assertive?: HTMLElement; polite?: HTMLElement };\n\nconst _regions = new WeakMap<Document, DocumentRegions>();\nconst _timers = new WeakMap<HTMLElement, ReturnType<typeof setTimeout>>();\n\n/** Creates and mounts a visually-hidden live region with the given politeness. */\nconst createRegion = (politeness: 'assertive' | 'polite', doc: Document): HTMLElement => {\n  const el = doc.createElement('div');\n\n  el.setAttribute('aria-live', politeness);\n  el.setAttribute('aria-atomic', 'true');\n  el.setAttribute('data-block-announcer', politeness);\n  el.style.cssText = SR_ONLY_INLINE_STYLE;\n\n  doc.body.appendChild(el);\n\n  return el;\n};\n\n/**\n * Returns the live region for the requested politeness in the given document,\n * creating it on first access. Returns `null` outside a browser context.\n */\nconst getRegion = (politeness: 'assertive' | 'polite', doc: Document): HTMLElement | null => {\n  let regions = _regions.get(doc);\n\n  // Re-create if this specific region was removed from the DOM (e.g. by test teardown).\n  if (regions?.[politeness] && !doc.body.contains(regions[politeness])) {\n    regions[politeness] = undefined;\n  }\n\n  if (!regions?.[politeness]) {\n    if (!regions) {\n      regions = {};\n      _regions.set(doc, regions);\n    }\n\n    regions[politeness] = createRegion(politeness, doc);\n  }\n\n  return regions[politeness] ?? null;\n};\n\n// ── Public API ────────────────────────────────────────────────────────────────\n\nexport type AnnouncePoliteness = 'assertive' | 'polite';\n\nexport type AnnounceOptions = {\n  /**\n   * `'polite'` — queues the announcement; does not interrupt ongoing speech.\n   * `'assertive'` — interrupts immediately. Use sparingly; reserve for errors.\n   *\n   * Default: `'polite'`.\n   */\n  politeness?: AnnouncePoliteness;\n};\n\n/**\n * Announces a message to screen readers via a singleton visually-hidden\n * live region. Safe to call outside a component lifecycle (no cleanup needed).\n *\n * The clear-then-set pattern (50 ms delay) forces AT to re-read even when the\n * message text hasn't changed.\n *\n * @example\n * ```ts\n * announce('3 results found');\n * announce('Session expired', { politeness: 'assertive' });\n * ```\n */\nexport const announce = (message: string, options: AnnounceOptions = {}): void => {\n  if (typeof document === 'undefined') return;\n\n  const politeness = options.politeness ?? 'polite';\n  const region = getRegion(politeness, document);\n\n  if (!region) return;\n\n  // Clear immediately so AT registers a content change, then set after a short\n  // delay. The 50 ms window is the established minimum for most AT/browser combos.\n  region.textContent = '';\n\n  // Use a per-element timer so concurrent polite + assertive announcements don't\n  // clobber each other's pending writes.\n  const existing = _timers.get(region);\n\n  if (existing !== undefined) clearTimeout(existing);\n\n  const timer = setTimeout(() => {\n    region.textContent = message;\n    _timers.delete(region);\n  }, 50);\n\n  _timers.set(region, timer);\n};\n"],"mappings":";;AAyBA,IAAM,oBAAW,IAAI,QAAmC,GAClD,oBAAU,IAAI,QAAoD,GAGlE,KAAgB,GAAoC,MAA+B;CACvF,IAAM,IAAK,EAAI,cAAc,KAAK;CASlC,OAPA,EAAG,aAAa,aAAa,CAAU,GACvC,EAAG,aAAa,eAAe,MAAM,GACrC,EAAG,aAAa,wBAAwB,CAAU,GAClD,EAAG,MAAM,UAAU,GAEnB,EAAI,KAAK,YAAY,CAAE,GAEhB;AACT,GAMM,KAAa,GAAoC,MAAsC;CAC3F,IAAI,IAAU,EAAS,IAAI,CAAG;CAgB9B,OAbI,IAAU,MAAe,CAAC,EAAI,KAAK,SAAS,EAAQ,EAAW,MACjE,EAAQ,KAAc,KAAA,IAGnB,IAAU,OACR,MACH,IAAU,CAAC,GACX,EAAS,IAAI,GAAK,CAAO,IAG3B,EAAQ,KAAc,EAAa,GAAY,CAAG,IAG7C,EAAQ,MAAe;AAChC,GA6Ba,KAAY,GAAiB,IAA2B,CAAC,MAAY;CAChF,IAAI,OAAO,WAAa,KAAa;CAGrC,IAAM,IAAS,EADI,EAAQ,cAAc,UACJ,QAAQ;CAE7C,IAAI,CAAC,GAAQ;CAIb,EAAO,cAAc;CAIrB,IAAM,IAAW,EAAQ,IAAI,CAAM;CAEnC,AAAI,MAAa,KAAA,KAAW,aAAa,CAAQ;CAEjD,IAAM,IAAQ,iBAAiB;EAE7B,AADA,EAAO,cAAc,GACrB,EAAQ,OAAO,CAAM;CACvB,GAAG,EAAE;CAEL,EAAQ,IAAI,GAAQ,CAAK;AAC3B"}

package/dist/headless/checkable.cjs

@@ -0,0 +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;
+//# sourceMappingURL=checkable.cjs.map

package/dist/headless/checkable.cjs.map

@@ -0,0 +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"}

package/dist/headless/checkable.d.ts

@@ -0,0 +1,42 @@
+import { type Readable, type Signal } from '@vielzeug/ripple';
+import { type ControlValidationMode, type FieldHandle } from './field-base';
+export type CheckableChangePayload = {
+    checked: boolean;
+    originalEvent?: Event;
+    value: string;
+};
+export type CheckableOptions = {
+    checked: Readable<boolean | undefined>;
+    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;
+    };
+    helper?: Readable<string | undefined>;
+    indeterminate?: Readable<boolean | undefined>;
+    onToggle?: (payload: CheckableChangePayload) => void;
+    prefix?: string;
+    /** `AbortSignal` from the component lifecycle. All reactive subscriptions are torn down on abort. */
+    signal: AbortSignal;
+    validateOn?: Readable<ControlValidationMode>;
+    value: Readable<string | undefined>;
+};
+export type CheckableHandle = FieldHandle & {
+    /** The form submission value: null when unchecked/indeterminate, the value string when checked. */
+    checkableFormValue: Readable<string | null>;
+    checked: Signal<boolean>;
+    handleClick: (event: MouseEvent) => boolean;
+    handleKeydown: (event: KeyboardEvent) => boolean;
+    indeterminate: Signal<boolean>;
+    toggle: (event: Event) => void;
+};
+export declare const createCheckable: (options: CheckableOptions) => CheckableHandle;
+//# sourceMappingURL=checkable.d.ts.map

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

@@ -0,0 +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"}

package/dist/headless/checkable.js

@@ -0,0 +1,36 @@
+import { createField as e } from "./field-base.js";
+import { syncedSignal as t } from "./signals.js";
+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) => ({
+		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));
+				return;
+			}
+			a.clearIndeterminateFirst && s.value || (o.value = !o.value), s.value = !1, a.onToggle?.(u(e));
+		}
+	}, f = n({
+		disabled: l.disabled,
+		onPress: (e) => d(e)
+	});
+	return {
+		...l,
+		checkableFormValue: c,
+		checked: o,
+		handleClick: f.handleClick,
+		handleKeydown: f.handleKeydown,
+		indeterminate: s,
+		toggle: d
+	};
+};
+//#endregion
+export { a as createCheckable };
+
+//# sourceMappingURL=checkable.js.map

package/dist/headless/checkable.js.map

@@ -0,0 +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"}

package/dist/headless/choice-field.cjs

@@ -0,0 +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;
+//# sourceMappingURL=choice-field.cjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,36 @@
+import { type Readable } from '@vielzeug/ripple';
+import { type FieldHandle, type FieldOptions } from './field-base';
+export type ChoiceChangeDetail = {
+    labels: string[];
+    originalEvent?: Event;
+    values: string[];
+};
+export type ChoiceFieldOptions = FieldOptions & {
+    multiple?: Readable<boolean | undefined>;
+    /** `AbortSignal` from the component lifecycle. All internal subscriptions are disposed on abort. */
+    signal: AbortSignal;
+    /**
+     * Current selection value(s). Accepts a comma-separated string
+     * (legacy/single-select form serialisation) or a `string[]` array.
+     * The field normalises both formats internally via `parseChoiceValues`.
+     */
+    value: Readable<string | string[] | undefined>;
+};
+export type ChoiceFieldHandle = FieldHandle & {
+    clear: () => void;
+    formValue: Readable<string>;
+    removeValue: (value: string) => void;
+    selectedValue: Readable<string | undefined>;
+    selectedValues: Readable<string[]>;
+    selectValue: (value: string) => void;
+    setValues: (values: string[]) => void;
+    /**
+     * Toggles `value` in the selection.
+     * - **Multiple mode**: adds if absent, removes if present.
+     * - **Single mode**: always selects `value` (acts like `selectValue` — cannot
+     *   deselect; use `clear()` to reset a single-select field).
+     */
+    toggleValue: (value: string) => void;
+};
+export declare const createChoiceField: (options: ChoiceFieldOptions) => ChoiceFieldHandle;
+//# sourceMappingURL=choice-field.d.ts.map

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

@@ -0,0 +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"}

package/dist/headless/choice-field.js

@@ -0,0 +1,42 @@
+import { createField as e } from "./field-base.js";
+import { computed as t, signal as n, watch as r } from "@vielzeug/ripple";
+//#region src/headless/choice-field.ts
+var i = (e) => e ? Array.isArray(e) ? e.filter(Boolean) : e.split(",").map((e) => e.trim()).filter(Boolean) : [], a = (a) => {
+	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) => {
+		o.value = l(e);
+	}, d = () => u([]), f = (e) => {
+		o.value = o.value.filter((t) => t !== e);
+	}, p = (e) => {
+		if (s.value) {
+			o.value.includes(e) || u([...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));
+		a.signal.addEventListener("abort", () => e.dispose(), { once: !0 });
+	}
+	return {
+		...g,
+		clear: d,
+		formValue: c,
+		removeValue: f,
+		selectedValue: t(() => o.value[0]),
+		selectedValues: o,
+		selectValue: p,
+		setValues: u,
+		toggleValue: m
+	};
+};
+//#endregion
+export { a as createChoiceField };
+
+//# sourceMappingURL=choice-field.js.map

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

@@ -0,0 +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"}

package/dist/headless/datagrid.cjs

@@ -0,0 +1,2 @@
+const e=require("./paginated-list.cjs"),t=require("./selection-control.cjs"),n=require("./sort-control.cjs");let r=require("@vielzeug/ripple");var i=i=>{let a=n.createSortControl({columns:i.columns,items:i.items,onSortChange:i.onSortChange}),o=e.createPaginatedList({getItems:()=>a.sortedItems.value,pageSize:(0,r.computed)(()=>{let e=i.pageSize();return e<=0?2**53-1:e})}),s=(0,r.computed)(()=>a.sortedItems.value.length),c=(0,r.computed)(()=>i.pageSize()<=0?a.sortedItems.value:o.pageItems.value),l=e=>{a.sortBy(e),o.reset()},u=(e,t)=>{a.sortTo(e,t),o.reset()},d=t.createSelectionControl({getRowKey:i.getRowKey,onSelectionChange:i.onSelectionChange,pageItems:()=>o.pageItems.value,selectionMode:i.selectionMode}),f=(0,r.computed)(()=>i.items.value.filter(e=>d.selectedKeys.value.has(i.getRowKey(e))));return{clearSelection:d.clearSelection,currentPageItems:c,goToPage:e=>{Number.isFinite(e)&&o.goTo(Math.max(0,e))},hasNextPage:o.hasNext,hasPrevPage:o.hasPrev,isAllSelected:d.isAllSelected,isSelected:d.isSelected,nextPage:o.next,pageCount:o.pageCount,pageIndex:o.pageIndex,prevPage:o.prev,selectAll:d.selectAll,selectedKeys:d.selectedKeys,selectedRows:f,setSelection:d.setSelection,sortBy:l,sortState:a.sortState,sortTo:u,toggleRow:d.toggleRow,totalItems:s}};exports.createDataGridControl=i;
+//# sourceMappingURL=datagrid.cjs.map

package/dist/headless/datagrid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"datagrid.cjs","names":[],"sources":["../../src/headless/datagrid.ts"],"sourcesContent":["import { computed, type Readable } from '@vielzeug/ripple';\n\nimport { createPaginatedList } from './paginated-list';\nimport { createSelectionControl } from './selection-control';\nimport { createSortControl } from './sort-control';\n\n// ── Types ──────────────────────────────────────────────────────────────────────\n\n/** Sort direction for a column. */\nexport type SortDirection = 'asc' | 'desc' | 'none';\n\n/** Per-column sort state. */\nexport type SortState = {\n  /** Current sort direction. */\n  direction: SortDirection;\n  /** The column key being sorted. Empty string when unsorted. */\n  key: string;\n};\n\n/** Column definition for the datagrid. */\nexport type DataGridColumn<T = Record<string, unknown>> = {\n  /** Text alignment for the column: `'left'` | `'center'` | `'right'`. Defaults to `'left'`. */\n  align?: 'left' | 'center' | 'right';\n  /**\n   * Custom cell renderer. Receives the row item and returns a string.\n   * Use for formatted values (e.g. dates, currency, booleans).\n   */\n  cell?: (item: T) => string;\n  /** Accessible label for the column header. Defaults to `label`. */\n  headerLabel?: string;\n  /** Column key — must match a property of the row object. */\n  key: string;\n  /** Display label for the column header. */\n  label: string;\n  /**\n   * Renders the expanded detail panel for a row. When provided on any column,\n   * `<ore-datagrid expandable>` shows a toggle button in each row.\n   * Receives the full row item and returns an HTML string.\n   *\n   * @security The returned string is inserted via ore's `raw()` directive — it participates\n   * in any sanitizer registered with `setRawSanitizer()`, but if none is registered it is\n   * inserted as-is. If any part of the returned markup is derived from untrusted data\n   * (row/user content), sanitize it yourself before returning (e.g. with DOMPurify).\n   *\n   * @example\n   * ```js\n   * import DOMPurify from 'dompurify';\n   *\n   * grid.columns = [{\n   *   key: 'name', label: 'Name',\n   *   renderExpanded: (row) => DOMPurify.sanitize(`<div class=\"detail\"><b>${row.name}</b>: ${row.bio}</div>`),\n   * }];\n   * ```\n   */\n  renderExpanded?: (item: T) => string;\n  /** Whether the column can be resized via a drag handle. Defaults to `false`. */\n  resizable?: boolean;\n  /** Whether the column is sortable. Defaults to `false`. */\n  sortable?: boolean;\n  /**\n   * Custom sort key extractor for client-side sorting.\n   * Return a `number` or `string` for comparison.\n   * When omitted, the column's `key` property is used as a plain property lookup.\n   *\n   * @example\n   * ```ts\n   * { key: 'createdAt', label: 'Date', sortValue: (row) => new Date(row.createdAt).getTime() }\n   * ```\n   */\n  sortValue?: (item: T) => number | string;\n  /** Column width (any valid CSS width value, e.g. `'12rem'`). */\n  width?: string;\n};\n\n/** Row selection mode. */\nexport type SelectionMode = 'multi' | 'none' | 'single';\n\nexport type DataGridControlOptions<T = Record<string, unknown>> = {\n  /** Returns the current column definitions reactively. */\n  columns: () => DataGridColumn<T>[];\n  /** Returns a unique string key for each row item. */\n  getRowKey: (item: T) => string;\n  /**\n   * Reactive signal of the current row items.\n   *\n   * For server-side sorting, pass a signal whose value is the pre-sorted result\n   * from your server. For client-side sorting, pass a plain signal wrapping your\n   * full dataset — the control will sort it automatically via `sortBy()`.\n   */\n  items: Readable<T[]>;\n  /** Called when selection changes. Receives the full set of selected keys. */\n  onSelectionChange?: (keys: Set<string>) => void;\n  /** Called when sort state changes. */\n  onSortChange?: (sort: SortState) => void;\n  /** Returns the current page size reactively. Use `0` to disable pagination. */\n  pageSize: () => number;\n  /** Returns the current selection mode reactively. */\n  selectionMode: () => SelectionMode;\n  /** `AbortSignal` from the component lifecycle. */\n  signal: AbortSignal;\n};\n\nexport type DataGridControl<T = Record<string, unknown>> = {\n  /** Deselect all rows. */\n  clearSelection(): void;\n  /** Current page items (sorted + paginated). Reactive signal. */\n  readonly currentPageItems: Readable<T[]>;\n  /** Go to an absolute page index. The index is clamped to the valid page range `[0, pageCount - 1]`. */\n  goToPage(index: number): void;\n  /** Whether there is a next page. Reactive signal. */\n  readonly hasNextPage: Readable<boolean>;\n  /** Whether there is a previous page. Reactive signal. */\n  readonly hasPrevPage: Readable<boolean>;\n  /** Whether all current-page rows are selected. */\n  isAllSelected(): boolean;\n  /** Whether a given row key is selected. */\n  isSelected(key: string): boolean;\n  /** Navigate to the next page. */\n  nextPage(): void;\n  /** Total page count. Reactive signal. */\n  readonly pageCount: Readable<number>;\n  /** Current 0-based page index. Reactive signal. */\n  readonly pageIndex: Readable<number>;\n  /** Navigate to the previous page. */\n  prevPage(): void;\n  /** Select all rows on the current page. */\n  selectAll(): void;\n  /** Current selected row keys. Reactive signal. Returns a snapshot copy — mutating the returned set has no effect on reactive state; use `toggleRow`, `selectAll`, `setSelection`, or `clearSelection` to update selection. */\n  readonly selectedKeys: Readable<ReadonlySet<string>>;\n  /** All rows whose keys are in `selectedKeys`. Reactive signal. */\n  readonly selectedRows: Readable<T[]>;\n  /** Set the selection to an explicit set of keys. */\n  setSelection(keys: Set<string>): void;\n  /** Sort by the given column key — cycles asc → desc → none. */\n  sortBy(key: string): void;\n  /** Current sort state. Reactive signal. */\n  readonly sortState: Readable<SortState>;\n  /** Set sort to an explicit key and direction. Passing `'none'` clears the sort. */\n  sortTo(key: string, direction: SortDirection): void;\n  /** Toggle selection for a single row. */\n  toggleRow(key: string): void;\n  /** Total item count across all pages. Reactive signal. */\n  readonly totalItems: Readable<number>;\n};\n\n// ── Implementation ─────────────────────────────────────────────────────────────\n\n/**\n * Headless datagrid control — sorting, pagination, and row selection.\n *\n * Composed from three focused primitives:\n * - `createSortControl` — client-side sorting with a cycle (asc → desc → none)\n * - `createPaginatedList` — reactive pagination over the sorted items\n * - `createSelectionControl` — single/multi/none row selection\n *\n * All mutable state is exposed as reactive `Reactive` values so\n * consumers can bind directly in templates without manual invalidation.\n *\n * @example\n * ```ts\n * const rows = signal(myItems);\n * const ctrl = createDataGridControl({\n *   columns: () => myColumns,\n *   items: rows,\n *   getRowKey: (item) => item.id,\n *   selectionMode: () => 'multi',\n *   pageSize: () => 20,\n *   signal: lifecycleSignal(onCleanup),\n * });\n * ```\n */\nexport const createDataGridControl = <T = Record<string, unknown>>(\n  options: DataGridControlOptions<T>,\n): DataGridControl<T> => {\n  // ── Sort ──────────────────────────────────────────────────────────────────\n  const sort = createSortControl<T>({\n    columns: options.columns,\n    items: options.items,\n    onSortChange: options.onSortChange,\n  });\n\n  // ── Pagination ────────────────────────────────────────────────────────────\n  // pageSize 0 means \"disabled\" — pass Number.MAX_SAFE_INTEGER so all items fit on one page.\n  const _pageSize = computed(() => {\n    const ps = options.pageSize();\n\n    return ps <= 0 ? Number.MAX_SAFE_INTEGER : ps;\n  });\n\n  const pagination = createPaginatedList({\n    getItems: () => sort.sortedItems.value,\n    pageSize: _pageSize,\n  });\n\n  const totalItems = computed(() => sort.sortedItems.value.length);\n\n  // When pageSize is 0 (disabled), bypass pagination and show all items.\n  const currentPageItems = computed<T[]>(() =>\n    options.pageSize() <= 0 ? sort.sortedItems.value : pagination.pageItems.value,\n  );\n\n  // Reset to page 0 whenever sort changes.\n  const _sortByAndReset = (key: string): void => {\n    sort.sortBy(key);\n    pagination.reset();\n  };\n\n  const _sortToAndReset = (key: string, direction: SortDirection): void => {\n    sort.sortTo(key, direction);\n    pagination.reset();\n  };\n\n  // ── Selection ─────────────────────────────────────────────────────────────\n  const selection = createSelectionControl<T>({\n    getRowKey: options.getRowKey,\n    onSelectionChange: options.onSelectionChange,\n    pageItems: () => pagination.pageItems.value,\n    selectionMode: options.selectionMode,\n  });\n\n  const selectedRows = computed<T[]>(() =>\n    options.items.value.filter((item) => selection.selectedKeys.value.has(options.getRowKey(item))),\n  );\n\n  return {\n    clearSelection: selection.clearSelection,\n    currentPageItems,\n    goToPage: (index: number) => {\n      if (!Number.isFinite(index)) return;\n\n      pagination.goTo(Math.max(0, index));\n    },\n    hasNextPage: pagination.hasNext,\n    hasPrevPage: pagination.hasPrev,\n    isAllSelected: selection.isAllSelected,\n    isSelected: selection.isSelected,\n    nextPage: pagination.next,\n    pageCount: pagination.pageCount,\n    pageIndex: pagination.pageIndex,\n    prevPage: pagination.prev,\n    selectAll: selection.selectAll,\n    selectedKeys: selection.selectedKeys,\n    selectedRows,\n    setSelection: selection.setSelection,\n    sortBy: _sortByAndReset,\n    sortState: sort.sortState,\n    sortTo: _sortToAndReset,\n    toggleRow: selection.toggleRow,\n    totalItems,\n  };\n};\n"],"mappings":"+IA2KA,IAAa,EACX,GACuB,CAEvB,IAAM,EAAO,EAAA,kBAAqB,CAChC,QAAS,EAAQ,QACjB,MAAO,EAAQ,MACf,aAAc,EAAQ,YACxB,CAAC,EAUK,EAAa,EAAA,oBAAoB,CACrC,aAAgB,EAAK,YAAY,MACjC,UAAA,EAAA,EAAA,SAAA,KAR+B,CAC/B,IAAM,EAAK,EAAQ,SAAS,EAE5B,OAAO,GAAM,UAA8B,CAC7C,CAIY,CACZ,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KAA4B,EAAK,YAAY,MAAM,MAAM,EAGzD,GAAA,EAAA,EAAA,SAAA,KACJ,EAAQ,SAAS,GAAK,EAAI,EAAK,YAAY,MAAQ,EAAW,UAAU,KAC1E,EAGM,EAAmB,GAAsB,CAC7C,EAAK,OAAO,CAAG,EACf,EAAW,MAAM,CACnB,EAEM,GAAmB,EAAa,IAAmC,CACvE,EAAK,OAAO,EAAK,CAAS,EAC1B,EAAW,MAAM,CACnB,EAGM,EAAY,EAAA,uBAA0B,CAC1C,UAAW,EAAQ,UACnB,kBAAmB,EAAQ,kBAC3B,cAAiB,EAAW,UAAU,MACtC,cAAe,EAAQ,aACzB,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KACJ,EAAQ,MAAM,MAAM,OAAQ,GAAS,EAAU,aAAa,MAAM,IAAI,EAAQ,UAAU,CAAI,CAAC,CAAC,CAChG,EAEA,MAAO,CACL,eAAgB,EAAU,eAC1B,mBACA,SAAW,GAAkB,CACtB,OAAO,SAAS,CAAK,GAE1B,EAAW,KAAK,KAAK,IAAI,EAAG,CAAK,CAAC,CACpC,EACA,YAAa,EAAW,QACxB,YAAa,EAAW,QACxB,cAAe,EAAU,cACzB,WAAY,EAAU,WACtB,SAAU,EAAW,KACrB,UAAW,EAAW,UACtB,UAAW,EAAW,UACtB,SAAU,EAAW,KACrB,UAAW,EAAU,UACrB,aAAc,EAAU,aACxB,eACA,aAAc,EAAU,aACxB,OAAQ,EACR,UAAW,EAAK,UAChB,OAAQ,EACR,UAAW,EAAU,UACrB,YACF,CACF"}

package/dist/headless/datagrid.d.ts

@@ -0,0 +1,158 @@
+import { type Readable } from '@vielzeug/ripple';
+/** Sort direction for a column. */
+export type SortDirection = 'asc' | 'desc' | 'none';
+/** Per-column sort state. */
+export type SortState = {
+    /** Current sort direction. */
+    direction: SortDirection;
+    /** The column key being sorted. Empty string when unsorted. */
+    key: string;
+};
+/** Column definition for the datagrid. */
+export type DataGridColumn<T = Record<string, unknown>> = {
+    /** Text alignment for the column: `'left'` | `'center'` | `'right'`. Defaults to `'left'`. */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * Custom cell renderer. Receives the row item and returns a string.
+     * Use for formatted values (e.g. dates, currency, booleans).
+     */
+    cell?: (item: T) => string;
+    /** Accessible label for the column header. Defaults to `label`. */
+    headerLabel?: string;
+    /** Column key — must match a property of the row object. */
+    key: string;
+    /** Display label for the column header. */
+    label: string;
+    /**
+     * Renders the expanded detail panel for a row. When provided on any column,
+     * `<ore-datagrid expandable>` shows a toggle button in each row.
+     * Receives the full row item and returns an HTML string.
+     *
+     * @security The returned string is inserted via ore's `raw()` directive — it participates
+     * in any sanitizer registered with `setRawSanitizer()`, but if none is registered it is
+     * inserted as-is. If any part of the returned markup is derived from untrusted data
+     * (row/user content), sanitize it yourself before returning (e.g. with DOMPurify).
+     *
+     * @example
+     * ```js
+     * import DOMPurify from 'dompurify';
+     *
+     * grid.columns = [{
+     *   key: 'name', label: 'Name',
+     *   renderExpanded: (row) => DOMPurify.sanitize(`<div class="detail"><b>${row.name}</b>: ${row.bio}</div>`),
+     * }];
+     * ```
+     */
+    renderExpanded?: (item: T) => string;
+    /** Whether the column can be resized via a drag handle. Defaults to `false`. */
+    resizable?: boolean;
+    /** Whether the column is sortable. Defaults to `false`. */
+    sortable?: boolean;
+    /**
+     * Custom sort key extractor for client-side sorting.
+     * Return a `number` or `string` for comparison.
+     * When omitted, the column's `key` property is used as a plain property lookup.
+     *
+     * @example
+     * ```ts
+     * { key: 'createdAt', label: 'Date', sortValue: (row) => new Date(row.createdAt).getTime() }
+     * ```
+     */
+    sortValue?: (item: T) => number | string;
+    /** Column width (any valid CSS width value, e.g. `'12rem'`). */
+    width?: string;
+};
+/** Row selection mode. */
+export type SelectionMode = 'multi' | 'none' | 'single';
+export type DataGridControlOptions<T = Record<string, unknown>> = {
+    /** Returns the current column definitions reactively. */
+    columns: () => DataGridColumn<T>[];
+    /** Returns a unique string key for each row item. */
+    getRowKey: (item: T) => string;
+    /**
+     * Reactive signal of the current row items.
+     *
+     * For server-side sorting, pass a signal whose value is the pre-sorted result
+     * from your server. For client-side sorting, pass a plain signal wrapping your
+     * full dataset — the control will sort it automatically via `sortBy()`.
+     */
+    items: Readable<T[]>;
+    /** Called when selection changes. Receives the full set of selected keys. */
+    onSelectionChange?: (keys: Set<string>) => void;
+    /** Called when sort state changes. */
+    onSortChange?: (sort: SortState) => void;
+    /** Returns the current page size reactively. Use `0` to disable pagination. */
+    pageSize: () => number;
+    /** Returns the current selection mode reactively. */
+    selectionMode: () => SelectionMode;
+    /** `AbortSignal` from the component lifecycle. */
+    signal: AbortSignal;
+};
+export type DataGridControl<T = Record<string, unknown>> = {
+    /** Deselect all rows. */
+    clearSelection(): void;
+    /** Current page items (sorted + paginated). Reactive signal. */
+    readonly currentPageItems: Readable<T[]>;
+    /** Go to an absolute page index. The index is clamped to the valid page range `[0, pageCount - 1]`. */
+    goToPage(index: number): void;
+    /** Whether there is a next page. Reactive signal. */
+    readonly hasNextPage: Readable<boolean>;
+    /** Whether there is a previous page. Reactive signal. */
+    readonly hasPrevPage: Readable<boolean>;
+    /** Whether all current-page rows are selected. */
+    isAllSelected(): boolean;
+    /** Whether a given row key is selected. */
+    isSelected(key: string): boolean;
+    /** Navigate to the next page. */
+    nextPage(): void;
+    /** Total page count. Reactive signal. */
+    readonly pageCount: Readable<number>;
+    /** Current 0-based page index. Reactive signal. */
+    readonly pageIndex: Readable<number>;
+    /** Navigate to the previous page. */
+    prevPage(): void;
+    /** Select all rows on the current page. */
+    selectAll(): void;
+    /** Current selected row keys. Reactive signal. Returns a snapshot copy — mutating the returned set has no effect on reactive state; use `toggleRow`, `selectAll`, `setSelection`, or `clearSelection` to update selection. */
+    readonly selectedKeys: Readable<ReadonlySet<string>>;
+    /** All rows whose keys are in `selectedKeys`. Reactive signal. */
+    readonly selectedRows: Readable<T[]>;
+    /** Set the selection to an explicit set of keys. */
+    setSelection(keys: Set<string>): void;
+    /** Sort by the given column key — cycles asc → desc → none. */
+    sortBy(key: string): void;
+    /** Current sort state. Reactive signal. */
+    readonly sortState: Readable<SortState>;
+    /** Set sort to an explicit key and direction. Passing `'none'` clears the sort. */
+    sortTo(key: string, direction: SortDirection): void;
+    /** Toggle selection for a single row. */
+    toggleRow(key: string): void;
+    /** Total item count across all pages. Reactive signal. */
+    readonly totalItems: Readable<number>;
+};
+/**
+ * Headless datagrid control — sorting, pagination, and row selection.
+ *
+ * Composed from three focused primitives:
+ * - `createSortControl` — client-side sorting with a cycle (asc → desc → none)
+ * - `createPaginatedList` — reactive pagination over the sorted items
+ * - `createSelectionControl` — single/multi/none row selection
+ *
+ * All mutable state is exposed as reactive `Reactive` values so
+ * consumers can bind directly in templates without manual invalidation.
+ *
+ * @example
+ * ```ts
+ * const rows = signal(myItems);
+ * const ctrl = createDataGridControl({
+ *   columns: () => myColumns,
+ *   items: rows,
+ *   getRowKey: (item) => item.id,
+ *   selectionMode: () => 'multi',
+ *   pageSize: () => 20,
+ *   signal: lifecycleSignal(onCleanup),
+ * });
+ * ```
+ */
+export declare const createDataGridControl: <T = Record<string, unknown>>(options: DataGridControlOptions<T>) => DataGridControl<T>;
+//# sourceMappingURL=datagrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"datagrid.d.ts","sourceRoot":"","sources":["../../src/headless/datagrid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAQ3D,mCAAmC;AACnC,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpD,6BAA6B;AAC7B,MAAM,MAAM,SAAS,GAAG;IACtB,8BAA8B;IAC9B,SAAS,EAAE,aAAa,CAAC;IACzB,+DAA+D;IAC/D,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,0CAA0C;AAC1C,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IACxD,8FAA8F;IAC9F,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC3B,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,GAAG,EAAE,MAAM,CAAC;IACZ,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;;;;;;;;;;;;OAmBG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,gFAAgF;IAChF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;IACzC,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,0BAA0B;AAC1B,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExD,MAAM,MAAM,sBAAsB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IAChE,yDAAyD;IACzD,OAAO,EAAE,MAAM,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,qDAAqD;IACrD,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B;;;;;;OAMG;IACH,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;IACrB,6EAA6E;IAC7E,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAChD,sCAAsC;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,+EAA+E;IAC/E,QAAQ,EAAE,MAAM,MAAM,CAAC;IACvB,qDAAqD;IACrD,aAAa,EAAE,MAAM,aAAa,CAAC;IACnC,kDAAkD;IAClD,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IACzD,yBAAyB;IACzB,cAAc,IAAI,IAAI,CAAC;IACvB,gEAAgE;IAChE,QAAQ,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;IACzC,uGAAuG;IACvG,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,qDAAqD;IACrD,QAAQ,CAAC,WAAW,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IACxC,yDAAyD;IACzD,QAAQ,CAAC,WAAW,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IACxC,kDAAkD;IAClD,aAAa,IAAI,OAAO,CAAC;IACzB,2CAA2C;IAC3C,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,iCAAiC;IACjC,QAAQ,IAAI,IAAI,CAAC;IACjB,yCAAyC;IACzC,QAAQ,CAAC,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IACrC,mDAAmD;IACnD,QAAQ,CAAC,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IACrC,qCAAqC;IACrC,QAAQ,IAAI,IAAI,CAAC;IACjB,2CAA2C;IAC3C,SAAS,IAAI,IAAI,CAAC;IAClB,8NAA8N;IAC9N,QAAQ,CAAC,YAAY,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;IACrD,kEAAkE;IAClE,QAAQ,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;IACrC,oDAAoD;IACpD,YAAY,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IACtC,+DAA+D;IAC/D,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,2CAA2C;IAC3C,QAAQ,CAAC,SAAS,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;IACxC,mFAAmF;IACnF,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,GAAG,IAAI,CAAC;IACpD,yCAAyC;IACzC,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,0DAA0D;IAC1D,QAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CACvC,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,qBAAqB,GAAI,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/D,SAAS,sBAAsB,CAAC,CAAC,CAAC,KACjC,eAAe,CAAC,CAAC,CA6EnB,CAAC"}

package/dist/headless/datagrid.js

@@ -0,0 +1,55 @@
+import { createPaginatedList as e } from "./paginated-list.js";
+import { createSelectionControl as t } from "./selection-control.js";
+import { createSortControl as n } from "./sort-control.js";
+import { computed as r } from "@vielzeug/ripple";
+//#region src/headless/datagrid.ts
+var i = (i) => {
+	let a = n({
+		columns: i.columns,
+		items: i.items,
+		onSortChange: i.onSortChange
+	}), o = e({
+		getItems: () => a.sortedItems.value,
+		pageSize: r(() => {
+			let e = i.pageSize();
+			return e <= 0 ? 2 ** 53 - 1 : e;
+		})
+	}), s = r(() => a.sortedItems.value.length), c = r(() => i.pageSize() <= 0 ? a.sortedItems.value : o.pageItems.value), l = (e) => {
+		a.sortBy(e), o.reset();
+	}, u = (e, t) => {
+		a.sortTo(e, t), o.reset();
+	}, d = t({
+		getRowKey: i.getRowKey,
+		onSelectionChange: i.onSelectionChange,
+		pageItems: () => o.pageItems.value,
+		selectionMode: i.selectionMode
+	}), f = r(() => i.items.value.filter((e) => d.selectedKeys.value.has(i.getRowKey(e))));
+	return {
+		clearSelection: d.clearSelection,
+		currentPageItems: c,
+		goToPage: (e) => {
+			Number.isFinite(e) && o.goTo(Math.max(0, e));
+		},
+		hasNextPage: o.hasNext,
+		hasPrevPage: o.hasPrev,
+		isAllSelected: d.isAllSelected,
+		isSelected: d.isSelected,
+		nextPage: o.next,
+		pageCount: o.pageCount,
+		pageIndex: o.pageIndex,
+		prevPage: o.prev,
+		selectAll: d.selectAll,
+		selectedKeys: d.selectedKeys,
+		selectedRows: f,
+		setSelection: d.setSelection,
+		sortBy: l,
+		sortState: a.sortState,
+		sortTo: u,
+		toggleRow: d.toggleRow,
+		totalItems: s
+	};
+};
+//#endregion
+export { i as createDataGridControl };
+
+//# sourceMappingURL=datagrid.js.map

package/dist/headless/datagrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datagrid.js","names":[],"sources":["../../src/headless/datagrid.ts"],"sourcesContent":["import { computed, type Readable } from '@vielzeug/ripple';\n\nimport { createPaginatedList } from './paginated-list';\nimport { createSelectionControl } from './selection-control';\nimport { createSortControl } from './sort-control';\n\n// ── Types ──────────────────────────────────────────────────────────────────────\n\n/** Sort direction for a column. */\nexport type SortDirection = 'asc' | 'desc' | 'none';\n\n/** Per-column sort state. */\nexport type SortState = {\n  /** Current sort direction. */\n  direction: SortDirection;\n  /** The column key being sorted. Empty string when unsorted. */\n  key: string;\n};\n\n/** Column definition for the datagrid. */\nexport type DataGridColumn<T = Record<string, unknown>> = {\n  /** Text alignment for the column: `'left'` | `'center'` | `'right'`. Defaults to `'left'`. */\n  align?: 'left' | 'center' | 'right';\n  /**\n   * Custom cell renderer. Receives the row item and returns a string.\n   * Use for formatted values (e.g. dates, currency, booleans).\n   */\n  cell?: (item: T) => string;\n  /** Accessible label for the column header. Defaults to `label`. */\n  headerLabel?: string;\n  /** Column key — must match a property of the row object. */\n  key: string;\n  /** Display label for the column header. */\n  label: string;\n  /**\n   * Renders the expanded detail panel for a row. When provided on any column,\n   * `<ore-datagrid expandable>` shows a toggle button in each row.\n   * Receives the full row item and returns an HTML string.\n   *\n   * @security The returned string is inserted via ore's `raw()` directive — it participates\n   * in any sanitizer registered with `setRawSanitizer()`, but if none is registered it is\n   * inserted as-is. If any part of the returned markup is derived from untrusted data\n   * (row/user content), sanitize it yourself before returning (e.g. with DOMPurify).\n   *\n   * @example\n   * ```js\n   * import DOMPurify from 'dompurify';\n   *\n   * grid.columns = [{\n   *   key: 'name', label: 'Name',\n   *   renderExpanded: (row) => DOMPurify.sanitize(`<div class=\"detail\"><b>${row.name}</b>: ${row.bio}</div>`),\n   * }];\n   * ```\n   */\n  renderExpanded?: (item: T) => string;\n  /** Whether the column can be resized via a drag handle. Defaults to `false`. */\n  resizable?: boolean;\n  /** Whether the column is sortable. Defaults to `false`. */\n  sortable?: boolean;\n  /**\n   * Custom sort key extractor for client-side sorting.\n   * Return a `number` or `string` for comparison.\n   * When omitted, the column's `key` property is used as a plain property lookup.\n   *\n   * @example\n   * ```ts\n   * { key: 'createdAt', label: 'Date', sortValue: (row) => new Date(row.createdAt).getTime() }\n   * ```\n   */\n  sortValue?: (item: T) => number | string;\n  /** Column width (any valid CSS width value, e.g. `'12rem'`). */\n  width?: string;\n};\n\n/** Row selection mode. */\nexport type SelectionMode = 'multi' | 'none' | 'single';\n\nexport type DataGridControlOptions<T = Record<string, unknown>> = {\n  /** Returns the current column definitions reactively. */\n  columns: () => DataGridColumn<T>[];\n  /** Returns a unique string key for each row item. */\n  getRowKey: (item: T) => string;\n  /**\n   * Reactive signal of the current row items.\n   *\n   * For server-side sorting, pass a signal whose value is the pre-sorted result\n   * from your server. For client-side sorting, pass a plain signal wrapping your\n   * full dataset — the control will sort it automatically via `sortBy()`.\n   */\n  items: Readable<T[]>;\n  /** Called when selection changes. Receives the full set of selected keys. */\n  onSelectionChange?: (keys: Set<string>) => void;\n  /** Called when sort state changes. */\n  onSortChange?: (sort: SortState) => void;\n  /** Returns the current page size reactively. Use `0` to disable pagination. */\n  pageSize: () => number;\n  /** Returns the current selection mode reactively. */\n  selectionMode: () => SelectionMode;\n  /** `AbortSignal` from the component lifecycle. */\n  signal: AbortSignal;\n};\n\nexport type DataGridControl<T = Record<string, unknown>> = {\n  /** Deselect all rows. */\n  clearSelection(): void;\n  /** Current page items (sorted + paginated). Reactive signal. */\n  readonly currentPageItems: Readable<T[]>;\n  /** Go to an absolute page index. The index is clamped to the valid page range `[0, pageCount - 1]`. */\n  goToPage(index: number): void;\n  /** Whether there is a next page. Reactive signal. */\n  readonly hasNextPage: Readable<boolean>;\n  /** Whether there is a previous page. Reactive signal. */\n  readonly hasPrevPage: Readable<boolean>;\n  /** Whether all current-page rows are selected. */\n  isAllSelected(): boolean;\n  /** Whether a given row key is selected. */\n  isSelected(key: string): boolean;\n  /** Navigate to the next page. */\n  nextPage(): void;\n  /** Total page count. Reactive signal. */\n  readonly pageCount: Readable<number>;\n  /** Current 0-based page index. Reactive signal. */\n  readonly pageIndex: Readable<number>;\n  /** Navigate to the previous page. */\n  prevPage(): void;\n  /** Select all rows on the current page. */\n  selectAll(): void;\n  /** Current selected row keys. Reactive signal. Returns a snapshot copy — mutating the returned set has no effect on reactive state; use `toggleRow`, `selectAll`, `setSelection`, or `clearSelection` to update selection. */\n  readonly selectedKeys: Readable<ReadonlySet<string>>;\n  /** All rows whose keys are in `selectedKeys`. Reactive signal. */\n  readonly selectedRows: Readable<T[]>;\n  /** Set the selection to an explicit set of keys. */\n  setSelection(keys: Set<string>): void;\n  /** Sort by the given column key — cycles asc → desc → none. */\n  sortBy(key: string): void;\n  /** Current sort state. Reactive signal. */\n  readonly sortState: Readable<SortState>;\n  /** Set sort to an explicit key and direction. Passing `'none'` clears the sort. */\n  sortTo(key: string, direction: SortDirection): void;\n  /** Toggle selection for a single row. */\n  toggleRow(key: string): void;\n  /** Total item count across all pages. Reactive signal. */\n  readonly totalItems: Readable<number>;\n};\n\n// ── Implementation ─────────────────────────────────────────────────────────────\n\n/**\n * Headless datagrid control — sorting, pagination, and row selection.\n *\n * Composed from three focused primitives:\n * - `createSortControl` — client-side sorting with a cycle (asc → desc → none)\n * - `createPaginatedList` — reactive pagination over the sorted items\n * - `createSelectionControl` — single/multi/none row selection\n *\n * All mutable state is exposed as reactive `Reactive` values so\n * consumers can bind directly in templates without manual invalidation.\n *\n * @example\n * ```ts\n * const rows = signal(myItems);\n * const ctrl = createDataGridControl({\n *   columns: () => myColumns,\n *   items: rows,\n *   getRowKey: (item) => item.id,\n *   selectionMode: () => 'multi',\n *   pageSize: () => 20,\n *   signal: lifecycleSignal(onCleanup),\n * });\n * ```\n */\nexport const createDataGridControl = <T = Record<string, unknown>>(\n  options: DataGridControlOptions<T>,\n): DataGridControl<T> => {\n  // ── Sort ──────────────────────────────────────────────────────────────────\n  const sort = createSortControl<T>({\n    columns: options.columns,\n    items: options.items,\n    onSortChange: options.onSortChange,\n  });\n\n  // ── Pagination ────────────────────────────────────────────────────────────\n  // pageSize 0 means \"disabled\" — pass Number.MAX_SAFE_INTEGER so all items fit on one page.\n  const _pageSize = computed(() => {\n    const ps = options.pageSize();\n\n    return ps <= 0 ? Number.MAX_SAFE_INTEGER : ps;\n  });\n\n  const pagination = createPaginatedList({\n    getItems: () => sort.sortedItems.value,\n    pageSize: _pageSize,\n  });\n\n  const totalItems = computed(() => sort.sortedItems.value.length);\n\n  // When pageSize is 0 (disabled), bypass pagination and show all items.\n  const currentPageItems = computed<T[]>(() =>\n    options.pageSize() <= 0 ? sort.sortedItems.value : pagination.pageItems.value,\n  );\n\n  // Reset to page 0 whenever sort changes.\n  const _sortByAndReset = (key: string): void => {\n    sort.sortBy(key);\n    pagination.reset();\n  };\n\n  const _sortToAndReset = (key: string, direction: SortDirection): void => {\n    sort.sortTo(key, direction);\n    pagination.reset();\n  };\n\n  // ── Selection ─────────────────────────────────────────────────────────────\n  const selection = createSelectionControl<T>({\n    getRowKey: options.getRowKey,\n    onSelectionChange: options.onSelectionChange,\n    pageItems: () => pagination.pageItems.value,\n    selectionMode: options.selectionMode,\n  });\n\n  const selectedRows = computed<T[]>(() =>\n    options.items.value.filter((item) => selection.selectedKeys.value.has(options.getRowKey(item))),\n  );\n\n  return {\n    clearSelection: selection.clearSelection,\n    currentPageItems,\n    goToPage: (index: number) => {\n      if (!Number.isFinite(index)) return;\n\n      pagination.goTo(Math.max(0, index));\n    },\n    hasNextPage: pagination.hasNext,\n    hasPrevPage: pagination.hasPrev,\n    isAllSelected: selection.isAllSelected,\n    isSelected: selection.isSelected,\n    nextPage: pagination.next,\n    pageCount: pagination.pageCount,\n    pageIndex: pagination.pageIndex,\n    prevPage: pagination.prev,\n    selectAll: selection.selectAll,\n    selectedKeys: selection.selectedKeys,\n    selectedRows,\n    setSelection: selection.setSelection,\n    sortBy: _sortByAndReset,\n    sortState: sort.sortState,\n    sortTo: _sortToAndReset,\n    toggleRow: selection.toggleRow,\n    totalItems,\n  };\n};\n"],"mappings":";;;;;AA2KA,IAAa,KACX,MACuB;CAEvB,IAAM,IAAO,EAAqB;EAChC,SAAS,EAAQ;EACjB,OAAO,EAAQ;EACf,cAAc,EAAQ;CACxB,CAAC,GAUK,IAAa,EAAoB;EACrC,gBAAgB,EAAK,YAAY;EACjC,UARgB,QAAe;GAC/B,IAAM,IAAK,EAAQ,SAAS;GAE5B,OAAO,KAAM,kBAA8B;EAC7C,CAIY;CACZ,CAAC,GAEK,IAAa,QAAe,EAAK,YAAY,MAAM,MAAM,GAGzD,IAAmB,QACvB,EAAQ,SAAS,KAAK,IAAI,EAAK,YAAY,QAAQ,EAAW,UAAU,KAC1E,GAGM,KAAmB,MAAsB;EAE7C,AADA,EAAK,OAAO,CAAG,GACf,EAAW,MAAM;CACnB,GAEM,KAAmB,GAAa,MAAmC;EAEvE,AADA,EAAK,OAAO,GAAK,CAAS,GAC1B,EAAW,MAAM;CACnB,GAGM,IAAY,EAA0B;EAC1C,WAAW,EAAQ;EACnB,mBAAmB,EAAQ;EAC3B,iBAAiB,EAAW,UAAU;EACtC,eAAe,EAAQ;CACzB,CAAC,GAEK,IAAe,QACnB,EAAQ,MAAM,MAAM,QAAQ,MAAS,EAAU,aAAa,MAAM,IAAI,EAAQ,UAAU,CAAI,CAAC,CAAC,CAChG;CAEA,OAAO;EACL,gBAAgB,EAAU;EAC1B;EACA,WAAW,MAAkB;GACtB,OAAO,SAAS,CAAK,KAE1B,EAAW,KAAK,KAAK,IAAI,GAAG,CAAK,CAAC;EACpC;EACA,aAAa,EAAW;EACxB,aAAa,EAAW;EACxB,eAAe,EAAU;EACzB,YAAY,EAAU;EACtB,UAAU,EAAW;EACrB,WAAW,EAAW;EACtB,WAAW,EAAW;EACtB,UAAU,EAAW;EACrB,WAAW,EAAU;EACrB,cAAc,EAAU;EACxB;EACA,cAAc,EAAU;EACxB,QAAQ;EACR,WAAW,EAAK;EAChB,QAAQ;EACR,WAAW,EAAU;EACrB;CACF;AACF"}

package/dist/headless/date-picker.cjs

@@ -0,0 +1,2 @@
+let e=require("@vielzeug/tempo");function t(t){if(!t)return null;try{return(0,e.parsePlainDate)(t)}catch{return null}}function n(e){return e?e.toString():null}function r(t,n){return(0,e.format)(t,{intl:{day:`numeric`,month:`short`,year:`numeric`},locale:n,tz:`UTC`})}function i(){return e.Temporal.Now.plainDateISO()}function a(e){return e%7}function o(t){let n=t.value??null,r=`day`,o=n??i(),s=o.year,c=o.month;function l(){return t.locale??(typeof navigator<`u`?navigator.language:`en`)}function u(){return t.weekendDays??[]}function d(n){return!!(t.min&&e.Temporal.PlainDate.compare(n,t.min)<0||t.max&&e.Temporal.PlainDate.compare(n,t.max)>0)}function f(e){return!!(d(e)||u().includes(a(e.dayOfWeek)))}function p(){let t=i(),r=e.Temporal.PlainDate.from({day:1,month:c,year:s}),o=a(r.dayOfWeek),l=[];for(let i=o-1;i>=0;i--){let a=r.subtract({days:i+1});l.push({day:a.day,isDisabled:f(a),iso:a.toString(),isOutsideMonth:!0,isSelected:n!==null&&e.Temporal.PlainDate.compare(a,n)===0,isToday:e.Temporal.PlainDate.compare(a,t)===0,plain:a})}let u=r.daysInMonth;for(let r=1;r<=u;r++){let i=e.Temporal.PlainDate.from({day:r,month:c,year:s});l.push({day:r,isDisabled:f(i),iso:i.toString(),isOutsideMonth:!1,isSelected:n!==null&&e.Temporal.PlainDate.compare(i,n)===0,isToday:e.Temporal.PlainDate.compare(i,t)===0,plain:i})}let d=(7-l.length%7)%7,p=r.add({months:1});for(let r=0;r<d;r++){let i=p.add({days:r});l.push({day:i.day,isDisabled:f(i),iso:i.toString(),isOutsideMonth:!0,isSelected:n!==null&&e.Temporal.PlainDate.compare(i,n)===0,isToday:e.Temporal.PlainDate.compare(i,t)===0,plain:i})}return l}function m(){let r=[],i=l();for(let a=1;a<=12;a++){let o=e.Temporal.PlainDate.from({day:1,month:a,year:s}),c=o.with({day:o.daysInMonth}),l=(t.min!==null&&t.min!==void 0?e.Temporal.PlainDate.compare(c,t.min)<0:!1)||(t.max!==null&&t.max!==void 0?e.Temporal.PlainDate.compare(o,t.max)>0:!1);r.push({isDisabled:l,isSelected:n!==null&&n.year===s&&n.month===a,label:(0,e.format)(o,{intl:{month:`long`},locale:i,tz:`UTC`}),month:a,shortLabel:(0,e.format)(o,{intl:{month:`short`},locale:i,tz:`UTC`})})}return r}function h(){let r=Math.floor(s/10)*10,i=[];for(let a=r;a<r+12;a++){let r=e.Temporal.PlainDate.from({day:1,month:1,year:a}),o=e.Temporal.PlainDate.from({day:31,month:12,year:a}),s=(t.min!==null&&t.min!==void 0?e.Temporal.PlainDate.compare(o,t.min)<0:!1)||(t.max!==null&&t.max!==void 0?e.Temporal.PlainDate.compare(r,t.max)>0:!1);i.push({isDisabled:s,isSelected:n!==null&&n.year===a,year:a})}return i}function g(){let t=(0,e.parsePlainDate)(`2024-01-07`),n=l();return Array.from({length:7},(r,i)=>(0,e.format)(t.add({days:i}),{intl:{weekday:`short`},locale:n,tz:`UTC`}))}return{dayCells:p,displayMonth:()=>c,displayYear:()=>s,goTo(e,t){Number.isFinite(e)&&(s=e,c=Math.max(1,Math.min(12,t)))},monthCells:m,nextMonth(){c===12?(c=1,s++):c++},nextYear(){s++},prevMonth(){c===1?(c=12,s--):c--},prevYear(){s--},select(e){e!==null&&f(e)||(n=e,n&&(s=n.year,c=n.month),t.onChange(n))},selected:()=>n,setView(e){r=e},view:()=>r,weekdayLabels:g,yearCells:h}}exports.createDatePickerControl=o,exports.formatDisplayDate=r,exports.parseIso=t,exports.toIsoString=n;
+//# sourceMappingURL=date-picker.cjs.map