@tensor_1/react 2.19.2 → 2.21.0

package/dist/components/SchedulingCalendar.d.ts

@@ -19,6 +19,28 @@ interface SchedulingCalendarOverlay {
     end: string;
     kind: SchedulingOverlayKind;
 }
+/**
+ * Every word the calendar renders (TENSOR RX-125, UIX-12). `{timeZone}`, `{view}`,
+ * `{title}`, `{state}`, `{start}`, `{end}` are placeholders.
+ */
+interface SchedulingCalendarLabels {
+    region: string;
+    previous: string;
+    next: string;
+    viewGroup: string;
+    viewMonth: string;
+    viewWeek: string;
+    viewAgenda: string;
+    loading: string;
+    retry: string;
+    agenda: string;
+    agendaEmpty: string;
+    grid: string;
+    entry: string;
+    legend: string;
+    states: Record<SchedulingEntryState, string>;
+}
+declare const DEFAULT_SCHEDULING_CALENDAR_LABELS: SchedulingCalendarLabels;
 interface SchedulingCalendarProps {
     entries: SchedulingCalendarEntry[];
     anchorDate: string;
@@ -35,8 +57,9 @@ interface SchedulingCalendarProps {
     error?: string;
     onRetry?: () => void;
     className?: string;
+    labels?: Partial<SchedulingCalendarLabels>;
 }
 /** Month/week/agenda calendar for UTC ranges rendered in an explicit IANA time zone. */
-declare function SchedulingCalendar({ entries, anchorDate, timeZone, view: controlledView, onViewChange, onAnchorDateChange, onSelectEntry, overlays, filter, renderEntry, locale, loading, error, onRetry, className, }: SchedulingCalendarProps): react.JSX.Element;
+declare function SchedulingCalendar({ entries, anchorDate, timeZone, view: controlledView, onViewChange, onAnchorDateChange, onSelectEntry, overlays, filter, renderEntry, locale, loading, error, onRetry, className, labels: labelOverrides, }: SchedulingCalendarProps): react.JSX.Element;
 
-export { SchedulingCalendar, type SchedulingCalendarEntry, type SchedulingCalendarOverlay, type SchedulingCalendarProps, type SchedulingCalendarView, type SchedulingEntryState, type SchedulingOverlayKind };
+export { DEFAULT_SCHEDULING_CALENDAR_LABELS, SchedulingCalendar, type SchedulingCalendarEntry, type SchedulingCalendarLabels, type SchedulingCalendarOverlay, type SchedulingCalendarProps, type SchedulingCalendarView, type SchedulingEntryState, type SchedulingOverlayKind };

package/dist/components/SchedulingCalendar.js

@@ -4,7 +4,24 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { addCalendarDays, addCalendarMonths, buildMonthGrid, startOfMonth, zonedDateSpan } from "../calendar-model.js";
 import { cx } from "../cx.js";
 import { StatusPill } from "./StatusPill.js";
-const stateLabel = { scheduled: "Scheduled", conflicted: "Conflicted", "in-progress": "In progress", "blackout-violation": "Blackout violation" };
+import { fillLabel } from "../fill-label.js";
+const DEFAULT_SCHEDULING_CALENDAR_LABELS = {
+  region: "Scheduling calendar in {timeZone}",
+  previous: "Previous",
+  next: "Next",
+  viewGroup: "Calendar view",
+  viewMonth: "Month",
+  viewWeek: "Week",
+  viewAgenda: "Agenda",
+  loading: "Loading schedule\u2026",
+  retry: "Try again",
+  agenda: "Schedule agenda",
+  agendaEmpty: "No scheduled entries match the current filters.",
+  grid: "{view} schedule",
+  entry: "{title}, {state}, {start} to {end}",
+  legend: "Schedule state legend",
+  states: { scheduled: "Scheduled", conflicted: "Conflicted", "in-progress": "In progress", "blackout-violation": "Blackout violation" }
+};
 const stateTone = (state) => state === "scheduled" ? "info" : state === "in-progress" ? "success" : "danger";
 const dateLabel = (date, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "full", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
 const EMPTY_OVERLAYS = [];
@@ -23,8 +40,16 @@ function SchedulingCalendar({
   loading,
   error,
   onRetry,
-  className
+  className,
+  labels: labelOverrides
 }) {
+  const labels = {
+    ...DEFAULT_SCHEDULING_CALENDAR_LABELS,
+    ...labelOverrides,
+    states: { ...DEFAULT_SCHEDULING_CALENDAR_LABELS.states, ...labelOverrides?.states }
+  };
+  const stateLabel = labels.states;
+  const viewLabel = { month: labels.viewMonth, week: labels.viewWeek, agenda: labels.viewAgenda };
   const [internalView, setInternalView] = useState("month");
   const view = controlledView ?? internalView;
   const [activeDate, setActiveDate] = useState(anchorDate);
@@ -71,22 +96,19 @@ function SchedulingCalendar({
     return date >= span.start && date <= span.end;
   });
   const formatInstant = (instant) => new Intl.DateTimeFormat(locale, { timeZone, dateStyle: "medium", timeStyle: "short" }).format(new Date(instant));
-  return /* @__PURE__ */ jsxs("section", { className: cx("uix-scheduling-calendar", className), "aria-label": `Scheduling calendar in ${timeZone}`, children: [
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-scheduling-calendar", className), "aria-label": fillLabel(labels.region, { timeZone }), children: [
     /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__header", children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => movePeriod(-1), disabled: !onAnchorDateChange, children: "Previous" }),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => movePeriod(1), disabled: !onAnchorDateChange, children: "Next" })
+        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => movePeriod(-1), disabled: !onAnchorDateChange, children: labels.previous }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => movePeriod(1), disabled: !onAnchorDateChange, children: labels.next })
       ] }),
       /* @__PURE__ */ jsx("strong", { children: view === "month" ? new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${anchorDate}T00:00:00Z`)) : `${dateLabel(weekStart, locale)} \u2013 ${dateLabel(weekDays[weekDays.length - 1], locale)}` }),
-      /* @__PURE__ */ jsx("div", { className: "uix-segmented", role: "group", "aria-label": "Calendar view", children: ["month", "week", "agenda"].map((option) => /* @__PURE__ */ jsxs("button", { type: "button", className: "uix-segmented__option", "aria-pressed": view === option, "data-selected": view === option || void 0, onClick: () => setView(option), children: [
-        option[0].toUpperCase(),
-        option.slice(1)
-      ] }, option)) })
+      /* @__PURE__ */ jsx("div", { className: "uix-segmented", role: "group", "aria-label": labels.viewGroup, children: ["month", "week", "agenda"].map((option) => /* @__PURE__ */ jsx("button", { type: "button", className: "uix-segmented__option", "aria-pressed": view === option, "data-selected": view === option || void 0, onClick: () => setView(option), children: viewLabel[option] }, option)) })
     ] }),
-    loading ? /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__state", role: "status", children: "Loading schedule\u2026" }) : error ? /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__state", role: "alert", children: [
+    loading ? /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__state", role: "status", children: labels.loading }) : error ? /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__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" })
-    ] }) : view === "agenda" ? /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__agenda", role: "region", "aria-label": "Schedule agenda", children: visibleEntries.length === 0 ? /* @__PURE__ */ jsx("p", { children: "No scheduled entries match the current filters." }) : /* @__PURE__ */ jsx("ol", { children: [...visibleEntries].sort((a, b) => a.start.localeCompare(b.start)).map((entry) => {
+      onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: labels.retry })
+    ] }) : view === "agenda" ? /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__agenda", role: "region", "aria-label": labels.agenda, children: visibleEntries.length === 0 ? /* @__PURE__ */ jsx("p", { children: labels.agendaEmpty }) : /* @__PURE__ */ jsx("ol", { children: [...visibleEntries].sort((a, b) => a.start.localeCompare(b.start)).map((entry) => {
       const state = entry.state ?? "scheduled";
       return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => onSelectEntry?.(entry), children: [
         /* @__PURE__ */ jsxs("span", { children: [
@@ -100,7 +122,7 @@ function SchedulingCalendar({
         ] }),
         /* @__PURE__ */ jsx(StatusPill, { tone: stateTone(state), children: stateLabel[state] })
       ] }) }, entry.id);
-    }) }) }) : /* @__PURE__ */ jsx("div", { ref: gridRef, className: cx("uix-scheduling-calendar__grid", view === "week" && "uix-scheduling-calendar__grid--week"), role: "group", "aria-label": `${view} schedule`, children: days.map((date, index) => {
+    }) }) }) : /* @__PURE__ */ jsx("div", { ref: gridRef, className: cx("uix-scheduling-calendar__grid", view === "week" && "uix-scheduling-calendar__grid--week"), role: "group", "aria-label": fillLabel(labels.grid, { view: viewLabel[view] }), children: days.map((date, index) => {
       const dayEntries = entriesFor(date);
       const dayOverlays = overlaysFor(date);
       return /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__day", "data-outside": view === "month" && !monthDays[index].inMonth || void 0, children: [
@@ -109,16 +131,17 @@ function SchedulingCalendar({
         /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__entries", children: dayEntries.map((entry) => {
           const span = entrySpans.get(entry.id);
           const state = entry.state ?? "scheduled";
-          return /* @__PURE__ */ jsxs("button", { type: "button", className: "uix-scheduling-calendar__entry", "data-state": state, "data-range-start": date === span.start || void 0, "data-range-end": date === span.end || void 0, onClick: () => onSelectEntry?.(entry), "aria-label": `${entry.title}, ${stateLabel[state]}, ${formatInstant(entry.start)} to ${formatInstant(entry.end)}`, children: [
+          return /* @__PURE__ */ jsxs("button", { type: "button", className: "uix-scheduling-calendar__entry", "data-state": state, "data-range-start": date === span.start || void 0, "data-range-end": date === span.end || void 0, onClick: () => onSelectEntry?.(entry), "aria-label": fillLabel(labels.entry, { title: entry.title, state: stateLabel[state], start: formatInstant(entry.start), end: formatInstant(entry.end) }), children: [
             /* @__PURE__ */ jsx("span", { children: renderEntry?.(entry) ?? entry.title }),
             /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: stateLabel[state] })
           ] }, entry.id);
         }) })
       ] }, date);
     }) }),
-    /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__legend", "aria-label": "Schedule state legend", children: ["scheduled", "conflicted", "in-progress", "blackout-violation"].map((state) => /* @__PURE__ */ jsx("span", { "data-state": state, children: stateLabel[state] }, state)) })
+    /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__legend", "aria-label": labels.legend, children: ["scheduled", "conflicted", "in-progress", "blackout-violation"].map((state) => /* @__PURE__ */ jsx("span", { "data-state": state, children: stateLabel[state] }, state)) })
   ] });
 }
 export {
+  DEFAULT_SCHEDULING_CALENDAR_LABELS,
   SchedulingCalendar
 };

package/dist/components/Stat.d.ts

@@ -5,7 +5,7 @@ interface StatTrend {
     direction: 'up' | 'down';
     label: ReactNode;
 }
-interface StatProps extends HTMLAttributes<HTMLDivElement> {
+interface StatProps extends HTMLAttributes<HTMLElement> {
     label: ReactNode;
     value: ReactNode;
     /** Optional icon shown at the trailing edge of the label row. */
@@ -14,8 +14,29 @@ interface StatProps extends HTMLAttributes<HTMLDivElement> {
     meta?: ReactNode;
     /** Trend chip rendered before the meta text. */
     trend?: StatTrend;
+    /** Outline and value colour. `neutral` (default) is today's tile. */
+    tone?: 'neutral' | 'warning' | 'danger';
+    /** `hero` (default) is today's KPI size; `compact` is for dense fact bands. */
+    size?: 'hero' | 'compact';
+    /**
+     * Makes the whole tile a `<button>` that opens an editor (a popover or dialog). It gets
+     * `aria-haspopup="dialog"` and a trailing chevron.
+     */
+    onActivate?: () => void;
+    /** Action word appended to the accessible name, e.g. "change" → "Priority: P1, change". */
+    activateLabel?: string;
+    /** TENSOR RX-125 (UIX-04): the spoken trend direction; English defaults. */
+    trendLabels?: {
+        up?: string;
+        down?: string;
+    };
+    /** Whether the editor this tile opens is currently open (`aria-expanded`). */
+    expanded?: boolean;
 }
-/** KPI / stat tile over `.uix-stat`. */
-declare function Stat({ label, value, icon, meta, trend, className, ...props }: StatProps): react.JSX.Element;
+/**
+ * KPI / stat tile over `.uix-stat`. With `onActivate` the tile is a button; the forwarded
+ * ref then points at that button, so a popover can anchor to it.
+ */
+declare const Stat: react.ForwardRefExoticComponent<StatProps & react.RefAttributes<HTMLElement>>;
 
 export { Stat, type StatProps, type StatTrend };

package/dist/components/Stat.js

@@ -1,22 +1,63 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
 import { cx } from "../cx.js";
-function Stat({ label, value, icon, meta, trend, className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx("uix-stat", className), ...props, children: [
-    /* @__PURE__ */ jsxs("div", { className: "uix-stat__label", children: [
-      /* @__PURE__ */ jsx("span", { children: label }),
-      icon
+const Chevron = () => /* @__PURE__ */ jsx("span", { className: "uix-stat__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) }) });
+const Stat = forwardRef(function Stat2({ label, value, icon, meta, trend, tone = "neutral", size = "hero", onActivate, activateLabel, expanded, trendLabels, className, onClick, ...props }, ref) {
+  const id = useId();
+  const interactive = onActivate != null;
+  const classes = cx(
+    "uix-stat",
+    tone !== "neutral" && `uix-stat--${tone}`,
+    size === "compact" && "uix-stat--compact",
+    interactive && "uix-stat--interactive",
+    className
+  );
+  const Row = interactive ? "span" : "div";
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Row, { className: "uix-stat__label", children: [
+      /* @__PURE__ */ jsx("span", { id: interactive ? `${id}-label` : void 0, children: label }),
+      icon,
+      interactive && /* @__PURE__ */ jsx(Chevron, {})
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "uix-stat__value", children: value }),
-    (meta != null || trend != null) && /* @__PURE__ */ jsxs("div", { className: "uix-stat__meta", children: [
+    /* @__PURE__ */ jsx(Row, { className: "uix-stat__value", id: interactive ? `${id}-value` : void 0, children: value }),
+    (meta != null || trend != null) && /* @__PURE__ */ jsxs(Row, { className: "uix-stat__meta", id: interactive ? `${id}-meta` : void 0, children: [
       trend != null && /* @__PURE__ */ jsxs("span", { className: cx("uix-stat__trend", `uix-stat__trend--${trend.direction}`), children: [
         /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: trend.direction === "up" ? /* @__PURE__ */ jsx("path", { d: "M12 19V5m-6 6 6-6 6 6" }) : /* @__PURE__ */ jsx("path", { d: "M12 5v14m6-6-6 6-6-6" }) }),
-        /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: trend.direction === "up" ? "up" : "down" }),
+        /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: trend.direction === "up" ? trendLabels?.up ?? "up" : trendLabels?.down ?? "down" }),
         trend.label
       ] }),
       meta
     ] })
   ] });
-}
+  if (!interactive) {
+    return /* @__PURE__ */ jsx("div", { ref, className: classes, onClick, ...props, children: body });
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      ...props,
+      ref,
+      className: classes,
+      "aria-haspopup": "dialog",
+      "aria-expanded": expanded,
+      "aria-labelledby": `${id}-label ${id}-sep ${id}-value${activateLabel ? ` ${id}-action` : ""}`,
+      "aria-describedby": meta != null || trend != null ? `${id}-meta` : void 0,
+      onClick: (e) => {
+        onClick?.(e);
+        if (!e.defaultPrevented) onActivate();
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { id: `${id}-sep`, className: "uix-visually-hidden", children: ":" }),
+        activateLabel && /* @__PURE__ */ jsxs("span", { id: `${id}-action`, className: "uix-visually-hidden", children: [
+          ", ",
+          activateLabel
+        ] }),
+        body
+      ]
+    }
+  );
+});
 export {
   Stat
 };

package/dist/components/Table.d.ts

@@ -40,12 +40,16 @@ interface TrProps extends HTMLAttributes<HTMLTableRowElement> {
 }
 declare function Tr({ selected, pinned, className, children, ...props }: TrProps): react.JSX.Element;
 interface BulkBarProps extends HTMLAttributes<HTMLDivElement> {
-    /** number of selected rows, rendered as "N selected" */
+    /** number of selected rows, rendered through `selectedLabel` */
     count?: number;
     children?: ReactNode;
+    /** TENSOR RX-125 (UIX-04): translatable; English default. */
+    label?: string;
+    /** TENSOR RX-125 (UIX-04): translatable; English default. */
+    selectedLabel?: (count: number) => ReactNode;
 }
 /** Contextual action bar shown above the table when ≥1 row is selected. */
-declare function BulkBar({ count, children, className, ...props }: BulkBarProps): react.JSX.Element;
+declare function BulkBar({ count, children, label, selectedLabel, className, ...props }: BulkBarProps): react.JSX.Element;
 interface RowActionsProps extends TdHTMLAttributes<HTMLTableCellElement> {
     children?: ReactNode;
 }
@@ -57,12 +61,16 @@ interface RowActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 /** A single hover-revealed row action button (icon inside). */
 declare function RowAction({ children, className, type, ...props }: RowActionProps): react.JSX.Element;
 interface ExpandToggleProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** TENSOR RX-125 (UIX-04): translatable; English default. */
+    expandLabel?: string;
+    /** TENSOR RX-125 (UIX-04): translatable; English default. */
+    collapseLabel?: string;
     expanded?: boolean;
     /** id of the detail row this toggle controls → `aria-controls` (UIX-A11Y-2). */
     controls?: string;
 }
 /** Chevron button that expands/collapses an inline detail row. */
-declare function ExpandToggle({ expanded, controls, className, type, ...props }: ExpandToggleProps): react.JSX.Element;
+declare function ExpandToggle({ expanded, controls, expandLabel, collapseLabel, className, type, ...props }: ExpandToggleProps): react.JSX.Element;
 /** Emphasised primary cell text. */
 declare function CellStrong({ children, className, ...props }: HTMLAttributes<HTMLSpanElement>): react.JSX.Element;
 /** Secondary line under a primary cell value (muted, meta size). */

package/dist/components/Table.js

@@ -66,12 +66,9 @@ function Tr({ selected, pinned, className, children, ...props }) {
     }
   );
 }
-function BulkBar({ count, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx("uix-bulkbar", className), role: "toolbar", "aria-label": "Bulk actions", ...props, children: [
-    count != null && /* @__PURE__ */ jsxs("span", { className: "uix-bulkbar__count", children: [
-      count,
-      " selected"
-    ] }),
+function BulkBar({ count, children, label = "Bulk actions", selectedLabel = (n) => `${n} selected`, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-bulkbar", className), role: "toolbar", "aria-label": label, ...props, children: [
+    count != null && /* @__PURE__ */ jsx("span", { className: "uix-bulkbar__count", children: selectedLabel(count) }),
     /* @__PURE__ */ jsx("span", { className: "uix-bulkbar__spacer" }),
     children
   ] });
@@ -82,7 +79,7 @@ function RowActions({ children, className, ...props }) {
 function RowAction({ children, className, type = "button", ...props }) {
   return /* @__PURE__ */ jsx("button", { type, className: cx("uix-rowact", className), ...props, children });
 }
-function ExpandToggle({ expanded, controls, className, type = "button", ...props }) {
+function ExpandToggle({ expanded, controls, expandLabel = "Expand row", collapseLabel = "Collapse row", className, type = "button", ...props }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -90,7 +87,7 @@ function ExpandToggle({ expanded, controls, className, type = "button", ...props
       className: cx("uix-table__expand", className),
       "aria-expanded": expanded,
       "aria-controls": controls,
-      "aria-label": expanded ? "Collapse row" : "Expand row",
+      "aria-label": expanded ? collapseLabel : expandLabel,
       ...props,
       children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4" }) })
     }

package/dist/components/Tabs.d.ts

@@ -7,8 +7,21 @@ interface TabsProps {
     onChange?: (value: string) => void;
     children?: ReactNode;
     className?: string;
+    /**
+     * What happens when the tabs don't fit. `'wrap'` (default) keeps today's layout.
+     * `'scroll'` keeps one row that scrolls sideways, with pointer-only edge buttons
+     * shown on the side that has hidden tabs. The selected tab is always scrolled into view.
+     */
+    overflow?: 'wrap' | 'scroll';
+    /**
+     * Keyboard activation (TENSOR RX-125, UIX-11). `'automatic'` (default, unchanged):
+     * Arrow/Home/End move focus AND select, so traversing mounts every panel passed over.
+     * `'manual'`: arrows only move focus; Enter/Space (the button's own click) selects —
+     * the APG choice when a panel is costly to show. Pairs with `TabPanel keepMounted`.
+     */
+    activation?: 'automatic' | 'manual';
 }
-declare function Tabs({ variant, value, onChange, children, className }: TabsProps): react.JSX.Element;
+declare function Tabs({ variant, value, onChange, children, className, overflow, activation }: TabsProps): react.JSX.Element;
 interface TabProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
     value: string;
     children?: ReactNode;

package/dist/components/Tabs.js

@@ -1,23 +1,64 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Children, createContext, isValidElement, useContext, useEffect, useId, useMemo, useRef } from "react";
+import { Children, createContext, isValidElement, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
 const TabsCtx = createContext({});
-function Tabs({ variant = "line", value, onChange, children, className }) {
+const Chevron = ({ d }) => /* @__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 }) });
+const inlineOffset = (el, rtl) => rtl ? -el.scrollLeft : el.scrollLeft;
+function Tabs({ variant = "line", value, onChange, children, className, overflow = "wrap", activation = "automatic" }) {
   const baseId = useId();
   const listRef = useRef(null);
   const contextValue = useMemo(() => ({ value, onChange, baseId }), [value, onChange, baseId]);
+  const scroll = overflow === "scroll";
+  const [hidden, setHidden] = useState({ start: false, end: false });
   const kids = Children.toArray(children);
   const panels = kids.filter((k) => isValidElement(k) && k.type === TabPanel);
   const tabs = kids.filter((k) => !(isValidElement(k) && k.type === TabPanel));
   useEffect(() => {
-    const list = listRef.current;
-    if (!list) return;
-    const all = Array.from(list.querySelectorAll('[role="tab"]'));
+    const list2 = listRef.current;
+    if (!list2) return;
+    const all = Array.from(list2.querySelectorAll('[role="tab"]'));
     const enabled = all.filter((t) => !t.matches(":disabled"));
     const active = enabled.find((t) => t.getAttribute("aria-selected") === "true") ?? enabled[0];
     for (const t of all) t.tabIndex = t === active ? 0 : -1;
   });
+  useEffect(() => {
+    const list2 = listRef.current;
+    if (!scroll || !list2) return;
+    const measure = () => {
+      const rtl = getComputedStyle(list2).direction === "rtl";
+      const pos = inlineOffset(list2, rtl);
+      const max = list2.scrollWidth - list2.clientWidth;
+      const next = { start: pos > 1, end: pos < max - 1 };
+      setHidden((prev) => prev.start === next.start && prev.end === next.end ? prev : next);
+    };
+    measure();
+    list2.addEventListener("scroll", measure, { passive: true });
+    if (typeof ResizeObserver === "undefined") return () => list2.removeEventListener("scroll", measure);
+    const observer = new ResizeObserver(measure);
+    observer.observe(list2);
+    for (const tab of Array.from(list2.children)) observer.observe(tab);
+    return () => {
+      list2.removeEventListener("scroll", measure);
+      observer.disconnect();
+    };
+  });
+  useEffect(() => {
+    const list2 = listRef.current;
+    const tab = list2?.querySelector('[role="tab"][aria-selected="true"]');
+    if (!scroll || !list2 || !tab) return;
+    const outer = list2.getBoundingClientRect();
+    const inner = tab.getBoundingClientRect();
+    const reserve = list2.scrollWidth > list2.clientWidth ? Number.parseFloat(getComputedStyle(list2).getPropertyValue("--uix-control-h")) || 0 : 0;
+    if (inner.left < outer.left + reserve) list2.scrollBy({ left: inner.left - outer.left - reserve });
+    else if (inner.right > outer.right - reserve) list2.scrollBy({ left: inner.right - outer.right + reserve });
+  }, [scroll, value]);
+  const page = (direction) => {
+    const list2 = listRef.current;
+    if (!list2) return;
+    const rtl = getComputedStyle(list2).direction === "rtl";
+    list2.scrollBy({ left: direction * (rtl ? -1 : 1) * list2.clientWidth * 0.8 });
+  };
   const onKeyDown = (e) => {
     const items = Array.from(
       listRef.current?.querySelectorAll('[role="tab"]:not(:disabled)') ?? []
@@ -44,22 +85,50 @@ function Tabs({ variant = "line", value, onChange, children, className }) {
     }
     e.preventDefault();
     const target = items[next];
-    if (target) {
-      target.focus();
-      target.click();
-    }
+    if (!target) return;
+    target.focus();
+    if (activation === "automatic") target.click();
   };
+  const list = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: listRef,
+      role: "tablist",
+      className: cx("uix-tabs", `uix-tabs--${variant}`, scroll && "uix-tabs--scroll", className),
+      onKeyDown,
+      children: tabs
+    }
+  );
   return /* @__PURE__ */ jsxs(TabsCtx.Provider, { value: contextValue, children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: listRef,
-        role: "tablist",
-        className: cx("uix-tabs", `uix-tabs--${variant}`, className),
-        onKeyDown,
-        children: tabs
-      }
-    ),
+    scroll ? /* @__PURE__ */ jsxs("div", { className: "uix-tabs-scroller", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "uix-tabs-scroller__prev",
+          "aria-hidden": "true",
+          tabIndex: -1,
+          hidden: !hidden.start,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => page(-1),
+          children: /* @__PURE__ */ jsx(Chevron, { d: "m15 18-6-6 6-6" })
+        }
+      ),
+      list,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "uix-tabs-scroller__next",
+          "aria-hidden": "true",
+          tabIndex: -1,
+          hidden: !hidden.end,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => page(1),
+          children: /* @__PURE__ */ jsx(Chevron, { d: "m9 18 6-6-6-6" })
+        }
+      )
+    ] }) : list,
     panels
   ] });
 }

package/dist/components/Toast.d.ts

@@ -3,6 +3,8 @@ import { HTMLAttributes, ReactNode } from 'react';
 
 type ToastTone = 'success' | 'danger' | 'info';
 interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** TENSOR RX-125 (UIX-04): translatable; English default. */
+    dismissLabel?: string;
     title?: ReactNode;
     message?: ReactNode;
     tone?: ToastTone;
@@ -10,10 +12,12 @@ interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     onClose?: () => void;
     leaving?: boolean;
 }
-declare function Toast({ title, message, tone, icon, onClose, leaving, className, ...props }: ToastProps): react.JSX.Element;
+declare function Toast({ title, message, tone, icon, onClose, leaving, dismissLabel, className, ...props }: ToastProps): react.JSX.Element;
 interface ToasterProps extends HTMLAttributes<HTMLDivElement> {
+    /** TENSOR RX-125 (UIX-04): translatable; English default. */
+    regionLabel?: string;
     children?: ReactNode;
 }
-declare function Toaster({ children, className, ...props }: ToasterProps): react.JSX.Element;
+declare function Toaster({ children, regionLabel, className, ...props }: ToasterProps): react.JSX.Element;
 
 export { Toast, type ToastProps, type ToastTone, Toaster, type ToasterProps };

package/dist/components/Toast.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
 const ToasterContext = createContext(null);
-function Toast({ title, message, tone, icon, onClose, leaving, className, ...props }) {
+function Toast({ title, message, tone, icon, onClose, leaving, dismissLabel = "Dismiss", className, ...props }) {
   const assertive = tone === "danger";
   const toaster = useContext(ToasterContext);
   const bodyRef = useRef(null);
@@ -39,12 +39,12 @@ function Toast({ title, message, tone, icon, onClose, leaving, className, ...pro
           title && /* @__PURE__ */ jsx("div", { className: "uix-toast__title", children: title }),
           message && /* @__PURE__ */ jsx("div", { className: "uix-toast__msg", children: message })
         ] }),
-        onClose && /* @__PURE__ */ jsx("button", { className: "uix-toast__close", onClick: handleClose, "aria-label": "Dismiss", children: "\xD7" })
+        onClose && /* @__PURE__ */ jsx("button", { className: "uix-toast__close", onClick: handleClose, "aria-label": dismissLabel, children: "\xD7" })
       ]
     }
   );
 }
-function Toaster({ children, className, ...props }) {
+function Toaster({ children, regionLabel = "Notifications", className, ...props }) {
   const [announced, setAnnounced] = useState("");
   const clearTimer = useRef(null);
   const announce = useCallback((text) => {
@@ -56,7 +56,7 @@ function Toaster({ children, className, ...props }) {
     if (clearTimer.current != null) clearTimeout(clearTimer.current);
   }, []);
   const ctx = useMemo(() => ({ announce }), [announce]);
-  return /* @__PURE__ */ jsx(ToasterContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs("div", { className: cx("uix-toaster", className), role: "region", "aria-label": "Notifications", ...props, children: [
+  return /* @__PURE__ */ jsx(ToasterContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs("div", { className: cx("uix-toaster", className), role: "region", "aria-label": regionLabel, ...props, children: [
     /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announced }),
     children
   ] }) });

package/dist/components/Tree.d.ts

@@ -19,6 +19,8 @@ interface TreeNodeProps {
     onSelect?: (id: string) => void;
     onFocusNode: (id: string) => void;
     level?: number;
+    /** Whether a click on the row itself toggles a branch (see {@link TreeProps.toggleOnRowClick}). */
+    rowToggles?: boolean;
 }
 interface TreeProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onSelect' | 'onChange'> {
     nodes: TreeNodeData[];
@@ -38,7 +40,13 @@ interface TreeProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onSelect' |
     rowHeight?: number;
     /** Scroll-viewport height (px) when virtualizing. Default 384. */
     maxHeight?: number;
+    /**
+     * Whether clicking a branch row toggles it (TENSOR RX-125, UIX-09). Defaults to true for a
+     * pure navigation tree and to false when the tree is selectable (`selected` / `onSelect`),
+     * where a row click only selects and the chevron toggles. Enter/Space still does both.
+     */
+    toggleOnRowClick?: boolean;
 }
-declare function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected, onToggle, onSelect, virtualize, rowHeight, maxHeight, className, ...props }: TreeProps): react.JSX.Element;
+declare function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected, onToggle, onSelect, virtualize, rowHeight, maxHeight, toggleOnRowClick, className, ...props }: TreeProps): react.JSX.Element;
 
 export { Tree, type TreeNodeData, type TreeNodeProps, type TreeProps };