@plitzi/sdk-elements 0.37.2 → 0.37.4

package/dist/Element/hooks/useRootElementInteractions.mjs

@@ -1,78 +1,87 @@
 import e from "./useElementInteractions.mjs";
 import t from "./useInternalClassName.mjs";
-import { interactionBasicTriggers as n, nativeEventsList as r } from "../helpers/elementConstants.mjs";
-import { use as i, useCallback as a, useContext as o, useEffect as s, useMemo as c } from "react";
-import { get as l } from "@plitzi/plitzi-ui/helpers";
-import { StoreContext as u } from "@plitzi/nexus/react";
-import { emptyObject as d } from "@plitzi/sdk-shared/helpers/utils";
-import f from "clsx";
-import { pConsole as p } from "@plitzi/sdk-shared/devTools/utils/PlitziConsole";
+import n from "./useKeyTriggers.mjs";
+import { interactionBasicTriggers as r, nativeEventsList as i } from "../helpers/elementConstants.mjs";
+import { use as a, useCallback as o, useContext as s, useEffect as c, useMemo as l } from "react";
+import { get as u } from "@plitzi/plitzi-ui/helpers";
+import { StoreContext as d } from "@plitzi/nexus/react";
+import { emptyObject as f } from "@plitzi/sdk-shared/helpers/utils";
+import p from "clsx";
+import { liveSources as m } from "@plitzi/sdk-shared/dataSource";
+import { pConsole as h } from "@plitzi/sdk-shared/devTools/utils/PlitziConsole";
 //#region src/Element/hooks/useRootElementInteractions.ts
-var m = (e) => typeof e == "object" && !!e, h = ({ elementContext: h, InteractionsContext: g, previewMode: _, debugMode: v, baseElementId: y, className: b, interactionTriggers: x, interactionCallbacks: S, otherProps: C }) => {
-	let { id: w, className: T, attributes: E, definition: D, definition: { interactions: O }, plitziElementLayout: k, elementState: A, setElementState: j } = h, { interactionsManager: M, useInteractions: N } = i(g), P = a((e, t, n, r, i = !1) => {
-		i || e.preventDefault(), r && r(e), M.interactionTrigger(t, n, { event: e });
-	}, [M]), F = c(() => !_ || !O ? {} : Object.values(O).filter((e) => e.type === "trigger" && e.action && r.includes(e.action) && e.enabled).reduce((e, t) => {
-		let n = l(t, "params.propagateEvent", !1);
+var g = (e) => typeof e == "object" && !!e, _ = /* @__PURE__ */ new WeakSet(), v = (e) => "nativeEvent" in e && g(e.nativeEvent) ? e.nativeEvent : e, y = ({ elementContext: y, InteractionsContext: b, previewMode: x, debugMode: S, baseElementId: C, className: w, interactionTriggers: T, interactionCallbacks: E, otherProps: D }) => {
+	let { id: O, className: k, attributes: A, definition: j, definition: { interactions: M }, plitziElementLayout: N, elementState: P, setElementState: F } = y, { interactionsManager: I, useInteractions: L } = a(b), R = o((e, t, n, r, i = !1) => {
+		i || e.preventDefault(), r && r(e);
+		let a = v(e);
+		_.has(a) || (i || _.add(a), I.interactionTrigger(t, n, { event: e }));
+	}, [I]), z = l(() => !x || !M ? {} : Object.values(M).filter((e) => e.type === "trigger" && e.action && i.includes(e.action) && e.enabled).reduce((e, t) => {
+		let n = u(t, "params.propagateEvent", !1);
 		return {
 			...e,
-			[t.action]: (e) => P(e, w, t.action, C[t.action], n)
+			[t.action]: (e) => R(e, O, t.action, D[t.action], n)
 		};
 	}, {}), [
-		w,
 		O,
-		C,
-		_,
-		P
-	]), I = o(u), L = a(() => {
-		let e = I?.getPath("runtime.sources");
-		return m(e) ? e : d;
-	}, [I]), R = a(() => ({ dataSource: L() }), [L]), z = c(() => ({
-		...n,
-		...x
-	}), [x]), B = e({
-		attributes: E,
-		definition: D,
-		setElementState: j
+		M,
+		D,
+		x,
+		R
+	]), B = s(d), V = o(() => {
+		let e = B?.getPath("runtime.sources");
+		return m(g(e) ? e : f, B?.getPath("runtime.state"), B?.getPath("schema.settings.computed"));
+	}, [B]), H = o(() => ({ dataSource: V() }), [V]), U = l(() => ({
+		...r,
+		...T
+	}), [T]), W = e({
+		attributes: A,
+		definition: j,
+		setElementState: F
 	});
-	N({
-		id: w,
-		interactions: O,
-		triggers: z,
-		callbacks: c(() => ({
-			...S,
-			...B
-		}), [S, B]),
-		getAdditionalParams: R
-	}), s(() => {
-		if (!_ || !O || !Object.keys(O).length) return;
+	L({
+		id: O,
+		interactions: M,
+		triggers: U,
+		callbacks: l(() => ({
+			...E,
+			...W
+		}), [E, W]),
+		getAdditionalParams: H
+	}), n({
+		id: O,
+		interactions: M,
+		previewMode: x,
+		interactionsManager: I
+	}), c(() => {
+		if (!x || !M || !Object.keys(M).length) return;
 		let e = !1;
 		return queueMicrotask(() => {
-			e || M.interactionTrigger(w, "onLoad", {});
+			e || I.interactionTrigger(O, "onLoad", {});
 		}), () => {
 			e = !0;
 		};
-	}, []), s(() => {
-		if (v) return p.addProviderMethod(`getElementDataSource-${w}`, L), () => {
-			p.removeProviderMethod(`getElementDataSource-${w}`);
+	}, []), c(() => {
+		if (S) return h.addProviderMethod(`getElementDataSource-${O}`, V), () => {
+			h.removeProviderMethod(`getElementDataSource-${O}`);
 		};
 	}, [
-		v,
-		L,
-		w
+		S,
+		V,
+		O
 	]);
-	let V = t({
-		id: w,
-		className: b,
-		previewMode: _,
-		baseElementId: y,
-		definition: D,
-		elementState: A,
-		plitziElementLayout: k
+	let G = t({
+		id: O,
+		className: w,
+		previewMode: x,
+		baseElementId: C,
+		definition: j,
+		elementState: P,
+		plitziElementLayout: N
 	});
 	return {
-		className: f(T, V),
-		events: F
+		className: p(k, G),
+		events: z
 	};
 };
 //#endregion
-export { h as default };
+export { y as default };

package/dist/Element/hooks/useRscData.mjs

@@ -1,25 +1,30 @@
 import e from "./useElement.mjs";
-import { useCommonStore as t } from "@plitzi/sdk-shared/store";
-import { rscDataPath as n } from "@plitzi/sdk-shared/server/rsc/refreshRsc";
-import r from "@plitzi/sdk-shared/server/rsc/useRscRefresh";
+import { useRef as t } from "react";
+import { useCommonStore as n } from "@plitzi/sdk-shared/store";
+import { currentRscLocation as r, rscDataPath as i } from "@plitzi/sdk-shared/server/rsc/refreshRsc";
+import a from "@plitzi/sdk-shared/server/rsc/useRscRefresh";
 //#region src/Element/hooks/useRscData.ts
-var i = () => {
-	let { id: i } = e(), [[a = !1, o = !1, s = !1, c, l]] = t([
+var o = () => {
+	let { id: o, rootId: s } = e(), [[c = !1, l = !1, u = !1, d, f, p, m]] = n([
 		"rsc.enabled",
 		"rsc.loaded",
 		"rsc.stale",
 		"rsc.location",
-		n(i)
-	]), u = r();
+		i(o),
+		"navigation.currentPageId",
+		"schema.pages"
+	]), h = a(), g = d !== void 0 && d !== r() || s !== void 0 && s !== p && Array.isArray(m) && m.includes(s), _ = t(void 0);
+	!g && f !== void 0 && (_.current = f);
+	let v = g && _.current !== void 0 ? _.current : f;
 	return {
-		enabled: a,
-		loaded: o,
-		stale: s,
-		location: c,
-		elementData: l ?? null,
-		isServerElement: l !== void 0,
-		refresh: u
+		enabled: c,
+		loaded: l,
+		stale: u,
+		location: d,
+		elementData: v ?? null,
+		isServerElement: v !== void 0,
+		refresh: h
 	};
 };
 //#endregion
-export { i as default };
+export { o as default };

package/dist/dataSource/GlobalSources.mjs

@@ -1,70 +1,76 @@
-import { use as e, useCallback as t, useMemo as n } from "react";
-import { useCommonStore as r, useCommonStoreSync as i, useRenderSettings as a } from "@plitzi/sdk-shared/store";
-import { get as o } from "@plitzi/plitzi-ui/helpers";
-import { getPathsFromObeject as s } from "@plitzi/sdk-shared/helpers/utils";
-import c, { SPACE_THEME_AREA as l } from "@plitzi/sdk-shared/theme/useTheme";
-import u from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
-import d from "@plitzi/sdk-auth/AuthContext";
-import { resolveVariables as f } from "@plitzi/sdk-shared/dataSource";
-import p from "@plitzi/sdk-shared/hooks/useStableValue";
+import { use as e, useCallback as t, useMemo as n, useRef as r } from "react";
+import { useCommonStore as i, useCommonStoreSync as a, useRenderSettings as o } from "@plitzi/sdk-shared/store";
+import { get as s } from "@plitzi/plitzi-ui/helpers";
+import { getPathsFromObeject as c } from "@plitzi/sdk-shared/helpers/utils";
+import { evaluateComputed as l, resolveVariables as u } from "@plitzi/sdk-shared/dataSource";
+import d, { SPACE_THEME_AREA as f } from "@plitzi/sdk-shared/theme/useTheme";
+import p from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
+import m from "@plitzi/sdk-auth/AuthContext";
+import h from "@plitzi/sdk-shared/hooks/useStableValue";
 //#region src/dataSource/GlobalSources.tsx
-var m = ({ children: m }) => {
-	let { environment: h } = a(), [[g, _, v, y, b, x]] = r([
+var g = ({ children: g }) => {
+	let { environment: _ } = o(), [[v, y, b, x, S, C, w]] = i([
 		"schema.variables",
 		"navigation.routeParams",
 		"navigation.queryParams",
 		"navigation.hostname",
 		"navigation.origin",
+		"navigation.href",
 		"navigation.currentPageId"
-	]), S = p(n(() => f(g, {
-		routeParams: _,
-		queryParams: v,
-		hostname: y,
-		environment: h
+	]), T = h(n(() => u(v, {
+		routeParams: y,
+		queryParams: b,
+		hostname: x,
+		environment: _
 	}), [
-		h,
-		y,
-		v,
 		_,
-		g
-	])), C = t(() => s(S).map((e) => ({
+		x,
+		b,
+		y,
+		v
+	])), E = t(() => c(T).map((e) => ({
 		path: e,
 		name: `variables.${e}`
-	})), [S]);
-	u({
+	})), [T]);
+	p({
 		id: "global",
 		source: "variables",
 		name: "Variables",
-		fields: C
-	}), i("runtime.sources.variables", S);
-	let [w = {}] = r("pageDefinitions"), T = n(() => Object.values(w).map((e) => ({
+		fields: E
+	}), a("runtime.sources.variables", T);
+	let [D = {}] = i("pageDefinitions"), O = n(() => Object.values(D).map((e) => ({
 		value: e.id,
-		label: o(e, "attributes.name", e.id)
-	})), [w]), E = n(() => ({
-		routeParams: _,
-		queryParams: v,
-		origin: b,
-		currentPageId: x
+		label: s(e, "attributes.name", e.id)
+	})), [D]), k = n(() => ({
+		routeParams: y,
+		queryParams: b,
+		origin: S,
+		href: C,
+		currentPageId: w
 	}), [
-		_,
-		v,
+		y,
 		b,
-		x
-	]), D = t(() => {
-		let e = s({
-			routeParams: _,
-			queryParams: v
+		S,
+		C,
+		w
+	]), A = t(() => {
+		let e = c({
+			routeParams: y,
+			queryParams: b
 		}).map((e) => ({
 			path: e,
 			name: `navigation.${e}`
 		})), t = {
 			path: "origin",
 			name: "Origin"
-		}, n = T.length > 0 ? {
+		}, n = {
+			path: "href",
+			name: "This page’s address"
+		}, r = O.length > 0 ? {
 			path: "currentPageId",
 			name: "Current Page",
 			inputType: "select",
-			values: T
+			values: O
 		} : {
 			path: "currentPageId",
 			name: "Current Page"
@@ -72,79 +78,107 @@ var m = ({ children: m }) => {
 		return [
 			...e,
 			t,
-			n
+			n,
+			r
 		];
 	}, [
-		_,
-		v,
-		T
+		y,
+		b,
+		O
 	]);
-	u({
+	p({
 		id: "global",
 		source: "navigation",
 		name: "Navigation",
-		fields: D
-	}), i("runtime.sources.navigation", E);
-	let { user: O, authenticated: k, state: A } = e(d), [j = "basic"] = r("schema.settings.userProvider"), M = n(() => j === "" ? {} : {
-		isAuthenticated: k,
-		...A === void 0 ? {} : { status: A },
-		accessToken: O?.accessToken ?? "",
+		fields: A
+	}), a("runtime.sources.navigation", k);
+	let { user: j, authenticated: M, state: N } = e(m), [P = "basic"] = i("schema.settings.userProvider"), F = n(() => P === "" ? {} : {
+		isAuthenticated: M,
+		...N === void 0 ? {} : { status: N },
+		accessToken: j?.accessToken ?? "",
 		details: {
 			username: "",
 			email: "",
 			roles: "",
 			permissions: "",
 			verified: "",
-			...O?.details ?? {}
+			...j?.details ?? {}
 		}
 	}, [
+		P,
 		j,
-		O,
-		k,
-		A
-	]), N = t(() => s(M).map((e) => ({
+		M,
+		N
+	]), I = t(() => c(F).map((e) => ({
 		path: e,
 		name: `user.${e}`
-	})), [M]);
-	u({
+	})), [F]);
+	p({
 		id: "global",
 		source: "auth",
 		name: "Auth State",
-		fields: N
-	}), i("runtime.sources.auth", M);
-	let [P] = r("runtime.state"), F = t(() => s(P).map((e) => ({
+		fields: I
+	}), a("runtime.sources.auth", F);
+	let [L] = i("runtime.state"), R = t(() => c(L).map((e) => ({
 		path: e,
 		name: `state.${e}`
-	})), [P]);
-	u({
+	})), [L]);
+	p({
 		id: "global",
 		source: "state",
 		name: "State",
-		fields: F
-	}), i("runtime.sources.state", P);
-	let [I] = r("runtime.host"), L = t(() => s(I).map((e) => ({
+		fields: R
+	}), a("runtime.sources.state", L);
+	let [z] = i("runtime.host"), B = t(() => c(z).map((e) => ({
 		path: e,
 		name: `host.${e}`
-	})), [I]);
-	u({
+	})), [z]);
+	p({
 		id: "global",
 		source: "host",
 		name: "Host",
-		fields: L
-	}), i("runtime.sources.host", I);
-	let { theme: R, resolvedTheme: z } = c(l), B = n(() => ({
-		mode: R,
-		resolved: z
-	}), [R, z]), V = t(() => s(B).map((e) => ({
+		fields: B
+	}), a("runtime.sources.host", z);
+	let { theme: V, resolvedTheme: H } = d(f), U = n(() => ({
+		mode: V,
+		resolved: H
+	}), [V, H]), W = t(() => c(U).map((e) => ({
 		path: e,
 		name: `theme.${e}`
-	})), [B]);
-	return u({
+	})), [U]);
+	p({
 		id: "global",
 		source: "theme",
 		name: "Theme",
-		fields: V
-	}), i("runtime.sources.theme", B), m;
+		fields: W
+	}), a("runtime.sources.theme", U);
+	let [G] = i("schema.settings.computed"), K = r(void 0), q = n(() => l(G ?? {}, {
+		variables: T,
+		navigation: k,
+		auth: F,
+		state: L ?? {},
+		host: z ?? {},
+		theme: U
+	}, K.current), [
+		G,
+		T,
+		k,
+		F,
+		L,
+		z,
+		U
+	]);
+	K.current = q;
+	let J = t(() => c(q).map((e) => ({
+		path: e,
+		name: `computed.${e}`
+	})), [q]);
+	return p({
+		id: "global",
+		source: "computed",
+		name: "Computed",
+		fields: J
+	}), a("runtime.sources.computed", q), g;
 };
 //#endregion
-export { m as default };
+export { g as default };

package/dist/dataSource/getSourcesByElementId.mjs

@@ -1,8 +1,8 @@
-import e from "@plitzi/sdk-schema/helpers/FlatMap";
+import { renderContext as e } from "@plitzi/sdk-schema/helpers/elementTree";
 //#region src/dataSource/getSourcesByElementId.ts
 var t = (t = {}, n, r) => {
 	if (!r || !n) return {};
-	let i = e.parentTree(n, r);
+	let i = e(n, r);
 	return Object.values(t).filter((e) => e.meta.id === "global" || !!e.meta.id && i.includes(e.meta.id)).reduce((e, t) => ({
 		...e,
 		[t.id]: t

package/dist/elements/advanced/BlockJsx/BlockJsx.mjs

@@ -29,7 +29,7 @@ var d = ({ ref: e, className: d = "", props: f = "{}", contentCache: p = "", ...
 				...e
 			};
 		} catch (e) {
-			console.log(e);
+			console.error(e);
 		}
 	}, [f, m]), w = r(async (e) => {
 		let t, n;

package/dist/elements/advanced/NodeHtml/declaration.d.ts

@@ -78,6 +78,7 @@ declare const declaration: {
     defaultValue?: string | number | readonly string[] | undefined;
     onLoad?: import('react').ReactEventHandler<"span"> | undefined;
     onClick?: import('react').MouseEventHandler<"span"> | undefined;
+    onPointerDown?: import('react').PointerEventHandler<"span"> | undefined;
     onMouseEnter?: import('react').MouseEventHandler<"span"> | undefined;
     onMouseLeave?: import('react').MouseEventHandler<"span"> | undefined;
     onFocus?: import('react').FocusEventHandler<"span"> | undefined;
@@ -266,7 +267,6 @@ declare const declaration: {
     onTouchMoveCapture?: import('react').TouchEventHandler<"span"> | undefined;
     onTouchStart?: import('react').TouchEventHandler<"span"> | undefined;
     onTouchStartCapture?: import('react').TouchEventHandler<"span"> | undefined;
-    onPointerDown?: import('react').PointerEventHandler<"span"> | undefined;
     onPointerDownCapture?: import('react').PointerEventHandler<"span"> | undefined;
     onPointerMove?: import('react').PointerEventHandler<"span"> | undefined;
     onPointerMoveCapture?: import('react').PointerEventHandler<"span"> | undefined;

package/dist/elements/advanced/NodeHtml/index.d.ts

@@ -70,6 +70,7 @@ declare const NodeHtml: {
     defaultValue?: string | number | readonly string[] | undefined;
     onLoad?: import('react').ReactEventHandler<"span"> | undefined;
     onClick?: import('react').MouseEventHandler<"span"> | undefined;
+    onPointerDown?: import('react').PointerEventHandler<"span"> | undefined;
     onMouseEnter?: import('react').MouseEventHandler<"span"> | undefined;
     onMouseLeave?: import('react').MouseEventHandler<"span"> | undefined;
     onFocus?: import('react').FocusEventHandler<"span"> | undefined;
@@ -258,7 +259,6 @@ declare const NodeHtml: {
     onTouchMoveCapture?: import('react').TouchEventHandler<"span"> | undefined;
     onTouchStart?: import('react').TouchEventHandler<"span"> | undefined;
     onTouchStartCapture?: import('react').TouchEventHandler<"span"> | undefined;
-    onPointerDown?: import('react').PointerEventHandler<"span"> | undefined;
     onPointerDownCapture?: import('react').PointerEventHandler<"span"> | undefined;
     onPointerMove?: import('react').PointerEventHandler<"span"> | undefined;
     onPointerMoveCapture?: import('react').PointerEventHandler<"span"> | undefined;

package/dist/elements/basic/Button/Button.d.ts

@@ -20,12 +20,19 @@ export type ButtonProps = {
      * What the button does, in words — shown as a tooltip on hover, and the button's accessible name when it has no text
      * of its own. An icon-only button without one is announced as nothing at all.
      *
-     * The browser falls back to it by itself, so it is never copied into `aria-label`: an `aria-label` would win over a
-     * visually-hidden label among the children, which is how a button with an empty `content` names itself.
+     * The browser falls back to it by itself, so it is never copied into `aria-label` — and neither is `content`: the
+     * button's name is what it SHOWS, content and children together. An `aria-label` taken from `content` named a button
+     * whose words were among its children after the default "Button" instead.
      */
     title?: string;
+    /**
+     * The button's name, for when the words it shows do not say what it does: a key hint beside an icon ("V"), a count,
+     * an arrow. Read in place of everything inside it by screen readers and browser agents, so it says the whole of it —
+     * "Select (V)". Left empty, the button is named by what it shows, then by `title`.
+     */
+    label?: string;
 };
-declare const Button: ({ ref, className, children, contentPlacement, content, subType, disabled, ariaExpanded, ariaPressed, title }: ButtonProps) => import('react').JSX.Element;
+declare const Button: ({ ref, className, children, contentPlacement, content, subType, disabled, ariaExpanded, ariaPressed, title, label }: ButtonProps) => import('react').JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<ButtonProps>): import('react').JSX.Element;
     displayName: string;

package/dist/elements/basic/Button/Button.mjs

@@ -4,16 +4,16 @@ import n from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
 import { jsxs as r } from "react/jsx-runtime";
 import i from "clsx";
 //#region src/elements/basic/Button/Button.tsx
-var a = ({ ref: e, className: a = "", children: o, contentPlacement: s = "after", content: c = "Button", subType: l = "button", disabled: u = !1, ariaExpanded: d, ariaPressed: f, title: p }) => {
-	let { settings: { previewMode: m } } = n();
+var a = ({ ref: e, className: a = "", children: o, contentPlacement: s = "after", content: c = "Button", subType: l = "button", disabled: u = !1, ariaExpanded: d, ariaPressed: f, title: p, label: m }) => {
+	let { settings: { previewMode: h } } = n();
 	return /* @__PURE__ */ r(t, {
 		ref: e,
 		tag: "button",
-		type: m ? l : "button",
-		className: i("plitzi-component__button", a, { "container--empty--skip": !m && !o && c }),
+		type: h ? l : "button",
+		className: i("plitzi-component__button", a, { "container--empty--skip": !h && !o && c }),
 		disabled: u,
-		"aria-label": c || void 0,
 		title: p || void 0,
+		"aria-label": m || void 0,
 		"aria-expanded": d,
 		"aria-pressed": f,
 		children: [

package/dist/elements/basic/Button/Settings.d.ts

@@ -4,7 +4,8 @@ type SettingsProps = {
     subType?: 'button' | 'reset' | 'submit';
     disabled?: boolean;
     title?: string;
+    label?: string;
     onUpdate?: (key: string, value: string | number | boolean) => void;
 };
-declare const Settings: ({ content, contentPlacement, subType, disabled, title, onUpdate }: SettingsProps) => import('react').JSX.Element;
+declare const Settings: ({ content, contentPlacement, subType, disabled, title, label, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

package/dist/elements/basic/Button/Settings.mjs

@@ -4,28 +4,35 @@ import r from "@plitzi/plitzi-ui/Checkbox";
 import i from "@plitzi/plitzi-ui/Input";
 import a from "@plitzi/plitzi-ui/Select";
 //#region src/elements/basic/Button/Settings.tsx
-var o = ({ content: o = "Button", contentPlacement: s = "after", subType: c = "button", disabled: l = !1, title: u = "", onUpdate: d }) => {
-	let f = e((e) => d?.("content", e), [d]), p = e((e) => d?.("contentPlacement", e), [d]), m = e((e) => d?.("subType", e), [d]), h = e((e) => d?.("title", e), [d]), g = e((e) => d?.("disabled", e.target.checked), [d]);
+var o = ({ content: o = "Button", contentPlacement: s = "after", subType: c = "button", disabled: l = !1, title: u = "", label: d = "", onUpdate: f }) => {
+	let p = e((e) => f?.("content", e), [f]), m = e((e) => f?.("contentPlacement", e), [f]), h = e((e) => f?.("subType", e), [f]), g = e((e) => f?.("title", e), [f]), _ = e((e) => f?.("label", e), [f]), v = e((e) => f?.("disabled", e.target.checked), [f]);
 	return /* @__PURE__ */ n("div", {
 		className: "flex h-full flex-col gap-4 py-2",
 		children: [
 			/* @__PURE__ */ t(i, {
 				value: o,
 				label: "Content",
-				onChange: f,
+				onChange: p,
 				size: "xs"
 			}),
 			/* @__PURE__ */ t(i, {
 				value: u,
 				label: "Tooltip",
 				placeholder: "What the button does, for an icon-only one",
-				onChange: h,
+				onChange: g,
+				size: "xs"
+			}),
+			/* @__PURE__ */ t(i, {
+				value: d,
+				label: "Accessible Name",
+				placeholder: "When its words do not say what it does",
+				onChange: _,
 				size: "xs"
 			}),
 			/* @__PURE__ */ n(a, {
 				value: s,
 				label: "Mode",
-				onChange: p,
+				onChange: m,
 				size: "xs",
 				children: [
 					/* @__PURE__ */ t("option", {
@@ -45,7 +52,7 @@ var o = ({ content: o = "Button", contentPlacement: s = "after", subType: c = "b
 			/* @__PURE__ */ n(a, {
 				value: c,
 				label: "Button Type",
-				onChange: m,
+				onChange: h,
 				size: "xs",
 				children: [
 					/* @__PURE__ */ t("option", {
@@ -65,7 +72,7 @@ var o = ({ content: o = "Button", contentPlacement: s = "after", subType: c = "b
 			/* @__PURE__ */ t(r, {
 				checked: l,
 				label: "Is Disabled",
-				onChange: g,
+				onChange: v,
 				size: "xs"
 			})
 		]