@vielzeug/craftit 2.1.0 → 3.0.1

package/README.md

@@ -1,10 +1,10 @@
 # @vielzeug/craftit
 
-> Functional web components with signals, typed props, and template bindings
+> Functional web components with signals, typed props, lifecycle hooks, and headless controls.
 
 [![npm version](https://img.shields.io/npm/v/@vielzeug/craftit)](https://www.npmjs.com/package/@vielzeug/craftit) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-**Craftit** provides a compact API for authoring custom elements with fine-grained reactivity. It builds on `@vielzeug/stateit` (re-exported from the main entry) and adds component lifecycle, templating, typed props, typed emits, setup-context slots, form-associated helpers, and observer utilities.
+Craftit is Vielzeug's custom-element authoring library built on `@vielzeug/stateit`.
 
 ## Installation
 
@@ -17,162 +17,96 @@ pnpm add @vielzeug/craftit
 ## Quick Start
 
 ```ts
-import { computed, define, html, signal } from '@vielzeug/craftit';
+import { computed, css, define, html, prop, signal } from '@vielzeug/craftit';
 
 define('my-counter', {
-  setup() {
+  props: {
+    label: prop.string('Count'),
+    step: prop.number(1),
+  },
+  setup(props, { host }) {
     const count = signal(0);
     const doubled = computed(() => count.value * 2);
 
-    return html`
-      <button @click=${() => count.value++}>Count: ${count}</button>
+    host.class({ 'is-positive': () => count.value > 0 });
+
+    return () => html`
+      <button @click=${() => (count.value += props.step.value)}>
+        ${props.label}: ${count}
+      </button>
       <p>Doubled: ${doubled}</p>
     `;
   },
+  styles: [
+    css`
+      :host {
+        display: inline-grid;
+        gap: 0.5rem;
+      }
+    `,
+  ],
 });
 ```
 
-## Features
-
-- ✅ **Component authoring** — `define(tag, { props, setup, ... })`
-- ✅ **Signals included** — all `@vielzeug/stateit` exports are re-exported
-- ✅ **Reactive templates** — `html` tagged template with text/attr/prop/event/ref bindings
-- ✅ **Lifecycle helpers** — `onMount`, `onCleanup`, `onError`, `handle`, `watch`, `effect`, `fire.*`
-- ✅ **Typed component APIs** — `define`, `prop`, `typed`, setup-context `emit` and `slots`
-- ✅ **Context / DI** — `createContext`, `provide`, `inject`, `syncContextProps`
-- ✅ **Form-associated controls** — `defineField` with `ElementInternals`
-- ✅ **Observer utilities (observers)** — `resizeObserver`, `intersectionObserver`, and `mediaObserver`
-- ✅ **Directive subpath** — `@vielzeug/craftit/directives`
-- ✅ **Test subpath** — `@vielzeug/craftit/testing`
-
-## Entry Points
-
-- `@vielzeug/craftit` — Main API with component authoring and stateit re-exports.
-- `@vielzeug/craftit/controls` — Stable composables for controls and overlays.
-- `@vielzeug/craftit/observers` — Stable browser observer composables.
-- `@vielzeug/craftit/directives` — Directive helpers like `attrs`, `bind`, `choose`, `each`, `when`, and `until`.
-- `@vielzeug/craftit/testing` — Mount, query, and event testing utilities.
-
-## Usage Highlights
-
-### Typed props + emits
-
-```ts
-import { define, html } from '@vielzeug/craftit';
+## Authoring Model
 
-define<{ disabled: boolean; label: string }, { change: string }>('name-input', {
-  props: {
-    disabled: false,
-    label: 'Name',
-  },
-  setup({ emit, props }) {
-    return html`
-      <label>${props.label}</label>
-      <input :disabled=${props.disabled} @input=${(e: Event) => emit('change', (e.target as HTMLInputElement).value)} />
-    `;
-  },
-});
-```
-
-### Directives subpath
+- `setup(props, ctx)` returns a template function: `() => html\`...\``
+- Use `onMounted()` for post-mount DOM initialization
+- Use `onCleanup()` for teardown
+- Use `onElement(ref, cb)` for ref-driven effects
 
 ```ts
-import { define, html, signal } from '@vielzeug/craftit';
-import { each, when } from '@vielzeug/craftit/directives';
+import { define, html, onCleanup, onMounted, signal } from '@vielzeug/craftit';
 
-define('todo-list', {
+define('auto-save-field', {
   setup() {
-    const todos = signal([{ id: 1, text: 'Write docs', done: false }]);
-
-    return html`
-      ${when({
-        condition: () => todos.value.length > 0,
-        else: () => html`<p>No todos</p>`,
-        then: () =>
-          html`<ul>${each(todos, { key: (todo) => todo.id, render: (todo) => html`<li>${todo.text}</li>` })}</ul>`,
-      })}
-    `;
-  },
-});
-```
-
-### Setup-context slots
-
-```ts
-import { define, effect, html } from '@vielzeug/craftit';
-import { when } from '@vielzeug/craftit/directives';
+    const value = signal('');
 
-define('slot-panel', {
-  setup({ slots }) {
-    effect(() => {
-      console.log('default elements:', slots.elements().value.length);
+    onMounted(() => {
+      console.log('ready for DOM interactions');
     });
 
-    return html`
-      ${when({
-        condition: () => slots.has('header').value,
-        else: () => html`<h2>Fallback header</h2>`,
-        then: () => html`<slot name="header"></slot>`,
-      })}
-      ${when({
-        condition: () => slots.has().value,
-        else: () => html`<p>No content yet</p>`,
-        then: () => html`<slot></slot>`,
-      })}
-    `;
-  },
-});
-```
-
-Use `slots.has(name?)` for presence checks and `slots.elements(name?)` when you need flattened assigned elements.
-
-### Form-associated field
-
-```ts
-import { define, defineField, html, signal } from '@vielzeug/craftit';
-
-define('email-field', {
-  formAssociated: true,
-  setup() {
-    const value = signal('');
-    const field = defineField({ value });
+    onCleanup(() => {
+      console.log('saving', value.value);
+    });
 
-    return html`
-      <input
-        type="email"
-        :value=${value}
+    return () => html`
+      <textarea
         @input=${(e: Event) => {
-          value.value = (e.target as HTMLInputElement).value;
-          field.setCustomValidity(value.value.includes('@') ? '' : 'Invalid email');
+          value.value = (e.target as HTMLTextAreaElement).value;
         }}
-      />
+      ></textarea>
     `;
   },
 });
 ```
 
+## Features
+
+- Signals included: `signal`, `computed`, `watch`, `batch`, `untrack`, `scope`, and related primitives from `@vielzeug/stateit`
+- Component authoring: `define(tag, { props, setup, styles, formAssociated })`
+- Props: `prop.*` helpers and raw `PropDef` objects; shared bundles can type against `PropsDef<...>`
+- Lifecycle hooks: `onMounted`, `onCleanup`, `onElement`, `effect`, `handle` (auto-cleans inside setup/scope; returns manual cleanup outside it)
+- Directives: `each`, `classMap`, `styleMap`, `guard`, `when`, `live`, `until`, `raw`
+- Host/slot APIs: `host.bind`, `syncAria`, `slots.has`, `slots.elements`
+- Form-associated elements: `defineField()`
+- Published subpaths: `@vielzeug/craftit/controls`, `@vielzeug/craftit/observers`, `@vielzeug/craftit/testing`
+
 ## API Summary
 
-- Components: `define`, `ComponentOptions`, `ComponentSetupContext`
-- Runtime: `onMount`, `onCleanup`, `onError`, `handle`, `aria`, `effect`, `watch`, `fire`
-- Props: `prop`, `typed`, `PropOptions`, `PropDef`, `InferPropsSignals`
-- Slots / emits: setup-context `slots`, setup-context `emit`, `EmitFn`
-- Context: `createContext`, `provide`, `inject`, `syncContextProps`, `InjectionKey`
-- Form: `defineField`, `FormFieldOptions`, `FormFieldCallbacks`, `FormFieldHandle`
-- Observers: `resizeObserver`, `intersectionObserver`, `mediaObserver`
-- Controls: `createFieldIds`
-- Utilities: `html`, `css`, `createId`
-- Re-exported from stateit: `signal`, `computed`, `batch`, `untrack`, `readonly`, and more
+| Area | Exports |
+| --- | --- |
+| Component authoring | `define`, `prop`, `type ComponentDefinition`, `type SetupContextBag`, `type PropsDef`, `type PropDef` |
+| Runtime | `onMounted`, `effect`, `handle`, `onCleanup`, `onElement` |
+| Templates and directives | `html`, `css`, `each`, `classMap`, `styleMap`, `guard`, `when`, `live`, `until`, `raw` |
+| Element references | `ref`, `refs`, `createId` |
+| Context and slots | `createContext`, `provide`, `inject`, `injectStrict`, `syncAria` |
+| Form | `defineField`, `type FormFieldOptions`, `type FormFieldHandle` |
 
 ## Documentation
 
 Full docs at **[vielzeug.dev/craftit](https://vielzeug.dev/craftit)**
 
-- [Overview](https://vielzeug.dev/craftit/) — Install and architecture overview
-- [Usage Guide](https://vielzeug.dev/craftit/usage) — Practical patterns and subpath usage
-- [API Reference](https://vielzeug.dev/craftit/api) — Complete signatures and types
-- [Examples](https://vielzeug.dev/craftit/examples) — End-to-end component examples
-
 ## License
 
 MIT © [Helmuth Saatkamp](https://github.com/helmuthdu) — Part of the [Vielzeug](https://github.com/helmuthdu/vielzeug) monorepo.

package/dist/controls/a11y-control.cjs

@@ -1,2 +1,2 @@
-const e=require(`../runtime-lifecycle.cjs`),t=require(`../internal.cjs`);var n=e=>{let t=e.querySelector(`slot`);return t instanceof HTMLSlotElement?t.assignedNodes({flatten:!0}).some(e=>(e.textContent?.trim().length??0)>0):(e.textContent?.trim().length??0)>0};function r(r,i){let a=i.labelId||t.createId(`a11y-label`),o=i.helperId||t.createId(`a11y-helper`),s=(e,t,n)=>{e.getAttribute(t)!==n&&e.setAttribute(t,n)},c=(e,t)=>{e.textContent!==t&&(e.textContent=t)};s(r,`role`,i.role);let l=()=>{let e=r.shadowRoot;if(!e)return;let t=e.querySelector(`[data-a11y-label]`),l=e.querySelector(`[data-a11y-helper]`),u=i.checked?.(),d=i.invalid?.(),f=i.helperText?.();t?(t.id!==a&&(t.id=a),n(t)?s(r,`aria-labelledby`,a):r.removeAttribute(`aria-labelledby`)):r.removeAttribute(`aria-labelledby`),l?(l.id!==o&&(l.id=o),f?(c(l,f),l.hidden&&=!1,s(r,`aria-describedby`,o),(i.helperTone?.()??`default`)===`error`?s(l,`role`,`alert`):l.removeAttribute(`role`)):(c(l,``),l.hidden||=!0,l.removeAttribute(`role`),r.removeAttribute(`aria-describedby`))):r.removeAttribute(`aria-describedby`),u===void 0?r.removeAttribute(`aria-checked`):s(r,`aria-checked`,u),d===void 0?r.removeAttribute(`aria-invalid`):s(r,`aria-invalid`,String(d))};return e.effect(()=>{l()}),e.onMount(()=>{let t=r.shadowRoot;if(!t)return;l();let n=[t.querySelector(`[data-a11y-label]`),t.querySelector(`[data-a11y-helper]`)].filter(Boolean);if(n.length===0)return;let i=new MutationObserver(()=>{l()});n.forEach(t=>{i.observe(t,{characterData:!0,childList:!0,subtree:!0});let n=t.querySelector(`slot`);if(n){let t=()=>l();n.addEventListener(`slotchange`,t),e.onCleanup(()=>n.removeEventListener(`slotchange`,t))}}),e.onCleanup(()=>i.disconnect())}),{helperId:o,labelId:a}}exports.createA11yControl=r;
+const e=require(`../runtime.cjs`),t=require(`../internal.cjs`);var n=e=>{let t=e.querySelector(`slot`);return t instanceof HTMLSlotElement?t.assignedNodes({flatten:!0}).some(e=>(e.textContent?.trim().length??0)>0):(e.textContent?.trim().length??0)>0};function r(r){let i=e.currentElementOrThrow(),a=r.labelId||t.createId(`a11y-label`),o=r.helperId||t.createId(`a11y-helper`),s=(e,t,n)=>{e.getAttribute(t)!==n&&e.setAttribute(t,n)},c=(e,t)=>{e.textContent!==t&&(e.textContent=t)};s(i,`role`,r.role);let l=null,u=null,d=new Map,f=(e,t)=>{let n=new Set;for(let r of[e,t])if(r)for(let e of Array.from(r.querySelectorAll(`slot`)))e instanceof HTMLSlotElement&&n.add(e);for(let[e,t]of d)n.has(e)||(t(),d.delete(e));for(let e of n){if(d.has(e))continue;let t=()=>p();e.addEventListener(`slotchange`,t),d.set(e,()=>e.removeEventListener(`slotchange`,t))}},p=()=>{if(!i.shadowRoot)return;let e=l,t=u;f(e,t);let d=r.checked?.(),p=r.invalid?.(),m=r.helperText?.();e?(e.id!==a&&(e.id=a),n(e)?s(i,`aria-labelledby`,a):i.removeAttribute(`aria-labelledby`)):i.removeAttribute(`aria-labelledby`),t?(t.id!==o&&(t.id=o),m?(c(t,m),t.hidden&&=!1,s(i,`aria-describedby`,o),(r.helperTone?.()??`default`)===`error`?s(t,`role`,`alert`):t.removeAttribute(`role`)):(c(t,``),t.hidden||=!0,t.removeAttribute(`role`),i.removeAttribute(`aria-describedby`))):i.removeAttribute(`aria-describedby`),d===void 0?i.removeAttribute(`aria-checked`):s(i,`aria-checked`,d),p===void 0?i.removeAttribute(`aria-invalid`):s(i,`aria-invalid`,String(p))};return e.effect(()=>{p()}),e.onMounted(()=>{l=i.shadowRoot?.querySelector(`[data-a11y-label]`)??null,u=i.shadowRoot?.querySelector(`[data-a11y-helper]`)??null,p()}),e.onCleanup(()=>{for(let e of d.values())e();d.clear()}),{helperId:o,labelId:a}}exports.createA11yControl=r;
 //# sourceMappingURL=a11y-control.cjs.map

package/dist/controls/a11y-control.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-control.cjs","names":[],"sources":["../../src/controls/a11y-control.ts"],"sourcesContent":["import { createId } from '../internal';\nimport { effect, onCleanup, onMount } from '../runtime-lifecycle';\n\nexport type A11yTone = 'default' | 'error';\n\nexport type A11yControlConfig = {\n  checked?: () => 'true' | 'false' | 'mixed' | undefined;\n  helperId?: string;\n  helperText?: () => string | undefined;\n  helperTone?: () => A11yTone;\n  invalid?: () => boolean;\n  labelId?: string;\n  role: string;\n};\n\nexport type A11yControlHandle = {\n  helperId: string;\n  labelId: string;\n};\n\nconst hasLabelContent = (labelElement: HTMLElement): boolean => {\n  const slot = labelElement.querySelector('slot');\n\n  if (slot instanceof HTMLSlotElement) {\n    return slot.assignedNodes({ flatten: true }).some((node) => (node.textContent?.trim().length ?? 0) > 0);\n  }\n\n  return (labelElement.textContent?.trim().length ?? 0) > 0;\n};\n\nexport function createA11yControl(host: HTMLElement, config: A11yControlConfig): A11yControlHandle {\n  const labelId = config.labelId || createId('a11y-label');\n  const helperId = config.helperId || createId('a11y-helper');\n\n  const setAttr = (element: Element, name: string, value: string): void => {\n    if (element.getAttribute(name) !== value) element.setAttribute(name, value);\n  };\n\n  const setText = (element: Node, value: string): void => {\n    if (element.textContent !== value) element.textContent = value;\n  };\n\n  setAttr(host, 'role', config.role);\n\n  const sync = (): void => {\n    const shadow = host.shadowRoot;\n\n    if (!shadow) return;\n\n    const labelElement = shadow.querySelector('[data-a11y-label]') as HTMLElement | null;\n    const helperElement = shadow.querySelector('[data-a11y-helper]') as HTMLDivElement | null;\n    const checked = config.checked?.();\n    const invalid = config.invalid?.();\n    const helperText = config.helperText?.();\n\n    // Sync label\n    if (labelElement) {\n      if (labelElement.id !== labelId) labelElement.id = labelId;\n\n      if (hasLabelContent(labelElement)) setAttr(host, 'aria-labelledby', labelId);\n      else host.removeAttribute('aria-labelledby');\n    } else {\n      host.removeAttribute('aria-labelledby');\n    }\n\n    // Sync helper\n    if (helperElement) {\n      if (helperElement.id !== helperId) helperElement.id = helperId;\n\n      if (helperText) {\n        setText(helperElement, helperText);\n\n        if (helperElement.hidden) helperElement.hidden = false;\n\n        setAttr(host, 'aria-describedby', helperId);\n\n        if ((config.helperTone?.() ?? 'default') === 'error') setAttr(helperElement, 'role', 'alert');\n        else helperElement.removeAttribute('role');\n      } else {\n        setText(helperElement, '');\n\n        if (!helperElement.hidden) helperElement.hidden = true;\n\n        helperElement.removeAttribute('role');\n        host.removeAttribute('aria-describedby');\n      }\n    } else {\n      host.removeAttribute('aria-describedby');\n    }\n\n    // Sync checked\n    if (checked === undefined) host.removeAttribute('aria-checked');\n    else setAttr(host, 'aria-checked', checked);\n\n    // Sync invalid\n    if (invalid === undefined) host.removeAttribute('aria-invalid');\n    else setAttr(host, 'aria-invalid', String(invalid));\n  };\n\n  // Effect for reactive config changes\n  effect(() => {\n    sync();\n  });\n\n  // Watch for DOM mutations to label/helper content (slot changes, etc.)\n  onMount(() => {\n    const shadow = host.shadowRoot;\n\n    if (!shadow) return;\n\n    sync();\n\n    const labelElement = shadow.querySelector('[data-a11y-label]') as HTMLElement | null;\n    const helperElement = shadow.querySelector('[data-a11y-helper]') as HTMLElement | null;\n\n    const elementsToWatch = [labelElement, helperElement].filter(Boolean) as HTMLElement[];\n\n    if (elementsToWatch.length === 0) return;\n\n    const observer = new MutationObserver(() => {\n      sync();\n    });\n\n    // Watch label and helper elements for content changes (including slot changes)\n    elementsToWatch.forEach((el) => {\n      observer.observe(el, { characterData: true, childList: true, subtree: true });\n\n      // Also listen for slotchange event to catch slot content updates\n      const slot = el.querySelector('slot') as HTMLSlotElement | null;\n\n      if (slot) {\n        const slotHandler = () => sync();\n\n        slot.addEventListener('slotchange', slotHandler);\n        onCleanup(() => slot.removeEventListener('slotchange', slotHandler));\n      }\n    });\n\n    onCleanup(() => observer.disconnect());\n  });\n\n  return { helperId, labelId };\n}\n"],"mappings":"yEAoBA,IAAM,EAAmB,GAAuC,CAC9D,IAAM,EAAO,EAAa,cAAc,OAAO,CAM/C,OAJI,aAAgB,gBACX,EAAK,cAAc,CAAE,QAAS,GAAM,CAAC,CAAC,KAAM,IAAU,EAAK,aAAa,MAAM,CAAC,QAAU,GAAK,EAAE,EAGjG,EAAa,aAAa,MAAM,CAAC,QAAU,GAAK,GAG1D,SAAgB,EAAkB,EAAmB,EAA8C,CACjG,IAAM,EAAU,EAAO,SAAW,EAAA,SAAS,aAAa,CAClD,EAAW,EAAO,UAAY,EAAA,SAAS,cAAc,CAErD,GAAW,EAAkB,EAAc,IAAwB,CACnE,EAAQ,aAAa,EAAK,GAAK,GAAO,EAAQ,aAAa,EAAM,EAAM,EAGvE,GAAW,EAAe,IAAwB,CAClD,EAAQ,cAAgB,IAAO,EAAQ,YAAc,IAG3D,EAAQ,EAAM,OAAQ,EAAO,KAAK,CAElC,IAAM,MAAmB,CACvB,IAAM,EAAS,EAAK,WAEpB,GAAI,CAAC,EAAQ,OAEb,IAAM,EAAe,EAAO,cAAc,oBAAoB,CACxD,EAAgB,EAAO,cAAc,qBAAqB,CAC1D,EAAU,EAAO,WAAW,CAC5B,EAAU,EAAO,WAAW,CAC5B,EAAa,EAAO,cAAc,CAGpC,GACE,EAAa,KAAO,IAAS,EAAa,GAAK,GAE/C,EAAgB,EAAa,CAAE,EAAQ,EAAM,kBAAmB,EAAQ,CACvE,EAAK,gBAAgB,kBAAkB,EAE5C,EAAK,gBAAgB,kBAAkB,CAIrC,GACE,EAAc,KAAO,IAAU,EAAc,GAAK,GAElD,GACF,EAAQ,EAAe,EAAW,CAElC,AAA0B,EAAc,SAAS,GAEjD,EAAQ,EAAM,mBAAoB,EAAS,EAEtC,EAAO,cAAc,EAAI,aAAe,QAAS,EAAQ,EAAe,OAAQ,QAAQ,CACxF,EAAc,gBAAgB,OAAO,GAE1C,EAAQ,EAAe,GAAG,CAE1B,AAA2B,EAAc,SAAS,GAElD,EAAc,gBAAgB,OAAO,CACrC,EAAK,gBAAgB,mBAAmB,GAG1C,EAAK,gBAAgB,mBAAmB,CAItC,IAAY,IAAA,GAAW,EAAK,gBAAgB,eAAe,CAC1D,EAAQ,EAAM,eAAgB,EAAQ,CAGvC,IAAY,IAAA,GAAW,EAAK,gBAAgB,eAAe,CAC1D,EAAQ,EAAM,eAAgB,OAAO,EAAQ,CAAC,EA6CrD,OAzCA,EAAA,WAAa,CACX,GAAM,EACN,CAGF,EAAA,YAAc,CACZ,IAAM,EAAS,EAAK,WAEpB,GAAI,CAAC,EAAQ,OAEb,GAAM,CAKN,IAAM,EAAkB,CAHH,EAAO,cAAc,oBAAoB,CACxC,EAAO,cAAc,qBAAqB,CAEX,CAAC,OAAO,QAAQ,CAErE,GAAI,EAAgB,SAAW,EAAG,OAElC,IAAM,EAAW,IAAI,qBAAuB,CAC1C,GAAM,EACN,CAGF,EAAgB,QAAS,GAAO,CAC9B,EAAS,QAAQ,EAAI,CAAE,cAAe,GAAM,UAAW,GAAM,QAAS,GAAM,CAAC,CAG7E,IAAM,EAAO,EAAG,cAAc,OAAO,CAErC,GAAI,EAAM,CACR,IAAM,MAAoB,GAAM,CAEhC,EAAK,iBAAiB,aAAc,EAAY,CAChD,EAAA,cAAgB,EAAK,oBAAoB,aAAc,EAAY,CAAC,GAEtE,CAEF,EAAA,cAAgB,EAAS,YAAY,CAAC,EACtC,CAEK,CAAE,WAAU,UAAS"}
+{"version":3,"file":"a11y-control.cjs","names":[],"sources":["../../src/controls/a11y-control.ts"],"sourcesContent":["import { createId } from '../internal';\nimport { currentElementOrThrow, effect, onCleanup, onMounted } from '../runtime';\n\nexport type A11yTone = 'default' | 'error';\n\nexport type A11yControlConfig = {\n  checked?: () => 'true' | 'false' | 'mixed' | undefined;\n  helperId?: string;\n  helperText?: () => string | undefined;\n  helperTone?: () => A11yTone;\n  invalid?: () => boolean;\n  labelId?: string;\n  role: string;\n};\n\nexport type A11yControlHandle = {\n  helperId: string;\n  labelId: string;\n};\n\nconst hasLabelContent = (labelElement: HTMLElement): boolean => {\n  const slot = labelElement.querySelector('slot');\n\n  if (slot instanceof HTMLSlotElement) {\n    return slot.assignedNodes({ flatten: true }).some((node) => (node.textContent?.trim().length ?? 0) > 0);\n  }\n\n  return (labelElement.textContent?.trim().length ?? 0) > 0;\n};\n\nexport function createA11yControl(config: A11yControlConfig): A11yControlHandle {\n  const host = currentElementOrThrow();\n  const labelId = config.labelId || createId('a11y-label');\n  const helperId = config.helperId || createId('a11y-helper');\n\n  const setAttr = (element: Element, name: string, value: string): void => {\n    if (element.getAttribute(name) !== value) element.setAttribute(name, value);\n  };\n\n  const setText = (element: Node, value: string): void => {\n    if (element.textContent !== value) element.textContent = value;\n  };\n\n  setAttr(host, 'role', config.role);\n\n  let labelEl: HTMLElement | null = null;\n  let helperEl: HTMLDivElement | null = null;\n\n  const slotCleanupByElement = new Map<HTMLSlotElement, () => void>();\n\n  const syncSlotListeners = (labelElement: HTMLElement | null, helperElement: HTMLDivElement | null): void => {\n    const nextSlots = new Set<HTMLSlotElement>();\n\n    for (const container of [labelElement, helperElement]) {\n      if (!container) continue;\n\n      for (const slot of Array.from(container.querySelectorAll('slot'))) {\n        if (slot instanceof HTMLSlotElement) nextSlots.add(slot);\n      }\n    }\n\n    for (const [slot, cleanup] of slotCleanupByElement) {\n      if (nextSlots.has(slot)) continue;\n\n      cleanup();\n      slotCleanupByElement.delete(slot);\n    }\n\n    for (const slot of nextSlots) {\n      if (slotCleanupByElement.has(slot)) continue;\n\n      const slotHandler = () => sync();\n\n      slot.addEventListener('slotchange', slotHandler);\n      slotCleanupByElement.set(slot, () => slot.removeEventListener('slotchange', slotHandler));\n    }\n  };\n\n  const sync = (): void => {\n    const shadow = host.shadowRoot;\n\n    if (!shadow) return;\n\n    const labelElement = labelEl;\n    const helperElement = helperEl;\n\n    syncSlotListeners(labelElement, helperElement);\n\n    const checked = config.checked?.();\n    const invalid = config.invalid?.();\n    const helperText = config.helperText?.();\n\n    // Sync label\n    if (labelElement) {\n      if (labelElement.id !== labelId) labelElement.id = labelId;\n\n      if (hasLabelContent(labelElement)) setAttr(host, 'aria-labelledby', labelId);\n      else host.removeAttribute('aria-labelledby');\n    } else {\n      host.removeAttribute('aria-labelledby');\n    }\n\n    // Sync helper\n    if (helperElement) {\n      if (helperElement.id !== helperId) helperElement.id = helperId;\n\n      if (helperText) {\n        setText(helperElement, helperText);\n\n        if (helperElement.hidden) helperElement.hidden = false;\n\n        setAttr(host, 'aria-describedby', helperId);\n\n        if ((config.helperTone?.() ?? 'default') === 'error') setAttr(helperElement, 'role', 'alert');\n        else helperElement.removeAttribute('role');\n      } else {\n        setText(helperElement, '');\n\n        if (!helperElement.hidden) helperElement.hidden = true;\n\n        helperElement.removeAttribute('role');\n        host.removeAttribute('aria-describedby');\n      }\n    } else {\n      host.removeAttribute('aria-describedby');\n    }\n\n    // Sync checked\n    if (checked === undefined) host.removeAttribute('aria-checked');\n    else setAttr(host, 'aria-checked', checked);\n\n    // Sync invalid\n    if (invalid === undefined) host.removeAttribute('aria-invalid');\n    else setAttr(host, 'aria-invalid', String(invalid));\n  };\n\n  // Keep ARIA in sync with reactive config changes.\n  effect(() => {\n    sync();\n  });\n\n  // Query shadow DOM refs once after first render, then sync.\n  onMounted(() => {\n    labelEl = (host.shadowRoot?.querySelector('[data-a11y-label]') ?? null) as HTMLElement | null;\n    helperEl = (host.shadowRoot?.querySelector('[data-a11y-helper]') ?? null) as HTMLDivElement | null;\n    sync();\n  });\n\n  onCleanup(() => {\n    for (const cleanup of slotCleanupByElement.values()) cleanup();\n    slotCleanupByElement.clear();\n  });\n\n  return { helperId, labelId };\n}\n"],"mappings":"+DAoBA,IAAM,EAAmB,GAAuC,CAC9D,IAAM,EAAO,EAAa,cAAc,MAAM,EAM9C,OAJI,aAAgB,gBACX,EAAK,cAAc,CAAE,QAAS,EAAK,CAAC,EAAE,KAAM,IAAU,EAAK,aAAa,KAAK,EAAE,QAAU,GAAK,CAAC,GAGhG,EAAa,aAAa,KAAK,EAAE,QAAU,GAAK,CAC1D,EAEA,SAAgB,EAAkB,EAA8C,CAC9E,IAAM,EAAO,EAAA,sBAAsB,EAC7B,EAAU,EAAO,SAAW,EAAA,SAAS,YAAY,EACjD,EAAW,EAAO,UAAY,EAAA,SAAS,aAAa,EAEpD,GAAW,EAAkB,EAAc,IAAwB,CACnE,EAAQ,aAAa,CAAI,IAAM,GAAO,EAAQ,aAAa,EAAM,CAAK,CAC5E,EAEM,GAAW,EAAe,IAAwB,CAClD,EAAQ,cAAgB,IAAO,EAAQ,YAAc,EAC3D,EAEA,EAAQ,EAAM,OAAQ,EAAO,IAAI,EAEjC,IAAI,EAA8B,KAC9B,EAAkC,KAEhC,EAAuB,IAAI,IAE3B,GAAqB,EAAkC,IAA+C,CAC1G,IAAM,EAAY,IAAI,IAEtB,IAAK,IAAM,IAAa,CAAC,EAAc,CAAa,EAC7C,KAEL,IAAK,IAAM,KAAQ,MAAM,KAAK,EAAU,iBAAiB,MAAM,CAAC,EAC1D,aAAgB,iBAAiB,EAAU,IAAI,CAAI,EAI3D,IAAK,GAAM,CAAC,EAAM,KAAY,EACxB,EAAU,IAAI,CAAI,IAEtB,EAAQ,EACR,EAAqB,OAAO,CAAI,GAGlC,IAAK,IAAM,KAAQ,EAAW,CAC5B,GAAI,EAAqB,IAAI,CAAI,EAAG,SAEpC,IAAM,MAAoB,EAAK,EAE/B,EAAK,iBAAiB,aAAc,CAAW,EAC/C,EAAqB,IAAI,MAAY,EAAK,oBAAoB,aAAc,CAAW,CAAC,CAC1F,CACF,EAEM,MAAmB,CAGvB,GAAI,CAFW,EAAK,WAEP,OAEb,IAAM,EAAe,EACf,EAAgB,EAEtB,EAAkB,EAAc,CAAa,EAE7C,IAAM,EAAU,EAAO,UAAU,EAC3B,EAAU,EAAO,UAAU,EAC3B,EAAa,EAAO,aAAa,EAGnC,GACE,EAAa,KAAO,IAAS,EAAa,GAAK,GAE/C,EAAgB,CAAY,EAAG,EAAQ,EAAM,kBAAmB,CAAO,EACtE,EAAK,gBAAgB,iBAAiB,GAE3C,EAAK,gBAAgB,iBAAiB,EAIpC,GACE,EAAc,KAAO,IAAU,EAAc,GAAK,GAElD,GACF,EAAQ,EAAe,CAAU,EAEjC,AAA0B,EAAc,SAAS,GAEjD,EAAQ,EAAM,mBAAoB,CAAQ,GAErC,EAAO,aAAa,GAAK,aAAe,QAAS,EAAQ,EAAe,OAAQ,OAAO,EACvF,EAAc,gBAAgB,MAAM,IAEzC,EAAQ,EAAe,EAAE,EAEzB,AAA2B,EAAc,SAAS,GAElD,EAAc,gBAAgB,MAAM,EACpC,EAAK,gBAAgB,kBAAkB,IAGzC,EAAK,gBAAgB,kBAAkB,EAIrC,IAAY,IAAA,GAAW,EAAK,gBAAgB,cAAc,EACzD,EAAQ,EAAM,eAAgB,CAAO,EAGtC,IAAY,IAAA,GAAW,EAAK,gBAAgB,cAAc,EACzD,EAAQ,EAAM,eAAgB,OAAO,CAAO,CAAC,CACpD,EAmBA,OAhBA,EAAA,WAAa,CACX,EAAK,CACP,CAAC,EAGD,EAAA,cAAgB,CACd,EAAW,EAAK,YAAY,cAAc,mBAAmB,GAAK,KAClE,EAAY,EAAK,YAAY,cAAc,oBAAoB,GAAK,KACpE,EAAK,CACP,CAAC,EAED,EAAA,cAAgB,CACd,IAAK,IAAM,KAAW,EAAqB,OAAO,EAAG,EAAQ,EAC7D,EAAqB,MAAM,CAC7B,CAAC,EAEM,CAAE,WAAU,SAAQ,CAC7B"}

package/dist/controls/a11y-control.d.ts

@@ -12,5 +12,5 @@ export type A11yControlHandle = {
     helperId: string;
     labelId: string;
 };
-export declare function createA11yControl(host: HTMLElement, config: A11yControlConfig): A11yControlHandle;
+export declare function createA11yControl(config: A11yControlConfig): A11yControlHandle;
 //# sourceMappingURL=a11y-control.d.ts.map

package/dist/controls/a11y-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-control.d.ts","sourceRoot":"","sources":["../../src/controls/a11y-control.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,MAAM,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,QAAQ,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAYF,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,iBAAiB,GAAG,iBAAiB,CAgHjG"}
+{"version":3,"file":"a11y-control.d.ts","sourceRoot":"","sources":["../../src/controls/a11y-control.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,MAAM,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,QAAQ,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAYF,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,iBAAiB,GAAG,iBAAiB,CA4H9E"}

package/dist/controls/a11y-control.js

@@ -1,2 +1,2 @@
-import{effect as e,onCleanup as t,onMount as n}from"../runtime-lifecycle.js";import{createId as r}from"../internal.js";var i=e=>{let t=e.querySelector(`slot`);return t instanceof HTMLSlotElement?t.assignedNodes({flatten:!0}).some(e=>(e.textContent?.trim().length??0)>0):(e.textContent?.trim().length??0)>0};function a(a,o){let s=o.labelId||r(`a11y-label`),c=o.helperId||r(`a11y-helper`),l=(e,t,n)=>{e.getAttribute(t)!==n&&e.setAttribute(t,n)},u=(e,t)=>{e.textContent!==t&&(e.textContent=t)};l(a,`role`,o.role);let d=()=>{let e=a.shadowRoot;if(!e)return;let t=e.querySelector(`[data-a11y-label]`),n=e.querySelector(`[data-a11y-helper]`),r=o.checked?.(),d=o.invalid?.(),f=o.helperText?.();t?(t.id!==s&&(t.id=s),i(t)?l(a,`aria-labelledby`,s):a.removeAttribute(`aria-labelledby`)):a.removeAttribute(`aria-labelledby`),n?(n.id!==c&&(n.id=c),f?(u(n,f),n.hidden&&=!1,l(a,`aria-describedby`,c),(o.helperTone?.()??`default`)===`error`?l(n,`role`,`alert`):n.removeAttribute(`role`)):(u(n,``),n.hidden||=!0,n.removeAttribute(`role`),a.removeAttribute(`aria-describedby`))):a.removeAttribute(`aria-describedby`),r===void 0?a.removeAttribute(`aria-checked`):l(a,`aria-checked`,r),d===void 0?a.removeAttribute(`aria-invalid`):l(a,`aria-invalid`,String(d))};return e(()=>{d()}),n(()=>{let e=a.shadowRoot;if(!e)return;d();let n=[e.querySelector(`[data-a11y-label]`),e.querySelector(`[data-a11y-helper]`)].filter(Boolean);if(n.length===0)return;let r=new MutationObserver(()=>{d()});n.forEach(e=>{r.observe(e,{characterData:!0,childList:!0,subtree:!0});let n=e.querySelector(`slot`);if(n){let e=()=>d();n.addEventListener(`slotchange`,e),t(()=>n.removeEventListener(`slotchange`,e))}}),t(()=>r.disconnect())}),{helperId:c,labelId:s}}export{a as createA11yControl};
+import{currentElementOrThrow as e,effect as t,onCleanup as n,onMounted as r}from"../runtime.js";import{createId as i}from"../internal.js";var a=e=>{let t=e.querySelector(`slot`);return t instanceof HTMLSlotElement?t.assignedNodes({flatten:!0}).some(e=>(e.textContent?.trim().length??0)>0):(e.textContent?.trim().length??0)>0};function o(o){let s=e(),c=o.labelId||i(`a11y-label`),l=o.helperId||i(`a11y-helper`),u=(e,t,n)=>{e.getAttribute(t)!==n&&e.setAttribute(t,n)},d=(e,t)=>{e.textContent!==t&&(e.textContent=t)};u(s,`role`,o.role);let f=null,p=null,m=new Map,h=(e,t)=>{let n=new Set;for(let r of[e,t])if(r)for(let e of Array.from(r.querySelectorAll(`slot`)))e instanceof HTMLSlotElement&&n.add(e);for(let[e,t]of m)n.has(e)||(t(),m.delete(e));for(let e of n){if(m.has(e))continue;let t=()=>g();e.addEventListener(`slotchange`,t),m.set(e,()=>e.removeEventListener(`slotchange`,t))}},g=()=>{if(!s.shadowRoot)return;let e=f,t=p;h(e,t);let n=o.checked?.(),r=o.invalid?.(),i=o.helperText?.();e?(e.id!==c&&(e.id=c),a(e)?u(s,`aria-labelledby`,c):s.removeAttribute(`aria-labelledby`)):s.removeAttribute(`aria-labelledby`),t?(t.id!==l&&(t.id=l),i?(d(t,i),t.hidden&&=!1,u(s,`aria-describedby`,l),(o.helperTone?.()??`default`)===`error`?u(t,`role`,`alert`):t.removeAttribute(`role`)):(d(t,``),t.hidden||=!0,t.removeAttribute(`role`),s.removeAttribute(`aria-describedby`))):s.removeAttribute(`aria-describedby`),n===void 0?s.removeAttribute(`aria-checked`):u(s,`aria-checked`,n),r===void 0?s.removeAttribute(`aria-invalid`):u(s,`aria-invalid`,String(r))};return t(()=>{g()}),r(()=>{f=s.shadowRoot?.querySelector(`[data-a11y-label]`)??null,p=s.shadowRoot?.querySelector(`[data-a11y-helper]`)??null,g()}),n(()=>{for(let e of m.values())e();m.clear()}),{helperId:l,labelId:c}}export{o as createA11yControl};
 //# sourceMappingURL=a11y-control.js.map

package/dist/controls/a11y-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-control.js","names":[],"sources":["../../src/controls/a11y-control.ts"],"sourcesContent":["import { createId } from '../internal';\nimport { effect, onCleanup, onMount } from '../runtime-lifecycle';\n\nexport type A11yTone = 'default' | 'error';\n\nexport type A11yControlConfig = {\n  checked?: () => 'true' | 'false' | 'mixed' | undefined;\n  helperId?: string;\n  helperText?: () => string | undefined;\n  helperTone?: () => A11yTone;\n  invalid?: () => boolean;\n  labelId?: string;\n  role: string;\n};\n\nexport type A11yControlHandle = {\n  helperId: string;\n  labelId: string;\n};\n\nconst hasLabelContent = (labelElement: HTMLElement): boolean => {\n  const slot = labelElement.querySelector('slot');\n\n  if (slot instanceof HTMLSlotElement) {\n    return slot.assignedNodes({ flatten: true }).some((node) => (node.textContent?.trim().length ?? 0) > 0);\n  }\n\n  return (labelElement.textContent?.trim().length ?? 0) > 0;\n};\n\nexport function createA11yControl(host: HTMLElement, config: A11yControlConfig): A11yControlHandle {\n  const labelId = config.labelId || createId('a11y-label');\n  const helperId = config.helperId || createId('a11y-helper');\n\n  const setAttr = (element: Element, name: string, value: string): void => {\n    if (element.getAttribute(name) !== value) element.setAttribute(name, value);\n  };\n\n  const setText = (element: Node, value: string): void => {\n    if (element.textContent !== value) element.textContent = value;\n  };\n\n  setAttr(host, 'role', config.role);\n\n  const sync = (): void => {\n    const shadow = host.shadowRoot;\n\n    if (!shadow) return;\n\n    const labelElement = shadow.querySelector('[data-a11y-label]') as HTMLElement | null;\n    const helperElement = shadow.querySelector('[data-a11y-helper]') as HTMLDivElement | null;\n    const checked = config.checked?.();\n    const invalid = config.invalid?.();\n    const helperText = config.helperText?.();\n\n    // Sync label\n    if (labelElement) {\n      if (labelElement.id !== labelId) labelElement.id = labelId;\n\n      if (hasLabelContent(labelElement)) setAttr(host, 'aria-labelledby', labelId);\n      else host.removeAttribute('aria-labelledby');\n    } else {\n      host.removeAttribute('aria-labelledby');\n    }\n\n    // Sync helper\n    if (helperElement) {\n      if (helperElement.id !== helperId) helperElement.id = helperId;\n\n      if (helperText) {\n        setText(helperElement, helperText);\n\n        if (helperElement.hidden) helperElement.hidden = false;\n\n        setAttr(host, 'aria-describedby', helperId);\n\n        if ((config.helperTone?.() ?? 'default') === 'error') setAttr(helperElement, 'role', 'alert');\n        else helperElement.removeAttribute('role');\n      } else {\n        setText(helperElement, '');\n\n        if (!helperElement.hidden) helperElement.hidden = true;\n\n        helperElement.removeAttribute('role');\n        host.removeAttribute('aria-describedby');\n      }\n    } else {\n      host.removeAttribute('aria-describedby');\n    }\n\n    // Sync checked\n    if (checked === undefined) host.removeAttribute('aria-checked');\n    else setAttr(host, 'aria-checked', checked);\n\n    // Sync invalid\n    if (invalid === undefined) host.removeAttribute('aria-invalid');\n    else setAttr(host, 'aria-invalid', String(invalid));\n  };\n\n  // Effect for reactive config changes\n  effect(() => {\n    sync();\n  });\n\n  // Watch for DOM mutations to label/helper content (slot changes, etc.)\n  onMount(() => {\n    const shadow = host.shadowRoot;\n\n    if (!shadow) return;\n\n    sync();\n\n    const labelElement = shadow.querySelector('[data-a11y-label]') as HTMLElement | null;\n    const helperElement = shadow.querySelector('[data-a11y-helper]') as HTMLElement | null;\n\n    const elementsToWatch = [labelElement, helperElement].filter(Boolean) as HTMLElement[];\n\n    if (elementsToWatch.length === 0) return;\n\n    const observer = new MutationObserver(() => {\n      sync();\n    });\n\n    // Watch label and helper elements for content changes (including slot changes)\n    elementsToWatch.forEach((el) => {\n      observer.observe(el, { characterData: true, childList: true, subtree: true });\n\n      // Also listen for slotchange event to catch slot content updates\n      const slot = el.querySelector('slot') as HTMLSlotElement | null;\n\n      if (slot) {\n        const slotHandler = () => sync();\n\n        slot.addEventListener('slotchange', slotHandler);\n        onCleanup(() => slot.removeEventListener('slotchange', slotHandler));\n      }\n    });\n\n    onCleanup(() => observer.disconnect());\n  });\n\n  return { helperId, labelId };\n}\n"],"mappings":"uHAoBA,IAAM,EAAmB,GAAuC,CAC9D,IAAM,EAAO,EAAa,cAAc,OAAO,CAM/C,OAJI,aAAgB,gBACX,EAAK,cAAc,CAAE,QAAS,GAAM,CAAC,CAAC,KAAM,IAAU,EAAK,aAAa,MAAM,CAAC,QAAU,GAAK,EAAE,EAGjG,EAAa,aAAa,MAAM,CAAC,QAAU,GAAK,GAG1D,SAAgB,EAAkB,EAAmB,EAA8C,CACjG,IAAM,EAAU,EAAO,SAAW,EAAS,aAAa,CAClD,EAAW,EAAO,UAAY,EAAS,cAAc,CAErD,GAAW,EAAkB,EAAc,IAAwB,CACnE,EAAQ,aAAa,EAAK,GAAK,GAAO,EAAQ,aAAa,EAAM,EAAM,EAGvE,GAAW,EAAe,IAAwB,CAClD,EAAQ,cAAgB,IAAO,EAAQ,YAAc,IAG3D,EAAQ,EAAM,OAAQ,EAAO,KAAK,CAElC,IAAM,MAAmB,CACvB,IAAM,EAAS,EAAK,WAEpB,GAAI,CAAC,EAAQ,OAEb,IAAM,EAAe,EAAO,cAAc,oBAAoB,CACxD,EAAgB,EAAO,cAAc,qBAAqB,CAC1D,EAAU,EAAO,WAAW,CAC5B,EAAU,EAAO,WAAW,CAC5B,EAAa,EAAO,cAAc,CAGpC,GACE,EAAa,KAAO,IAAS,EAAa,GAAK,GAE/C,EAAgB,EAAa,CAAE,EAAQ,EAAM,kBAAmB,EAAQ,CACvE,EAAK,gBAAgB,kBAAkB,EAE5C,EAAK,gBAAgB,kBAAkB,CAIrC,GACE,EAAc,KAAO,IAAU,EAAc,GAAK,GAElD,GACF,EAAQ,EAAe,EAAW,CAElC,AAA0B,EAAc,SAAS,GAEjD,EAAQ,EAAM,mBAAoB,EAAS,EAEtC,EAAO,cAAc,EAAI,aAAe,QAAS,EAAQ,EAAe,OAAQ,QAAQ,CACxF,EAAc,gBAAgB,OAAO,GAE1C,EAAQ,EAAe,GAAG,CAE1B,AAA2B,EAAc,SAAS,GAElD,EAAc,gBAAgB,OAAO,CACrC,EAAK,gBAAgB,mBAAmB,GAG1C,EAAK,gBAAgB,mBAAmB,CAItC,IAAY,IAAA,GAAW,EAAK,gBAAgB,eAAe,CAC1D,EAAQ,EAAM,eAAgB,EAAQ,CAGvC,IAAY,IAAA,GAAW,EAAK,gBAAgB,eAAe,CAC1D,EAAQ,EAAM,eAAgB,OAAO,EAAQ,CAAC,EA6CrD,OAzCA,MAAa,CACX,GAAM,EACN,CAGF,MAAc,CACZ,IAAM,EAAS,EAAK,WAEpB,GAAI,CAAC,EAAQ,OAEb,GAAM,CAKN,IAAM,EAAkB,CAHH,EAAO,cAAc,oBAAoB,CACxC,EAAO,cAAc,qBAAqB,CAEX,CAAC,OAAO,QAAQ,CAErE,GAAI,EAAgB,SAAW,EAAG,OAElC,IAAM,EAAW,IAAI,qBAAuB,CAC1C,GAAM,EACN,CAGF,EAAgB,QAAS,GAAO,CAC9B,EAAS,QAAQ,EAAI,CAAE,cAAe,GAAM,UAAW,GAAM,QAAS,GAAM,CAAC,CAG7E,IAAM,EAAO,EAAG,cAAc,OAAO,CAErC,GAAI,EAAM,CACR,IAAM,MAAoB,GAAM,CAEhC,EAAK,iBAAiB,aAAc,EAAY,CAChD,MAAgB,EAAK,oBAAoB,aAAc,EAAY,CAAC,GAEtE,CAEF,MAAgB,EAAS,YAAY,CAAC,EACtC,CAEK,CAAE,WAAU,UAAS"}
+{"version":3,"file":"a11y-control.js","names":[],"sources":["../../src/controls/a11y-control.ts"],"sourcesContent":["import { createId } from '../internal';\nimport { currentElementOrThrow, effect, onCleanup, onMounted } from '../runtime';\n\nexport type A11yTone = 'default' | 'error';\n\nexport type A11yControlConfig = {\n  checked?: () => 'true' | 'false' | 'mixed' | undefined;\n  helperId?: string;\n  helperText?: () => string | undefined;\n  helperTone?: () => A11yTone;\n  invalid?: () => boolean;\n  labelId?: string;\n  role: string;\n};\n\nexport type A11yControlHandle = {\n  helperId: string;\n  labelId: string;\n};\n\nconst hasLabelContent = (labelElement: HTMLElement): boolean => {\n  const slot = labelElement.querySelector('slot');\n\n  if (slot instanceof HTMLSlotElement) {\n    return slot.assignedNodes({ flatten: true }).some((node) => (node.textContent?.trim().length ?? 0) > 0);\n  }\n\n  return (labelElement.textContent?.trim().length ?? 0) > 0;\n};\n\nexport function createA11yControl(config: A11yControlConfig): A11yControlHandle {\n  const host = currentElementOrThrow();\n  const labelId = config.labelId || createId('a11y-label');\n  const helperId = config.helperId || createId('a11y-helper');\n\n  const setAttr = (element: Element, name: string, value: string): void => {\n    if (element.getAttribute(name) !== value) element.setAttribute(name, value);\n  };\n\n  const setText = (element: Node, value: string): void => {\n    if (element.textContent !== value) element.textContent = value;\n  };\n\n  setAttr(host, 'role', config.role);\n\n  let labelEl: HTMLElement | null = null;\n  let helperEl: HTMLDivElement | null = null;\n\n  const slotCleanupByElement = new Map<HTMLSlotElement, () => void>();\n\n  const syncSlotListeners = (labelElement: HTMLElement | null, helperElement: HTMLDivElement | null): void => {\n    const nextSlots = new Set<HTMLSlotElement>();\n\n    for (const container of [labelElement, helperElement]) {\n      if (!container) continue;\n\n      for (const slot of Array.from(container.querySelectorAll('slot'))) {\n        if (slot instanceof HTMLSlotElement) nextSlots.add(slot);\n      }\n    }\n\n    for (const [slot, cleanup] of slotCleanupByElement) {\n      if (nextSlots.has(slot)) continue;\n\n      cleanup();\n      slotCleanupByElement.delete(slot);\n    }\n\n    for (const slot of nextSlots) {\n      if (slotCleanupByElement.has(slot)) continue;\n\n      const slotHandler = () => sync();\n\n      slot.addEventListener('slotchange', slotHandler);\n      slotCleanupByElement.set(slot, () => slot.removeEventListener('slotchange', slotHandler));\n    }\n  };\n\n  const sync = (): void => {\n    const shadow = host.shadowRoot;\n\n    if (!shadow) return;\n\n    const labelElement = labelEl;\n    const helperElement = helperEl;\n\n    syncSlotListeners(labelElement, helperElement);\n\n    const checked = config.checked?.();\n    const invalid = config.invalid?.();\n    const helperText = config.helperText?.();\n\n    // Sync label\n    if (labelElement) {\n      if (labelElement.id !== labelId) labelElement.id = labelId;\n\n      if (hasLabelContent(labelElement)) setAttr(host, 'aria-labelledby', labelId);\n      else host.removeAttribute('aria-labelledby');\n    } else {\n      host.removeAttribute('aria-labelledby');\n    }\n\n    // Sync helper\n    if (helperElement) {\n      if (helperElement.id !== helperId) helperElement.id = helperId;\n\n      if (helperText) {\n        setText(helperElement, helperText);\n\n        if (helperElement.hidden) helperElement.hidden = false;\n\n        setAttr(host, 'aria-describedby', helperId);\n\n        if ((config.helperTone?.() ?? 'default') === 'error') setAttr(helperElement, 'role', 'alert');\n        else helperElement.removeAttribute('role');\n      } else {\n        setText(helperElement, '');\n\n        if (!helperElement.hidden) helperElement.hidden = true;\n\n        helperElement.removeAttribute('role');\n        host.removeAttribute('aria-describedby');\n      }\n    } else {\n      host.removeAttribute('aria-describedby');\n    }\n\n    // Sync checked\n    if (checked === undefined) host.removeAttribute('aria-checked');\n    else setAttr(host, 'aria-checked', checked);\n\n    // Sync invalid\n    if (invalid === undefined) host.removeAttribute('aria-invalid');\n    else setAttr(host, 'aria-invalid', String(invalid));\n  };\n\n  // Keep ARIA in sync with reactive config changes.\n  effect(() => {\n    sync();\n  });\n\n  // Query shadow DOM refs once after first render, then sync.\n  onMounted(() => {\n    labelEl = (host.shadowRoot?.querySelector('[data-a11y-label]') ?? null) as HTMLElement | null;\n    helperEl = (host.shadowRoot?.querySelector('[data-a11y-helper]') ?? null) as HTMLDivElement | null;\n    sync();\n  });\n\n  onCleanup(() => {\n    for (const cleanup of slotCleanupByElement.values()) cleanup();\n    slotCleanupByElement.clear();\n  });\n\n  return { helperId, labelId };\n}\n"],"mappings":"0IAoBA,IAAM,EAAmB,GAAuC,CAC9D,IAAM,EAAO,EAAa,cAAc,MAAM,EAM9C,OAJI,aAAgB,gBACX,EAAK,cAAc,CAAE,QAAS,EAAK,CAAC,EAAE,KAAM,IAAU,EAAK,aAAa,KAAK,EAAE,QAAU,GAAK,CAAC,GAGhG,EAAa,aAAa,KAAK,EAAE,QAAU,GAAK,CAC1D,EAEA,SAAgB,EAAkB,EAA8C,CAC9E,IAAM,EAAO,EAAsB,EAC7B,EAAU,EAAO,SAAW,EAAS,YAAY,EACjD,EAAW,EAAO,UAAY,EAAS,aAAa,EAEpD,GAAW,EAAkB,EAAc,IAAwB,CACnE,EAAQ,aAAa,CAAI,IAAM,GAAO,EAAQ,aAAa,EAAM,CAAK,CAC5E,EAEM,GAAW,EAAe,IAAwB,CAClD,EAAQ,cAAgB,IAAO,EAAQ,YAAc,EAC3D,EAEA,EAAQ,EAAM,OAAQ,EAAO,IAAI,EAEjC,IAAI,EAA8B,KAC9B,EAAkC,KAEhC,EAAuB,IAAI,IAE3B,GAAqB,EAAkC,IAA+C,CAC1G,IAAM,EAAY,IAAI,IAEtB,IAAK,IAAM,IAAa,CAAC,EAAc,CAAa,EAC7C,KAEL,IAAK,IAAM,KAAQ,MAAM,KAAK,EAAU,iBAAiB,MAAM,CAAC,EAC1D,aAAgB,iBAAiB,EAAU,IAAI,CAAI,EAI3D,IAAK,GAAM,CAAC,EAAM,KAAY,EACxB,EAAU,IAAI,CAAI,IAEtB,EAAQ,EACR,EAAqB,OAAO,CAAI,GAGlC,IAAK,IAAM,KAAQ,EAAW,CAC5B,GAAI,EAAqB,IAAI,CAAI,EAAG,SAEpC,IAAM,MAAoB,EAAK,EAE/B,EAAK,iBAAiB,aAAc,CAAW,EAC/C,EAAqB,IAAI,MAAY,EAAK,oBAAoB,aAAc,CAAW,CAAC,CAC1F,CACF,EAEM,MAAmB,CAGvB,GAAI,CAFW,EAAK,WAEP,OAEb,IAAM,EAAe,EACf,EAAgB,EAEtB,EAAkB,EAAc,CAAa,EAE7C,IAAM,EAAU,EAAO,UAAU,EAC3B,EAAU,EAAO,UAAU,EAC3B,EAAa,EAAO,aAAa,EAGnC,GACE,EAAa,KAAO,IAAS,EAAa,GAAK,GAE/C,EAAgB,CAAY,EAAG,EAAQ,EAAM,kBAAmB,CAAO,EACtE,EAAK,gBAAgB,iBAAiB,GAE3C,EAAK,gBAAgB,iBAAiB,EAIpC,GACE,EAAc,KAAO,IAAU,EAAc,GAAK,GAElD,GACF,EAAQ,EAAe,CAAU,EAEjC,AAA0B,EAAc,SAAS,GAEjD,EAAQ,EAAM,mBAAoB,CAAQ,GAErC,EAAO,aAAa,GAAK,aAAe,QAAS,EAAQ,EAAe,OAAQ,OAAO,EACvF,EAAc,gBAAgB,MAAM,IAEzC,EAAQ,EAAe,EAAE,EAEzB,AAA2B,EAAc,SAAS,GAElD,EAAc,gBAAgB,MAAM,EACpC,EAAK,gBAAgB,kBAAkB,IAGzC,EAAK,gBAAgB,kBAAkB,EAIrC,IAAY,IAAA,GAAW,EAAK,gBAAgB,cAAc,EACzD,EAAQ,EAAM,eAAgB,CAAO,EAGtC,IAAY,IAAA,GAAW,EAAK,gBAAgB,cAAc,EACzD,EAAQ,EAAM,eAAgB,OAAO,CAAO,CAAC,CACpD,EAmBA,OAhBA,MAAa,CACX,EAAK,CACP,CAAC,EAGD,MAAgB,CACd,EAAW,EAAK,YAAY,cAAc,mBAAmB,GAAK,KAClE,EAAY,EAAK,YAAY,cAAc,oBAAoB,GAAK,KACpE,EAAK,CACP,CAAC,EAED,MAAgB,CACd,IAAK,IAAM,KAAW,EAAqB,OAAO,EAAG,EAAQ,EAC7D,EAAqB,MAAM,CAC7B,CAAC,EAEM,CAAE,WAAU,SAAQ,CAC7B"}

package/dist/controls/checkable-control.cjs

@@ -1,2 +1,2 @@
-const e=require(`./a11y-control.cjs`),t=require(`./field-control.cjs`),n=require(`./press-control.cjs`);var r=r=>{let i=t.createCheckableStateControl(r);return{a11y:e.createA11yControl(r.host,{checked:()=>r.role===`checkbox`&&i.indeterminate.value?`mixed`:i.checked.value?`true`:`false`,helperText:()=>i.assistive.value.text,helperTone:()=>i.assistive.value.isError?`error`:`default`,invalid:()=>i.assistive.value.isError,role:r.role}),control:i,press:n.createPressControl({disabled:()=>i.disabled.value,onPress:e=>{if(r.onPress){r.onPress(i,e);return}i.toggle(e)}})}};exports.createCheckableFieldControl=r;
+const e=require(`./a11y-control.cjs`),t=require(`./field-control.cjs`),n=require(`./press-control.cjs`);let r=require(`@vielzeug/stateit`);var i=e=>{let n=(0,r.signal)(``),i=(0,r.signal)(!!e.checked.value),a=(0,r.signal)(!!e.indeterminate?.value),o=t.createAssistiveState({error:e.error,helper:e.helper});(0,r.watch)(e.checked,e=>{i.value=!!e},{immediate:!0}),e.indeterminate&&(0,r.watch)(e.indeterminate,e=>{a.value=!!e},{immediate:!0});let{base:s,triggerValidation:c}=t.createFieldControlBase(e,{toFormValue:e=>e,value:(0,r.computed)(()=>a.value?null:i.value?e.value.value??``:null)});(0,r.watch)(e.value,e=>{n.value=String(e??``)},{immediate:!0});let l=t=>({checked:i.value,originalEvent:t,value:e.value.value??``}),u=t=>{if(!s.disabled.value){if(e.group){a.value=!1,e.group.toggle(e.value.value??``,t),e.onToggle?.(l(t));return}e.clearIndeterminateFirst&&a.value||(i.value=!i.value),a.value=!1,e.onToggle?.(l(t))}};return{...s,assistive:o,checked:i,indeterminate:a,toggle:u,triggerValidation:c,value:n}},a=t=>{let r=i(t),a=e.createA11yControl({checked:()=>t.role===`checkbox`&&r.indeterminate.value?`mixed`:r.checked.value?`true`:`false`,helperText:()=>r.assistive.value.errorText||r.assistive.value.helperText,helperTone:()=>r.assistive.value.errorText?`error`:`default`,invalid:()=>!!r.assistive.value.errorText,role:t.role}),o=n.createPressControl({disabled:()=>r.disabled.value,onPress:e=>{if(t.onPress){t.onPress(r,e);return}r.toggle(e)}});return{...r,handleClick:o.handleClick,handleKeydown:o.handleKeydown,helperId:a.helperId,labelId:a.labelId}};exports.createCheckableFieldControl=a;
 //# sourceMappingURL=checkable-control.cjs.map

package/dist/controls/checkable-control.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkable-control.cjs","names":[],"sources":["../../src/controls/checkable-control.ts"],"sourcesContent":["import { createA11yControl, type A11yControlHandle } from './a11y-control';\nimport { createCheckableStateControl, type CheckableStateHandle, type CheckableStateOptions } from './field-control';\nimport { createPressControl, type PressControl } from './press-control';\n\nexport type CheckableFieldControlOptions = CheckableStateOptions & {\n  host: HTMLElement;\n  onPress?: (control: CheckableStateHandle, originalEvent: Event) => void;\n  role: 'checkbox' | 'radio' | 'switch';\n};\n\nexport type CheckableFieldControlHandle = {\n  a11y: A11yControlHandle;\n  control: CheckableStateHandle;\n  press: PressControl;\n};\n\nexport const createCheckableFieldControl = (options: CheckableFieldControlOptions): CheckableFieldControlHandle => {\n  const control = createCheckableStateControl(options);\n  const a11y = createA11yControl(options.host, {\n    checked: () => {\n      if (options.role === 'checkbox' && control.indeterminate.value) return 'mixed';\n\n      return control.checked.value ? 'true' : 'false';\n    },\n    helperText: () => control.assistive.value.text,\n    helperTone: () => (control.assistive.value.isError ? 'error' : 'default'),\n    invalid: () => control.assistive.value.isError,\n    role: options.role,\n  });\n  const press = createPressControl({\n    disabled: () => control.disabled.value,\n    onPress: (originalEvent) => {\n      if (options.onPress) {\n        options.onPress(control, originalEvent);\n\n        return;\n      }\n\n      control.toggle(originalEvent);\n    },\n  });\n\n  return { a11y, control, press };\n};\n"],"mappings":"wGAgBA,IAAa,EAA+B,GAAuE,CACjH,IAAM,EAAU,EAAA,4BAA4B,EAAQ,CAyBpD,MAAO,CAAE,KAxBI,EAAA,kBAAkB,EAAQ,KAAM,CAC3C,YACM,EAAQ,OAAS,YAAc,EAAQ,cAAc,MAAc,QAEhE,EAAQ,QAAQ,MAAQ,OAAS,QAE1C,eAAkB,EAAQ,UAAU,MAAM,KAC1C,eAAmB,EAAQ,UAAU,MAAM,QAAU,QAAU,UAC/D,YAAe,EAAQ,UAAU,MAAM,QACvC,KAAM,EAAQ,KACf,CAAC,CAca,UAAS,MAbV,EAAA,mBAAmB,CAC/B,aAAgB,EAAQ,SAAS,MACjC,QAAU,GAAkB,CAC1B,GAAI,EAAQ,QAAS,CACnB,EAAQ,QAAQ,EAAS,EAAc,CAEvC,OAGF,EAAQ,OAAO,EAAc,EAEhC,CAAC,CAE6B"}
+{"version":3,"file":"checkable-control.cjs","names":[],"sources":["../../src/controls/checkable-control.ts"],"sourcesContent":["import { computed, signal, watch } from '@vielzeug/stateit';\n\nimport { createA11yControl } from './a11y-control';\nimport {\n  createAssistiveState,\n  createFieldControlBase,\n  type CheckableChangePayload,\n  type CheckableStateHandle,\n  type CheckableStateOptions,\n} from './field-control';\nimport { createPressControl } from './press-control';\n\nexport type CheckableFieldControlOptions = CheckableStateOptions & {\n  onPress?: (control: CheckableStateHandle, originalEvent: Event) => void;\n  role: 'checkbox' | 'radio' | 'switch';\n};\n\nexport type CheckableFieldControlHandle = CheckableStateHandle & {\n  handleClick: (event: MouseEvent) => boolean;\n  handleKeydown: (event: KeyboardEvent) => boolean;\n  helperId: string;\n  labelId: string;\n};\n\n/** @internal */\nexport const createCheckableState = (options: CheckableStateOptions): CheckableStateHandle => {\n  const value = signal('');\n  const checked = signal(Boolean(options.checked.value));\n  const indeterminate = signal(Boolean(options.indeterminate?.value));\n  const assistive = createAssistiveState({ error: options.error, helper: options.helper });\n\n  watch(\n    options.checked,\n    (next) => {\n      checked.value = Boolean(next);\n    },\n    { immediate: true },\n  );\n\n  if (options.indeterminate) {\n    watch(\n      options.indeterminate,\n      (next) => {\n        indeterminate.value = Boolean(next);\n      },\n      { immediate: true },\n    );\n  }\n\n  const { base, triggerValidation } = createFieldControlBase(options, {\n    toFormValue: (nextValue: string | null) => nextValue,\n    value: computed(() => {\n      if (indeterminate.value) return null;\n\n      return checked.value ? (options.value.value ?? '') : null;\n    }),\n  });\n\n  watch(\n    options.value,\n    (next) => {\n      value.value = String(next ?? '');\n    },\n    { immediate: true },\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 (base.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  return {\n    ...base,\n    assistive,\n    checked,\n    indeterminate,\n    toggle,\n    triggerValidation,\n    value,\n  };\n};\n\nexport const createCheckableFieldControl = (options: CheckableFieldControlOptions): CheckableFieldControlHandle => {\n  const control = createCheckableState(options);\n  const a11y = createA11yControl({\n    checked: () =>\n      options.role === 'checkbox' && control.indeterminate.value ? 'mixed' : control.checked.value ? 'true' : 'false',\n    helperText: () => control.assistive.value.errorText || control.assistive.value.helperText,\n    helperTone: () => (control.assistive.value.errorText ? 'error' : 'default'),\n    invalid: () => Boolean(control.assistive.value.errorText),\n    role: options.role,\n  });\n\n  const press = createPressControl({\n    disabled: () => control.disabled.value,\n    onPress: (originalEvent) => {\n      if (options.onPress) {\n        options.onPress(control, originalEvent);\n\n        return;\n      }\n\n      control.toggle(originalEvent);\n    },\n  });\n\n  return {\n    ...control,\n    handleClick: press.handleClick,\n    handleKeydown: press.handleKeydown,\n    helperId: a11y.helperId,\n    labelId: a11y.labelId,\n  };\n};\n"],"mappings":"2IAyBA,IAAa,EAAwB,GAAyD,CAC5F,IAAM,GAAA,EAAA,EAAA,QAAe,EAAE,EACjB,GAAA,EAAA,EAAA,QAAiB,EAAQ,EAAQ,QAAQ,KAAM,EAC/C,GAAA,EAAA,EAAA,QAAuB,EAAQ,EAAQ,eAAe,KAAM,EAC5D,EAAY,EAAA,qBAAqB,CAAE,MAAO,EAAQ,MAAO,OAAQ,EAAQ,MAAO,CAAC,GAEvF,EAAA,EAAA,OACE,EAAQ,QACP,GAAS,CACR,EAAQ,MAAQ,EAAQ,CAC1B,EACA,CAAE,UAAW,EAAK,CACpB,EAEI,EAAQ,gBACV,EAAA,EAAA,OACE,EAAQ,cACP,GAAS,CACR,EAAc,MAAQ,EAAQ,CAChC,EACA,CAAE,UAAW,EAAK,CACpB,EAGF,GAAM,CAAE,OAAM,qBAAsB,EAAA,uBAAuB,EAAS,CAClE,YAAc,GAA6B,EAC3C,OAAA,EAAA,EAAA,cACM,EAAc,MAAc,KAEzB,EAAQ,MAAS,EAAQ,MAAM,OAAS,GAAM,IACtD,CACH,CAAC,GAED,EAAA,EAAA,OACE,EAAQ,MACP,GAAS,CACR,EAAM,MAAQ,OAAO,GAAQ,EAAE,CACjC,EACA,CAAE,UAAW,EAAK,CACpB,EAEA,IAAM,EAAiB,IAA0C,CAC/D,QAAS,EAAQ,MACjB,cAAe,EACf,MAAO,EAAQ,MAAM,OAAS,EAChC,GAEM,EAAU,GAAuB,CACjC,MAAK,SAAS,MAElB,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,EAEA,MAAO,CACL,GAAG,EACH,YACA,UACA,gBACA,SACA,oBACA,OACF,CACF,EAEa,EAA+B,GAAuE,CACjH,IAAM,EAAU,EAAqB,CAAO,EACtC,EAAO,EAAA,kBAAkB,CAC7B,YACE,EAAQ,OAAS,YAAc,EAAQ,cAAc,MAAQ,QAAU,EAAQ,QAAQ,MAAQ,OAAS,QAC1G,eAAkB,EAAQ,UAAU,MAAM,WAAa,EAAQ,UAAU,MAAM,WAC/E,eAAmB,EAAQ,UAAU,MAAM,UAAY,QAAU,UACjE,YAAe,EAAQ,EAAQ,UAAU,MAAM,UAC/C,KAAM,EAAQ,IAChB,CAAC,EAEK,EAAQ,EAAA,mBAAmB,CAC/B,aAAgB,EAAQ,SAAS,MACjC,QAAU,GAAkB,CAC1B,GAAI,EAAQ,QAAS,CACnB,EAAQ,QAAQ,EAAS,CAAa,EAEtC,MACF,CAEA,EAAQ,OAAO,CAAa,CAC9B,CACF,CAAC,EAED,MAAO,CACL,GAAG,EACH,YAAa,EAAM,YACnB,cAAe,EAAM,cACrB,SAAU,EAAK,SACf,QAAS,EAAK,OAChB,CACF"}

package/dist/controls/checkable-control.d.ts

@@ -1,15 +1,15 @@
-import { type A11yControlHandle } from './a11y-control';
 import { type CheckableStateHandle, type CheckableStateOptions } from './field-control';
-import { type PressControl } from './press-control';
 export type CheckableFieldControlOptions = CheckableStateOptions & {
-    host: HTMLElement;
     onPress?: (control: CheckableStateHandle, originalEvent: Event) => void;
     role: 'checkbox' | 'radio' | 'switch';
 };
-export type CheckableFieldControlHandle = {
-    a11y: A11yControlHandle;
-    control: CheckableStateHandle;
-    press: PressControl;
+export type CheckableFieldControlHandle = CheckableStateHandle & {
+    handleClick: (event: MouseEvent) => boolean;
+    handleKeydown: (event: KeyboardEvent) => boolean;
+    helperId: string;
+    labelId: string;
 };
+/** @internal */
+export declare const createCheckableState: (options: CheckableStateOptions) => CheckableStateHandle;
 export declare const createCheckableFieldControl: (options: CheckableFieldControlOptions) => CheckableFieldControlHandle;
 //# sourceMappingURL=checkable-control.d.ts.map

package/dist/controls/checkable-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkable-control.d.ts","sourceRoot":"","sources":["../../src/controls/checkable-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAA+B,KAAK,oBAAoB,EAAE,KAAK,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AACrH,OAAO,EAAsB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAExE,MAAM,MAAM,4BAA4B,GAAG,qBAAqB,GAAG;IACjE,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,KAAK,KAAK,IAAI,CAAC;IACxE,IAAI,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IACxC,IAAI,EAAE,iBAAiB,CAAC;IACxB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,KAAK,EAAE,YAAY,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,SAAS,4BAA4B,KAAG,2BA2BnF,CAAC"}
+{"version":3,"file":"checkable-control.d.ts","sourceRoot":"","sources":["../../src/controls/checkable-control.ts"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC3B,MAAM,iBAAiB,CAAC;AAGzB,MAAM,MAAM,4BAA4B,GAAG,qBAAqB,GAAG;IACjE,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,KAAK,KAAK,IAAI,CAAC;IACxE,IAAI,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,oBAAoB,GAAG;IAC/D,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,OAAO,CAAC;IAC5C,aAAa,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,OAAO,CAAC;IACjD,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,gBAAgB;AAChB,eAAO,MAAM,oBAAoB,GAAI,SAAS,qBAAqB,KAAG,oBA6ErE,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,SAAS,4BAA4B,KAAG,2BA+BnF,CAAC"}

package/dist/controls/checkable-control.js

@@ -1,2 +1,2 @@
-import{createA11yControl as e}from"./a11y-control.js";import{createCheckableStateControl as t}from"./field-control.js";import{createPressControl as n}from"./press-control.js";var r=r=>{let i=t(r);return{a11y:e(r.host,{checked:()=>r.role===`checkbox`&&i.indeterminate.value?`mixed`:i.checked.value?`true`:`false`,helperText:()=>i.assistive.value.text,helperTone:()=>i.assistive.value.isError?`error`:`default`,invalid:()=>i.assistive.value.isError,role:r.role}),control:i,press:n({disabled:()=>i.disabled.value,onPress:e=>{if(r.onPress){r.onPress(i,e);return}i.toggle(e)}})}};export{r as createCheckableFieldControl};
+import{createA11yControl as e}from"./a11y-control.js";import{createAssistiveState as t,createFieldControlBase as n}from"./field-control.js";import{createPressControl as r}from"./press-control.js";import{computed as i,signal as a,watch as o}from"@vielzeug/stateit";var s=e=>{let r=a(``),s=a(!!e.checked.value),c=a(!!e.indeterminate?.value),l=t({error:e.error,helper:e.helper});o(e.checked,e=>{s.value=!!e},{immediate:!0}),e.indeterminate&&o(e.indeterminate,e=>{c.value=!!e},{immediate:!0});let{base:u,triggerValidation:d}=n(e,{toFormValue:e=>e,value:i(()=>c.value?null:s.value?e.value.value??``:null)});o(e.value,e=>{r.value=String(e??``)},{immediate:!0});let f=t=>({checked:s.value,originalEvent:t,value:e.value.value??``}),p=t=>{if(!u.disabled.value){if(e.group){c.value=!1,e.group.toggle(e.value.value??``,t),e.onToggle?.(f(t));return}e.clearIndeterminateFirst&&c.value||(s.value=!s.value),c.value=!1,e.onToggle?.(f(t))}};return{...u,assistive:l,checked:s,indeterminate:c,toggle:p,triggerValidation:d,value:r}},c=t=>{let n=s(t),i=e({checked:()=>t.role===`checkbox`&&n.indeterminate.value?`mixed`:n.checked.value?`true`:`false`,helperText:()=>n.assistive.value.errorText||n.assistive.value.helperText,helperTone:()=>n.assistive.value.errorText?`error`:`default`,invalid:()=>!!n.assistive.value.errorText,role:t.role}),a=r({disabled:()=>n.disabled.value,onPress:e=>{if(t.onPress){t.onPress(n,e);return}n.toggle(e)}});return{...n,handleClick:a.handleClick,handleKeydown:a.handleKeydown,helperId:i.helperId,labelId:i.labelId}};export{c as createCheckableFieldControl};
 //# sourceMappingURL=checkable-control.js.map

package/dist/controls/checkable-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkable-control.js","names":[],"sources":["../../src/controls/checkable-control.ts"],"sourcesContent":["import { createA11yControl, type A11yControlHandle } from './a11y-control';\nimport { createCheckableStateControl, type CheckableStateHandle, type CheckableStateOptions } from './field-control';\nimport { createPressControl, type PressControl } from './press-control';\n\nexport type CheckableFieldControlOptions = CheckableStateOptions & {\n  host: HTMLElement;\n  onPress?: (control: CheckableStateHandle, originalEvent: Event) => void;\n  role: 'checkbox' | 'radio' | 'switch';\n};\n\nexport type CheckableFieldControlHandle = {\n  a11y: A11yControlHandle;\n  control: CheckableStateHandle;\n  press: PressControl;\n};\n\nexport const createCheckableFieldControl = (options: CheckableFieldControlOptions): CheckableFieldControlHandle => {\n  const control = createCheckableStateControl(options);\n  const a11y = createA11yControl(options.host, {\n    checked: () => {\n      if (options.role === 'checkbox' && control.indeterminate.value) return 'mixed';\n\n      return control.checked.value ? 'true' : 'false';\n    },\n    helperText: () => control.assistive.value.text,\n    helperTone: () => (control.assistive.value.isError ? 'error' : 'default'),\n    invalid: () => control.assistive.value.isError,\n    role: options.role,\n  });\n  const press = createPressControl({\n    disabled: () => control.disabled.value,\n    onPress: (originalEvent) => {\n      if (options.onPress) {\n        options.onPress(control, originalEvent);\n\n        return;\n      }\n\n      control.toggle(originalEvent);\n    },\n  });\n\n  return { a11y, control, press };\n};\n"],"mappings":"+KAgBA,IAAa,EAA+B,GAAuE,CACjH,IAAM,EAAU,EAA4B,EAAQ,CAyBpD,MAAO,CAAE,KAxBI,EAAkB,EAAQ,KAAM,CAC3C,YACM,EAAQ,OAAS,YAAc,EAAQ,cAAc,MAAc,QAEhE,EAAQ,QAAQ,MAAQ,OAAS,QAE1C,eAAkB,EAAQ,UAAU,MAAM,KAC1C,eAAmB,EAAQ,UAAU,MAAM,QAAU,QAAU,UAC/D,YAAe,EAAQ,UAAU,MAAM,QACvC,KAAM,EAAQ,KACf,CAAC,CAca,UAAS,MAbV,EAAmB,CAC/B,aAAgB,EAAQ,SAAS,MACjC,QAAU,GAAkB,CAC1B,GAAI,EAAQ,QAAS,CACnB,EAAQ,QAAQ,EAAS,EAAc,CAEvC,OAGF,EAAQ,OAAO,EAAc,EAEhC,CAAC,CAE6B"}
+{"version":3,"file":"checkable-control.js","names":[],"sources":["../../src/controls/checkable-control.ts"],"sourcesContent":["import { computed, signal, watch } from '@vielzeug/stateit';\n\nimport { createA11yControl } from './a11y-control';\nimport {\n  createAssistiveState,\n  createFieldControlBase,\n  type CheckableChangePayload,\n  type CheckableStateHandle,\n  type CheckableStateOptions,\n} from './field-control';\nimport { createPressControl } from './press-control';\n\nexport type CheckableFieldControlOptions = CheckableStateOptions & {\n  onPress?: (control: CheckableStateHandle, originalEvent: Event) => void;\n  role: 'checkbox' | 'radio' | 'switch';\n};\n\nexport type CheckableFieldControlHandle = CheckableStateHandle & {\n  handleClick: (event: MouseEvent) => boolean;\n  handleKeydown: (event: KeyboardEvent) => boolean;\n  helperId: string;\n  labelId: string;\n};\n\n/** @internal */\nexport const createCheckableState = (options: CheckableStateOptions): CheckableStateHandle => {\n  const value = signal('');\n  const checked = signal(Boolean(options.checked.value));\n  const indeterminate = signal(Boolean(options.indeterminate?.value));\n  const assistive = createAssistiveState({ error: options.error, helper: options.helper });\n\n  watch(\n    options.checked,\n    (next) => {\n      checked.value = Boolean(next);\n    },\n    { immediate: true },\n  );\n\n  if (options.indeterminate) {\n    watch(\n      options.indeterminate,\n      (next) => {\n        indeterminate.value = Boolean(next);\n      },\n      { immediate: true },\n    );\n  }\n\n  const { base, triggerValidation } = createFieldControlBase(options, {\n    toFormValue: (nextValue: string | null) => nextValue,\n    value: computed(() => {\n      if (indeterminate.value) return null;\n\n      return checked.value ? (options.value.value ?? '') : null;\n    }),\n  });\n\n  watch(\n    options.value,\n    (next) => {\n      value.value = String(next ?? '');\n    },\n    { immediate: true },\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 (base.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  return {\n    ...base,\n    assistive,\n    checked,\n    indeterminate,\n    toggle,\n    triggerValidation,\n    value,\n  };\n};\n\nexport const createCheckableFieldControl = (options: CheckableFieldControlOptions): CheckableFieldControlHandle => {\n  const control = createCheckableState(options);\n  const a11y = createA11yControl({\n    checked: () =>\n      options.role === 'checkbox' && control.indeterminate.value ? 'mixed' : control.checked.value ? 'true' : 'false',\n    helperText: () => control.assistive.value.errorText || control.assistive.value.helperText,\n    helperTone: () => (control.assistive.value.errorText ? 'error' : 'default'),\n    invalid: () => Boolean(control.assistive.value.errorText),\n    role: options.role,\n  });\n\n  const press = createPressControl({\n    disabled: () => control.disabled.value,\n    onPress: (originalEvent) => {\n      if (options.onPress) {\n        options.onPress(control, originalEvent);\n\n        return;\n      }\n\n      control.toggle(originalEvent);\n    },\n  });\n\n  return {\n    ...control,\n    handleClick: press.handleClick,\n    handleKeydown: press.handleKeydown,\n    helperId: a11y.helperId,\n    labelId: a11y.labelId,\n  };\n};\n"],"mappings":"wQAyBA,IAAa,EAAwB,GAAyD,CAC5F,IAAM,EAAQ,EAAO,EAAE,EACjB,EAAU,EAAO,EAAQ,EAAQ,QAAQ,KAAM,EAC/C,EAAgB,EAAO,EAAQ,EAAQ,eAAe,KAAM,EAC5D,EAAY,EAAqB,CAAE,MAAO,EAAQ,MAAO,OAAQ,EAAQ,MAAO,CAAC,EAEvF,EACE,EAAQ,QACP,GAAS,CACR,EAAQ,MAAQ,EAAQ,CAC1B,EACA,CAAE,UAAW,EAAK,CACpB,EAEI,EAAQ,eACV,EACE,EAAQ,cACP,GAAS,CACR,EAAc,MAAQ,EAAQ,CAChC,EACA,CAAE,UAAW,EAAK,CACpB,EAGF,GAAM,CAAE,OAAM,qBAAsB,EAAuB,EAAS,CAClE,YAAc,GAA6B,EAC3C,MAAO,MACD,EAAc,MAAc,KAEzB,EAAQ,MAAS,EAAQ,MAAM,OAAS,GAAM,IACtD,CACH,CAAC,EAED,EACE,EAAQ,MACP,GAAS,CACR,EAAM,MAAQ,OAAO,GAAQ,EAAE,CACjC,EACA,CAAE,UAAW,EAAK,CACpB,EAEA,IAAM,EAAiB,IAA0C,CAC/D,QAAS,EAAQ,MACjB,cAAe,EACf,MAAO,EAAQ,MAAM,OAAS,EAChC,GAEM,EAAU,GAAuB,CACjC,MAAK,SAAS,MAElB,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,EAEA,MAAO,CACL,GAAG,EACH,YACA,UACA,gBACA,SACA,oBACA,OACF,CACF,EAEa,EAA+B,GAAuE,CACjH,IAAM,EAAU,EAAqB,CAAO,EACtC,EAAO,EAAkB,CAC7B,YACE,EAAQ,OAAS,YAAc,EAAQ,cAAc,MAAQ,QAAU,EAAQ,QAAQ,MAAQ,OAAS,QAC1G,eAAkB,EAAQ,UAAU,MAAM,WAAa,EAAQ,UAAU,MAAM,WAC/E,eAAmB,EAAQ,UAAU,MAAM,UAAY,QAAU,UACjE,YAAe,EAAQ,EAAQ,UAAU,MAAM,UAC/C,KAAM,EAAQ,IAChB,CAAC,EAEK,EAAQ,EAAmB,CAC/B,aAAgB,EAAQ,SAAS,MACjC,QAAU,GAAkB,CAC1B,GAAI,EAAQ,QAAS,CACnB,EAAQ,QAAQ,EAAS,CAAa,EAEtC,MACF,CAEA,EAAQ,OAAO,CAAa,CAC9B,CACF,CAAC,EAED,MAAO,CACL,GAAG,EACH,YAAa,EAAM,YACnB,cAAe,EAAM,cACrB,SAAU,EAAK,SACf,QAAS,EAAK,OAChB,CACF"}

package/dist/controls/choice-field-control.cjs

@@ -0,0 +1,2 @@
+const e=require(`./field-control.cjs`);let t=require(`@vielzeug/stateit`);var n=e=>e?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.map(e=>String(e??``)).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){if(i.value.includes(e))return;c([...i.value,e]);return}c([e])},f=e=>{if(a.value){if(i.value.includes(e)){u(e);return}c([...i.value,e]);return}c([e])},p=e=>{let t=n(typeof e==`string`?e:String(e??``));t.length===i.value.length&&t.every((e,t)=>e===i.value[t])||c(t)},{base:m,triggerValidation:h}=e.createFieldControlBase(r,{value:o}),g=e.createAssistiveState({error:r.error,helper:r.helper});return(0,t.watch)(r.value,e=>{p(e)},{immediate:!0}),r.multiple&&(0,t.watch)(r.multiple,()=>p(r.value.value)),{...m,assistive:g,clear:l,formValue:o,removeValue:u,selectedValues:i,selectValue:d,setValues:c,toggleValue:f,triggerValidation:h}};exports.createChoiceField=r;
+//# sourceMappingURL=choice-field-control.cjs.map

package/dist/controls/choice-field-control.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice-field-control.cjs","names":[],"sources":["../../src/controls/choice-field-control.ts"],"sourcesContent":["import { computed, signal, watch } from '@vielzeug/stateit';\n\nimport {\n  createAssistiveState,\n  createFieldControlBase,\n  type ChoiceFieldHandle,\n  type ChoiceFieldOptions,\n} from './field-control';\n\nconst parseChoiceFieldValues = (value: string | undefined): string[] => {\n  if (!value) return [];\n\n  return value\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 normalizeSelectedValues = (values: string[]): string[] => {\n    const normalized = isMultiple.value ? values : values.slice(0, 1);\n\n    return [...new Set(normalized.map((entry) => String(entry ?? '')).filter(Boolean))];\n  };\n\n  const setValues = (values: string[]): void => {\n    selectedValues.value = normalizeSelectedValues(values);\n  };\n\n  const clear = (): void => {\n    setValues([]);\n  };\n\n  const removeValue = (value: string): void => {\n    selectedValues.value = selectedValues.value.filter((current) => current !== value);\n  };\n\n  const selectValue = (value: string): void => {\n    if (isMultiple.value) {\n      if (selectedValues.value.includes(value)) return;\n\n      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)) {\n        removeValue(value);\n\n        return;\n      }\n\n      setValues([...selectedValues.value, value]);\n\n      return;\n    }\n\n    setValues([value]);\n  };\n\n  const syncControlledValue = (nextValue: unknown): void => {\n    const values = parseChoiceFieldValues(typeof nextValue === 'string' ? nextValue : String(nextValue ?? ''));\n\n    if (\n      values.length === selectedValues.value.length &&\n      values.every((value, index) => value === selectedValues.value[index])\n    ) {\n      return;\n    }\n\n    setValues(values);\n  };\n\n  const { base, triggerValidation } = createFieldControlBase(options, { value: formValue });\n\n  const assistive = createAssistiveState({\n    error: options.error,\n    helper: options.helper,\n  });\n\n  watch(\n    options.value,\n    (next) => {\n      syncControlledValue(next);\n    },\n    { immediate: true },\n  );\n\n  if (options.multiple) {\n    watch(options.multiple, () => syncControlledValue(options.value.value));\n  }\n\n  return {\n    ...base,\n    assistive,\n    clear,\n    formValue,\n    removeValue,\n    selectedValues,\n    selectValue,\n    setValues,\n    toggleValue,\n    triggerValidation,\n  };\n};\n"],"mappings":"0EASA,IAAM,EAA0B,GACzB,EAEE,EACJ,MAAM,GAAG,EACT,IAAK,GAAU,EAAM,KAAK,CAAC,EAC3B,OAAO,OAAO,EALE,CAAC,EAQT,EAAqB,GAAmD,CACnF,IAAM,GAAA,EAAA,EAAA,QAAkC,CAAC,CAAC,EACpC,GAAA,EAAA,EAAA,cAA4B,EAAQ,EAAQ,UAAU,KAAM,EAC5D,GAAA,EAAA,EAAA,cACJ,EAAW,MAAQ,EAAe,MAAM,KAAK,GAAG,EAAK,EAAe,MAAM,IAAM,EAClF,EAEM,EAA2B,GAA+B,CAC9D,IAAM,EAAa,EAAW,MAAQ,EAAS,EAAO,MAAM,EAAG,CAAC,EAEhE,MAAO,CAAC,GAAG,IAAI,IAAI,EAAW,IAAK,GAAU,OAAO,GAAS,EAAE,CAAC,EAAE,OAAO,OAAO,CAAC,CAAC,CACpF,EAEM,EAAa,GAA2B,CAC5C,EAAe,MAAQ,EAAwB,CAAM,CACvD,EAEM,MAAoB,CACxB,EAAU,CAAC,CAAC,CACd,EAEM,EAAe,GAAwB,CAC3C,EAAe,MAAQ,EAAe,MAAM,OAAQ,GAAY,IAAY,CAAK,CACnF,EAEM,EAAe,GAAwB,CAC3C,GAAI,EAAW,MAAO,CACpB,GAAI,EAAe,MAAM,SAAS,CAAK,EAAG,OAE1C,EAAU,CAAC,GAAG,EAAe,MAAO,CAAK,CAAC,EAE1C,MACF,CAEA,EAAU,CAAC,CAAK,CAAC,CACnB,EAEM,EAAe,GAAwB,CAC3C,GAAI,EAAW,MAAO,CACpB,GAAI,EAAe,MAAM,SAAS,CAAK,EAAG,CACxC,EAAY,CAAK,EAEjB,MACF,CAEA,EAAU,CAAC,GAAG,EAAe,MAAO,CAAK,CAAC,EAE1C,MACF,CAEA,EAAU,CAAC,CAAK,CAAC,CACnB,EAEM,EAAuB,GAA6B,CACxD,IAAM,EAAS,EAAuB,OAAO,GAAc,SAAW,EAAY,OAAO,GAAa,EAAE,CAAC,EAGvG,EAAO,SAAW,EAAe,MAAM,QACvC,EAAO,OAAO,EAAO,IAAU,IAAU,EAAe,MAAM,EAAM,GAKtE,EAAU,CAAM,CAClB,EAEM,CAAE,OAAM,qBAAsB,EAAA,uBAAuB,EAAS,CAAE,MAAO,CAAU,CAAC,EAElF,EAAY,EAAA,qBAAqB,CACrC,MAAO,EAAQ,MACf,OAAQ,EAAQ,MAClB,CAAC,EAcD,OAZA,EAAA,EAAA,OACE,EAAQ,MACP,GAAS,CACR,EAAoB,CAAI,CAC1B,EACA,CAAE,UAAW,EAAK,CACpB,EAEI,EAAQ,WACV,EAAA,EAAA,OAAM,EAAQ,aAAgB,EAAoB,EAAQ,MAAM,KAAK,CAAC,EAGjE,CACL,GAAG,EACH,YACA,QACA,YACA,cACA,iBACA,cACA,YACA,cACA,mBACF,CACF"}

package/dist/controls/choice-field-control.d.ts

@@ -0,0 +1,3 @@
+import { type ChoiceFieldHandle, type ChoiceFieldOptions } from './field-control';
+export declare const createChoiceField: (options: ChoiceFieldOptions) => ChoiceFieldHandle;
+//# sourceMappingURL=choice-field-control.d.ts.map

package/dist/controls/choice-field-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice-field-control.d.ts","sourceRoot":"","sources":["../../src/controls/choice-field-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAWzB,eAAO,MAAM,iBAAiB,GAAI,SAAS,kBAAkB,KAAG,iBAiG/D,CAAC"}

package/dist/controls/choice-field-control.js

@@ -0,0 +1,2 @@
+import{createAssistiveState as e,createFieldControlBase as t}from"./field-control.js";import{computed as n,signal as r,watch as i}from"@vielzeug/stateit";var a=e=>e?e.split(`,`).map(e=>e.trim()).filter(Boolean):[],o=o=>{let s=r([]),c=n(()=>!!o.multiple?.value),l=n(()=>c.value?s.value.join(`,`):s.value[0]??``),u=e=>{let t=c.value?e:e.slice(0,1);return[...new Set(t.map(e=>String(e??``)).filter(Boolean))]},d=e=>{s.value=u(e)},f=()=>{d([])},p=e=>{s.value=s.value.filter(t=>t!==e)},m=e=>{if(c.value){if(s.value.includes(e))return;d([...s.value,e]);return}d([e])},h=e=>{if(c.value){if(s.value.includes(e)){p(e);return}d([...s.value,e]);return}d([e])},g=e=>{let t=a(typeof e==`string`?e:String(e??``));t.length===s.value.length&&t.every((e,t)=>e===s.value[t])||d(t)},{base:_,triggerValidation:v}=t(o,{value:l}),y=e({error:o.error,helper:o.helper});return i(o.value,e=>{g(e)},{immediate:!0}),o.multiple&&i(o.multiple,()=>g(o.value.value)),{..._,assistive:y,clear:f,formValue:l,removeValue:p,selectedValues:s,selectValue:m,setValues:d,toggleValue:h,triggerValidation:v}};export{o as createChoiceField};
+//# sourceMappingURL=choice-field-control.js.map

package/dist/controls/choice-field-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice-field-control.js","names":[],"sources":["../../src/controls/choice-field-control.ts"],"sourcesContent":["import { computed, signal, watch } from '@vielzeug/stateit';\n\nimport {\n  createAssistiveState,\n  createFieldControlBase,\n  type ChoiceFieldHandle,\n  type ChoiceFieldOptions,\n} from './field-control';\n\nconst parseChoiceFieldValues = (value: string | undefined): string[] => {\n  if (!value) return [];\n\n  return value\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 normalizeSelectedValues = (values: string[]): string[] => {\n    const normalized = isMultiple.value ? values : values.slice(0, 1);\n\n    return [...new Set(normalized.map((entry) => String(entry ?? '')).filter(Boolean))];\n  };\n\n  const setValues = (values: string[]): void => {\n    selectedValues.value = normalizeSelectedValues(values);\n  };\n\n  const clear = (): void => {\n    setValues([]);\n  };\n\n  const removeValue = (value: string): void => {\n    selectedValues.value = selectedValues.value.filter((current) => current !== value);\n  };\n\n  const selectValue = (value: string): void => {\n    if (isMultiple.value) {\n      if (selectedValues.value.includes(value)) return;\n\n      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)) {\n        removeValue(value);\n\n        return;\n      }\n\n      setValues([...selectedValues.value, value]);\n\n      return;\n    }\n\n    setValues([value]);\n  };\n\n  const syncControlledValue = (nextValue: unknown): void => {\n    const values = parseChoiceFieldValues(typeof nextValue === 'string' ? nextValue : String(nextValue ?? ''));\n\n    if (\n      values.length === selectedValues.value.length &&\n      values.every((value, index) => value === selectedValues.value[index])\n    ) {\n      return;\n    }\n\n    setValues(values);\n  };\n\n  const { base, triggerValidation } = createFieldControlBase(options, { value: formValue });\n\n  const assistive = createAssistiveState({\n    error: options.error,\n    helper: options.helper,\n  });\n\n  watch(\n    options.value,\n    (next) => {\n      syncControlledValue(next);\n    },\n    { immediate: true },\n  );\n\n  if (options.multiple) {\n    watch(options.multiple, () => syncControlledValue(options.value.value));\n  }\n\n  return {\n    ...base,\n    assistive,\n    clear,\n    formValue,\n    removeValue,\n    selectedValues,\n    selectValue,\n    setValues,\n    toggleValue,\n    triggerValidation,\n  };\n};\n"],"mappings":"0JASA,IAAM,EAA0B,GACzB,EAEE,EACJ,MAAM,GAAG,EACT,IAAK,GAAU,EAAM,KAAK,CAAC,EAC3B,OAAO,OAAO,EALE,CAAC,EAQT,EAAqB,GAAmD,CACnF,IAAM,EAAiB,EAAiB,CAAC,CAAC,EACpC,EAAa,MAAe,EAAQ,EAAQ,UAAU,KAAM,EAC5D,EAAY,MAChB,EAAW,MAAQ,EAAe,MAAM,KAAK,GAAG,EAAK,EAAe,MAAM,IAAM,EAClF,EAEM,EAA2B,GAA+B,CAC9D,IAAM,EAAa,EAAW,MAAQ,EAAS,EAAO,MAAM,EAAG,CAAC,EAEhE,MAAO,CAAC,GAAG,IAAI,IAAI,EAAW,IAAK,GAAU,OAAO,GAAS,EAAE,CAAC,EAAE,OAAO,OAAO,CAAC,CAAC,CACpF,EAEM,EAAa,GAA2B,CAC5C,EAAe,MAAQ,EAAwB,CAAM,CACvD,EAEM,MAAoB,CACxB,EAAU,CAAC,CAAC,CACd,EAEM,EAAe,GAAwB,CAC3C,EAAe,MAAQ,EAAe,MAAM,OAAQ,GAAY,IAAY,CAAK,CACnF,EAEM,EAAe,GAAwB,CAC3C,GAAI,EAAW,MAAO,CACpB,GAAI,EAAe,MAAM,SAAS,CAAK,EAAG,OAE1C,EAAU,CAAC,GAAG,EAAe,MAAO,CAAK,CAAC,EAE1C,MACF,CAEA,EAAU,CAAC,CAAK,CAAC,CACnB,EAEM,EAAe,GAAwB,CAC3C,GAAI,EAAW,MAAO,CACpB,GAAI,EAAe,MAAM,SAAS,CAAK,EAAG,CACxC,EAAY,CAAK,EAEjB,MACF,CAEA,EAAU,CAAC,GAAG,EAAe,MAAO,CAAK,CAAC,EAE1C,MACF,CAEA,EAAU,CAAC,CAAK,CAAC,CACnB,EAEM,EAAuB,GAA6B,CACxD,IAAM,EAAS,EAAuB,OAAO,GAAc,SAAW,EAAY,OAAO,GAAa,EAAE,CAAC,EAGvG,EAAO,SAAW,EAAe,MAAM,QACvC,EAAO,OAAO,EAAO,IAAU,IAAU,EAAe,MAAM,EAAM,GAKtE,EAAU,CAAM,CAClB,EAEM,CAAE,OAAM,qBAAsB,EAAuB,EAAS,CAAE,MAAO,CAAU,CAAC,EAElF,EAAY,EAAqB,CACrC,MAAO,EAAQ,MACf,OAAQ,EAAQ,MAClB,CAAC,EAcD,OAZA,EACE,EAAQ,MACP,GAAS,CACR,EAAoB,CAAI,CAC1B,EACA,CAAE,UAAW,EAAK,CACpB,EAEI,EAAQ,UACV,EAAM,EAAQ,aAAgB,EAAoB,EAAQ,MAAM,KAAK,CAAC,EAGjE,CACL,GAAG,EACH,YACA,QACA,YACA,cACA,iBACA,cACA,YACA,cACA,mBACF,CACF"}

package/dist/controls/field-control.cjs

@@ -1,2 +1,2 @@
-const e=require(`../runtime-lifecycle.cjs`),t=require(`../internal.cjs`),n=require(`../directives/spread.cjs`),r=require(`../form.cjs`),i=require(`./internal/control-state.cjs`);let a=require(`@vielzeug/stateit`);var o=(e,n)=>{let r=`${e}-${n&&n.trim()?n.trim():t.createId().replace(/^cft-/,``)}`,i=`label-${r}`;return{errorId:`error-${r}`,fieldId:r,helperId:`helper-${r}`,labelInsetId:i,labelOutsideId:`${i}-outside`}},s=n=>{let r=i.createControlState(n),a=o(n.prefix,n.name?.value),s=t.ref(),c=t.ref();return e.effect(()=>{let e=n.labelPlacement?.value??`inset`,t=n.label?.value??``;s.value&&(s.value.textContent=t,s.value.hidden=!t||e!==`inset`),c.value&&(c.value.textContent=t,c.value.hidden=!t||e!==`outside`)}),{disabled:r.disabled,errorId:a.errorId,fieldId:a.fieldId,helperId:a.helperId,labelInsetId:a.labelInsetId,labelInsetRef:s,labelOutsideId:a.labelOutsideId,labelOutsideRef:c,triggerValidation:(e,t)=>r.triggerValidation(e,t),validateOn:r.validateOn}},c=e=>({disabled:(0,a.computed)(()=>!!e.disabled?.value||!!e.context?.disabled?.value),validateOn:e.validateOn??e.context?.validateOn}),l=e=>(0,a.computed)(()=>{let t=e.value?.value??``,n=e.error?.value??``,r=e.helper?.value??``,i=!!n,a=!!r,o=n||r||``,s=e.maxLength?.value,c=Number(s),l=Number.isFinite(c)&&c>0?c:null,u=l!==null,d=u?`${t.length} / ${l}`:``,f=u?t.length/l:0;return{counterAtLimit:u?f>=1:!1,counterNearLimit:u?f>=.9&&f<1:!1,counterText:d,errorText:n,hasCounter:u,hasError:i,hasHelper:a,helperText:r,hidden:!o,isError:i,showHelper:!i&&a,text:o}}),u=e=>{if(e!==void 0)return(0,a.isSignal)(e)?e.value:typeof e==`function`?e():e},d=e=>()=>{let t=u(e);if(!(t==null||t===``))return String(t)},f=e=>()=>{let t=u(e);if(!(t==null||Number.isNaN(Number(t))||Number(t)<=0))return Number(t)},p=t=>{let i=(0,a.signal)(``),o=c(t),u=s({...t,...o});e.watch(t.value,e=>{i.value=String(e??``)},{immediate:!0});let p=r.defineField({disabled:u.disabled,value:i},{onReset:()=>{i.value=``,t.onReset?.()}}),h=l({error:t.error,helper:t.helper,maxLength:t.maxLength,value:i}),g=e=>{e?.preventDefault?.(),i.value=``,t.onInput?.(e??new Event(`input`),``),t.onChange?.(e??new Event(`change`),``),u.triggerValidation(p,`change`),t.elementRef?.value?.focus()};return t.elementRef&&e.onElement(t.elementRef,e=>{m({element:e,onBlur:t.onBlur,onChange:t.onChange,onInput:(e,n)=>{t.onInputExtra?.(e),t.onInput?.(e,n)},triggerValidation:e=>u.triggerValidation(p,e)})}),{assistive:h,attrs:n.spread({"?required":t.required,".disabled":t.disabled,".readOnly":t.readOnly,".type":t.type,".value":i,autocomplete:d(t.autocomplete),inputmode:d(t.inputmode),maxlength:f(t.maxLength),minlength:f(t.minLength),name:d(t.name),pattern:d(t.pattern),placeholder:d(t.placeholder),rows:f(t.rows)}),...u,clear:g,field:p,triggerValidation:e=>u.triggerValidation(p,e),value:i}},m=t=>{let{element:n,onBlur:r,onChange:i,onInput:a,triggerValidation:o}=t;a&&e.handle(n,`input`,e=>{a(e,n.value)}),e.handle(n,`change`,e=>{i?.(e,n.value),o?.(`change`)}),e.handle(n,`blur`,e=>{r?.(e),o?.(`blur`)})},h=e=>e?e.split(`,`).map(e=>e.trim()).filter(Boolean):[],g=t=>{let n=s({...c(t),label:t.label,labelPlacement:t.labelPlacement,name:t.name,prefix:t.prefix}),i=(0,a.signal)([]),o=(0,a.computed)(()=>!!t.multiple?.value),u=(0,a.computed)(()=>i.value.map(e=>t.getValue(e))),d=(0,a.computed)(()=>o.value?u.value.join(`,`):u.value[0]??``),f=e=>{let n=o.value?e:e.slice(0,1),r=[],i=new Set;for(let e of n){let n=t.getValue(e);i.has(n)||(i.add(n),r.push(e))}return r},p=e=>{i.value=f(e)},m=()=>{p([])},g=e=>{i.value=i.value.filter(n=>t.getValue(n)!==e)},_=e=>{if(o.value){let n=t.getValue(e);if(i.value.some(e=>t.getValue(e)===n))return;p([...i.value,e]);return}p([e])},v=e=>{if(o.value){let n=t.getValue(e);if(i.value.some(e=>t.getValue(e)===n)){g(n);return}p([...i.value,e]);return}p([e])},y=e=>{p(h(typeof e==`string`?e:String(e??``)).map(e=>t.mapControlledValue(e)))},b=r.defineField({disabled:n.disabled,value:d},{onReset:()=>{m(),t.onReset?.()}}),x=l({error:t.error,helper:t.helper});return e.watch(t.value,e=>{y(e)},{immediate:!0}),t.multiple&&e.watch(t.multiple,()=>y(t.value.value)),{...n,assistive:x,clear:m,field:b,formValue:d,isMultiple:o,isSelected:e=>i.value.some(n=>t.getValue(n)===e),removeValue:g,replaceSelectedItems:p,selectedItems:i,selectedValues:u,selectItem:_,toggleItem:v,triggerValidation:e=>n.triggerValidation(b,e)}},_=t=>{let n=(0,a.signal)(``),i=s(t),o=(0,a.signal)(!!t.checked.value),c=(0,a.signal)(!!t.indeterminate?.value),u=l({error:t.error,helper:t.helper});e.watch(t.checked,e=>{o.value=!!e},{immediate:!0}),t.indeterminate&&e.watch(t.indeterminate,e=>{c.value=!!e},{immediate:!0});let d=r.defineField({disabled:i.disabled,toFormValue:e=>e,value:(0,a.computed)(()=>o.value?t.value.value??``:null)},{onReset:()=>{o.value=!!t.checked.value,c.value=!!t.indeterminate?.value,t.onReset?.()}});e.watch(t.value,e=>{n.value=String(e??``)},{immediate:!0});let f=e=>({checked:o.value,fieldValue:t.value.value??``,originalEvent:e}),p=e=>{if(!i.disabled.value){if(t.group){c.value=!1,t.group.toggle(t.value.value??``,e),t.onToggle?.(f(e));return}t.clearIndeterminateFirst&&c.value||(o.value=!o.value),c.value=!1,t.onToggle?.(f(e))}};return{...i,assistive:u,checked:o,field:d,indeterminate:c,toggle:p,triggerValidation:e=>i.triggerValidation(d,e),value:n}};exports.createCheckableStateControl=_,exports.createChoiceFieldControl=g,exports.createTextFieldControl=p,exports.mountTextFieldLifecycle=m;
+const e=require(`../runtime.cjs`),t=require(`../internal.cjs`),n=require(`../form.cjs`),r=require(`./internal/control-state.cjs`);let i=require(`@vielzeug/stateit`);var a=(e,n)=>{let r=`${e}-${n&&n.trim()?n.trim():t.createId().replace(/^cft-/,``)}`,i=`label-${r}`;return{errorId:`error-${r}`,fieldId:r,helperId:`helper-${r}`,labelInsetId:i,labelOutsideId:`${i}-outside`}},o=(e,t)=>{let i=r.createControlState(e),o=a(e.prefix,e.name?.value),s={disabled:i.disabled,errorId:o.errorId,fieldId:o.fieldId,helperId:o.helperId,labelInsetId:o.labelInsetId,labelOutsideId:o.labelOutsideId},c=n.defineField({...t,disabled:t.disabled??s.disabled});return{base:s,triggerValidation:e=>i.triggerValidation(c,e)}},s=e=>(0,i.computed)(()=>{let t=e.value?.value??``,n=e.error?.value??``,r=e.helper?.value??``,i=e.maxLength?.value,a=Number(i),o=Number.isFinite(a)&&a>0?a:null,s=o!==null,c=s?`${t.length} / ${o}`:``,l=s?t.length/o:0;return{counterAtLimit:s?l>=1:!1,counterNearLimit:s?l>=.9&&l<1:!1,counterText:c,errorText:n,hasCounter:s,helperText:r}}),c=t=>{let{element:n,onBlur:r,onChange:i,onInput:a,triggerValidation:o}=t,s=[];return a&&s.push(e.listen(n,`input`,e=>{e.stopPropagation(),a(e,n.value)})),s.push(e.listen(n,`change`,e=>{e.stopPropagation(),i?.(e,n.value),o?.(`change`)})),s.push(e.listen(n,`blur`,e=>{r?.(e),o?.(`blur`)})),()=>{for(let e of s)e()}};exports.createAssistiveState=s,exports.createFieldControlBase=o,exports.mountTextFieldLifecycle=c;
 //# sourceMappingURL=field-control.cjs.map