@vielzeug/craftit 2.0.1 → 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, context, slots/emits, form-associated helpers, and observer utilities.
+Craftit is Vielzeug's custom-element authoring library built on `@vielzeug/stateit`.
 
 ## Installation
 
@@ -17,144 +17,96 @@ pnpm add @vielzeug/craftit
 ## Quick Start
 
 ```ts
-import { defineComponent, signal, computed, html } from '@vielzeug/craftit';
+import { computed, css, define, html, prop, signal } from '@vielzeug/craftit';
 
-defineComponent({
-  setup() {
+define('my-counter', {
+  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>
     `;
   },
-  tag: 'my-counter',
+  styles: [
+    css`
+      :host {
+        display: inline-grid;
+        gap: 0.5rem;
+      }
+    `,
+  ],
 });
 ```
 
-## Features
-
-- ✅ **Component authoring** — `defineComponent({ 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** — `defineComponent`, `prop`, `typed`, setup-context `emit` and `slots`
-- ✅ **Context / DI** — `createContext`, `provide`, `inject`, `syncContextProps`
-- ✅ **Form-associated controls** — `defineField` with `ElementInternals`
-- ✅ **Observer utilities** — `observeResize` (main API) + `observeIntersection` / `observeMedia` (`/labs`)
-- ✅ **Directive subpath** — `@vielzeug/craftit/directives`
-- ✅ **Test subpath** — `@vielzeug/craftit/test`
-
-## Entry Points
-
-| Entry | Purpose |
-|---|---|
-| `@vielzeug/craftit` | Main API (components + stateit re-exports) |
-| `@vielzeug/craftit/directives` | Directive helpers like `each`, `when`, `bind`, `match`, `until` |
-| `@vielzeug/craftit/test` | Mount/query/event testing utilities |
-
-## Usage Highlights
-
-### Typed props + emits
-
-```ts
-import { defineComponent, html } from '@vielzeug/craftit';
-
-defineComponent<
-  { disabled: boolean; label: string },
-  { change: string }
->({
-  props: {
-    disabled: { default: false },
-    label: { default: 'Name' },
-  },
-  setup({ emit, props }) {
-    return html`
-      <label>${props.label}</label>
-      <input
-        :disabled=${props.disabled}
-        @input=${(e: Event) => emit('change', (e.target as HTMLInputElement).value)}
-      />
-    `;
-  },
-  tag: 'name-input',
-});
-```
+## Authoring Model
 
-### 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 { defineComponent, signal, html } from '@vielzeug/craftit';
-import { each, when } from '@vielzeug/craftit/directives';
+import { define, html, onCleanup, onMounted, signal } from '@vielzeug/craftit';
 
-defineComponent({
+define('auto-save-field', {
   setup() {
-    const todos = signal([{ id: 1, text: 'Write docs', done: false }]);
-
-    return html`
-      ${when(
-        () => todos.value.length > 0,
-        () => html`<ul>${each(todos, (todo) => html`<li>${todo.text}</li>`, () => html``, { key: (t) => t.id })}</ul>`,
-        () => html`<p>No todos</p>`,
-      )}
-    `;
-  },
-  tag: 'todo-list',
-});
-```
-
-### Form-associated field
+    const value = signal('');
 
-```ts
-import { defineComponent, defineField, signal, html } from '@vielzeug/craftit';
+    onMounted(() => {
+      console.log('ready for DOM interactions');
+    });
 
-defineComponent({
-  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>
     `;
   },
-  tag: 'email-field',
 });
 ```
 
+## 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
 
-| Group | Main exports |
-|---|---|
-| Components | `defineComponent`, `DefineComponentOptions`, `DefineComponentSetupContext`, `BuildPropSchema` |
-| Runtime | `onMount`, `onCleanup`, `onError`, `handle`, `aria`, `effect`, `watch`, `fire` |
-| Props | `prop`, `typed`, `PropOptions`, `PropDef`, `InferPropsSignals` |
-| Slots / emits | setup-context `slots`, setup-context `emit`, `onSlotChange`, `Slots`, `EmitFn` |
-| Context | `createContext`, `provide`, `inject`, `syncContextProps`, `InjectionKey` |
-| Form | `defineField`, `FormFieldOptions`, `FormFieldCallbacks`, `FormFieldHandle` |
-| Observers | `observeResize`, `observeIntersection`, `observeMedia` |
-| Utilities | `html`, `css`, `createId`, `createFormIds`, `guard`, `escapeHtml`, `toKebab` |
-| 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

@@ -0,0 +1,2 @@
+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

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

@@ -0,0 +1,16 @@
+export type A11yTone = 'default' | 'error';
+export type A11yControlConfig = {
+    checked?: () => 'true' | 'false' | 'mixed' | undefined;
+    helperId?: string;
+    helperText?: () => string | undefined;
+    helperTone?: () => A11yTone;
+    invalid?: () => boolean;
+    labelId?: string;
+    role: string;
+};
+export type A11yControlHandle = {
+    helperId: string;
+    labelId: string;
+};
+export declare function createA11yControl(config: A11yControlConfig): A11yControlHandle;
+//# sourceMappingURL=a11y-control.d.ts.map

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

@@ -0,0 +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,MAAM,EAAE,iBAAiB,GAAG,iBAAiB,CA4H9E"}

package/dist/controls/a11y-control.js

@@ -0,0 +1,2 @@
+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

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

@@ -0,0 +1,2 @@
+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

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

@@ -0,0 +1,15 @@
+import { type CheckableStateHandle, type CheckableStateOptions } from './field-control';
+export type CheckableFieldControlOptions = CheckableStateOptions & {
+    onPress?: (control: CheckableStateHandle, originalEvent: Event) => void;
+    role: 'checkbox' | 'radio' | 'switch';
+};
+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

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

@@ -0,0 +1,2 @@
+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

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

@@ -0,0 +1,2 @@
+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

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

@@ -0,0 +1 @@
+{"version":3,"file":"field-control.cjs","names":[],"sources":["../../src/controls/field-control.ts"],"sourcesContent":["import { computed, type ReadonlySignal, type Signal } from '@vielzeug/stateit';\n\nimport { defineField, type FormFieldOptions } from '../form';\nimport { createId } from '../internal';\nimport { listen } from '../runtime';\nimport {\n  createControlState,\n  type ControlContextOptions,\n  type ControlValidationMode,\n  type FormControlValidationTrigger,\n} from './internal/control-state';\n\nexport type { FormControlValidationTrigger } from './internal/control-state';\nexport type { ValidationReporter } from './internal/control-state';\n\nexport type TextFieldControlContext = ControlContextOptions;\n\nexport type FieldBaseOptions = {\n  context?: TextFieldControlContext;\n  disabled?: ReadonlySignal<boolean | undefined>;\n  error?: ReadonlySignal<string | undefined>;\n  helper?: ReadonlySignal<string | undefined>;\n  name?: ReadonlySignal<string | undefined>;\n  prefix: string;\n  validateOn?: ReadonlySignal<ControlValidationMode>;\n};\n\nexport type TextFieldOptions = FieldBaseOptions & {\n  elementRef?: { value: HTMLInputElement | HTMLTextAreaElement | null };\n  maxLength?: ReadonlySignal<number | undefined>;\n  onBlur?: (event: FocusEvent) => void;\n  onChange?: (event: Event, value: string) => void;\n  onInput?: (event: Event, value: string) => void;\n  onInputExtra?: (event: Event) => void;\n  value: ReadonlySignal<string | undefined>;\n};\n\nexport type ChoiceFieldOptions = FieldBaseOptions & {\n  multiple?: ReadonlySignal<boolean | undefined>;\n  value: ReadonlySignal<string | undefined>;\n};\n\nexport type CheckableStateOptions = FieldBaseOptions & {\n  checked: ReadonlySignal<boolean | undefined>;\n  clearIndeterminateFirst?: boolean;\n  group?: { toggle: (value: string, originalEvent?: Event) => void };\n  indeterminate?: ReadonlySignal<boolean | undefined>;\n  onToggle?: (payload: CheckableChangePayload) => void;\n  value: ReadonlySignal<string | undefined>;\n};\n\nexport type CheckableChangePayload = {\n  checked: boolean;\n  originalEvent?: Event;\n  value: string;\n};\n\nexport type FieldControlBaseHandle = {\n  disabled: ReadonlySignal<boolean>;\n  errorId: string;\n  fieldId: string;\n  helperId: string;\n  labelInsetId: string;\n  labelOutsideId: string;\n  triggerValidation: (on: FormControlValidationTrigger) => void;\n};\n\nexport type TextFieldHandle = FieldControlBaseHandle & {\n  assistive: ReadonlySignal<AssistiveState>;\n  clear: (event?: Event) => void;\n  value: Signal<string>;\n};\n\nexport type AssistiveState = {\n  counterAtLimit: boolean;\n  counterNearLimit: boolean;\n  counterText: string;\n  errorText: string;\n  hasCounter: boolean;\n  helperText: string;\n};\n\nexport type AssistiveOptions = {\n  error?: ReadonlySignal<string | undefined>;\n  helper?: ReadonlySignal<string | undefined>;\n  maxLength?: ReadonlySignal<number | undefined>;\n  value?: ReadonlySignal<string | undefined>;\n};\n\nexport type TextFieldLifecycleOptions = {\n  element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\n  onBlur?: (event: FocusEvent) => void;\n  onChange?: (event: Event, value: string) => void;\n  onInput?: (event: Event, value: string) => void;\n  triggerValidation?: (on: FormControlValidationTrigger) => void;\n};\n\nexport type CheckableStateHandle = FieldControlBaseHandle & {\n  assistive: ReadonlySignal<AssistiveState>;\n  checked: Signal<boolean>;\n  indeterminate: Signal<boolean>;\n  toggle: (event: Event) => void;\n  value: Signal<string>;\n};\n\nexport type ChoiceFieldHandle = FieldControlBaseHandle & {\n  assistive: ReadonlySignal<AssistiveState>;\n  clear: () => void;\n  formValue: ReadonlySignal<string>;\n  removeValue: (value: string) => void;\n  selectedValues: ReadonlySignal<string[]>;\n  selectValue: (value: string) => void;\n  setValues: (values: string[]) => void;\n  toggleValue: (value: string) => void;\n};\n\n/**\n * Generates a stable set of ARIA-related IDs for a field control.\n * Snapshot `name` at call time — IDs are stable strings, not reactive.\n */\nconst createFieldIds = (prefix: string, name?: string | null) => {\n  const normalizedName = name && name.trim() ? name.trim() : createId().replace(/^cft-/, '');\n  const fieldId = `${prefix}-${normalizedName}`;\n  const labelInsetId = `label-${fieldId}`;\n\n  return {\n    errorId: `error-${fieldId}`,\n    fieldId,\n    helperId: `helper-${fieldId}`,\n    labelInsetId,\n    labelOutsideId: `${labelInsetId}-outside`,\n  };\n};\n\nexport const createFieldControlBase = <T = unknown>(\n  options: {\n    context?: TextFieldControlContext;\n    name?: ReadonlySignal<string | undefined>;\n    prefix: string;\n  } & ControlContextOptions,\n  fieldOptions: Omit<FormFieldOptions<T>, 'disabled'> & {\n    disabled?: FormFieldOptions<T>['disabled'];\n  },\n): {\n  base: Omit<FieldControlBaseHandle, 'triggerValidation'>;\n  triggerValidation: (on: FormControlValidationTrigger) => void;\n} => {\n  const controlState = createControlState(options);\n  const ids = createFieldIds(options.prefix, options.name?.value);\n\n  const base: Omit<FieldControlBaseHandle, 'triggerValidation'> = {\n    disabled: controlState.disabled,\n    errorId: ids.errorId,\n    fieldId: ids.fieldId,\n    helperId: ids.helperId,\n    labelInsetId: ids.labelInsetId,\n    labelOutsideId: ids.labelOutsideId,\n  };\n\n  const field = defineField<T>({\n    ...fieldOptions,\n    disabled: fieldOptions.disabled ?? base.disabled,\n  });\n\n  return {\n    base,\n    triggerValidation: (on) => controlState.triggerValidation(field, on),\n  };\n};\n\nexport const createAssistiveState = (options: AssistiveOptions) => {\n  return computed<AssistiveState>(() => {\n    const value = options.value?.value ?? '';\n    const errorText = options.error?.value ?? '';\n    const helperText = options.helper?.value ?? '';\n    const maxLength = options.maxLength?.value;\n    const parsedMaxLength = Number(maxLength);\n    const validMaxLength = Number.isFinite(parsedMaxLength) && parsedMaxLength > 0 ? parsedMaxLength : null;\n    const hasCounter = validMaxLength !== null;\n    const counterText = hasCounter ? `${value.length} / ${validMaxLength}` : '';\n    const ratio = hasCounter ? value.length / validMaxLength : 0;\n\n    return {\n      counterAtLimit: hasCounter ? ratio >= 1 : false,\n      counterNearLimit: hasCounter ? ratio >= 0.9 && ratio < 1 : false,\n      counterText,\n      errorText,\n      hasCounter,\n      helperText,\n    };\n  });\n};\n\n/** @internal */\nexport const mountTextFieldLifecycle = (options: TextFieldLifecycleOptions): (() => void) => {\n  const { element, onBlur, onChange, onInput, triggerValidation } = options;\n  const disposers: Array<() => void> = [];\n\n  if (onInput) {\n    disposers.push(\n      listen(element, 'input', (event: Event) => {\n        // Prevent the native composed event from bubbling out of the shadow DOM\n        // and being re-targeted onto the host element. The component emits its\n        // own structured CustomEvent so external listeners never need the raw one.\n        event.stopPropagation();\n        onInput(event, element.value);\n      }),\n    );\n  }\n\n  disposers.push(\n    listen(element, 'change', (event: Event) => {\n      // Same reason as above — suppress the native change event from escaping.\n      event.stopPropagation();\n      onChange?.(event, element.value);\n      triggerValidation?.('change');\n    }),\n  );\n\n  disposers.push(\n    listen(element, 'blur', (event: Event) => {\n      onBlur?.(event as FocusEvent);\n      triggerValidation?.('blur');\n    }),\n  );\n\n  return () => {\n    for (const dispose of disposers) dispose();\n  };\n};\n"],"mappings":"qKAwHA,IAAM,GAAkB,EAAgB,IAAyB,CAE/D,IAAM,EAAU,GAAG,EAAO,GADH,GAAQ,EAAK,KAAK,EAAI,EAAK,KAAK,EAAI,EAAA,SAAS,EAAE,QAAQ,QAAS,EAAE,IAEnF,EAAe,SAAS,IAE9B,MAAO,CACL,QAAS,SAAS,IAClB,UACA,SAAU,UAAU,IACpB,eACA,eAAgB,GAAG,EAAa,SAClC,CACF,EAEa,GACX,EAKA,IAMG,CACH,IAAM,EAAe,EAAA,mBAAmB,CAAO,EACzC,EAAM,EAAe,EAAQ,OAAQ,EAAQ,MAAM,KAAK,EAExD,EAA0D,CAC9D,SAAU,EAAa,SACvB,QAAS,EAAI,QACb,QAAS,EAAI,QACb,SAAU,EAAI,SACd,aAAc,EAAI,aAClB,eAAgB,EAAI,cACtB,EAEM,EAAQ,EAAA,YAAe,CAC3B,GAAG,EACH,SAAU,EAAa,UAAY,EAAK,QAC1C,CAAC,EAED,MAAO,CACL,OACA,kBAAoB,GAAO,EAAa,kBAAkB,EAAO,CAAE,CACrE,CACF,EAEa,EAAwB,IACnC,EAAA,EAAA,cAAsC,CACpC,IAAM,EAAQ,EAAQ,OAAO,OAAS,GAChC,EAAY,EAAQ,OAAO,OAAS,GACpC,EAAa,EAAQ,QAAQ,OAAS,GACtC,EAAY,EAAQ,WAAW,MAC/B,EAAkB,OAAO,CAAS,EAClC,EAAiB,OAAO,SAAS,CAAe,GAAK,EAAkB,EAAI,EAAkB,KAC7F,EAAa,IAAmB,KAChC,EAAc,EAAa,GAAG,EAAM,OAAO,KAAK,IAAmB,GACnE,EAAQ,EAAa,EAAM,OAAS,EAAiB,EAE3D,MAAO,CACL,eAAgB,EAAa,GAAS,EAAI,GAC1C,iBAAkB,EAAa,GAAS,IAAO,EAAQ,EAAI,GAC3D,cACA,YACA,aACA,YACF,CACF,CAAC,EAIU,EAA2B,GAAqD,CAC3F,GAAM,CAAE,UAAS,SAAQ,WAAU,UAAS,qBAAsB,EAC5D,EAA+B,CAAC,EA8BtC,OA5BI,GACF,EAAU,KACR,EAAA,OAAO,EAAS,QAAU,GAAiB,CAIzC,EAAM,gBAAgB,EACtB,EAAQ,EAAO,EAAQ,KAAK,CAC9B,CAAC,CACH,EAGF,EAAU,KACR,EAAA,OAAO,EAAS,SAAW,GAAiB,CAE1C,EAAM,gBAAgB,EACtB,IAAW,EAAO,EAAQ,KAAK,EAC/B,IAAoB,QAAQ,CAC9B,CAAC,CACH,EAEA,EAAU,KACR,EAAA,OAAO,EAAS,OAAS,GAAiB,CACxC,IAAS,CAAmB,EAC5B,IAAoB,MAAM,CAC5B,CAAC,CACH,MAEa,CACX,IAAK,IAAM,KAAW,EAAW,EAAQ,CAC3C,CACF"}

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

@@ -0,0 +1,111 @@
+import { type ReadonlySignal, type Signal } from '@vielzeug/stateit';
+import { type FormFieldOptions } from '../form';
+import { type ControlContextOptions, type ControlValidationMode, type FormControlValidationTrigger } from './internal/control-state';
+export type { FormControlValidationTrigger } from './internal/control-state';
+export type { ValidationReporter } from './internal/control-state';
+export type TextFieldControlContext = ControlContextOptions;
+export type FieldBaseOptions = {
+    context?: TextFieldControlContext;
+    disabled?: ReadonlySignal<boolean | undefined>;
+    error?: ReadonlySignal<string | undefined>;
+    helper?: ReadonlySignal<string | undefined>;
+    name?: ReadonlySignal<string | undefined>;
+    prefix: string;
+    validateOn?: ReadonlySignal<ControlValidationMode>;
+};
+export type TextFieldOptions = FieldBaseOptions & {
+    elementRef?: {
+        value: HTMLInputElement | HTMLTextAreaElement | null;
+    };
+    maxLength?: ReadonlySignal<number | undefined>;
+    onBlur?: (event: FocusEvent) => void;
+    onChange?: (event: Event, value: string) => void;
+    onInput?: (event: Event, value: string) => void;
+    onInputExtra?: (event: Event) => void;
+    value: ReadonlySignal<string | undefined>;
+};
+export type ChoiceFieldOptions = FieldBaseOptions & {
+    multiple?: ReadonlySignal<boolean | undefined>;
+    value: ReadonlySignal<string | undefined>;
+};
+export type CheckableStateOptions = FieldBaseOptions & {
+    checked: ReadonlySignal<boolean | undefined>;
+    clearIndeterminateFirst?: boolean;
+    group?: {
+        toggle: (value: string, originalEvent?: Event) => void;
+    };
+    indeterminate?: ReadonlySignal<boolean | undefined>;
+    onToggle?: (payload: CheckableChangePayload) => void;
+    value: ReadonlySignal<string | undefined>;
+};
+export type CheckableChangePayload = {
+    checked: boolean;
+    originalEvent?: Event;
+    value: string;
+};
+export type FieldControlBaseHandle = {
+    disabled: ReadonlySignal<boolean>;
+    errorId: string;
+    fieldId: string;
+    helperId: string;
+    labelInsetId: string;
+    labelOutsideId: string;
+    triggerValidation: (on: FormControlValidationTrigger) => void;
+};
+export type TextFieldHandle = FieldControlBaseHandle & {
+    assistive: ReadonlySignal<AssistiveState>;
+    clear: (event?: Event) => void;
+    value: Signal<string>;
+};
+export type AssistiveState = {
+    counterAtLimit: boolean;
+    counterNearLimit: boolean;
+    counterText: string;
+    errorText: string;
+    hasCounter: boolean;
+    helperText: string;
+};
+export type AssistiveOptions = {
+    error?: ReadonlySignal<string | undefined>;
+    helper?: ReadonlySignal<string | undefined>;
+    maxLength?: ReadonlySignal<number | undefined>;
+    value?: ReadonlySignal<string | undefined>;
+};
+export type TextFieldLifecycleOptions = {
+    element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+    onBlur?: (event: FocusEvent) => void;
+    onChange?: (event: Event, value: string) => void;
+    onInput?: (event: Event, value: string) => void;
+    triggerValidation?: (on: FormControlValidationTrigger) => void;
+};
+export type CheckableStateHandle = FieldControlBaseHandle & {
+    assistive: ReadonlySignal<AssistiveState>;
+    checked: Signal<boolean>;
+    indeterminate: Signal<boolean>;
+    toggle: (event: Event) => void;
+    value: Signal<string>;
+};
+export type ChoiceFieldHandle = FieldControlBaseHandle & {
+    assistive: ReadonlySignal<AssistiveState>;
+    clear: () => void;
+    formValue: ReadonlySignal<string>;
+    removeValue: (value: string) => void;
+    selectedValues: ReadonlySignal<string[]>;
+    selectValue: (value: string) => void;
+    setValues: (values: string[]) => void;
+    toggleValue: (value: string) => void;
+};
+export declare const createFieldControlBase: <T = unknown>(options: {
+    context?: TextFieldControlContext;
+    name?: ReadonlySignal<string | undefined>;
+    prefix: string;
+} & ControlContextOptions, fieldOptions: Omit<FormFieldOptions<T>, "disabled"> & {
+    disabled?: FormFieldOptions<T>["disabled"];
+}) => {
+    base: Omit<FieldControlBaseHandle, "triggerValidation">;
+    triggerValidation: (on: FormControlValidationTrigger) => void;
+};
+export declare const createAssistiveState: (options: AssistiveOptions) => import("@vielzeug/stateit").ComputedSignal<AssistiveState>;
+/** @internal */
+export declare const mountTextFieldLifecycle: (options: TextFieldLifecycleOptions) => (() => void);
+//# sourceMappingURL=field-control.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field-control.d.ts","sourceRoot":"","sources":["../../src/controls/field-control.ts"],"names":[],"mappings":"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"}

package/dist/controls/field-control.js

@@ -0,0 +1,2 @@
+import{listen as e}from"../runtime.js";import{createId as t}from"../internal.js";import{defineField as n}from"../form.js";import{createControlState as r}from"./internal/control-state.js";import{computed as i}from"@vielzeug/stateit";var a=(e,n)=>{let r=`${e}-${n&&n.trim()?n.trim():t().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(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({...t,disabled:t.disabled??s.disabled});return{base:s,triggerValidation:e=>i.triggerValidation(c,e)}},s=e=>i(()=>{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(n,`input`,e=>{e.stopPropagation(),a(e,n.value)})),s.push(e(n,`change`,e=>{e.stopPropagation(),i?.(e,n.value),o?.(`change`)})),s.push(e(n,`blur`,e=>{r?.(e),o?.(`blur`)})),()=>{for(let e of s)e()}};export{s as createAssistiveState,o as createFieldControlBase,c as mountTextFieldLifecycle};
+//# sourceMappingURL=field-control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field-control.js","names":[],"sources":["../../src/controls/field-control.ts"],"sourcesContent":["import { computed, type ReadonlySignal, type Signal } from '@vielzeug/stateit';\n\nimport { defineField, type FormFieldOptions } from '../form';\nimport { createId } from '../internal';\nimport { listen } from '../runtime';\nimport {\n  createControlState,\n  type ControlContextOptions,\n  type ControlValidationMode,\n  type FormControlValidationTrigger,\n} from './internal/control-state';\n\nexport type { FormControlValidationTrigger } from './internal/control-state';\nexport type { ValidationReporter } from './internal/control-state';\n\nexport type TextFieldControlContext = ControlContextOptions;\n\nexport type FieldBaseOptions = {\n  context?: TextFieldControlContext;\n  disabled?: ReadonlySignal<boolean | undefined>;\n  error?: ReadonlySignal<string | undefined>;\n  helper?: ReadonlySignal<string | undefined>;\n  name?: ReadonlySignal<string | undefined>;\n  prefix: string;\n  validateOn?: ReadonlySignal<ControlValidationMode>;\n};\n\nexport type TextFieldOptions = FieldBaseOptions & {\n  elementRef?: { value: HTMLInputElement | HTMLTextAreaElement | null };\n  maxLength?: ReadonlySignal<number | undefined>;\n  onBlur?: (event: FocusEvent) => void;\n  onChange?: (event: Event, value: string) => void;\n  onInput?: (event: Event, value: string) => void;\n  onInputExtra?: (event: Event) => void;\n  value: ReadonlySignal<string | undefined>;\n};\n\nexport type ChoiceFieldOptions = FieldBaseOptions & {\n  multiple?: ReadonlySignal<boolean | undefined>;\n  value: ReadonlySignal<string | undefined>;\n};\n\nexport type CheckableStateOptions = FieldBaseOptions & {\n  checked: ReadonlySignal<boolean | undefined>;\n  clearIndeterminateFirst?: boolean;\n  group?: { toggle: (value: string, originalEvent?: Event) => void };\n  indeterminate?: ReadonlySignal<boolean | undefined>;\n  onToggle?: (payload: CheckableChangePayload) => void;\n  value: ReadonlySignal<string | undefined>;\n};\n\nexport type CheckableChangePayload = {\n  checked: boolean;\n  originalEvent?: Event;\n  value: string;\n};\n\nexport type FieldControlBaseHandle = {\n  disabled: ReadonlySignal<boolean>;\n  errorId: string;\n  fieldId: string;\n  helperId: string;\n  labelInsetId: string;\n  labelOutsideId: string;\n  triggerValidation: (on: FormControlValidationTrigger) => void;\n};\n\nexport type TextFieldHandle = FieldControlBaseHandle & {\n  assistive: ReadonlySignal<AssistiveState>;\n  clear: (event?: Event) => void;\n  value: Signal<string>;\n};\n\nexport type AssistiveState = {\n  counterAtLimit: boolean;\n  counterNearLimit: boolean;\n  counterText: string;\n  errorText: string;\n  hasCounter: boolean;\n  helperText: string;\n};\n\nexport type AssistiveOptions = {\n  error?: ReadonlySignal<string | undefined>;\n  helper?: ReadonlySignal<string | undefined>;\n  maxLength?: ReadonlySignal<number | undefined>;\n  value?: ReadonlySignal<string | undefined>;\n};\n\nexport type TextFieldLifecycleOptions = {\n  element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\n  onBlur?: (event: FocusEvent) => void;\n  onChange?: (event: Event, value: string) => void;\n  onInput?: (event: Event, value: string) => void;\n  triggerValidation?: (on: FormControlValidationTrigger) => void;\n};\n\nexport type CheckableStateHandle = FieldControlBaseHandle & {\n  assistive: ReadonlySignal<AssistiveState>;\n  checked: Signal<boolean>;\n  indeterminate: Signal<boolean>;\n  toggle: (event: Event) => void;\n  value: Signal<string>;\n};\n\nexport type ChoiceFieldHandle = FieldControlBaseHandle & {\n  assistive: ReadonlySignal<AssistiveState>;\n  clear: () => void;\n  formValue: ReadonlySignal<string>;\n  removeValue: (value: string) => void;\n  selectedValues: ReadonlySignal<string[]>;\n  selectValue: (value: string) => void;\n  setValues: (values: string[]) => void;\n  toggleValue: (value: string) => void;\n};\n\n/**\n * Generates a stable set of ARIA-related IDs for a field control.\n * Snapshot `name` at call time — IDs are stable strings, not reactive.\n */\nconst createFieldIds = (prefix: string, name?: string | null) => {\n  const normalizedName = name && name.trim() ? name.trim() : createId().replace(/^cft-/, '');\n  const fieldId = `${prefix}-${normalizedName}`;\n  const labelInsetId = `label-${fieldId}`;\n\n  return {\n    errorId: `error-${fieldId}`,\n    fieldId,\n    helperId: `helper-${fieldId}`,\n    labelInsetId,\n    labelOutsideId: `${labelInsetId}-outside`,\n  };\n};\n\nexport const createFieldControlBase = <T = unknown>(\n  options: {\n    context?: TextFieldControlContext;\n    name?: ReadonlySignal<string | undefined>;\n    prefix: string;\n  } & ControlContextOptions,\n  fieldOptions: Omit<FormFieldOptions<T>, 'disabled'> & {\n    disabled?: FormFieldOptions<T>['disabled'];\n  },\n): {\n  base: Omit<FieldControlBaseHandle, 'triggerValidation'>;\n  triggerValidation: (on: FormControlValidationTrigger) => void;\n} => {\n  const controlState = createControlState(options);\n  const ids = createFieldIds(options.prefix, options.name?.value);\n\n  const base: Omit<FieldControlBaseHandle, 'triggerValidation'> = {\n    disabled: controlState.disabled,\n    errorId: ids.errorId,\n    fieldId: ids.fieldId,\n    helperId: ids.helperId,\n    labelInsetId: ids.labelInsetId,\n    labelOutsideId: ids.labelOutsideId,\n  };\n\n  const field = defineField<T>({\n    ...fieldOptions,\n    disabled: fieldOptions.disabled ?? base.disabled,\n  });\n\n  return {\n    base,\n    triggerValidation: (on) => controlState.triggerValidation(field, on),\n  };\n};\n\nexport const createAssistiveState = (options: AssistiveOptions) => {\n  return computed<AssistiveState>(() => {\n    const value = options.value?.value ?? '';\n    const errorText = options.error?.value ?? '';\n    const helperText = options.helper?.value ?? '';\n    const maxLength = options.maxLength?.value;\n    const parsedMaxLength = Number(maxLength);\n    const validMaxLength = Number.isFinite(parsedMaxLength) && parsedMaxLength > 0 ? parsedMaxLength : null;\n    const hasCounter = validMaxLength !== null;\n    const counterText = hasCounter ? `${value.length} / ${validMaxLength}` : '';\n    const ratio = hasCounter ? value.length / validMaxLength : 0;\n\n    return {\n      counterAtLimit: hasCounter ? ratio >= 1 : false,\n      counterNearLimit: hasCounter ? ratio >= 0.9 && ratio < 1 : false,\n      counterText,\n      errorText,\n      hasCounter,\n      helperText,\n    };\n  });\n};\n\n/** @internal */\nexport const mountTextFieldLifecycle = (options: TextFieldLifecycleOptions): (() => void) => {\n  const { element, onBlur, onChange, onInput, triggerValidation } = options;\n  const disposers: Array<() => void> = [];\n\n  if (onInput) {\n    disposers.push(\n      listen(element, 'input', (event: Event) => {\n        // Prevent the native composed event from bubbling out of the shadow DOM\n        // and being re-targeted onto the host element. The component emits its\n        // own structured CustomEvent so external listeners never need the raw one.\n        event.stopPropagation();\n        onInput(event, element.value);\n      }),\n    );\n  }\n\n  disposers.push(\n    listen(element, 'change', (event: Event) => {\n      // Same reason as above — suppress the native change event from escaping.\n      event.stopPropagation();\n      onChange?.(event, element.value);\n      triggerValidation?.('change');\n    }),\n  );\n\n  disposers.push(\n    listen(element, 'blur', (event: Event) => {\n      onBlur?.(event as FocusEvent);\n      triggerValidation?.('blur');\n    }),\n  );\n\n  return () => {\n    for (const dispose of disposers) dispose();\n  };\n};\n"],"mappings":"wOAwHA,IAAM,GAAkB,EAAgB,IAAyB,CAE/D,IAAM,EAAU,GAAG,EAAO,GADH,GAAQ,EAAK,KAAK,EAAI,EAAK,KAAK,EAAI,EAAS,EAAE,QAAQ,QAAS,EAAE,IAEnF,EAAe,SAAS,IAE9B,MAAO,CACL,QAAS,SAAS,IAClB,UACA,SAAU,UAAU,IACpB,eACA,eAAgB,GAAG,EAAa,SAClC,CACF,EAEa,GACX,EAKA,IAMG,CACH,IAAM,EAAe,EAAmB,CAAO,EACzC,EAAM,EAAe,EAAQ,OAAQ,EAAQ,MAAM,KAAK,EAExD,EAA0D,CAC9D,SAAU,EAAa,SACvB,QAAS,EAAI,QACb,QAAS,EAAI,QACb,SAAU,EAAI,SACd,aAAc,EAAI,aAClB,eAAgB,EAAI,cACtB,EAEM,EAAQ,EAAe,CAC3B,GAAG,EACH,SAAU,EAAa,UAAY,EAAK,QAC1C,CAAC,EAED,MAAO,CACL,OACA,kBAAoB,GAAO,EAAa,kBAAkB,EAAO,CAAE,CACrE,CACF,EAEa,EAAwB,GAC5B,MAA+B,CACpC,IAAM,EAAQ,EAAQ,OAAO,OAAS,GAChC,EAAY,EAAQ,OAAO,OAAS,GACpC,EAAa,EAAQ,QAAQ,OAAS,GACtC,EAAY,EAAQ,WAAW,MAC/B,EAAkB,OAAO,CAAS,EAClC,EAAiB,OAAO,SAAS,CAAe,GAAK,EAAkB,EAAI,EAAkB,KAC7F,EAAa,IAAmB,KAChC,EAAc,EAAa,GAAG,EAAM,OAAO,KAAK,IAAmB,GACnE,EAAQ,EAAa,EAAM,OAAS,EAAiB,EAE3D,MAAO,CACL,eAAgB,EAAa,GAAS,EAAI,GAC1C,iBAAkB,EAAa,GAAS,IAAO,EAAQ,EAAI,GAC3D,cACA,YACA,aACA,YACF,CACF,CAAC,EAIU,EAA2B,GAAqD,CAC3F,GAAM,CAAE,UAAS,SAAQ,WAAU,UAAS,qBAAsB,EAC5D,EAA+B,CAAC,EA8BtC,OA5BI,GACF,EAAU,KACR,EAAO,EAAS,QAAU,GAAiB,CAIzC,EAAM,gBAAgB,EACtB,EAAQ,EAAO,EAAQ,KAAK,CAC9B,CAAC,CACH,EAGF,EAAU,KACR,EAAO,EAAS,SAAW,GAAiB,CAE1C,EAAM,gBAAgB,EACtB,IAAW,EAAO,EAAQ,KAAK,EAC/B,IAAoB,QAAQ,CAC9B,CAAC,CACH,EAEA,EAAU,KACR,EAAO,EAAS,OAAS,GAAiB,CACxC,IAAS,CAAmB,EAC5B,IAAoB,MAAM,CAC5B,CAAC,CACH,MAEa,CACX,IAAK,IAAM,KAAW,EAAW,EAAQ,CAC3C,CACF"}

package/dist/controls/index.d.ts

@@ -0,0 +1,12 @@
+export { createCheckableFieldControl } from './checkable-control';
+export { type CheckableChangePayload } from './field-control';
+export { createTextField } from './text-field-control';
+export { createChoiceField } from './choice-field-control';
+export { createListControl } from './list-control';
+export { createPressControl } from './press-control';
+export { createOverlayControl, type OverlayCloseReason, type OverlayOpenReason, type OverlayCloseDetail, type OverlayOpenDetail, } from './overlay-control';
+export { createSpinnerControl } from './spinner-control';
+export { createSliderControl } from './slider-control';
+export { createSwipeControl, type SwipeAxis, type SwipeControl, type SwipeControlDetail } from './swipe-control';
+export { createPopupListControl } from './popup-list-control';
+//# sourceMappingURL=index.d.ts.map

package/dist/controls/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/controls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,qBAAqB,CAAC;AAElE,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EACL,oBAAoB,EACpB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,GACvB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACjH,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/controls/internal/control-state.cjs

@@ -0,0 +1,2 @@
+let e=require(`@vielzeug/stateit`);var t=t=>{let n=(0,e.computed)(()=>!!t.disabled?.value||!!t.context?.disabled?.value),r=t.validateOn??t.context?.validateOn;return{disabled:n,triggerValidation:(e,t)=>{r?.value===t&&e.reportValidity()},validateOn:r}};exports.createControlState=t;
+//# sourceMappingURL=control-state.cjs.map