@plitzi/sdk-elements 0.37.2 → 0.37.3

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

@@ -2,116 +2,128 @@ 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 "../../../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 i from "./useModalDialog.mjs";
+import a from "./declaration.mjs";
+import { metadataFromText as o } from "./metadataFromText.mjs";
+import { use as s, useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
+import p from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { StoreProvider as m } from "@plitzi/nexus/react";
+import { emptyObject as h } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import v from "clsx";
+import y from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
+import b from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
 //#region src/elements/structure/ModalContainer/ModalContainer.tsx
-var v = ({ ref: e, className: v = "", children: y, title: b = "Modal Header", autoHideAfterClick: x = !0 }) => {
-	let { id: S, definition: { styleSelectors: C, label: w = "Modal" }, elementState: T, setElementState: E } = t(), D = g(i.sourceType, S), { contexts: { InteractionsContext: O } } = u(), { interactionsManager: k } = a(O), [A, j] = l({}), M = o((e) => {
+var x = ({ ref: e, className: x = "", children: S, title: C = "Modal Header", autoHideAfterClick: w = !0 }) => {
+	let { id: T, rootId: E, visible: D, definition: { styleSelectors: O, label: k = "Modal" }, elementState: A, setElementState: j } = t(), M = y(a.sourceType, T), { settings: { previewMode: N }, contexts: { InteractionsContext: P } } = p(), { interactionsManager: F } = s(P), [I, L] = f({}), R = d(null), z = `${E}_${T}_title`, B = c((e) => {
 		let { metadata: t } = e;
-		if (t && typeof t == "object") j(t);
-		else if (typeof t == "string") try {
-			j(JSON.parse(t));
-		} catch {
-			j({ content: t });
-		}
-		else j(typeof t == "boolean" || typeof t == "number" ? { content: t } : {});
-		E((e) => ({
+		L(t && typeof t == "object" ? t : typeof t == "string" ? o(t) : typeof t == "boolean" || typeof t == "number" ? { content: t } : {}), j((e) => ({
 			...e,
 			visibility: !0
 		}));
-	}, [E, j]), N = o(() => {
-		k.interactionTrigger(S, "onModalClose", { metadata: A }), j({}), E((e) => ({
+	}, [j, L]), V = c(() => {
+		F.interactionTrigger(T, "onModalClose", { metadata: I }), L({}), j((e) => ({
 			...e,
 			visibility: !1
 		}));
 	}, [
-		k,
-		E,
+		F,
 		j,
-		A,
-		S
-	]), P = o(() => {
-		x && (k.interactionTrigger(S, "onModalClose", { metadata: A }), j({}), E((e) => ({
+		L,
+		I,
+		T
+	]), H = c(() => {
+		w && (F.interactionTrigger(T, "onModalClose", { metadata: I }), L({}), j((e) => ({
 			...e,
 			visibility: !1
 		})));
 	}, [
-		k,
-		x,
-		E,
+		F,
+		w,
 		j,
-		A,
-		S
-	]), F = c(() => ({
+		L,
+		I,
+		T
+	]), U = u(() => ({
 		openModal: {
-			...i.callbacks.openModal,
-			title: `Open ${w}`,
-			callback: M
+			...a.callbacks.openModal,
+			title: `Open ${k}`,
+			callback: B
 		},
 		closeModal: {
-			...i.callbacks.closeModal,
-			title: `Close ${w}`,
-			callback: N
+			...a.callbacks.closeModal,
+			title: `Close ${k}`,
+			callback: V
 		}
 	}), [
-		N,
-		M,
-		w
+		V,
+		B,
+		k
 	]);
-	s(() => {
-		T.visibility !== !1 && k.interactionTrigger(S, "onModalOpen", { metadata: A });
+	i({
+		panelRef: R,
+		open: !!N && D,
+		onClose: V
+	}), l(() => {
+		A.visibility !== !1 && F.interactionTrigger(T, "onModalOpen", { metadata: I });
 	}, [
-		S,
-		k,
-		A,
-		T.visibility
+		T,
+		F,
+		I,
+		A.visibility
 	]);
-	let I = o(() => r(A), [A]);
-	_({
-		id: S,
-		source: D,
-		name: w || `Modal - ${S}`,
-		fields: I
+	let W = c(() => r(I), [I]);
+	b({
+		id: T,
+		source: M,
+		name: k || `Modal - ${T}`,
+		fields: W
 	});
-	let L = c(() => D ? { runtime: { sources: { [D]: A } } } : f, [D, A]);
-	return /* @__PURE__ */ m(n, {
+	let G = u(() => M ? { runtime: { sources: { [M]: I } } } : h, [M, I]);
+	return /* @__PURE__ */ _(n, {
 		ref: e,
-		className: h("plitzi-component__modal-container", v),
-		interactionTriggers: i.triggers,
-		interactionCallbacks: F,
-		children: [/* @__PURE__ */ p("div", {
-			className: h("modal-container__background", C.backgroundContainer),
-			onClick: P
-		}), /* @__PURE__ */ m("div", {
-			className: h("modal-container__root", C.rootContainer),
-			children: [/* @__PURE__ */ m("div", {
-				className: h("modal-container__header", C.headerContainer),
-				children: [/* @__PURE__ */ p("div", {
-					className: h("modal-container__header__title", C.headerTitle),
-					children: b || "Modal Header"
-				}), /* @__PURE__ */ p("i", {
-					className: h("fa-solid fa-xmark", C.headerCloseButton),
+		className: v("plitzi-component__modal-container", x),
+		interactionTriggers: a.triggers,
+		interactionCallbacks: U,
+		children: [/* @__PURE__ */ g("div", {
+			className: v("modal-container__background", O.backgroundContainer),
+			"aria-hidden": "true",
+			onClick: H
+		}), /* @__PURE__ */ _("div", {
+			ref: R,
+			className: v("modal-container__root", O.rootContainer),
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": z,
+			tabIndex: -1,
+			children: [/* @__PURE__ */ _("div", {
+				className: v("modal-container__header", O.headerContainer),
+				children: [/* @__PURE__ */ g("div", {
+					id: z,
+					className: v("modal-container__header__title", O.headerTitle),
+					children: C || "Modal Header"
+				}), /* @__PURE__ */ g("button", {
+					type: "button",
+					className: v("modal-container__close", O.headerCloseButton),
+					"aria-label": "Close",
 					title: "Close",
-					onClick: N
+					onClick: V,
+					children: /* @__PURE__ */ g("i", {
+						className: "fa-solid fa-xmark",
+						"aria-hidden": "true"
+					})
 				})]
-			}), /* @__PURE__ */ p("div", {
-				className: h("modal-container__body", C.bodyContainer),
-				children: /* @__PURE__ */ p(d, {
+			}), /* @__PURE__ */ g("div", {
+				className: v("modal-container__body", O.bodyContainer),
+				children: /* @__PURE__ */ g(m, {
 					inherit: "live",
-					name: `Modal:${S}`,
-					value: L,
-					children: y
+					name: `Modal:${T}`,
+					value: G,
+					children: S
 				})
 			})]
 		})]
 	});
-}, y = e(v);
+}, S = e(x);
 //#endregion
-export { v as ModalContainer, y as default };
+export { x as ModalContainer, S as default };

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,7 +37,7 @@ 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;
     displayName: string;

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

@@ -14,59 +14,61 @@ 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}`;
-}, 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" }) => {
-	let { id: E } = t(), { settings: { previewMode: D }, contexts: { InteractionsContext: O } } = c(), { interactionsManager: k } = a(O), [A] = l("navigation.navigate"), j = v.page ?? 1, M = v.pageCount ?? 0, N = v.hasPrevPage ?? j > 1, P = v.hasNextPage ?? !1, F = s(() => i(j, M, S), [
-		j,
+}, 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
-	]), I = o((e) => {
+	]), L = o((e) => {
 		let t = Math.max(e, 1);
-		E && k.interactionTrigger(E, "onPageChange", { page: t }), x === "url" && A(h(b, t));
+		D && A.interactionTrigger(D, "onPageChange", { page: t }), x === "url" && j(h(b, t));
 	}, [
-		E,
-		k,
-		x,
+		D,
 		A,
+		x,
+		j,
 		b
-	]), L = o((e) => (t) => {
-		t.preventDefault(), I(e);
-	}, [I]), R = M === 0 && !P && !N;
+	]), R = o((e) => (t) => {
+		t.preventDefault(), L(e);
+	}, [L]), z = N === 0 && !F && !P;
 	return /* @__PURE__ */ p(n, {
 		ref: e,
 		tag: "nav",
+		"aria-label": E || void 0,
 		className: m("plitzi-component__pagination", g),
 		interactionTriggers: r.triggers,
 		children: [
 			y === "loadMore" && /* @__PURE__ */ f("button", {
 				type: "button",
 				className: "plitzi-component__pagination-more",
-				disabled: !P && D,
-				onClick: L(j + 1),
+				disabled: !F && O,
+				onClick: R(M + 1),
 				children: T
 			}),
 			y === "pages" && /* @__PURE__ */ p(d, { children: [
 				/* @__PURE__ */ f("button", {
 					type: "button",
 					className: "plitzi-component__pagination-prev",
-					disabled: !N && D,
-					onClick: L(j - 1),
+					disabled: !P && O,
+					onClick: R(M - 1),
 					children: C
 				}),
-				F.map((e) => /* @__PURE__ */ f("button", {
+				I.map((e) => /* @__PURE__ */ f("button", {
 					type: "button",
-					className: m("plitzi-component__pagination-page", { "plitzi-component__pagination-page--current": e === j }),
-					onClick: L(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__ */ f("button", {
 					type: "button",
 					className: "plitzi-component__pagination-next",
-					disabled: !P && D,
-					onClick: L(j + 1),
+					disabled: !F && O,
+					onClick: R(M + 1),
 					children: w
 				})
 			] }),
-			!D && R && /* @__PURE__ */ f("span", {
+			!O && z && /* @__PURE__ */ f("span", {
 				className: "plitzi-component__pagination-hint",
 				children: "Bind pageInfo"
 			}),

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,10 @@ 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";
@@ -76,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,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/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",
@@ -62,4 +66,4 @@ var t = e()({
 	}
 });
 //#endregion
-export { t as default };
+export { n as default };

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

@@ -3,6 +3,10 @@ declare const Pagination: {
     displayName: string;
 } & {
     readonly type: "pagination";
+    readonly attributeValues: {
+        readonly mode: readonly string[];
+        readonly target: readonly string[];
+    };
     readonly triggers: {
         readonly onPageChange: {
             readonly action: "onPageChange";
@@ -75,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/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/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/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>>;
 };