@tensor_1/react 2.20.0 → 2.21.0

package/dist/components/BuilderCanvas.js

@@ -3,6 +3,29 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { reorder } from "../table-engine.js";
+import { fillLabel } from "../fill-label.js";
+const DEFAULT_BUILDER_CANVAS_LABELS = {
+  region: "Builder canvas",
+  palette: "Item palette",
+  paletteHeading: "Palette",
+  paletteEmpty: "No item types available.",
+  add: "Add",
+  addFirst: "Add {label}",
+  canvasHeading: "Canvas",
+  loading: "Loading canvas\u2026",
+  retry: "Try again",
+  moveUp: "Up",
+  moveUpNamed: "Move {label} up",
+  moveDown: "Down",
+  moveDownNamed: "Move {label} down",
+  remove: "Remove",
+  removeNamed: "Remove {label}",
+  properties: "Item properties",
+  propertiesHeading: "Properties",
+  propertiesEmpty: "Select a canvas item to edit its properties.",
+  type: "Type",
+  label: "Label"
+};
 function BuilderCanvas({
   items,
   onItemsChange,
@@ -15,8 +38,10 @@ function BuilderCanvas({
   error,
   onRetry,
   emptyMessage = "Add an item from the palette to begin.",
-  className
+  className,
+  labels: labelOverrides
 }) {
+  const labels = { ...DEFAULT_BUILDER_CANVAS_LABELS, ...labelOverrides };
   const [internalSelectedId, setInternalSelectedId] = useState();
   const [draggedId, setDraggedId] = useState();
   const propertyHeadingRef = useRef(null);
@@ -57,26 +82,23 @@ function BuilderCanvas({
     if (from >= 0 && to >= 0) onItemsChange(reorder(items, from, to));
     setDraggedId(void 0);
   };
-  return /* @__PURE__ */ jsxs("section", { className: cx("uix-builder-canvas", className), "aria-label": "Builder canvas", children: [
-    /* @__PURE__ */ jsxs("aside", { className: "uix-builder-canvas__palette", "aria-label": "Item palette", children: [
-      /* @__PURE__ */ jsx("h3", { children: "Palette" }),
-      palette.length === 0 ? /* @__PURE__ */ jsx("p", { children: "No item types available." }) : /* @__PURE__ */ jsx("ul", { children: palette.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => add(item), children: [
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-builder-canvas", className), "aria-label": labels.region, children: [
+    /* @__PURE__ */ jsxs("aside", { className: "uix-builder-canvas__palette", "aria-label": labels.palette, children: [
+      /* @__PURE__ */ jsx("h3", { children: labels.paletteHeading }),
+      palette.length === 0 ? /* @__PURE__ */ jsx("p", { children: labels.paletteEmpty }) : /* @__PURE__ */ jsx("ul", { children: palette.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => add(item), children: [
         /* @__PURE__ */ jsx("strong", { children: item.label }),
         item.description && /* @__PURE__ */ jsx("span", { children: item.description }),
-        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "Add" })
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: labels.add })
       ] }) }, item.id)) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "uix-builder-canvas__workspace", children: [
-      /* @__PURE__ */ jsx("h3", { children: "Canvas" }),
-      loading ? /* @__PURE__ */ jsx("div", { className: "uix-builder-canvas__state", role: "status", children: "Loading canvas\u2026" }) : error ? /* @__PURE__ */ jsxs("div", { className: "uix-builder-canvas__state", role: "alert", children: [
+      /* @__PURE__ */ jsx("h3", { children: labels.canvasHeading }),
+      loading ? /* @__PURE__ */ jsx("div", { className: "uix-builder-canvas__state", role: "status", children: labels.loading }) : error ? /* @__PURE__ */ jsxs("div", { className: "uix-builder-canvas__state", role: "alert", children: [
         /* @__PURE__ */ jsx("p", { children: error }),
-        onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: "Try again" })
+        onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: labels.retry })
       ] }) : items.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "uix-builder-canvas__state", children: [
         /* @__PURE__ */ jsx("p", { children: emptyMessage }),
-        palette[0] && /* @__PURE__ */ jsxs("button", { type: "button", className: "uix-btn uix-btn--primary", onClick: () => add(palette[0]), children: [
-          "Add ",
-          palette[0].label
-        ] })
+        palette[0] && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--primary", onClick: () => add(palette[0]), children: fillLabel(labels.addFirst, { label: palette[0].label }) })
       ] }) : /* @__PURE__ */ jsx("ol", { className: "uix-builder-canvas__items", children: items.map((item, index) => /* @__PURE__ */ jsxs(
         "li",
         {
@@ -92,26 +114,27 @@ function BuilderCanvas({
               item.description && /* @__PURE__ */ jsx("span", { children: item.description })
             ] }) }),
             /* @__PURE__ */ jsxs("span", { className: "uix-builder-canvas__item-actions", children: [
-              /* @__PURE__ */ jsx("button", { type: "button", onClick: () => move(item.id, -1), disabled: index === 0, "aria-label": `Move ${item.label} up`, children: "Up" }),
-              /* @__PURE__ */ jsx("button", { type: "button", onClick: () => move(item.id, 1), disabled: index === items.length - 1, "aria-label": `Move ${item.label} down`, children: "Down" }),
-              /* @__PURE__ */ jsx("button", { type: "button", onClick: () => remove(item.id), "aria-label": `Remove ${item.label}`, children: "Remove" })
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: () => move(item.id, -1), disabled: index === 0, "aria-label": fillLabel(labels.moveUpNamed, { label: item.label }), children: labels.moveUp }),
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: () => move(item.id, 1), disabled: index === items.length - 1, "aria-label": fillLabel(labels.moveDownNamed, { label: item.label }), children: labels.moveDown }),
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: () => remove(item.id), "aria-label": fillLabel(labels.removeNamed, { label: item.label }), children: labels.remove })
             ] })
           ]
         },
         item.id
       )) })
     ] }),
-    /* @__PURE__ */ jsxs("aside", { className: "uix-builder-canvas__properties", "aria-label": "Item properties", children: [
-      /* @__PURE__ */ jsx("h3", { ref: propertyHeadingRef, tabIndex: -1, children: "Properties" }),
-      !selected ? /* @__PURE__ */ jsx("p", { children: "Select a canvas item to edit its properties." }) : renderProperties?.(selected, (updated) => onItemsChange(items.map((item) => item.id === updated.id ? updated : item))) ?? /* @__PURE__ */ jsxs("dl", { children: [
-        /* @__PURE__ */ jsx("dt", { children: "Type" }),
+    /* @__PURE__ */ jsxs("aside", { className: "uix-builder-canvas__properties", "aria-label": labels.properties, children: [
+      /* @__PURE__ */ jsx("h3", { ref: propertyHeadingRef, tabIndex: -1, children: labels.propertiesHeading }),
+      !selected ? /* @__PURE__ */ jsx("p", { children: labels.propertiesEmpty }) : renderProperties?.(selected, (updated) => onItemsChange(items.map((item) => item.id === updated.id ? updated : item))) ?? /* @__PURE__ */ jsxs("dl", { children: [
+        /* @__PURE__ */ jsx("dt", { children: labels.type }),
         /* @__PURE__ */ jsx("dd", { children: selected.type }),
-        /* @__PURE__ */ jsx("dt", { children: "Label" }),
+        /* @__PURE__ */ jsx("dt", { children: labels.label }),
         /* @__PURE__ */ jsx("dd", { children: selected.label })
       ] })
     ] })
   ] });
 }
 export {
-  BuilderCanvas
+  BuilderCanvas,
+  DEFAULT_BUILDER_CANVAS_LABELS
 };

package/dist/components/Chart.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ChartProps } from './ChartCore.js';
-export { ChartLegend, ChartLegendItem, ChartLegendItemProps, ChartLegendProps, ChartMetric, ChartMetricProps, ChartTableRow, uixChartPalette } from './ChartCore.js';
+export { ChartLabels, ChartLegend, ChartLegendItem, ChartLegendItemProps, ChartLegendProps, ChartMetric, ChartMetricProps, ChartTableRow, DEFAULT_CHART_LABELS, uixChartPalette } from './ChartCore.js';
 import 'echarts';
 
 /** Full-compatibility adapter. Use `@tensor_1/react/chart/preset` for the lean preset. */

package/dist/components/Chart.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import * as echarts from "echarts";
 import { ChartCore } from "./ChartCore.js";
-import { ChartLegend, ChartLegendItem, ChartMetric, uixChartPalette } from "./ChartCore.js";
+import { ChartLegend, ChartLegendItem, ChartMetric, DEFAULT_CHART_LABELS, uixChartPalette } from "./ChartCore.js";
 function Chart(props) {
   return /* @__PURE__ */ jsx(ChartCore, { ...props, engine: echarts });
 }
@@ -11,5 +11,6 @@ export {
   ChartLegend,
   ChartLegendItem,
   ChartMetric,
+  DEFAULT_CHART_LABELS,
   uixChartPalette
 };

package/dist/components/ChartCore.d.ts

@@ -11,6 +11,19 @@ declare function uixChartPalette(): string[];
 interface ChartTableRow {
     [key: string]: string | number;
 }
+/**
+ * Every word the chart renders itself (TENSOR RX-125, UIX-04 / UIX-05). The
+ * loading text used to live in CSS `content:`, where nothing could translate it.
+ */
+interface ChartLabels {
+    /** Shown (and announced inside the busy region) while `loading`. */
+    loading: ReactNode;
+    /** Accessible name when neither `ariaLabel` nor `title` is given. */
+    chart: string;
+    /** Appended to the chart's name for its data-table alternative. */
+    dataTableSuffix: string;
+}
+declare const DEFAULT_CHART_LABELS: ChartLabels;
 interface ChartProps {
     option: EChartsOption;
     title?: string;
@@ -27,12 +40,14 @@ interface ChartProps {
     footer?: ReactNode;
     loading?: boolean;
     empty?: ReactNode;
+    /** Translatable words; English defaults in {@link DEFAULT_CHART_LABELS}. */
+    labels?: Partial<ChartLabels>;
 }
 interface ChartCoreProps extends ChartProps {
     engine: ChartEngine;
 }
 /** Shared chart lifecycle. Runtime adapters only choose the ECharts build. */
-declare function ChartCore({ engine, option, title, subtitle, height, className, style, ariaLabel, tableData, tableHeaders, onReady, header, headerAction, footer, loading, empty, }: ChartCoreProps): react.JSX.Element;
+declare function ChartCore({ engine, option, title, subtitle, height, className, style, ariaLabel, tableData, tableHeaders, onReady, header, headerAction, footer, loading, empty, labels: labelOverrides, }: ChartCoreProps): react.JSX.Element;
 interface ChartMetricProps extends HTMLAttributes<HTMLDivElement> {
     value: ReactNode;
     label?: ReactNode;
@@ -51,4 +66,4 @@ interface ChartLegendItemProps extends HTMLAttributes<HTMLLIElement> {
 }
 declare function ChartLegendItem({ label, color, swatch, className, style, ...props }: ChartLegendItemProps): react.JSX.Element;
 
-export { ChartCore, type ChartEngine, ChartLegend, ChartLegendItem, type ChartLegendItemProps, type ChartLegendProps, ChartMetric, type ChartMetricProps, type ChartProps, type ChartTableRow, uixChartPalette };
+export { ChartCore, type ChartEngine, type ChartLabels, ChartLegend, ChartLegendItem, type ChartLegendItemProps, type ChartLegendProps, ChartMetric, type ChartMetricProps, type ChartProps, type ChartTableRow, DEFAULT_CHART_LABELS, uixChartPalette };

package/dist/components/ChartCore.js

@@ -15,6 +15,11 @@ function motionSafe(option) {
   }
   return option;
 }
+const DEFAULT_CHART_LABELS = {
+  loading: "Loading chart\u2026",
+  chart: "Chart",
+  dataTableSuffix: "data table"
+};
 function ChartCore({
   engine,
   option,
@@ -31,8 +36,10 @@ function ChartCore({
   headerAction,
   footer,
   loading = false,
-  empty
+  empty,
+  labels: labelOverrides
 }) {
+  const labels = { ...DEFAULT_CHART_LABELS, ...labelOverrides };
   const containerRef = useRef(null);
   const chartRef = useRef(null);
   const appliedOptionRef = useRef(null);
@@ -87,7 +94,7 @@ function ChartCore({
     appliedOptionRef.current = option;
   }, [option]);
   const heightValue = typeof height === "number" ? `${height}px` : height;
-  const effectiveAriaLabel = ariaLabel ?? title ?? "Chart";
+  const effectiveAriaLabel = ariaLabel ?? title ?? labels.chart;
   const hasTable = Boolean(tableData?.length && tableHeaders?.length);
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-chart", className), style, children: [
     title != null || subtitle != null || header != null || headerAction != null ? /* @__PURE__ */ jsxs("div", { className: "uix-chart__header", children: [
@@ -98,17 +105,20 @@ function ChartCore({
       ] }),
       headerAction
     ] }) : null,
-    hasEmpty ? /* @__PURE__ */ jsx("div", { className: "uix-chart__plot", "data-empty": true, children: empty }) : /* @__PURE__ */ jsx("div", { className: "uix-chart__plot", "data-loading": loading || void 0, "aria-busy": loading || void 0, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: containerRef,
-        style: { height: heightValue },
-        role: "img",
-        "aria-label": effectiveAriaLabel,
-        "aria-describedby": hasTable ? tableId : void 0
-      }
-    ) }),
-    hasTable ? /* @__PURE__ */ jsxs("table", { id: tableId, className: "uix-visually-hidden", "aria-label": `${effectiveAriaLabel} \u2014 data table`, children: [
+    hasEmpty ? /* @__PURE__ */ jsx("div", { className: "uix-chart__plot", "data-empty": true, children: empty }) : /* @__PURE__ */ jsxs("div", { className: "uix-chart__plot", "data-loading": loading || void 0, "aria-busy": loading || void 0, children: [
+      loading ? /* @__PURE__ */ jsx("span", { className: "uix-chart__loading", children: labels.loading }) : null,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: containerRef,
+          style: { height: heightValue },
+          role: "img",
+          "aria-label": effectiveAriaLabel,
+          "aria-describedby": hasTable ? tableId : void 0
+        }
+      )
+    ] }),
+    hasTable ? /* @__PURE__ */ jsxs("table", { id: tableId, className: "uix-visually-hidden", "aria-label": `${effectiveAriaLabel} \u2014 ${labels.dataTableSuffix}`, children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ jsx("th", { scope: "col", children: label }, label)) }) }),
       /* @__PURE__ */ jsx("tbody", { children: tableData.map((row, index) => /* @__PURE__ */ jsx("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ jsx("td", { children: row[label] }, label)) }, index)) })
     ] }) : null,
@@ -137,5 +147,6 @@ export {
   ChartLegend,
   ChartLegendItem,
   ChartMetric,
+  DEFAULT_CHART_LABELS,
   uixChartPalette
 };

package/dist/components/ColorPicker.d.ts

@@ -1,5 +1,26 @@
 import * as react from 'react';
 
+/**
+ * Every word the colour picker renders (TENSOR RX-125, UIX-12). `{label}`, `{color}`,
+ * `{ratio}` and `{minimum}` are placeholders; `sample` is the contrast preview text.
+ */
+interface ColorPickerLabels {
+    trigger: string;
+    sample: string;
+    hue: string;
+    saturation: string;
+    brightness: string;
+    hex: string;
+    set: string;
+    presets: string;
+    recent: string;
+    usePreset: string;
+    useRecent: string;
+    contrastPasses: string;
+    contrastFails: string;
+    done: string;
+}
+declare const DEFAULT_COLOR_PICKER_LABELS: ColorPickerLabels;
 interface ColorPickerProps {
     value: string;
     onChange: (value: string) => void;
@@ -10,8 +31,9 @@ interface ColorPickerProps {
     label?: string;
     disabled?: boolean;
     className?: string;
+    labels?: Partial<ColorPickerLabels>;
 }
 /** Token-friendly HSV/hex picker with a fully keyboard-operable path and contrast feedback. */
-declare function ColorPicker({ value, onChange, foreground, presets, recent, minimumContrast, label, disabled, className, }: ColorPickerProps): react.JSX.Element;
+declare function ColorPicker({ value, onChange, foreground, presets, recent, minimumContrast, label, disabled, className, labels: labelOverrides, }: ColorPickerProps): react.JSX.Element;
 
-export { ColorPicker, type ColorPickerProps };
+export { ColorPicker, type ColorPickerLabels, type ColorPickerProps, DEFAULT_COLOR_PICKER_LABELS };

package/dist/components/ColorPicker.js

@@ -3,6 +3,23 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { contrastRatio, hexToRgb, hsvToHex, normalizeHex, rgbToHsv } from "../color-model.js";
+import { fillLabel } from "../fill-label.js";
+const DEFAULT_COLOR_PICKER_LABELS = {
+  trigger: "{label}: {color}",
+  sample: "Aa",
+  hue: "Hue",
+  saturation: "Saturation",
+  brightness: "Brightness",
+  hex: "Hex",
+  set: "Set",
+  presets: "Presets",
+  recent: "Recent",
+  usePreset: "Use preset {color}",
+  useRecent: "Use recent color {color}",
+  contrastPasses: "Contrast {ratio}:1 \u2014 passes WCAG AA ({minimum}:1)",
+  contrastFails: "Contrast {ratio}:1 \u2014 does not meet WCAG AA ({minimum}:1)",
+  done: "Done"
+};
 const EMPTY_COLORS = [];
 function ColorPicker({
   value,
@@ -13,8 +30,10 @@ function ColorPicker({
   minimumContrast = 4.5,
   label = "Choose color",
   disabled,
-  className
+  className,
+  labels: labelOverrides
 }) {
+  const labels = { ...DEFAULT_COLOR_PICKER_LABELS, ...labelOverrides };
   const id = useId();
   const triggerRef = useRef(null);
   const dialogRef = useRef(null);
@@ -75,7 +94,7 @@ function ColorPicker({
         ref: triggerRef,
         type: "button",
         className: "uix-color-picker__trigger",
-        "aria-label": `${label}: ${normalized}`,
+        "aria-label": fillLabel(labels.trigger, { label, color: normalized }),
         "aria-expanded": open,
         "aria-controls": `${id}-dialog`,
         onClick: () => setOpen((current) => !current),
@@ -97,9 +116,10 @@ function ColorPicker({
         className: "uix-color-picker__popover",
         onKeyDown: onDialogKeyDown,
         children: [
-          /* @__PURE__ */ jsx("div", { className: "uix-color-picker__preview", style: sampleStyle, children: /* @__PURE__ */ jsx("span", { style: { color: foreground }, children: "Aa" }) }),
+          /* @__PURE__ */ jsx("div", { className: "uix-color-picker__preview", style: sampleStyle, children: /* @__PURE__ */ jsx("span", { style: { color: foreground }, children: labels.sample }) }),
           /* @__PURE__ */ jsxs("label", { className: "uix-color-picker__range", children: [
-            "Hue ",
+            labels.hue,
+            " ",
             /* @__PURE__ */ jsxs("span", { children: [
               Math.round(hsv.h),
               "\xB0"
@@ -107,7 +127,8 @@ function ColorPicker({
             /* @__PURE__ */ jsx("input", { type: "range", min: "0", max: "359", value: Math.round(hsv.h), onChange: (event) => updateHsv({ h: Number(event.currentTarget.value) }) })
           ] }),
           /* @__PURE__ */ jsxs("label", { className: "uix-color-picker__range", children: [
-            "Saturation ",
+            labels.saturation,
+            " ",
             /* @__PURE__ */ jsxs("span", { children: [
               Math.round(hsv.s * 100),
               "%"
@@ -115,7 +136,8 @@ function ColorPicker({
             /* @__PURE__ */ jsx("input", { type: "range", min: "0", max: "100", value: Math.round(hsv.s * 100), onChange: (event) => updateHsv({ s: Number(event.currentTarget.value) / 100 }) })
           ] }),
           /* @__PURE__ */ jsxs("label", { className: "uix-color-picker__range", children: [
-            "Brightness ",
+            labels.brightness,
+            " ",
             /* @__PURE__ */ jsxs("span", { children: [
               Math.round(hsv.v * 100),
               "%"
@@ -123,36 +145,32 @@ function ColorPicker({
             /* @__PURE__ */ jsx("input", { type: "range", min: "0", max: "100", value: Math.round(hsv.v * 100), onChange: (event) => updateHsv({ v: Number(event.currentTarget.value) / 100 }) })
           ] }),
           /* @__PURE__ */ jsxs("label", { className: "uix-color-picker__hex", children: [
-            "Hex",
+            labels.hex,
             /* @__PURE__ */ jsxs("span", { className: "uix-color-picker__hex-row", children: [
               /* @__PURE__ */ jsx("input", { className: "uix-input", value: hexText, onChange: (event) => setHexText(event.currentTarget.value), onBlur: commitHex, onKeyDown: (event) => {
                 if (event.key === "Enter") commitHex();
               }, "aria-invalid": !normalizeHex(hexText) }),
-              /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: commitHex, disabled: !normalizeHex(hexText), children: "Set" })
+              /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: commitHex, disabled: !normalizeHex(hexText), children: labels.set })
             ] })
           ] }),
           (presets.length > 0 || recent.length > 0) && /* @__PURE__ */ jsxs("div", { className: "uix-color-picker__palettes", children: [
             presets.length > 0 && /* @__PURE__ */ jsxs("fieldset", { children: [
-              /* @__PURE__ */ jsx("legend", { children: "Presets" }),
-              /* @__PURE__ */ jsx("div", { children: presets.map((color) => /* @__PURE__ */ jsx("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": `Use preset ${color}` }, color)) })
+              /* @__PURE__ */ jsx("legend", { children: labels.presets }),
+              /* @__PURE__ */ jsx("div", { children: presets.map((color) => /* @__PURE__ */ jsx("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": fillLabel(labels.usePreset, { color }) }, color)) })
             ] }),
             recent.length > 0 && /* @__PURE__ */ jsxs("fieldset", { children: [
-              /* @__PURE__ */ jsx("legend", { children: "Recent" }),
-              /* @__PURE__ */ jsx("div", { children: recent.map((color) => /* @__PURE__ */ jsx("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": `Use recent color ${color}` }, color)) })
+              /* @__PURE__ */ jsx("legend", { children: labels.recent }),
+              /* @__PURE__ */ jsx("div", { children: recent.map((color) => /* @__PURE__ */ jsx("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": fillLabel(labels.useRecent, { color }) }, color)) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs("p", { className: cx("uix-color-picker__contrast", passes ? "uix-color-picker__contrast--pass" : "uix-color-picker__contrast--fail"), role: "status", "aria-live": "polite", children: [
-            "Contrast ",
-            ratio.toFixed(2),
-            ":1 \u2014 ",
-            passes ? `passes WCAG AA (${minimumContrast}:1)` : `does not meet WCAG AA (${minimumContrast}:1)`
-          ] }),
-          /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--primary uix-btn--sm", onClick: close, children: "Done" })
+          /* @__PURE__ */ jsx("p", { className: cx("uix-color-picker__contrast", passes ? "uix-color-picker__contrast--pass" : "uix-color-picker__contrast--fail"), role: "status", "aria-live": "polite", children: fillLabel(passes ? labels.contrastPasses : labels.contrastFails, { ratio: ratio.toFixed(2), minimum: minimumContrast }) }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--primary uix-btn--sm", onClick: close, children: labels.done })
         ]
       }
     )
   ] });
 }
 export {
-  ColorPicker
+  ColorPicker,
+  DEFAULT_COLOR_PICKER_LABELS
 };

package/dist/components/CommandPalette.d.ts

@@ -2,6 +2,8 @@ import * as react from 'react';
 import { ReactNode, HTMLAttributes, InputHTMLAttributes } from 'react';
 
 interface CommandPaletteProps extends HTMLAttributes<HTMLDivElement> {
+    /** TENSOR RX-125 (UIX-04): translatable; English default. */
+    inputLabel?: string;
     /** Props for the search input (value/onChange/placeholder wired by the consumer). */
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
     children?: ReactNode;
@@ -12,7 +14,7 @@ interface CommandPaletteProps extends HTMLAttributes<HTMLDivElement> {
  * a combobox over the listbox of `CommandItem`s; spreads override every default, so
  * consumers already passing their own roles/labels keep working.
  */
-declare function CommandPalette({ inputProps, children, className, ...props }: CommandPaletteProps): react.JSX.Element;
+declare function CommandPalette({ inputProps, children, inputLabel, className, ...props }: CommandPaletteProps): react.JSX.Element;
 interface CommandGroupProps {
     label?: ReactNode;
     children?: ReactNode;

package/dist/components/CommandPalette.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useId, useMemo, useState } from "react";
 import { cx } from "../cx.js";
 const CmdkContext = createContext(null);
-function CommandPalette({ inputProps, children, className, ...props }) {
+function CommandPalette({ inputProps, children, inputLabel = "Command palette", className, ...props }) {
   const listId = useId();
   const [activeId, setActiveId] = useState(null);
   const [count, setCount] = useState(0);
@@ -30,7 +30,7 @@ function CommandPalette({ inputProps, children, className, ...props }) {
         "aria-autocomplete": "list",
         "aria-controls": listId,
         "aria-activedescendant": activeId ?? void 0,
-        "aria-label": "Command palette",
+        "aria-label": inputLabel,
         ...inputProps
       }
     ),

package/dist/components/DateRangePicker.d.ts

@@ -1,6 +1,23 @@
 import * as react from 'react';
 import { DateRangeValue } from '../calendar-model.js';
 
+/**
+ * Every word the picker renders or announces (TENSOR RX-125, UIX-13). `{start}` and
+ * `{end}` are replaced with the locale-formatted dates.
+ */
+interface DateRangePickerLabels {
+    previous: string;
+    previousMonth: string;
+    next: string;
+    nextMonth: string;
+    noneSelected: string;
+    startSelected: string;
+    rangeSelected: string;
+    rangeStart: string;
+    rangeEnd: string;
+    inRange: string;
+}
+declare const DEFAULT_DATE_RANGE_PICKER_LABELS: DateRangePickerLabels;
 interface DateRangePickerProps {
     value: DateRangeValue;
     onChange: (value: DateRangeValue) => void;
@@ -16,8 +33,10 @@ interface DateRangePickerProps {
     invalidMessage?: string;
     disabled?: boolean;
     className?: string;
+    /** Translatable words; English defaults in {@link DEFAULT_DATE_RANGE_PICKER_LABELS}. */
+    labels?: Partial<DateRangePickerLabels>;
 }
 /** Controlled, two-month range picker using the UIx calendar language. */
-declare function DateRangePicker({ value, onChange, visibleMonth: controlledMonth, onVisibleMonthChange, months, min, max, isDateDisabled, locale, label, invalid, invalidMessage, disabled, className, }: DateRangePickerProps): react.JSX.Element;
+declare function DateRangePicker({ value, onChange, visibleMonth: controlledMonth, onVisibleMonthChange, months, min, max, isDateDisabled, locale, label, invalid, invalidMessage, disabled, className, labels: labelOverrides, }: DateRangePickerProps): react.JSX.Element;
 
-export { DateRangePicker, type DateRangePickerProps };
+export { DEFAULT_DATE_RANGE_PICKER_LABELS, DateRangePicker, type DateRangePickerLabels, type DateRangePickerProps };

package/dist/components/DateRangePicker.js

@@ -3,8 +3,24 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { addCalendarDays, addCalendarMonths, buildMonthGrid, isDateInRange, isDateUnavailable, selectRangeDate, startOfMonth } from "../calendar-model.js";
 import { cx } from "../cx.js";
+const DEFAULT_DATE_RANGE_PICKER_LABELS = {
+  previous: "Previous",
+  previousMonth: "Show previous month",
+  next: "Next",
+  nextMonth: "Show next month",
+  noneSelected: "No date range selected.",
+  startSelected: "Start date {start} selected. Choose an end date.",
+  rangeSelected: "{start} to {end} selected.",
+  rangeStart: "start of selected range",
+  rangeEnd: "end of selected range",
+  inRange: "in selected range"
+};
 const monthLabel = (date, locale) => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
 const dateLabel = (date, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "full", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
+const weekdayNames = (locale) => {
+  const fmt = new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" });
+  return Array.from({ length: 7 }, (_, i) => fmt.format(new Date(Date.UTC(2024, 0, 1 + i))));
+};
 function DateRangePicker({
   value,
   onChange,
@@ -19,9 +35,12 @@ function DateRangePicker({
   invalid,
   invalidMessage = "The selected date range is invalid.",
   disabled,
-  className
+  className,
+  labels: labelOverrides
 }) {
   const id = useId();
+  const labels = { ...DEFAULT_DATE_RANGE_PICKER_LABELS, ...labelOverrides };
+  const weekdays = useMemo(() => weekdayNames(locale), [locale]);
   const [internalMonth, setInternalMonth] = useState(() => startOfMonth(controlledMonth ?? value.start ?? (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)));
   const visibleMonth = startOfMonth(controlledMonth ?? internalMonth);
   const [activeDate, setActiveDate] = useState(value.end ?? value.start ?? visibleMonth);
@@ -76,18 +95,18 @@ function DateRangePicker({
       focusDate(addCalendarMonths(date, event.key === "PageUp" ? -1 : 1));
     }
   };
-  const announcement = !value.start ? "No date range selected." : !value.end ? `Start date ${dateLabel(value.start, locale)} selected. Choose an end date.` : `${dateLabel(value.start, locale)} to ${dateLabel(value.end, locale)} selected.`;
+  const announcement = !value.start ? labels.noneSelected : !value.end ? labels.startSelected.replace("{start}", dateLabel(value.start, locale)) : labels.rangeSelected.replace("{start}", dateLabel(value.start, locale)).replace("{end}", dateLabel(value.end, locale));
   return /* @__PURE__ */ jsxs("section", { className: cx("uix-date-range-picker", rangeInvalid && "uix-date-range-picker--invalid", className), "aria-labelledby": `${id}-label`, children: [
     /* @__PURE__ */ jsxs("div", { className: "uix-date-range-picker__header", children: [
       /* @__PURE__ */ jsx("h3", { id: `${id}-label`, children: label }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => setMonth(addCalendarMonths(visibleMonth, -1)), "aria-label": "Show previous month", children: "Previous" }),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => setMonth(addCalendarMonths(visibleMonth, 1)), "aria-label": "Show next month", children: "Next" })
+        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => setMonth(addCalendarMonths(visibleMonth, -1)), "aria-label": labels.previousMonth, children: labels.previous }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => setMonth(addCalendarMonths(visibleMonth, 1)), "aria-label": labels.nextMonth, children: labels.next })
       ] })
     ] }),
     /* @__PURE__ */ jsx("div", { ref: rootRef, className: "uix-date-range-picker__months", children: calendars.map(({ month, days }) => /* @__PURE__ */ jsxs("div", { className: "uix-date-range-picker__month", children: [
       /* @__PURE__ */ jsx("h4", { children: monthLabel(month, locale) }),
-      /* @__PURE__ */ jsx("div", { className: "uix-date-range-picker__weekdays", "aria-hidden": "true", children: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map((day) => /* @__PURE__ */ jsx("span", { children: day }, day)) }),
+      /* @__PURE__ */ jsx("div", { className: "uix-date-range-picker__weekdays", "aria-hidden": "true", children: weekdays.map((day, index) => /* @__PURE__ */ jsx("span", { children: day }, index)) }),
       /* @__PURE__ */ jsxs("div", { className: "uix-date-range-picker__grid", role: "group", "aria-label": monthLabel(month, locale), children: [
         Array.from({ length: ((/* @__PURE__ */ new Date(`${month}T00:00:00Z`)).getUTCDay() + 6) % 7 }, (_, index) => /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }, `blank-${index}`)),
         days.map((day) => {
@@ -101,7 +120,7 @@ function DateRangePicker({
               "data-range-edge": edge,
               "data-in-range": isDateInRange(day.date, value) || void 0,
               "aria-pressed": edge != null || isDateInRange(day.date, value),
-              "aria-label": `${dateLabel(day.date, locale)}${edge ? `, ${edge} of selected range` : isDateInRange(day.date, value) ? ", in selected range" : ""}`,
+              "aria-label": `${dateLabel(day.date, locale)}${edge ? `, ${edge === "start" ? labels.rangeStart : labels.rangeEnd}` : isDateInRange(day.date, value) ? `, ${labels.inRange}` : ""}`,
               tabIndex: activeDate === day.date ? 0 : -1,
               disabled: unavailable,
               onFocus: () => setActiveDate(day.date),
@@ -119,5 +138,6 @@ function DateRangePicker({
   ] });
 }
 export {
+  DEFAULT_DATE_RANGE_PICKER_LABELS,
   DateRangePicker
 };

package/dist/components/DetailPage.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode, MouseEvent } from 'react';
 
 interface DetailPageTab {
     id: string;
@@ -12,6 +12,14 @@ interface DetailPageMetric {
     label: ReactNode;
     value: ReactNode;
 }
+/** What `renderLink` receives: render it as your router's link (TENSOR RX-125, UIX-10). */
+interface DetailPageLinkProps {
+    href: string;
+    className: string;
+    children: ReactNode;
+    'aria-current'?: 'page';
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+}
 interface DetailPageProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     back?: {
         href: string;
@@ -26,8 +34,19 @@ interface DetailPageProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     side?: ReactNode;
     children?: ReactNode;
     tabsLabel?: string;
+    /**
+     * Renders the back link and every tab link. Default: a plain `<a>`. Pass your
+     * router's link (e.g. next/link) so switching tabs never reloads the page.
+     */
+    renderLink?: (props: DetailPageLinkProps) => ReactNode;
+    /**
+     * Controlled tabs: called with the tab id on a plain left click, which then does
+     * not navigate. `href` stays the progressive-enhancement fallback (new tab,
+     * modified click, no JS).
+     */
+    onTabSelect?: (id: string) => void;
 }
 /** Framework-neutral record-detail scaffold; routing and data policy stay with the application. */
-declare function DetailPage({ back, eyebrow, title, subtitle, actions, tabs, metrics, side, children, tabsLabel, className, ...props }: DetailPageProps): react.JSX.Element;
+declare function DetailPage({ back, eyebrow, title, subtitle, actions, tabs, metrics, side, children, tabsLabel, renderLink, onTabSelect, className, ...props }: DetailPageProps): react.JSX.Element;
 
-export { DetailPage, type DetailPageMetric, type DetailPageProps, type DetailPageTab };
+export { DetailPage, type DetailPageLinkProps, type DetailPageMetric, type DetailPageProps, type DetailPageTab };