@plitzi/sdk-elements 0.37.2 → 0.37.3

package/dist/elements/structure/Container/Settings.mjs

@@ -1,76 +1,117 @@
 import { useCallback as e } from "react";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import r from "@plitzi/plitzi-ui/Select";
+import r from "@plitzi/plitzi-ui/Checkbox";
+import i from "@plitzi/plitzi-ui/Input";
+import a from "@plitzi/plitzi-ui/Select";
 //#region src/elements/structure/Container/Settings.tsx
-var i = ({ subType: i = "div", onUpdate: a }) => {
-	let o = e((e) => (t) => a?.(e, t), [a]);
-	return /* @__PURE__ */ t("div", {
+var o = ({ subType: o = "div", label: s = "", decorative: c = !1, onUpdate: l }) => {
+	let u = e((e) => (t) => l?.(e, t), [l]), d = e((e) => l?.("decorative", e.target.checked), [l]);
+	return /* @__PURE__ */ n("div", {
 		className: "flex flex-col gap-4 py-2",
-		children: /* @__PURE__ */ n(r, {
-			label: "ContainerTag",
-			value: i,
-			onChange: o("subType"),
-			size: "xs",
-			children: [
-				/* @__PURE__ */ t("option", {
-					value: "div",
-					children: "Div"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "header",
-					children: "Header"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "footer",
-					children: "Footer"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "nav",
-					children: "Nav"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "main",
-					children: "Main"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "section",
-					children: "Section"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "article",
-					children: "Article"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "aside",
-					children: "Aside"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "address",
-					children: "Address"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "figure",
-					children: "Figure"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "dl",
-					children: "DL"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "dt",
-					children: "DT"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "dd",
-					children: "DD"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "li",
-					children: "LI"
-				})
-			]
-		})
+		children: [
+			/* @__PURE__ */ n(a, {
+				label: "ContainerTag",
+				value: o,
+				onChange: u("subType"),
+				size: "xs",
+				children: [
+					/* @__PURE__ */ t("option", {
+						value: "div",
+						children: "Div"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "header",
+						children: "Header"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "footer",
+						children: "Footer"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "nav",
+						children: "Nav"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "main",
+						children: "Main"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "section",
+						children: "Section"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "article",
+						children: "Article"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "aside",
+						children: "Aside"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "address",
+						children: "Address"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "figure",
+						children: "Figure"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "dl",
+						children: "DL"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "dt",
+						children: "DT"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "dd",
+						children: "DD"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "li",
+						children: "LI"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "h1",
+						children: "H1 (heading with parts)"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "h2",
+						children: "H2 (heading with parts)"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "h3",
+						children: "H3 (heading with parts)"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "h4",
+						children: "H4 (heading with parts)"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "h5",
+						children: "H5 (heading with parts)"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "h6",
+						children: "H6 (heading with parts)"
+					})
+				]
+			}),
+			/* @__PURE__ */ t(i, {
+				value: s,
+				label: "Region Name",
+				placeholder: "e.g. Main navigation, Search results",
+				onChange: u("label"),
+				size: "xs"
+			}),
+			/* @__PURE__ */ t(r, {
+				checked: c,
+				label: "Decorative (hidden from screen readers)",
+				onChange: d,
+				size: "xs"
+			})
+		]
 	});
 };
 //#endregion
-export { i as default };
+export { o as default };

package/dist/elements/structure/Container/declaration.d.ts

@@ -2,8 +2,17 @@ import { ContainerProps } from './Container';
 import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
 /** What this element can be authored with — its component's own props, minus what the runtime supplies. */
 export type ContainerAttributes = AuthorableAttributes<ContainerProps>;
+/**
+ * The tags a `label` names: a landmark (`nav`, `main`, `aside`…), a `section` — which a name turns into a region an
+ * assistant can jump to — and a `div`, which is then a named group. The rest either take their name from what they
+ * hold (a heading, a list item) or refuse one outright, so a label on them would be read by nobody.
+ */
+export declare const NAMEABLE_CONTAINER_TAGS: readonly NonNullable<ContainerProps['subType']>[];
 declare const declaration: {
     readonly type: "container";
+    readonly attributeValues: {
+        readonly subType: readonly string[];
+    };
     readonly content: {
         readonly attributes: {
             readonly subType: "div";
@@ -52,6 +61,8 @@ declare const declaration: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-    subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | undefined;
+    label?: string | undefined;
+    subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    decorative?: boolean | undefined;
 }>>;
 export default declaration;

package/dist/elements/structure/Container/declaration.mjs

@@ -1,7 +1,39 @@
-import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+import { elementDeclaration as e, valuesOf as t } from "@plitzi/sdk-shared/authoring/declare";
 //#region src/elements/structure/Container/declaration.ts
-var t = e()({
+var n = [
+	"div",
+	"header",
+	"footer",
+	"nav",
+	"main",
+	"section",
+	"article",
+	"aside",
+	"figure"
+], r = e()({
 	type: "container",
+	attributeValues: { subType: t()([
+		"div",
+		"header",
+		"footer",
+		"nav",
+		"main",
+		"section",
+		"article",
+		"aside",
+		"address",
+		"figure",
+		"dl",
+		"dt",
+		"dd",
+		"li",
+		"h1",
+		"h2",
+		"h3",
+		"h4",
+		"h5",
+		"h6"
+	]) },
 	content: {
 		attributes: { subType: "div" },
 		definition: {
@@ -41,4 +73,4 @@ var t = e()({
 	}
 });
 //#endregion
-export { t as default };
+export { n as NAMEABLE_CONTAINER_TAGS, r as default };

package/dist/elements/structure/Container/index.d.ts

@@ -3,6 +3,9 @@ declare const Container: {
     displayName: string;
 } & {
     readonly type: "container";
+    readonly attributeValues: {
+        readonly subType: readonly string[];
+    };
     readonly content: {
         readonly attributes: {
             readonly subType: "div";
@@ -51,6 +54,8 @@ declare const Container: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-    subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | undefined;
+    label?: string | undefined;
+    subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    decorative?: boolean | undefined;
 }>>;
 export default Container;

package/dist/elements/structure/Container/index.mjs

@@ -1,6 +1,6 @@
-import e from "./Container.mjs";
-import t from "./declaration.mjs";
+import e from "./declaration.mjs";
+import t from "./Container.mjs";
 //#region src/elements/structure/Container/index.ts
-var n = Object.assign(e, t);
+var n = Object.assign(t, e);
 //#endregion
 export { n as default };

package/dist/elements/structure/DialogContainer/DialogContainer.mjs

@@ -3,155 +3,178 @@ import t from "../../../Element/hooks/useElement.mjs";
 import { RootElement as n } from "../../../Element/RootElement.mjs";
 import r from "../../../dataSource/pathFields.mjs";
 import i from "./declaration.mjs";
-import { use as a, useCallback as o, useEffect as s, useMemo as c, useState as l } from "react";
-import u from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { StoreProvider as d } from "@plitzi/nexus/react";
-import { emptyObject as f } from "@plitzi/sdk-shared/helpers/utils";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import h from "clsx";
-import g from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
-import _ from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
+import a from "../ModalContainer/useModalDialog.mjs";
+import { use as o, useCallback as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
+import f from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { StoreProvider as p } from "@plitzi/nexus/react";
+import { emptyObject as m } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import _ from "clsx";
+import v from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
+import y from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
 //#region src/elements/structure/DialogContainer/DialogContainer.tsx
-var v = ({ ref: e, className: v = "", children: y, headerLabel: b = "Dialog Header", acceptButtonLabel: x = "Accept", acceptButtonLabelLoading: S = "Loading...", rejectButtonLabel: C = "Cancel", autoHideAfterClick: w = !0 }) => {
-	let { id: T, setElementState: E, definition: { styleSelectors: D, label: O = "Dialog" }, elementState: k } = t(), A = g(i.sourceType, T), { contexts: { InteractionsContext: j } } = u(), { interactionsManager: M } = a(j), [N, P] = l({}), [F, I] = l(!1), L = o((e) => {
+var b = ({ ref: e, className: b = "", children: x, headerLabel: S = "Dialog Header", acceptButtonLabel: C = "Accept", acceptButtonLabelLoading: w = "Loading...", rejectButtonLabel: T = "Cancel", autoHideAfterClick: E = !0 }) => {
+	let { id: D, rootId: O, visible: k, setElementState: A, definition: { styleSelectors: j, label: M = "Dialog" }, elementState: N } = t(), P = v(i.sourceType, D), { settings: { previewMode: F }, contexts: { InteractionsContext: I } } = f(), { interactionsManager: L } = o(I), [R, z] = d({}), [B, V] = d(!1), H = u(null), U = `${O}_${D}_title`, W = s((e) => {
 		let { metadata: t } = e;
-		if (t && typeof t == "object") P(t);
+		if (t && typeof t == "object") z(t);
 		else if (typeof t == "string") try {
-			P(JSON.parse(t));
+			z(JSON.parse(t));
 		} catch {
-			P({ content: t });
+			z({ content: t });
 		}
-		else P(typeof t == "boolean" || typeof t == "number" ? { content: t } : {});
-		E((e) => ({
+		else z(typeof t == "boolean" || typeof t == "number" ? { content: t } : {});
+		A((e) => ({
 			...e,
 			visibility: !0
 		}));
-	}, [E, P]), R = o(() => {
-		M.interactionTrigger(T, "onDialogClose", { metadata: N }), P({}), E((e) => ({
+	}, [A, z]), G = s(() => {
+		L.interactionTrigger(D, "onDialogClose", { metadata: R }), z({}), A((e) => ({
 			...e,
 			visibility: !1
 		}));
 	}, [
-		M,
-		E,
-		P,
-		N,
-		T
-	]), z = o(() => {
-		w && (M.interactionTrigger(T, "onDialogClose", { metadata: N }), P({}), E((e) => ({
+		L,
+		A,
+		z,
+		R,
+		D
+	]), K = s(() => {
+		E && (L.interactionTrigger(D, "onDialogClose", { metadata: R }), z({}), A((e) => ({
 			...e,
 			visibility: !1
 		})));
 	}, [
-		M,
-		w,
+		L,
 		E,
-		P,
-		N,
-		T
-	]), B = o(async () => {
-		I(!0), await M.interactionTrigger(T, "onDialogAccept", { metadata: N }), I(!1), E((e) => ({
+		A,
+		z,
+		R,
+		D
+	]), q = s(async () => {
+		V(!0), await L.interactionTrigger(D, "onDialogAccept", { metadata: R }), V(!1), A((e) => ({
 			...e,
 			visibility: !1
 		}));
 	}, [
-		M,
-		T,
-		N,
-		E
-	]), V = o(async () => {
-		I(!0), await M.interactionTrigger(T, "onDialogReject", { metadata: N }), I(!1), E((e) => ({
+		L,
+		D,
+		R,
+		A
+	]), J = s(async () => {
+		V(!0), await L.interactionTrigger(D, "onDialogReject", { metadata: R }), V(!1), A((e) => ({
 			...e,
 			visibility: !1
 		}));
 	}, [
-		M,
-		T,
-		N,
-		E
-	]), H = c(() => ({
+		L,
+		D,
+		R,
+		A
+	]), Y = l(() => ({
 		openDialog: {
 			...i.callbacks.openDialog,
-			title: `Open ${O}`,
-			callback: L
+			title: `Open ${M}`,
+			callback: W
 		},
 		closeDialog: {
 			...i.callbacks.closeDialog,
-			title: `Close ${O}`,
-			callback: R
+			title: `Close ${M}`,
+			callback: G
 		}
 	}), [
-		R,
-		L,
-		O
+		G,
+		W,
+		M
 	]);
-	s(() => {
-		k.visibility !== !1 && M.interactionTrigger(T, "onDialogOpen", { metadata: N });
+	a({
+		panelRef: H,
+		open: !!F && k,
+		onClose: () => void J()
+	}), c(() => {
+		N.visibility !== !1 && L.interactionTrigger(D, "onDialogOpen", { metadata: R });
 	}, [
-		T,
-		M,
-		N,
-		k.visibility
+		D,
+		L,
+		R,
+		N.visibility
 	]);
-	let U = o(() => r(N), [N]);
-	_({
-		id: T,
-		source: A,
-		name: O || `Dialog - ${T}`,
-		fields: U
+	let X = s(() => r(R), [R]);
+	y({
+		id: D,
+		source: P,
+		name: M || `Dialog - ${D}`,
+		fields: X
 	});
-	let W = c(() => A ? { runtime: { sources: { [A]: N } } } : f, [A, N]);
-	return /* @__PURE__ */ m(n, {
+	let Z = l(() => P ? { runtime: { sources: { [P]: R } } } : m, [P, R]);
+	return /* @__PURE__ */ g(n, {
 		ref: e,
-		className: h("plitzi-component__dialog-container", v),
+		className: _("plitzi-component__dialog-container", b),
 		interactionTriggers: i.triggers,
-		interactionCallbacks: H,
-		children: [/* @__PURE__ */ p("div", {
-			className: h("dialog-container__background", D.backgroundContainer),
-			onClick: z
-		}), /* @__PURE__ */ m("div", {
-			className: h("dialog-container__root", D.rootContainer),
+		interactionCallbacks: Y,
+		children: [/* @__PURE__ */ h("div", {
+			className: _("dialog-container__background", j.backgroundContainer),
+			"aria-hidden": "true",
+			onClick: K
+		}), /* @__PURE__ */ g("div", {
+			ref: H,
+			className: _("dialog-container__root", j.rootContainer),
+			role: "alertdialog",
+			"aria-modal": "true",
+			"aria-labelledby": U,
+			tabIndex: -1,
 			children: [
-				/* @__PURE__ */ m("div", {
-					className: h("dialog-container__header", D.headerContainer),
-					children: [/* @__PURE__ */ p("div", {
-						className: h("dialog-container__header__title", D.headerTitle),
-						children: b || "Dialog Header"
-					}), /* @__PURE__ */ p("i", {
-						className: "fa-solid fa-xmark",
+				/* @__PURE__ */ g("div", {
+					className: _("dialog-container__header", j.headerContainer),
+					children: [/* @__PURE__ */ h("div", {
+						id: U,
+						className: _("dialog-container__header__title", j.headerTitle),
+						children: S || "Dialog Header"
+					}), /* @__PURE__ */ h("button", {
+						type: "button",
+						className: "dialog-container__close",
+						"aria-label": "Close",
 						title: "Close",
-						onClick: V
+						onClick: J,
+						children: /* @__PURE__ */ h("i", {
+							className: "fa-solid fa-xmark",
+							"aria-hidden": "true"
+						})
 					})]
 				}),
-				/* @__PURE__ */ p("div", {
-					className: h("dialog-container__body", D.body),
-					children: /* @__PURE__ */ p(d, {
+				/* @__PURE__ */ h("div", {
+					className: _("dialog-container__body", j.body),
+					children: /* @__PURE__ */ h(p, {
 						inherit: "live",
-						name: `Dialog:${T}`,
-						value: W,
-						children: y
+						name: `Dialog:${D}`,
+						value: Z,
+						children: x
 					})
 				}),
-				/* @__PURE__ */ m("div", {
-					className: h("dialog-container__footer", D.footerContainer),
-					children: [/* @__PURE__ */ m("button", {
-						className: h("footer__button button--accept", D.acceptButton),
-						onClick: B,
-						disabled: F,
-						children: [F && /* @__PURE__ */ m("div", {
+				/* @__PURE__ */ g("div", {
+					className: _("dialog-container__footer", j.footerContainer),
+					children: [/* @__PURE__ */ g("button", {
+						type: "button",
+						className: _("footer__button button--accept", j.acceptButton),
+						onClick: q,
+						disabled: B,
+						children: [B && /* @__PURE__ */ g("div", {
 							className: "button--accept__container",
-							children: [/* @__PURE__ */ p("i", { className: "fa-solid fa-rotate fa-spin" }), S]
-						}), !F && x]
-					}), /* @__PURE__ */ p("button", {
-						className: h("footer__button button--cancel", D.cancelButton),
-						onClick: V,
-						disabled: F,
-						children: C
+							children: [/* @__PURE__ */ h("i", {
+								className: "fa-solid fa-rotate fa-spin",
+								"aria-hidden": "true"
+							}), w]
+						}), !B && C]
+					}), /* @__PURE__ */ h("button", {
+						type: "button",
+						className: _("footer__button button--cancel", j.cancelButton),
+						onClick: J,
+						disabled: B,
+						children: T
 					})]
 				})
 			]
 		})]
 	});
-}, y = e(v);
+}, x = e(b);
 //#endregion
-export { v as DialogContainer, y as default };
+export { b as DialogContainer, x as default };

package/dist/elements/structure/List/declaration.d.ts

@@ -4,6 +4,10 @@ import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
 export type ListAttributes = AuthorableAttributes<ListProps>;
 declare const declaration: {
     readonly type: "list";
+    readonly attributeValues: {
+        readonly subType: readonly string[];
+        readonly source: readonly string[];
+    };
     readonly sourceType: "list";
     readonly content: {
         readonly attributes: {

package/dist/elements/structure/List/declaration.mjs

@@ -1,7 +1,11 @@
-import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+import { elementDeclaration as e, valuesOf as t } from "@plitzi/sdk-shared/authoring/declare";
 //#region src/elements/structure/List/declaration.ts
-var t = e()({
+var n = e()({
 	type: "list",
+	attributeValues: {
+		subType: t()(["ul", "ol"]),
+		source: t()(["none", "controlled"])
+	},
 	sourceType: "list",
 	content: {
 		attributes: {
@@ -70,4 +74,4 @@ var t = e()({
 	]
 });
 //#endregion
-export { t as default };
+export { n as default };

package/dist/elements/structure/List/index.d.ts

@@ -55,6 +55,10 @@ declare const List: {
         } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
     };
     type: "list";
+    attributeValues: {
+        readonly subType: readonly string[];
+        readonly source: readonly string[];
+    };
     sourceType: "list";
     content: {
         readonly attributes: {