@vielzeug/refine 1.1.1

package/dist/headless/text-field.js

@@ -0,0 +1,41 @@
+import { createCounterState as e, createField as t } from "./field-base.js";
+import { syncedSignal as n } from "./signals.js";
+import "@vielzeug/ripple";
+//#region src/headless/text-field.ts
+var r = (r) => {
+	let i = n(r.value, r.signal, (e) => String(e ?? "")), a = t(r), o = r.maxLength ? e({
+		maxLength: r.maxLength,
+		value: i
+	}) : null, s = (e) => {
+		e?.preventDefault?.(), i.value = "", r.onInput?.(e ?? new InputEvent("input", { bubbles: !0 }), ""), r.onChange?.(e ?? new Event("change", { bubbles: !0 }), ""), a.triggerValidation("change");
+	}, c = (e, t) => {
+		let n = [], o = (t, r) => {
+			e.addEventListener(t, r), n.push(() => e.removeEventListener(t, r));
+		};
+		r.onFocus && o("focus", (e) => r.onFocus(e)), o("input", (t) => {
+			t.stopPropagation(), r.onBeforeInput?.(t), i.value = e.value, r.onInput?.(t, e.value);
+		}), o("change", (t) => {
+			t.stopPropagation(), i.value = e.value, r.onChange?.(t, e.value), a.triggerValidation("change");
+		}), o("blur", (e) => {
+			r.onBlur?.(e), a.triggerValidation("blur");
+		});
+		let s = !1, c = () => {
+			if (!s) {
+				s = !0;
+				for (let e of n) e();
+			}
+		};
+		return t?.addEventListener("abort", c, { once: !0 }), c;
+	};
+	return {
+		...a,
+		clear: s,
+		counter: o,
+		value: i,
+		wire: c
+	};
+};
+//#endregion
+export { r as createTextField };
+
+//# sourceMappingURL=text-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.js","names":[],"sources":["../../src/headless/text-field.ts"],"sourcesContent":["import { type Readable, type Signal } from '@vielzeug/ripple';\n\nimport { type CounterState, createCounterState, createField, type FieldHandle, type FieldOptions } from './field-base';\nimport { syncedSignal } from './signals';\n\n// ── Text field ────────────────────────────────────────────────────────────────\n\n/** Detach function returned by `wire()`. Call to remove element listeners. */\nexport type TextFieldDetach = () => void;\n\nexport type TextFieldOptions = FieldOptions & {\n  maxLength?: Readable<number | undefined>;\n  /**\n   * Called synchronously before value extraction on every input event.\n   * Use only for DOM side-effects (e.g. auto-resize measurement) that must\n   * run before the reactive value is updated.\n   */\n  onBeforeInput?: (event: Event) => void;\n  onBlur?: (event: FocusEvent) => void;\n  onChange?: (event: Event, value: string) => void;\n  onFocus?: (event: FocusEvent) => void;\n  onInput?: (event: Event, value: string) => void;\n  /** `AbortSignal` from the component lifecycle. The internal value-sync watcher is disposed on abort. */\n  signal: AbortSignal;\n  value: Readable<string | undefined>;\n};\n\nexport type TextFieldHandle = FieldHandle & {\n  /** Clears the field value and fires synthetic input/change events. */\n  clear: (event?: Event) => void;\n  /**\n   * Reactive counter state. Non-null when `maxLength` was provided; `null` otherwise.\n   * Components should only render a counter element when this is non-null.\n   */\n  counter: Readable<CounterState> | null;\n  /** The local mutable field value (two-way bound to the input element via `wire()`). */\n  value: Signal<string>;\n  /**\n   * Attaches event listeners to the underlying input or textarea element.\n   *\n   * When `signal` is provided, the listeners are detached automatically when\n   * the signal's controller calls `abort()`. Without a signal the returned\n   * `TextFieldDetach` must be called manually.\n   *\n   * Safe to call multiple times — each call attaches a fresh set of listeners\n   * and returns a distinct detach function. Calling detach multiple times is\n   * a no-op (guarded internally).\n   */\n  wire: (el: HTMLInputElement | HTMLTextAreaElement, signal?: AbortSignal) => TextFieldDetach;\n};\n\nexport const createTextField = (options: TextFieldOptions): TextFieldHandle => {\n  const value = syncedSignal(options.value, options.signal, (v) => String(v ?? ''));\n\n  const field = createField(options);\n  const counter = options.maxLength ? createCounterState({ maxLength: options.maxLength, value }) : null;\n\n  const clear = (event?: Event): void => {\n    event?.preventDefault?.();\n    value.value = '';\n    options.onInput?.(event ?? new InputEvent('input', { bubbles: true }), '');\n    options.onChange?.(event ?? new Event('change', { bubbles: true }), '');\n    field.triggerValidation('change');\n  };\n\n  const wire = (element: HTMLInputElement | HTMLTextAreaElement, signal?: AbortSignal): TextFieldDetach => {\n    const cleanups: Array<() => void> = [];\n    const on = (type: string, handler: EventListener): void => {\n      element.addEventListener(type, handler);\n      cleanups.push(() => element.removeEventListener(type, handler));\n    };\n\n    if (options.onFocus) {\n      on('focus', (e) => options.onFocus!(e as FocusEvent));\n    }\n\n    on('input', (e) => {\n      e.stopPropagation();\n      options.onBeforeInput?.(e);\n      value.value = element.value;\n      options.onInput?.(e, element.value);\n    });\n\n    on('change', (e) => {\n      e.stopPropagation();\n      value.value = element.value;\n      options.onChange?.(e, element.value);\n      field.triggerValidation('change');\n    });\n\n    on('blur', (e) => {\n      options.onBlur?.(e as FocusEvent);\n      field.triggerValidation('blur');\n    });\n\n    let detached = false;\n    const detach = (): void => {\n      if (detached) return;\n\n      detached = true;\n      for (const dispose of cleanups) dispose();\n    };\n\n    signal?.addEventListener('abort', detach, { once: true });\n\n    return detach;\n  };\n\n  return { ...field, clear, counter, value, wire };\n};\n"],"mappings":";;;;AAmDA,IAAa,KAAmB,MAA+C;CAC7E,IAAM,IAAQ,EAAa,EAAQ,OAAO,EAAQ,SAAS,MAAM,OAAO,KAAK,EAAE,CAAC,GAE1E,IAAQ,EAAY,CAAO,GAC3B,IAAU,EAAQ,YAAY,EAAmB;EAAE,WAAW,EAAQ;EAAW;CAAM,CAAC,IAAI,MAE5F,KAAS,MAAwB;EAKrC,AAJA,GAAO,iBAAiB,GACxB,EAAM,QAAQ,IACd,EAAQ,UAAU,KAAS,IAAI,WAAW,SAAS,EAAE,SAAS,GAAK,CAAC,GAAG,EAAE,GACzE,EAAQ,WAAW,KAAS,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,GAAG,EAAE,GACtE,EAAM,kBAAkB,QAAQ;CAClC,GAEM,KAAQ,GAAiD,MAA0C;EACvG,IAAM,IAA8B,CAAC,GAC/B,KAAM,GAAc,MAAiC;GAEzD,AADA,EAAQ,iBAAiB,GAAM,CAAO,GACtC,EAAS,WAAW,EAAQ,oBAAoB,GAAM,CAAO,CAAC;EAChE;EAoBA,AAlBI,EAAQ,WACV,EAAG,UAAU,MAAM,EAAQ,QAAS,CAAe,CAAC,GAGtD,EAAG,UAAU,MAAM;GAIjB,AAHA,EAAE,gBAAgB,GAClB,EAAQ,gBAAgB,CAAC,GACzB,EAAM,QAAQ,EAAQ,OACtB,EAAQ,UAAU,GAAG,EAAQ,KAAK;EACpC,CAAC,GAED,EAAG,WAAW,MAAM;GAIlB,AAHA,EAAE,gBAAgB,GAClB,EAAM,QAAQ,EAAQ,OACtB,EAAQ,WAAW,GAAG,EAAQ,KAAK,GACnC,EAAM,kBAAkB,QAAQ;EAClC,CAAC,GAED,EAAG,SAAS,MAAM;GAEhB,AADA,EAAQ,SAAS,CAAe,GAChC,EAAM,kBAAkB,MAAM;EAChC,CAAC;EAED,IAAI,IAAW,IACT,UAAqB;GACrB,QAEJ;QAAW;IACX,KAAK,IAAM,KAAW,GAAU,EAAQ;GAD7B;EAEb;EAIA,OAFA,GAAQ,iBAAiB,SAAS,GAAQ,EAAE,MAAM,GAAK,CAAC,GAEjD;CACT;CAEA,OAAO;EAAE,GAAG;EAAO;EAAO;EAAS;EAAO;CAAK;AACjD"}

package/dist/headless/typeahead.cjs

@@ -0,0 +1,2 @@
+var e=e=>{let t=e.delay??500,n=``,r=null,i=()=>{n=``,r!==null&&(clearTimeout(r),r=null)};return e.signal?.addEventListener(`abort`,i,{once:!0}),{handleKeydown:a=>{if(a.key.length!==1||a.ctrlKey||a.altKey||a.metaKey)return!1;n+=a.key.toLowerCase(),r!==null&&clearTimeout(r),r=setTimeout(i,t);let o=e.getItems(),s=e.getIndex(),c=s>=0?s+1:0;for(let t=0;t<o.length;t++){let r=(c+t)%o.length;if(!e.isItemDisabled?.(o[r],r)&&e.getItemLabel(o[r],r).toLowerCase().startsWith(n))return e.onNavigate(r,a),!0}return!1},reset:i}};exports.createTypeahead=e;
+//# sourceMappingURL=typeahead.cjs.map

package/dist/headless/typeahead.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"typeahead.cjs","names":[],"sources":["../../src/headless/typeahead.ts"],"sourcesContent":["// ── Typeahead ─────────────────────────────────────────────────────────────────\n// Standalone typeahead primitive: accumulates printable keystrokes, then finds\n// the first enabled item whose label starts with the buffer.\n//\n// Extracted from nav.ts so it can be reused independently (e.g. combobox input).\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type TypeaheadOptions<T> = {\n  /**\n   * Milliseconds of inactivity before the buffer resets.\n   * ARIA APG recommended window. Default: `500`.\n   */\n  delay?: number;\n  /** Returns the current focused index (used to search forward from current + 1). */\n  getIndex: () => number;\n  /** Returns a plain-text label for the item at `index`. */\n  getItemLabel: (item: T, index: number) => string;\n  /** Returns all items in the current list. */\n  getItems: () => T[];\n  /** Returns `true` for items that should be skipped during typeahead search. */\n  isItemDisabled?: (item: T, index: number) => boolean;\n  /** Called when typeahead navigation lands on an item. */\n  onNavigate: (index: number, event: KeyboardEvent) => void;\n  /**\n   * When provided, the pending reset timer is cancelled automatically when the\n   * signal aborts (e.g. when the owning component disconnects).\n   */\n  signal?: AbortSignal;\n};\n\nexport type Typeahead = {\n  /**\n   * Process a keyboard event. Returns `true` if the event was consumed by\n   * typeahead (a printable character matched or was buffered).\n   */\n  handleKeydown(event: KeyboardEvent): boolean;\n  /** Reset the buffer immediately. Call on list close to clear stale input. */\n  reset(): void;\n};\n\n// ── Implementation ────────────────────────────────────────────────────────────\n\n/**\n * Creates a standalone typeahead handler for keyboard-navigable lists.\n *\n * Accumulates printable keystrokes into a buffer; on each keystroke searches\n * for the first enabled item whose label starts with the buffer. Cycles past\n * the current item on repeated same-character presses. Buffer resets after\n * `delay` ms of inactivity (default 500 — the ARIA APG recommended window).\n *\n * @example\n * ```ts\n * const typeahead = createTypeahead({\n *   getIndex: () => focusedIndex,\n *   getItemLabel: (item) => item.label,\n *   getItems: () => items,\n *   onNavigate: (index) => { focusedIndex = index; },\n * });\n *\n * listEl.addEventListener('keydown', (e) => typeahead.handleKeydown(e));\n * ```\n */\nexport const createTypeahead = <T>(options: TypeaheadOptions<T>): Typeahead => {\n  const delay = options.delay ?? 500;\n  let _buffer = '';\n  let _timer: ReturnType<typeof setTimeout> | null = null;\n\n  const reset = (): void => {\n    _buffer = '';\n\n    if (_timer !== null) {\n      clearTimeout(_timer);\n      _timer = null;\n    }\n  };\n\n  options.signal?.addEventListener('abort', reset, { once: true });\n\n  const handleKeydown = (event: KeyboardEvent): boolean => {\n    // Single printable character only; exclude modifier combos.\n    if (event.key.length !== 1 || event.ctrlKey || event.altKey || event.metaKey) return false;\n\n    _buffer += event.key.toLowerCase();\n\n    if (_timer !== null) clearTimeout(_timer);\n\n    _timer = setTimeout(reset, delay);\n\n    const items = options.getItems();\n    const current = options.getIndex();\n    const startAfter = current >= 0 ? current + 1 : 0;\n\n    for (let n = 0; n < items.length; n++) {\n      const i = (startAfter + n) % items.length;\n\n      if (options.isItemDisabled?.(items[i], i)) continue;\n\n      if (options.getItemLabel(items[i], i).toLowerCase().startsWith(_buffer)) {\n        options.onNavigate(i, event);\n\n        return true;\n      }\n    }\n\n    return false;\n  };\n\n  return { handleKeydown, reset };\n};\n"],"mappings":"AA+DA,IAAa,EAAsB,GAA4C,CAC7E,IAAM,EAAQ,EAAQ,OAAS,IAC3B,EAAU,GACV,EAA+C,KAE7C,MAAoB,CACxB,EAAU,GAEN,IAAW,OACb,aAAa,CAAM,EACnB,EAAS,KAEb,EAiCA,OA/BA,EAAQ,QAAQ,iBAAiB,QAAS,EAAO,CAAE,KAAM,EAAK,CAAC,EA+BxD,CAAE,cA7Bc,GAAkC,CAEvD,GAAI,EAAM,IAAI,SAAW,GAAK,EAAM,SAAW,EAAM,QAAU,EAAM,QAAS,MAAO,GAErF,GAAW,EAAM,IAAI,YAAY,EAE7B,IAAW,MAAM,aAAa,CAAM,EAExC,EAAS,WAAW,EAAO,CAAK,EAEhC,IAAM,EAAQ,EAAQ,SAAS,EACzB,EAAU,EAAQ,SAAS,EAC3B,EAAa,GAAW,EAAI,EAAU,EAAI,EAEhD,IAAK,IAAI,EAAI,EAAG,EAAI,EAAM,OAAQ,IAAK,CACrC,IAAM,GAAK,EAAa,GAAK,EAAM,OAE/B,MAAQ,iBAAiB,EAAM,GAAI,CAAC,GAEpC,EAAQ,aAAa,EAAM,GAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,WAAW,CAAO,EAGpE,OAFA,EAAQ,WAAW,EAAG,CAAK,EAEpB,EAEX,CAEA,MAAO,EACT,EAEwB,OAAM,CAChC"}

package/dist/headless/typeahead.d.ts

@@ -0,0 +1,53 @@
+export type TypeaheadOptions<T> = {
+    /**
+     * Milliseconds of inactivity before the buffer resets.
+     * ARIA APG recommended window. Default: `500`.
+     */
+    delay?: number;
+    /** Returns the current focused index (used to search forward from current + 1). */
+    getIndex: () => number;
+    /** Returns a plain-text label for the item at `index`. */
+    getItemLabel: (item: T, index: number) => string;
+    /** Returns all items in the current list. */
+    getItems: () => T[];
+    /** Returns `true` for items that should be skipped during typeahead search. */
+    isItemDisabled?: (item: T, index: number) => boolean;
+    /** Called when typeahead navigation lands on an item. */
+    onNavigate: (index: number, event: KeyboardEvent) => void;
+    /**
+     * When provided, the pending reset timer is cancelled automatically when the
+     * signal aborts (e.g. when the owning component disconnects).
+     */
+    signal?: AbortSignal;
+};
+export type Typeahead = {
+    /**
+     * Process a keyboard event. Returns `true` if the event was consumed by
+     * typeahead (a printable character matched or was buffered).
+     */
+    handleKeydown(event: KeyboardEvent): boolean;
+    /** Reset the buffer immediately. Call on list close to clear stale input. */
+    reset(): void;
+};
+/**
+ * Creates a standalone typeahead handler for keyboard-navigable lists.
+ *
+ * Accumulates printable keystrokes into a buffer; on each keystroke searches
+ * for the first enabled item whose label starts with the buffer. Cycles past
+ * the current item on repeated same-character presses. Buffer resets after
+ * `delay` ms of inactivity (default 500 — the ARIA APG recommended window).
+ *
+ * @example
+ * ```ts
+ * const typeahead = createTypeahead({
+ *   getIndex: () => focusedIndex,
+ *   getItemLabel: (item) => item.label,
+ *   getItems: () => items,
+ *   onNavigate: (index) => { focusedIndex = index; },
+ * });
+ *
+ * listEl.addEventListener('keydown', (e) => typeahead.handleKeydown(e));
+ * ```
+ */
+export declare const createTypeahead: <T>(options: TypeaheadOptions<T>) => Typeahead;
+//# sourceMappingURL=typeahead.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"typeahead.d.ts","sourceRoot":"","sources":["../../src/headless/typeahead.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,QAAQ,EAAE,MAAM,MAAM,CAAC;IACvB,0DAA0D;IAC1D,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACjD,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,CAAC,EAAE,CAAC;IACpB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACrD,yDAAyD;IACzD,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1D;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB;;;OAGG;IACH,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAAC;IAC7C,6EAA6E;IAC7E,KAAK,IAAI,IAAI,CAAC;CACf,CAAC;AAIF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,eAAe,GAAI,CAAC,EAAE,SAAS,gBAAgB,CAAC,CAAC,CAAC,KAAG,SA8CjE,CAAC"}

package/dist/headless/typeahead.js

@@ -0,0 +1,23 @@
+//#region src/headless/typeahead.ts
+var e = (e) => {
+	let t = e.delay ?? 500, n = "", r = null, i = () => {
+		n = "", r !== null && (clearTimeout(r), r = null);
+	};
+	return e.signal?.addEventListener("abort", i, { once: !0 }), {
+		handleKeydown: (a) => {
+			if (a.key.length !== 1 || a.ctrlKey || a.altKey || a.metaKey) return !1;
+			n += a.key.toLowerCase(), r !== null && clearTimeout(r), r = setTimeout(i, t);
+			let o = e.getItems(), s = e.getIndex(), c = s >= 0 ? s + 1 : 0;
+			for (let t = 0; t < o.length; t++) {
+				let r = (c + t) % o.length;
+				if (!e.isItemDisabled?.(o[r], r) && e.getItemLabel(o[r], r).toLowerCase().startsWith(n)) return e.onNavigate(r, a), !0;
+			}
+			return !1;
+		},
+		reset: i
+	};
+};
+//#endregion
+export { e as createTypeahead };
+
+//# sourceMappingURL=typeahead.js.map

package/dist/headless/typeahead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typeahead.js","names":[],"sources":["../../src/headless/typeahead.ts"],"sourcesContent":["// ── Typeahead ─────────────────────────────────────────────────────────────────\n// Standalone typeahead primitive: accumulates printable keystrokes, then finds\n// the first enabled item whose label starts with the buffer.\n//\n// Extracted from nav.ts so it can be reused independently (e.g. combobox input).\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type TypeaheadOptions<T> = {\n  /**\n   * Milliseconds of inactivity before the buffer resets.\n   * ARIA APG recommended window. Default: `500`.\n   */\n  delay?: number;\n  /** Returns the current focused index (used to search forward from current + 1). */\n  getIndex: () => number;\n  /** Returns a plain-text label for the item at `index`. */\n  getItemLabel: (item: T, index: number) => string;\n  /** Returns all items in the current list. */\n  getItems: () => T[];\n  /** Returns `true` for items that should be skipped during typeahead search. */\n  isItemDisabled?: (item: T, index: number) => boolean;\n  /** Called when typeahead navigation lands on an item. */\n  onNavigate: (index: number, event: KeyboardEvent) => void;\n  /**\n   * When provided, the pending reset timer is cancelled automatically when the\n   * signal aborts (e.g. when the owning component disconnects).\n   */\n  signal?: AbortSignal;\n};\n\nexport type Typeahead = {\n  /**\n   * Process a keyboard event. Returns `true` if the event was consumed by\n   * typeahead (a printable character matched or was buffered).\n   */\n  handleKeydown(event: KeyboardEvent): boolean;\n  /** Reset the buffer immediately. Call on list close to clear stale input. */\n  reset(): void;\n};\n\n// ── Implementation ────────────────────────────────────────────────────────────\n\n/**\n * Creates a standalone typeahead handler for keyboard-navigable lists.\n *\n * Accumulates printable keystrokes into a buffer; on each keystroke searches\n * for the first enabled item whose label starts with the buffer. Cycles past\n * the current item on repeated same-character presses. Buffer resets after\n * `delay` ms of inactivity (default 500 — the ARIA APG recommended window).\n *\n * @example\n * ```ts\n * const typeahead = createTypeahead({\n *   getIndex: () => focusedIndex,\n *   getItemLabel: (item) => item.label,\n *   getItems: () => items,\n *   onNavigate: (index) => { focusedIndex = index; },\n * });\n *\n * listEl.addEventListener('keydown', (e) => typeahead.handleKeydown(e));\n * ```\n */\nexport const createTypeahead = <T>(options: TypeaheadOptions<T>): Typeahead => {\n  const delay = options.delay ?? 500;\n  let _buffer = '';\n  let _timer: ReturnType<typeof setTimeout> | null = null;\n\n  const reset = (): void => {\n    _buffer = '';\n\n    if (_timer !== null) {\n      clearTimeout(_timer);\n      _timer = null;\n    }\n  };\n\n  options.signal?.addEventListener('abort', reset, { once: true });\n\n  const handleKeydown = (event: KeyboardEvent): boolean => {\n    // Single printable character only; exclude modifier combos.\n    if (event.key.length !== 1 || event.ctrlKey || event.altKey || event.metaKey) return false;\n\n    _buffer += event.key.toLowerCase();\n\n    if (_timer !== null) clearTimeout(_timer);\n\n    _timer = setTimeout(reset, delay);\n\n    const items = options.getItems();\n    const current = options.getIndex();\n    const startAfter = current >= 0 ? current + 1 : 0;\n\n    for (let n = 0; n < items.length; n++) {\n      const i = (startAfter + n) % items.length;\n\n      if (options.isItemDisabled?.(items[i], i)) continue;\n\n      if (options.getItemLabel(items[i], i).toLowerCase().startsWith(_buffer)) {\n        options.onNavigate(i, event);\n\n        return true;\n      }\n    }\n\n    return false;\n  };\n\n  return { handleKeydown, reset };\n};\n"],"mappings":";AA+DA,IAAa,KAAsB,MAA4C;CAC7E,IAAM,IAAQ,EAAQ,SAAS,KAC3B,IAAU,IACV,IAA+C,MAE7C,UAAoB;EAGxB,AAFA,IAAU,IAEN,MAAW,SACb,aAAa,CAAM,GACnB,IAAS;CAEb;CAiCA,OA/BA,EAAQ,QAAQ,iBAAiB,SAAS,GAAO,EAAE,MAAM,GAAK,CAAC,GA+BxD;EAAE,gBA7Bc,MAAkC;GAEvD,IAAI,EAAM,IAAI,WAAW,KAAK,EAAM,WAAW,EAAM,UAAU,EAAM,SAAS,OAAO;GAMrF,AAJA,KAAW,EAAM,IAAI,YAAY,GAE7B,MAAW,QAAM,aAAa,CAAM,GAExC,IAAS,WAAW,GAAO,CAAK;GAEhC,IAAM,IAAQ,EAAQ,SAAS,GACzB,IAAU,EAAQ,SAAS,GAC3B,IAAa,KAAW,IAAI,IAAU,IAAI;GAEhD,KAAK,IAAI,IAAI,GAAG,IAAI,EAAM,QAAQ,KAAK;IACrC,IAAM,KAAK,IAAa,KAAK,EAAM;IAE/B,OAAQ,iBAAiB,EAAM,IAAI,CAAC,KAEpC,EAAQ,aAAa,EAAM,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,WAAW,CAAO,GAGpE,OAFA,EAAQ,WAAW,GAAG,CAAK,GAEpB;GAEX;GAEA,OAAO;EACT;EAEwB;CAAM;AAChC"}

package/dist/headless.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./headless/ore.cjs"),t=require("./headless/field-base.cjs"),n=require("./headless/signals.cjs"),r=require("./headless/text-field.cjs"),i=require("./headless/choice-field.cjs"),a=require("./headless/keyboard.cjs"),o=require("./headless/checkable.cjs"),s=require("./headless/typeahead.cjs"),c=require("./headless/nav.cjs"),l=require("./headless/overlay.cjs"),u=require("./headless/positioner.cjs"),d=require("./headless/option-list.cjs"),f=require("./headless/paginated-list.cjs"),p=require("./headless/numbers.cjs"),m=require("./headless/spinner.cjs"),h=require("./headless/slider.cjs"),g=require("./headless/swipe.cjs"),_=require("./headless/announcer.cjs"),v=require("./headless/date-picker.cjs"),y=require("./headless/dialog-focus.cjs"),b=require("./headless/light-dom.cjs"),x=require("./headless/selection-control.cjs"),S=require("./headless/sort-control.cjs"),C=require("./headless/datagrid.cjs"),w=require("./headless/parse.cjs");exports.announce=_.announce,exports.createCheckable=o.createCheckable,exports.createChoiceField=i.createChoiceField,exports.createDataGridControl=C.createDataGridControl,exports.createDatePickerControl=v.createDatePickerControl,exports.createDialogFocusControl=y.createDialogFocusControl,exports.createDropdownPositioner=u.createDropdownPositioner,exports.createErrorHelperState=t.createErrorHelperState,exports.createInteraction=a.createInteraction,exports.createListControl=c.createListControl,exports.createOptionList=d.createOptionList,exports.createOverlayControl=l.createOverlayControl,exports.createPaginatedList=f.createPaginatedList,exports.createSelectionControl=x.createSelectionControl,exports.createSliderControl=h.createSliderControl,exports.createSortControl=S.createSortControl,exports.createSpinnerControl=m.createSpinnerControl,exports.createSwipeControl=g.createSwipeControl,exports.createTextField=r.createTextField,exports.createTypeahead=s.createTypeahead,exports.dispatchKeyboardAction=a.dispatchKeyboardAction,exports.formatDisplayDate=v.formatDisplayDate,exports.getChoiceLabel=b.getChoiceLabel,exports.getLightChildrenByTag=b.getLightChildrenByTag,exports.lifecycleSignal=e.lifecycleSignal,exports.parseIso=v.parseIso,exports.parseStringTriggers=w.parseStringTriggers,exports.syncedSignal=n.syncedSignal,exports.toFiniteNumber=p.toFiniteNumber,exports.toFiniteNumberOr=p.toFiniteNumberOr,exports.toIsoString=v.toIsoString,exports.toPositiveStep=p.toPositiveStep;

package/dist/headless.js

@@ -0,0 +1,26 @@
+import { lifecycleSignal as e } from "./headless/ore.js";
+import { createErrorHelperState as t } from "./headless/field-base.js";
+import { syncedSignal as n } from "./headless/signals.js";
+import { createTextField as r } from "./headless/text-field.js";
+import { createChoiceField as i } from "./headless/choice-field.js";
+import { createInteraction as a, dispatchKeyboardAction as o } from "./headless/keyboard.js";
+import { createCheckable as s } from "./headless/checkable.js";
+import { createTypeahead as c } from "./headless/typeahead.js";
+import { createListControl as l } from "./headless/nav.js";
+import { createOverlayControl as u } from "./headless/overlay.js";
+import { createDropdownPositioner as d } from "./headless/positioner.js";
+import { createOptionList as f } from "./headless/option-list.js";
+import { createPaginatedList as p } from "./headless/paginated-list.js";
+import { toFiniteNumber as m, toFiniteNumberOr as h, toPositiveStep as g } from "./headless/numbers.js";
+import { createSpinnerControl as _ } from "./headless/spinner.js";
+import { createSliderControl as v } from "./headless/slider.js";
+import { createSwipeControl as y } from "./headless/swipe.js";
+import { announce as b } from "./headless/announcer.js";
+import { createDatePickerControl as x, formatDisplayDate as S, parseIso as C, toIsoString as w } from "./headless/date-picker.js";
+import { createDialogFocusControl as T } from "./headless/dialog-focus.js";
+import { getChoiceLabel as E, getLightChildrenByTag as D } from "./headless/light-dom.js";
+import { createSelectionControl as O } from "./headless/selection-control.js";
+import { createSortControl as k } from "./headless/sort-control.js";
+import { createDataGridControl as A } from "./headless/datagrid.js";
+import { parseStringTriggers as j } from "./headless/parse.js";
+export { b as announce, s as createCheckable, i as createChoiceField, A as createDataGridControl, x as createDatePickerControl, T as createDialogFocusControl, d as createDropdownPositioner, t as createErrorHelperState, a as createInteraction, l as createListControl, f as createOptionList, u as createOverlayControl, p as createPaginatedList, O as createSelectionControl, v as createSliderControl, k as createSortControl, _ as createSpinnerControl, y as createSwipeControl, r as createTextField, c as createTypeahead, o as dispatchKeyboardAction, S as formatDisplayDate, E as getChoiceLabel, D as getLightChildrenByTag, e as lifecycleSignal, C as parseIso, j as parseStringTriggers, n as syncedSignal, m as toFiniteNumber, h as toFiniteNumberOr, w as toIsoString, g as toPositiveStep };

package/dist/icon.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./_virtual/_rolldown/runtime.cjs"),t=require("./ore/dist/directives/raw.cjs");require("./ore/dist/directives.cjs");const n=require("./_dev.cjs"),r=require("./content/icon/icon.css?inline.cjs");let i=require("@vielzeug/ore"),a=require("@vielzeug/ripple"),o=require("lucide");o=e.__toESM(o,1);var s=16,c=2,l=24,u=new Set([`circle`,`clipPath`,`defs`,`ellipse`,`g`,`line`,`linearGradient`,`mask`,`path`,`polygon`,`polyline`,`radialGradient`,`rect`,`stop`,`symbol`,`use`]),d=/^[a-zA-Z][a-zA-Z0-9:_-]*$/,f=/^(on|xlink:|xml:|href$)/i,p=new Map(Object.entries(o.icons));function m(e){for(let[t,n]of Object.entries(e))p.set(t,n)}var h=e=>Object.entries(e).filter(([e])=>d.test(e)&&!f.test(e)).map(([e,t])=>`${e}="${String(t).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`)}"`).join(` `),g=e=>e.replace(/([a-z0-9])([A-Z])/g,`$1-$2`).split(/[^a-zA-Z0-9]+/).filter(Boolean).map(e=>e.charAt(0).toUpperCase()+e.slice(1).toLowerCase()).join(``),_=e=>{if(e==null||e===``)return s;let t=Number(e);return Number.isFinite(t)&&t>0&&/^\d+(\.\d+)?$/.test(e.trim())?t:e},v=`ore-icon`;(0,i.define)(v,{props:{absoluteStrokeWidth:i.prop.bool(),label:i.prop.string(),name:i.prop.string(),size:{default:s,parse:_,reflect:!1},solid:i.prop.bool(),strokeWidth:i.prop.number(c)},setup(e,{bind:r}){return r({attr:{"aria-hidden":()=>(e.label.value??``).trim()?null:`true`,"aria-label":()=>(e.label.value??``).trim()||null,role:()=>(e.label.value??``).trim()?`img`:null},style:{"--_size-px":()=>{let t=e.size.value;return typeof t==`number`?`${t}px`:String(t)}}}),i.html`${t.raw((0,a.computed)(()=>{let t=(e.name.value??``).trim();if(!t)return``;let r=p.get(t)??p.get(g(t));if(!r)return n.warn(`ore-icon: icon not found: "${String(t).slice(0,64)}"`),``;let i=e.size.value,a=typeof i==`number`?i:l,o=e.absoluteStrokeWidth.value&&!e.solid.value?e.strokeWidth.value*(l/a):e.strokeWidth.value,s=r.filter(([e])=>u.has(e)).map(([e,t])=>{let n={};for(let[e,r]of Object.entries(t))r!==void 0&&(n[e]=r);return`<${e} ${h(n)} />`}).join(``);return`<svg ${h({fill:e.solid.value?`currentColor`:`none`,part:`svg`,stroke:e.solid.value?`none`:`currentColor`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"stroke-width":e.solid.value?0:o,style:`width:100%;height:100%`,viewBox:`0 0 24 24`,xmlns:`http://www.w3.org/2000/svg`})}>${s}</svg>`}))}`},styles:[r.default]}),exports.ICON_TAG=v,exports.registerIcons=m;
+//# sourceMappingURL=icon.cjs.map

package/dist/icon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.cjs","names":[],"sources":["../src/content/icon/icon.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { raw } from '@vielzeug/ore/directives';\nimport { computed } from '@vielzeug/ripple';\nimport * as lucideModule from 'lucide';\n\nimport { warn } from '../../_dev';\nimport styles from './icon.css?inline';\n\nexport type IconNode = Array<[string, Record<string, string | number | undefined>]>;\n\nconst DEFAULT_SIZE = 16;\nconst DEFAULT_STROKE_WIDTH = 2;\nconst LUCIDE_VIEWBOX_SIZE = 24;\n\n/**\n * Allowlisted SVG shape/structure element names. Only these tags are permitted\n * when building the SVG markup from an IconNode, preventing arbitrary element\n * injection (e.g. <script>, event-handler-bearing elements).\n */\nconst ALLOWED_SVG_TAGS = new Set([\n  'circle',\n  'clipPath',\n  'defs',\n  'ellipse',\n  'g',\n  'line',\n  'linearGradient',\n  'mask',\n  'path',\n  'polygon',\n  'polyline',\n  'radialGradient',\n  'rect',\n  'stop',\n  'symbol',\n  'use',\n]);\n\n/**\n * Allowlisted SVG presentation / structural attribute names.\n * Event handler attributes (on*) and \"xlink:href\" are excluded.\n */\nconst ATTR_KEY_RE = /^[a-zA-Z][a-zA-Z0-9:_-]*$/;\nconst BLOCKED_ATTR_RE = /^(on|xlink:|xml:|href$)/i;\n\n// Sync registry seeded from lucide at module load; extend at any time via registerIcons()\nconst registry = new Map<string, IconNode>(\n  Object.entries((lucideModule as unknown as { icons: Record<string, IconNode> }).icons),\n);\n\n/**\n * Register additional icons (or override existing ones) by name.\n * Keys may be kebab-case or PascalCase — both are accepted by `ore-icon`.\n */\nexport function registerIcons(icons: Record<string, IconNode>): void {\n  for (const [name, node] of Object.entries(icons)) {\n    registry.set(name, node);\n  }\n}\n\nconst toAttrString = (attrs: Record<string, string | number>): string =>\n  Object.entries(attrs)\n    .filter(([k]) => ATTR_KEY_RE.test(k) && !BLOCKED_ATTR_RE.test(k))\n    .map(\n      ([k, v]) =>\n        `${k}=\"${String(v).replace(/&/g, '&amp;').replace(/\"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')}\"`,\n    )\n    .join(' ');\n\nconst toPascalCase = (value: string): string =>\n  value\n    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')\n    .split(/[^a-zA-Z0-9]+/)\n    .filter(Boolean)\n    .map((p) => p.charAt(0).toUpperCase() + p.slice(1).toLowerCase())\n    .join('');\n\nconst parseSize = (value: string | null): number | string => {\n  if (value == null || value === '') return DEFAULT_SIZE;\n\n  const n = Number(value);\n\n  return Number.isFinite(n) && n > 0 && /^\\d+(\\.\\d+)?$/.test(value.trim()) ? n : value;\n};\n\n/** Icon component properties */\nexport type OreIconProps = {\n  /** Keep stroke width visually consistent when icon size changes */\n  absoluteStrokeWidth?: boolean;\n  /** Accessible text label. Decorative icons should omit this. */\n  label?: string;\n  /** Lucide icon name, e.g. `search` or `chevron-right` */\n  name?: string;\n  /** Icon width/height in px by default. Accepts CSS lengths. */\n  size?: number | string;\n  /** Render as a filled/solid shape instead of a stroked outline */\n  solid?: boolean;\n  /** SVG stroke width */\n  strokeWidth?: number;\n};\n\n/**\n * Icon wrapper for consistent Lucide rendering across Block.\n *\n * @element ore-icon\n *\n * @attr {string} name - Lucide icon name, e.g. `search` or `chevron-right`\n * @attr {number|string} size - Width/height (default: 16)\n * @attr {number} stroke-width - SVG stroke width (default: 2)\n * @attr {boolean} absolute-stroke-width - Keep stroke width visually stable across icon sizes\n * @attr {boolean} solid - Render as filled shape instead of stroked outline\n * @attr {string} label - Accessible label; when omitted the icon is decorative\n *\n * @csspart svg - Internal SVG element\n *\n * @example\n * ```html\n * <ore-icon name=\"search\"></ore-icon>\n * <ore-icon name=\"chevron-right\" size=\"18\"></ore-icon>\n * <ore-icon name=\"trash-2\" label=\"Delete\"></ore-icon>\n * <ore-icon name=\"star\" solid></ore-icon>\n * ```\n */\nexport const ICON_TAG = 'ore-icon' as const;\ndefine<OreIconProps>(ICON_TAG, {\n  props: {\n    absoluteStrokeWidth: prop.bool(),\n    label: prop.string(),\n    name: prop.string(),\n    size: { default: DEFAULT_SIZE as number | string, parse: parseSize, reflect: false },\n    solid: prop.bool(),\n    strokeWidth: prop.number(DEFAULT_STROKE_WIDTH),\n  },\n  setup(props, { bind }) {\n    bind({\n      attr: {\n        'aria-hidden': () => ((props.label.value ?? '').trim() ? null : 'true'),\n        'aria-label': () => (props.label.value ?? '').trim() || null,\n        role: () => ((props.label.value ?? '').trim() ? 'img' : null),\n      },\n      style: {\n        '--_size-px': () => {\n          const s = props.size.value;\n\n          return typeof s === 'number' ? `${s}px` : String(s);\n        },\n      },\n    });\n\n    const markup = computed(() => {\n      const name = (props.name.value ?? '').trim();\n\n      if (!name) return '';\n\n      const iconNode = registry.get(name) ?? registry.get(toPascalCase(name));\n\n      if (!iconNode) {\n        warn(`ore-icon: icon not found: \"${String(name).slice(0, 64)}\"`);\n\n        return '';\n      }\n\n      const size = props.size.value;\n      const numericSize = typeof size === 'number' ? size : LUCIDE_VIEWBOX_SIZE;\n\n      const strokeWidth =\n        props.absoluteStrokeWidth.value && !props.solid.value\n          ? props.strokeWidth.value! * (LUCIDE_VIEWBOX_SIZE / numericSize)\n          : props.strokeWidth.value!;\n\n      const nodes = iconNode\n        .filter(([tag]) => ALLOWED_SVG_TAGS.has(tag))\n        .map(([tag, tagAttrs]) => {\n          const attrs: Record<string, string | number> = {};\n\n          for (const [k, v] of Object.entries(tagAttrs)) {\n            if (v !== undefined) attrs[k] = v;\n          }\n\n          return `<${tag} ${toAttrString(attrs)} />`;\n        })\n        .join('');\n\n      const svgAttrs = toAttrString({\n        fill: props.solid.value ? 'currentColor' : 'none',\n        part: 'svg',\n        stroke: props.solid.value ? 'none' : 'currentColor',\n        'stroke-linecap': 'round',\n        'stroke-linejoin': 'round',\n        'stroke-width': props.solid.value ? 0 : strokeWidth,\n        style: `width:100%;height:100%`,\n        viewBox: '0 0 24 24',\n        xmlns: 'http://www.w3.org/2000/svg',\n      });\n\n      return `<svg ${svgAttrs}>${nodes}</svg>`;\n    });\n\n    return html`${raw(markup)}`;\n  },\n  styles: [styles],\n});\n"],"mappings":"uXAUA,IAAM,EAAe,GACf,EAAuB,EACvB,EAAsB,GAOtB,EAAmB,IAAI,IAAI,CAC/B,SACA,WACA,OACA,UACA,IACA,OACA,iBACA,OACA,OACA,UACA,WACA,iBACA,OACA,OACA,SACA,KACF,CAAC,EAMK,EAAc,4BACd,EAAkB,2BAGlB,EAAW,IAAI,IACnB,OAAO,QAAS,EAAgE,KAAK,CACvF,EAMA,SAAgB,EAAc,EAAuC,CACnE,IAAK,GAAM,CAAC,EAAM,KAAS,OAAO,QAAQ,CAAK,EAC7C,EAAS,IAAI,EAAM,CAAI,CAE3B,CAEA,IAAM,EAAgB,GACpB,OAAO,QAAQ,CAAK,CAAC,CAClB,QAAQ,CAAC,KAAO,EAAY,KAAK,CAAC,GAAK,CAAC,EAAgB,KAAK,CAAC,CAAC,CAAC,CAChE,KACE,CAAC,EAAG,KACH,GAAG,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,QAAQ,KAAM,OAAO,CAAC,CAAC,QAAQ,KAAM,QAAQ,CAAC,CAAC,QAAQ,KAAM,MAAM,CAAC,CAAC,QAAQ,KAAM,MAAM,EAAE,EAClH,CAAC,CACA,KAAK,GAAG,EAEP,EAAgB,GACpB,EACG,QAAQ,qBAAsB,OAAO,CAAC,CACtC,MAAM,eAAe,CAAC,CACtB,OAAO,OAAO,CAAC,CACf,IAAK,GAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,EAAI,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAChE,KAAK,EAAE,EAEN,EAAa,GAA0C,CAC3D,GAAI,GAAS,MAAQ,IAAU,GAAI,OAAO,EAE1C,IAAM,EAAI,OAAO,CAAK,EAEtB,OAAO,OAAO,SAAS,CAAC,GAAK,EAAI,GAAK,gBAAgB,KAAK,EAAM,KAAK,CAAC,EAAI,EAAI,CACjF,EAwCa,EAAW,wBACH,EAAU,CAC7B,MAAO,CACL,oBAAqB,EAAA,KAAK,KAAK,EAC/B,MAAO,EAAA,KAAK,OAAO,EACnB,KAAM,EAAA,KAAK,OAAO,EAClB,KAAM,CAAE,QAAS,EAAiC,MAAO,EAAW,QAAS,EAAM,EACnF,MAAO,EAAA,KAAK,KAAK,EACjB,YAAa,EAAA,KAAK,OAAO,CAAoB,CAC/C,EACA,MAAM,EAAO,CAAE,QAAQ,CAiErB,OAhEA,EAAK,CACH,KAAM,CACJ,mBAAuB,EAAM,MAAM,OAAS,GAAA,CAAI,KAAK,EAAI,KAAO,OAChE,kBAAqB,EAAM,MAAM,OAAS,GAAA,CAAI,KAAK,GAAK,KACxD,UAAc,EAAM,MAAM,OAAS,GAAA,CAAI,KAAK,EAAI,MAAQ,IAC1D,EACA,MAAO,CACL,iBAAoB,CAClB,IAAM,EAAI,EAAM,KAAK,MAErB,OAAO,OAAO,GAAM,SAAW,GAAG,EAAE,IAAM,OAAO,CAAC,CACpD,CACF,CACF,CAAC,EAmDM,EAAA,IAAI,GAAG,EAAA,KAAA,EAAA,EAAA,SAAA,KAjDgB,CAC5B,IAAM,GAAQ,EAAM,KAAK,OAAS,GAAA,CAAI,KAAK,EAE3C,GAAI,CAAC,EAAM,MAAO,GAElB,IAAM,EAAW,EAAS,IAAI,CAAI,GAAK,EAAS,IAAI,EAAa,CAAI,CAAC,EAEtE,GAAI,CAAC,EAGH,OAFA,EAAA,KAAK,8BAA8B,OAAO,CAAI,CAAC,CAAC,MAAM,EAAG,EAAE,EAAE,EAAE,EAExD,GAGT,IAAM,EAAO,EAAM,KAAK,MAClB,EAAc,OAAO,GAAS,SAAW,EAAO,EAEhD,EACJ,EAAM,oBAAoB,OAAS,CAAC,EAAM,MAAM,MAC5C,EAAM,YAAY,OAAU,EAAsB,GAClD,EAAM,YAAY,MAElB,EAAQ,EACX,QAAQ,CAAC,KAAS,EAAiB,IAAI,CAAG,CAAC,CAAC,CAC5C,KAAK,CAAC,EAAK,KAAc,CACxB,IAAM,EAAyC,CAAC,EAEhD,IAAK,GAAM,CAAC,EAAG,KAAM,OAAO,QAAQ,CAAQ,EACtC,IAAM,IAAA,KAAW,EAAM,GAAK,GAGlC,MAAO,IAAI,EAAI,GAAG,EAAa,CAAK,EAAE,IACxC,CAAC,CAAC,CACD,KAAK,EAAE,EAcV,MAAO,QAZU,EAAa,CAC5B,KAAM,EAAM,MAAM,MAAQ,eAAiB,OAC3C,KAAM,MACN,OAAQ,EAAM,MAAM,MAAQ,OAAS,eACrC,iBAAkB,QAClB,kBAAmB,QACnB,eAAgB,EAAM,MAAM,MAAQ,EAAI,EACxC,MAAO,yBACP,QAAS,YACT,MAAO,4BACT,CAEe,EAAS,GAAG,EAAM,OACnC,CAEkB,CAAM,GAC1B,EACA,OAAQ,CAAC,EAAA,OAAM,CACjB,CAAC"}

package/dist/icon.js

@@ -0,0 +1,87 @@
+import { raw as e } from "./ore/dist/directives/raw.js";
+import "./ore/dist/directives.js";
+import { warn as t } from "./_dev.js";
+import n from "./content/icon/icon.css?inline.js";
+import { define as r, html as i, prop as a } from "@vielzeug/ore";
+import { computed as o } from "@vielzeug/ripple";
+import * as s from "lucide";
+//#region src/content/icon/icon.ts
+var c = 16, l = 2, u = 24, d = /* @__PURE__ */ new Set([
+	"circle",
+	"clipPath",
+	"defs",
+	"ellipse",
+	"g",
+	"line",
+	"linearGradient",
+	"mask",
+	"path",
+	"polygon",
+	"polyline",
+	"radialGradient",
+	"rect",
+	"stop",
+	"symbol",
+	"use"
+]), f = /^[a-zA-Z][a-zA-Z0-9:_-]*$/, p = /^(on|xlink:|xml:|href$)/i, m = new Map(Object.entries(s.icons));
+function h(e) {
+	for (let [t, n] of Object.entries(e)) m.set(t, n);
+}
+var g = (e) => Object.entries(e).filter(([e]) => f.test(e) && !p.test(e)).map(([e, t]) => `${e}="${String(t).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;")}"`).join(" "), _ = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").split(/[^a-zA-Z0-9]+/).filter(Boolean).map((e) => e.charAt(0).toUpperCase() + e.slice(1).toLowerCase()).join(""), v = (e) => {
+	if (e == null || e === "") return c;
+	let t = Number(e);
+	return Number.isFinite(t) && t > 0 && /^\d+(\.\d+)?$/.test(e.trim()) ? t : e;
+}, y = "ore-icon";
+r(y, {
+	props: {
+		absoluteStrokeWidth: a.bool(),
+		label: a.string(),
+		name: a.string(),
+		size: {
+			default: c,
+			parse: v,
+			reflect: !1
+		},
+		solid: a.bool(),
+		strokeWidth: a.number(l)
+	},
+	setup(n, { bind: r }) {
+		return r({
+			attr: {
+				"aria-hidden": () => (n.label.value ?? "").trim() ? null : "true",
+				"aria-label": () => (n.label.value ?? "").trim() || null,
+				role: () => (n.label.value ?? "").trim() ? "img" : null
+			},
+			style: { "--_size-px": () => {
+				let e = n.size.value;
+				return typeof e == "number" ? `${e}px` : String(e);
+			} }
+		}), i`${e(o(() => {
+			let e = (n.name.value ?? "").trim();
+			if (!e) return "";
+			let r = m.get(e) ?? m.get(_(e));
+			if (!r) return t(`ore-icon: icon not found: "${String(e).slice(0, 64)}"`), "";
+			let i = n.size.value, a = typeof i == "number" ? i : u, o = n.absoluteStrokeWidth.value && !n.solid.value ? n.strokeWidth.value * (u / a) : n.strokeWidth.value, s = r.filter(([e]) => d.has(e)).map(([e, t]) => {
+				let n = {};
+				for (let [e, r] of Object.entries(t)) r !== void 0 && (n[e] = r);
+				return `<${e} ${g(n)} />`;
+			}).join("");
+			return `<svg ${g({
+				fill: n.solid.value ? "currentColor" : "none",
+				part: "svg",
+				stroke: n.solid.value ? "none" : "currentColor",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round",
+				"stroke-width": n.solid.value ? 0 : o,
+				style: "width:100%;height:100%",
+				viewBox: "0 0 24 24",
+				xmlns: "http://www.w3.org/2000/svg"
+			})}>${s}</svg>`;
+		}))}`;
+	},
+	styles: [n]
+});
+//#endregion
+export { y as ICON_TAG, h as registerIcons };
+
+//# sourceMappingURL=icon.js.map

package/dist/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","names":[],"sources":["../src/content/icon/icon.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { raw } from '@vielzeug/ore/directives';\nimport { computed } from '@vielzeug/ripple';\nimport * as lucideModule from 'lucide';\n\nimport { warn } from '../../_dev';\nimport styles from './icon.css?inline';\n\nexport type IconNode = Array<[string, Record<string, string | number | undefined>]>;\n\nconst DEFAULT_SIZE = 16;\nconst DEFAULT_STROKE_WIDTH = 2;\nconst LUCIDE_VIEWBOX_SIZE = 24;\n\n/**\n * Allowlisted SVG shape/structure element names. Only these tags are permitted\n * when building the SVG markup from an IconNode, preventing arbitrary element\n * injection (e.g. <script>, event-handler-bearing elements).\n */\nconst ALLOWED_SVG_TAGS = new Set([\n  'circle',\n  'clipPath',\n  'defs',\n  'ellipse',\n  'g',\n  'line',\n  'linearGradient',\n  'mask',\n  'path',\n  'polygon',\n  'polyline',\n  'radialGradient',\n  'rect',\n  'stop',\n  'symbol',\n  'use',\n]);\n\n/**\n * Allowlisted SVG presentation / structural attribute names.\n * Event handler attributes (on*) and \"xlink:href\" are excluded.\n */\nconst ATTR_KEY_RE = /^[a-zA-Z][a-zA-Z0-9:_-]*$/;\nconst BLOCKED_ATTR_RE = /^(on|xlink:|xml:|href$)/i;\n\n// Sync registry seeded from lucide at module load; extend at any time via registerIcons()\nconst registry = new Map<string, IconNode>(\n  Object.entries((lucideModule as unknown as { icons: Record<string, IconNode> }).icons),\n);\n\n/**\n * Register additional icons (or override existing ones) by name.\n * Keys may be kebab-case or PascalCase — both are accepted by `ore-icon`.\n */\nexport function registerIcons(icons: Record<string, IconNode>): void {\n  for (const [name, node] of Object.entries(icons)) {\n    registry.set(name, node);\n  }\n}\n\nconst toAttrString = (attrs: Record<string, string | number>): string =>\n  Object.entries(attrs)\n    .filter(([k]) => ATTR_KEY_RE.test(k) && !BLOCKED_ATTR_RE.test(k))\n    .map(\n      ([k, v]) =>\n        `${k}=\"${String(v).replace(/&/g, '&amp;').replace(/\"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')}\"`,\n    )\n    .join(' ');\n\nconst toPascalCase = (value: string): string =>\n  value\n    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')\n    .split(/[^a-zA-Z0-9]+/)\n    .filter(Boolean)\n    .map((p) => p.charAt(0).toUpperCase() + p.slice(1).toLowerCase())\n    .join('');\n\nconst parseSize = (value: string | null): number | string => {\n  if (value == null || value === '') return DEFAULT_SIZE;\n\n  const n = Number(value);\n\n  return Number.isFinite(n) && n > 0 && /^\\d+(\\.\\d+)?$/.test(value.trim()) ? n : value;\n};\n\n/** Icon component properties */\nexport type OreIconProps = {\n  /** Keep stroke width visually consistent when icon size changes */\n  absoluteStrokeWidth?: boolean;\n  /** Accessible text label. Decorative icons should omit this. */\n  label?: string;\n  /** Lucide icon name, e.g. `search` or `chevron-right` */\n  name?: string;\n  /** Icon width/height in px by default. Accepts CSS lengths. */\n  size?: number | string;\n  /** Render as a filled/solid shape instead of a stroked outline */\n  solid?: boolean;\n  /** SVG stroke width */\n  strokeWidth?: number;\n};\n\n/**\n * Icon wrapper for consistent Lucide rendering across Block.\n *\n * @element ore-icon\n *\n * @attr {string} name - Lucide icon name, e.g. `search` or `chevron-right`\n * @attr {number|string} size - Width/height (default: 16)\n * @attr {number} stroke-width - SVG stroke width (default: 2)\n * @attr {boolean} absolute-stroke-width - Keep stroke width visually stable across icon sizes\n * @attr {boolean} solid - Render as filled shape instead of stroked outline\n * @attr {string} label - Accessible label; when omitted the icon is decorative\n *\n * @csspart svg - Internal SVG element\n *\n * @example\n * ```html\n * <ore-icon name=\"search\"></ore-icon>\n * <ore-icon name=\"chevron-right\" size=\"18\"></ore-icon>\n * <ore-icon name=\"trash-2\" label=\"Delete\"></ore-icon>\n * <ore-icon name=\"star\" solid></ore-icon>\n * ```\n */\nexport const ICON_TAG = 'ore-icon' as const;\ndefine<OreIconProps>(ICON_TAG, {\n  props: {\n    absoluteStrokeWidth: prop.bool(),\n    label: prop.string(),\n    name: prop.string(),\n    size: { default: DEFAULT_SIZE as number | string, parse: parseSize, reflect: false },\n    solid: prop.bool(),\n    strokeWidth: prop.number(DEFAULT_STROKE_WIDTH),\n  },\n  setup(props, { bind }) {\n    bind({\n      attr: {\n        'aria-hidden': () => ((props.label.value ?? '').trim() ? null : 'true'),\n        'aria-label': () => (props.label.value ?? '').trim() || null,\n        role: () => ((props.label.value ?? '').trim() ? 'img' : null),\n      },\n      style: {\n        '--_size-px': () => {\n          const s = props.size.value;\n\n          return typeof s === 'number' ? `${s}px` : String(s);\n        },\n      },\n    });\n\n    const markup = computed(() => {\n      const name = (props.name.value ?? '').trim();\n\n      if (!name) return '';\n\n      const iconNode = registry.get(name) ?? registry.get(toPascalCase(name));\n\n      if (!iconNode) {\n        warn(`ore-icon: icon not found: \"${String(name).slice(0, 64)}\"`);\n\n        return '';\n      }\n\n      const size = props.size.value;\n      const numericSize = typeof size === 'number' ? size : LUCIDE_VIEWBOX_SIZE;\n\n      const strokeWidth =\n        props.absoluteStrokeWidth.value && !props.solid.value\n          ? props.strokeWidth.value! * (LUCIDE_VIEWBOX_SIZE / numericSize)\n          : props.strokeWidth.value!;\n\n      const nodes = iconNode\n        .filter(([tag]) => ALLOWED_SVG_TAGS.has(tag))\n        .map(([tag, tagAttrs]) => {\n          const attrs: Record<string, string | number> = {};\n\n          for (const [k, v] of Object.entries(tagAttrs)) {\n            if (v !== undefined) attrs[k] = v;\n          }\n\n          return `<${tag} ${toAttrString(attrs)} />`;\n        })\n        .join('');\n\n      const svgAttrs = toAttrString({\n        fill: props.solid.value ? 'currentColor' : 'none',\n        part: 'svg',\n        stroke: props.solid.value ? 'none' : 'currentColor',\n        'stroke-linecap': 'round',\n        'stroke-linejoin': 'round',\n        'stroke-width': props.solid.value ? 0 : strokeWidth,\n        style: `width:100%;height:100%`,\n        viewBox: '0 0 24 24',\n        xmlns: 'http://www.w3.org/2000/svg',\n      });\n\n      return `<svg ${svgAttrs}>${nodes}</svg>`;\n    });\n\n    return html`${raw(markup)}`;\n  },\n  styles: [styles],\n});\n"],"mappings":"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"}

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./code-window.cjs"),t=require("./icon.cjs"),n=require("./copy-command.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./shared/size-presets.cjs"),a=require("./progress.cjs"),o=require("./errors.cjs"),s=require("./content/carousel/carousel-slide.cjs"),c=require("./carousel.cjs"),l=require("./avatar.cjs"),u=require("./breadcrumb.cjs"),d=require("./card.cjs"),f=require("./button-group.cjs"),p=require("./inputs/shared/form-context.cjs"),ee=require("./button.cjs"),te=require("./pagination.cjs"),m=require("./separator.cjs"),h=require("./table.cjs"),g=require("./text.cjs"),_=require("./accordion.cjs"),v=require("./tabs.cjs"),y=require("./accordion-item.cjs"),b=require("./tab-item.cjs"),x=require("./tab-panel.cjs"),S=require("./async.cjs"),C=require("./alert.cjs"),w=require("./badge.cjs"),T=require("./chip.cjs"),E=require("./password-strength.cjs"),D=require("./skeleton.cjs"),O=require("./toast.cjs"),k=require("./checkbox-group.cjs"),A=require("./checkbox.cjs"),j=require("./input.cjs"),M=require("./combobox.cjs"),N=require("./select.cjs"),ne=require("./popover.cjs"),P=require("./datagrid.cjs"),F=require("./calendar.cjs"),I=require("./date-picker.cjs"),L=require("./file-input.cjs"),R=require("./form.cjs"),z=require("./number-input.cjs"),B=require("./otp-input.cjs"),V=require("./radio-group.cjs"),H=require("./radio.cjs"),U=require("./rating.cjs"),W=require("./slider.cjs"),G=require("./switch.cjs"),K=require("./textarea.cjs"),q=require("./time-picker.cjs"),J=require("./box.cjs"),Y=require("./grid-item.cjs"),X=require("./grid.cjs"),Z=require("./navbar.cjs"),Q=require("./sidebar.cjs"),re=require("./dialog.cjs"),ie=require("./drawer.cjs"),$=require("./menu.cjs"),ae=require("./tooltip.cjs");exports.ACCORDION_CTX=_.ACCORDION_CTX,exports.ACCORDION_ITEM_TAG=y.ACCORDION_ITEM_TAG,exports.ACCORDION_TAG=_.ACCORDION_TAG,exports.ALERT_TAG=C.ALERT_TAG,exports.ASYNC_TAG=S.ASYNC_TAG,exports.AVATAR_GROUP_TAG=l.AVATAR_GROUP_TAG,exports.AVATAR_TAG=l.AVATAR_TAG,exports.BADGE_TAG=w.BADGE_TAG,exports.BOX_TAG=J.BOX_TAG,exports.BREADCRUMB_ITEM_TAG=u.BREADCRUMB_ITEM_TAG,exports.BREADCRUMB_TAG=u.BREADCRUMB_TAG,exports.BUTTON_GROUP_CTX=f.BUTTON_GROUP_CTX,exports.BUTTON_GROUP_TAG=f.BUTTON_GROUP_TAG,exports.BUTTON_TAG=ee.BUTTON_TAG,exports.CALENDAR_TAG=F.CALENDAR_TAG,exports.CARD_TAG=d.CARD_TAG,exports.CAROUSEL_SLIDE_TAG=s.CAROUSEL_SLIDE_TAG,exports.CAROUSEL_TAG=c.CAROUSEL_TAG,exports.CHECKBOX_GROUP_CTX=k.CHECKBOX_GROUP_CTX,exports.CHECKBOX_GROUP_TAG=k.CHECKBOX_GROUP_TAG,exports.CHECKBOX_TAG=A.CHECKBOX_TAG,exports.CHIP_TAG=T.CHIP_TAG,exports.CODE_WINDOW_TAG=e.CODE_WINDOW_TAG,exports.COMBOBOX_TAG=M.COMBOBOX_TAG,exports.CONTROL_SIZE_PRESET=i.CONTROL_SIZE_PRESET,exports.COPY_COMMAND_TAG=n.COPY_COMMAND_TAG,exports.DATAGRID_TAG=P.DATAGRID_TAG,exports.DATE_PICKER_TAG=I.DATE_PICKER_TAG,exports.DIALOG_TAG=re.DIALOG_TAG,exports.DRAWER_TAG=ie.DRAWER_TAG,exports.FIELD_SIZE_PRESET=i.FIELD_SIZE_PRESET,exports.FILE_INPUT_SIZE_PRESET=i.FILE_INPUT_SIZE_PRESET,exports.FILE_INPUT_TAG=L.FILE_INPUT_TAG,exports.FORM_CTX=p.FORM_CTX,exports.FORM_TAG=R.FORM_TAG,exports.GRID_ITEM_TAG=Y.GRID_ITEM_TAG,exports.GRID_TAG=X.GRID_TAG,exports.ICON_TAG=t.ICON_TAG,exports.INPUT_TAG=j.INPUT_TAG,exports.MENU_ITEM_TAG=$.MENU_ITEM_TAG,exports.MENU_TAG=$.MENU_TAG,exports.NAVBAR_CTX=Z.NAVBAR_CTX,exports.NAVBAR_ITEM_TAG=Z.NAVBAR_ITEM_TAG,exports.NAVBAR_TAG=Z.NAVBAR_TAG,exports.NUMBER_INPUT_TAG=z.NUMBER_INPUT_TAG,exports.OTP_INPUT_TAG=B.OTP_INPUT_TAG,exports.PAGINATION_TAG=te.PAGINATION_TAG,exports.PASSWORD_STRENGTH_TAG=E.PASSWORD_STRENGTH_TAG,exports.POPOVER_TAG=ne.POPOVER_TAG,exports.PROGRESS_TAG=a.PROGRESS_TAG,exports.RADIO_GROUP_CTX=V.RADIO_GROUP_CTX,exports.RADIO_GROUP_TAG=V.RADIO_GROUP_TAG,exports.RADIO_TAG=H.RADIO_TAG,exports.RATING_TAG=U.RATING_TAG,exports.RefineConfigError=o.RefineConfigError,exports.RefineError=o.RefineError,exports.SELECT_TAG=N.SELECT_TAG,exports.SEPARATOR_TAG=m.SEPARATOR_TAG,exports.SIDEBAR_CTX=Q.SIDEBAR_CTX,exports.SIDEBAR_GROUP_TAG=Q.SIDEBAR_GROUP_TAG,exports.SIDEBAR_ITEM_TAG=Q.SIDEBAR_ITEM_TAG,exports.SIDEBAR_TAG=Q.SIDEBAR_TAG,exports.SKELETON_TAG=D.SKELETON_TAG,exports.SLIDER_SIZE_PRESET=i.SLIDER_SIZE_PRESET,exports.SLIDER_TAG=W.SLIDER_TAG,exports.SWITCH_SIZE_PRESET=i.SWITCH_SIZE_PRESET,exports.SWITCH_TAG=G.SWITCH_TAG,exports.TABLE_TAG=h.TABLE_TAG,exports.TABS_CTX=v.TABS_CTX,exports.TABS_TAG=v.TABS_TAG,exports.TAB_ITEM_TAG=b.TAB_ITEM_TAG,exports.TAB_PANEL_TAG=x.TAB_PANEL_TAG,exports.TEXTAREA_SIZE_PRESET=i.TEXTAREA_SIZE_PRESET,exports.TEXTAREA_TAG=K.TEXTAREA_TAG,exports.TEXT_TAG=g.TEXT_TAG,exports.TIME_PICKER_TAG=q.TIME_PICKER_TAG,exports.TOAST_TAG=O.TOAST_TAG,exports.TOOLTIP_TAG=ae.TOOLTIP_TAG,exports.commonProps=r.commonProps,exports.createToastService=O.createToastService,exports.disablableBundle=r.disablableBundle,exports.elevatableBundle=r.elevatableBundle,exports.loadableBundle=r.loadableBundle,exports.registerIcons=t.registerIcons,exports.roundableBundle=r.roundableBundle,exports.sizableBundle=r.sizableBundle,exports.themableBundle=r.themableBundle,exports.toast=O.toast;

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export * from './content';
+export * from './disclosure';
+export * from './errors';
+export * from './feedback';
+export * from './inputs';
+export * from './layout';
+export * from './overlay';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,61 @@
+import { CODE_WINDOW_TAG as e } from "./code-window.js";
+import { ICON_TAG as t, registerIcons as n } from "./icon.js";
+import { COPY_COMMAND_TAG as r } from "./copy-command.js";
+import { commonProps as i, disablableBundle as a, elevatableBundle as o, loadableBundle as s, roundableBundle as c, sizableBundle as l, themableBundle as u } from "./shared/prop-bundles.js";
+import { CONTROL_SIZE_PRESET as d, FIELD_SIZE_PRESET as f, FILE_INPUT_SIZE_PRESET as p, SLIDER_SIZE_PRESET as m, SWITCH_SIZE_PRESET as h, TEXTAREA_SIZE_PRESET as g } from "./shared/size-presets.js";
+import { PROGRESS_TAG as _ } from "./progress.js";
+import { RefineConfigError as v, RefineError as y } from "./errors.js";
+import { CAROUSEL_SLIDE_TAG as b } from "./content/carousel/carousel-slide.js";
+import { CAROUSEL_TAG as x } from "./carousel.js";
+import { AVATAR_GROUP_TAG as S, AVATAR_TAG as C } from "./avatar.js";
+import { BREADCRUMB_ITEM_TAG as w, BREADCRUMB_TAG as T } from "./breadcrumb.js";
+import { CARD_TAG as E } from "./card.js";
+import { BUTTON_GROUP_CTX as D, BUTTON_GROUP_TAG as O } from "./button-group.js";
+import { FORM_CTX as k } from "./inputs/shared/form-context.js";
+import { BUTTON_TAG as A } from "./button.js";
+import { PAGINATION_TAG as j } from "./pagination.js";
+import { SEPARATOR_TAG as M } from "./separator.js";
+import { TABLE_TAG as N } from "./table.js";
+import { TEXT_TAG as P } from "./text.js";
+import { ACCORDION_CTX as F, ACCORDION_TAG as I } from "./accordion.js";
+import { TABS_CTX as L, TABS_TAG as R } from "./tabs.js";
+import { ACCORDION_ITEM_TAG as z } from "./accordion-item.js";
+import { TAB_ITEM_TAG as B } from "./tab-item.js";
+import { TAB_PANEL_TAG as V } from "./tab-panel.js";
+import { ASYNC_TAG as H } from "./async.js";
+import { ALERT_TAG as U } from "./alert.js";
+import { BADGE_TAG as W } from "./badge.js";
+import { CHIP_TAG as G } from "./chip.js";
+import { PASSWORD_STRENGTH_TAG as K } from "./password-strength.js";
+import { SKELETON_TAG as q } from "./skeleton.js";
+import { TOAST_TAG as J, createToastService as Y, toast as X } from "./toast.js";
+import { CHECKBOX_GROUP_CTX as Z, CHECKBOX_GROUP_TAG as Q } from "./checkbox-group.js";
+import { CHECKBOX_TAG as $ } from "./checkbox.js";
+import { INPUT_TAG as ee } from "./input.js";
+import { COMBOBOX_TAG as te } from "./combobox.js";
+import { SELECT_TAG as ne } from "./select.js";
+import { POPOVER_TAG as re } from "./popover.js";
+import { DATAGRID_TAG as ie } from "./datagrid.js";
+import { CALENDAR_TAG as ae } from "./calendar.js";
+import { DATE_PICKER_TAG as oe } from "./date-picker.js";
+import { FILE_INPUT_TAG as se } from "./file-input.js";
+import { FORM_TAG as ce } from "./form.js";
+import { NUMBER_INPUT_TAG as le } from "./number-input.js";
+import { OTP_INPUT_TAG as ue } from "./otp-input.js";
+import { RADIO_GROUP_CTX as de, RADIO_GROUP_TAG as fe } from "./radio-group.js";
+import { RADIO_TAG as pe } from "./radio.js";
+import { RATING_TAG as me } from "./rating.js";
+import { SLIDER_TAG as he } from "./slider.js";
+import { SWITCH_TAG as ge } from "./switch.js";
+import { TEXTAREA_TAG as _e } from "./textarea.js";
+import { TIME_PICKER_TAG as ve } from "./time-picker.js";
+import { BOX_TAG as ye } from "./box.js";
+import { GRID_ITEM_TAG as be } from "./grid-item.js";
+import { GRID_TAG as xe } from "./grid.js";
+import { NAVBAR_CTX as Se, NAVBAR_ITEM_TAG as Ce, NAVBAR_TAG as we } from "./navbar.js";
+import { SIDEBAR_CTX as Te, SIDEBAR_GROUP_TAG as Ee, SIDEBAR_ITEM_TAG as De, SIDEBAR_TAG as Oe } from "./sidebar.js";
+import { DIALOG_TAG as ke } from "./dialog.js";
+import { DRAWER_TAG as Ae } from "./drawer.js";
+import { MENU_ITEM_TAG as je, MENU_TAG as Me } from "./menu.js";
+import { TOOLTIP_TAG as Ne } from "./tooltip.js";
+export { F as ACCORDION_CTX, z as ACCORDION_ITEM_TAG, I as ACCORDION_TAG, U as ALERT_TAG, H as ASYNC_TAG, S as AVATAR_GROUP_TAG, C as AVATAR_TAG, W as BADGE_TAG, ye as BOX_TAG, w as BREADCRUMB_ITEM_TAG, T as BREADCRUMB_TAG, D as BUTTON_GROUP_CTX, O as BUTTON_GROUP_TAG, A as BUTTON_TAG, ae as CALENDAR_TAG, E as CARD_TAG, b as CAROUSEL_SLIDE_TAG, x as CAROUSEL_TAG, Z as CHECKBOX_GROUP_CTX, Q as CHECKBOX_GROUP_TAG, $ as CHECKBOX_TAG, G as CHIP_TAG, e as CODE_WINDOW_TAG, te as COMBOBOX_TAG, d as CONTROL_SIZE_PRESET, r as COPY_COMMAND_TAG, ie as DATAGRID_TAG, oe as DATE_PICKER_TAG, ke as DIALOG_TAG, Ae as DRAWER_TAG, f as FIELD_SIZE_PRESET, p as FILE_INPUT_SIZE_PRESET, se as FILE_INPUT_TAG, k as FORM_CTX, ce as FORM_TAG, be as GRID_ITEM_TAG, xe as GRID_TAG, t as ICON_TAG, ee as INPUT_TAG, je as MENU_ITEM_TAG, Me as MENU_TAG, Se as NAVBAR_CTX, Ce as NAVBAR_ITEM_TAG, we as NAVBAR_TAG, le as NUMBER_INPUT_TAG, ue as OTP_INPUT_TAG, j as PAGINATION_TAG, K as PASSWORD_STRENGTH_TAG, re as POPOVER_TAG, _ as PROGRESS_TAG, de as RADIO_GROUP_CTX, fe as RADIO_GROUP_TAG, pe as RADIO_TAG, me as RATING_TAG, v as RefineConfigError, y as RefineError, ne as SELECT_TAG, M as SEPARATOR_TAG, Te as SIDEBAR_CTX, Ee as SIDEBAR_GROUP_TAG, De as SIDEBAR_ITEM_TAG, Oe as SIDEBAR_TAG, q as SKELETON_TAG, m as SLIDER_SIZE_PRESET, he as SLIDER_TAG, h as SWITCH_SIZE_PRESET, ge as SWITCH_TAG, N as TABLE_TAG, L as TABS_CTX, R as TABS_TAG, B as TAB_ITEM_TAG, V as TAB_PANEL_TAG, g as TEXTAREA_SIZE_PRESET, _e as TEXTAREA_TAG, P as TEXT_TAG, ve as TIME_PICKER_TAG, J as TOAST_TAG, Ne as TOOLTIP_TAG, i as commonProps, Y as createToastService, a as disablableBundle, o as elevatableBundle, s as loadableBundle, n as registerIcons, c as roundableBundle, l as sizableBundle, u as themableBundle, X as toast };

package/dist/input.cjs

@@ -0,0 +1,67 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ore/dist/directives/live.cjs");require("./ore/dist/directives.cjs");const t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./styles/index.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./shared/size-presets.cjs"),o=require("./headless/ore.cjs"),s=require("./headless/text-field.cjs"),c=require("./inputs/shared/form-context.cjs"),l=require("./inputs/input/input.css?inline.cjs");let u=require("@vielzeug/ore"),d=require("@vielzeug/ripple");var f=[`text`,`email`,`password`,`search`,`url`,`tel`,`number`,`date`,`time`,`datetime-local`,`month`,`week`],p=`ore-input`;(0,u.define)(p,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,...i.roundableBundle,autocomplete:u.prop.string(),clearable:u.prop.bool(!1),error:u.prop.string(),fullwidth:u.prop.bool(!1),helper:u.prop.string(),inputmode:u.prop.string(),label:u.prop.string(),"label-placement":u.prop.oneOf([`inset`,`outside`],`inset`),maxlength:u.prop.json(void 0),minlength:u.prop.json(void 0),name:u.prop.string(),pattern:u.prop.string(),placeholder:u.prop.string(),readonly:u.prop.bool(!1),ref:u.prop.json(void 0),required:u.prop.bool(!1),type:u.prop.oneOf(f,`text`),value:u.prop.string(),variant:u.prop.string()},setup(t,{bind:n,emit:r,onCleanup:i,onElement:a,slots:l}){let f=(0,u.inject)(c.FORM_CTX),p=c.useFormContext(n,t,f),m=(0,d.signal)(!1),h=(0,u.ref)(),g=(0,d.computed)(()=>!!t.label.value||l.has(`label`).value),_=o.lifecycleSignal(i),v=null,y=s.createTextField({disabled:p.disabled,error:t.error,getFormField:()=>v,hasLabel:g,helper:t.helper,label:t.label,labelPlacement:t[`label-placement`],maxLength:t.maxlength,onChange:(e,t)=>{r(`change`,{originalEvent:e,value:t})},onInput:(e,t)=>{r(`input`,{originalEvent:e,value:t})},prefix:`input`,signal:_,validateOn:f?.validateOn,value:t.value});v=(0,u.useField)({disabled:y.disabled,toFormValue:e=>e,value:y.value});let{ariaDescribedBy:b,ariaErrorMessage:x,ariaInvalid:S,ariaLabelledBy:C,assistiveId:w,clear:T,counter:E,errorId:D,errorText:O,fieldId:k,helperText:A,labelId:j,labelVisible:M,value:N,wire:P}=y;return a(h,e=>{P(e,_),t.ref.value?.(e);let n=(0,d.watch)(t.ref,t=>{t?.(e)});return()=>{n.dispose(),t.ref.value?.(null)}}),n({attr:{error:()=>O.value||void 0,"has-value":()=>N.value?!0:void 0,size:p.size,variant:p.variant}}),u.html`
+      <div class="input-wrapper" part="wrapper">
+        <label class="label" for="${k}" id="${j}" part="label" ?hidden="${()=>!M.value}"
+          ><slot name="label">${t.label}</slot></label
+        >
+        <div class="field" part="field">
+          <div class="input-row" part="input-row">
+            <slot name="prefix"></slot>
+            <input
+              part="input"
+              id="${k}"
+              :type="${()=>t.type.value===`password`&&m.value?`text`:t.type.value??`text`}"
+              :name="${t.name}"
+              :placeholder="${t.placeholder}"
+              :autocomplete="${t.autocomplete}"
+              :inputmode="${t.inputmode}"
+              :maxlength="${t.maxlength}"
+              :minlength="${t.minlength}"
+              :pattern="${t.pattern}"
+              ?disabled="${t.disabled}"
+              ?readonly="${t.readonly}"
+              ?required="${t.required}"
+              :value="${e.live(N)}"
+              :aria-labelledby="${C}"
+              :aria-describedby="${b}"
+              :aria-errormessage="${x}"
+              :aria-invalid="${S}"
+              ref="${h}" />
+            <slot name="suffix"></slot>
+            <button
+              class="pwd-toggle-btn"
+              part="pwd-toggle"
+              type="button"
+              :aria-label="${()=>m.value?`Hide password`:`Show password`}"
+              :aria-pressed="${()=>String(m.value)}"
+              :tabindex="${()=>t.type.value===`password`?`0`:`-1`}"
+              @click="${()=>{m.value=!m.value,h.value?.focus()}}">
+              ${()=>m.value?u.html`<ore-icon name="eye-off" size="14" stroke-width="2" aria-hidden="true"></ore-icon>`:u.html`<ore-icon name="eye" size="14" stroke-width="2" aria-hidden="true"></ore-icon>`}
+            </button>
+            <button
+              aria-label="Clear"
+              class="clear-btn"
+              part="clear"
+              type="button"
+              :tabindex="${()=>N.value?`0`:`-1`}"
+              @click="${e=>{T(e),h.value?.focus()}}">
+              <ore-icon aria-hidden="true" name="x" size="12" stroke-width="2.5"></ore-icon>
+            </button>
+          </div>
+        </div>
+        <div class="helper-text" aria-live="polite" id="${w}" part="helper" ?hidden="${()=>!!O.value||!A.value}">
+          <slot name="helper">${()=>A.value}</slot>
+        </div>
+        <div class="helper-text" id="${D}" role="alert" part="error" ?hidden="${()=>!O.value}">
+          <slot name="error">${()=>O.value}</slot>
+        </div>
+        <div
+          class="char-counter"
+          part="char-counter"
+          :data-near-limit="${()=>E?.value.counterNearLimit&&!E?.value.counterAtLimit?``:null}"
+          :data-at-limit="${()=>E?.value.counterAtLimit?``:null}"
+          ?hidden="${()=>!E}">
+          ${()=>E?.value.counterText??``}
+        </div>
+      </div>
+    `},shadow:{delegatesFocus:!0},styles:[...r.fieldMixins,t.sizeVariantMixin(a.FIELD_SIZE_PRESET),n.forcedColorsFocusMixin(`input`),l.default]}),exports.INPUT_TAG=p;
+//# sourceMappingURL=input.cjs.map

package/dist/input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.cjs","names":[],"sources":["../src/inputs/input/input.ts"],"sourcesContent":["import { define, useField, html, inject, prop, ref } from '@vielzeug/ore';\nimport { live } from '@vielzeug/ore/directives';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { TextFieldProps } from '../../shared';\nimport type { InputType, VisualVariant } from '../../types';\n\nimport { lifecycleSignal, createTextField } from '../../headless';\nimport { disablableBundle, FIELD_SIZE_PRESET, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport '../../content/icon/icon';\nimport { fieldMixins, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './input.css?inline';\n\n/** Input component properties */\n\nexport type OreInputEvents = {\n  change: { originalEvent: Event; value: string };\n  input: { originalEvent: Event; value: string };\n};\n\nexport type OreInputProps = TextFieldProps<Exclude<VisualVariant, 'frost'>> & {\n  /** Autocomplete hint */\n  autocomplete?: string;\n  /** Show a clear (×) button when the field has a value */\n  clearable?: boolean;\n  /** Virtual keyboard hint for mobile devices */\n  inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n  /** Maximum character length — shows a counter below the input */\n  maxlength?: number;\n  /** Minimum character length */\n  minlength?: number;\n  /** HTML pattern attribute for client-side validation */\n  pattern?: string;\n  /**\n   * JS-only callback fired with the inner `<input>` element when it mounts,\n   * and with `null` when it unmounts. Intended for composed components that\n   * need imperative access to the raw input element.\n   * Set as a JS property: `bitInput.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLInputElement | null) => void) | null;\n  /** HTML input type */\n  type?: InputType;\n};\n\nconst VALID_INPUT_TYPES = [\n  'text',\n  'email',\n  'password',\n  'search',\n  'url',\n  'tel',\n  'number',\n  'date',\n  'time',\n  'datetime-local',\n  'month',\n  'week',\n] as const;\n\n/**\n * A customizable text input component with multiple variants, label placements, and form features.\n *\n * @element ore-input\n *\n * @attr {string} label - Label text\n * @attr {string} label-placement - Label placement: 'inset' | 'outside'\n * @attr {string} type - HTML input type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'\n * @attr {string} value - Current input value\n * @attr {string} placeholder - Placeholder text\n * @attr {string} name - Form field name\n * @attr {string} helper - Helper text displayed below the input (fallback when the `helper` slot is empty)\n * @attr {string} error - Error message — marks the field as invalid (fallback when the `error` slot is empty)\n * @attr {boolean} disabled - Disable input interaction\n * @attr {boolean} readonly - Make the input read-only\n * @attr {boolean} required - Mark the field as required\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text'\n * @attr {string} size - Input size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n *\n * @fires input - Emitted when input value changes (on every keystroke). detail: { value: string; originalEvent: Event }\n * @fires change - Emitted when input loses focus with changed value. detail: { value: string; originalEvent: Event }\n *\n * @slot prefix - Content before the input (e.g., icons)\n * @slot suffix - Content after the input (e.g., clear button, validation icon)\n * @slot label - Replaces the label text — slotted content takes precedence over the `label` prop\n * @slot helper - Replaces the helper text — slotted content takes precedence over the `helper` prop\n * @slot error - Replaces the error text — slotted content takes precedence over the `error` prop\n *\n * @part wrapper - The input wrapper element\n * @part label - The label element (inset or outside)\n * @part field - The field container element\n * @part input-row - The input row container element\n * @part input - The input element\n * @part helper - The helper text element\n *\n * @cssprop --input-bg - Background color\n * @cssprop --input-color - Text color\n * @cssprop --input-border-color - Border color\n * @cssprop --input-placeholder-color - Placeholder text color\n * @cssprop --input-radius - Border radius\n * @cssprop --input-padding - Inner padding (block inline)\n * @cssprop --input-gap - Gap between prefix/suffix icons and input text\n * @cssprop --input-font-size - Font size\n * @cssprop --input-height - Field height\n * @cssprop --input-hover-bg - Field background on hover (flat/ghost variants)\n * @cssprop --input-hover-border-color - Field border on hover (flat/bordered variants)\n * @cssprop --input-focus-bg - Field background when focused (flat variant)\n * @cssprop --input-focus-border-color - Field border when focused (flat/text variants)\n *\n * @example\n * ```html\n * <ore-input type=\"email\" label=\"Email\" placeholder=\"you@example.com\" />\n * <ore-input label=\"Name\" variant=\"bordered\" color=\"primary\" />\n * ```\n */\nexport const INPUT_TAG = 'ore-input' as const;\ndefine<OreInputProps, OreInputEvents>(INPUT_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    autocomplete: prop.string(),\n    clearable: prop.bool(false),\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    inputmode: prop.string<'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'>(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    maxlength: prop.json(undefined as number | undefined),\n    minlength: prop.json(undefined as number | undefined),\n    name: prop.string(),\n    pattern: prop.string(),\n    placeholder: prop.string(),\n    readonly: prop.bool(false),\n    ref: prop.json(undefined as ((el: HTMLInputElement | null) => void) | null | undefined),\n    required: prop.bool(false),\n    type: prop.oneOf(VALID_INPUT_TYPES, 'text'),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'text' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n  setup(props, { bind, emit, onCleanup, onElement, slots }) {\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(bind, props, formCtx);\n    const showPassword = signal(false);\n    const inputRef = ref<HTMLInputElement>();\n\n    const hasLabel = computed(() => !!props.label.value || slots.has('label').value);\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    let _formField: { reportValidity(): void } | null = null;\n    const tf = createTextField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      getFormField: () => _formField,\n      hasLabel,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      maxLength: props.maxlength,\n      onChange: (event: Event, value: string) => {\n        emit('change', { originalEvent: event, value });\n      },\n      onInput: (event: Event, value: string) => {\n        emit('input', { originalEvent: event, value });\n      },\n      prefix: 'input',\n      signal: abortSignal,\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    _formField = useField<string>({ disabled: tf.disabled, toFormValue: (v) => v, value: tf.value });\n\n    const {\n      ariaDescribedBy,\n      ariaErrorMessage,\n      ariaInvalid,\n      ariaLabelledBy,\n      assistiveId,\n      clear: clearValue,\n      counter,\n      errorId,\n      errorText,\n      fieldId: inputId,\n      helperText,\n      labelId,\n      labelVisible,\n      value: fieldValue,\n      wire,\n    } = tf;\n\n    onElement(inputRef, (el) => {\n      wire(el, abortSignal);\n\n      // Immediate fire for when the prop is already set on mount.\n      props.ref.value?.(el);\n\n      // Reactive watcher so that if props.ref is set *after* the inner\n      // <input> mounts (e.g. parent sets it via a ref callback after render),\n      // the new callback still receives the live element.\n      const sub = watch(props.ref, (cb) => {\n        cb?.(el);\n      });\n\n      return () => {\n        sub.dispose();\n        props.ref.value?.(null);\n      };\n    });\n\n    const clear = (event?: Event): void => {\n      clearValue(event);\n      inputRef.value?.focus();\n    };\n\n    const resolvedInputType = (): string =>\n      props.type.value === 'password' && showPassword.value ? 'text' : (props.type.value ?? 'text');\n\n    bind({\n      attr: {\n        error: () => errorText.value || undefined,\n        'has-value': () => (fieldValue.value ? true : undefined),\n        size: fCtxProps.size,\n        variant: fCtxProps.variant,\n      },\n    });\n\n    const labelHidden = () => !labelVisible.value;\n    const passwordToggleLabel = () => (showPassword.value ? 'Hide password' : 'Show password');\n    const passwordTogglePressed = () => String(showPassword.value);\n    const passwordToggleIcon = () =>\n      showPassword.value\n        ? html`<ore-icon name=\"eye-off\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>`\n        : html`<ore-icon name=\"eye\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>`;\n    const helperHidden = () => !!errorText.value || !helperText.value;\n    const errorHidden = () => !errorText.value;\n    const counterNearLimit = () => (counter?.value.counterNearLimit && !counter?.value.counterAtLimit ? '' : null);\n    const counterAtLimit = () => (counter?.value.counterAtLimit ? '' : null);\n    const counterHidden = () => !counter;\n    const counterText = () => counter?.value.counterText ?? '';\n\n    const clearTabIndex = () => (fieldValue.value ? '0' : '-1');\n    const pwdToggleTabIndex = () => (props.type.value === 'password' ? '0' : '-1');\n\n    const togglePassword = () => {\n      showPassword.value = !showPassword.value;\n      inputRef.value?.focus();\n    };\n\n    return html`\n      <div class=\"input-wrapper\" part=\"wrapper\">\n        <label class=\"label\" for=\"${inputId}\" id=\"${labelId}\" part=\"label\" ?hidden=\"${labelHidden}\"\n          ><slot name=\"label\">${props.label}</slot></label\n        >\n        <div class=\"field\" part=\"field\">\n          <div class=\"input-row\" part=\"input-row\">\n            <slot name=\"prefix\"></slot>\n            <input\n              part=\"input\"\n              id=\"${inputId}\"\n              :type=\"${resolvedInputType}\"\n              :name=\"${props.name}\"\n              :placeholder=\"${props.placeholder}\"\n              :autocomplete=\"${props.autocomplete}\"\n              :inputmode=\"${props.inputmode}\"\n              :maxlength=\"${props.maxlength}\"\n              :minlength=\"${props.minlength}\"\n              :pattern=\"${props.pattern}\"\n              ?disabled=\"${props.disabled}\"\n              ?readonly=\"${props.readonly}\"\n              ?required=\"${props.required}\"\n              :value=\"${live(fieldValue)}\"\n              :aria-labelledby=\"${ariaLabelledBy}\"\n              :aria-describedby=\"${ariaDescribedBy}\"\n              :aria-errormessage=\"${ariaErrorMessage}\"\n              :aria-invalid=\"${ariaInvalid}\"\n              ref=\"${inputRef}\" />\n            <slot name=\"suffix\"></slot>\n            <button\n              class=\"pwd-toggle-btn\"\n              part=\"pwd-toggle\"\n              type=\"button\"\n              :aria-label=\"${passwordToggleLabel}\"\n              :aria-pressed=\"${passwordTogglePressed}\"\n              :tabindex=\"${pwdToggleTabIndex}\"\n              @click=\"${togglePassword}\">\n              ${passwordToggleIcon}\n            </button>\n            <button\n              aria-label=\"Clear\"\n              class=\"clear-btn\"\n              part=\"clear\"\n              type=\"button\"\n              :tabindex=\"${clearTabIndex}\"\n              @click=\"${clear}\">\n              <ore-icon aria-hidden=\"true\" name=\"x\" size=\"12\" stroke-width=\"2.5\"></ore-icon>\n            </button>\n          </div>\n        </div>\n        <div class=\"helper-text\" aria-live=\"polite\" id=\"${assistiveId}\" part=\"helper\" ?hidden=\"${helperHidden}\">\n          <slot name=\"helper\">${() => helperText.value}</slot>\n        </div>\n        <div class=\"helper-text\" id=\"${errorId}\" role=\"alert\" part=\"error\" ?hidden=\"${errorHidden}\">\n          <slot name=\"error\">${() => errorText.value}</slot>\n        </div>\n        <div\n          class=\"char-counter\"\n          part=\"char-counter\"\n          :data-near-limit=\"${counterNearLimit}\"\n          :data-at-limit=\"${counterAtLimit}\"\n          ?hidden=\"${counterHidden}\">\n          ${counterText}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [...fieldMixins, sizeVariantMixin(FIELD_SIZE_PRESET), forcedColorsFocusMixin('input'), componentStyles],\n});\n"],"mappings":"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"}