@vielzeug/craftit 2.0.1 → 3.0.1

package/dist/directives/bind.cjs

@@ -1,2 +0,0 @@
-require(`../core/internal.cjs`);const e=require(`./attr.cjs`);require(`@vielzeug/stateit`);function t(t){return{mount(n,r){let i=n;(i.type===`checkbox`||i.type===`radio`?e.attr({checked:t}):e.attr({value:t})).mount(n,r)}}}exports.bind=t;
-//# sourceMappingURL=bind.cjs.map

package/dist/directives/bind.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"bind.cjs","names":[],"sources":["../../src/directives/bind.ts"],"sourcesContent":["import { type Signal } from '@vielzeug/stateit';\n\nimport { type Directive } from '../core/internal';\nimport { attr } from './attr';\n\n/**\n * Creates a two-way binding between a writable Signal and a form element.\n *\n * - **`Signal<string>`** (`<input>`, `<textarea>`): syncs `.value` via the `input` event.\n * - **`Signal<string>`** (`<select>`): syncs `.value` via the `change` event.\n * - **`Signal<boolean>`** (checkbox/radio): auto-detected from the element's `type` attribute;\n *   syncs `.checked` via the `change` event.\n *\n * Internally this reuses craftit's shared property-binding path, so `.value`,\n * `.checked`, `attr(...)`, and `spread({ '.value': ... })` stay in sync.\n *\n * Use in spread position on any form element.\n *\n * @example\n * import { bind } from '@vielzeug/craftit/directives';\n *\n * const name = signal('');\n * html`<input ${bind(name)} />`\n *\n * const accepted = signal(false);\n * html`<input type=\"checkbox\" ${bind(accepted)} />`\n *\n * const size = signal('');\n * html`<select ${bind(size)}><option value=\"sm\">S</option></select>`\n */\nexport function bind(sig: Signal<boolean>): Directive;\nexport function bind(sig: Signal<string>): Directive;\nexport function bind(sig: Signal<boolean> | Signal<string>): Directive {\n  return {\n    mount(el, context) {\n      const input = el as HTMLInputElement;\n      const isToggle = input.type === 'checkbox' || input.type === 'radio';\n\n      (isToggle ? attr({ checked: sig as Signal<boolean> }) : attr({ value: sig as Signal<string> })).mount!(\n        el,\n        context,\n      );\n    },\n  };\n}\n"],"mappings":"2FAgCA,SAAgB,EAAK,EAAkD,CACrE,MAAO,CACL,MAAM,EAAI,EAAS,CACjB,IAAM,EAAQ,GACG,EAAM,OAAS,YAAc,EAAM,OAAS,QAEjD,EAAA,KAAK,CAAE,QAAS,EAAwB,CAAC,CAAG,EAAA,KAAK,CAAE,MAAO,EAAuB,CAAC,EAAE,MAC9F,EACA,EACD,EAEJ"}

package/dist/directives/bind.d.ts

@@ -1,30 +0,0 @@
-import { type Signal } from '@vielzeug/stateit';
-import { type Directive } from '../core/internal';
-/**
- * Creates a two-way binding between a writable Signal and a form element.
- *
- * - **`Signal<string>`** (`<input>`, `<textarea>`): syncs `.value` via the `input` event.
- * - **`Signal<string>`** (`<select>`): syncs `.value` via the `change` event.
- * - **`Signal<boolean>`** (checkbox/radio): auto-detected from the element's `type` attribute;
- *   syncs `.checked` via the `change` event.
- *
- * Internally this reuses craftit's shared property-binding path, so `.value`,
- * `.checked`, `attr(...)`, and `spread({ '.value': ... })` stay in sync.
- *
- * Use in spread position on any form element.
- *
- * @example
- * import { bind } from '@vielzeug/craftit/directives';
- *
- * const name = signal('');
- * html`<input ${bind(name)} />`
- *
- * const accepted = signal(false);
- * html`<input type="checkbox" ${bind(accepted)} />`
- *
- * const size = signal('');
- * html`<select ${bind(size)}><option value="sm">S</option></select>`
- */
-export declare function bind(sig: Signal<boolean>): Directive;
-export declare function bind(sig: Signal<string>): Directive;
-//# sourceMappingURL=bind.d.ts.map

package/dist/directives/bind.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"bind.d.ts","sourceRoot":"","sources":["../../src/directives/bind.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGlD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,IAAI,CAAC,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;AACtD,wBAAgB,IAAI,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC"}

package/dist/directives/bind.js

@@ -1,2 +0,0 @@
-import"../core/internal.js";import{attr as e}from"./attr.js";import"@vielzeug/stateit";function t(t){return{mount(n,r){let i=n;(i.type===`checkbox`||i.type===`radio`?e({checked:t}):e({value:t})).mount(n,r)}}}export{t as bind};
-//# sourceMappingURL=bind.js.map

package/dist/directives/bind.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"bind.js","names":[],"sources":["../../src/directives/bind.ts"],"sourcesContent":["import { type Signal } from '@vielzeug/stateit';\n\nimport { type Directive } from '../core/internal';\nimport { attr } from './attr';\n\n/**\n * Creates a two-way binding between a writable Signal and a form element.\n *\n * - **`Signal<string>`** (`<input>`, `<textarea>`): syncs `.value` via the `input` event.\n * - **`Signal<string>`** (`<select>`): syncs `.value` via the `change` event.\n * - **`Signal<boolean>`** (checkbox/radio): auto-detected from the element's `type` attribute;\n *   syncs `.checked` via the `change` event.\n *\n * Internally this reuses craftit's shared property-binding path, so `.value`,\n * `.checked`, `attr(...)`, and `spread({ '.value': ... })` stay in sync.\n *\n * Use in spread position on any form element.\n *\n * @example\n * import { bind } from '@vielzeug/craftit/directives';\n *\n * const name = signal('');\n * html`<input ${bind(name)} />`\n *\n * const accepted = signal(false);\n * html`<input type=\"checkbox\" ${bind(accepted)} />`\n *\n * const size = signal('');\n * html`<select ${bind(size)}><option value=\"sm\">S</option></select>`\n */\nexport function bind(sig: Signal<boolean>): Directive;\nexport function bind(sig: Signal<string>): Directive;\nexport function bind(sig: Signal<boolean> | Signal<string>): Directive {\n  return {\n    mount(el, context) {\n      const input = el as HTMLInputElement;\n      const isToggle = input.type === 'checkbox' || input.type === 'radio';\n\n      (isToggle ? attr({ checked: sig as Signal<boolean> }) : attr({ value: sig as Signal<string> })).mount!(\n        el,\n        context,\n      );\n    },\n  };\n}\n"],"mappings":"uFAgCA,SAAgB,EAAK,EAAkD,CACrE,MAAO,CACL,MAAM,EAAI,EAAS,CACjB,IAAM,EAAQ,GACG,EAAM,OAAS,YAAc,EAAM,OAAS,QAEjD,EAAK,CAAE,QAAS,EAAwB,CAAC,CAAG,EAAK,CAAE,MAAO,EAAuB,CAAC,EAAE,MAC9F,EACA,EACD,EAEJ"}

package/dist/directives/choose.cjs

@@ -1,2 +0,0 @@
-let e=require(`@vielzeug/stateit`);function t(t,n,r){let i=e=>{let t=n.find(([t])=>t===e);return t?t[1]():r?.()??``};return(0,e.isSignal)(t)?()=>i(t.value):typeof t==`function`?()=>i(t()):i(t)}exports.choose=t;
-//# sourceMappingURL=choose.cjs.map

package/dist/directives/choose.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"choose.cjs","names":[],"sources":["../../src/directives/choose.ts"],"sourcesContent":["import { isSignal, type ReadonlySignal } from '@vielzeug/stateit';\n\nimport type { HTMLResult } from '../core/internal';\n\ntype TemplateFn = () => string | HTMLResult;\ntype CaseEntry<T> = readonly [T, TemplateFn];\n\n/**\n * Renders the template matching the current value — like a type-safe `switch`.\n * Cases are `[value, templateFn]` pairs evaluated with strict equality (`===`).\n *\n * The discriminant can be a static value, a reactive Signal, or a getter function.\n * When reactive, the rendered output updates automatically when the value changes.\n *\n * @example\n * import { choose } from '@vielzeug/craftit/directives';\n *\n * // Static\n * html`${choose(section, [\n *   ['home',  () => html`<h1>Home</h1>`],\n *   ['about', () => html`<h1>About</h1>`],\n * ], () => html`<h1>Not found</h1>`)}`\n *\n * // Reactive signal — updates on change\n * const tab = signal('home');\n * html`${choose(tab, [\n *   ['home',  () => html`<home-panel>`],\n *   ['about', () => html`<about-panel>`],\n * ])}`\n *\n * // Reactive getter\n * html`${choose(() => props.view.value, cases)}`\n */\nexport function choose<T extends PropertyKey>(\n  value: ReadonlySignal<T> | (() => T),\n  cases: ReadonlyArray<CaseEntry<T>>,\n  defaultFn?: TemplateFn,\n): TemplateFn;\nexport function choose<T extends PropertyKey>(\n  value: T,\n  cases: ReadonlyArray<CaseEntry<T>>,\n  defaultFn?: TemplateFn,\n): string | HTMLResult;\nexport function choose<T extends PropertyKey>(\n  value: T | ReadonlySignal<T> | (() => T),\n  cases: ReadonlyArray<CaseEntry<T>>,\n  defaultFn?: TemplateFn,\n): string | HTMLResult | TemplateFn {\n  const pick = (v: T): string | HTMLResult => {\n    const entry = cases.find(([key]) => key === v);\n\n    return entry ? entry[1]() : (defaultFn?.() ?? '');\n  };\n\n  if (isSignal(value)) {\n    return () => pick((value as ReadonlySignal<T>).value);\n  }\n\n  if (typeof value === 'function') {\n    return () => pick((value as () => T)());\n  }\n\n  return pick(value as T);\n}\n"],"mappings":"mCA2CA,SAAgB,EACd,EACA,EACA,EACkC,CAClC,IAAM,EAAQ,GAA8B,CAC1C,IAAM,EAAQ,EAAM,MAAM,CAAC,KAAS,IAAQ,EAAE,CAE9C,OAAO,EAAQ,EAAM,IAAI,CAAI,KAAa,EAAI,IAWhD,OARA,EAAA,EAAA,UAAa,EAAM,KACJ,EAAM,EAA4B,MAAM,CAGnD,OAAO,GAAU,eACN,EAAM,GAAmB,CAAC,CAGlC,EAAK,EAAW"}

package/dist/directives/choose.d.ts

@@ -1,34 +0,0 @@
-import { type ReadonlySignal } from '@vielzeug/stateit';
-import type { HTMLResult } from '../core/internal';
-type TemplateFn = () => string | HTMLResult;
-type CaseEntry<T> = readonly [T, TemplateFn];
-/**
- * Renders the template matching the current value — like a type-safe `switch`.
- * Cases are `[value, templateFn]` pairs evaluated with strict equality (`===`).
- *
- * The discriminant can be a static value, a reactive Signal, or a getter function.
- * When reactive, the rendered output updates automatically when the value changes.
- *
- * @example
- * import { choose } from '@vielzeug/craftit/directives';
- *
- * // Static
- * html`${choose(section, [
- *   ['home',  () => html`<h1>Home</h1>`],
- *   ['about', () => html`<h1>About</h1>`],
- * ], () => html`<h1>Not found</h1>`)}`
- *
- * // Reactive signal — updates on change
- * const tab = signal('home');
- * html`${choose(tab, [
- *   ['home',  () => html`<home-panel>`],
- *   ['about', () => html`<about-panel>`],
- * ])}`
- *
- * // Reactive getter
- * html`${choose(() => props.view.value, cases)}`
- */
-export declare function choose<T extends PropertyKey>(value: ReadonlySignal<T> | (() => T), cases: ReadonlyArray<CaseEntry<T>>, defaultFn?: TemplateFn): TemplateFn;
-export declare function choose<T extends PropertyKey>(value: T, cases: ReadonlyArray<CaseEntry<T>>, defaultFn?: TemplateFn): string | HTMLResult;
-export {};
-//# sourceMappingURL=choose.d.ts.map

package/dist/directives/choose.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"choose.d.ts","sourceRoot":"","sources":["../../src/directives/choose.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAElE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,KAAK,UAAU,GAAG,MAAM,MAAM,GAAG,UAAU,CAAC;AAC5C,KAAK,SAAS,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,EAC1C,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EACpC,KAAK,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAClC,SAAS,CAAC,EAAE,UAAU,GACrB,UAAU,CAAC;AACd,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,EAC1C,KAAK,EAAE,CAAC,EACR,KAAK,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAClC,SAAS,CAAC,EAAE,UAAU,GACrB,MAAM,GAAG,UAAU,CAAC"}

package/dist/directives/choose.js

@@ -1,2 +0,0 @@
-import{isSignal as e}from"@vielzeug/stateit";function t(t,n,r){let i=e=>{let t=n.find(([t])=>t===e);return t?t[1]():r?.()??``};return e(t)?()=>i(t.value):typeof t==`function`?()=>i(t()):i(t)}export{t as choose};
-//# sourceMappingURL=choose.js.map

package/dist/directives/choose.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"choose.js","names":[],"sources":["../../src/directives/choose.ts"],"sourcesContent":["import { isSignal, type ReadonlySignal } from '@vielzeug/stateit';\n\nimport type { HTMLResult } from '../core/internal';\n\ntype TemplateFn = () => string | HTMLResult;\ntype CaseEntry<T> = readonly [T, TemplateFn];\n\n/**\n * Renders the template matching the current value — like a type-safe `switch`.\n * Cases are `[value, templateFn]` pairs evaluated with strict equality (`===`).\n *\n * The discriminant can be a static value, a reactive Signal, or a getter function.\n * When reactive, the rendered output updates automatically when the value changes.\n *\n * @example\n * import { choose } from '@vielzeug/craftit/directives';\n *\n * // Static\n * html`${choose(section, [\n *   ['home',  () => html`<h1>Home</h1>`],\n *   ['about', () => html`<h1>About</h1>`],\n * ], () => html`<h1>Not found</h1>`)}`\n *\n * // Reactive signal — updates on change\n * const tab = signal('home');\n * html`${choose(tab, [\n *   ['home',  () => html`<home-panel>`],\n *   ['about', () => html`<about-panel>`],\n * ])}`\n *\n * // Reactive getter\n * html`${choose(() => props.view.value, cases)}`\n */\nexport function choose<T extends PropertyKey>(\n  value: ReadonlySignal<T> | (() => T),\n  cases: ReadonlyArray<CaseEntry<T>>,\n  defaultFn?: TemplateFn,\n): TemplateFn;\nexport function choose<T extends PropertyKey>(\n  value: T,\n  cases: ReadonlyArray<CaseEntry<T>>,\n  defaultFn?: TemplateFn,\n): string | HTMLResult;\nexport function choose<T extends PropertyKey>(\n  value: T | ReadonlySignal<T> | (() => T),\n  cases: ReadonlyArray<CaseEntry<T>>,\n  defaultFn?: TemplateFn,\n): string | HTMLResult | TemplateFn {\n  const pick = (v: T): string | HTMLResult => {\n    const entry = cases.find(([key]) => key === v);\n\n    return entry ? entry[1]() : (defaultFn?.() ?? '');\n  };\n\n  if (isSignal(value)) {\n    return () => pick((value as ReadonlySignal<T>).value);\n  }\n\n  if (typeof value === 'function') {\n    return () => pick((value as () => T)());\n  }\n\n  return pick(value as T);\n}\n"],"mappings":"6CA2CA,SAAgB,EACd,EACA,EACA,EACkC,CAClC,IAAM,EAAQ,GAA8B,CAC1C,IAAM,EAAQ,EAAM,MAAM,CAAC,KAAS,IAAQ,EAAE,CAE9C,OAAO,EAAQ,EAAM,IAAI,CAAI,KAAa,EAAI,IAWhD,OARI,EAAS,EAAM,KACJ,EAAM,EAA4B,MAAM,CAGnD,OAAO,GAAU,eACN,EAAM,GAAmB,CAAC,CAGlC,EAAK,EAAW"}

package/dist/directives/classes.cjs

@@ -1,2 +0,0 @@
-let e=require(`@vielzeug/stateit`);function t(t){let n=Object.entries(t),r=n.some(([,t])=>(0,e.isSignal)(t)||typeof t==`function`),i=()=>n.filter(([,t])=>(0,e.isSignal)(t)?t.value:typeof t==`function`?!!t():!!t).map(([e])=>e).join(` `);return r?(0,e.computed)(i):i()}exports.classes=t;
-//# sourceMappingURL=classes.cjs.map

package/dist/directives/classes.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"classes.cjs","names":[],"sources":["../../src/directives/classes.ts"],"sourcesContent":["import { computed, isSignal, type ReadonlySignal, type Signal } from '@vielzeug/stateit';\n\ntype ClassValue = boolean | undefined | null | Signal<boolean> | ReadonlySignal<boolean> | (() => boolean);\n\n/**\n * Build a dynamic class string from an object map of class names to conditions.\n * Conditions can be static booleans, reactive Signals, or getter functions.\n * When any condition is reactive the returned value is a `ReadonlySignal<string>`\n * so it can be bound directly to a `class` attribute.\n *\n * @example\n * import { classes } from '@vielzeug/craftit/directives';\n *\n * // Static — returns a plain string\n * html`<div class=${classes({ foo: true, bar: false })}></div>`\n *\n * // Reactive — returns a signal; no arrow-function wrapper needed\n * html`<div class=${classes({ active: isActive, disabled: isDisabled })}></div>`\n */\nexport function classes(map: Record<string, ClassValue>): string | ReadonlySignal<string> {\n  const entries = Object.entries(map);\n  const hasReactive = entries.some(([, v]) => isSignal(v) || typeof v === 'function');\n\n  const build = (): string =>\n    entries\n      .filter(([, v]) => {\n        if (isSignal(v)) return (v as ReadonlySignal<boolean>).value;\n\n        if (typeof v === 'function') return !!(v as () => boolean)();\n\n        return !!v;\n      })\n      .map(([k]) => k)\n      .join(' ');\n\n  return hasReactive ? computed(build) : build();\n}\n"],"mappings":"mCAmBA,SAAgB,EAAQ,EAAkE,CACxF,IAAM,EAAU,OAAO,QAAQ,EAAI,CAC7B,EAAc,EAAQ,MAAM,EAAG,MAAA,EAAA,EAAA,UAAgB,EAAE,EAAI,OAAO,GAAM,WAAW,CAE7E,MACJ,EACG,QAAQ,EAAG,MACV,EAAA,EAAA,UAAa,EAAE,CAAU,EAA8B,MAEnD,OAAO,GAAM,WAAmB,CAAC,CAAE,GAAqB,CAErD,CAAC,CAAC,EACT,CACD,KAAK,CAAC,KAAO,EAAE,CACf,KAAK,IAAI,CAEd,OAAO,GAAA,EAAA,EAAA,UAAuB,EAAM,CAAG,GAAO"}

package/dist/directives/classes.d.ts

@@ -1,20 +0,0 @@
-import { type ReadonlySignal, type Signal } from '@vielzeug/stateit';
-type ClassValue = boolean | undefined | null | Signal<boolean> | ReadonlySignal<boolean> | (() => boolean);
-/**
- * Build a dynamic class string from an object map of class names to conditions.
- * Conditions can be static booleans, reactive Signals, or getter functions.
- * When any condition is reactive the returned value is a `ReadonlySignal<string>`
- * so it can be bound directly to a `class` attribute.
- *
- * @example
- * import { classes } from '@vielzeug/craftit/directives';
- *
- * // Static — returns a plain string
- * html`<div class=${classes({ foo: true, bar: false })}></div>`
- *
- * // Reactive — returns a signal; no arrow-function wrapper needed
- * html`<div class=${classes({ active: isActive, disabled: isDisabled })}></div>`
- */
-export declare function classes(map: Record<string, ClassValue>): string | ReadonlySignal<string>;
-export {};
-//# sourceMappingURL=classes.d.ts.map

package/dist/directives/classes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"classes.d.ts","sourceRoot":"","sources":["../../src/directives/classes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,KAAK,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEzF,KAAK,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,cAAc,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;AAE3G;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,GAAG,MAAM,GAAG,cAAc,CAAC,MAAM,CAAC,CAiBxF"}

package/dist/directives/classes.js

@@ -1,2 +0,0 @@
-import{computed as e,isSignal as t}from"@vielzeug/stateit";function n(n){let r=Object.entries(n),i=r.some(([,e])=>t(e)||typeof e==`function`),a=()=>r.filter(([,e])=>t(e)?e.value:typeof e==`function`?!!e():!!e).map(([e])=>e).join(` `);return i?e(a):a()}export{n as classes};
-//# sourceMappingURL=classes.js.map

package/dist/directives/classes.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"classes.js","names":[],"sources":["../../src/directives/classes.ts"],"sourcesContent":["import { computed, isSignal, type ReadonlySignal, type Signal } from '@vielzeug/stateit';\n\ntype ClassValue = boolean | undefined | null | Signal<boolean> | ReadonlySignal<boolean> | (() => boolean);\n\n/**\n * Build a dynamic class string from an object map of class names to conditions.\n * Conditions can be static booleans, reactive Signals, or getter functions.\n * When any condition is reactive the returned value is a `ReadonlySignal<string>`\n * so it can be bound directly to a `class` attribute.\n *\n * @example\n * import { classes } from '@vielzeug/craftit/directives';\n *\n * // Static — returns a plain string\n * html`<div class=${classes({ foo: true, bar: false })}></div>`\n *\n * // Reactive — returns a signal; no arrow-function wrapper needed\n * html`<div class=${classes({ active: isActive, disabled: isDisabled })}></div>`\n */\nexport function classes(map: Record<string, ClassValue>): string | ReadonlySignal<string> {\n  const entries = Object.entries(map);\n  const hasReactive = entries.some(([, v]) => isSignal(v) || typeof v === 'function');\n\n  const build = (): string =>\n    entries\n      .filter(([, v]) => {\n        if (isSignal(v)) return (v as ReadonlySignal<boolean>).value;\n\n        if (typeof v === 'function') return !!(v as () => boolean)();\n\n        return !!v;\n      })\n      .map(([k]) => k)\n      .join(' ');\n\n  return hasReactive ? computed(build) : build();\n}\n"],"mappings":"2DAmBA,SAAgB,EAAQ,EAAkE,CACxF,IAAM,EAAU,OAAO,QAAQ,EAAI,CAC7B,EAAc,EAAQ,MAAM,EAAG,KAAO,EAAS,EAAE,EAAI,OAAO,GAAM,WAAW,CAE7E,MACJ,EACG,QAAQ,EAAG,KACN,EAAS,EAAE,CAAU,EAA8B,MAEnD,OAAO,GAAM,WAAmB,CAAC,CAAE,GAAqB,CAErD,CAAC,CAAC,EACT,CACD,KAAK,CAAC,KAAO,EAAE,CACf,KAAK,IAAI,CAEd,OAAO,EAAc,EAAS,EAAM,CAAG,GAAO"}

package/dist/directives/index.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./spread.cjs`),t=require(`./attr.cjs`),n=require(`./bind.cjs`),r=require(`./choose.cjs`),i=require(`./classes.cjs`),a=require(`./each.cjs`),o=require(`./match.cjs`),s=require(`./memo.cjs`),c=require(`./on.cjs`),l=require(`./raw.cjs`),u=require(`./style.cjs`),d=require(`./until.cjs`),f=require(`./when.cjs`);exports.attr=t.attr,exports.bind=n.bind,exports.choose=r.choose,exports.classes=i.classes,exports.each=a.each,exports.match=o.match,exports.memo=s.memo,exports.on=c.on,exports.raw=l.raw,exports.spread=e.spread,exports.style=u.style,exports.until=d.until,exports.when=f.when;

package/dist/directives/index.d.ts

@@ -1,14 +0,0 @@
-export { attr } from './attr';
-export { bind } from './bind';
-export { choose } from './choose';
-export { classes } from './classes';
-export { each } from './each';
-export { match } from './match';
-export { memo } from './memo';
-export { on } from './on';
-export { raw } from './raw';
-export { spread } from './spread';
-export { style } from './style';
-export { until } from './until';
-export { when } from './when';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/directives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/directives/index.js

@@ -1 +0,0 @@
-import{spread as e}from"./spread.js";import{attr as t}from"./attr.js";import{bind as n}from"./bind.js";import{choose as r}from"./choose.js";import{classes as i}from"./classes.js";import{each as a}from"./each.js";import{match as o}from"./match.js";import{memo as s}from"./memo.js";import{on as c}from"./on.js";import{raw as l}from"./raw.js";import{style as u}from"./style.js";import{until as d}from"./until.js";import{when as f}from"./when.js";export{t as attr,n as bind,r as choose,i as classes,a as each,o as match,s as memo,c as on,l as raw,e as spread,u as style,d as until,f as when};

package/dist/directives/match.cjs

@@ -1,2 +0,0 @@
-let e=require(`@vielzeug/stateit`);function t(...t){let n=t[t.length-1],r=typeof n==`function`&&!Array.isArray(n),i=r?t.slice(0,-1):t,a=r?n:void 0,o=t=>(0,e.isSignal)(t)?!!t.value:typeof t==`function`?!!t():!!t,s=()=>{for(let[e,t]of i)if(o(e))return t();return a?.()??``};return i.some(([t])=>(0,e.isSignal)(t)||typeof t==`function`)?s:s()}exports.match=t;
-//# sourceMappingURL=match.cjs.map

package/dist/directives/match.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"match.cjs","names":[],"sources":["../../src/directives/match.ts"],"sourcesContent":["import { isSignal, type ReadonlySignal } from '@vielzeug/stateit';\n\nimport type { HTMLResult } from '../core/internal';\n\ntype TemplateFn = () => string | HTMLResult;\ntype Branch = readonly [unknown, TemplateFn];\n\n/**\n * Multi-branch conditional rendering. Pass branches as individual `[condition, templateFn]`\n * tuples (variadic), with an optional trailing `fallback` function.\n * Renders the first truthy branch, or the fallback when no branch matches.\n *\n * Reactive when any condition is a Signal or getter function — the output updates\n * automatically whenever a reactive condition changes.\n *\n * @example\n * import { match } from '@vielzeug/craftit/directives';\n *\n * // Static — evaluated once\n * html`${match(\n *   [isAdmin,     () => html`<admin-panel>`],\n *   [isModerator, () => html`<mod-panel>`],\n *   () => html`<user-panel>`,\n * )}`\n *\n * // Reactive Signal conditions\n * html`${match(\n *   [isAdmin,    () => html`<admin-panel>`],\n *   [isLoggedIn, () => html`<user-panel>`],\n *   () => html`<guest-panel>`,\n * )}`\n */\nexport function match(...args: (Branch | TemplateFn)[]): TemplateFn | string | HTMLResult {\n  // Separate branches from optional trailing fallback function.\n  // A Branch is a tuple [condition, fn] (an array); a TemplateFn is a bare () => ... function.\n  const lastArg = args[args.length - 1];\n  const hasFallback = typeof lastArg === 'function' && !Array.isArray(lastArg);\n  const branches = (hasFallback ? args.slice(0, -1) : args) as Branch[];\n  const fallback = hasFallback ? (lastArg as TemplateFn) : undefined;\n\n  const resolve = (cond: unknown): boolean => {\n    if (isSignal(cond)) return !!(cond as ReadonlySignal<unknown>).value;\n\n    if (typeof cond === 'function') return !!(cond as () => unknown)();\n\n    return !!cond;\n  };\n\n  const evaluate = (): string | HTMLResult => {\n    for (const [cond, fn] of branches) {\n      if (resolve(cond)) return fn();\n    }\n\n    return fallback?.() ?? '';\n  };\n\n  const reactive = branches.some(([cond]) => isSignal(cond) || typeof cond === 'function');\n\n  return reactive ? evaluate : evaluate();\n}\n"],"mappings":"mCAgCA,SAAgB,EAAM,GAAG,EAAiE,CAGxF,IAAM,EAAU,EAAK,EAAK,OAAS,GAC7B,EAAc,OAAO,GAAY,YAAc,CAAC,MAAM,QAAQ,EAAQ,CACtE,EAAY,EAAc,EAAK,MAAM,EAAG,GAAG,CAAG,EAC9C,EAAW,EAAe,EAAyB,IAAA,GAEnD,EAAW,IACf,EAAA,EAAA,UAAa,EAAK,CAAS,CAAC,CAAE,EAAiC,MAE3D,OAAO,GAAS,WAAmB,CAAC,CAAE,GAAwB,CAE3D,CAAC,CAAC,EAGL,MAAsC,CAC1C,IAAK,GAAM,CAAC,EAAM,KAAO,EACvB,GAAI,EAAQ,EAAK,CAAE,OAAO,GAAI,CAGhC,OAAO,KAAY,EAAI,IAKzB,OAFiB,EAAS,MAAM,CAAC,MAAA,EAAA,EAAA,UAAmB,EAAK,EAAI,OAAO,GAAS,WAAW,CAEtE,EAAW,GAAU"}

package/dist/directives/match.d.ts

@@ -1,31 +0,0 @@
-import type { HTMLResult } from '../core/internal';
-type TemplateFn = () => string | HTMLResult;
-type Branch = readonly [unknown, TemplateFn];
-/**
- * Multi-branch conditional rendering. Pass branches as individual `[condition, templateFn]`
- * tuples (variadic), with an optional trailing `fallback` function.
- * Renders the first truthy branch, or the fallback when no branch matches.
- *
- * Reactive when any condition is a Signal or getter function — the output updates
- * automatically whenever a reactive condition changes.
- *
- * @example
- * import { match } from '@vielzeug/craftit/directives';
- *
- * // Static — evaluated once
- * html`${match(
- *   [isAdmin,     () => html`<admin-panel>`],
- *   [isModerator, () => html`<mod-panel>`],
- *   () => html`<user-panel>`,
- * )}`
- *
- * // Reactive Signal conditions
- * html`${match(
- *   [isAdmin,    () => html`<admin-panel>`],
- *   [isLoggedIn, () => html`<user-panel>`],
- *   () => html`<guest-panel>`,
- * )}`
- */
-export declare function match(...args: (Branch | TemplateFn)[]): TemplateFn | string | HTMLResult;
-export {};
-//# sourceMappingURL=match.d.ts.map

package/dist/directives/match.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"match.d.ts","sourceRoot":"","sources":["../../src/directives/match.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,KAAK,UAAU,GAAG,MAAM,MAAM,GAAG,UAAU,CAAC;AAC5C,KAAK,MAAM,GAAG,SAAS,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC,MAAM,GAAG,UAAU,CAAC,EAAE,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,CA2BxF"}

package/dist/directives/match.js

@@ -1,2 +0,0 @@
-import{isSignal as e}from"@vielzeug/stateit";function t(...t){let n=t[t.length-1],r=typeof n==`function`&&!Array.isArray(n),i=r?t.slice(0,-1):t,a=r?n:void 0,o=t=>e(t)?!!t.value:typeof t==`function`?!!t():!!t,s=()=>{for(let[e,t]of i)if(o(e))return t();return a?.()??``};return i.some(([t])=>e(t)||typeof t==`function`)?s:s()}export{t as match};
-//# sourceMappingURL=match.js.map

package/dist/directives/match.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"match.js","names":[],"sources":["../../src/directives/match.ts"],"sourcesContent":["import { isSignal, type ReadonlySignal } from '@vielzeug/stateit';\n\nimport type { HTMLResult } from '../core/internal';\n\ntype TemplateFn = () => string | HTMLResult;\ntype Branch = readonly [unknown, TemplateFn];\n\n/**\n * Multi-branch conditional rendering. Pass branches as individual `[condition, templateFn]`\n * tuples (variadic), with an optional trailing `fallback` function.\n * Renders the first truthy branch, or the fallback when no branch matches.\n *\n * Reactive when any condition is a Signal or getter function — the output updates\n * automatically whenever a reactive condition changes.\n *\n * @example\n * import { match } from '@vielzeug/craftit/directives';\n *\n * // Static — evaluated once\n * html`${match(\n *   [isAdmin,     () => html`<admin-panel>`],\n *   [isModerator, () => html`<mod-panel>`],\n *   () => html`<user-panel>`,\n * )}`\n *\n * // Reactive Signal conditions\n * html`${match(\n *   [isAdmin,    () => html`<admin-panel>`],\n *   [isLoggedIn, () => html`<user-panel>`],\n *   () => html`<guest-panel>`,\n * )}`\n */\nexport function match(...args: (Branch | TemplateFn)[]): TemplateFn | string | HTMLResult {\n  // Separate branches from optional trailing fallback function.\n  // A Branch is a tuple [condition, fn] (an array); a TemplateFn is a bare () => ... function.\n  const lastArg = args[args.length - 1];\n  const hasFallback = typeof lastArg === 'function' && !Array.isArray(lastArg);\n  const branches = (hasFallback ? args.slice(0, -1) : args) as Branch[];\n  const fallback = hasFallback ? (lastArg as TemplateFn) : undefined;\n\n  const resolve = (cond: unknown): boolean => {\n    if (isSignal(cond)) return !!(cond as ReadonlySignal<unknown>).value;\n\n    if (typeof cond === 'function') return !!(cond as () => unknown)();\n\n    return !!cond;\n  };\n\n  const evaluate = (): string | HTMLResult => {\n    for (const [cond, fn] of branches) {\n      if (resolve(cond)) return fn();\n    }\n\n    return fallback?.() ?? '';\n  };\n\n  const reactive = branches.some(([cond]) => isSignal(cond) || typeof cond === 'function');\n\n  return reactive ? evaluate : evaluate();\n}\n"],"mappings":"6CAgCA,SAAgB,EAAM,GAAG,EAAiE,CAGxF,IAAM,EAAU,EAAK,EAAK,OAAS,GAC7B,EAAc,OAAO,GAAY,YAAc,CAAC,MAAM,QAAQ,EAAQ,CACtE,EAAY,EAAc,EAAK,MAAM,EAAG,GAAG,CAAG,EAC9C,EAAW,EAAe,EAAyB,IAAA,GAEnD,EAAW,GACX,EAAS,EAAK,CAAS,CAAC,CAAE,EAAiC,MAE3D,OAAO,GAAS,WAAmB,CAAC,CAAE,GAAwB,CAE3D,CAAC,CAAC,EAGL,MAAsC,CAC1C,IAAK,GAAM,CAAC,EAAM,KAAO,EACvB,GAAI,EAAQ,EAAK,CAAE,OAAO,GAAI,CAGhC,OAAO,KAAY,EAAI,IAKzB,OAFiB,EAAS,MAAM,CAAC,KAAU,EAAS,EAAK,EAAI,OAAO,GAAS,WAAW,CAEtE,EAAW,GAAU"}

package/dist/directives/memo.cjs

@@ -1,2 +0,0 @@
-let e=require(`@vielzeug/stateit`);function t(t,n){let r=``,i=[],a=!1;return()=>{let o=t.map(t=>(0,e.isSignal)(t)?t.value:t);return(!a||o.length!==i.length||o.some((e,t)=>!Object.is(e,i[t])))&&(r=n(),i=o,a=!0),r}}exports.memo=t;
-//# sourceMappingURL=memo.cjs.map

package/dist/directives/memo.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"memo.cjs","names":[],"sources":["../../src/directives/memo.ts"],"sourcesContent":["import { isSignal, type ReadonlySignal } from '@vielzeug/stateit';\n\nimport type { HTMLResult } from '../core/internal';\n\ntype Dep = unknown | ReadonlySignal<unknown>;\n\n/**\n * Memoizes a template fragment — `templateFn` is only re-called when at least\n * one entry in `deps` has changed (compared with `Object.is`).\n *\n * Signal values in `deps` are automatically unwrapped and tracked, so changing a\n * dep signal triggers a re-evaluation. This is useful for skipping expensive\n * sub-tree renders when only unrelated state changes.\n *\n * @example\n * import { memo } from '@vielzeug/craftit/directives';\n *\n * // Only re-renders the table when `rows` actually changes\n * html`${memo([rows], () => html`<big-table :data=${rows}></big-table>`)}`\n *\n * // Multiple deps — re-renders when either changes\n * html`${memo([locale, theme], () => html`<themed-chart :locale=${locale}></themed-chart>`)}`\n */\nexport function memo(deps: ReadonlyArray<Dep>, templateFn: () => string | HTMLResult): () => string | HTMLResult {\n  let cached: string | HTMLResult = '';\n  let lastDeps: unknown[] = [];\n  let initialized = false;\n\n  return (): string | HTMLResult => {\n    const current = deps.map((d) => (isSignal(d) ? (d as ReadonlySignal<unknown>).value : d));\n    const changed =\n      !initialized || current.length !== lastDeps.length || current.some((v, i) => !Object.is(v, lastDeps[i]));\n\n    if (changed) {\n      cached = templateFn();\n      lastDeps = current;\n      initialized = true;\n    }\n\n    return cached;\n  };\n}\n"],"mappings":"mCAuBA,SAAgB,EAAK,EAA0B,EAAkE,CAC/G,IAAI,EAA8B,GAC9B,EAAsB,EAAE,CACxB,EAAc,GAElB,UAAkC,CAChC,IAAM,EAAU,EAAK,IAAK,IAAA,EAAA,EAAA,UAAgB,EAAE,CAAI,EAA8B,MAAQ,EAAG,CAUzF,OARE,CAAC,GAAe,EAAQ,SAAW,EAAS,QAAU,EAAQ,MAAM,EAAG,IAAM,CAAC,OAAO,GAAG,EAAG,EAAS,GAAG,CAAC,IAGxG,EAAS,GAAY,CACrB,EAAW,EACX,EAAc,IAGT"}

package/dist/directives/memo.d.ts

@@ -1,23 +0,0 @@
-import { type ReadonlySignal } from '@vielzeug/stateit';
-import type { HTMLResult } from '../core/internal';
-type Dep = unknown | ReadonlySignal<unknown>;
-/**
- * Memoizes a template fragment — `templateFn` is only re-called when at least
- * one entry in `deps` has changed (compared with `Object.is`).
- *
- * Signal values in `deps` are automatically unwrapped and tracked, so changing a
- * dep signal triggers a re-evaluation. This is useful for skipping expensive
- * sub-tree renders when only unrelated state changes.
- *
- * @example
- * import { memo } from '@vielzeug/craftit/directives';
- *
- * // Only re-renders the table when `rows` actually changes
- * html`${memo([rows], () => html`<big-table :data=${rows}></big-table>`)}`
- *
- * // Multiple deps — re-renders when either changes
- * html`${memo([locale, theme], () => html`<themed-chart :locale=${locale}></themed-chart>`)}`
- */
-export declare function memo(deps: ReadonlyArray<Dep>, templateFn: () => string | HTMLResult): () => string | HTMLResult;
-export {};
-//# sourceMappingURL=memo.d.ts.map

package/dist/directives/memo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"memo.d.ts","sourceRoot":"","sources":["../../src/directives/memo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAElE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,KAAK,GAAG,GAAG,OAAO,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;AAE7C;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,IAAI,CAAC,IAAI,EAAE,aAAa,CAAC,GAAG,CAAC,EAAE,UAAU,EAAE,MAAM,MAAM,GAAG,UAAU,GAAG,MAAM,MAAM,GAAG,UAAU,CAkB/G"}

package/dist/directives/memo.js

@@ -1,2 +0,0 @@
-import{isSignal as e}from"@vielzeug/stateit";function t(t,n){let r=``,i=[],a=!1;return()=>{let o=t.map(t=>e(t)?t.value:t);return(!a||o.length!==i.length||o.some((e,t)=>!Object.is(e,i[t])))&&(r=n(),i=o,a=!0),r}}export{t as memo};
-//# sourceMappingURL=memo.js.map

package/dist/directives/memo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"memo.js","names":[],"sources":["../../src/directives/memo.ts"],"sourcesContent":["import { isSignal, type ReadonlySignal } from '@vielzeug/stateit';\n\nimport type { HTMLResult } from '../core/internal';\n\ntype Dep = unknown | ReadonlySignal<unknown>;\n\n/**\n * Memoizes a template fragment — `templateFn` is only re-called when at least\n * one entry in `deps` has changed (compared with `Object.is`).\n *\n * Signal values in `deps` are automatically unwrapped and tracked, so changing a\n * dep signal triggers a re-evaluation. This is useful for skipping expensive\n * sub-tree renders when only unrelated state changes.\n *\n * @example\n * import { memo } from '@vielzeug/craftit/directives';\n *\n * // Only re-renders the table when `rows` actually changes\n * html`${memo([rows], () => html`<big-table :data=${rows}></big-table>`)}`\n *\n * // Multiple deps — re-renders when either changes\n * html`${memo([locale, theme], () => html`<themed-chart :locale=${locale}></themed-chart>`)}`\n */\nexport function memo(deps: ReadonlyArray<Dep>, templateFn: () => string | HTMLResult): () => string | HTMLResult {\n  let cached: string | HTMLResult = '';\n  let lastDeps: unknown[] = [];\n  let initialized = false;\n\n  return (): string | HTMLResult => {\n    const current = deps.map((d) => (isSignal(d) ? (d as ReadonlySignal<unknown>).value : d));\n    const changed =\n      !initialized || current.length !== lastDeps.length || current.some((v, i) => !Object.is(v, lastDeps[i]));\n\n    if (changed) {\n      cached = templateFn();\n      lastDeps = current;\n      initialized = true;\n    }\n\n    return cached;\n  };\n}\n"],"mappings":"6CAuBA,SAAgB,EAAK,EAA0B,EAAkE,CAC/G,IAAI,EAA8B,GAC9B,EAAsB,EAAE,CACxB,EAAc,GAElB,UAAkC,CAChC,IAAM,EAAU,EAAK,IAAK,GAAO,EAAS,EAAE,CAAI,EAA8B,MAAQ,EAAG,CAUzF,OARE,CAAC,GAAe,EAAQ,SAAW,EAAS,QAAU,EAAQ,MAAM,EAAG,IAAM,CAAC,OAAO,GAAG,EAAG,EAAS,GAAG,CAAC,IAGxG,EAAS,GAAY,CACrB,EAAW,EACX,EAAc,IAGT"}

package/dist/directives/on.cjs

@@ -1,2 +0,0 @@
-const e=require(`../core/utilities.cjs`);function t(t,n,r){return{mount(i,{registerCleanup:a}){if(t===`clickOutside`){let t=i.ownerDocument??document;a(e.listen(t,`click`,e=>{e.composedPath().includes(i)||n(e)},r))}else a(e.listen(i,t,n,r))}}}exports.on=t;
-//# sourceMappingURL=on.cjs.map

package/dist/directives/on.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"on.cjs","names":[],"sources":["../../src/directives/on.ts"],"sourcesContent":["import type { Directive } from '../core/internal';\n\nimport { listen } from '../core/utilities';\n\n/**\n * Attaches an event listener to an element as a spread directive, supporting\n * full `AddEventListenerOptions` (e.g. `passive`, `once`, `capture`).\n *\n * **Synthetic event: `'clickOutside'`**\n * When the event name is `'clickOutside'`, the listener is attached to `document`\n * and fires whenever a click occurs *outside* the host element — useful for\n * closing dropdowns, modals, and popovers.\n *\n * @example\n * import { on } from '@vielzeug/craftit/directives';\n *\n * // Passive wheel listener (not possible with @wheel= template syntax)\n * html`<div ${on('wheel', onScroll, { passive: true })}></div>`\n *\n * // Typed handler — `e` inferred as `MouseEvent`\n * html`<button ${on('click', (e) => e.clientX)}></button>`\n *\n * // Click-outside (closes a dropdown when the user clicks away)\n * html`<div ${on('clickOutside', () => open.value = false)}></div>`\n */\nexport function on(\n  event: 'clickOutside',\n  handler: (e: MouseEvent) => void,\n  options?: AddEventListenerOptions,\n): Directive;\nexport function on<K extends keyof HTMLElementEventMap>(\n  event: K,\n  handler: (e: HTMLElementEventMap[K]) => void,\n  options?: AddEventListenerOptions,\n): Directive;\nexport function on(event: string, handler: (e: any) => void, options?: AddEventListenerOptions): Directive {\n  return {\n    mount(el, { registerCleanup }) {\n      if (event === 'clickOutside') {\n        const doc = el.ownerDocument ?? document;\n        const docHandler = (e: Event) => {\n          if (!e.composedPath().includes(el)) handler(e as MouseEvent);\n        };\n\n        registerCleanup(listen(doc, 'click', docHandler, options));\n      } else {\n        registerCleanup(listen(el, event, handler, options));\n      }\n    },\n  };\n}\n"],"mappings":"yCAmCA,SAAgB,EAAG,EAAe,EAA2B,EAA8C,CACzG,MAAO,CACL,MAAM,EAAI,CAAE,mBAAmB,CAC7B,GAAI,IAAU,eAAgB,CAC5B,IAAM,EAAM,EAAG,eAAiB,SAKhC,EAAgB,EAAA,OAAO,EAAK,QAJR,GAAa,CAC1B,EAAE,cAAc,CAAC,SAAS,EAAG,EAAE,EAAQ,EAAgB,EAGb,EAAQ,CAAC,MAE1D,EAAgB,EAAA,OAAO,EAAI,EAAO,EAAS,EAAQ,CAAC,EAGzD"}

package/dist/directives/on.d.ts

@@ -1,25 +0,0 @@
-import type { Directive } from '../core/internal';
-/**
- * Attaches an event listener to an element as a spread directive, supporting
- * full `AddEventListenerOptions` (e.g. `passive`, `once`, `capture`).
- *
- * **Synthetic event: `'clickOutside'`**
- * When the event name is `'clickOutside'`, the listener is attached to `document`
- * and fires whenever a click occurs *outside* the host element — useful for
- * closing dropdowns, modals, and popovers.
- *
- * @example
- * import { on } from '@vielzeug/craftit/directives';
- *
- * // Passive wheel listener (not possible with @wheel= template syntax)
- * html`<div ${on('wheel', onScroll, { passive: true })}></div>`
- *
- * // Typed handler — `e` inferred as `MouseEvent`
- * html`<button ${on('click', (e) => e.clientX)}></button>`
- *
- * // Click-outside (closes a dropdown when the user clicks away)
- * html`<div ${on('clickOutside', () => open.value = false)}></div>`
- */
-export declare function on(event: 'clickOutside', handler: (e: MouseEvent) => void, options?: AddEventListenerOptions): Directive;
-export declare function on<K extends keyof HTMLElementEventMap>(event: K, handler: (e: HTMLElementEventMap[K]) => void, options?: AddEventListenerOptions): Directive;
-//# sourceMappingURL=on.d.ts.map

package/dist/directives/on.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"on.d.ts","sourceRoot":"","sources":["../../src/directives/on.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,EAAE,CAChB,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,EAChC,OAAO,CAAC,EAAE,uBAAuB,GAChC,SAAS,CAAC;AACb,wBAAgB,EAAE,CAAC,CAAC,SAAS,MAAM,mBAAmB,EACpD,KAAK,EAAE,CAAC,EACR,OAAO,EAAE,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC5C,OAAO,CAAC,EAAE,uBAAuB,GAChC,SAAS,CAAC"}

package/dist/directives/on.js

@@ -1,2 +0,0 @@
-import{listen as e}from"../core/utilities.js";function t(t,n,r){return{mount(i,{registerCleanup:a}){a(t===`clickOutside`?e(i.ownerDocument??document,`click`,e=>{e.composedPath().includes(i)||n(e)},r):e(i,t,n,r))}}}export{t as on};
-//# sourceMappingURL=on.js.map

package/dist/directives/on.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"on.js","names":[],"sources":["../../src/directives/on.ts"],"sourcesContent":["import type { Directive } from '../core/internal';\n\nimport { listen } from '../core/utilities';\n\n/**\n * Attaches an event listener to an element as a spread directive, supporting\n * full `AddEventListenerOptions` (e.g. `passive`, `once`, `capture`).\n *\n * **Synthetic event: `'clickOutside'`**\n * When the event name is `'clickOutside'`, the listener is attached to `document`\n * and fires whenever a click occurs *outside* the host element — useful for\n * closing dropdowns, modals, and popovers.\n *\n * @example\n * import { on } from '@vielzeug/craftit/directives';\n *\n * // Passive wheel listener (not possible with @wheel= template syntax)\n * html`<div ${on('wheel', onScroll, { passive: true })}></div>`\n *\n * // Typed handler — `e` inferred as `MouseEvent`\n * html`<button ${on('click', (e) => e.clientX)}></button>`\n *\n * // Click-outside (closes a dropdown when the user clicks away)\n * html`<div ${on('clickOutside', () => open.value = false)}></div>`\n */\nexport function on(\n  event: 'clickOutside',\n  handler: (e: MouseEvent) => void,\n  options?: AddEventListenerOptions,\n): Directive;\nexport function on<K extends keyof HTMLElementEventMap>(\n  event: K,\n  handler: (e: HTMLElementEventMap[K]) => void,\n  options?: AddEventListenerOptions,\n): Directive;\nexport function on(event: string, handler: (e: any) => void, options?: AddEventListenerOptions): Directive {\n  return {\n    mount(el, { registerCleanup }) {\n      if (event === 'clickOutside') {\n        const doc = el.ownerDocument ?? document;\n        const docHandler = (e: Event) => {\n          if (!e.composedPath().includes(el)) handler(e as MouseEvent);\n        };\n\n        registerCleanup(listen(doc, 'click', docHandler, options));\n      } else {\n        registerCleanup(listen(el, event, handler, options));\n      }\n    },\n  };\n}\n"],"mappings":"8CAmCA,SAAgB,EAAG,EAAe,EAA2B,EAA8C,CACzG,MAAO,CACL,MAAM,EAAI,CAAE,mBAAmB,CAO3B,EANE,IAAU,eAMI,EALJ,EAAG,eAAiB,SAKJ,QAJR,GAAa,CAC1B,EAAE,cAAc,CAAC,SAAS,EAAG,EAAE,EAAQ,EAAgB,EAGb,EAAQ,CAEzC,EAAO,EAAI,EAAO,EAAS,EAAQ,CAAC,EAGzD"}

package/dist/directives/spread.cjs

@@ -1,2 +0,0 @@
-require(`../core/internal.cjs`);const e=require(`../core/utilities.cjs`),t=require(`../core/runtime-bindings.cjs`);let n=require(`@vielzeug/stateit`);var r=(e,t,r)=>e?(r((0,n.effect)(()=>{t(e.value)})),!0):!1,i=(t,n,r,i)=>n.startsWith(`@`)?(typeof r==`function`&&i(e.listen(t,n.slice(1),r)),!0):!1,a=(e,n,i,a)=>{if(!n.startsWith(`.`))return!1;let o=n.slice(1),s=t.hasWritableValueSetter(i)?i:void 0;return r(t.toReactiveBindingSource(i),t=>e[o]=t,a)||(e[o]=i),t.bindPropertyModel(e,o,s,a),!0},o=(e,n,i,a)=>{if(!n.startsWith(`?`))return!1;let o=n.slice(1);return r(t.toReactiveBindingSource(i),t=>e.toggleAttribute(o,!!t),a)||e.toggleAttribute(o,!!i),!0},s=(n,i,a,o)=>{r(t.toReactiveBindingSource(a),t=>e.setAttr(n,i,t),o)||e.setAttr(n,i,a)},c=(e,t,n,r)=>{n!==void 0&&(i(e,t,n,r)||a(e,t,n,r)||o(e,t,n,r)||s(e,t,n,r))};function l(e){return{mount(t,{registerCleanup:n}){for(let[r,i]of Object.entries(e))c(t,r,i,n)}}}exports.spread=l;
-//# sourceMappingURL=spread.cjs.map

package/dist/directives/spread.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"spread.cjs","names":[],"sources":["../../src/directives/spread.ts"],"sourcesContent":["import { effect, type ReadonlySignal } from '@vielzeug/stateit';\n\nimport { type Directive } from '../core/internal';\nimport { bindPropertyModel, hasWritableValueSetter, toReactiveBindingSource } from '../core/runtime-bindings';\nimport { listen, setAttr } from '../core/utilities';\n\nexport type SpreadValue =\n  | string\n  | number\n  | boolean\n  | null\n  | undefined\n  | ReadonlySignal<string | number | boolean | null | undefined>\n  | (() => string | number | boolean | null | undefined)\n  | ((event: Event) => void);\n\ntype RegisterCleanup = (fn: () => void) => void;\n\nconst applyReactiveValue = (\n  source: ReadonlySignal<unknown> | undefined,\n  apply: (value: unknown) => void,\n  registerCleanup: RegisterCleanup,\n): boolean => {\n  if (!source) return false;\n\n  registerCleanup(\n    effect(() => {\n      apply(source.value);\n    }),\n  );\n\n  return true;\n};\n\nconst applyEventEntry = (\n  el: HTMLElement,\n  rawKey: string,\n  rawValue: SpreadValue,\n  registerCleanup: RegisterCleanup,\n): boolean => {\n  if (!rawKey.startsWith('@')) return false;\n\n  if (typeof rawValue === 'function') {\n    registerCleanup(listen(el, rawKey.slice(1), rawValue as (event: Event) => void));\n  }\n\n  return true;\n};\n\nconst applyPropertyEntry = (\n  el: HTMLElement,\n  rawKey: string,\n  rawValue: SpreadValue,\n  registerCleanup: RegisterCleanup,\n): boolean => {\n  if (!rawKey.startsWith('.')) return false;\n\n  const key = rawKey.slice(1);\n  const writableModel = hasWritableValueSetter(rawValue) ? rawValue : undefined;\n  const source = toReactiveBindingSource(rawValue);\n\n  if (!applyReactiveValue(source, (value) => ((el as any)[key] = value), registerCleanup)) {\n    (el as any)[key] = rawValue;\n  }\n\n  bindPropertyModel(el, key, writableModel, registerCleanup);\n\n  return true;\n};\n\nconst applyBooleanAttributeEntry = (\n  el: HTMLElement,\n  rawKey: string,\n  rawValue: SpreadValue,\n  registerCleanup: RegisterCleanup,\n): boolean => {\n  if (!rawKey.startsWith('?')) return false;\n\n  const key = rawKey.slice(1);\n  const source = toReactiveBindingSource(rawValue);\n\n  if (!applyReactiveValue(source, (value) => el.toggleAttribute(key, Boolean(value)), registerCleanup)) {\n    el.toggleAttribute(key, Boolean(rawValue));\n  }\n\n  return true;\n};\n\nconst applyAttributeEntry = (\n  el: HTMLElement,\n  rawKey: string,\n  rawValue: SpreadValue,\n  registerCleanup: RegisterCleanup,\n): void => {\n  const source = toReactiveBindingSource(rawValue);\n\n  if (!applyReactiveValue(source, (value) => setAttr(el, rawKey, value), registerCleanup)) {\n    setAttr(el, rawKey, rawValue);\n  }\n};\n\nconst applyEntry = (el: HTMLElement, rawKey: string, rawValue: SpreadValue, registerCleanup: RegisterCleanup): void => {\n  if (rawValue === undefined) return;\n\n  if (applyEventEntry(el, rawKey, rawValue, registerCleanup)) return;\n\n  if (applyPropertyEntry(el, rawKey, rawValue, registerCleanup)) return;\n\n  if (applyBooleanAttributeEntry(el, rawKey, rawValue, registerCleanup)) return;\n\n  applyAttributeEntry(el, rawKey, rawValue, registerCleanup);\n};\n\n/**\n * Unified spread directive for attributes, properties, and events.\n *\n * Key prefixes:\n * - `name`  -> attribute\n * - `?name` -> boolean attribute\n * - `.name` -> DOM property\n * - `@name` -> event listener\n */\nexport function spread(map: Record<string, SpreadValue>): Directive {\n  return {\n    mount(el, { registerCleanup }) {\n      for (const [key, value] of Object.entries(map)) {\n        applyEntry(el, key, value, registerCleanup);\n      }\n    },\n  };\n}\n"],"mappings":"sJAkBA,IAAM,GACJ,EACA,EACA,IAEK,GAEL,GAAA,EAAA,EAAA,YACe,CACX,EAAM,EAAO,MAAM,EACnB,CACH,CAEM,IARa,GAWhB,GACJ,EACA,EACA,EACA,IAEK,EAAO,WAAW,IAAI,EAEvB,OAAO,GAAa,YACtB,EAAgB,EAAA,OAAO,EAAI,EAAO,MAAM,EAAE,CAAE,EAAmC,CAAC,CAG3E,IAN6B,GAShC,GACJ,EACA,EACA,EACA,IACY,CACZ,GAAI,CAAC,EAAO,WAAW,IAAI,CAAE,MAAO,GAEpC,IAAM,EAAM,EAAO,MAAM,EAAE,CACrB,EAAgB,EAAA,uBAAuB,EAAS,CAAG,EAAW,IAAA,GASpE,OANK,EAFU,EAAA,wBAAwB,EAAS,CAEf,GAAW,EAAY,GAAO,EAAQ,EAAgB,GACpF,EAAW,GAAO,GAGrB,EAAA,kBAAkB,EAAI,EAAK,EAAe,EAAgB,CAEnD,IAGH,GACJ,EACA,EACA,EACA,IACY,CACZ,GAAI,CAAC,EAAO,WAAW,IAAI,CAAE,MAAO,GAEpC,IAAM,EAAM,EAAO,MAAM,EAAE,CAO3B,OAJK,EAFU,EAAA,wBAAwB,EAAS,CAEf,GAAU,EAAG,gBAAgB,EAAK,EAAQ,EAAO,CAAE,EAAgB,EAClG,EAAG,gBAAgB,EAAK,EAAQ,EAAU,CAGrC,IAGH,GACJ,EACA,EACA,EACA,IACS,CAGJ,EAFU,EAAA,wBAAwB,EAAS,CAEf,GAAU,EAAA,QAAQ,EAAI,EAAQ,EAAM,CAAE,EAAgB,EACrF,EAAA,QAAQ,EAAI,EAAQ,EAAS,EAI3B,GAAc,EAAiB,EAAgB,EAAuB,IAA2C,CACjH,IAAa,IAAA,KAEb,EAAgB,EAAI,EAAQ,EAAU,EAAgB,EAEtD,EAAmB,EAAI,EAAQ,EAAU,EAAgB,EAEzD,EAA2B,EAAI,EAAQ,EAAU,EAAgB,EAErE,EAAoB,EAAI,EAAQ,EAAU,EAAgB,GAY5D,SAAgB,EAAO,EAA6C,CAClE,MAAO,CACL,MAAM,EAAI,CAAE,mBAAmB,CAC7B,IAAK,GAAM,CAAC,EAAK,KAAU,OAAO,QAAQ,EAAI,CAC5C,EAAW,EAAI,EAAK,EAAO,EAAgB,EAGhD"}

package/dist/directives/spread.d.ts

@@ -1,14 +0,0 @@
-import { type ReadonlySignal } from '@vielzeug/stateit';
-import { type Directive } from '../core/internal';
-export type SpreadValue = string | number | boolean | null | undefined | ReadonlySignal<string | number | boolean | null | undefined> | (() => string | number | boolean | null | undefined) | ((event: Event) => void);
-/**
- * Unified spread directive for attributes, properties, and events.
- *
- * Key prefixes:
- * - `name`  -> attribute
- * - `?name` -> boolean attribute
- * - `.name` -> DOM property
- * - `@name` -> event listener
- */
-export declare function spread(map: Record<string, SpreadValue>): Directive;
-//# sourceMappingURL=spread.d.ts.map

package/dist/directives/spread.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"spread.d.ts","sourceRoot":"","sources":["../../src/directives/spread.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEhE,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD,MAAM,MAAM,WAAW,GACnB,MAAM,GACN,MAAM,GACN,OAAO,GACP,IAAI,GACJ,SAAS,GACT,cAAc,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,GAC5D,CAAC,MAAM,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,GACpD,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC;AAmG7B;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,SAAS,CAQlE"}

package/dist/directives/spread.js

@@ -1,2 +0,0 @@
-import"../core/internal.js";import{listen as e,setAttr as t}from"../core/utilities.js";import{bindPropertyModel as n,hasWritableValueSetter as r,toReactiveBindingSource as i}from"../core/runtime-bindings.js";import{effect as a}from"@vielzeug/stateit";var o=(e,t,n)=>e?(n(a(()=>{t(e.value)})),!0):!1,s=(t,n,r,i)=>n.startsWith(`@`)?(typeof r==`function`&&i(e(t,n.slice(1),r)),!0):!1,c=(e,t,a,s)=>{if(!t.startsWith(`.`))return!1;let c=t.slice(1),l=r(a)?a:void 0;return o(i(a),t=>e[c]=t,s)||(e[c]=a),n(e,c,l,s),!0},l=(e,t,n,r)=>{if(!t.startsWith(`?`))return!1;let a=t.slice(1);return o(i(n),t=>e.toggleAttribute(a,!!t),r)||e.toggleAttribute(a,!!n),!0},u=(e,n,r,a)=>{o(i(r),r=>t(e,n,r),a)||t(e,n,r)},d=(e,t,n,r)=>{n!==void 0&&(s(e,t,n,r)||c(e,t,n,r)||l(e,t,n,r)||u(e,t,n,r))};function f(e){return{mount(t,{registerCleanup:n}){for(let[r,i]of Object.entries(e))d(t,r,i,n)}}}export{f as spread};
-//# sourceMappingURL=spread.js.map

package/dist/directives/spread.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"spread.js","names":[],"sources":["../../src/directives/spread.ts"],"sourcesContent":["import { effect, type ReadonlySignal } from '@vielzeug/stateit';\n\nimport { type Directive } from '../core/internal';\nimport { bindPropertyModel, hasWritableValueSetter, toReactiveBindingSource } from '../core/runtime-bindings';\nimport { listen, setAttr } from '../core/utilities';\n\nexport type SpreadValue =\n  | string\n  | number\n  | boolean\n  | null\n  | undefined\n  | ReadonlySignal<string | number | boolean | null | undefined>\n  | (() => string | number | boolean | null | undefined)\n  | ((event: Event) => void);\n\ntype RegisterCleanup = (fn: () => void) => void;\n\nconst applyReactiveValue = (\n  source: ReadonlySignal<unknown> | undefined,\n  apply: (value: unknown) => void,\n  registerCleanup: RegisterCleanup,\n): boolean => {\n  if (!source) return false;\n\n  registerCleanup(\n    effect(() => {\n      apply(source.value);\n    }),\n  );\n\n  return true;\n};\n\nconst applyEventEntry = (\n  el: HTMLElement,\n  rawKey: string,\n  rawValue: SpreadValue,\n  registerCleanup: RegisterCleanup,\n): boolean => {\n  if (!rawKey.startsWith('@')) return false;\n\n  if (typeof rawValue === 'function') {\n    registerCleanup(listen(el, rawKey.slice(1), rawValue as (event: Event) => void));\n  }\n\n  return true;\n};\n\nconst applyPropertyEntry = (\n  el: HTMLElement,\n  rawKey: string,\n  rawValue: SpreadValue,\n  registerCleanup: RegisterCleanup,\n): boolean => {\n  if (!rawKey.startsWith('.')) return false;\n\n  const key = rawKey.slice(1);\n  const writableModel = hasWritableValueSetter(rawValue) ? rawValue : undefined;\n  const source = toReactiveBindingSource(rawValue);\n\n  if (!applyReactiveValue(source, (value) => ((el as any)[key] = value), registerCleanup)) {\n    (el as any)[key] = rawValue;\n  }\n\n  bindPropertyModel(el, key, writableModel, registerCleanup);\n\n  return true;\n};\n\nconst applyBooleanAttributeEntry = (\n  el: HTMLElement,\n  rawKey: string,\n  rawValue: SpreadValue,\n  registerCleanup: RegisterCleanup,\n): boolean => {\n  if (!rawKey.startsWith('?')) return false;\n\n  const key = rawKey.slice(1);\n  const source = toReactiveBindingSource(rawValue);\n\n  if (!applyReactiveValue(source, (value) => el.toggleAttribute(key, Boolean(value)), registerCleanup)) {\n    el.toggleAttribute(key, Boolean(rawValue));\n  }\n\n  return true;\n};\n\nconst applyAttributeEntry = (\n  el: HTMLElement,\n  rawKey: string,\n  rawValue: SpreadValue,\n  registerCleanup: RegisterCleanup,\n): void => {\n  const source = toReactiveBindingSource(rawValue);\n\n  if (!applyReactiveValue(source, (value) => setAttr(el, rawKey, value), registerCleanup)) {\n    setAttr(el, rawKey, rawValue);\n  }\n};\n\nconst applyEntry = (el: HTMLElement, rawKey: string, rawValue: SpreadValue, registerCleanup: RegisterCleanup): void => {\n  if (rawValue === undefined) return;\n\n  if (applyEventEntry(el, rawKey, rawValue, registerCleanup)) return;\n\n  if (applyPropertyEntry(el, rawKey, rawValue, registerCleanup)) return;\n\n  if (applyBooleanAttributeEntry(el, rawKey, rawValue, registerCleanup)) return;\n\n  applyAttributeEntry(el, rawKey, rawValue, registerCleanup);\n};\n\n/**\n * Unified spread directive for attributes, properties, and events.\n *\n * Key prefixes:\n * - `name`  -> attribute\n * - `?name` -> boolean attribute\n * - `.name` -> DOM property\n * - `@name` -> event listener\n */\nexport function spread(map: Record<string, SpreadValue>): Directive {\n  return {\n    mount(el, { registerCleanup }) {\n      for (const [key, value] of Object.entries(map)) {\n        applyEntry(el, key, value, registerCleanup);\n      }\n    },\n  };\n}\n"],"mappings":"2PAkBA,IAAM,GACJ,EACA,EACA,IAEK,GAEL,EACE,MAAa,CACX,EAAM,EAAO,MAAM,EACnB,CACH,CAEM,IARa,GAWhB,GACJ,EACA,EACA,EACA,IAEK,EAAO,WAAW,IAAI,EAEvB,OAAO,GAAa,YACtB,EAAgB,EAAO,EAAI,EAAO,MAAM,EAAE,CAAE,EAAmC,CAAC,CAG3E,IAN6B,GAShC,GACJ,EACA,EACA,EACA,IACY,CACZ,GAAI,CAAC,EAAO,WAAW,IAAI,CAAE,MAAO,GAEpC,IAAM,EAAM,EAAO,MAAM,EAAE,CACrB,EAAgB,EAAuB,EAAS,CAAG,EAAW,IAAA,GASpE,OANK,EAFU,EAAwB,EAAS,CAEf,GAAW,EAAY,GAAO,EAAQ,EAAgB,GACpF,EAAW,GAAO,GAGrB,EAAkB,EAAI,EAAK,EAAe,EAAgB,CAEnD,IAGH,GACJ,EACA,EACA,EACA,IACY,CACZ,GAAI,CAAC,EAAO,WAAW,IAAI,CAAE,MAAO,GAEpC,IAAM,EAAM,EAAO,MAAM,EAAE,CAO3B,OAJK,EAFU,EAAwB,EAAS,CAEf,GAAU,EAAG,gBAAgB,EAAK,EAAQ,EAAO,CAAE,EAAgB,EAClG,EAAG,gBAAgB,EAAK,EAAQ,EAAU,CAGrC,IAGH,GACJ,EACA,EACA,EACA,IACS,CAGJ,EAFU,EAAwB,EAAS,CAEf,GAAU,EAAQ,EAAI,EAAQ,EAAM,CAAE,EAAgB,EACrF,EAAQ,EAAI,EAAQ,EAAS,EAI3B,GAAc,EAAiB,EAAgB,EAAuB,IAA2C,CACjH,IAAa,IAAA,KAEb,EAAgB,EAAI,EAAQ,EAAU,EAAgB,EAEtD,EAAmB,EAAI,EAAQ,EAAU,EAAgB,EAEzD,EAA2B,EAAI,EAAQ,EAAU,EAAgB,EAErE,EAAoB,EAAI,EAAQ,EAAU,EAAgB,GAY5D,SAAgB,EAAO,EAA6C,CAClE,MAAO,CACL,MAAM,EAAI,CAAE,mBAAmB,CAC7B,IAAK,GAAM,CAAC,EAAK,KAAU,OAAO,QAAQ,EAAI,CAC5C,EAAW,EAAI,EAAK,EAAO,EAAgB,EAGhD"}

package/dist/directives/style.cjs

@@ -1,2 +0,0 @@
-const e=require(`../core/utilities.cjs`);let t=require(`@vielzeug/stateit`);var n=new Set([`animationIterationCount`,`columnCount`,`flex`,`flexGrow`,`flexShrink`,`fontWeight`,`gridColumn`,`gridRow`,`lineHeight`,`opacity`,`order`,`orphans`,`tabSize`,`widows`,`zIndex`]),r=(e,t)=>typeof t==`number`&&!n.has(e)?`${t}px`:String(t);function i(n){let i=Object.entries(n),a=i.some(([,e])=>(0,t.isSignal)(e)||typeof e==`function`),o=()=>{let n=[];for(let[a,o]of i){let i=(0,t.isSignal)(o)?o.value:typeof o==`function`?o():o;i!=null&&i!==``&&n.push(`${e.toKebab(a)}:${r(a,i)}`)}return n.join(`;`)};return a?(0,t.computed)(o):o()}exports.style=i;
-//# sourceMappingURL=style.cjs.map

package/dist/directives/style.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.cjs","names":[],"sources":["../../src/directives/style.ts"],"sourcesContent":["import { computed, isSignal, type ReadonlySignal, type Signal } from '@vielzeug/stateit';\n\nimport { toKebab } from '../core/utilities';\n\ntype StyleValue =\n  | string\n  | number\n  | undefined\n  | null\n  | Signal<string | number>\n  | ReadonlySignal<string | number>\n  | (() => string | number | null | undefined);\n\n/** Properties that are unitless — numbers are NOT suffixed with 'px'. */\nconst UNITLESS = new Set([\n  'animationIterationCount',\n  'columnCount',\n  'flex',\n  'flexGrow',\n  'flexShrink',\n  'fontWeight',\n  'gridColumn',\n  'gridRow',\n  'lineHeight',\n  'opacity',\n  'order',\n  'orphans',\n  'tabSize',\n  'widows',\n  'zIndex',\n]);\n\nconst toCssValue = (prop: string, val: string | number): string => {\n  if (typeof val === 'number' && !UNITLESS.has(prop)) return `${val}px`;\n\n  return String(val);\n};\n\n/**\n * Build a dynamic inline style string from an object map of CSS properties to values.\n * Supports camelCase property names (auto-converted to kebab-case). Number values\n * automatically get a `px` suffix except for unitless properties (opacity, zIndex, etc.).\n *\n * When any value is a reactive Signal or getter function the returned value is a\n * `ReadonlySignal<string>` that updates automatically — no arrow-function wrapper needed.\n *\n * @example\n * import { style } from '@vielzeug/craftit/directives';\n *\n * // Static — returns a plain string\n * html`<div style=${style({ color: 'red', fontSize: 16 })}></div>`\n *\n * // Reactive — returns a signal\n * html`<div style=${style({ fontSize: size, color: theme })}></div>`\n */\nexport function style(map: Record<string, StyleValue>): string | ReadonlySignal<string> {\n  const entries = Object.entries(map);\n  const hasReactive = entries.some(([, v]) => isSignal(v) || typeof v === 'function');\n\n  const build = (): string => {\n    const parts: string[] = [];\n\n    for (const [k, v] of entries) {\n      const raw = isSignal(v)\n        ? (v as ReadonlySignal<string | number>).value\n        : typeof v === 'function'\n          ? (v as () => string | number | null | undefined)()\n          : v;\n\n      if (raw != null && raw !== '') parts.push(`${toKebab(k)}:${toCssValue(k, raw as string | number)}`);\n    }\n\n    return parts.join(';');\n  };\n\n  return hasReactive ? computed(build) : build();\n}\n"],"mappings":"4EAcA,IAAM,EAAW,IAAI,IAAI,CACvB,0BACA,cACA,OACA,WACA,aACA,aACA,aACA,UACA,aACA,UACA,QACA,UACA,UACA,SACA,SACD,CAAC,CAEI,GAAc,EAAc,IAC5B,OAAO,GAAQ,UAAY,CAAC,EAAS,IAAI,EAAK,CAAS,GAAG,EAAI,IAE3D,OAAO,EAAI,CAoBpB,SAAgB,EAAM,EAAkE,CACtF,IAAM,EAAU,OAAO,QAAQ,EAAI,CAC7B,EAAc,EAAQ,MAAM,EAAG,MAAA,EAAA,EAAA,UAAgB,EAAE,EAAI,OAAO,GAAM,WAAW,CAE7E,MAAsB,CAC1B,IAAM,EAAkB,EAAE,CAE1B,IAAK,GAAM,CAAC,EAAG,KAAM,EAAS,CAC5B,IAAM,GAAA,EAAA,EAAA,UAAe,EAAE,CAClB,EAAsC,MACvC,OAAO,GAAM,WACV,GAAgD,CACjD,EAEF,GAAO,MAAQ,IAAQ,IAAI,EAAM,KAAK,GAAG,EAAA,QAAQ,EAAE,CAAC,GAAG,EAAW,EAAG,EAAuB,GAAG,CAGrG,OAAO,EAAM,KAAK,IAAI,EAGxB,OAAO,GAAA,EAAA,EAAA,UAAuB,EAAM,CAAG,GAAO"}

package/dist/directives/style.d.ts

@@ -1,22 +0,0 @@
-import { type ReadonlySignal, type Signal } from '@vielzeug/stateit';
-type StyleValue = string | number | undefined | null | Signal<string | number> | ReadonlySignal<string | number> | (() => string | number | null | undefined);
-/**
- * Build a dynamic inline style string from an object map of CSS properties to values.
- * Supports camelCase property names (auto-converted to kebab-case). Number values
- * automatically get a `px` suffix except for unitless properties (opacity, zIndex, etc.).
- *
- * When any value is a reactive Signal or getter function the returned value is a
- * `ReadonlySignal<string>` that updates automatically — no arrow-function wrapper needed.
- *
- * @example
- * import { style } from '@vielzeug/craftit/directives';
- *
- * // Static — returns a plain string
- * html`<div style=${style({ color: 'red', fontSize: 16 })}></div>`
- *
- * // Reactive — returns a signal
- * html`<div style=${style({ fontSize: size, color: theme })}></div>`
- */
-export declare function style(map: Record<string, StyleValue>): string | ReadonlySignal<string>;
-export {};
-//# sourceMappingURL=style.d.ts.map

package/dist/directives/style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/directives/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,KAAK,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAIzF,KAAK,UAAU,GACX,MAAM,GACN,MAAM,GACN,SAAS,GACT,IAAI,GACJ,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,GACvB,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC,GAC/B,CAAC,MAAM,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AA2B/C;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,KAAK,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,GAAG,MAAM,GAAG,cAAc,CAAC,MAAM,CAAC,CAqBtF"}

package/dist/directives/style.js

@@ -1,2 +0,0 @@
-import{toKebab as e}from"../core/utilities.js";import{computed as t,isSignal as n}from"@vielzeug/stateit";var r=new Set([`animationIterationCount`,`columnCount`,`flex`,`flexGrow`,`flexShrink`,`fontWeight`,`gridColumn`,`gridRow`,`lineHeight`,`opacity`,`order`,`orphans`,`tabSize`,`widows`,`zIndex`]),i=(e,t)=>typeof t==`number`&&!r.has(e)?`${t}px`:String(t);function a(r){let a=Object.entries(r),o=a.some(([,e])=>n(e)||typeof e==`function`),s=()=>{let t=[];for(let[r,o]of a){let a=n(o)?o.value:typeof o==`function`?o():o;a!=null&&a!==``&&t.push(`${e(r)}:${i(r,a)}`)}return t.join(`;`)};return o?t(s):s()}export{a as style};
-//# sourceMappingURL=style.js.map

package/dist/directives/style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../src/directives/style.ts"],"sourcesContent":["import { computed, isSignal, type ReadonlySignal, type Signal } from '@vielzeug/stateit';\n\nimport { toKebab } from '../core/utilities';\n\ntype StyleValue =\n  | string\n  | number\n  | undefined\n  | null\n  | Signal<string | number>\n  | ReadonlySignal<string | number>\n  | (() => string | number | null | undefined);\n\n/** Properties that are unitless — numbers are NOT suffixed with 'px'. */\nconst UNITLESS = new Set([\n  'animationIterationCount',\n  'columnCount',\n  'flex',\n  'flexGrow',\n  'flexShrink',\n  'fontWeight',\n  'gridColumn',\n  'gridRow',\n  'lineHeight',\n  'opacity',\n  'order',\n  'orphans',\n  'tabSize',\n  'widows',\n  'zIndex',\n]);\n\nconst toCssValue = (prop: string, val: string | number): string => {\n  if (typeof val === 'number' && !UNITLESS.has(prop)) return `${val}px`;\n\n  return String(val);\n};\n\n/**\n * Build a dynamic inline style string from an object map of CSS properties to values.\n * Supports camelCase property names (auto-converted to kebab-case). Number values\n * automatically get a `px` suffix except for unitless properties (opacity, zIndex, etc.).\n *\n * When any value is a reactive Signal or getter function the returned value is a\n * `ReadonlySignal<string>` that updates automatically — no arrow-function wrapper needed.\n *\n * @example\n * import { style } from '@vielzeug/craftit/directives';\n *\n * // Static — returns a plain string\n * html`<div style=${style({ color: 'red', fontSize: 16 })}></div>`\n *\n * // Reactive — returns a signal\n * html`<div style=${style({ fontSize: size, color: theme })}></div>`\n */\nexport function style(map: Record<string, StyleValue>): string | ReadonlySignal<string> {\n  const entries = Object.entries(map);\n  const hasReactive = entries.some(([, v]) => isSignal(v) || typeof v === 'function');\n\n  const build = (): string => {\n    const parts: string[] = [];\n\n    for (const [k, v] of entries) {\n      const raw = isSignal(v)\n        ? (v as ReadonlySignal<string | number>).value\n        : typeof v === 'function'\n          ? (v as () => string | number | null | undefined)()\n          : v;\n\n      if (raw != null && raw !== '') parts.push(`${toKebab(k)}:${toCssValue(k, raw as string | number)}`);\n    }\n\n    return parts.join(';');\n  };\n\n  return hasReactive ? computed(build) : build();\n}\n"],"mappings":"0GAcA,IAAM,EAAW,IAAI,IAAI,CACvB,0BACA,cACA,OACA,WACA,aACA,aACA,aACA,UACA,aACA,UACA,QACA,UACA,UACA,SACA,SACD,CAAC,CAEI,GAAc,EAAc,IAC5B,OAAO,GAAQ,UAAY,CAAC,EAAS,IAAI,EAAK,CAAS,GAAG,EAAI,IAE3D,OAAO,EAAI,CAoBpB,SAAgB,EAAM,EAAkE,CACtF,IAAM,EAAU,OAAO,QAAQ,EAAI,CAC7B,EAAc,EAAQ,MAAM,EAAG,KAAO,EAAS,EAAE,EAAI,OAAO,GAAM,WAAW,CAE7E,MAAsB,CAC1B,IAAM,EAAkB,EAAE,CAE1B,IAAK,GAAM,CAAC,EAAG,KAAM,EAAS,CAC5B,IAAM,EAAM,EAAS,EAAE,CAClB,EAAsC,MACvC,OAAO,GAAM,WACV,GAAgD,CACjD,EAEF,GAAO,MAAQ,IAAQ,IAAI,EAAM,KAAK,GAAG,EAAQ,EAAE,CAAC,GAAG,EAAW,EAAG,EAAuB,GAAG,CAGrG,OAAO,EAAM,KAAK,IAAI,EAGxB,OAAO,EAAc,EAAS,EAAM,CAAG,GAAO"}

package/dist/directives/until.cjs

@@ -1,2 +0,0 @@
-let e=require(`@vielzeug/stateit`);function t(t,n,r){let i=(0,e.signal)({done:!1});return t.then(e=>{i.value={done:!0,value:e}},e=>{r?i.value={done:!0,value:r(e)}:i.value={done:!0,value:`Error: ${String(e)}`}}),()=>i.value.done?i.value.value:n?.()??``}exports.until=t;
-//# sourceMappingURL=until.cjs.map

package/dist/directives/until.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"until.cjs","names":[],"sources":["../../src/directives/until.ts"],"sourcesContent":["import { signal } from '@vielzeug/stateit';\n\nimport type { HTMLResult } from '../core/internal';\n\ntype State = { done: false } | { done: true; value: string | HTMLResult };\n\n/**\n * Renders `pendingFn` while a Promise is pending, then switches to the resolved\n * result. Lighter-weight alternative to `suspense()` for one-shot data loading\n * with no error/retry UI.\n *\n * Returns a reactive getter the engine tracks automatically — no manual signal\n * management needed at the call site.\n *\n * @param promise The promise to await. Should already resolve to a renderable value.\n * @param pendingFn Optional function called while the promise is pending.\n * @param onError Optional function called when the promise rejects. Receives the rejection reason.\n *\n * @example\n * import { until } from '@vielzeug/craftit/directives';\n *\n * const data = fetch('/api/user').then(r => r.json());\n *\n * html`${until(\n *   data.then(u => html`<p>Hello, ${u.name}!</p>`),\n *   () => html`<p>Loading…</p>`,\n *   (err) => html`<p>Error: ${String(err)}</p>`,\n * )}`\n */\nexport function until(\n  promise: Promise<string | HTMLResult>,\n  pendingFn?: () => string | HTMLResult,\n  onError?: (err: unknown) => string | HTMLResult,\n): () => string | HTMLResult {\n  const state = signal<State>({ done: false });\n\n  promise.then(\n    (val) => {\n      state.value = { done: true, value: val };\n    },\n    (err) => {\n      if (onError) {\n        state.value = { done: true, value: onError(err) };\n      } else {\n        state.value = { done: true, value: `Error: ${String(err)}` };\n      }\n    },\n  );\n\n  return () => (state.value.done ? state.value.value : (pendingFn?.() ?? ''));\n}\n"],"mappings":"mCA6BA,SAAgB,EACd,EACA,EACA,EAC2B,CAC3B,IAAM,GAAA,EAAA,EAAA,QAAsB,CAAE,KAAM,GAAO,CAAC,CAe5C,OAbA,EAAQ,KACL,GAAQ,CACP,EAAM,MAAQ,CAAE,KAAM,GAAM,MAAO,EAAK,EAEzC,GAAQ,CACH,EACF,EAAM,MAAQ,CAAE,KAAM,GAAM,MAAO,EAAQ,EAAI,CAAE,CAEjD,EAAM,MAAQ,CAAE,KAAM,GAAM,MAAO,UAAU,OAAO,EAAI,GAAI,EAGjE,KAEa,EAAM,MAAM,KAAO,EAAM,MAAM,MAAS,KAAa,EAAI"}

package/dist/directives/until.d.ts

@@ -1,26 +0,0 @@
-import type { HTMLResult } from '../core/internal';
-/**
- * Renders `pendingFn` while a Promise is pending, then switches to the resolved
- * result. Lighter-weight alternative to `suspense()` for one-shot data loading
- * with no error/retry UI.
- *
- * Returns a reactive getter the engine tracks automatically — no manual signal
- * management needed at the call site.
- *
- * @param promise The promise to await. Should already resolve to a renderable value.
- * @param pendingFn Optional function called while the promise is pending.
- * @param onError Optional function called when the promise rejects. Receives the rejection reason.
- *
- * @example
- * import { until } from '@vielzeug/craftit/directives';
- *
- * const data = fetch('/api/user').then(r => r.json());
- *
- * html`${until(
- *   data.then(u => html`<p>Hello, ${u.name}!</p>`),
- *   () => html`<p>Loading…</p>`,
- *   (err) => html`<p>Error: ${String(err)}</p>`,
- * )}`
- */
-export declare function until(promise: Promise<string | HTMLResult>, pendingFn?: () => string | HTMLResult, onError?: (err: unknown) => string | HTMLResult): () => string | HTMLResult;
-//# sourceMappingURL=until.d.ts.map

package/dist/directives/until.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"until.d.ts","sourceRoot":"","sources":["../../src/directives/until.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAInD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,KAAK,CACnB,OAAO,EAAE,OAAO,CAAC,MAAM,GAAG,UAAU,CAAC,EACrC,SAAS,CAAC,EAAE,MAAM,MAAM,GAAG,UAAU,EACrC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,GAAG,UAAU,GAC9C,MAAM,MAAM,GAAG,UAAU,CAiB3B"}

package/dist/directives/until.js

@@ -1,2 +0,0 @@
-import{signal as e}from"@vielzeug/stateit";function t(t,n,r){let i=e({done:!1});return t.then(e=>{i.value={done:!0,value:e}},e=>{r?i.value={done:!0,value:r(e)}:i.value={done:!0,value:`Error: ${String(e)}`}}),()=>i.value.done?i.value.value:n?.()??``}export{t as until};
-//# sourceMappingURL=until.js.map

package/dist/directives/until.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"until.js","names":[],"sources":["../../src/directives/until.ts"],"sourcesContent":["import { signal } from '@vielzeug/stateit';\n\nimport type { HTMLResult } from '../core/internal';\n\ntype State = { done: false } | { done: true; value: string | HTMLResult };\n\n/**\n * Renders `pendingFn` while a Promise is pending, then switches to the resolved\n * result. Lighter-weight alternative to `suspense()` for one-shot data loading\n * with no error/retry UI.\n *\n * Returns a reactive getter the engine tracks automatically — no manual signal\n * management needed at the call site.\n *\n * @param promise The promise to await. Should already resolve to a renderable value.\n * @param pendingFn Optional function called while the promise is pending.\n * @param onError Optional function called when the promise rejects. Receives the rejection reason.\n *\n * @example\n * import { until } from '@vielzeug/craftit/directives';\n *\n * const data = fetch('/api/user').then(r => r.json());\n *\n * html`${until(\n *   data.then(u => html`<p>Hello, ${u.name}!</p>`),\n *   () => html`<p>Loading…</p>`,\n *   (err) => html`<p>Error: ${String(err)}</p>`,\n * )}`\n */\nexport function until(\n  promise: Promise<string | HTMLResult>,\n  pendingFn?: () => string | HTMLResult,\n  onError?: (err: unknown) => string | HTMLResult,\n): () => string | HTMLResult {\n  const state = signal<State>({ done: false });\n\n  promise.then(\n    (val) => {\n      state.value = { done: true, value: val };\n    },\n    (err) => {\n      if (onError) {\n        state.value = { done: true, value: onError(err) };\n      } else {\n        state.value = { done: true, value: `Error: ${String(err)}` };\n      }\n    },\n  );\n\n  return () => (state.value.done ? state.value.value : (pendingFn?.() ?? ''));\n}\n"],"mappings":"2CA6BA,SAAgB,EACd,EACA,EACA,EAC2B,CAC3B,IAAM,EAAQ,EAAc,CAAE,KAAM,GAAO,CAAC,CAe5C,OAbA,EAAQ,KACL,GAAQ,CACP,EAAM,MAAQ,CAAE,KAAM,GAAM,MAAO,EAAK,EAEzC,GAAQ,CACH,EACF,EAAM,MAAQ,CAAE,KAAM,GAAM,MAAO,EAAQ,EAAI,CAAE,CAEjD,EAAM,MAAQ,CAAE,KAAM,GAAM,MAAO,UAAU,OAAO,EAAI,GAAI,EAGjE,KAEa,EAAM,MAAM,KAAO,EAAM,MAAM,MAAS,KAAa,EAAI"}

package/dist/labs/a11y.cjs

@@ -1,2 +0,0 @@
-const e=require(`../core/runtime-lifecycle.cjs`),t=require(`../core/utilities.cjs`);require(`../core/runtime.cjs`);function n(n,r){let i=r.labelId||t.createId(`a11y-label`),a=r.helperId||t.createId(`a11y-helper`),o=null;return n.setAttribute(`role`,r.role),e.onMount(()=>{let t=n.shadowRoot;if(t&&(o=t.querySelector(`[data-a11y-helper]`)),t){let e=t.querySelector(`[data-a11y-label]`);if(e){let t=e.querySelector(`slot`);(t?t.assignedNodes().length>0:e.textContent?.trim().length??!1)&&(e.id=i,n.setAttribute(`aria-labelledby`,i))}}e.effect(()=>{if(r.checked){let e=r.checked();e!==void 0&&n.setAttribute(`aria-checked`,e)}if(r.invalid){let e=r.invalid();n.setAttribute(`aria-invalid`,String(e))}if(r.helperText&&o){let e=r.helperText();e?(o.textContent=e,o.hidden=!1,n.setAttribute(`aria-describedby`,a),(r.helperTone?.()??`default`)===`error`?o.setAttribute(`role`,`alert`):o.removeAttribute(`role`)):(o.hidden=!0,n.removeAttribute(`aria-describedby`))}})}),{helperId:a,labelId:i}}exports.useA11yControl=n;
-//# sourceMappingURL=a11y.cjs.map

package/dist/labs/a11y.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"a11y.cjs","names":[],"sources":["../../src/labs/a11y.ts"],"sourcesContent":["import { effect, onMount } from '../core/runtime';\nimport { createId } from '../core/utilities';\n\n/**\n * Tone of helper/error text: 'default' for helper, 'error' for error message.\n */\nexport type A11yTone = 'default' | 'error';\n\n/**\n * Configuration for `useA11yControl()`.\n *\n * Label presence is detected via DOM query (not heuristics).\n * All other state getters are reactive and can change over time.\n */\nexport type A11yControlConfig = {\n  /** Reactive aria-checked value ('true' | 'false' | 'mixed' | undefined) */\n  checked?: () => 'true' | 'false' | 'mixed' | undefined;\n  /** Optional: custom helper ID instead of auto-generated */\n  helperId?: string;\n  /** Helper text content (mutually exclusive with explicit label/helper management) */\n  helperText?: () => string | undefined;\n  /** Tone of helper text: 'error' to set role=\"alert\", 'default' otherwise */\n  helperTone?: () => A11yTone;\n  /** Reactive aria-invalid value */\n  invalid?: () => boolean;\n  /** Optional: custom label ID instead of auto-generated */\n  labelId?: string;\n  /** ARIA role (e.g., 'checkbox', 'radio', 'switch') */\n  role: string;\n};\n\n/**\n * Return value from `useA11yControl()`.\n */\nexport type A11yControlHandle = {\n  /** ID for helper text element */\n  helperId: string;\n  /** ID for label element */\n  labelId: string;\n};\n\n/**\n * Manages ARIA attributes, IDs, and helper/error live region for accessible form controls.\n *\n * Encapsulates:\n * - Stable ID generation for labels and helpers\n * - `aria-labelledby` wiring when label is present (detected via DOM query)\n * - `aria-describedby` wiring when helper text is present\n * - `aria-invalid` sync with error state\n * - `aria-checked` for checkable controls\n * - Helper text live region with `aria-live=\"polite\"` or `role=\"alert\"` based on tone\n *\n * @example\n * const a11y = useA11yControl(host, {\n *   role: 'checkbox',\n *   checked: () => indeterminate.value ? 'mixed' : String(checked.value),\n *   invalid: () => !!error.value,\n *   helperText: () => error.value || helper.value,\n *   helperTone: () => error.value ? 'error' : 'default',\n * });\n *\n * // Later in template:\n * // <span id=${a11y.labelId}>Label</span>\n * // <div id=${a11y.helperId} aria-live=\"polite\">Error or helper text</div>\n */\nexport function useA11yControl(host: HTMLElement, config: A11yControlConfig): A11yControlHandle {\n  const labelId = config.labelId || createId('a11y-label');\n  const helperId = config.helperId || createId('a11y-helper');\n\n  let helperElement: HTMLDivElement | null = null;\n\n  // Set role once at setup\n  host.setAttribute('role', config.role);\n\n  onMount(() => {\n    // Find helper element in shadow DOM\n    const shadow = host.shadowRoot;\n\n    if (shadow) {\n      helperElement = shadow.querySelector('[data-a11y-helper]') as HTMLDivElement | null;\n    }\n\n    // Detect label presence via DOM query: check if label span has slotted content\n    if (shadow) {\n      const labelSpan = shadow.querySelector('[data-a11y-label]') as HTMLElement | null;\n\n      if (labelSpan) {\n        // Check if the label slot has any assigned nodes\n        const slot = labelSpan.querySelector('slot') as HTMLSlotElement | null;\n        const hasLabelContent = slot\n          ? slot.assignedNodes().length > 0\n          : (labelSpan.textContent?.trim().length ?? 0 > 0);\n\n        if (hasLabelContent) {\n          labelSpan.id = labelId;\n          host.setAttribute('aria-labelledby', labelId);\n        }\n      }\n    }\n\n    // Reactive effects for aria attrs that can change\n    effect(() => {\n      // aria-checked\n      if (config.checked) {\n        const checked = config.checked();\n\n        if (checked !== undefined) {\n          host.setAttribute('aria-checked', checked);\n        }\n      }\n\n      // aria-invalid\n      if (config.invalid) {\n        const invalid = config.invalid();\n\n        host.setAttribute('aria-invalid', String(invalid));\n      }\n\n      // Helper text and describedby\n      if (config.helperText && helperElement) {\n        const text = config.helperText();\n\n        if (text) {\n          helperElement.textContent = text;\n          helperElement.hidden = false;\n          host.setAttribute('aria-describedby', helperId);\n\n          // Set role based on explicit tone (no text heuristics)\n          const tone = config.helperTone?.() ?? 'default';\n\n          if (tone === 'error') {\n            helperElement.setAttribute('role', 'alert');\n          } else {\n            helperElement.removeAttribute('role');\n          }\n        } else {\n          helperElement.hidden = true;\n          host.removeAttribute('aria-describedby');\n        }\n      }\n    });\n  });\n\n  return {\n    helperId,\n    labelId,\n  };\n}\n"],"mappings":"mHAiEA,SAAgB,EAAe,EAAmB,EAA8C,CAC9F,IAAM,EAAU,EAAO,SAAW,EAAA,SAAS,aAAa,CAClD,EAAW,EAAO,UAAY,EAAA,SAAS,cAAc,CAEvD,EAAuC,KA0E3C,OAvEA,EAAK,aAAa,OAAQ,EAAO,KAAK,CAEtC,EAAA,YAAc,CAEZ,IAAM,EAAS,EAAK,WAOpB,GALI,IACF,EAAgB,EAAO,cAAc,qBAAqB,EAIxD,EAAQ,CACV,IAAM,EAAY,EAAO,cAAc,oBAAoB,CAE3D,GAAI,EAAW,CAEb,IAAM,EAAO,EAAU,cAAc,OAAO,EACpB,EACpB,EAAK,eAAe,CAAC,OAAS,EAC7B,EAAU,aAAa,MAAM,CAAC,QAAU,MAG3C,EAAU,GAAK,EACf,EAAK,aAAa,kBAAmB,EAAQ,GAMnD,EAAA,WAAa,CAEX,GAAI,EAAO,QAAS,CAClB,IAAM,EAAU,EAAO,SAAS,CAE5B,IAAY,IAAA,IACd,EAAK,aAAa,eAAgB,EAAQ,CAK9C,GAAI,EAAO,QAAS,CAClB,IAAM,EAAU,EAAO,SAAS,CAEhC,EAAK,aAAa,eAAgB,OAAO,EAAQ,CAAC,CAIpD,GAAI,EAAO,YAAc,EAAe,CACtC,IAAM,EAAO,EAAO,YAAY,CAE5B,GACF,EAAc,YAAc,EAC5B,EAAc,OAAS,GACvB,EAAK,aAAa,mBAAoB,EAAS,EAGlC,EAAO,cAAc,EAAI,aAEzB,QACX,EAAc,aAAa,OAAQ,QAAQ,CAE3C,EAAc,gBAAgB,OAAO,GAGvC,EAAc,OAAS,GACvB,EAAK,gBAAgB,mBAAmB,IAG5C,EACF,CAEK,CACL,WACA,UACD"}