@gntik-ai/blocks 0.5.0 → 0.6.0

package/dist/index.js

@@ -1671,6 +1671,12 @@ function authIdentifierError(value, config, messages) {
 	if ((config?.type ?? "email") === "email" && !EMAIL_RE$1.test(trimmed) || config?.maxLength !== void 0 && trimmed.length > config.maxLength) return messages?.identifierInvalid ?? fallback;
 	return null;
 }
+function authSignUpFieldError(value, field) {
+	const trimmed = value.trim();
+	if (!trimmed) return field.required ? field.messages?.required ?? `Enter ${field.label}.` : null;
+	if (field.type === "email" && !EMAIL_RE$1.test(trimmed)) return field.messages?.invalid ?? "Enter a valid email address.";
+	return null;
+}
 //#endregion
 //#region src/auth/ForgotPasswordForm/ForgotPasswordForm.tsx
 /** Request a reset link by email, then a "check your inbox" state with resend and a way back. */
@@ -2351,10 +2357,85 @@ const meta$59 = {
 	]
 };
 //#endregion
+//#region src/forms/ValidationSummary/fixtures.ts
+const validationIssues = [
+	{
+		fieldId: "project-name",
+		label: "Project name",
+		message: "Enter a project name."
+	},
+	{
+		fieldId: "billing-email",
+		label: "Billing email",
+		message: "Enter a valid email address, like name@company.com."
+	},
+	{
+		fieldId: "region",
+		label: "Region",
+		message: "Choose a region."
+	}
+];
+//#endregion
+//#region src/forms/ValidationSummary/ValidationSummary.tsx
+const focusField = (fieldId) => {
+	const el = document.getElementById(fieldId);
+	if (!el) return;
+	el.focus();
+	el.scrollIntoView?.({ block: "center" });
+};
+/**
+* Error summary for long forms: lists every problem with a link that moves focus to the field.
+* After a failed submit it takes focus, so screen readers announce it.
+*/
+function ValidationSummary({ errors = validationIssues, submitCount = 0, title, className }) {
+	const ref = useRef(null);
+	const hasErrors = errors.length > 0;
+	useEffect(() => {
+		if (submitCount > 0 && hasErrors) ref.current?.focus();
+	}, [submitCount, hasErrors]);
+	if (!hasErrors) return null;
+	const heading = title ?? `There ${errors.length === 1 ? "is 1 problem" : `are ${errors.length} problems`} with this form`;
+	return /* @__PURE__ */ jsx(Alert, {
+		ref,
+		tabIndex: -1,
+		role: "region",
+		tone: "destructive",
+		title: heading,
+		className: cn("focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring", className),
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "mt-1 list-disc space-y-1 ps-4",
+			children: errors.map((e) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Link, {
+				href: `#${e.fieldId}`,
+				tone: "inherit",
+				underline: "always",
+				onClick: (ev) => {
+					ev.preventDefault();
+					focusField(e.fieldId);
+				},
+				children: [e.label ? `${e.label}: ` : "", e.message]
+			}) }, e.fieldId))
+		})
+	});
+}
+//#endregion
 //#region src/auth/SignUpForm/SignUpForm.tsx
 /** Account creation: name, work email, password with a strength meter and a required terms checkbox. */
-function SignUpForm({ onSubmit, error: errorProp, loading: loadingProp, minPasswordLength = 8, termsHref = "#", privacyHref = "#", signInHref = "#", onSignIn, sso = /* @__PURE__ */ jsx(SsoButtons, {}), eyebrow = "Get started", title = "Create your account", description = "Set up a workspace for your team in a couple of minutes.", className }) {
+function SignUpForm({ fields, messages, unavailable, policyLoading = false, onSubmit, error: errorProp, loading: loadingProp, minPasswordLength = 8, passwordHelp, terms: termsProp, termsHref = "#", privacyHref = "#", signInHref = "#", onSignIn, sso = /* @__PURE__ */ jsx(SsoButtons, {}), eyebrow = "Get started", title = "Create your account", description = "Set up a workspace for your team in a couple of minutes.", className }) {
 	const termsErrorId = useId();
+	const fieldPrefix = useId();
+	const passwordId = `${fieldPrefix}-password`;
+	const termsId = `${fieldPrefix}-terms`;
+	const [fieldValues, setFieldValues] = useState({});
+	const [submitCount, setSubmitCount] = useState(0);
+	const fieldValue = (id) => Object.hasOwn(fieldValues, id) ? fieldValues[id] ?? "" : "";
+	const configuredErrors = (fields ?? []).flatMap((field) => {
+		const message = authSignUpFieldError(fieldValue(field.id), field);
+		return message ? [{
+			fieldId: `${fieldPrefix}-field-${field.id}`,
+			label: field.label,
+			message
+		}] : [];
+	});
 	const [name, setName] = useState("");
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
@@ -2365,8 +2446,62 @@ function SignUpForm({ onSubmit, error: errorProp, loading: loadingProp, minPassw
 	const alert = errorProp ?? error;
 	const nameInvalid = submitted && name.trim() === "";
 	const emailInvalid = submitted && !EMAIL_RE$1.test(email.trim());
-	const passwordInvalid = submitted && password.length < minPasswordLength;
-	const termsInvalid = submitted && !terms;
+	const passwordInvalid = (submitted || fields !== void 0 && password.length > 0) && password.length < minPasswordLength;
+	const termsInvalid = submitted && termsProp !== false && !terms;
+	const passwordError = messages?.passwordTooShort?.(minPasswordLength) ?? `Use at least ${minPasswordLength} characters.`;
+	const termsError = messages?.termsRequired ?? "Accept the terms to continue.";
+	const summaryErrors = [
+		...configuredErrors,
+		...password.length < minPasswordLength ? [{
+			fieldId: passwordId,
+			label: "Password",
+			message: passwordError
+		}] : [],
+		...termsProp !== false && !terms ? [{
+			fieldId: termsId,
+			label: "Terms",
+			message: termsError
+		}] : []
+	];
+	if (unavailable) return /* @__PURE__ */ jsx("div", {
+		className: cn(authFormClass, className),
+		children: /* @__PURE__ */ jsx(Alert, {
+			tone: "info",
+			title: unavailable.title,
+			description: unavailable.message,
+			actions: unavailable.action
+		})
+	});
+	if (policyLoading) return /* @__PURE__ */ jsxs("div", {
+		className: cn(authFormClass, "flex flex-col gap-4", className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				className: "sr-only",
+				children: "Loading sign-up policy…"
+			}),
+			/* @__PURE__ */ jsx(Skeleton, {
+				"aria-hidden": true,
+				className: "h-8 w-3/4"
+			}),
+			/* @__PURE__ */ jsx(Skeleton, {
+				"aria-hidden": true,
+				className: "h-4 w-full"
+			}),
+			/* @__PURE__ */ jsx(Skeleton, {
+				"aria-hidden": true,
+				className: "h-12 w-full"
+			}),
+			/* @__PURE__ */ jsx(Skeleton, {
+				"aria-hidden": true,
+				className: "h-12 w-full"
+			}),
+			/* @__PURE__ */ jsx(Skeleton, {
+				"aria-hidden": true,
+				className: "h-12 w-full"
+			})
+		]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn(authFormClass, className),
 		children: [
@@ -2382,7 +2517,19 @@ function SignUpForm({ onSubmit, error: errorProp, loading: loadingProp, minPassw
 				onSubmit: (e) => {
 					e.preventDefault();
 					setSubmitted(true);
-					if (name.trim() === "" || !EMAIL_RE$1.test(email.trim()) || password.length < minPasswordLength || !terms) return;
+					if (fields !== void 0) {
+						setSubmitCount((count) => count + 1);
+						if (summaryErrors.length > 0) return;
+						const values = Object.fromEntries(fields.map((field) => [field.id, fieldValue(field.id).trim()]));
+						run(() => onSubmit?.({
+							name: values.name ?? "",
+							email: values.email ?? "",
+							password,
+							fields: values
+						}));
+						return;
+					}
+					if (name.trim() === "" || !EMAIL_RE$1.test(email.trim()) || password.length < minPasswordLength || termsProp !== false && !terms) return;
 					run(() => onSubmit?.({
 						name: name.trim(),
 						email: email.trim(),
@@ -2394,7 +2541,38 @@ function SignUpForm({ onSubmit, error: errorProp, loading: loadingProp, minPassw
 						tone: "destructive",
 						description: alert
 					}),
-					/* @__PURE__ */ jsxs(Field, {
+					fields !== void 0 && submitted && /* @__PURE__ */ jsx(ValidationSummary, {
+						errors: summaryErrors,
+						submitCount,
+						className: "bg-background"
+					}),
+					fields !== void 0 ? fields.map((field) => {
+						const message = authSignUpFieldError(fieldValue(field.id), field);
+						const invalid = submitted && message !== null;
+						return /* @__PURE__ */ jsxs(Field, {
+							invalid,
+							children: [
+								/* @__PURE__ */ jsx(FieldLabel, { children: field.label }),
+								/* @__PURE__ */ jsx(Input, {
+									id: `${fieldPrefix}-field-${field.id}`,
+									type: field.type ?? "text",
+									autoComplete: field.autoComplete,
+									placeholder: field.placeholder,
+									required: field.required,
+									value: fieldValue(field.id),
+									onValueChange: (value) => setFieldValues((values) => ({
+										...values,
+										[field.id]: value
+									}))
+								}),
+								field.help != null && /* @__PURE__ */ jsx(FieldDescription, { children: field.help }),
+								/* @__PURE__ */ jsx(FieldError, {
+									match: invalid,
+									children: message
+								})
+							]
+						}, field.id);
+					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Field, {
 						invalid: nameInvalid,
 						children: [
 							/* @__PURE__ */ jsx(FieldLabel, { children: "Full name" }),
@@ -2411,8 +2589,7 @@ function SignUpForm({ onSubmit, error: errorProp, loading: loadingProp, minPassw
 								children: "Enter your name."
 							})
 						]
-					}),
-					/* @__PURE__ */ jsxs(Field, {
+					}), /* @__PURE__ */ jsxs(Field, {
 						invalid: emailInvalid,
 						children: [
 							/* @__PURE__ */ jsx(FieldLabel, { children: "Work email" }),
@@ -2430,28 +2607,28 @@ function SignUpForm({ onSubmit, error: errorProp, loading: loadingProp, minPassw
 								children: "Enter a valid email address."
 							})
 						]
-					}),
+					})] }),
 					/* @__PURE__ */ jsxs(Field, {
 						invalid: passwordInvalid,
 						children: [
 							/* @__PURE__ */ jsx(FieldLabel, { children: "Password" }),
 							/* @__PURE__ */ jsx(PasswordInput, {
+								id: fields !== void 0 ? passwordId : void 0,
 								showStrength: true,
+								strength: password.length > 0 && password.length < minPasswordLength ? 0 : void 0,
 								value: password,
 								onValueChange: setPassword,
 								required: true
 							}),
-							/* @__PURE__ */ jsxs(FieldError, {
+							passwordHelp != null && /* @__PURE__ */ jsx(FieldDescription, { children: typeof passwordHelp === "function" ? passwordHelp(minPasswordLength) : passwordHelp }),
+							/* @__PURE__ */ jsx(FieldError, {
 								match: passwordInvalid,
-								children: [
-									"Use at least ",
-									minPasswordLength,
-									" characters."
-								]
+								children: passwordError
 							})
 						]
 					}),
-					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Checkbox, {
+					termsProp !== false && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Checkbox, {
+						render: fields !== void 0 ? /* @__PURE__ */ jsx("span", { id: termsId }) : void 0,
 						checked: terms,
 						onCheckedChange: setTerms,
 						"aria-invalid": termsInvalid || void 0,
@@ -2472,7 +2649,7 @@ function SignUpForm({ onSubmit, error: errorProp, loading: loadingProp, minPassw
 					}), termsInvalid && /* @__PURE__ */ jsx("p", {
 						id: termsErrorId,
 						className: "mt-1.5 text-[12.5px] text-destructive-text",
-						children: "Accept the terms to continue."
+						children: termsError
 					})] }),
 					/* @__PURE__ */ jsx(Button, {
 						type: "submit",
@@ -2508,7 +2685,7 @@ const meta$60 = {
 	name: "Sign-up form",
 	family: "auth",
 	status: "stable",
-	description: "Account creation with name, email, a password strength meter and a required terms checkbox.",
+	description: "Account creation with default name/email fields or ordered text/email fields (values.fields), a password strength meter and required consent (terms=false opts out). minPasswordLength defaults to 8 and drives length validation and the insufficient-length meter; optional passwordHelp can receive the minimum. Configured fields support help, required, autoComplete and validation messages, with a linked validation summary on invalid submit. policyLoading renders skeletons without a form; unavailable replaces the form with consumer title, message and optional action. loading remains submitting; error is form-level feedback. Examples: custom-fields, no-terms, unavailable, loading, submitting and error.",
 	uses: [
 		"Field",
 		"Input",
@@ -2517,7 +2694,10 @@ const meta$60 = {
 		"Button",
 		"Alert",
 		"Link",
-		"SsoButtons"
+		"SsoButtons",
+		"Skeleton",
+		"FieldDescription",
+		"ValidationSummary"
 	]
 };
 //#endregion
@@ -8486,67 +8666,6 @@ const meta$58 = {
 	uses: ["Switch"]
 };
 //#endregion
-//#region src/forms/ValidationSummary/fixtures.ts
-const validationIssues = [
-	{
-		fieldId: "project-name",
-		label: "Project name",
-		message: "Enter a project name."
-	},
-	{
-		fieldId: "billing-email",
-		label: "Billing email",
-		message: "Enter a valid email address, like name@company.com."
-	},
-	{
-		fieldId: "region",
-		label: "Region",
-		message: "Choose a region."
-	}
-];
-//#endregion
-//#region src/forms/ValidationSummary/ValidationSummary.tsx
-const focusField = (fieldId) => {
-	const el = document.getElementById(fieldId);
-	if (!el) return;
-	el.focus();
-	el.scrollIntoView?.({ block: "center" });
-};
-/**
-* Error summary for long forms: lists every problem with a link that moves focus to the field.
-* After a failed submit it takes focus, so screen readers announce it.
-*/
-function ValidationSummary({ errors = validationIssues, submitCount = 0, title, className }) {
-	const ref = useRef(null);
-	const hasErrors = errors.length > 0;
-	useEffect(() => {
-		if (submitCount > 0 && hasErrors) ref.current?.focus();
-	}, [submitCount, hasErrors]);
-	if (!hasErrors) return null;
-	const heading = title ?? `There ${errors.length === 1 ? "is 1 problem" : `are ${errors.length} problems`} with this form`;
-	return /* @__PURE__ */ jsx(Alert, {
-		ref,
-		tabIndex: -1,
-		role: "region",
-		tone: "destructive",
-		title: heading,
-		className: cn("focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring", className),
-		children: /* @__PURE__ */ jsx("ul", {
-			className: "mt-1 list-disc space-y-1 ps-4",
-			children: errors.map((e) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Link, {
-				href: `#${e.fieldId}`,
-				tone: "inherit",
-				underline: "always",
-				onClick: (ev) => {
-					ev.preventDefault();
-					focusField(e.fieldId);
-				},
-				children: [e.label ? `${e.label}: ` : "", e.message]
-			}) }, e.fieldId))
-		})
-	});
-}
-//#endregion
 //#region src/forms/DialogWizard/DialogWizard.tsx
 /** Modal variant of create-wizard for a flow over its parent page. State stays consumer-owned. */
 function DialogWizard({ steps, current = 0, size = "dialog", stepError, reviewStep, children, title, ...props }) {
@@ -11652,7 +11771,7 @@ function PaginationFooter({ total = 97, page: pageProp, defaultPage = 1, onPageC
 	25,
 	50,
 	100
-], noun: nounProp, locale: localeProp, className }) {
+], noun: nounProp, locale: localeProp, className, labels }) {
 	const { t, locale: providerLocale } = useI18n();
 	const locale = localeProp ?? providerLocale;
 	const noun = nounProp ?? t("table.rows");
@@ -11683,9 +11802,9 @@ function PaginationFooter({ total = 97, page: pageProp, defaultPage = 1, onPageC
 			children: [/* @__PURE__ */ jsx("span", {
 				className: "text-[12.5px] text-muted-foreground",
 				"aria-hidden": true,
-				children: t("table.rowsPerPage")
+				children: labels?.rowsPerPage ?? t("table.rowsPerPage")
 			}), /* @__PURE__ */ jsx(SimpleSelect, {
-				"aria-label": t("table.rowsPerPage"),
+				"aria-label": labels?.rowsPerPageLabel ?? t("table.rowsPerPage"),
 				size: "sm",
 				className: "w-[76px] font-mono",
 				value: String(pageSize),
@@ -11697,10 +11816,10 @@ function PaginationFooter({ total = 97, page: pageProp, defaultPage = 1, onPageC
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-3 sm:flex-row sm:items-center",
-			children: [/* @__PURE__ */ jsxs("p", {
+			children: [/* @__PURE__ */ jsx("p", {
 				className: "text-[12.5px] text-muted-foreground tabular-nums",
 				"aria-live": "polite",
-				children: [
+				children: labels?.rangeSummary ? labels.rangeSummary(from, to, total) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsxs("span", {
 						className: "font-mono text-foreground",
 						children: [
@@ -11716,13 +11835,18 @@ function PaginationFooter({ total = 97, page: pageProp, defaultPage = 1, onPageC
 						className: "font-mono text-foreground",
 						children: fmt(total)
 					})
-				]
+				] })
 			}), /* @__PURE__ */ jsx(Pagination, {
 				page,
 				pageCount,
 				onPageChange: goTo,
 				size: "sm",
-				labels: { nav: t("table.pagination", { noun }) }
+				labels: {
+					nav: labels?.paginationNav?.(noun) ?? t("table.pagination", { noun }),
+					previous: labels?.previous,
+					next: labels?.next,
+					page: labels?.page
+				}
 			})]
 		})]
 	});
@@ -11734,9 +11858,9 @@ const PIN_NONE = "none";
 * "Columns" menu: one checkbox item per hideable column (the last visible column cannot be
 * hidden) and, when pinning is on, a submenu per visible column to pin it left, right or unpin it.
 */
-function ColumnVisibilityMenu({ columns, hidden, onToggle, label: labelProp, pinOf, onPin }) {
+function ColumnVisibilityMenu({ columns, hidden, onToggle, label: labelProp, labels, pinOf, onPin }) {
 	const { t } = useI18n();
-	const label = labelProp ?? t("table.columns");
+	const label = labels?.columns ?? labelProp ?? t("table.columns");
 	const visibleCount = columns.filter((c) => !hidden.has(c.id)).length;
 	const pinnable = onPin && pinOf ? columns.filter((c) => c.pinnable !== false && !hidden.has(c.id)) : [];
 	return /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
@@ -11750,7 +11874,7 @@ function ColumnVisibilityMenu({ columns, hidden, onToggle, label: labelProp, pin
 	}), /* @__PURE__ */ jsxs(MenuContent, {
 		align: "end",
 		className: "min-w-[200px]",
-		children: [/* @__PURE__ */ jsxs(MenuGroup, { children: [/* @__PURE__ */ jsx(MenuGroupLabel, { children: t("table.visibleColumns") }), columns.filter((c) => c.hideable !== false).map((c) => {
+		children: [/* @__PURE__ */ jsxs(MenuGroup, { children: [/* @__PURE__ */ jsx(MenuGroupLabel, { children: labels?.visibleColumns ?? t("table.visibleColumns") }), columns.filter((c) => c.hideable !== false).map((c) => {
 			const visible = !hidden.has(c.id);
 			return /* @__PURE__ */ jsx(MenuCheckboxItem, {
 				checked: visible,
@@ -11758,26 +11882,26 @@ function ColumnVisibilityMenu({ columns, hidden, onToggle, label: labelProp, pin
 				onCheckedChange: (on) => onToggle(c.id, on),
 				children: c.header
 			}, c.id);
-		})] }), pinnable.length > 0 && onPin && pinOf && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsxs(MenuGroup, { children: [/* @__PURE__ */ jsx(MenuGroupLabel, { children: "Pin columns" }), pinnable.map((c) => {
+		})] }), pinnable.length > 0 && onPin && pinOf && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsxs(MenuGroup, { children: [/* @__PURE__ */ jsx(MenuGroupLabel, { children: labels?.pinColumns ?? "Pin columns" }), pinnable.map((c) => {
 			const side = pinOf(c.id);
 			return /* @__PURE__ */ jsxs(MenuSub, { children: [/* @__PURE__ */ jsxs(MenuSubTrigger, { children: [c.header, side && /* @__PURE__ */ jsx("span", {
 				className: "ms-auto ps-3 text-[11.5px] text-muted-foreground",
-				children: side === "left" ? "Left" : "Right"
+				children: side === "left" ? labels?.pinnedLeft ?? "Left" : labels?.pinnedRight ?? "Right"
 			})] }), /* @__PURE__ */ jsx(MenuSubContent, { children: /* @__PURE__ */ jsxs(MenuRadioGroup, {
 				value: side ?? PIN_NONE,
 				onValueChange: (v) => onPin(c.id, v === "left" || v === "right" ? v : null),
 				children: [
 					/* @__PURE__ */ jsx(MenuRadioItem, {
 						value: "left",
-						children: "Pin left"
+						children: labels?.pinLeft ?? "Pin left"
 					}),
 					/* @__PURE__ */ jsx(MenuRadioItem, {
 						value: "right",
-						children: "Pin right"
+						children: labels?.pinRight ?? "Pin right"
 					}),
 					/* @__PURE__ */ jsx(MenuRadioItem, {
 						value: PIN_NONE,
-						children: "Unpinned"
+						children: labels?.unpinned ?? "Unpinned"
 					})
 				]
 			}) })] }, c.id);
@@ -12049,7 +12173,7 @@ function focusSibling(from, dir) {
 * edits); while editing, an input or a select: Enter or Tab commits, Escape cancels. `onCellEdit`
 * can reject the value with a message, shown inline under the editor.
 */
-function EditableCell({ row, rowId, rowLabel, column, onCellEdit, hintId, children }) {
+function EditableCell({ row, rowId, rowLabel, column, onCellEdit, hintId, children, labels }) {
 	const errorId = useId();
 	const editor = column.editor ?? { type: "text" };
 	const [editing, setEditing] = useState(false);
@@ -12097,15 +12221,15 @@ function EditableCell({ row, rowId, rowLabel, column, onCellEdit, hintId, childr
 		const n = Number(text);
 		if (!Number.isFinite(n)) return {
 			ok: false,
-			message: "Enter a number."
+			message: labels?.enterNumber ?? "Enter a number."
 		};
 		if (editor.min != null && n < editor.min) return {
 			ok: false,
-			message: `Enter ${editor.min} or more.`
+			message: labels?.minimumValue?.(editor.min) ?? `Enter ${editor.min} or more.`
 		};
 		if (editor.max != null && n > editor.max) return {
 			ok: false,
-			message: `Enter ${editor.max} or less.`
+			message: labels?.maximumValue?.(editor.max) ?? `Enter ${editor.max} or less.`
 		};
 		return {
 			ok: true,
@@ -12139,11 +12263,11 @@ function EditableCell({ row, rowId, rowLabel, column, onCellEdit, hintId, childr
 				previous
 			});
 		} catch (err) {
-			result = err instanceof Error && err.message ? err.message : GENERIC_ERROR;
+			result = err instanceof Error && err.message ? err.message : labels?.editError ?? GENERIC_ERROR;
 		}
 		busy.current = false;
 		setPending(false);
-		if (result === false) result = GENERIC_ERROR;
+		if (result === false) result = labels?.editError ?? GENERIC_ERROR;
 		if (typeof result === "string") {
 			setError(result);
 			if (after) field.current?.focus();
@@ -12186,7 +12310,7 @@ function EditableCell({ row, rowId, rowLabel, column, onCellEdit, hintId, childr
 		children
 	});
 	const common = {
-		"aria-label": `${column.header} for ${rowLabel}`,
+		"aria-label": labels?.editLabel?.(column.header, rowLabel) ?? `${column.header} for ${rowLabel}`,
 		"aria-invalid": error ? true : void 0,
 		"aria-describedby": error ? errorId : void 0,
 		"aria-busy": pending || void 0,
@@ -12226,7 +12350,7 @@ function EditableCell({ row, rowId, rowLabel, column, onCellEdit, hintId, childr
 		}), error && /* @__PURE__ */ jsx("p", {
 			id: errorId,
 			role: "alert",
-			className: "mt-1 text-start text-[11.5px] font-medium whitespace-normal text-destructive-text",
+			className: "mt-1 rounded-sm border border-border bg-popover px-1.5 py-1 text-start text-[11.5px] font-medium whitespace-normal text-destructive-text",
 			children: error
 		})]
 	});
@@ -12237,7 +12361,7 @@ function isCellEditable(column, row) {
 }
 //#endregion
 //#region src/tables/DataTable/data-table-row.tsx
-function DataTableRow({ row, columns, getRowId, getRowLabel, selectable, selected, singleSelection, onToggleRow, rowActions, layout, onCellEdit, editHintId, ariaRowIndex, style }) {
+function DataTableRow({ labels, row, columns, getRowId, getRowLabel, selectable, selected, singleSelection, onToggleRow, rowActions, layout, onCellEdit, editHintId, ariaRowIndex, style }) {
 	const { t } = useI18n();
 	const id = getRowId(row);
 	const selectionColumn = selectable || singleSelection != null;
@@ -12261,7 +12385,7 @@ function DataTableRow({ row, columns, getRowId, getRowLabel, selectable, selecte
 						className: "size-4 accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:cursor-not-allowed"
 					})
 				}) : /* @__PURE__ */ jsx(Checkbox, {
-					"aria-label": t("table.selectRow", { label }),
+					"aria-label": labels?.selectRow?.(label) ?? t("table.selectRow", { label }),
 					checked: isSelected,
 					onCheckedChange: () => onToggleRow(id)
 				})
@@ -12275,6 +12399,7 @@ function DataTableRow({ row, columns, getRowId, getRowLabel, selectable, selecte
 					style: cl?.style,
 					className: cn("whitespace-nowrap", cl?.style && "overflow-hidden text-ellipsis", COLUMN_VARIANT_CLASSES[c.variant ?? "default"], c.className, cl?.className, tint(cl)),
 					children: editable ? /* @__PURE__ */ jsx(EditableCell, {
+						labels,
 						row,
 						rowId: id,
 						rowLabel: label,
@@ -12291,7 +12416,7 @@ function DataTableRow({ row, columns, getRowId, getRowLabel, selectable, selecte
 				style: layout?.trail.style,
 				children: /* @__PURE__ */ jsx(MoreMenu, {
 					items: rowActions(row),
-					label: t("table.rowActions", { label }),
+					label: labels?.rowActions?.(label) ?? t("table.rowActions", { label }),
 					variant: "ghost",
 					size: "sm"
 				})
@@ -12301,7 +12426,7 @@ function DataTableRow({ row, columns, getRowId, getRowLabel, selectable, selecte
 }
 const groupHeadClass = "h-9 bg-secondary/50 text-[12.5px] font-semibold tracking-normal normal-case text-foreground";
 /** The header row of a group: group checkbox, collapse button, label and count. */
-function GroupHeaderRow({ group, open, selectable, selected, span, collapsible, onToggle, onToggleRows, ariaRowIndex, style }) {
+function GroupHeaderRow({ labels, group, open, selectable, selected, span, collapsible, onToggle, onToggleRows, ariaRowIndex, style }) {
 	const { t } = useI18n();
 	const state = selectionState(group.ids, selected);
 	const count = group.ids.length;
@@ -12318,7 +12443,7 @@ function GroupHeaderRow({ group, open, selectable, selected, span, collapsible,
 		" ",
 		/* @__PURE__ */ jsx("span", {
 			className: "sr-only",
-			children: count === 1 ? "row" : "rows"
+			children: labels?.groupRows?.(count) ?? (count === 1 ? "row" : "rows")
 		})
 	] });
 	return /* @__PURE__ */ jsxs(TableRow, {
@@ -12329,7 +12454,7 @@ function GroupHeaderRow({ group, open, selectable, selected, span, collapsible,
 		children: [selectable && /* @__PURE__ */ jsx(TableCell, {
 			className: cn("w-10 pe-0", "h-9 bg-secondary/50 text-[12.5px] font-semibold tracking-normal normal-case text-foreground"),
 			children: /* @__PURE__ */ jsx(Checkbox, {
-				"aria-label": t("table.selectRow", { label: `all in ${group.name}` }),
+				"aria-label": labels?.selectGroup?.(group.name) ?? t("table.selectRow", { label: `all in ${group.name}` }),
 				checked: state.checked,
 				indeterminate: state.indeterminate,
 				disabled: count === 0,
@@ -12423,8 +12548,8 @@ function DataTableBody(props) {
 			children: emptyState ?? /* @__PURE__ */ jsx(EmptyState, {
 				icon: Inbox,
 				size: "sm",
-				title: t("common.noResults"),
-				description: t("table.emptyDescription")
+				title: props.labels?.emptyTitle ?? t("common.noResults"),
+				description: props.labels?.emptyDescription ?? t("table.emptyDescription")
 			})
 		})
 	}) });
@@ -12436,6 +12561,7 @@ function DataTableBody(props) {
 	}, props.getRowId(r));
 	const header = (group, open, extra) => /* @__PURE__ */ jsx(GroupHeaderRow, {
 		group,
+		labels: props.labels,
 		open,
 		selectable,
 		selected,
@@ -12501,10 +12627,10 @@ function DataTableBody(props) {
 //#endregion
 //#region src/tables/DataTable/density-toggle.tsx
 /** Two-icon segmented control: comfortable or compact rows. */
-function DensityToggle({ value, onChange }) {
+function DensityToggle({ value, onChange, labels }) {
 	const { t } = useI18n();
 	return /* @__PURE__ */ jsxs(ToggleGroup, {
-		"aria-label": t("table.density"),
+		"aria-label": labels?.density ?? t("table.density"),
 		size: "sm",
 		value: [value],
 		onValueChange: (v) => {
@@ -12514,7 +12640,7 @@ function DensityToggle({ value, onChange }) {
 		children: [/* @__PURE__ */ jsx(Toggle, {
 			value: "comfortable",
 			iconOnly: true,
-			"aria-label": t("table.comfortable"),
+			"aria-label": labels?.comfortable ?? t("table.comfortable"),
 			children: /* @__PURE__ */ jsx(Rows2, {
 				size: 15,
 				"aria-hidden": true
@@ -12522,7 +12648,7 @@ function DensityToggle({ value, onChange }) {
 		}), /* @__PURE__ */ jsx(Toggle, {
 			value: "compact",
 			iconOnly: true,
-			"aria-label": t("table.compact"),
+			"aria-label": labels?.compact ?? t("table.compact"),
 			children: /* @__PURE__ */ jsx(Rows3, {
 				size: 15,
 				"aria-hidden": true
@@ -12657,7 +12783,7 @@ const BIG_STEP = 50;
 * aria-valuenow/min/max (the width in px). Drag it with a pointer; from the keyboard,
 * ArrowLeft/ArrowRight change the width by 10px (Shift: 50px), Home/End jump to the limits.
 */
-function ColumnResizeHandle({ label, width, min, max, onResize, onResizeEnd }) {
+function ColumnResizeHandle({ label, width, min, max, onResize, onResizeEnd, labels }) {
 	const drag = useRef(null);
 	const clamp = (w) => Math.round(Math.min(max, Math.max(min, w)));
 	const onPointerDown = (e) => {
@@ -12701,11 +12827,11 @@ function ColumnResizeHandle({ label, width, min, max, onResize, onResizeEnd }) {
 		role: "separator",
 		tabIndex: 0,
 		"aria-orientation": "vertical",
-		"aria-label": `Resize ${label} column`,
+		"aria-label": labels?.resizeColumn?.(label) ?? `Resize ${label} column`,
 		"aria-valuenow": width,
 		"aria-valuemin": min,
 		"aria-valuemax": max,
-		"aria-valuetext": `${width} pixels`,
+		"aria-valuetext": labels?.columnWidth?.(width) ?? `${width} pixels`,
 		"data-column-resizer": "",
 		onPointerDown,
 		onPointerMove,
@@ -12725,7 +12851,7 @@ function ColumnResizeHandle({ label, width, min, max, onResize, onResizeEnd }) {
 * Column header of the DataTable. Without a resize handle it is the kit TableHead; with one, the
 * sort button and the handle sit side by side (the handle never nests inside the button).
 */
-function DataTableHeadCell({ column, sortDirection, onSortChange, layout, resize }) {
+function DataTableHeadCell({ column, sortDirection, onSortChange, layout, resize, labels }) {
 	const align = columnAlign(column);
 	const pinnedClass = layout?.pinned ? cn(layout.className, "z-[11]", stickyTint(layout, { head: true }), "bg-card") : void 0;
 	if (!resize) return /* @__PURE__ */ jsx(TableHead, {
@@ -12765,6 +12891,7 @@ function DataTableHeadCell({ column, sortDirection, onSortChange, layout, resize
 				})]
 			}) : column.header
 		}), /* @__PURE__ */ jsx(ColumnResizeHandle, {
+			labels,
 			label: column.header,
 			width: resize.width,
 			min: resize.min,
@@ -12898,7 +13025,7 @@ function newViewId(name, views) {
 }
 const DEFAULT_VALUE = "__default__";
 /** "Views" menu: switch between saved views, save the current table as a view, rename, delete, reset. */
-function ViewSwitcher({ views, activeId, dirty, onSelect, onSaveAs, onSave, onRename, onDelete, onReset }) {
+function ViewSwitcher({ labels, views, activeId, dirty, onSelect, onSaveAs, onSave, onRename, onDelete, onReset }) {
 	const inputId = useId();
 	const active = views.find((v) => v.id === activeId) ?? null;
 	const [dialog, setDialog] = useState(null);
@@ -12923,7 +13050,7 @@ function ViewSwitcher({ views, activeId, dirty, onSelect, onSaveAs, onSave, onRe
 		}),
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "max-w-40 truncate",
-			children: active ? active.name : "Default view"
+			children: active ? active.name : labels?.defaultView ?? "Default view"
 		}), dirty && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			" ",
 			/* @__PURE__ */ jsx("span", {
@@ -12933,19 +13060,19 @@ function ViewSwitcher({ views, activeId, dirty, onSelect, onSaveAs, onSave, onRe
 			" ",
 			/* @__PURE__ */ jsx("span", {
 				className: "sr-only",
-				children: "(modified)"
+				children: labels?.modified ?? "(modified)"
 			})
 		] })]
 	}), /* @__PURE__ */ jsxs(MenuContent, {
 		align: "end",
 		className: "min-w-[220px]",
 		children: [
-			/* @__PURE__ */ jsxs(MenuGroup, { children: [/* @__PURE__ */ jsx(MenuGroupLabel, { children: "Views" }), /* @__PURE__ */ jsxs(MenuRadioGroup, {
+			/* @__PURE__ */ jsxs(MenuGroup, { children: [/* @__PURE__ */ jsx(MenuGroupLabel, { children: labels?.views ?? "Views" }), /* @__PURE__ */ jsxs(MenuRadioGroup, {
 				value: activeId ?? DEFAULT_VALUE,
 				onValueChange: (v) => onSelect(v === DEFAULT_VALUE ? null : String(v)),
 				children: [/* @__PURE__ */ jsx(MenuRadioItem, {
 					value: DEFAULT_VALUE,
-					children: "Default view"
+					children: labels?.defaultViewOption ?? "Default view"
 				}), views.map((v) => /* @__PURE__ */ jsx(MenuRadioItem, {
 					value: v.id,
 					children: v.name
@@ -12955,26 +13082,26 @@ function ViewSwitcher({ views, activeId, dirty, onSelect, onSaveAs, onSave, onRe
 			/* @__PURE__ */ jsx(MenuItem, {
 				disabled: !active || !dirty,
 				onClick: onSave,
-				children: "Save changes"
+				children: labels?.saveChanges ?? "Save changes"
 			}),
 			/* @__PURE__ */ jsx(MenuItem, {
 				onClick: () => open("create"),
-				children: "Save as new view…"
+				children: labels?.saveAs ?? "Save as new view…"
 			}),
 			/* @__PURE__ */ jsx(MenuItem, {
 				disabled: !active,
 				onClick: () => open("rename"),
-				children: "Rename view…"
+				children: labels?.renameView ?? "Rename view…"
 			}),
 			/* @__PURE__ */ jsx(MenuItem, {
 				disabled: !active,
 				onClick: () => active && onDelete(active.id),
-				children: "Delete view"
+				children: labels?.deleteView ?? "Delete view"
 			}),
 			/* @__PURE__ */ jsx(MenuItem, {
 				disabled: !dirty,
 				onClick: onReset,
-				children: "Reset changes"
+				children: labels?.resetChanges ?? "Reset changes"
 			})
 		]
 	})] }), /* @__PURE__ */ jsx(Dialog, {
@@ -12982,17 +13109,18 @@ function ViewSwitcher({ views, activeId, dirty, onSelect, onSaveAs, onSave, onRe
 		onOpenChange: (o) => !o && setDialog(null),
 		children: /* @__PURE__ */ jsx(DialogContent, {
 			size: "sm",
+			closeLabel: labels?.closeDialog,
 			children: /* @__PURE__ */ jsxs("form", {
 				onSubmit: (e) => {
 					e.preventDefault();
 					submit();
 				},
 				children: [
-					/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: dialog === "rename" ? "Rename view" : "Save view" }) }),
+					/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: dialog === "rename" ? labels?.renameViewTitle ?? "Rename view" : labels?.saveViewTitle ?? "Save view" }) }),
 					/* @__PURE__ */ jsxs(DialogBody, { children: [/* @__PURE__ */ jsx("label", {
 						htmlFor: inputId,
 						className: "mb-1.5 block text-[12.5px] font-medium text-foreground",
-						children: "View name"
+						children: labels?.viewName ?? "View name"
 					}), /* @__PURE__ */ jsx(Input, {
 						id: inputId,
 						value: name,
@@ -13002,11 +13130,11 @@ function ViewSwitcher({ views, activeId, dirty, onSelect, onSaveAs, onSave, onRe
 					})] }),
 					/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(DialogClose, {
 						render: /* @__PURE__ */ jsx(Button, { variant: "ghost" }),
-						children: "Cancel"
+						children: labels?.cancel ?? "Cancel"
 					}), /* @__PURE__ */ jsx(Button, {
 						type: "submit",
 						disabled: !name.trim(),
-						children: dialog === "rename" ? "Rename" : "Save view"
+						children: dialog === "rename" ? labels?.rename ?? "Rename" : labels?.saveView ?? "Save view"
 					})] })
 				]
 			})
@@ -13147,7 +13275,7 @@ function DataTable({ rows = DEPLOYMENT_ROWS, columns = DEPLOYMENT_COLUMNS, getRo
 	10,
 	25,
 	50
-], density: densityProp, defaultDensity, onDensityChange, showDensityToggle = true, showColumnMenu = true, loading = false, loadingRows = 5, emptyState, groupBy, groupLabel, collapsibleGroups = true, collapsedGroups: collapsedProp, defaultCollapsedGroups = [], onCollapsedGroupsChange, onGroupByChange, hiddenColumns: hiddenProp, onHiddenColumnsChange, resizable = false, columnWidths: widthsProp, defaultColumnWidths = EMPTY_WIDTHS, onColumnWidthsChange, pinnedColumns: pinnedProp, defaultPinnedColumns = EMPTY_PINNED, onPinnedColumnsChange, showPinMenu, virtualize = "auto", virtualizeThreshold = 100, rowHeight: rowHeightProp, virtualContainerClassName = "max-h-[32rem]", onCellEdit, views: viewsProp, defaultViews, onViewsChange, activeViewId, defaultActiveViewId, onActiveViewChange, showViewSwitcher, filters, onFiltersChange, toolbar, className }) {
+], density: densityProp, defaultDensity, onDensityChange, showDensityToggle = true, showColumnMenu = true, loading = false, loadingRows = 5, emptyState, groupBy, groupLabel, collapsibleGroups = true, collapsedGroups: collapsedProp, defaultCollapsedGroups = [], onCollapsedGroupsChange, onGroupByChange, hiddenColumns: hiddenProp, onHiddenColumnsChange, resizable = false, columnWidths: widthsProp, defaultColumnWidths = EMPTY_WIDTHS, onColumnWidthsChange, pinnedColumns: pinnedProp, defaultPinnedColumns = EMPTY_PINNED, onPinnedColumnsChange, showPinMenu, virtualize = "auto", virtualizeThreshold = 100, rowHeight: rowHeightProp, virtualContainerClassName = "max-h-[32rem]", onCellEdit, views: viewsProp, defaultViews, onViewsChange, activeViewId, defaultActiveViewId, onActiveViewChange, showViewSwitcher, filters, onFiltersChange, toolbar, className, labels }) {
 	const { t } = useI18n();
 	const singleMode = selectionMode === "single";
 	const selectable = selectionMode === void 0 ? selectableProp : selectionMode === "multiple";
@@ -13208,7 +13336,7 @@ function DataTable({ rows = DEPLOYMENT_ROWS, columns = DEPLOYMENT_COLUMNS, getRo
 		setInnerCollapsed(next);
 		onCollapsedGroupsChange?.([...next]);
 	};
-	const nameOf = (key) => key || "No group";
+	const nameOf = (key) => key || (labels?.noGroup ?? "No group");
 	const bodyGroups = effectiveGroupBy && allGroups ? allGroups.map((g) => ({
 		key: g.key,
 		label: groupLabel ? groupLabel(g.key, g.rows) : nameOf(g.key),
@@ -13313,10 +13441,10 @@ function DataTable({ rows = DEPLOYMENT_ROWS, columns = DEPLOYMENT_COLUMNS, getRo
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "flex min-w-0 flex-1 flex-wrap items-center gap-2",
 					children: hasSelection ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-						selectionSummary && /* @__PURE__ */ jsxs("span", {
+						selectionSummary && /* @__PURE__ */ jsx("span", {
 							className: "text-[12.5px] font-semibold text-foreground",
 							"aria-live": "polite",
-							children: [selectedList.length, " selected"]
+							children: labels?.selectionCount ? labels.selectionCount(selectedList.length) : /* @__PURE__ */ jsxs(Fragment$1, { children: [selectedList.length, " selected"] })
 						}),
 						selectionSummary && bulkActions && /* @__PURE__ */ jsx("span", {
 							"aria-hidden": true,
@@ -13328,6 +13456,7 @@ function DataTable({ rows = DEPLOYMENT_ROWS, columns = DEPLOYMENT_COLUMNS, getRo
 					className: "flex items-center gap-2",
 					children: [
 						showViews && /* @__PURE__ */ jsx(ViewSwitcher, {
+							labels,
 							views: viewsApi.views,
 							activeId: viewsApi.activeId,
 							dirty: viewsApi.dirty,
@@ -13339,10 +13468,12 @@ function DataTable({ rows = DEPLOYMENT_ROWS, columns = DEPLOYMENT_COLUMNS, getRo
 							onReset: viewsApi.reset
 						}),
 						showDensityToggle && /* @__PURE__ */ jsx(DensityToggle, {
+							labels,
 							value: density,
 							onChange: changeDensity
 						}),
 						showColumnMenu && /* @__PURE__ */ jsx(ColumnVisibilityMenu, {
+							labels,
 							columns,
 							hidden,
 							onToggle: toggleColumn,
@@ -13355,7 +13486,7 @@ function DataTable({ rows = DEPLOYMENT_ROWS, columns = DEPLOYMENT_COLUMNS, getRo
 			anyEditable && /* @__PURE__ */ jsx("span", {
 				id: editHintId,
 				className: "sr-only",
-				children: "Press Enter or F2 to edit."
+				children: labels?.editHint ?? "Press Enter or F2 to edit."
 			}),
 			/* @__PURE__ */ jsx(SelectionGroup, {
 				single: singleMode,
@@ -13370,7 +13501,7 @@ function DataTable({ rows = DEPLOYMENT_ROWS, columns = DEPLOYMENT_COLUMNS, getRo
 						"aria-rowcount": virtual ? items + 1 : void 0,
 						stickyHeader: virtualOn,
 						containerClassName: virtualOn ? virtualContainerClassName : void 0,
-						containerLabel: virtualOn ? caption : void 0,
+						containerLabel: virtualOn ? caption : labels?.scrollRegion,
 						className: cn(layout.tableClassName, singleMode && "[&_[data-column-resizer]]:end-0 [&_[data-column-resizer]]:justify-end"),
 						style: layout.tableStyle,
 						"data-virtualized": virtualOn || void 0,
@@ -13388,9 +13519,9 @@ function DataTable({ rows = DEPLOYMENT_ROWS, columns = DEPLOYMENT_COLUMNS, getRo
 										style: layout.lead.style,
 										children: [singleMode && /* @__PURE__ */ jsx("span", {
 											className: "sr-only",
-											children: t("table.selection")
+											children: labels?.selection ?? t("table.selection")
 										}), selectable && /* @__PURE__ */ jsx(Checkbox, {
-											"aria-label": t("table.selectAllPage"),
+											"aria-label": labels?.selectAll ?? t("table.selectAllPage"),
 											checked: header.checked,
 											indeterminate: header.indeterminate,
 											disabled: loading || pageIds.length === 0,
@@ -13400,6 +13531,7 @@ function DataTable({ rows = DEPLOYMENT_ROWS, columns = DEPLOYMENT_COLUMNS, getRo
 									visibleColumns.map((c) => {
 										const bounds = widthBounds(c);
 										return /* @__PURE__ */ jsx(DataTableHeadCell, {
+											labels,
 											column: c,
 											layout: layout.columns.get(c.id),
 											sortDirection: sort?.columnId === c.id ? sort.direction : "none",
@@ -13417,12 +13549,13 @@ function DataTable({ rows = DEPLOYMENT_ROWS, columns = DEPLOYMENT_COLUMNS, getRo
 										style: layout.trail.style,
 										children: /* @__PURE__ */ jsx("span", {
 											className: "sr-only",
-											children: t("table.actions")
+											children: labels?.actions ?? t("table.actions")
 										})
 									})
 								]
 							}) }),
 							/* @__PURE__ */ jsx(DataTableBody, {
+								labels,
 								rows: pageRows,
 								columns: visibleColumns,
 								getRowId,
@@ -13449,16 +13582,17 @@ function DataTable({ rows = DEPLOYMENT_ROWS, columns = DEPLOYMENT_COLUMNS, getRo
 					})
 				})
 			}),
-			loading && /* @__PURE__ */ jsxs("p", {
+			loading && /* @__PURE__ */ jsx("p", {
 				role: "status",
 				className: "sr-only",
-				children: [
+				children: labels?.loading ? labels.loading(caption) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					"Loading ",
 					caption.toLowerCase(),
 					"…"
-				]
+				] })
 			}),
 			paginated && !loading && rows.length > 0 && /* @__PURE__ */ jsx(PaginationFooter, {
+				labels,
 				className: "border-t border-border px-4 py-3",
 				total: rows.length,
 				page,
@@ -13478,6 +13612,283 @@ const meta$15 = {
 	family: "tables",
 	status: "beta",
 	description: "Generic typed table: sortable headers with aria-sort, row selection with select-all and indeterminate by default (selectionMode=\"multiple\"), selectionMode=\"none\" to hide selection, column visibility menu, density toggle, row actions, loading and empty states, client-side sort and pagination, optional row groups (groupBy) with rowgroup header rows, counts, keyboard-accessible collapse buttons and group selection; column resize (pointer drag or a focusable role=\"separator\" handle with arrow keys, min/max widths, controlled columnWidths), column pinning to either edge with sticky cells (column menu or pinnedColumns), row virtualization for large datasets (aria-rowcount/aria-rowindex, works with selection and grouping), inline cell editing (text, number and select editors; Enter/F2 to edit, Enter/Tab to commit, Escape to cancel, onCellEdit can reject with an inline error) and saved views (filters, sort, visible columns, widths, pinning and grouping) with a view switcher to save as, rename, delete and reset. Opt-in selectionMode=\"single\" uses native radios in a labelled fieldset (never paginated or virtualized; paginated defaults to false and paginated=true is a type error). Single mode uses selectedId/onSelectedIdChange or defaultSelectedId; isRowDisabled skips unavailable rows and preserves a checked disabled choice without callbacks. Supply legend, aria-label or aria-labelledby for the group and getRowLabel for each radio (otherwise the first column labels it). selectionName is used verbatim and must be unique per page; omitted names use an instance-unique useId name, and duplicate supplied names or missing group labels warn in development. Tab enters once on the checked enabled row or first enabled row; arrows wrap and skip disabled rows, Space selects, Shift+Tab exits, and all-disabled groups have no tab stop. No select-all, group checkboxes, bulk actions or selection summary appear in single mode. Examples in examples/single-selection.tsx: an uncontrolled non-paginated list with legend=\"Available items\" and a controlled versions table with legend=\"Available versions\", selectedId=\"v2\" and a checked disabled version.",
+	labels: [
+		{
+			key: "scrollRegion",
+			type: "string",
+			state: "Non-virtual table overflow: focusable scroll region name; virtualized regions use the caller caption"
+		},
+		{
+			key: "selectionCount",
+			type: "(count: number) => string",
+			state: "Multiple selection: toolbar count and polite live region"
+		},
+		{
+			key: "columns",
+			type: "string",
+			state: "Column visibility trigger text and name"
+		},
+		{
+			key: "visibleColumns",
+			type: "string",
+			state: "Open column menu: visibility heading"
+		},
+		{
+			key: "pinColumns",
+			type: "string",
+			state: "Open column menu with pinning: pin heading"
+		},
+		{
+			key: "pinnedLeft",
+			type: "string",
+			state: "Open pin submenu trigger: left side suffix"
+		},
+		{
+			key: "pinnedRight",
+			type: "string",
+			state: "Open pin submenu trigger: right side suffix"
+		},
+		{
+			key: "pinLeft",
+			type: "string",
+			state: "Open pin submenu: left option"
+		},
+		{
+			key: "pinRight",
+			type: "string",
+			state: "Open pin submenu: right option"
+		},
+		{
+			key: "unpinned",
+			type: "string",
+			state: "Open pin submenu: unpinned option"
+		},
+		{
+			key: "density",
+			type: "string",
+			state: "Density group accessible name"
+		},
+		{
+			key: "comfortable",
+			type: "string",
+			state: "Comfortable density button name"
+		},
+		{
+			key: "compact",
+			type: "string",
+			state: "Compact density button name"
+		},
+		{
+			key: "resizeColumn",
+			type: "(label: string) => string",
+			state: "Resizable header: separator name; label is caller column header"
+		},
+		{
+			key: "columnWidth",
+			type: "(width: number) => string",
+			state: "Resizable header: separator aria-valuetext in pixels"
+		},
+		{
+			key: "defaultView",
+			type: "string",
+			state: "View trigger when no active view"
+		},
+		{
+			key: "defaultViewOption",
+			type: "string",
+			state: "Open views menu: default option"
+		},
+		{
+			key: "modified",
+			type: "string",
+			state: "Dirty view trigger: screen reader suffix"
+		},
+		{
+			key: "views",
+			type: "string",
+			state: "Open views menu: heading"
+		},
+		{
+			key: "saveChanges",
+			type: "string",
+			state: "Open views menu: save current view action"
+		},
+		{
+			key: "saveAs",
+			type: "string",
+			state: "Open views menu: save as action"
+		},
+		{
+			key: "renameView",
+			type: "string",
+			state: "Open views menu: rename action"
+		},
+		{
+			key: "deleteView",
+			type: "string",
+			state: "Open views menu: immediate delete action; no confirmation dialog"
+		},
+		{
+			key: "resetChanges",
+			type: "string",
+			state: "Open views menu: reset action"
+		},
+		{
+			key: "saveViewTitle",
+			type: "string",
+			state: "Save as dialog: title and accessible name"
+		},
+		{
+			key: "renameViewTitle",
+			type: "string",
+			state: "Rename dialog: title and accessible name"
+		},
+		{
+			key: "viewName",
+			type: "string",
+			state: "Save as and Rename dialogs: input label"
+		},
+		{
+			key: "cancel",
+			type: "string",
+			state: "Save as and Rename dialogs: cancel button"
+		},
+		{
+			key: "saveView",
+			type: "string",
+			state: "Save as dialog: submit button"
+		},
+		{
+			key: "rename",
+			type: "string",
+			state: "Rename dialog: submit button"
+		},
+		{
+			key: "closeDialog",
+			type: "string",
+			state: "Save as and Rename dialogs: close button name"
+		},
+		{
+			key: "selection",
+			type: "string",
+			state: "Single selection: screen reader column heading"
+		},
+		{
+			key: "selectAll",
+			type: "string",
+			state: "Multiple selection: header checkbox name"
+		},
+		{
+			key: "selectRow",
+			type: "(label: string) => string",
+			state: "Multiple selection: row checkbox name; label is caller row name"
+		},
+		{
+			key: "selectGroup",
+			type: "(group: string) => string",
+			state: "Grouped multiple selection: group checkbox name"
+		},
+		{
+			key: "groupRows",
+			type: "(count: number) => string",
+			state: "Grouped header: screen reader row-count unit; numeric count stays unchanged"
+		},
+		{
+			key: "noGroup",
+			type: "string",
+			state: "Grouped header: fallback when group key is empty"
+		},
+		{
+			key: "actions",
+			type: "string",
+			state: "Row actions present: screen reader column heading"
+		},
+		{
+			key: "rowActions",
+			type: "(label: string) => string",
+			state: "Row action menu trigger name; label is caller row name"
+		},
+		{
+			key: "emptyTitle",
+			type: "string",
+			state: "Empty rows: default empty-state title"
+		},
+		{
+			key: "emptyDescription",
+			type: "string",
+			state: "Empty rows: default empty-state description"
+		},
+		{
+			key: "loading",
+			type: "(caption: string) => string",
+			state: "Loading: status announcement; receives original caller caption"
+		},
+		{
+			key: "editHint",
+			type: "string",
+			state: "Editable table: shared keyboard instruction description"
+		},
+		{
+			key: "editLabel",
+			type: "(column: string, row: string) => string",
+			state: "Editing cell: input accessible name"
+		},
+		{
+			key: "editError",
+			type: "string",
+			state: "Rejected cell edit without caller error message: alert"
+		},
+		{
+			key: "enterNumber",
+			type: "string",
+			state: "Editing number: invalid numeric value alert"
+		},
+		{
+			key: "minimumValue",
+			type: "(min: number) => string",
+			state: "Editing number below minimum: alert"
+		},
+		{
+			key: "maximumValue",
+			type: "(max: number) => string",
+			state: "Editing number above maximum: alert"
+		},
+		{
+			key: "rowsPerPage",
+			type: "string",
+			state: "Always: visible page-size text"
+		},
+		{
+			key: "rowsPerPageLabel",
+			type: "string",
+			state: "Always: page-size Select accessible name"
+		},
+		{
+			key: "rangeSummary",
+			type: "(from: number, to: number, total: number) => string",
+			state: "Every page and page-size change: visible summary and polite live region"
+		},
+		{
+			key: "paginationNav",
+			type: "(noun: string) => string",
+			state: "Always: navigation accessible name; noun is the caller caption"
+		},
+		{
+			key: "previous",
+			type: "string",
+			state: "Always: previous-page button name"
+		},
+		{
+			key: "next",
+			type: "string",
+			state: "Always: next-page button name"
+		},
+		{
+			key: "page",
+			type: "(page: number) => string",
+			state: "Always: numbered-page button name; number stays caller content"
+		}
+	],
 	uses: [
 		"Table",
 		"Checkbox",
@@ -13571,9 +13982,10 @@ const same = (a, b) => a.field === b.field && a.value === b.value;
 * Filter bar: search Input, saved views Select, an "Add filter" Menu (multi-select per field),
 * removable filter chips (Token) and Clear all.
 */
-function FilterBar({ fields = DEPLOYMENT_FILTER_FIELDS, query: queryProp, defaultQuery = "", onQueryChange, filters: filtersProp, defaultFilters = DEPLOYMENT_DEFAULT_FILTERS, onFiltersChange, views = DEPLOYMENT_SAVED_VIEWS, defaultView = null, onViewChange, searchLabel: searchLabelProp, placeholder = "Search by name…", resultCount, className }) {
+function FilterBar({ fields = DEPLOYMENT_FILTER_FIELDS, query: queryProp, defaultQuery = "", onQueryChange, filters: filtersProp, defaultFilters = DEPLOYMENT_DEFAULT_FILTERS, onFiltersChange, views = DEPLOYMENT_SAVED_VIEWS, defaultView = null, onViewChange, searchLabel: searchLabelProp, placeholder: placeholderProp, resultCount, className, labels }) {
 	const { t } = useI18n();
-	const searchLabel = searchLabelProp ?? t("common.search");
+	const searchLabel = labels?.searchLabel ?? searchLabelProp ?? t("common.search");
+	const placeholder = labels?.searchPlaceholder ?? placeholderProp ?? "Search by name…";
 	const [innerQuery, setInnerQuery] = useState(defaultQuery);
 	const [innerFilters, setInnerFilters] = useState(defaultFilters);
 	const [view, setView] = useState(defaultView);
@@ -13605,7 +14017,7 @@ function FilterBar({ fields = DEPLOYMENT_FILTER_FIELDS, query: queryProp, defaul
 	const hasAny = filters.length > 0 || query !== "";
 	return /* @__PURE__ */ jsxs("div", {
 		role: "search",
-		"aria-label": t("filters.label"),
+		"aria-label": labels?.searchLandmark ?? t("filters.label"),
 		className: cn("flex flex-col gap-3", className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-2 sm:flex-row sm:items-center",
@@ -13623,9 +14035,9 @@ function FilterBar({ fields = DEPLOYMENT_FILTER_FIELDS, query: queryProp, defaul
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex flex-wrap items-center gap-2",
 					children: [views.length > 0 && /* @__PURE__ */ jsx(SimpleSelect, {
-						"aria-label": t("filters.savedView"),
+						"aria-label": labels?.savedViewLabel ?? t("filters.savedView"),
 						size: "sm",
-						placeholder: t("filters.savedViews"),
+						placeholder: labels?.savedViewPlaceholder ?? t("filters.savedViews"),
 						value: view,
 						onValueChange: applyView,
 						items: views.map((v) => ({
@@ -13639,7 +14051,7 @@ function FilterBar({ fields = DEPLOYMENT_FILTER_FIELDS, query: queryProp, defaul
 							size: "sm",
 							icon: Plus
 						}),
-						children: t("filters.add")
+						children: labels?.addFilter ?? t("filters.add")
 					}), /* @__PURE__ */ jsx(MenuContent, {
 						className: "max-h-80 min-w-[220px] overflow-y-auto",
 						children: fields.map((field, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsxs(MenuGroup, { children: [/* @__PURE__ */ jsx(MenuGroupLabel, { children: field.label }), field.options.map((option) => {
@@ -13655,17 +14067,17 @@ function FilterBar({ fields = DEPLOYMENT_FILTER_FIELDS, query: queryProp, defaul
 						})] })] }, field.id))
 					})] })]
 				}),
-				resultCount !== void 0 && /* @__PURE__ */ jsxs("p", {
+				resultCount !== void 0 && /* @__PURE__ */ jsx("p", {
 					className: "text-[12.5px] text-muted-foreground sm:ms-auto",
 					"aria-live": "polite",
-					children: [
+					children: labels?.resultCount ? labels.resultCount(resultCount) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 						/* @__PURE__ */ jsx("span", {
 							className: "font-mono text-foreground tabular-nums",
 							children: resultCount.toLocaleString("en-US")
 						}),
 						" ",
 						resultCount === 1 ? "result" : "results"
-					]
+					] })
 				})
 			]
 		}), hasAny && /* @__PURE__ */ jsxs("div", {
@@ -13676,10 +14088,10 @@ function FilterBar({ fields = DEPLOYMENT_FILTER_FIELDS, query: queryProp, defaul
 					children: [/* @__PURE__ */ jsx(ListFilter, {
 						size: 12,
 						"aria-hidden": true
-					}), "Filters"]
+					}), labels?.filters ?? "Filters"]
 				}),
 				/* @__PURE__ */ jsx("ul", {
-					"aria-label": t("filters.active"),
+					"aria-label": labels?.activeFilters ?? t("filters.active"),
 					className: "flex flex-wrap items-center gap-2",
 					children: filters.map((f) => /* @__PURE__ */ jsx("li", {
 						className: "flex",
@@ -13687,7 +14099,7 @@ function FilterBar({ fields = DEPLOYMENT_FILTER_FIELDS, query: queryProp, defaul
 							size: "sm",
 							prefix: `${labelOf(f.field)}:`,
 							label: f.value,
-							removeLabel: t("filters.remove", {
+							removeLabel: labels?.removeFilter?.(labelOf(f.field), f.value) ?? t("filters.remove", {
 								field: labelOf(f.field),
 								value: f.value
 							}),
@@ -13700,7 +14112,7 @@ function FilterBar({ fields = DEPLOYMENT_FILTER_FIELDS, query: queryProp, defaul
 					size: "sm",
 					className: "h-7 px-2 hover:text-destructive-text",
 					onClick: clearAll,
-					children: "Clear all"
+					children: labels?.clearAll ?? "Clear all"
 				})
 			]
 		})]
@@ -13713,6 +14125,63 @@ const meta$26 = {
 	family: "tables",
 	status: "beta",
 	description: "Search Input, saved views Select, an Add filter Menu with multi-select per field, removable filter chips and Clear all.",
+	labels: [
+		{
+			key: "searchLandmark",
+			type: "string",
+			state: "Always: search landmark name"
+		},
+		{
+			key: "searchLabel",
+			type: "string",
+			state: "Always: search input accessible name"
+		},
+		{
+			key: "searchPlaceholder",
+			type: "string",
+			state: "Always: search input placeholder"
+		},
+		{
+			key: "savedViewLabel",
+			type: "string",
+			state: "When views exist: Select accessible name"
+		},
+		{
+			key: "savedViewPlaceholder",
+			type: "string",
+			state: "When no view selected: Select placeholder"
+		},
+		{
+			key: "addFilter",
+			type: "string",
+			state: "Always: Add filter trigger text and name"
+		},
+		{
+			key: "activeFilters",
+			type: "string",
+			state: "When filters or search exist: active-filters list name"
+		},
+		{
+			key: "filters",
+			type: "string",
+			state: "When filters or search exist: chip section heading"
+		},
+		{
+			key: "clearAll",
+			type: "string",
+			state: "When filters or search exist: clear button text and name"
+		},
+		{
+			key: "removeFilter",
+			type: "(field: string, value: string) => string",
+			state: "When chip exists: remove button name; field and value are caller content"
+		},
+		{
+			key: "resultCount",
+			type: "(count: number) => string",
+			state: "When resultCount supplied: visible count and polite live region"
+		}
+	],
 	uses: [
 		"Input",
 		"SimpleSelect",
@@ -13729,6 +14198,43 @@ const meta$45 = {
 	family: "tables",
 	status: "beta",
 	description: "Table footer with a rows-per-page Select, a \"1–10 of 97\" summary and numbered Pagination; controlled or uncontrolled.",
+	labels: [
+		{
+			key: "rowsPerPage",
+			type: "string",
+			state: "Always: visible page-size text"
+		},
+		{
+			key: "rowsPerPageLabel",
+			type: "string",
+			state: "Always: page-size Select accessible name"
+		},
+		{
+			key: "rangeSummary",
+			type: "(from: number, to: number, total: number) => string",
+			state: "Every page and page-size change: visible summary and polite live region"
+		},
+		{
+			key: "paginationNav",
+			type: "(noun: string) => string",
+			state: "Always: navigation accessible name; noun is caller content or defaults to the provider translation of rows"
+		},
+		{
+			key: "previous",
+			type: "string",
+			state: "Always: previous-page button name"
+		},
+		{
+			key: "next",
+			type: "string",
+			state: "Always: next-page button name"
+		},
+		{
+			key: "page",
+			type: "(page: number) => string",
+			state: "Always: numbered-page button name; number stays caller content"
+		}
+	],
 	uses: ["SimpleSelect", "Pagination"]
 };
 //#endregion