@tensor_1/react 2.48.0 → 2.49.1

package/dist/components/RelationshipGraphLayered.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { boundRelationshipGraph, edgeLabelSize, layeredNeighbor, layoutLayeredGraph, separateEdgeLabels } from "../relationship-graph-model.js";
 import { cx } from "../cx.js";
 import { Maximize2Icon, Minimize2Icon, MinusIcon, PlusIcon, RotateCcwIcon, ScanIcon } from "../icons/components.js";
@@ -9,6 +9,7 @@ import { prefersReducedMotion } from "../hooks/useReducedMotion.js";
 import { EquivalentRelationshipList } from "./RelationshipGraphList.js";
 import { Tooltip } from "./Tooltip.js";
 const EMPTY_IDS = /* @__PURE__ */ new Set();
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
 const MIN_ZOOM = 0.4;
 const MAX_ZOOM = 1.5;
 const READABLE_ZOOM = 0.75;
@@ -17,8 +18,13 @@ const PAN_STEP = 64;
 const FOCUS_MARGIN = 24;
 const DESCRIBED_RELATIONS = 5;
 const HINT_MS = 1600;
+const LABEL_FONT_PX = 12.5;
+const MIN_LABEL_PX = 11;
+const LABEL_CHIP_PAD_X = 6;
+const LABEL_CHIP_PAD_Y = 2;
 const NAV_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End"];
 const clampZoom = (zoom) => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoom));
+const footerGutter = (viewport, footer) => footer && footer.parentElement === viewport ? Math.min(footer.offsetHeight, viewport.clientHeight) : 0;
 function initialView(layout, size) {
   if (size.width === 0 || size.height === 0 || layout.width === 0) return { x: 0, y: 0, zoom: 1 };
   const fit = Math.min(size.width / layout.width, size.height / layout.height);
@@ -91,6 +97,7 @@ function LayeredRelationshipGraph({
   const itemRefs = useRef(/* @__PURE__ */ new Map());
   const fullscreenButtonRef = useRef(null);
   const footerRef = useRef(null);
+  const edgesRef = useRef(null);
   const [size, setSize] = useState({ width: 0, height: 0 });
   const [view, setView] = useState({ x: 0, y: 0, zoom: 1 });
   const [animate, setAnimate] = useState(false);
@@ -123,13 +130,14 @@ function LayeredRelationshipGraph({
   useEffect(() => {
     const element = viewportRef.current;
     if (!element) return;
-    const measure = () => setSize({ width: element.clientWidth, height: element.clientHeight });
+    const measure = () => setSize({ width: element.clientWidth, height: Math.max(0, element.clientHeight - footerGutter(element, footerRef.current)) });
     measure();
     if (typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(measure);
     observer.observe(element);
+    if (footerRef.current) observer.observe(footerRef.current);
     return () => observer.disconnect();
-  }, []);
+  }, [compact]);
   useEffect(() => {
     if (size.width === 0) return;
     const key = `${layout.rootId ?? ""}`;
@@ -382,42 +390,105 @@ function LayeredRelationshipGraph({
     return edge.autoLabel || activeIds.has(edge.source) || activeIds.has(edge.target) || focusWithinId === edge.source || focusWithinId === edge.target;
   };
   const viewportStyle = height !== void 0 ? { "--uix-relationship-graph-height": height } : {};
+  const zoomStep = Math.min(1, Math.max(0.05, Math.floor(view.zoom * 20) / 20));
   const stageStyle = {
     width: layout.width,
     height: layout.height,
     transform: `translate(${view.x}px, ${view.y}px) scale(${view.zoom})`
   };
   const zoomPercent = Math.round(view.zoom * 100);
-  const labelPlacement = useMemo(() => separateEdgeLabels(layout.edges.filter(showLabel).map((edge) => {
-    const lines = edge.kind === "cycle" ? [...edge.labelLines, labels.cycle] : edge.labelLines;
-    return { id: edge.id, x: edge.labelX, y: edge.labelY, ...edgeLabelSize(lines) };
-  })), [layout, edgeLabels, activeIds, focusWithinId, labels]);
+  const labelPlacement = useMemo(() => {
+    const shown = layout.edges.filter(showLabel);
+    const count = /* @__PURE__ */ new Map();
+    for (const edge of shown) count.set(edge.label ?? "", (count.get(edge.label ?? "") ?? 0) + 1);
+    const scales = /* @__PURE__ */ new Map();
+    const boxes = [];
+    for (const edge of shown) {
+      const lines = edge.kind === "cycle" ? [...edge.labelLines, labels.cycle] : edge.labelLines;
+      const size2 = edgeLabelSize(lines);
+      const scale = Math.max(1, Math.min(1 / zoomStep, edge.labelRoom / size2.width));
+      if (edgeLabels !== "always" && LABEL_FONT_PX * scale * zoomStep < MIN_LABEL_PX - 0.01) continue;
+      scales.set(edge.id, scale);
+      const priority = (activeIds.has(edge.source) || activeIds.has(edge.target) ? 4 : 0) + (edge.tone || edge.emphasis ? 2 : 0) + (count.get(edge.label ?? "") === 1 ? 1 : 0);
+      boxes.push({ id: edge.id, x: edge.labelX, y: edge.labelY, width: size2.width * scale, height: size2.height * scale, priority });
+    }
+    const placed = separateEdgeLabels(boxes, { maxShift: 48 / zoomStep, obstacles: layout.items });
+    return new Map([...placed].map(([id, place]) => [id, { ...place, scale: scales.get(id) ?? 1 }]));
+  }, [layout, edgeLabels, activeIds, focusWithinId, labels, zoomStep]);
   const live = useRef({ activate, onItemKeyDown, onFocusChange, toggleCluster, onSelect });
   live.current = { activate, onItemKeyDown, onFocusChange, toggleCluster, onSelect };
-  const edgeLayer = useMemo(() => /* @__PURE__ */ jsx("svg", { className: "uix-relationship-graph__edges", width: layout.width, height: layout.height, "aria-hidden": "true", focusable: "false", children: layout.edges.map((edge) => ({ edge, active: activeIds.has(edge.source) || activeIds.has(edge.target) || edge.edgeIds.some((id) => highlightedEdgeIds.has(id)) })).sort((a, b) => Number(a.active) - Number(b.active)).map(({ edge, active }) => {
-    const angle = edge.arrowAngle * 180 / Math.PI;
-    const placed = labelPlacement.get(edge.id);
-    return /* @__PURE__ */ jsxs(
-      "g",
-      {
-        className: "uix-relationship-graph__link",
-        "data-kind": edge.kind,
-        "data-bus": edge.bus || void 0,
-        "data-active": active || void 0,
-        "data-emphasis": edge.emphasis || void 0,
-        "data-conflicted": edge.edgeIds.some((id) => conflictedEdgeIds.has(id)) || void 0,
-        "data-dimmed": dimmedNodeIds.has(edge.source) && dimmedNodeIds.has(edge.target) || void 0,
-        "data-variant": edge.variant === "dashed" ? "dashed" : void 0,
-        "data-tone": edge.tone,
-        children: [
-          /* @__PURE__ */ jsx("path", { d: edge.path }),
-          edge.arrow !== "none" && /* @__PURE__ */ jsx("polygon", { points: arrowPoints, transform: `translate(${edge.arrowX} ${edge.arrowY}) rotate(${angle})` }),
-          placed && !placed.hidden && /* @__PURE__ */ jsx("text", { x: placed.x, y: placed.y, textAnchor: "middle", dominantBaseline: "middle", "data-moved": placed.y !== edge.labelY || void 0, children: (edge.kind === "cycle" ? [...edge.labelLines, labels.cycle] : edge.labelLines).map((line, index, lines) => /* @__PURE__ */ jsx("tspan", { x: placed.x, dy: index === 0 ? `${-(lines.length - 1) * 0.55}em` : "1.1em", children: line }, index)) })
-        ]
-      },
-      edge.id
-    );
-  }) }), [layout, activeIds, highlightedEdgeIds, conflictedEdgeIds, dimmedNodeIds, labelPlacement, labels]);
+  const edgeLayer = useMemo(() => {
+    const ordered = layout.edges.map((edge) => ({ edge, active: activeIds.has(edge.source) || activeIds.has(edge.target) || edge.edgeIds.some((id) => highlightedEdgeIds.has(id)) })).sort((a, b) => Number(a.active) - Number(b.active));
+    const dimmed = (edge) => dimmedNodeIds.has(edge.source) && dimmedNodeIds.has(edge.target) || void 0;
+    return /* @__PURE__ */ jsxs("svg", { ref: edgesRef, className: "uix-relationship-graph__edges", width: layout.width, height: layout.height, "aria-hidden": "true", focusable: "false", children: [
+      ordered.map(({ edge, active }) => {
+        const angle = edge.arrowAngle * 180 / Math.PI;
+        return /* @__PURE__ */ jsxs(
+          "g",
+          {
+            className: "uix-relationship-graph__link",
+            "data-edge": edge.id,
+            "data-kind": edge.kind,
+            "data-bus": edge.bus || void 0,
+            "data-active": active || void 0,
+            "data-emphasis": edge.emphasis || void 0,
+            "data-conflicted": edge.edgeIds.some((id) => conflictedEdgeIds.has(id)) || void 0,
+            "data-dimmed": dimmed(edge),
+            "data-variant": edge.variant === "dashed" ? "dashed" : void 0,
+            "data-tone": edge.tone,
+            children: [
+              /* @__PURE__ */ jsx("path", { d: edge.path }),
+              edge.arrow !== "none" && /* @__PURE__ */ jsx("polygon", { points: arrowPoints, transform: `translate(${edge.arrowX} ${edge.arrowY}) rotate(${angle})` })
+            ]
+          },
+          edge.id
+        );
+      }),
+      /* @__PURE__ */ jsx("g", { className: "uix-relationship-graph__edge-labels", children: ordered.map(({ edge, active }) => {
+        const placed = labelPlacement.get(edge.id);
+        if (!placed || placed.hidden) return null;
+        const lines = edge.kind === "cycle" ? [...edge.labelLines, labels.cycle] : edge.labelLines;
+        const chip = edgeLabelSize(lines);
+        return /* @__PURE__ */ jsxs(
+          "g",
+          {
+            className: "uix-relationship-graph__edge-label",
+            "data-edge": edge.id,
+            "data-active": active || void 0,
+            "data-dimmed": dimmed(edge),
+            "data-tone": edge.tone,
+            "data-moved": placed.y !== edge.labelY || void 0,
+            style: placed.scale !== 1 ? { "--uix-graph-label-scale": placed.scale } : void 0,
+            children: [
+              /* @__PURE__ */ jsx("rect", { x: placed.x - chip.width / 2, y: placed.y - chip.height / 2, width: chip.width, height: chip.height, rx: 4 }),
+              /* @__PURE__ */ jsx("text", { x: placed.x, y: placed.y, textAnchor: "middle", dominantBaseline: "central", children: lines.map((line, index) => /* @__PURE__ */ jsx("tspan", { x: placed.x, dy: index === 0 ? `${-(lines.length - 1) * 0.6}em` : "1.2em", children: line }, index)) })
+            ]
+          },
+          edge.id
+        );
+      }) })
+    ] });
+  }, [layout, activeIds, highlightedEdgeIds, conflictedEdgeIds, dimmedNodeIds, labelPlacement, labels]);
+  useIsomorphicLayoutEffect(() => {
+    const svg = edgesRef.current;
+    if (!svg) return;
+    for (const group of Array.from(svg.querySelectorAll(".uix-relationship-graph__edge-label"))) {
+      const text = group.querySelector("text");
+      const rect = group.querySelector("rect");
+      if (!text || !rect || typeof text.getBBox !== "function") continue;
+      let box;
+      try {
+        box = text.getBBox();
+      } catch {
+        continue;
+      }
+      if (box.width === 0) continue;
+      rect.setAttribute("x", String(box.x - LABEL_CHIP_PAD_X));
+      rect.setAttribute("y", String(box.y - LABEL_CHIP_PAD_Y));
+      rect.setAttribute("width", String(box.width + 2 * LABEL_CHIP_PAD_X));
+      rect.setAttribute("height", String(box.height + 2 * LABEL_CHIP_PAD_Y));
+    }
+  }, [edgeLayer]);
   const itemLayer = useMemo(() => /* @__PURE__ */ jsxs(Fragment, { children: [
     layout.columns.map((column) => /* @__PURE__ */ jsxs(
       "div",
@@ -561,6 +632,7 @@ function LayeredRelationshipGraph({
             onPointerMove,
             onPointerUp: onPointerEnd,
             onPointerCancel: onPointerEnd,
+            onDragStart: (event) => event.preventDefault(),
             ...compact ? {
               tabIndex: 0,
               role: "group",
@@ -597,7 +669,10 @@ function LayeredRelationshipGraph({
             ]
           }
         ),
-        legend.length > 0 && /* @__PURE__ */ jsx("ul", { className: "uix-relationship-graph__legend", "aria-label": labels.legend, children: legend.map((entry) => /* @__PURE__ */ jsx("li", { "data-type": entry.id, "data-tone": entry.tone, "data-shape": entry.shape, "data-variant": entry.variant, children: entry.label }, entry.id)) }),
+        legend.length > 0 && /* @__PURE__ */ jsx("ul", { className: "uix-relationship-graph__legend", "aria-label": labels.legend, children: legend.map((entry) => /* @__PURE__ */ jsxs("li", { "data-type": entry.id, "data-tone": entry.tone, "data-shape": entry.shape, "data-variant": entry.variant, children: [
+          /* @__PURE__ */ jsx("span", { className: "uix-relationship-graph__legend-mark", "aria-hidden": "true" }),
+          entry.label
+        ] }, entry.id)) }),
         listLayer
       ]
     }

package/dist/components/SearchSuggest.js

@@ -93,6 +93,13 @@ function SearchSuggest({
   const showEmpty = !!state?.empty && shownError == null;
   const showIdle = idle != null && itemCount === 0 && !loading && error == null && !showEmpty;
   const visible = open && !disabled && (itemCount > 0 || showLoading || showEmpty || showIdle || shownError != null);
+  const [entered, setEntered] = useState(false);
+  const wasVisible = useRef(false);
+  useEffect(() => {
+    if (!open) setEntered(false);
+    else if (!visible && wasVisible.current) setEntered(true);
+    wasVisible.current = visible;
+  }, [open, visible]);
   const optionId = (index) => `${id}-option-${index}`;
   useEffect(() => {
     if (!visible || active < 0) return;
@@ -258,7 +265,7 @@ function SearchSuggest({
             !showSpinner && !value && !focused && shortcutHint && /* @__PURE__ */ jsx("kbd", { className: "uix-kbd", "aria-hidden": "true", children: shortcutHint })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { ref: popupRef, className: "uix-search-suggest__popup", "data-strategy": floating ? "fixed" : void 0, hidden: !visible, children: [
+        /* @__PURE__ */ jsxs("div", { ref: popupRef, className: "uix-search-suggest__popup", "data-strategy": floating ? "fixed" : void 0, "data-settled": entered ? "" : void 0, hidden: !visible, children: [
           heading && options.length > 0 && /* @__PURE__ */ jsxs("div", { className: "uix-search-suggest__header", children: [
             /* @__PURE__ */ jsx("span", { className: "uix-search-suggest__heading", id: headingId, children: heading }),
             headingAction && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-search-suggest__header-action", onMouseDown: keepFocus, onClick: headingAction.onSelect, children: headingAction.label })

package/dist/components/Segmented.js

@@ -1,13 +1,16 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useMemo, useRef } from "react";
 import { cx } from "../cx.js";
 import { renderUixLink } from "../link.js";
+import { useSlidingIndicator } from "../hooks/useSlidingIndicator.js";
 const SegmentedCtx = createContext({});
 const OPTION = ".uix-segmented__option";
 function Segmented({ value, onChange, selection = "toggle", renderLink, children, className, onKeyDown, ...props }) {
   const ref = useRef(null);
   const contextValue = useMemo(() => ({ value, onChange, selection, renderLink }), [value, onChange, selection, renderLink]);
+  const indicatorRef = useRef(null);
+  useSlidingIndicator(ref, indicatorRef, `${OPTION}:is([aria-pressed="true"], [aria-checked="true"])`);
   useEffect(() => {
     const group = ref.current;
     if (!group || selection === "link") return;
@@ -59,7 +62,10 @@ function Segmented({ value, onChange, selection = "toggle", renderLink, children
   if (selection === "link") {
     return /* @__PURE__ */ jsx(SegmentedCtx.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("nav", { className: cx("uix-segmented-nav", className), onKeyDown, ...props, children: /* @__PURE__ */ jsx("ul", { className: "uix-segmented", role: "list", children }) }) });
   }
-  return /* @__PURE__ */ jsx(SegmentedCtx.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref, role: selection === "radio" ? "radiogroup" : "group", className: cx("uix-segmented", className), onKeyDown: handleKeyDown, ...props, children }) });
+  return /* @__PURE__ */ jsx(SegmentedCtx.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref, role: selection === "radio" ? "radiogroup" : "group", className: cx("uix-segmented", className), onKeyDown: handleKeyDown, ...props, children: [
+    children,
+    /* @__PURE__ */ jsx("span", { ref: indicatorRef, className: "uix-segmented__indicator", "aria-hidden": "true", hidden: true })
+  ] }) });
 }
 function SegmentedOption({
   value,

package/dist/components/Select.js

@@ -4,6 +4,7 @@ import { Children, Fragment as Fragment2, forwardRef, isValidElement, useCallbac
 import { cx } from "../cx.js";
 import { useUixLabels } from "../labels-context.js";
 import { useAnchoredPosition, zoomOf } from "../hooks/useAnchoredPosition.js";
+import { markKeyOpened, watchInputModality } from "../motion.js";
 import { Drawer } from "./Drawer.js";
 import {
   buildSelectModel,
@@ -542,18 +543,23 @@ const Select = forwardRef(function Select2(props, forwardedRef) {
       const room = Math.max(r.top, window.innerHeight - r.bottom) / zoom - OFFSET - EDGE;
       popup.style.minWidth = `${Math.round(r.width / zoom)}px`;
       popup.style.maxHeight = `${Math.max(96, Math.min(MAX_HEIGHT, Math.floor(room)))}px`;
+      if (!isOpen()) markKeyOpened(popup);
       try {
         if (!isOpen()) popup.showPopover();
       } catch {
       }
       if (isSearchable) searchRef.current?.focus({ preventScroll: true });
     } else {
+      if (isOpen()) markKeyOpened(popup);
       try {
         if (isOpen()) popup.hidePopover();
       } catch {
       }
     }
   }, [showing, isSearchable]);
+  useEffect(() => {
+    watchInputModality();
+  }, []);
   useAnchoredPosition(triggerRef, popupRef, { open: showing, placement, offset: OFFSET, padding: EDGE });
   useEffect(() => {
     if (open && mode === "sheet") (isSearchable ? searchRef.current : listRef.current)?.focus({ preventScroll: true });

package/dist/components/SortableList.d.ts

@@ -36,8 +36,8 @@ interface SortableListProps<T> extends Omit<HTMLAttributes<HTMLUListElement>, 'c
  * 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 places
- * the row under the pointer with no animation. Shares its order model with `ViewMenu`,
+ * 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;

package/dist/components/SortableList.js

@@ -6,6 +6,7 @@ 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",
@@ -65,6 +66,16 @@ function SortableList({
     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) => {
@@ -74,8 +85,10 @@ function SortableList({
     drop: (id) => {
       const begin = dragStart.current;
       dragStart.current = null;
-      if (begin && !sameOrder(begin, order)) commit(order, id);
-      else setDraft(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;
@@ -95,7 +108,7 @@ function SortableList({
       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, onKeyDown: (event) => onRowKeyDown(event, id), children: [
+      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",
           {

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/Tabs.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Children, createContext, isValidElement, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
+import { useSlidingIndicator } from "../hooks/useSlidingIndicator.js";
 const TabsCtx = createContext({});
 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;
@@ -18,6 +19,9 @@ function Tabs({
 }) {
   const baseId = useId();
   const listRef = useRef(null);
+  const indicatorRef = useRef(null);
+  const sliding = variant !== "enclosed";
+  useSlidingIndicator(listRef, indicatorRef, sliding ? '[role="tab"][aria-selected="true"]' : ":not(*)");
   const contextValue = useMemo(() => ({ value, onChange, baseId }), [value, onChange, baseId]);
   const scroll = overflow === "scroll";
   const [hidden, setHidden] = useState({ start: false, end: false });
@@ -101,7 +105,7 @@ function Tabs({
     target.focus();
     if (activation === "automatic") target.click();
   };
-  const list = /* @__PURE__ */ jsx(
+  const list = /* @__PURE__ */ jsxs(
     "div",
     {
       ...listProps,
@@ -109,7 +113,10 @@ function Tabs({
       role: "tablist",
       className: cx("uix-tabs", `uix-tabs--${variant}`, scroll && "uix-tabs--scroll", className),
       onKeyDown,
-      children: tabs
+      children: [
+        tabs,
+        sliding && /* @__PURE__ */ jsx("span", { ref: indicatorRef, className: "uix-tabs__indicator", "aria-hidden": "true", hidden: true })
+      ]
     }
   );
   return /* @__PURE__ */ jsxs(TabsCtx.Provider, { value: contextValue, children: [

package/dist/components/Toast.d.ts

@@ -15,7 +15,7 @@ interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     onClose?: () => void;
     leaving?: boolean;
 }
-declare function Toast({ title, message, tone, icon, action, onClose, leaving, dismissLabel: dismissLabelProp, className, ...props }: ToastProps): react.JSX.Element;
+declare function Toast({ title, message, tone, icon, action, onClose, leaving, dismissLabel: dismissLabelProp, className, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...props }: ToastProps): react.JSX.Element;
 interface ToasterProps extends HTMLAttributes<HTMLDivElement> {
     /** TENSOR RX-125 (UIX-04): translatable; English default. */
     regionLabel?: string;