@tensor_1/react 2.47.0 → 2.49.0

package/dist/components/Sidebar.js

@@ -1,24 +1,45 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef, useState } from "react";
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { useUixLabels } from "../labels-context.js";
+import { SearchIcon } from "../icons/components.js";
+import { useInShellDrawer } from "../shell-context.js";
+import { KbdCombo, ariaKeyShortcuts, useKbdPlatform } from "./Kbd.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: expandLabelProp, collapseLabel: collapseLabelProp, className, ...props }) {
+function Sidebar({ collapsed, nav, onToggle, brand, toggleIcon, actions, search, footer, 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: [
+  const inDrawer = useInShellDrawer();
+  const isCollapsed = !inDrawer && (collapsed ?? nav === "rail");
+  const platform = useKbdPlatform();
+  return /* @__PURE__ */ jsxs("nav", { className: cx("uix-sidebar", className), "data-collapsed": isCollapsed || void 0, "data-nav": inDrawer ? void 0 : nav, ...props, children: [
+    (brand != null || onToggle || actions != null) && /* @__PURE__ */ jsxs("div", { className: "uix-sidebar__head", children: [
       brand && /* @__PURE__ */ jsx("div", { className: "uix-sidebar__brand", children: brand }),
+      actions != null && /* @__PURE__ */ jsx("div", { className: "uix-sidebar__actions", children: actions }),
       onToggle && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-sidebar__toggle", onClick: onToggle, "aria-label": isCollapsed ? expandLabel : collapseLabel, children: toggleIcon ?? /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: [
         /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "12", height: "1.5", rx: ".75" }),
         /* @__PURE__ */ jsx("rect", { x: "3", y: "8.25", width: "8", height: "1.5", rx: ".75" }),
         /* @__PURE__ */ jsx("rect", { x: "3", y: "12.5", width: "12", height: "1.5", rx: ".75" })
       ] }) })
     ] }),
-    children
+    search && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "uix-sidebar__search",
+        onClick: search.onActivate,
+        "aria-keyshortcuts": search.shortcut ? ariaKeyShortcuts(search.shortcut, platform) : void 0,
+        children: [
+          /* @__PURE__ */ jsx(SearchIcon, { className: "uix-sidebar__search-icon" }),
+          /* @__PURE__ */ jsx("span", { className: "uix-sidebar__search-label", children: search.label }),
+          search.shortcut && /* @__PURE__ */ jsx(KbdCombo, { className: "uix-sidebar__search-keys", keys: [...search.shortcut], platform, "aria-hidden": "true" })
+        ]
+      }
+    ),
+    children,
+    footer != null && /* @__PURE__ */ jsx("div", { className: "uix-sidebar__foot", children: footer })
   ] });
 }
 function SidebarSection({ label, children }) {
@@ -27,7 +48,7 @@ function SidebarSection({ label, children }) {
     children
   ] });
 }
-function NavItem({ icon, badge, active, as: Tag = "a", description, children, className, ...props }) {
+const NavItem = forwardRef(function NavItem2({ icon, badge, active, as: Tag = "a", description, children, className, ...props }, ref) {
   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 })
@@ -38,6 +59,7 @@ function NavItem({ icon, badge, active, as: Tag = "a", description, children, cl
     return /* @__PURE__ */ jsxs(
       "button",
       {
+        ref,
         type: "button",
         className: cx("uix-navitem", className),
         "aria-current": active ? "page" : void 0,
@@ -54,6 +76,7 @@ function NavItem({ icon, badge, active, as: Tag = "a", description, children, cl
   return /* @__PURE__ */ jsxs(
     "a",
     {
+      ref,
       className: cx("uix-navitem", className),
       "aria-current": active ? "page" : void 0,
       "data-multiline": multiline,
@@ -65,7 +88,8 @@ function NavItem({ icon, badge, active, as: Tag = "a", description, children, cl
       ]
     }
   );
-}
+});
+NavItem.displayName = "NavItem";
 function NavGroup({ icon, label, children, defaultExpanded = true, expanded: controlledExpanded, onExpandedChange }) {
   const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
   const expanded = controlledExpanded ?? internalExpanded;
@@ -101,14 +125,15 @@ function NavGroup({ icon, label, children, defaultExpanded = true, expanded: con
     /* @__PURE__ */ jsx("div", { ref: panelRef, id: panelId, className: "uix-navgroup__panel", "aria-hidden": !expanded, children: /* @__PURE__ */ jsx("div", { children }) })
   ] });
 }
-function SubNavItem({ active, as: Tag = "a", children, className, ...props }) {
+const SubNavItem = forwardRef(function SubNavItem2({ active, as: Tag = "a", children, className, ...props }, ref) {
   const cls = cx("uix-navitem uix-subitem", className);
   if (Tag === "button") {
     const { href: _href, ...btnProps } = props;
-    return /* @__PURE__ */ jsx("button", { type: "button", className: cls, "aria-current": active ? "page" : void 0, ...btnProps, children: /* @__PURE__ */ jsx("span", { className: "uix-navitem__label", children }) });
+    return /* @__PURE__ */ jsx("button", { ref, type: "button", className: cls, "aria-current": active ? "page" : void 0, ...btnProps, children: /* @__PURE__ */ jsx("span", { className: "uix-navitem__label", children }) });
   }
-  return /* @__PURE__ */ jsx("a", { className: cls, "aria-current": active ? "page" : void 0, ...props, children: /* @__PURE__ */ jsx("span", { className: "uix-navitem__label", children }) });
-}
+  return /* @__PURE__ */ jsx("a", { ref, className: cls, "aria-current": active ? "page" : void 0, ...props, children: /* @__PURE__ */ jsx("span", { className: "uix-navitem__label", children }) });
+});
+SubNavItem.displayName = "SubNavItem";
 export {
   NavGroup,
   NavItem,

package/dist/components/SortableList.d.ts

@@ -0,0 +1,45 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/** Every word `SortableList` renders or announces. `{label}` is the row's name. */
+interface SortableListLabels {
+    /** The drag grip's name. */
+    grip: string;
+    moveUp: string;
+    moveDown: string;
+    /** Polite announcement after a move: `{label}`, `{position}`, `{count}`. */
+    moved: string;
+}
+declare const DEFAULT_SORTABLE_LIST_LABELS: SortableListLabels;
+/** What `renderItem` receives besides the item. */
+interface SortableListItemContext {
+    index: number;
+    count: number;
+    /** This row is being dragged. */
+    dragging: boolean;
+}
+interface SortableListProps<T> extends Omit<HTMLAttributes<HTMLUListElement>, 'children' | 'onChange'> {
+    items: readonly T[];
+    getId: (item: T) => string;
+    /** The row's name in the grip, the move buttons and the announcement. Default: its id. */
+    getLabel?: (item: T) => string;
+    renderItem: (item: T, context: SortableListItemContext) => ReactNode;
+    /** Called with the full new order of ids after each keyboard move, and once when a drag ends. */
+    onReorder: (orderedIds: string[]) => void;
+    /** Rows show no grip and no move buttons. */
+    disabled?: boolean;
+    /** Each word defaults to `UixLabelsProvider` `sortableList`, then to English. */
+    labels?: Partial<SortableListLabels>;
+}
+/**
+ * A list the person reorders (HAR-1375; MOTUS C-16 photo order, TENSOR preset and start-page
+ * order): media, priorities, steps. Each row has a grip to drag with a pointer, and Move up /
+ * Move down buttons that are always there (a drag is never the only way). With focus anywhere
+ * in a row, Alt+↑ / Alt+↓ move it; a focused grip moves with ↑ / ↓ alone. Focus stays with the
+ * moved row, and a polite status says where it went. Keyboard moves are instant; a drag lifts
+ * the row (drag.css), places it under the pointer frame by frame, and it settles when dropped. Shares its order model with `ViewMenu`,
+ * `SavedViewMenu` and `NavFavourites`.
+ */
+declare function SortableList<T>({ items, getId, getLabel, renderItem, onReorder, disabled, labels: labelOverrides, className, ...props }: SortableListProps<T>): react.JSX.Element;
+
+export { DEFAULT_SORTABLE_LIST_LABELS, SortableList, type SortableListItemContext, type SortableListLabels, type SortableListProps };

package/dist/components/SortableList.js

@@ -0,0 +1,147 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { useUixLabels } from "../labels-context.js";
+import { placeId, sameOrder, useRowDrag } from "../reorder.js";
+import { EditorIcon } from "./EditorIcons.js";
+import { settleDrop } from "../hooks/useKeyboardGrab.js";
+const DEFAULT_SORTABLE_LIST_LABELS = {
+  grip: "Drag to reorder: {label}",
+  moveUp: "Move {label} up",
+  moveDown: "Move {label} down",
+  moved: "{label} moved to position {position} of {count}"
+};
+const ArrowIcon = ({ dir }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: dir === "up" ? "m18 15-6-6-6 6" : "m6 9 6 6 6-6" }) });
+function SortableList({
+  items,
+  getId,
+  getLabel,
+  renderItem,
+  onReorder,
+  disabled = false,
+  labels: labelOverrides,
+  className,
+  ...props
+}) {
+  const labels = { ...DEFAULT_SORTABLE_LIST_LABELS, ...useUixLabels().sortableList, ...labelOverrides };
+  const ids = items.map(getId);
+  const orderKey = ids.join("\0");
+  const [draft, setDraft] = useState(null);
+  useEffect(() => setDraft(null), [orderKey]);
+  const order = draft && sameOrder([...draft].sort(), [...ids].sort()) ? draft : ids;
+  const byId = new Map(items.map((item) => [getId(item), item]));
+  const nameOf = (id) => {
+    const item = byId.get(id);
+    return item !== void 0 && getLabel ? getLabel(item) : id;
+  };
+  const [announcement, setAnnouncement] = useState("");
+  const listRef = useRef(null);
+  const refocus = useRef(null);
+  useEffect(() => {
+    const target = refocus.current;
+    refocus.current = null;
+    if (!target) return;
+    if (target.el) {
+      if (target.el.isConnected && document.activeElement !== target.el) target.el.focus();
+      return;
+    }
+    const row = Array.from(listRef.current?.children ?? []).find((child) => child.dataset.id === target.id);
+    if (!row) return;
+    const want = target.part === "up" ? ".uix-sortable__move--up" : target.part === "down" ? ".uix-sortable__move--down" : target.part === "grip" ? ".uix-sortable__grip" : null;
+    const other = target.part === "up" ? ".uix-sortable__move--down" : ".uix-sortable__move--up";
+    const button = want ? row.querySelector(want) : null;
+    const el = button && !button.disabled ? button : row.querySelector(other);
+    if (el && document.activeElement !== el) el.focus();
+  });
+  const commit = (next, id) => {
+    setDraft(null);
+    onReorder([...next]);
+    setAnnouncement(fillLabel(labels.moved, { label: nameOf(id), position: next.indexOf(id) + 1, count: next.length }));
+  };
+  const move = (id, delta, part, el) => {
+    const next = placeId(order, id, order.indexOf(id) + delta);
+    if (next === order) return;
+    refocus.current = { id, part, el };
+    commit(next, id);
+  };
+  const settle = useRef(null);
+  useEffect(() => {
+    const pending = settle.current;
+    if (!pending || draft !== null) return;
+    if (orderKey === pending.from) return;
+    settle.current = null;
+    if (orderKey !== pending.to) return;
+    const row = Array.from(listRef.current?.children ?? []).find((child) => child.dataset.id === pending.id);
+    settleDrop(row);
+  });
+  const dragStart = useRef(null);
+  const { dragging, start } = useRowDrag(".uix-sortable__row", {
+    over: (id, index) => {
+      const next = placeId(order, id, index);
+      if (next !== order) setDraft(next);
+    },
+    drop: (id) => {
+      const begin = dragStart.current;
+      dragStart.current = null;
+      if (begin && !sameOrder(begin, order)) {
+        settle.current = { id, to: order.join("\0"), from: orderKey };
+        commit(order, id);
+      } else setDraft(null);
+    },
+    cancel: () => {
+      dragStart.current = null;
+      setDraft(null);
+    }
+  });
+  const onRowKeyDown = (event, id) => {
+    if (disabled || !event.altKey || event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+    if (event.target.closest('input, textarea, select, [contenteditable="true"]')) return;
+    event.preventDefault();
+    const target = event.target;
+    const part = target.closest(".uix-sortable__move--up") ? "up" : target.closest(".uix-sortable__move--down") ? "down" : target.closest(".uix-sortable__grip") ? "grip" : "row";
+    move(id, event.key === "ArrowUp" ? -1 : 1, part, part === "row" ? target : void 0);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("ul", { ref: listRef, className: cx("uix-sortable", className), "data-dragging": dragging ? "" : void 0, ...props, children: order.map((id, index) => {
+      const item = byId.get(id);
+      if (item === void 0) return null;
+      const name = nameOf(id);
+      return /* @__PURE__ */ jsxs("li", { className: "uix-sortable__row", "data-id": id, "data-dragging": dragging === id || void 0, "data-uix-drag": dragging === id ? "lifted" : void 0, onKeyDown: (event) => onRowKeyDown(event, id), children: [
+        !disabled && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "uix-sortable__grip",
+            tabIndex: -1,
+            "aria-label": fillLabel(labels.grip, { label: name }),
+            onPointerDown: (event) => {
+              if (event.button !== 0) return;
+              event.preventDefault();
+              event.currentTarget.focus({ preventScroll: true });
+              dragStart.current = order;
+              start(event, id);
+            },
+            onKeyDown: (event) => {
+              if (event.altKey || event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+              event.preventDefault();
+              move(id, event.key === "ArrowUp" ? -1 : 1, "grip");
+            },
+            children: /* @__PURE__ */ jsx(EditorIcon, { name: "grip" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "uix-sortable__content", children: renderItem(item, { index, count: order.length, dragging: dragging === id }) }),
+        !disabled && /* @__PURE__ */ jsxs("span", { className: "uix-sortable__moves", children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: "uix-sortable__move uix-sortable__move--up", "aria-label": fillLabel(labels.moveUp, { label: name }), disabled: index === 0, onClick: () => move(id, -1, "up"), children: /* @__PURE__ */ jsx(ArrowIcon, { dir: "up" }) }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "uix-sortable__move uix-sortable__move--down", "aria-label": fillLabel(labels.moveDown, { label: name }), disabled: index === order.length - 1, onClick: () => move(id, 1, "down"), children: /* @__PURE__ */ jsx(ArrowIcon, { dir: "down" }) })
+        ] })
+      ] }, id);
+    }) }),
+    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", children: announcement })
+  ] });
+}
+export {
+  DEFAULT_SORTABLE_LIST_LABELS,
+  SortableList
+};

package/dist/components/Stat.d.ts

@@ -3,8 +3,15 @@ import { HTMLAttributes, ReactNode } from 'react';
 import { UixRenderLink } from '../link.js';
 
 interface StatTrend {
+    /** Which way the figure moved: the arrow, and the spoken "up" / "down". */
     direction: 'up' | 'down';
     label: ReactNode;
+    /**
+     * What the change means, which sets the colour (HAR-1563): `positive` green, `negative` red,
+     * `neutral` (default) grey. A rise in breached SLAs is `negative`; direction never picks the
+     * colour.
+     */
+    sentiment?: 'positive' | 'negative' | 'neutral';
 }
 interface StatProps extends HTMLAttributes<HTMLElement> {
     label: ReactNode;
@@ -15,7 +22,10 @@ interface StatProps extends HTMLAttributes<HTMLElement> {
     meta?: ReactNode;
     /** Trend chip rendered before the meta text. */
     trend?: StatTrend;
-    /** Outline and value colour. `neutral` (default) is today's tile. */
+    /**
+     * `warning` / `danger` colour the value and put a dot of that tone before it; the border stays
+     * neutral (HAR-1563). `neutral` (default) is the plain tile.
+     */
     tone?: 'neutral' | 'warning' | 'danger';
     /** `hero` (default) is today's KPI size; `compact` is for dense fact bands. */
     size?: 'hero' | 'compact';
@@ -48,7 +58,8 @@ interface StatProps extends HTMLAttributes<HTMLElement> {
     /**
      * 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`.
+     * without `renderLink`. A trailing chevron in the label row marks the tile as a link at rest,
+     * since a touch screen has no hover (HAR-1803).
      */
     href?: string;
     /** The link tile is the current page (`aria-current="page"`). */
@@ -61,5 +72,19 @@ interface StatProps extends HTMLAttributes<HTMLElement> {
  * ref then points at that button, so a popover can anchor to it.
  */
 declare const Stat: react.ForwardRefExoticComponent<StatProps & react.RefAttributes<HTMLElement>>;
+interface StatRowProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The narrowest a tile may get before the row puts fewer tiles side by side, as a CSS length
+     * (`--stat-row-min`). Default `8.5rem`, and `12rem` once a hero tile is in the row.
+     */
+    minTileWidth?: string;
+    children?: ReactNode;
+}
+/**
+ * A row of `Stat` tiles over `.uix-stat-row` (HAR-1803 review): as many tiles per row as fit at
+ * `minTileWidth`, all the same height, down to one per row on a phone. Use it instead of a fixed
+ * column count, which squeezes tiles until their labels break letter by letter.
+ */
+declare function StatRow({ minTileWidth, className, style, children, ...props }: StatRowProps): react.JSX.Element;
 
-export { Stat, type StatProps, type StatTrend };
+export { Stat, type StatProps, StatRow, type StatRowProps, type StatTrend };

package/dist/components/Stat.js

@@ -2,7 +2,9 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useId } from "react";
 import { cx } from "../cx.js";
 import { renderUixLink } from "../link.js";
+import { ChevronRightIcon } from "../icons/components.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 Go = () => /* @__PURE__ */ jsx("span", { className: "uix-stat__go", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) });
 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, onKeyDown, pending = false, ...props }, ref) {
   const id = useId();
   const interactive = onActivate != null;
@@ -13,6 +15,8 @@ const Stat = forwardRef(function Stat2({ label, value, icon, meta, trend, tone =
     size === "compact" && "uix-stat--compact",
     (interactive || linked) && "uix-stat--interactive",
     linked && "uix-stat--link",
+    // an in-place action has no chevron: its value is underlined at rest instead (HAR-1803)
+    interactive && haspopup === false && "uix-stat--action",
     className
   );
   const Row = interactive || linked ? "span" : "div";
@@ -20,11 +24,12 @@ const Stat = forwardRef(function Stat2({ label, value, icon, meta, trend, tone =
     /* @__PURE__ */ jsxs(Row, { className: "uix-stat__label", children: [
       /* @__PURE__ */ jsx("span", { id: interactive ? `${id}-label` : void 0, children: label }),
       icon,
-      interactive && haspopup !== false && /* @__PURE__ */ jsx(Chevron, {})
+      interactive && haspopup !== false && /* @__PURE__ */ jsx(Chevron, {}),
+      linked && /* @__PURE__ */ jsx(Go, {})
     ] }),
     /* @__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: [
+      trend != null && /* @__PURE__ */ jsxs("span", { className: cx("uix-stat__trend", `uix-stat__trend--${trend.direction}`, trend.sentiment != null && trend.sentiment !== "neutral" && `uix-stat__trend--${trend.sentiment}`), 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" ? trendLabels?.up ?? "up" : trendLabels?.down ?? "down" }),
         trend.label
@@ -68,6 +73,11 @@ const Stat = forwardRef(function Stat2({ label, value, icon, meta, trend, tone =
     }
   );
 });
+function StatRow({ minTileWidth, className, style, children, ...props }) {
+  const rowStyle = minTileWidth ? { ...style, "--stat-row-min": minTileWidth } : style;
+  return /* @__PURE__ */ jsx("div", { className: cx("uix-stat-row", className), style: rowStyle, ...props, children });
+}
 export {
-  Stat
+  Stat,
+  StatRow
 };

package/dist/components/States.d.ts

@@ -38,6 +38,38 @@ declare function ForbiddenState({ icon, title, detail, action, variant, classNam
 declare function NotFoundState({ icon, title, detail, action, variant, className, ...props }: AccessStateProps): react.JSX.Element;
 /** Empty-result state for an active search or filter, kept distinct for analytics and recovery copy. */
 declare function FilteredEmptyState(props: EmptyStateProps): react.JSX.Element;
+interface SuccessStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** What happened, e.g. "Request submitted". Rendered as a heading that takes focus on mount. */
+    title: ReactNode;
+    /** The heading level (default 1: the outcome usually replaces the page's form). */
+    headingLevel?: 1 | 2 | 3;
+    /** Supporting copy under the title. */
+    children?: ReactNode;
+    /** The record's reference, e.g. `<>REQ-0233 <CopyButton … /></>`. */
+    reference?: ReactNode;
+    /** The words before the reference (default "Your reference"). */
+    referenceLabel?: ReactNode;
+    /** A short, ordered "what happens next": two to four steps in the person's words. */
+    next?: ReactNode[];
+    /** The heading of `next` (default "What happens next"). */
+    nextTitle?: ReactNode;
+    /** The next action, e.g. a `ButtonLink` to the request or back to the portal. */
+    action?: ReactNode;
+    /**
+     * Move focus to the title when it mounts. Default: on for `page` and `full-page` (the outcome
+     * replaces the form the person was in), off for a state inside a section, card or drawer.
+     */
+    focusOnMount?: boolean;
+    variant?: StateVariant;
+}
+/**
+ * The outcome of a rare, important journey (HAR-2588; motion standard §2.2 "Rare", §2.8
+ * "portal peak"): a request submitted, an application sent. A success mark draws once — never
+ * repeats, never a game — then the title, the reference, what happens next, and the next
+ * action. On a page, focus moves to the title, so a screen reader reads the outcome first. Under
+ * reduced motion the mark is simply there.
+ */
+declare function SuccessState({ title, headingLevel, children, reference, referenceLabel, next, nextTitle, action, focusOnMount, variant, className, ...props }: SuccessStateProps): react.JSX.Element;
 interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
     variant?: 'block' | 'text' | 'circle';
     width?: number | string;
@@ -61,4 +93,4 @@ interface LoadingStateProps extends HTMLAttributes<HTMLDivElement> {
 /** A stack of skeleton rows for list/section loading. `role="status"`. */
 declare function LoadingState({ delay, ...props }: LoadingStateProps): react.JSX.Element;
 
-export { type AccessStateProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, FilteredEmptyState, ForbiddenState, LoadingState, type LoadingStateProps, NotFoundState, Skeleton, type SkeletonProps, type StateVariant };
+export { type AccessStateProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, FilteredEmptyState, ForbiddenState, LoadingState, type LoadingStateProps, NotFoundState, Skeleton, type SkeletonProps, type StateVariant, SuccessState, type SuccessStateProps };

package/dist/components/States.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
 import { cx } from "../cx.js";
 import { DelayedRender } from "./DelayedRender.js";
+import { FocusOnMount } from "./FocusOnMount.js";
 import { PENDING_DELAY_MS } from "../motion-timing.js";
 function EmptyState({ icon, title, children, action, variant = "section", className, ...props }) {
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-empty", `uix-empty--${variant}`, className), ...props, children: [
@@ -37,6 +39,45 @@ function NotFoundState({ icon, title, detail, action, variant = "section", class
 function FilteredEmptyState(props) {
   return /* @__PURE__ */ jsx(EmptyState, { "data-filtered": "true", ...props });
 }
+function SuccessState({
+  title,
+  headingLevel = 1,
+  children,
+  reference,
+  referenceLabel = "Your reference",
+  next,
+  nextTitle = "What happens next",
+  action,
+  focusOnMount,
+  variant = "page",
+  className,
+  ...props
+}) {
+  const focusTitle = focusOnMount ?? (variant === "page" || variant === "full-page");
+  const heading = `h${headingLevel}`;
+  const subheading = `h${Math.min(headingLevel + 1, 6)}`;
+  return (
+    // `section` is the base look: no modifier class (there is no rule for one)
+    /* @__PURE__ */ jsxs("div", { className: cx("uix-empty", "uix-success", variant !== "section" && `uix-empty--${variant}`, className), ...props, children: [
+      /* @__PURE__ */ jsx("div", { className: "uix-success__mark", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 48 48", fill: "none", children: [
+        /* @__PURE__ */ jsx("circle", { className: "uix-success__disc", cx: "24", cy: "24", r: "22" }),
+        /* @__PURE__ */ jsx("path", { className: "uix-success__check", d: "M14 24.5 21 31.5 34 17.5", pathLength: 1 })
+      ] }) }),
+      /* @__PURE__ */ jsx(FocusOnMount, { as: heading, enabled: focusTitle, className: "uix-empty__title uix-success__title", children: title }),
+      children != null && /* @__PURE__ */ jsx("div", { className: "uix-success__body", children }),
+      reference != null && /* @__PURE__ */ jsxs("p", { className: "uix-success__reference", children: [
+        /* @__PURE__ */ jsx("span", { className: "uix-success__reference-label", children: referenceLabel }),
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "uix-success__reference-value", children: reference })
+      ] }),
+      next && next.length > 0 && /* @__PURE__ */ jsxs("div", { className: "uix-success__next", children: [
+        createElement(subheading, { className: "uix-success__next-title" }, nextTitle),
+        /* @__PURE__ */ jsx("ol", { className: "uix-success__steps", children: next.map((step, i) => /* @__PURE__ */ jsx("li", { children: step }, i)) })
+      ] }),
+      action
+    ] })
+  );
+}
 function Skeleton({ variant = "block", width, height, className, style, ...props }) {
   const dims = { width, height, ...style };
   return /* @__PURE__ */ jsx(
@@ -73,5 +114,6 @@ export {
   ForbiddenState,
   LoadingState,
   NotFoundState,
-  Skeleton
+  Skeleton,
+  SuccessState
 };

package/dist/components/StatusPill.d.ts

@@ -1,18 +1,29 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
-type PillTone = 'neutral' | 'success' | 'info' | 'warning' | 'danger' | 'critical' | 'muted' | 'attention' | 'overdue' | 'sla-ok' | 'sla-at-risk' | 'sla-breached' | 'p1' | 'p2' | 'p3' | 'p4' | 'p5';
-type PillTreatment = 'filled' | 'outline';
+type PillTone = 'neutral' | 'success' | 'info' | 'warning' | 'danger' | 'critical' | 'muted' | 'progress' | 'attention' | 'overdue' | 'sla-ok' | 'sla-at-risk' | 'sla-breached' | 'p1' | 'p2' | 'p3' | 'p4' | 'p5';
+/**
+ * How loud the pill is (HAR-1563). `soft` (default) is the tinted wash; `filled` is its old name
+ * and still works. `dot` is the quiet one for tables: no fill, a neutral label and a coloured dot.
+ * `outline` is a neutral hairline with a hushed label and a dot; only `critical` keeps a toned
+ * border.
+ */
+type PillTreatment = 'soft' | 'filled' | 'dot' | 'outline';
 type PillSize = 'sm' | 'md' | 'lg';
 interface StatusPillProps extends HTMLAttributes<HTMLSpanElement> {
     tone?: PillTone;
-    /** 'filled' (default) = tinted wash; 'outline' = transparent fill + tone-tinted border. */
+    /**
+     * `soft` (default; `filled` is an alias) = tinted wash; `dot` = a coloured dot beside a neutral
+     * label, for dense tables; `outline` = a neutral hairline, a hushed label and a dot. `dot` and
+     * `outline` always draw the dot.
+     */
     treatment?: PillTreatment;
     /**
      * `sm` for a dense table cell or beside small text, `lg` for a page header (the public status
      * page). Default `md`, the size every pill had before (HAR-1614).
      */
     size?: PillSize;
+    /** Draws the tone's dot before the label. Always on for the `dot` and `outline` treatments. */
     dot?: boolean;
     children?: ReactNode;
 }

package/dist/components/StatusPill.js

@@ -1,13 +1,21 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
-function StatusPill({ tone = "neutral", treatment = "filled", size = "md", dot, children, className, ...props }) {
+function StatusPill({ tone = "neutral", treatment = "soft", size = "md", dot, children, className, ...props }) {
+  const quiet = treatment === "dot" || treatment === "outline";
   return /* @__PURE__ */ jsxs(
     "span",
     {
-      className: cx("uix-pill", `uix-pill--${tone}`, treatment === "outline" && "uix-pill--outline", size === "sm" && "uix-pill--sm", size === "lg" && "uix-pill--lg", className),
+      className: cx(
+        "uix-pill",
+        `uix-pill--${tone}`,
+        quiet && `uix-pill--${treatment}`,
+        size === "sm" && "uix-pill--sm",
+        size === "lg" && "uix-pill--lg",
+        className
+      ),
       ...props,
       children: [
-        dot && /* @__PURE__ */ jsx("span", { className: "uix-pill__dot", "aria-hidden": "true" }),
+        (dot || quiet) && /* @__PURE__ */ jsx("span", { className: "uix-pill__dot", "aria-hidden": "true" }),
         children
       ]
     }

package/dist/components/Steps.js

@@ -2,6 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement, useId } from "react";
 import { cx } from "../cx.js";
 import { renderUixLink } from "../link.js";
+import { XIcon } from "../icons/components.js";
 const DEFAULT_STEP_STATE_LABELS = {
   complete: "Completed",
   current: "Current step",
@@ -35,7 +36,7 @@ function Step({
   ...props
 }) {
   const titleId = useId();
-  const glyph = marker ?? (!progress ? index + 1 : state === "complete" ? /* @__PURE__ */ jsx(Check, {}) : state === "error" ? "!" : index + 1);
+  const glyph = marker ?? (!progress ? index + 1 : state === "complete" ? /* @__PURE__ */ jsx(Check, {}) : state === "error" ? /* @__PURE__ */ jsx(XIcon, {}) : index + 1);
   const Title = headingLevel ? `h${headingLevel}` : "span";
   const name = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Title, { id: children != null ? titleId : void 0, className: "uix-step__title", children: title }),

package/dist/components/Table.d.ts

@@ -86,8 +86,15 @@ interface ExpandToggleProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 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;
+interface CellSubProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Tabular numerals (HAR-1815): for a read-back code, a reference or a time, so digits line up
+     * down the column and a 1 is as wide as an 8.
+     */
+    tabular?: boolean;
+}
 /** Secondary line under a primary cell value (muted, meta size). */
-declare function CellSub({ children, className, ...props }: HTMLAttributes<HTMLSpanElement>): react.JSX.Element;
+declare function CellSub({ tabular, children, className, ...props }: CellSubProps): react.JSX.Element;
 interface MarkProps extends HTMLAttributes<HTMLElement> {
     children?: ReactNode;
 }
@@ -100,4 +107,4 @@ interface HighlightedProps {
 /** Render `text` with case-insensitive matches of `query` wrapped in <mark>. */
 declare function Highlighted({ text, query }: HighlightedProps): react.JSX.Element;
 
-export { BulkBar, type BulkBarProps, CellStrong, CellSub, ExpandToggle, type ExpandToggleProps, Highlighted, type HighlightedProps, Mark, type MarkProps, RowAction, type RowActionProps, RowActions, type RowActionsProps, type SortDirection, Table, type TableDensity, type TableProps, TableWrap, type TableWrapProps, Td, type TdProps, Th, type ThProps, Tr, type TrProps };
+export { BulkBar, type BulkBarProps, CellStrong, CellSub, type CellSubProps, ExpandToggle, type ExpandToggleProps, Highlighted, type HighlightedProps, Mark, type MarkProps, RowAction, type RowActionProps, RowActions, type RowActionsProps, type SortDirection, Table, type TableDensity, type TableProps, TableWrap, type TableWrapProps, Td, type TdProps, Th, type ThProps, Tr, type TrProps };

package/dist/components/Table.js

@@ -3,9 +3,11 @@ import { forwardRef } from "react";
 import { cx } from "../cx.js";
 import { highlightSegments } from "../table-engine.js";
 import { BusyBar } from "./BusyBar.js";
+import { TableOverflowProbe } from "./TableOverflowProbe.js";
 const TableWrap = forwardRef(function TableWrap2({ announcement, refreshing, children, className, ...props }, ref) {
   return /* @__PURE__ */ jsxs("div", { ref, className: cx("uix-table-wrap", className), "aria-busy": refreshing || void 0, ...props, children: [
     refreshing !== void 0 && /* @__PURE__ */ jsx(BusyBar, { busy: refreshing }),
+    /* @__PURE__ */ jsx(TableOverflowProbe, {}),
     announcement != null && /* @__PURE__ */ jsx("div", { role: "status", className: "uix-visually-hidden", children: announcement }),
     children
   ] });
@@ -100,8 +102,8 @@ function ExpandToggle({ expanded, controls, expandLabel = "Expand row", collapse
 function CellStrong({ children, className, ...props }) {
   return /* @__PURE__ */ jsx("span", { className: cx("uix-cell-strong", className), ...props, children });
 }
-function CellSub({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx("span", { className: cx("uix-cell-sub", className), ...props, children });
+function CellSub({ tabular, children, className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { className: cx("uix-cell-sub", tabular && "uix-cell-sub--tabular", className), ...props, children });
 }
 function Mark({ children, className, ...props }) {
   return /* @__PURE__ */ jsx("mark", { className: cx("uix-mark", className), ...props, children });