@plitzi/sdk-elements 0.37.1 → 0.37.3

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

@@ -1,9 +1,55 @@
 declare const ModalContainer: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./ModalContainer').ModalContainerProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./ModalContainer').ModalContainerProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     readonly type: "modalContainer";
     readonly sourceType: "modalContainer";
+    readonly triggers: {
+        readonly onModalOpen: {
+            readonly action: "onModalOpen";
+            readonly title: "On Modal Open";
+            readonly type: "trigger";
+            readonly params: {
+                readonly metadata: {
+                    readonly type: "text";
+                    readonly defaultValue: "";
+                };
+            };
+            readonly preview: {
+                readonly metadata: "";
+            };
+        };
+        readonly onModalClose: {
+            readonly action: "onModalClose";
+            readonly title: "On Modal Close";
+            readonly type: "trigger";
+            readonly preview: {};
+            readonly params: {};
+        };
+    };
+    readonly callbacks: {
+        readonly openModal: {
+            readonly action: "openModal";
+            readonly title: "Open Modal";
+            readonly type: "callback";
+            readonly params: {
+                readonly metadata: {
+                    readonly type: "text";
+                    readonly defaultValue: "";
+                };
+            };
+            readonly preview: {
+                readonly metadata: "";
+            };
+        };
+        readonly closeModal: {
+            readonly action: "closeModal";
+            readonly title: "Close Modal";
+            readonly type: "callback";
+            readonly params: {};
+            readonly preview: {};
+        };
+    };
     readonly content: {
         readonly attributes: {
             readonly title: "Modal Header";
@@ -80,7 +126,7 @@ declare const ModalContainer: {
                         readonly left: "50%";
                         readonly width: "500px";
                         readonly height: "300px";
-                        readonly 'background-color': "white";
+                        readonly 'background-color': "light-dark(white, oklch(0.21 0.006 285.885))";
                         readonly transform: "translate3d(-50%, -50%, 0px)";
                         readonly 'border-top-left-radius': "8px";
                         readonly 'border-top-right-radius': "8px";
@@ -94,7 +140,7 @@ declare const ModalContainer: {
                         readonly 'align-items': "center";
                         readonly 'justify-content': "space-between";
                         readonly 'border-bottom-width': "1px";
-                        readonly 'border-bottom-color': "#d1d5db";
+                        readonly 'border-bottom-color': "light-dark(#d1d5db, oklch(0.37 0.013 285.805))";
                         readonly 'border-bottom-style': "solid";
                         readonly 'padding-left': "20px";
                         readonly 'padding-right': "20px";

package/dist/elements/structure/ModalContainer/metadataFromText.d.ts

@@ -0,0 +1 @@
+export declare const metadataFromText: (metadata: string) => Record<string, unknown>;

package/dist/elements/structure/ModalContainer/metadataFromText.mjs

@@ -0,0 +1,10 @@
+//#region src/elements/structure/ModalContainer/metadataFromText.ts
+var e = (e) => typeof e == "object" && !!e && !Array.isArray(e), t = (t) => {
+	try {
+		let n = JSON.parse(t);
+		if (e(n)) return n;
+	} catch {}
+	return { content: t };
+};
+//#endregion
+export { t as metadataFromText };

package/dist/elements/structure/ModalContainer/useModalDialog.d.ts

@@ -0,0 +1,20 @@
+import { RefObject } from 'react';
+export type UseModalDialogProps = {
+    /** The box that holds the dialog's content: what takes the focus, and what the focus is kept inside. */
+    panelRef: RefObject<HTMLElement | null>;
+    /** Shown, and on a rendered page — never in the builder, where the modal is something being edited. */
+    open: boolean;
+    /** What Escape does: the same as the close button. */
+    onClose: () => void;
+};
+/**
+ * What `aria-modal` promises, kept: while a modal is open the keyboard lives inside it.
+ *
+ * - **The focus moves in** as it opens — to the panel itself, so a screen reader reads its name first; a control inside
+ *   that took the focus on its own (`autoFocus`) keeps it.
+ * - **Tab and Shift+Tab go round** the panel's controls instead of walking out into the page behind it.
+ * - **Escape closes it**, as its close button does.
+ * - **The focus goes back** to whatever had it before, so a person — or a browser agent — carries on where they were.
+ */
+declare const useModalDialog: ({ panelRef, open, onClose }: UseModalDialogProps) => void;
+export default useModalDialog;

package/dist/elements/structure/ModalContainer/useModalDialog.mjs

@@ -0,0 +1,31 @@
+import { useEffect as e, useEffectEvent as t } from "react";
+//#region src/elements/structure/ModalContainer/useModalDialog.ts
+var n = "a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]), [contenteditable=\"true\"]", r = (e) => [...e.querySelectorAll(n)].filter((e) => typeof e.checkVisibility != "function" || e.checkVisibility()), i = ({ panelRef: n, open: i, onClose: a }) => {
+	let o = t(a);
+	e(() => {
+		let e = n.current;
+		if (!i || !e) return;
+		let t = e.ownerDocument.activeElement;
+		e.contains(t) || e.focus({ preventScroll: !0 });
+		let a = (t) => {
+			if (t.defaultPrevented) return;
+			if (t.key === "Escape") {
+				t.preventDefault(), o();
+				return;
+			}
+			if (t.key !== "Tab") return;
+			let n = r(e);
+			if (n.length === 0) {
+				t.preventDefault(), e.focus({ preventScroll: !0 });
+				return;
+			}
+			let i = n[0], a = n[n.length - 1], s = e.ownerDocument.activeElement;
+			t.shiftKey && (s === i || s === e || !e.contains(s)) ? (t.preventDefault(), a.focus()) : !t.shiftKey && (s === a || !e.contains(s)) && (t.preventDefault(), i.focus());
+		}, s = e.ownerDocument.defaultView;
+		return s?.addEventListener("keydown", a), () => {
+			s?.removeEventListener("keydown", a), t instanceof HTMLElement && t.isConnected && t.focus({ preventScroll: !0 });
+		};
+	}, [i, n]);
+};
+//#endregion
+export { i as default };

package/dist/elements/structure/Pagination/Pagination.d.ts

@@ -24,6 +24,11 @@ export type PaginationProps = {
     previousLabel?: string;
     nextLabel?: string;
     loadMoreLabel?: string;
+    /**
+     * The pager's name, in the site's language: a page often has more than one navigation, and a screen reader or a
+     * browser agent lists them by name.
+     */
+    label?: string;
 };
 /**
  * Renders a pager over any `pageInfo`-shaped source.
@@ -32,9 +37,9 @@ export type PaginationProps = {
  * interaction mode it only announces the page the visitor asked for. A plugin that publishes the same shape gets a
  * working pager for free.
  */
-declare const Pagination: ({ ref, className, children, pageInfo, mode, pageParam, target, windowSize, previousLabel, nextLabel, loadMoreLabel }: PaginationProps) => import("react").JSX.Element;
+declare const Pagination: ({ ref, className, children, pageInfo, mode, pageParam, target, windowSize, previousLabel, nextLabel, loadMoreLabel, label }: PaginationProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<PaginationProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<PaginationProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

package/dist/elements/structure/Pagination/Pagination.mjs

@@ -1,83 +1,80 @@
 import e from "../../../Element/hocs/withElement.mjs";
 import t from "../../../Element/hooks/useElement.mjs";
 import { RootElement as n } from "../../../Element/RootElement.mjs";
-import r from "./buildPageWindow.mjs";
-import { use as i, useCallback as a, useMemo as o } from "react";
-import s from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { useSdkStore as c } from "@plitzi/sdk-shared/store";
-import { emptyObject as l } from "@plitzi/sdk-shared/helpers/utils";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
-import p from "clsx";
+import r from "./declaration.mjs";
+import i from "./buildPageWindow.mjs";
+import { use as a, useCallback as o, useMemo as s } from "react";
+import c from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { useSdkStore as l } from "@plitzi/sdk-shared/store";
+import { emptyObject as u } from "@plitzi/sdk-shared/helpers/utils";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import m from "clsx";
 //#region src/elements/structure/Pagination/Pagination.tsx
-var m = (e, t) => {
+var h = (e, t) => {
 	if (typeof window > "u") return "";
 	let n = new URL(window.location.href);
 	return t <= 1 ? n.searchParams.delete(e) : n.searchParams.set(e, String(t)), `${n.pathname}${n.search}`;
-}, h = ({ ref: e, className: h = "", children: g, pageInfo: _ = l, mode: v = "pages", pageParam: y = "page", target: b = "url", windowSize: x = 5, previousLabel: S = "Previous", nextLabel: C = "Next", loadMoreLabel: w = "Load more" }) => {
-	let { id: T } = t(), { settings: { previewMode: E }, contexts: { InteractionsContext: D } } = s(), { interactionsManager: O } = i(D), [k] = c("navigation.navigate"), A = _.page ?? 1, j = _.pageCount ?? 0, M = _.hasPrevPage ?? A > 1, N = _.hasNextPage ?? !1, P = o(() => r(A, j, x), [
-		A,
-		j,
-		x
-	]), F = a((e) => {
+}, g = ({ ref: e, className: g = "", children: _, pageInfo: v = u, mode: y = "pages", pageParam: b = "page", target: x = "url", windowSize: S = 5, previousLabel: C = "Previous", nextLabel: w = "Next", loadMoreLabel: T = "Load more", label: E = "Pagination" }) => {
+	let { id: D } = t(), { settings: { previewMode: O }, contexts: { InteractionsContext: k } } = c(), { interactionsManager: A } = a(k), [j] = l("navigation.navigate"), M = v.page ?? 1, N = v.pageCount ?? 0, P = v.hasPrevPage ?? M > 1, F = v.hasNextPage ?? !1, I = s(() => i(M, N, S), [
+		M,
+		N,
+		S
+	]), L = o((e) => {
 		let t = Math.max(e, 1);
-		T && O.interactionTrigger(T, "onPageChange", { page: t }), b === "url" && k(m(y, t));
+		D && A.interactionTrigger(D, "onPageChange", { page: t }), x === "url" && j(h(b, t));
 	}, [
-		T,
-		O,
-		b,
-		k,
-		y
-	]), I = a((e) => (t) => {
-		t.preventDefault(), F(e);
-	}, [F]), L = o(() => ({ onPageChange: {
-		action: "onPageChange",
-		title: "On Page Change",
-		type: "trigger",
-		params: {},
-		preview: { page: "1" }
-	} }), []), R = j === 0 && !N && !M;
-	return /* @__PURE__ */ f(n, {
+		D,
+		A,
+		x,
+		j,
+		b
+	]), R = o((e) => (t) => {
+		t.preventDefault(), L(e);
+	}, [L]), z = N === 0 && !F && !P;
+	return /* @__PURE__ */ p(n, {
 		ref: e,
 		tag: "nav",
-		className: p("plitzi-component__pagination", h),
-		interactionTriggers: L,
+		"aria-label": E || void 0,
+		className: m("plitzi-component__pagination", g),
+		interactionTriggers: r.triggers,
 		children: [
-			v === "loadMore" && /* @__PURE__ */ d("button", {
+			y === "loadMore" && /* @__PURE__ */ f("button", {
 				type: "button",
 				className: "plitzi-component__pagination-more",
-				disabled: !N && E,
-				onClick: I(A + 1),
-				children: w
+				disabled: !F && O,
+				onClick: R(M + 1),
+				children: T
 			}),
-			v === "pages" && /* @__PURE__ */ f(u, { children: [
-				/* @__PURE__ */ d("button", {
+			y === "pages" && /* @__PURE__ */ p(d, { children: [
+				/* @__PURE__ */ f("button", {
 					type: "button",
 					className: "plitzi-component__pagination-prev",
-					disabled: !M && E,
-					onClick: I(A - 1),
-					children: S
+					disabled: !P && O,
+					onClick: R(M - 1),
+					children: C
 				}),
-				P.map((e) => /* @__PURE__ */ d("button", {
+				I.map((e) => /* @__PURE__ */ f("button", {
 					type: "button",
-					className: p("plitzi-component__pagination-page", { "plitzi-component__pagination-page--current": e === A }),
-					onClick: I(e),
+					className: m("plitzi-component__pagination-page", { "plitzi-component__pagination-page--current": e === M }),
+					"aria-current": e === M ? "page" : void 0,
+					onClick: R(e),
 					children: e
 				}, e)),
-				/* @__PURE__ */ d("button", {
+				/* @__PURE__ */ f("button", {
 					type: "button",
 					className: "plitzi-component__pagination-next",
-					disabled: !N && E,
-					onClick: I(A + 1),
-					children: C
+					disabled: !F && O,
+					onClick: R(M + 1),
+					children: w
 				})
 			] }),
-			!E && R && /* @__PURE__ */ d("span", {
+			!O && z && /* @__PURE__ */ f("span", {
 				className: "plitzi-component__pagination-hint",
 				children: "Bind pageInfo"
 			}),
-			g
+			_
 		]
 	});
-}, g = e(h);
+}, _ = e(g);
 //#endregion
-export { h as Pagination, g as default };
+export { g as Pagination, _ as default };

package/dist/elements/structure/Pagination/Settings.d.ts

@@ -6,7 +6,8 @@ type SettingsProps = {
     previousLabel?: string;
     nextLabel?: string;
     loadMoreLabel?: string;
+    label?: string;
     onUpdate?: (key: string, value: string | boolean | number | object) => void;
 };
-declare const Settings: ({ mode, target, pageParam, windowSize, previousLabel, nextLabel, loadMoreLabel, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ mode, target, pageParam, windowSize, previousLabel, nextLabel, loadMoreLabel, label, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

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

@@ -3,15 +3,15 @@ import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
 import i from "@plitzi/plitzi-ui/Input";
 import a from "@plitzi/plitzi-ui/Select";
 //#region src/elements/structure/Pagination/Settings.tsx
-var o = ({ mode: o = "pages", target: s = "url", pageParam: c = "page", windowSize: l = "5", previousLabel: u = "Previous", nextLabel: d = "Next", loadMoreLabel: f = "Load more", onUpdate: p }) => {
-	let m = e((e) => (t) => p?.(e, t), [p]);
+var o = ({ mode: o = "pages", target: s = "url", pageParam: c = "page", windowSize: l = "5", previousLabel: u = "Previous", nextLabel: d = "Next", loadMoreLabel: f = "Load more", label: p = "Pagination", onUpdate: m }) => {
+	let h = e((e) => (t) => m?.(e, t), [m]);
 	return /* @__PURE__ */ r("div", {
 		className: "flex grow flex-col gap-4 py-2",
 		children: [
 			/* @__PURE__ */ r(a, {
 				value: o,
 				label: "Mode",
-				onChange: m("mode"),
+				onChange: h("mode"),
 				size: "xs",
 				children: [/* @__PURE__ */ n("option", {
 					value: "pages",
@@ -24,7 +24,7 @@ var o = ({ mode: o = "pages", target: s = "url", pageParam: c = "page", windowSi
 			/* @__PURE__ */ r(a, {
 				value: s,
 				label: "On Page Change",
-				onChange: m("target"),
+				onChange: h("target"),
 				size: "xs",
 				children: [/* @__PURE__ */ n("option", {
 					value: "url",
@@ -38,33 +38,40 @@ var o = ({ mode: o = "pages", target: s = "url", pageParam: c = "page", windowSi
 				value: c,
 				label: "Page parameter",
 				title: "Must match the page parameter of the provider this pager belongs to.",
-				onChange: m("pageParam"),
+				onChange: h("pageParam"),
 				size: "xs"
 			}),
 			o === "pages" && /* @__PURE__ */ r(t, { children: [
 				/* @__PURE__ */ n(i, {
 					value: l,
 					label: "Pages shown",
-					onChange: m("windowSize"),
+					onChange: h("windowSize"),
 					size: "xs"
 				}),
 				/* @__PURE__ */ n(i, {
 					value: u,
 					label: "Previous label",
-					onChange: m("previousLabel"),
+					onChange: h("previousLabel"),
 					size: "xs"
 				}),
 				/* @__PURE__ */ n(i, {
 					value: d,
 					label: "Next label",
-					onChange: m("nextLabel"),
+					onChange: h("nextLabel"),
 					size: "xs"
 				})
 			] }),
 			o === "loadMore" && /* @__PURE__ */ n(i, {
 				value: f,
 				label: "Button label",
-				onChange: m("loadMoreLabel"),
+				onChange: h("loadMoreLabel"),
+				size: "xs"
+			}),
+			/* @__PURE__ */ n(i, {
+				value: p,
+				label: "Navigation name",
+				title: "What a screen reader calls this pager, in the site's language.",
+				onChange: h("label"),
 				size: "xs"
 			}),
 			/* @__PURE__ */ r("span", {

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

@@ -4,6 +4,21 @@ import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
 export type PaginationAttributes = AuthorableAttributes<PaginationProps>;
 declare const declaration: {
     readonly type: "pagination";
+    readonly attributeValues: {
+        readonly mode: readonly string[];
+        readonly target: readonly string[];
+    };
+    readonly triggers: {
+        readonly onPageChange: {
+            readonly action: "onPageChange";
+            readonly title: "On Page Change";
+            readonly type: "trigger";
+            readonly params: {};
+            readonly preview: {
+                readonly page: "1";
+            };
+        };
+    };
     readonly content: {
         readonly attributes: {
             readonly pageInfo: {};
@@ -65,6 +80,7 @@ declare const declaration: {
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     mode?: "pages" | "loadMore" | undefined;
+    label?: string | undefined;
     target?: "url" | "interaction" | undefined;
     pageParam?: string | undefined;
     pageInfo?: import('./Pagination').PaginationPageInfo | undefined;

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

@@ -1,7 +1,18 @@
-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/Pagination/declaration.ts
-var t = e()({
+var n = e()({
 	type: "pagination",
+	attributeValues: {
+		mode: t()(["pages", "loadMore"]),
+		target: t()(["url", "interaction"])
+	},
+	triggers: { onPageChange: {
+		action: "onPageChange",
+		title: "On Page Change",
+		type: "trigger",
+		params: {},
+		preview: { page: "1" }
+	} },
 	content: {
 		attributes: {
 			pageInfo: {},
@@ -55,4 +66,4 @@ var t = e()({
 	}
 });
 //#endregion
-export { t as default };
+export { n as default };

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

@@ -1,8 +1,23 @@
 declare const Pagination: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Pagination').PaginationProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Pagination').PaginationProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     readonly type: "pagination";
+    readonly attributeValues: {
+        readonly mode: readonly string[];
+        readonly target: readonly string[];
+    };
+    readonly triggers: {
+        readonly onPageChange: {
+            readonly action: "onPageChange";
+            readonly title: "On Page Change";
+            readonly type: "trigger";
+            readonly params: {};
+            readonly preview: {
+                readonly page: "1";
+            };
+        };
+    };
     readonly content: {
         readonly attributes: {
             readonly pageInfo: {};
@@ -64,6 +79,7 @@ declare const Pagination: {
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     mode?: "pages" | "loadMore" | undefined;
+    label?: string | undefined;
     target?: "url" | "interaction" | undefined;
     pageParam?: string | undefined;
     pageInfo?: import('./Pagination').PaginationPageInfo | undefined;

package/dist/elements/structure/TabContainer/Settings.d.ts

@@ -1,2 +1,2 @@
-declare const Settings: () => import("react").JSX.Element;
+declare const Settings: () => import('react').JSX.Element;
 export default Settings;

package/dist/elements/structure/TabContainer/TabContainer.d.ts

@@ -4,9 +4,9 @@ export type TabContainerProps = {
     className?: string;
     children?: ReactNode;
 };
-declare const TabContainer: ({ ref, className, children }: TabContainerProps) => import("react").JSX.Element;
+declare const TabContainer: ({ ref, className, children }: TabContainerProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<TabContainerProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<TabContainerProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

package/dist/elements/structure/TabContainer/TabContainer.mjs

@@ -1,23 +1,25 @@
 import e from "../../../Element/hocs/withElement.mjs";
-import { RootElement as t } from "../../../Element/RootElement.mjs";
-import n from "./TabContainerContext.mjs";
-import { useMemo as r, useState as i } from "react";
-import { jsx as a } from "react/jsx-runtime";
-import o from "clsx";
+import t from "../../../Element/hooks/useElement.mjs";
+import { RootElement as n } from "../../../Element/RootElement.mjs";
+import r from "./TabContainerContext.mjs";
+import { useMemo as i, useState as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+import s from "clsx";
 //#region src/elements/structure/TabContainer/TabContainer.tsx
-var s = ({ ref: e, className: s = "", children: c }) => {
-	let [l, u] = i(0), d = r(() => ({
-		tabSelected: l,
-		onSelect: u
-	}), [l]);
-	return /* @__PURE__ */ a(t, {
+var c = ({ ref: e, className: c = "", children: l }) => {
+	let { id: u, rootId: d } = t(), [f, p] = a(0), m = `${d}_${u}`, h = i(() => ({
+		baseId: m,
+		tabSelected: f,
+		onSelect: p
+	}), [m, f]);
+	return /* @__PURE__ */ o(n, {
 		ref: e,
-		className: o("plitzi-component__tab-container", s),
-		children: /* @__PURE__ */ a(n, {
-			value: d,
-			children: c
+		className: s("plitzi-component__tab-container", c),
+		children: /* @__PURE__ */ o(r, {
+			value: h,
+			children: l
 		})
 	});
-}, c = e(s);
+}, l = e(c);
 //#endregion
-export { s as TabContainer, c as default };
+export { c as TabContainer, l as default };

package/dist/elements/structure/TabContainer/TabContainerBody/Settings.d.ts

@@ -1,2 +1,2 @@
-declare const Settings: () => import("react").JSX.Element;
+declare const Settings: () => import('react').JSX.Element;
 export default Settings;

package/dist/elements/structure/TabContainer/TabContainerBody/TabContainerBody.d.ts

@@ -4,9 +4,9 @@ export type TabContainerBodyProps = {
     className: string;
     children: ReactNode;
 };
-declare const TabContainerBody: ({ ref, className, children }: TabContainerBodyProps) => import("react").JSX.Element;
+declare const TabContainerBody: ({ ref, className, children }: TabContainerBodyProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../../Element/hocs/withElement').WithElementProps<TabContainerBodyProps>): import("react").JSX.Element;
+    (props: import('../../../../Element/hocs/withElement').WithElementProps<TabContainerBodyProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

package/dist/elements/structure/TabContainer/TabContainerBody/TabContainerBody.mjs

@@ -6,7 +6,7 @@ import { jsx as c } from "react/jsx-runtime";
 import l from "clsx";
 //#region src/elements/structure/TabContainer/TabContainerBody/TabContainerBody.tsx
 var u = ({ ref: e, className: u = "", children: d }) => {
-	let { tabSelected: f, onSelect: p } = o(n), { childrenParsed: m } = s(() => {
+	let { baseId: f, tabSelected: p, onSelect: m } = o(n), { childrenParsed: h } = s(() => {
 		let e = { childrenParsed: [] };
 		return r.forEach(d, (t, n) => {
 			if (!a(t)) return;
@@ -15,21 +15,23 @@ var u = ({ ref: e, className: u = "", children: d }) => {
 				...r,
 				internalProps: {
 					...r.internalProps,
-					onSelect: p,
-					tabSelected: f,
+					baseId: f,
+					onSelect: m,
+					tabSelected: p,
 					tabIndex: n
 				}
 			}));
 		}), e;
 	}, [
+		f,
 		d,
-		p,
-		f
+		m,
+		p
 	]);
 	return /* @__PURE__ */ c(t, {
 		ref: e,
 		className: l("plitzi-component__tab-container-body", u),
-		children: m
+		children: h
 	});
 }, d = e(u);
 //#endregion

package/dist/elements/structure/TabContainer/TabContainerBody/declaration.d.ts

@@ -4,6 +4,7 @@ import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
 export type TabContainerBodyAttributes = AuthorableAttributes<TabContainerBodyProps>;
 declare const declaration: {
     readonly type: "tabContainerBody";
+    readonly ancestorType: "tabContainer";
     readonly content: {
         readonly attributes: {};
         readonly definition: {

package/dist/elements/structure/TabContainer/TabContainerBody/declaration.mjs

@@ -2,6 +2,7 @@ import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
 //#region src/elements/structure/TabContainer/TabContainerBody/declaration.ts
 var t = e()({
 	type: "tabContainerBody",
+	ancestorType: "tabContainer",
 	content: {
 		attributes: {},
 		definition: {

package/dist/elements/structure/TabContainer/TabContainerBody/index.d.ts

@@ -1,8 +1,9 @@
 declare const TabContainerBody: {
-    (props: import('../../../../Element/hocs/withElement').WithElementProps<import('./TabContainerBody').TabContainerBodyProps>): import("react").JSX.Element;
+    (props: import('../../../../Element/hocs/withElement').WithElementProps<import('./TabContainerBody').TabContainerBodyProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     readonly type: "tabContainerBody";
+    readonly ancestorType: "tabContainer";
     readonly content: {
         readonly attributes: {};
         readonly definition: {

package/dist/elements/structure/TabContainer/TabContainerContext.d.ts

@@ -1,5 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 export type TabContainerContextValue = {
+    /** What the tabs' and the panels' ids start with, so each tab can name the panel it shows and each panel its tab. */
+    baseId: string;
     tabSelected: number;
     onSelect: Dispatch<SetStateAction<number>>;
 };

package/dist/elements/structure/TabContainer/TabContainerHeader/Settings.d.ts

@@ -1,2 +1,2 @@
-declare const Settings: () => import("react").JSX.Element;
+declare const Settings: () => import('react').JSX.Element;
 export default Settings;