@tensor_1/react 2.26.2 → 2.27.0

package/dist/components/SchedulingCalendar.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { addCalendarDays, addCalendarMonths, buildMonthGrid, startOfMonth, zonedDateSpan } from "../calendar-model.js";
 import { cx } from "../cx.js";
+import { useUixLabels } from "../labels-context.js";
 import { StatusPill } from "./StatusPill.js";
 import { fillLabel } from "../fill-label.js";
 const DEFAULT_SCHEDULING_CALENDAR_LABELS = {
@@ -20,10 +21,19 @@ const DEFAULT_SCHEDULING_CALENDAR_LABELS = {
   grid: "{view} schedule",
   entry: "{title}, {state}, {start} to {end}",
   legend: "Schedule state legend",
+  moreEntries: "+{count} more",
+  moreEntriesLabel: "{count} more entries on {date}",
+  fewerEntries: "Show fewer",
   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 utcDate = (date) => /* @__PURE__ */ new Date(`${date}T00:00:00Z`);
+const INTL_PARTS = {
+  day: { dateStyle: "full", timeZone: "UTC" },
+  weekday: { weekday: "short", timeZone: "UTC" },
+  month: { month: "long", year: "numeric", timeZone: "UTC" }
+};
+const intlDate = (date, part, locale) => new Intl.DateTimeFormat(locale, INTL_PARTS[part]).format(utcDate(date));
 const EMPTY_OVERLAYS = [];
 function SchedulingCalendar({
   entries,
@@ -37,28 +47,38 @@ function SchedulingCalendar({
   filter,
   renderEntry,
   locale,
+  weekStartsOn = 1,
+  formatDate,
+  formatInstant: formatInstantProp,
+  maxEntriesPerDay,
+  onShowMore,
+  renderDayBadge,
   loading,
   error,
   onRetry,
   className,
   labels: labelOverrides
 }) {
+  const uixLabels = useUixLabels();
   const labels = {
     ...DEFAULT_SCHEDULING_CALENDAR_LABELS,
+    ...uixLabels.schedulingCalendar,
     ...labelOverrides,
-    states: { ...DEFAULT_SCHEDULING_CALENDAR_LABELS.states, ...labelOverrides?.states }
+    states: { ...DEFAULT_SCHEDULING_CALENDAR_LABELS.states, ...uixLabels.schedulingCalendar?.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);
+  const [expandedDates, setExpandedDates] = useState(() => /* @__PURE__ */ new Set());
+  const dateText = (date, part) => formatDate?.(date, part) ?? intlDate(date, part, locale);
   const gridRef = useRef(null);
   const visibleEntries = useMemo(() => entries.filter((entry) => filter?.(entry) ?? true), [entries, filter]);
   const entrySpans = useMemo(() => new Map(visibleEntries.map((entry) => [entry.id, zonedDateSpan(entry.start, entry.end, timeZone)])), [visibleEntries, timeZone]);
   const overlaySpans = useMemo(() => new Map(overlays.map((overlay) => [overlay.id, { start: overlay.start.slice(0, 10), end: overlay.end.slice(0, 10) }])), [overlays]);
-  const monthDays = useMemo(() => buildMonthGrid(startOfMonth(anchorDate)), [anchorDate]);
-  const weekday = ((/* @__PURE__ */ new Date(`${anchorDate}T00:00:00Z`)).getUTCDay() + 6) % 7;
+  const monthDays = useMemo(() => buildMonthGrid(startOfMonth(anchorDate), weekStartsOn), [anchorDate, weekStartsOn]);
+  const weekday = (utcDate(anchorDate).getUTCDay() - weekStartsOn + 7) % 7;
   const weekStart = addCalendarDays(anchorDate, -weekday);
   const weekDays = useMemo(() => Array.from({ length: 7 }, (_, index) => addCalendarDays(weekStart, index)), [weekStart]);
   const days = useMemo(() => view === "month" ? monthDays.map((day) => day.date) : weekDays, [view, monthDays, weekDays]);
@@ -95,14 +115,26 @@ function SchedulingCalendar({
     const span = overlaySpans.get(overlay.id);
     return date >= span.start && date <= span.end;
   });
-  const formatInstant = (instant) => new Intl.DateTimeFormat(locale, { timeZone, dateStyle: "medium", timeStyle: "short" }).format(new Date(instant));
+  const formatInstant = (instant) => formatInstantProp?.(instant) ?? new Intl.DateTimeFormat(locale, { timeZone, dateStyle: "medium", timeStyle: "short" }).format(new Date(instant));
+  const toggleMore = (date, dayEntries) => {
+    if (onShowMore) {
+      onShowMore(date, dayEntries);
+      return;
+    }
+    setExpandedDates((current) => {
+      const next = new Set(current);
+      if (next.has(date)) next.delete(date);
+      else next.add(date);
+      return next;
+    });
+  };
   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: 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("strong", { children: view === "month" ? dateText(startOfMonth(anchorDate), "month") : `${dateText(weekStart, "day")} \u2013 ${dateText(weekDays[weekDays.length - 1], "day")}` }),
       /* @__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: labels.loading }) : error ? /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__state", role: "alert", children: [
@@ -122,22 +154,37 @@ 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": 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: [
-        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__date", "data-calendar-date": date, tabIndex: activeDate === date ? 0 : -1, onFocus: () => setActiveDate(date), onKeyDown: (event) => onDayKeyDown(event, date), "aria-label": dateLabel(date, locale), children: Number(date.slice(-2)) }),
-        dayOverlays.map((overlay) => /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__overlay", "data-kind": overlay.kind, children: overlay.label }, overlay.id)),
-        /* @__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": 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__ */ jsxs("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.slice(0, 7).map((date) => /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__weekday", "aria-hidden": "true", children: dateText(date, "weekday") }, `weekday-${date}`)),
+      days.map((date, index) => {
+        const dayEntries = entriesFor(date);
+        const dayOverlays = overlaysFor(date);
+        const overflowing = maxEntriesPerDay !== void 0 && dayEntries.length > maxEntriesPerDay;
+        const collapsed = overflowing && (onShowMore !== void 0 || !expandedDates.has(date));
+        const shownEntries = collapsed ? dayEntries.slice(0, Math.max(0, maxEntriesPerDay)) : dayEntries;
+        const hiddenCount = dayEntries.length - shownEntries.length;
+        const badge = renderDayBadge?.(date, dayEntries);
+        const dateButton = /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__date", "data-calendar-date": date, tabIndex: activeDate === date ? 0 : -1, onFocus: () => setActiveDate(date), onKeyDown: (event) => onDayKeyDown(event, date), "aria-label": dateText(date, "day"), children: Number(date.slice(-2)) });
+        return /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__day", "data-outside": view === "month" && !monthDays[index].inMonth || void 0, children: [
+          badge == null || badge === false ? dateButton : /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__dayhead", children: [
+            /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__badge", children: badge }),
+            dateButton
+          ] }),
+          dayOverlays.map((overlay) => /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__overlay", "data-kind": overlay.kind, children: overlay.label }, overlay.id)),
+          /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__entries", children: [
+            shownEntries.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": 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);
+            }),
+            overflowing && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__more", "aria-expanded": onShowMore ? void 0 : !collapsed, "aria-label": collapsed ? fillLabel(labels.moreEntriesLabel, { count: hiddenCount, date: dateText(date, "day") }) : void 0, onClick: () => toggleMore(date, dayEntries), children: collapsed ? fillLabel(labels.moreEntries, { count: hiddenCount }) : labels.fewerEntries })
+          ] })
+        ] }, date);
+      })
+    ] }),
     /* @__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)) })
   ] });
 }

package/dist/components/SearchSuggest.d.ts

@@ -82,6 +82,6 @@ interface SearchSuggestProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCha
  * (`aria-activedescendant`), Enter opens it (the first row when none is active), Escape closes the
  * list and a second Escape clears the text.
  */
-declare function SearchSuggest({ value, onValueChange, options, onSelect, label, placeholder, highlight, heading, headingAction, footer, loading, loadingLabel, empty, error, shortcutHint, clearLabel, status, size, open: openProp, strategy, onOpenChange, inputRef, autoFocus, name, className, onBlur, ...props }: SearchSuggestProps): react.JSX.Element;
+declare function SearchSuggest({ value, onValueChange, options, onSelect, label, placeholder, highlight, heading, headingAction, footer, loading, loadingLabel, empty, error, shortcutHint, clearLabel: clearLabelProp, status, size, open: openProp, strategy, onOpenChange, inputRef, autoFocus, name, className, onBlur, ...props }: SearchSuggestProps): react.JSX.Element;
 
 export { SearchSuggest, type SearchSuggestAction, type SearchSuggestOption, type SearchSuggestProps };

package/dist/components/SearchSuggest.js

@@ -2,6 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { cx } from "../cx.js";
+import { useUixLabels } from "../labels-context.js";
 import { useAnchoredPosition } from "../hooks/useAnchoredPosition.js";
 import { searchSegments } from "../search-suggest-model.js";
 import { Spinner } from "./Spinner.js";
@@ -33,7 +34,7 @@ function SearchSuggest({
   empty,
   error,
   shortcutHint,
-  clearLabel = "Clear search",
+  clearLabel: clearLabelProp,
   status,
   size = "md",
   open: openProp,
@@ -46,6 +47,8 @@ function SearchSuggest({
   onBlur,
   ...props
 }) {
+  const uixLabels = useUixLabels();
+  const clearLabel = clearLabelProp ?? uixLabels.searchSuggest?.clear ?? "Clear search";
   const id = useId();
   const listboxId = `${id}-listbox`;
   const headingId = `${id}-heading`;

package/dist/components/Sidebar.d.ts

@@ -11,7 +11,7 @@ interface SidebarProps extends HTMLAttributes<HTMLElement> {
     expandLabel?: string;
     collapseLabel?: string;
 }
-declare function Sidebar({ collapsed, nav, onToggle, brand, toggleIcon, children, expandLabel, collapseLabel, className, ...props }: SidebarProps): react.JSX.Element;
+declare function Sidebar({ collapsed, nav, onToggle, brand, toggleIcon, children, expandLabel: expandLabelProp, collapseLabel: collapseLabelProp, className, ...props }: SidebarProps): react.JSX.Element;
 interface SidebarSectionProps {
     label?: string;
     children?: ReactNode;
@@ -22,9 +22,14 @@ interface NavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     badge?: ReactNode;
     active?: boolean;
     as?: 'a' | 'button';
+    /**
+     * A second line under the label (a sub-label, a count, a long German term); it wraps,
+     * and the row grows to fit (HAR-1355; TENSOR B31). Hidden in the rail.
+     */
+    description?: ReactNode;
     children?: ReactNode;
 }
-declare function NavItem({ icon, badge, active, as: Tag, children, className, ...props }: NavItemProps): react.JSX.Element;
+declare function NavItem({ icon, badge, active, as: Tag, description, children, className, ...props }: NavItemProps): react.JSX.Element;
 interface NavGroupProps {
     icon?: ReactNode;
     label: ReactNode;

package/dist/components/Sidebar.js

@@ -2,8 +2,12 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from "react";
 import { cx } from "../cx.js";
+import { useUixLabels } from "../labels-context.js";
 const ChevronIcon = () => /* @__PURE__ */ jsx("svg", { className: "uix-navgroup__chevron", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 4l4 4 4-4" }) });
-function Sidebar({ collapsed, nav, onToggle, brand, toggleIcon, children, expandLabel = "Expand sidebar", collapseLabel = "Collapse sidebar", className, ...props }) {
+function Sidebar({ collapsed, nav, onToggle, brand, toggleIcon, children, expandLabel: expandLabelProp, collapseLabel: collapseLabelProp, className, ...props }) {
+  const uixLabels = useUixLabels();
+  const expandLabel = expandLabelProp ?? uixLabels.sidebar?.expand ?? "Expand sidebar";
+  const collapseLabel = collapseLabelProp ?? uixLabels.sidebar?.collapse ?? "Collapse sidebar";
   const isCollapsed = collapsed ?? nav === "rail";
   return /* @__PURE__ */ jsxs("nav", { className: cx("uix-sidebar", className), "data-collapsed": isCollapsed || void 0, "data-nav": nav, ...props, children: [
     (brand != null || onToggle) && /* @__PURE__ */ jsxs("div", { className: "uix-sidebar__head", children: [
@@ -23,7 +27,12 @@ function SidebarSection({ label, children }) {
     children
   ] });
 }
-function NavItem({ icon, badge, active, as: Tag = "a", children, className, ...props }) {
+function NavItem({ icon, badge, active, as: Tag = "a", description, children, className, ...props }) {
+  const text = description == null ? /* @__PURE__ */ jsx("span", { className: "uix-navitem__label", children }) : /* @__PURE__ */ jsxs("span", { className: "uix-navitem__text", children: [
+    /* @__PURE__ */ jsx("span", { className: "uix-navitem__label", children }),
+    /* @__PURE__ */ jsx("span", { className: "uix-navitem__desc", children: description })
+  ] });
+  const multiline = description == null ? void 0 : true;
   if (Tag === "button") {
     const { href: _href, ...btnProps } = props;
     return /* @__PURE__ */ jsxs(
@@ -32,10 +41,11 @@ function NavItem({ icon, badge, active, as: Tag = "a", children, className, ...p
         type: "button",
         className: cx("uix-navitem", className),
         "aria-current": active ? "page" : void 0,
+        "data-multiline": multiline,
         ...btnProps,
         children: [
           icon && /* @__PURE__ */ jsx("span", { className: "uix-navitem__icon", "aria-hidden": "true", children: icon }),
-          /* @__PURE__ */ jsx("span", { className: "uix-navitem__label", children }),
+          text,
           badge != null && /* @__PURE__ */ jsx("span", { className: "uix-navitem__badge", children: badge })
         ]
       }
@@ -46,10 +56,11 @@ function NavItem({ icon, badge, active, as: Tag = "a", children, className, ...p
     {
       className: cx("uix-navitem", className),
       "aria-current": active ? "page" : void 0,
+      "data-multiline": multiline,
       ...props,
       children: [
         icon && /* @__PURE__ */ jsx("span", { className: "uix-navitem__icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ jsx("span", { className: "uix-navitem__label", children }),
+        text,
         badge != null && /* @__PURE__ */ jsx("span", { className: "uix-navitem__badge", children: badge })
       ]
     }

package/dist/components/Stat.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
+import { UixRenderLink } from '../link.js';
 
 interface StatTrend {
     direction: 'up' | 'down';
@@ -32,6 +33,21 @@ interface StatProps extends HTMLAttributes<HTMLElement> {
     };
     /** Whether the editor this tile opens is currently open (`aria-expanded`). */
     expanded?: boolean;
+    /**
+     * What `onActivate` opens, for `aria-haspopup` (HAR-1350; TENSOR B6). Default `'dialog'`;
+     * `'menu'` for a status menu; `false` for an in-place action (no chevron either).
+     */
+    haspopup?: 'dialog' | 'menu' | 'listbox' | false;
+    /**
+     * Makes the whole tile a link (HAR-1350; TENSOR B7, MOTUS B-A7). Server-renderable, unlike
+     * `onActivate`. Ignored when `onActivate` is set. The forwarded ref reaches the `<a>` only
+     * without `renderLink`.
+     */
+    href?: string;
+    /** The link tile is the current page (`aria-current="page"`). */
+    current?: boolean;
+    /** Your router's link for `href`; default a plain `<a>`. */
+    renderLink?: UixRenderLink;
 }
 /**
  * KPI / stat tile over `.uix-stat`. With `onActivate` the tile is a button; the forwarded

package/dist/components/Stat.js

@@ -1,23 +1,26 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useId } from "react";
 import { cx } from "../cx.js";
+import { renderUixLink } from "../link.js";
 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 Stat = forwardRef(function Stat2({ label, value, icon, meta, trend, tone = "neutral", size = "hero", onActivate, activateLabel, expanded, trendLabels, haspopup = "dialog", href, current, renderLink, className, onClick, ...props }, ref) {
   const id = useId();
   const interactive = onActivate != null;
+  const linked = !interactive && href != null;
   const classes = cx(
     "uix-stat",
     tone !== "neutral" && `uix-stat--${tone}`,
     size === "compact" && "uix-stat--compact",
-    interactive && "uix-stat--interactive",
+    (interactive || linked) && "uix-stat--interactive",
+    linked && "uix-stat--link",
     className
   );
-  const Row = interactive ? "span" : "div";
+  const Row = interactive || linked ? "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, {})
+      interactive && haspopup !== false && /* @__PURE__ */ jsx(Chevron, {})
     ] }),
     /* @__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: [
@@ -29,6 +32,10 @@ const Stat = forwardRef(function Stat2({ label, value, icon, meta, trend, tone =
       meta
     ] })
   ] });
+  if (linked) {
+    const linkProps = { ...props, href, className: classes, onClick, "aria-current": current ? "page" : void 0, children: body };
+    return /* @__PURE__ */ jsx(Fragment, { children: renderLink ? renderUixLink(renderLink, linkProps) : /* @__PURE__ */ jsx("a", { ref, ...linkProps }) });
+  }
   if (!interactive) {
     return /* @__PURE__ */ jsx("div", { ref, className: classes, onClick, ...props, children: body });
   }
@@ -39,7 +46,7 @@ const Stat = forwardRef(function Stat2({ label, value, icon, meta, trend, tone =
       ...props,
       ref,
       className: classes,
-      "aria-haspopup": "dialog",
+      "aria-haspopup": haspopup === false ? void 0 : haspopup,
       "aria-expanded": expanded,
       "aria-labelledby": `${id}-label ${id}-sep ${id}-value${activateLabel ? ` ${id}-action` : ""}`,
       "aria-describedby": meta != null || trend != null ? `${id}-meta` : void 0,

package/dist/components/Steps.d.ts

@@ -0,0 +1,48 @@
+import * as react from 'react';
+import { LiHTMLAttributes, ReactNode, HTMLAttributes } from 'react';
+import { UixRenderLink } from '../link.js';
+
+type StepState = 'complete' | 'current' | 'upcoming' | 'waiting' | 'error';
+/** The state words read after each step's title (state is never colour alone). */
+interface StepStateLabels {
+    complete: string;
+    current: string;
+    upcoming: string;
+    waiting: string;
+    error: string;
+}
+declare const DEFAULT_STEP_STATE_LABELS: StepStateLabels;
+interface StepsProps extends HTMLAttributes<HTMLOListElement> {
+    /**
+     * `horizontal` (default) lays the steps in a row and stacks them below 40rem;
+     * `vertical` always stacks, with descriptions under each title.
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /** Names the list, e.g. "Intake progress". */
+    label?: string;
+    stateLabels?: Partial<StepStateLabels>;
+    /** `Step` elements, in order. */
+    children?: ReactNode;
+}
+interface StepProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'title'> {
+    title: ReactNode;
+    description?: ReactNode;
+    state?: StepState;
+    /** Marker content. Default: the step number; ✓ when complete; ! on error. */
+    marker?: ReactNode;
+    /** A navigable step (a wizard you can jump back in). */
+    href?: string;
+    renderLink?: UixRenderLink;
+    onSelect?: () => void;
+    /** Set by `Steps`. */
+    index?: number;
+    /** Set by `Steps`. */
+    last?: boolean;
+    /** Set by `Steps`. */
+    stateLabels?: StepStateLabels;
+}
+/** Numbered progress through a multi-step flow (HAR-1362; TENSOR C13, MOTUS C-9). */
+declare function Steps({ orientation, label, stateLabels, className, children, ...props }: StepsProps): react.JSX.Element;
+declare function Step({ title, description, state, marker, href, renderLink, onSelect, index, last, stateLabels, className, ...props }: StepProps): react.JSX.Element;
+
+export { DEFAULT_STEP_STATE_LABELS, Step, type StepProps, type StepState, type StepStateLabels, Steps, type StepsProps };

package/dist/components/Steps.js

@@ -0,0 +1,42 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from "react";
+import { cx } from "../cx.js";
+import { renderUixLink } from "../link.js";
+const DEFAULT_STEP_STATE_LABELS = {
+  complete: "Completed",
+  current: "Current step",
+  upcoming: "Not started",
+  waiting: "Waiting",
+  error: "Needs attention"
+};
+const CSS_STATE = { complete: "done", current: "active", upcoming: void 0, waiting: "waiting", error: "error" };
+const Check = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "12", height: "12", fill: "none", stroke: "currentColor", strokeWidth: 2.25, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3.5 8.5l3 3 6-7" }) });
+function Steps({ orientation = "horizontal", label, stateLabels, className, children, ...props }) {
+  const labels = { ...DEFAULT_STEP_STATE_LABELS, ...stateLabels };
+  const steps = Children.toArray(children).filter(isValidElement);
+  return /* @__PURE__ */ jsx("ol", { "aria-label": label, className: cx("uix-steps", "uix-steps--list", `uix-steps--${orientation}`, className), ...props, children: steps.map((step, index) => cloneElement(step, { index, last: index === steps.length - 1, stateLabels: labels })) });
+}
+function Step({ title, description, state = "upcoming", marker, href, renderLink, onSelect, index = 0, last = false, stateLabels = DEFAULT_STEP_STATE_LABELS, className, ...props }) {
+  const glyph = marker ?? (state === "complete" ? /* @__PURE__ */ jsx(Check, {}) : state === "error" ? "!" : index + 1);
+  const name = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "uix-step__title", children: title }),
+    /* @__PURE__ */ jsxs("span", { className: "uix-visually-hidden", children: [
+      ", ",
+      stateLabels[state]
+    ] })
+  ] });
+  const titled = href != null ? renderUixLink(renderLink, { href, className: "uix-step__action", children: name }) : onSelect ? /* @__PURE__ */ jsx("button", { type: "button", className: "uix-step__action", onClick: onSelect, children: name }) : /* @__PURE__ */ jsx("span", { className: "uix-step__action", children: name });
+  return /* @__PURE__ */ jsxs("li", { className: cx("uix-step", className), "data-state": CSS_STATE[state], "aria-current": state === "current" ? "step" : void 0, ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "uix-step__marker", "aria-hidden": "true", children: glyph }),
+    /* @__PURE__ */ jsxs("span", { className: "uix-step__text", children: [
+      titled,
+      description != null && /* @__PURE__ */ jsx("span", { className: "uix-step__desc", children: description })
+    ] }),
+    !last && /* @__PURE__ */ jsx("span", { className: "uix-step__connector", "aria-hidden": "true", "data-done": state === "complete" || void 0 })
+  ] });
+}
+export {
+  DEFAULT_STEP_STATE_LABELS,
+  Step,
+  Steps
+};

package/dist/components/Toast.d.ts

@@ -12,12 +12,12 @@ interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     onClose?: () => void;
     leaving?: boolean;
 }
-declare function Toast({ title, message, tone, icon, onClose, leaving, dismissLabel, className, ...props }: ToastProps): react.JSX.Element;
+declare function Toast({ title, message, tone, icon, onClose, leaving, dismissLabel: dismissLabelProp, 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, regionLabel, className, ...props }: ToasterProps): react.JSX.Element;
+declare function Toaster({ children, regionLabel: regionLabelProp, className, ...props }: ToasterProps): react.JSX.Element;
 
 export { Toast, type ToastProps, type ToastTone, Toaster, type ToasterProps };

package/dist/components/Toast.js

@@ -2,8 +2,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
+import { useUixLabels } from "../labels-context.js";
 const ToasterContext = createContext(null);
-function Toast({ title, message, tone, icon, onClose, leaving, dismissLabel = "Dismiss", className, ...props }) {
+function Toast({ title, message, tone, icon, onClose, leaving, dismissLabel: dismissLabelProp, className, ...props }) {
+  const uixLabels = useUixLabels();
+  const dismissLabel = dismissLabelProp ?? uixLabels.toast?.dismiss ?? "Dismiss";
   const assertive = tone === "danger";
   const toaster = useContext(ToasterContext);
   const bodyRef = useRef(null);
@@ -44,7 +47,9 @@ function Toast({ title, message, tone, icon, onClose, leaving, dismissLabel = "D
     }
   );
 }
-function Toaster({ children, regionLabel = "Notifications", className, ...props }) {
+function Toaster({ children, regionLabel: regionLabelProp, className, ...props }) {
+  const uixLabels = useUixLabels();
+  const regionLabel = regionLabelProp ?? uixLabels.toaster?.region ?? "Notifications";
   const [announced, setAnnounced] = useState("");
   const clearTimer = useRef(null);
   const announce = useCallback((text) => {

package/dist/components/Tooltip.d.ts

@@ -2,9 +2,15 @@ import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 import { Placement } from '../overlay-position.js';
 
-interface TooltipProps extends HTMLAttributes<HTMLSpanElement> {
-    /** Tooltip text. */
-    label: string;
+interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'> {
+    /** Tooltip text. Pass this or `content`. */
+    label?: string;
+    /**
+     * Rich, non-interactive tooltip content, e.g. a short list (HAR-1349; TENSOR A3). It is
+     * still a `role="tooltip"` description: no links or buttons inside — use `InfoTip` or
+     * `Popover` for content the user must reach. Wins over `label` when both are set.
+     */
+    content?: ReactNode;
     /** Preferred placement. Default `'top'`. */
     placement?: Placement;
     children?: ReactNode;
@@ -17,6 +23,6 @@ interface TooltipProps extends HTMLAttributes<HTMLSpanElement> {
  * (document-level, per WCAG 1.4.13), and hoverable: the bubble stays open while
  * the pointer is over it (UIX-A11Y-1).
  */
-declare function Tooltip({ label, placement, className, children, ...props }: TooltipProps): react.JSX.Element;
+declare function Tooltip({ label, content, placement, className, children, ...props }: TooltipProps): react.JSX.Element;
 
 export { Tooltip, type TooltipProps };

package/dist/components/Tooltip.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cloneElement, isValidElement, useEffect, useId, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { useAnchoredPosition } from "../hooks/useAnchoredPosition.js";
-function Tooltip({ label, placement = "top", className, children, ...props }) {
+function Tooltip({ label, content, placement = "top", className, children, ...props }) {
   const triggerRef = useRef(null);
   const bubbleRef = useRef(null);
   const closeTimer = useRef(null);
@@ -92,7 +92,7 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
             onMouseEnter: cancelClose,
             onMouseLeave: scheduleHide,
             ...bubbleAttr,
-            children: label
+            children: content ?? label
           }
         )
       ]

package/dist/{emoji-image-WQLh8ZQP.d.cts → emoji-image-6mPZ15Zy.d.cts}

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactElement } from 'react';
-import { P as Placement } from './overlay-position-CEGSz6Z2.cjs';
+import { P as Placement } from './overlay-position-Cjv5E7mn.cjs';
 
 type EmojiLocale = 'en' | 'de';
 interface EmojiEntry {
@@ -106,6 +106,9 @@ declare const EMOJI_GRID_COLUMNS = 8;
  * Emoji picker in a native popover: search, quick picks, recently used and the
  * Unicode categories, with names in English or German. The emoji dataset loads on
  * first open. The grid is one tab stop; arrow keys, Home and End move within it.
+ * The picker is one size in every state (loading, searching, failed), so it keeps the
+ * side it opened on; it stays attached to its trigger while the page scrolls and
+ * closes once the trigger is scrolled out of view.
  */
 declare function EmojiPicker({ onSelect, trigger, labels: labelOverrides, locale, quickPicks, loadData, recentStorageKey, placement, onOpenChange, className, emojiImageBaseUrl, }: EmojiPickerProps): react.JSX.Element;