@antscorp/ui 0.1.3 → 0.1.5

package/dist/molecules/RevealRadioGroup.d.ts

@@ -1,4 +1,6 @@
+import { type RadioListProps } from "@astryxdesign/core/RadioList";
 import { type ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 /** One choice of a `RevealRadioGroup`. */
 export type RevealRadioOption<V extends string> = {
     /** What `onChange` gets when this option is picked. */
@@ -13,13 +15,7 @@ export type RevealRadioOption<V extends string> = {
     readonly content?: ReactNode;
 };
 /** What `RevealRadioGroup` takes. */
-export type RevealRadioGroupProps<V extends string> = {
-    /** Names the group; also its accessible name when hidden. */
-    readonly label: string;
-    /** Keeps the label for screen readers only. */
-    readonly isLabelHidden?: boolean | undefined;
-    /** Lays the options out in a row instead of a column. */
-    readonly orientation?: "vertical" | "horizontal" | undefined;
+export type RevealRadioGroupProps<V extends string> = Forwardable<Pick<RadioListProps, "label" | "isLabelHidden" | "orientation" | "isDisabled">> & {
     /** The choices, in order. */
     readonly options: readonly RevealRadioOption<V>[];
     /** The chosen option's value. */
@@ -28,8 +24,6 @@ export type RevealRadioGroupProps<V extends string> = {
     readonly onChange: (value: V) => void;
     /** The radios' size, `md` by default (Astryx's default; the theme draws it at 18px). */
     readonly size?: "sm" | "md" | undefined;
-    /** Dims the radios and blocks them. */
-    readonly isDisabled?: boolean | undefined;
     /** Shows the value, not dimmed, and ignores changes. */
     readonly isReadOnly?: boolean | undefined;
     /** The space between the list and the revealed content, `2` by default. */

package/dist/molecules/RevealSwitch.d.ts

@@ -1,16 +1,12 @@
+import { type SwitchProps } from "@astryxdesign/core/Switch";
 import type { ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 /** What `RevealSwitch` takes. */
-export type RevealSwitchProps = {
-    /** What the switch turns on. */
-    readonly label: string;
-    /** Whether the switch is on. */
-    readonly value: boolean;
+export type RevealSwitchProps = Forwardable<Pick<SwitchProps, "label" | "isDisabled" | "value">> & {
     /** Called with the new state. */
     readonly onChange: (value: boolean) => void;
     /** The switch's size, `md` by default. */
     readonly size?: "sm" | "md" | undefined;
-    /** Dims the switch and blocks it. */
-    readonly isDisabled?: boolean | undefined;
     /** Shows the value, not dimmed, and ignores changes. */
     readonly isReadOnly?: boolean | undefined;
     /** What shows below the switch while it is on. */

package/dist/molecules/Select.d.ts

@@ -1,15 +1,10 @@
-import { type SelectorOptionType } from "@astryxdesign/core/Selector";
+import { type SelectorOptionType, type SelectorProps } from "@astryxdesign/core/Selector";
 import type { ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 /** One entry of `Select`'s list: an option, a titled section of options, or a divider (Astryx's). */
 export type SelectOption = SelectorOptionType;
 /** What `Select` takes. */
-export type SelectProps = {
-    /** Names the control for assistive tech; shown above it unless `isLabelHidden`. */
-    readonly label: string;
-    /** Hides the label, as in a rule row. */
-    readonly isLabelHidden?: boolean | undefined;
-    /** A line under the label that explains the choice. */
-    readonly description?: string | undefined;
+export type SelectProps = Forwardable<Pick<SelectorProps, "label" | "isLabelHidden" | "description" | "placeholder" | "hasSearch" | "width" | "isDisabled" | "isReadOnly" | "isRequired" | "controlXstyle" | "containerXstyle">> & {
     /** The list, in order. */
     readonly options: readonly SelectOption[];
     /** The picked option's value; `null` or none shows the placeholder. */
@@ -18,22 +13,10 @@ export type SelectProps = {
     readonly onChange: (value: string) => void;
     /** Called by the clear button, which shows only when this is given and an option is picked. */
     readonly onClear?: (() => void) | undefined;
-    /** Shown in the trigger while nothing is picked. */
-    readonly placeholder?: string | undefined;
-    /** A search box over the list, filtering it as it is typed. */
-    readonly hasSearch?: boolean | undefined;
     /** The trigger's look: an underlined field (`input`, the default) or a bare text button (`ghost`). */
     readonly variant?: "input" | "ghost" | undefined;
-    /** The trigger's size, `md` by default (the theme's 30px control height). */
-    readonly size?: "sm" | "md" | undefined;
-    /** The trigger's width, in pixels or any CSS length such as `"100%"`. */
-    readonly width?: number | string | undefined;
-    /** Dims the trigger and blocks it. */
-    readonly isDisabled?: boolean | undefined;
-    /** Shows the picked label without the chevron; the list does not open. */
-    readonly isReadOnly?: boolean | undefined;
-    /** Marks the field as required. */
-    readonly isRequired?: boolean | undefined;
+    /** The trigger's size, md by default; the kit narrows the upstream sizes to sm and md. */
+    readonly size?: Extract<SelectorProps["size"], "sm" | "md"> | undefined;
     /**
      * The options are loading: a spinner in place of the chevron and the trigger busy from 300 ms
      * on, for at least 300 ms (`useLoadingShown`), and the list does not open meanwhile. The picked
@@ -43,7 +26,7 @@ export type SelectProps = {
     readonly isLoading?: boolean | undefined;
     /** A problem with the pick, already in the user's language, shown under the trigger. */
     readonly error?: string | undefined;
-    /** The texts the view shows; the host translates them. Astryx's English stands in for a missing one. */
+    /** Host texts; missing strings use the facade's InternationalizationProvider locale (English by default). */
     readonly labels?: {
         /** The search box's placeholder, such as "Search". */
         readonly search?: string | undefined;
@@ -59,5 +42,7 @@ export type SelectProps = {
  * The kit's select on Astryx's `Selector`: the list is as wide as the
  * trigger (the theme) and a long option label ends in an ellipsis with the whole label in a
  * tooltip. Every select is one rather than Astryx's `Selector` (lint-enforced). It holds no state.
+ * Localize upstream search, clear and empty text with `InternationalizationProvider` from
+ * `@antscorp/ui/astryx/i18n`; `labels` overrides individual kit captions.
  */
 export declare function Select(props: SelectProps): ReactNode;

package/dist/molecules/Select.js

@@ -6,7 +6,7 @@ import { jsx as i } from "react/jsx-runtime";
 import { Selector as a } from "@astryxdesign/core/Selector";
 // src/molecules/Select.tsx
 function o(e) {
-	let o = r(69), { labels: l, onClear: u, onChange: d } = e, f;
+	let o = r(75), { labels: l, onClear: u, onChange: d } = e, f;
 	o[0] === l ? f = o[1] : (f = l === void 0 ? {} : l, o[0] = l, o[1] = f);
 	let p = f, m = e.value ?? void 0, { isBusy: h, isShown: g } = n(e.isLoading === !0), _;
 	o[2] !== h || o[3] !== p.value || o[4] !== e.options || o[5] !== m ? (_ = h && m !== void 0 && p.value !== void 0 && !c(e.options, m) ? [{
@@ -48,11 +48,15 @@ function o(e) {
 	let A;
 	o[34] === e.isRequired ? A = o[35] : (A = e.isRequired !== void 0 && { isRequired: e.isRequired }, o[34] = e.isRequired, o[35] = A);
 	let j;
-	o[36] === p.search ? j = o[37] : (j = p.search !== void 0 && { searchPlaceholder: p.search }, o[36] = p.search, o[37] = j);
+	o[36] === e.controlXstyle ? j = o[37] : (j = e.controlXstyle !== void 0 && { controlXstyle: e.controlXstyle }, o[36] = e.controlXstyle, o[37] = j);
 	let M;
-	o[38] === p.noMatch ? M = o[39] : (M = p.noMatch !== void 0 && { emptySearchText: p.noMatch }, o[38] = p.noMatch, o[39] = M);
+	o[38] === e.containerXstyle ? M = o[39] : (M = e.containerXstyle !== void 0 && { containerXstyle: e.containerXstyle }, o[38] = e.containerXstyle, o[39] = M);
 	let N;
-	o[40] !== e.label || o[41] !== E || o[42] !== D || o[43] !== O || o[44] !== k || o[45] !== A || o[46] !== j || o[47] !== M || o[48] !== y || o[49] !== b || o[50] !== x || o[51] !== S || o[52] !== C || o[53] !== w || o[54] !== T ? (N = {
+	o[40] === p.search ? N = o[41] : (N = p.search !== void 0 && { searchPlaceholder: p.search }, o[40] = p.search, o[41] = N);
+	let P;
+	o[42] === p.noMatch ? P = o[43] : (P = p.noMatch !== void 0 && { emptySearchText: p.noMatch }, o[42] = p.noMatch, o[43] = P);
+	let F;
+	o[44] !== e.label || o[45] !== E || o[46] !== D || o[47] !== O || o[48] !== k || o[49] !== A || o[50] !== j || o[51] !== M || o[52] !== N || o[53] !== P || o[54] !== y || o[55] !== b || o[56] !== x || o[57] !== S || o[58] !== C || o[59] !== w || o[60] !== T ? (F = {
 		label: e.label,
 		options: y,
 		renderOption: s,
@@ -68,30 +72,32 @@ function o(e) {
 		...k,
 		...A,
 		...j,
-		...M
-	}, o[40] = e.label, o[41] = E, o[42] = D, o[43] = O, o[44] = k, o[45] = A, o[46] = j, o[47] = M, o[48] = y, o[49] = b, o[50] = x, o[51] = S, o[52] = C, o[53] = w, o[54] = T, o[55] = N) : N = o[55];
-	let P = N;
+		...M,
+		...N,
+		...P
+	}, o[44] = e.label, o[45] = E, o[46] = D, o[47] = O, o[48] = k, o[49] = A, o[50] = j, o[51] = M, o[52] = N, o[53] = P, o[54] = y, o[55] = b, o[56] = x, o[57] = S, o[58] = C, o[59] = w, o[60] = T, o[61] = F) : F = o[61];
+	let I = F;
 	if (u === void 0) {
 		let e;
-		o[56] === m ? e = o[57] : (e = m !== void 0 && { value: m }, o[56] = m, o[57] = e);
+		o[62] === m ? e = o[63] : (e = m !== void 0 && { value: m }, o[62] = m, o[63] = e);
 		let t;
-		return o[58] !== P || o[59] !== d || o[60] !== e ? (t = /* @__PURE__ */ i(a, {
-			...P,
+		return o[64] !== I || o[65] !== d || o[66] !== e ? (t = /* @__PURE__ */ i(a, {
+			...I,
 			...e,
 			onChange: d
-		}), o[58] = P, o[59] = d, o[60] = e, o[61] = t) : t = o[61], t;
+		}), o[64] = I, o[65] = d, o[66] = e, o[67] = t) : t = o[67], t;
 	}
-	let F = m ?? null, I;
-	o[62] !== d || o[63] !== u ? (I = (e) => {
+	let L = m ?? null, R;
+	o[68] !== d || o[69] !== u ? (R = (e) => {
 		e === null ? u() : d(e);
-	}, o[62] = d, o[63] = u, o[64] = I) : I = o[64];
-	let L;
-	return o[65] !== P || o[66] !== F || o[67] !== I ? (L = /* @__PURE__ */ i(a, {
-		...P,
+	}, o[68] = d, o[69] = u, o[70] = R) : R = o[70];
+	let z;
+	return o[71] !== I || o[72] !== L || o[73] !== R ? (z = /* @__PURE__ */ i(a, {
+		...I,
 		hasClear: !0,
-		value: F,
-		onChange: I
-	}), o[65] = P, o[66] = F, o[67] = I, o[68] = L) : L = o[68], L;
+		value: L,
+		onChange: R
+	}), o[71] = I, o[72] = L, o[73] = R, o[74] = z) : z = o[74], z;
 }
 function s(t) {
 	return /* @__PURE__ */ i(e, { option: t });

package/dist/molecules/StatusButton.d.ts

@@ -1,11 +1,11 @@
+import { type ButtonProps } from "@astryxdesign/core/Button";
 import { StatusDot } from "@astryxdesign/core/StatusDot";
 import type { ComponentProps, ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 /** The tone of a `StatusButton`'s dot. */
 export type StatusTone = ComponentProps<typeof StatusDot>["variant"];
 /** What `StatusButton` takes. */
-export type StatusButtonProps = {
-    /** The button's text. */
-    readonly label: string;
+export type StatusButtonProps = Forwardable<Pick<ButtonProps, "label" | "icon" | "isDisabled">> & {
     /** The dot's tone: neutral, accent, success, warning or error. */
     readonly status: StatusTone;
     /** The texts the view shows; the host translates them. */
@@ -13,14 +13,10 @@ export type StatusButtonProps = {
         /** What the dot means, read out for it, e.g. "Connected". */
         readonly status: string;
     };
-    /** A glyph before the text. */
-    readonly icon?: ReactNode;
     /** Called when the button is pressed. */
     readonly onClick: () => void;
     /** The button's height, `md` by default. */
     readonly size?: "sm" | "md" | undefined;
-    /** Dimmed and not pressable. */
-    readonly isDisabled?: boolean | undefined;
 };
 /** A button whose dot shows a state beside its text, such as a connection. */
 export declare function StatusButton(props: StatusButtonProps): ReactNode;

package/dist/molecules/ToggleGrid.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 import { type FieldGroupProps } from "./FieldGroup.js";
 /** One button of a `ToggleGrid`. */
 export type ToggleGridOption<V extends string> = {
@@ -10,7 +11,7 @@ export type ToggleGridOption<V extends string> = {
     readonly span?: number | undefined;
 };
 /** What `ToggleGrid` takes. */
-export type ToggleGridProps<V extends string> = Pick<FieldGroupProps, "label" | "isDisabled" | "error"> & {
+export type ToggleGridProps<V extends string> = Forwardable<Pick<FieldGroupProps, "label" | "isDisabled" | "error">> & {
     /** The buttons, in order. */
     readonly options: readonly ToggleGridOption<V>[];
     /** How many 40px columns the grid has; one column of Astryx's default without it. */

package/dist/molecules/TokenTextField.d.ts

@@ -1,10 +1,11 @@
 import { type FieldProps } from "@astryxdesign/core/Field";
 import { type IconProps } from "@astryxdesign/core/Icon";
 import { type ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 import type { TokenLook } from "../lib/tokenEditorConfig.js";
 export type { TokenLook } from "../lib/tokenEditorConfig.js";
 /** What `TokenTextField` takes. */
-export type TokenTextFieldProps = Pick<FieldProps, "label" | "description" | "isLabelHidden" | "isDisabled" | "isRequired"> & {
+export type TokenTextFieldProps = Forwardable<Pick<FieldProps, "label" | "description" | "isLabelHidden" | "isDisabled" | "isRequired">> & {
     /** The committed string; outside changes replace the local draft. */
     readonly value: string;
     /** Commits the local draft on blur, or Enter in a single line. */

package/dist/molecules/TreeOptions.d.ts

@@ -37,8 +37,9 @@ export type TreeOptionsProps = {
  * disabled row does neither. Rows are the Selector's option rows (its styles, its option-row and
  * check theme targets, its check on the picked leaf at the end, where a group shows its chevron),
  * so a theme styles both alike: the picked row's look and whether a check shows are the theme's.
- * Tab reaches the picked leaf (else the first enabled row), Up and Down move between rows, Enter
- * and Space act. Its state is which groups are open.
+ * Tab initially reaches the picked leaf (else the first enabled row); arrows, Home and End move
+ * through enabled rows, Right opens or enters a group, Left collapses or returns to its parent,
+ * and Enter and Space act. Its state is which groups are open and which row has focus.
  */
 export declare function TreeOptions(props: TreeOptionsProps): ReactNode;
 export declare function leafOf(items: readonly TreeItem[], value: string): TreeItem | undefined;

package/dist/molecules/TreeOptions.js

@@ -5,49 +5,62 @@ import "@stylexjs/stylex";
 import { Icon as r } from "@astryxdesign/core/Icon";
 import { Text as i } from "@astryxdesign/core/Text";
 import { themeProps as a } from "@astryxdesign/core/utils";
-import { useState as o } from "react";
-import { useIndicator as s } from "@astryxdesign/core/Indicator";
+import { Fragment as o, useId as s, useState as c } from "react";
+import { useTreeFocus as l } from "@astryxdesign/core/hooks";
+import { useIndicator as u } from "@astryxdesign/core/Indicator";
 // src/molecules/TreeOptions.tsx
-function c(c) {
-	let p = e(13), { items: m, value: h } = c, g = c.size ?? "md", _;
-	p[0] !== m || p[1] !== c.isExpandedByDefault || p[2] !== h ? (_ = () => new Set(m.flatMap((e) => e.children !== void 0 && (c.isExpandedByDefault === !0 || e.children.some((e) => e.value === h)) ? [e.value] : [])), p[0] = m, p[1] = c.isExpandedByDefault, p[2] = h, p[3] = _) : _ = p[3];
-	let [v, y] = o(_), b;
-	p[4] === v ? b = p[5] : (b = (e) => {
+function d(d) {
+	let g = e(21), { items: _, value: v } = d, y = d.size ?? "md", b = s(), [x, S] = c(), C;
+	g[0] !== _ || g[1] !== d.isExpandedByDefault || g[2] !== v ? (C = () => new Set(_.flatMap((e) => e.children !== void 0 && (d.isExpandedByDefault === !0 || e.children.some((e) => e.value === v)) ? [e.value] : [])), g[0] = _, g[1] = d.isExpandedByDefault, g[2] = v, g[3] = C) : C = g[3];
+	let [w, T] = c(C), E;
+	g[4] === w ? E = g[5] : (E = (e) => {
 		if (e.children === void 0) return [{
 			item: e,
 			level: 1
 		}];
-		let t = v.has(e.value), n = t ? e.children.map(u) : [];
+		let t = w.has(e.value), n = t ? e.children.map(m) : [];
 		return [{
 			item: e,
 			level: 1,
 			isOpen: t
 		}].concat(n);
-	}, p[4] = v, p[5] = b);
-	let x = m.flatMap(b), S = s("check"), C = x.filter(l), w = C.find((e) => e.isOpen === void 0 && e.item.value === h) ?? C[0], T;
-	p[6] !== v || p[7] !== c ? (T = (e) => {
+	}, g[4] = w, g[5] = E);
+	let D = _.flatMap(E), O = u("check"), k = D.filter(p), A = k.find((e) => e.item.value === x) ?? k.find((e) => e.isOpen === void 0 && e.item.value === v) ?? k[0], j;
+	g[6] !== w || g[7] !== d ? (j = (e) => {
 		if (e.item.isDisabled === !0) return;
 		if (e.isOpen === void 0) {
-			c.onChange(e.item.value);
+			d.onChange(e.item.value);
 			return;
 		}
-		let t = new Set(v);
-		t.delete(e.item.value) || t.add(e.item.value), y(t);
-	}, p[6] = v, p[7] = c, p[8] = T) : T = p[8];
-	let E = T, D = c.label, O = f, k = x.map((e) => /* @__PURE__ */ n("div", {
+		let t = new Set(w);
+		t.delete(e.item.value) || t.add(e.item.value), T(t);
+	}, g[6] = w, g[7] = d, g[8] = j) : j = g[8];
+	let M = j, N = (e) => {
+		let t = D.find((t) => t.item.value === e);
+		t !== void 0 && M(t);
+	}, { treeRef: P, handleKeyDown: F } = l({
+		itemSelector: "[role=\"treeitem\"]:not([aria-disabled=\"true\"])",
+		onToggleExpand: N,
+		onActivate: (e, t) => (N(t), !0)
+	}), I;
+	g[9] === b ? I = g[10] : (I = (e) => `${b}-${encodeURIComponent(e.item.value)}`, g[9] = b, g[10] = I);
+	let L = I, R = (e) => /* @__PURE__ */ n("div", {
 		role: "treeitem",
+		"aria-label": e.item.label,
+		"data-tree-id": e.item.value,
 		"aria-level": e.level,
 		"aria-expanded": e.isOpen,
-		"aria-selected": e.isOpen === void 0 ? e.item.value === h : void 0,
+		"aria-owns": e.isOpen === !0 ? L(e) : void 0,
+		"aria-selected": e.isOpen === void 0 ? e.item.value === v : void 0,
 		"aria-disabled": e.item.isDisabled === !0 || void 0,
-		tabIndex: e === w ? 0 : -1,
-		onClick: () => {
-			E(e);
+		tabIndex: e.item === A?.item ? 0 : -1,
+		onFocus: () => {
+			S(e.item.value);
 		},
-		onKeyDown: (t) => {
-			(t.key === "Enter" || t.key === " ") && (t.preventDefault(), E(e));
+		onClick: () => {
+			M(e);
 		},
-		...d(e, g, h),
+		...h(e, y, v),
 		children: [/* @__PURE__ */ t("span", {
 			className: "aui78zum5 aui6s0dn4 aui1txdalj aui98rzlu auieuugli",
 			children: /* @__PURE__ */ t(i, {
@@ -61,8 +74,8 @@ function c(c) {
 				0: { className: "aui2lah0s auigomdpo aui14ju556" },
 				1: { className: "aui2lah0s auigomdpo aui14ju556 aui3nfvp2 aui6s0dn4 auil56j7k" }
 			}[e.isOpen !== void 0 | 0],
-			children: e.isOpen === void 0 ? /* @__PURE__ */ t(S, {
-				state: e.item.value === h ? "checked" : "unchecked",
+			children: e.isOpen === void 0 ? /* @__PURE__ */ t(O, {
+				state: e.item.value === v ? "checked" : "unchecked",
 				size: "sm",
 				isDisabled: e.item.isDisabled === !0,
 				...a("selector-check")
@@ -72,24 +85,41 @@ function c(c) {
 				color: "secondary"
 			})
 		})]
-	}, e.item.value)), A;
-	return p[9] !== c.label || p[10] !== O || p[11] !== k ? (A = /* @__PURE__ */ t("div", {
+	}, e.item.value), z = d.label, B;
+	g[11] === P ? B = g[12] : (B = (e) => {
+		P.current = e;
+	}, g[11] = P, g[12] = B);
+	let V;
+	g[13] !== L || g[14] !== R ? (V = (e) => /* @__PURE__ */ n(o, { children: [R(e), e.isOpen === !0 && /* @__PURE__ */ t("div", {
+		role: "group",
+		id: L(e),
+		children: e.item.children?.map((e) => R({
+			item: e,
+			level: 2
+		}))
+	})] }, e.item.value), g[13] = L, g[14] = R, g[15] = V) : V = g[15];
+	let H = D.filter(f).map(V), U;
+	return g[16] !== F || g[17] !== d.label || g[18] !== B || g[19] !== H ? (U = /* @__PURE__ */ t("div", {
 		role: "tree",
-		"aria-label": D,
-		onKeyDown: O,
-		children: k
-	}), p[9] = c.label, p[10] = O, p[11] = k, p[12] = A) : A = p[12], A;
+		"aria-label": z,
+		ref: B,
+		onKeyDown: F,
+		children: H
+	}), g[16] = F, g[17] = d.label, g[18] = B, g[19] = H, g[20] = U) : U = g[20], U;
 }
-function l(e) {
+function f(e) {
+	return e.level === 1;
+}
+function p(e) {
 	return e.item.isDisabled !== !0;
 }
-function u(e) {
+function m(e) {
 	return {
 		item: e,
 		level: 2
 	};
 }
-function d(e, t, n) {
+function h(e, t, n) {
 	let r = e.isOpen === void 0 && e.item.value === n, i = e.item.isDisabled === !0, o = a("selector-option-row", {
 		size: t,
 		selected: r ? "selected" : null,
@@ -110,14 +140,7 @@ function d(e, t, n) {
 		...s.style && { style: s.style }
 	};
 }
-function f(e) {
-	let t = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0;
-	if (t === 0) return;
-	e.preventDefault();
-	let n = [...e.currentTarget.querySelectorAll("[role=\"treeitem\"]")], r = n.findIndex((t) => t === e.target);
-	n[Math.min(Math.max(r + t, 0), n.length - 1)]?.focus();
-}
-function p(e, t) {
+function g(e, t) {
 	for (let n of e) if (n.children === void 0) {
 		if (n.value === t) return n;
 	} else {
@@ -125,7 +148,7 @@ function p(e, t) {
 		if (e !== void 0) return e;
 	}
 }
-function m(e, t) {
+function _(e, t) {
 	let n = t.trim().toLowerCase();
 	if (n === "") return [...e];
 	let r = (e) => e.label.toLowerCase().includes(n);
@@ -138,4 +161,4 @@ function m(e, t) {
 		}] : [];
 	});
 }
-export { c as TreeOptions, p as leafOf, m as matchTree };
+export { d as TreeOptions, g as leafOf, _ as matchTree };

package/dist/organisms/HourOfDayRow.js

@@ -133,11 +133,11 @@ var h = {
 		$$css: !0
 	},
 	liveOn: {
-		kWkggS: "aui1ewilqj auia3af2z",
+		kWkggS: "aui1ewilqj aui1komwgl",
 		$$css: !0
 	},
 	liveOff: {
-		kWkggS: "aui17x4s8c auia3af2z",
+		kWkggS: "aui17x4s8c aui1komwgl",
 		$$css: !0
 	}
 };

package/dist/organisms/HourOfWeekGrid.js

@@ -210,11 +210,11 @@ var x = {
 		$$css: !0
 	},
 	liveOn: {
-		kWkggS: "aui1ewilqj auia3af2z",
+		kWkggS: "aui1ewilqj aui1komwgl",
 		$$css: !0
 	},
 	liveOff: {
-		kWkggS: "aui17x4s8c auia3af2z",
+		kWkggS: "aui17x4s8c aui1komwgl",
 		$$css: !0
 	}
 };

package/dist/organisms/TokenPickerDialog.d.ts

@@ -1,5 +1,6 @@
 import { type DialogProps } from "@astryxdesign/core/Dialog";
 import { type ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 import { type TreeItem } from "../molecules/TreeOptions.js";
 import { type TreeSelectProps } from "./TreeSelect.js";
 /** The host-controlled draft of a token definition. */
@@ -12,7 +13,7 @@ export type TokenPickerValue = {
     readonly defaultValue: string;
 };
 /** What `TokenPickerDialog` takes. */
-export type TokenPickerDialogProps = Pick<DialogProps, "isOpen"> & {
+export type TokenPickerDialogProps = Forwardable<Pick<DialogProps, "isOpen">> & {
     /** Closes or cancels the dialog. */
     readonly onClose: () => void;
     /** Dialog heading. */

package/dist/organisms/TransferPicker.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 import { type LoadMoreOptions } from "../lib/useLoadMore.js";
 /** One thing `TransferPicker` offers. */
 export type TransferPickerOption<V extends string> = {
@@ -16,7 +17,7 @@ export type TransferPickerOption<V extends string> = {
     readonly error?: string | undefined;
 };
 /** What `TransferPicker` takes. */
-export type TransferPickerProps<V extends string> = Pick<LoadMoreOptions, "onLoadMore" | "hasMore" | "isLoadingMore"> & {
+export type TransferPickerProps<V extends string> = Forwardable<Pick<LoadMoreOptions, "onLoadMore" | "hasMore" | "isLoadingMore">> & {
     /** Names the list of options (the start column). */
     readonly label: string;
     /** The options to pick from. */