@tensor_1/react 2.19.2 → 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/CopyButton.d.ts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+
+interface CopyButtonProps {
+    /** The text written to the clipboard. */
+    value: string;
+    /** Accessible name of the button, e.g. "Copy email". */
+    label: string;
+    /** Announced through a polite status region after a successful copy, e.g. "Copied". */
+    copiedLabel: string;
+    /**
+     * Announced when the copy fails (no clipboard, or the write was refused), e.g.
+     * "Could not copy — select the text instead". Without it a failure is silent: nothing
+     * false is shown, but the person is left guessing why nothing happened.
+     */
+    failedLabel?: string;
+    className?: string;
+}
+/**
+ * Icon-only ghost button that copies `value`. On success it shows a check for 1.5 s and
+ * announces `copiedLabel`. On failure (no clipboard, or the write was refused) it shows no
+ * check and announces `failedLabel` when one is given.
+ */
+declare function CopyButton({ value, label, copiedLabel, failedLabel, className }: CopyButtonProps): react.JSX.Element;
+
+export { CopyButton, type CopyButtonProps };

package/dist/components/CopyButton.js

@@ -0,0 +1,52 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { copyText } from "../copy-model.js";
+const CONFIRM_MS = 1500;
+const CopyGlyph = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+] });
+const CheckGlyph = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+function CopyButton({ value, label, copiedLabel, failedLabel, className }) {
+  const [outcome, setOutcome] = useState("idle");
+  const copied = outcome === "copied";
+  const timer = useRef(void 0);
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      clearTimeout(timer.current);
+    };
+  }, []);
+  const onClick = async () => {
+    const ok = await copyText(value);
+    if (!mounted.current) return;
+    clearTimeout(timer.current);
+    if (!ok && !failedLabel) {
+      setOutcome("idle");
+      return;
+    }
+    setOutcome(ok ? "copied" : "failed");
+    timer.current = setTimeout(() => setOutcome("idle"), CONFIRM_MS);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cx("uix-btn", "uix-btn--ghost", "uix-btn--icon", "uix-btn--sm", "uix-copy-button", className),
+        "aria-label": label,
+        "data-copied": copied || void 0,
+        onClick,
+        children: copied ? /* @__PURE__ */ jsx(CheckGlyph, {}) : /* @__PURE__ */ jsx(CopyGlyph, {})
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { role: "status", className: "uix-visually-hidden", children: outcome === "copied" ? copiedLabel : outcome === "failed" ? failedLabel : "" })
+  ] });
+}
+export {
+  CopyButton
+};

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 };