@tensor_1/react 2.15.0 → 2.17.0

package/dist/components/Kanban.d.ts

@@ -2,20 +2,32 @@ import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
 interface KanbanProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Polite live-region text for keyboard moves (UIX-A11Y-2). `onMove` implementations
+     * should set it, e.g. "Card X moved to Doing, position 2 of 4".
+     */
+    announcement?: string;
     children?: ReactNode;
 }
-declare function Kanban({ children, className, ...props }: KanbanProps): react.JSX.Element;
+declare function Kanban({ announcement, children, className, ...props }: KanbanProps): react.JSX.Element;
 interface KanbanColumnProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: ReactNode;
     count?: number;
     children?: ReactNode;
 }
 declare function KanbanColumn({ title, count, children, className, ...props }: KanbanColumnProps): react.JSX.Element;
+type KanbanMoveDirection = 'up' | 'down' | 'left' | 'right';
 interface KanbanCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: ReactNode;
     meta?: ReactNode;
+    /**
+     * Keyboard move contract (UIX-A11Y-2): when provided, Alt+Arrow on the focused card
+     * calls it — the same accelerator convention as NavFavourites row moves. Pair with
+     * the board-level `announcement` so SR users hear the result.
+     */
+    onMove?: (dir: KanbanMoveDirection) => void;
     children?: ReactNode;
 }
-declare function KanbanCard({ title, meta, children, className, ...props }: KanbanCardProps): react.JSX.Element;
+declare function KanbanCard({ title, meta, children, className, onMove, onKeyDown, ...props }: KanbanCardProps): react.JSX.Element;
 
-export { Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanProps };
+export { Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanMoveDirection, type KanbanProps };

package/dist/components/Kanban.js

@@ -1,23 +1,55 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { cx } from "../cx.js";
-function Kanban({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cx("uix-kanban", className), ...props, children });
+function Kanban({ announcement, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-kanban", className), ...props, children: [
+    announcement != null && /* @__PURE__ */ jsx("div", { role: "status", className: "uix-visually-hidden", children: announcement }),
+    children
+  ] });
 }
 function KanbanColumn({ title, count, children, className, ...props }) {
+  const headId = useId();
+  const hasHead = title != null || count != null;
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-kanban__col", className), ...props, children: [
-    (title != null || count != null) && /* @__PURE__ */ jsxs("div", { className: "uix-kanban__head", children: [
+    hasHead && /* @__PURE__ */ jsxs("div", { className: "uix-kanban__head", id: headId, children: [
       title,
       count != null && /* @__PURE__ */ jsx("span", { className: "uix-kanban__count", children: count })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "uix-kanban__body", children })
+    /* @__PURE__ */ jsx("div", { className: "uix-kanban__body", role: "list", "aria-labelledby": hasHead ? headId : void 0, children })
   ] });
 }
-function KanbanCard({ title, meta, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx("uix-kanban__card", className), ...props, children: [
-    title && /* @__PURE__ */ jsx("div", { className: "uix-kanban__card-title", children: title }),
-    meta && /* @__PURE__ */ jsx("div", { className: "uix-kanban__card-meta", children: meta }),
-    children
-  ] });
+const MOVE_KEYS = {
+  ArrowUp: "up",
+  ArrowDown: "down",
+  ArrowLeft: "left",
+  ArrowRight: "right"
+};
+function KanbanCard({ title, meta, children, className, onMove, onKeyDown, ...props }) {
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (!onMove || !e.altKey || e.defaultPrevented) return;
+    const dir = MOVE_KEYS[e.key];
+    if (dir) {
+      e.preventDefault();
+      onMove(dir);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "listitem",
+      tabIndex: 0,
+      className: cx("uix-kanban__card", className),
+      onKeyDown: handleKeyDown,
+      ...props,
+      children: [
+        title && /* @__PURE__ */ jsx("div", { className: "uix-kanban__card-title", children: title }),
+        meta && /* @__PURE__ */ jsx("div", { className: "uix-kanban__card-meta", children: meta }),
+        children
+      ]
+    }
+  );
 }
 export {
   Kanban,

package/dist/components/Meter.d.ts

@@ -8,8 +8,10 @@ interface MeterProps extends HTMLAttributes<HTMLDivElement> {
     value?: number;
     /** Threshold tone applied via `data-tone` on the fill element. `success` is the implicit default (no attribute). */
     tone?: MeterTone;
+    /** Accessible name — rendered as `aria-label` (an explicit `aria-label` prop wins). */
+    label?: string;
 }
 /** Horizontal utilization / threshold bar backed by `.uix-meter`. */
-declare function Meter({ value, tone, className, ...props }: MeterProps): react.JSX.Element;
+declare function Meter({ value, tone, label, className, ...props }: MeterProps): react.JSX.Element;
 
 export { Meter, type MeterProps, type MeterTone };

package/dist/components/Meter.js

@@ -1,6 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { cx } from "../cx.js";
-function Meter({ value = 0, tone, className, ...props }) {
+const toneText = {
+  warning: "warning",
+  danger: "critical",
+  attention: "needs attention",
+  overdue: "overdue"
+};
+function Meter({ value = 0, tone, label, className, ...props }) {
   const pct = Math.max(0, Math.min(100, value));
   return /* @__PURE__ */ jsx(
     "div",
@@ -9,6 +15,8 @@ function Meter({ value = 0, tone, className, ...props }) {
       "aria-valuenow": pct,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
+      "aria-valuetext": tone && tone !== "success" ? `${pct}%, ${toneText[tone]}` : void 0,
+      "aria-label": label,
       className: cx("uix-meter", className),
       ...props,
       children: /* @__PURE__ */ jsx(

package/dist/components/Modal.d.ts

@@ -1,17 +1,16 @@
 import * as react from 'react';
-import { ReactNode, CSSProperties } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 
-interface ModalProps {
+interface ModalProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
     open: boolean;
     onClose?: () => void;
     title?: ReactNode;
     children?: ReactNode;
     footer?: ReactNode;
-    className?: string;
-    style?: CSSProperties;
+    /** Accessible name for the close button (default "Close dialog"). */
     closeLabel?: string;
     role?: 'dialog' | 'alertdialog';
 }
-declare function Modal({ open, onClose, title, children, footer, className, style, closeLabel, role }: ModalProps): react.JSX.Element;
+declare function Modal({ open, onClose, title, children, footer, className, closeLabel, role, ...rest }: ModalProps): react.JSX.Element;
 
 export { Modal, type ModalProps };

package/dist/components/Modal.js

@@ -4,12 +4,12 @@ import { useId } from "react";
 import { cx } from "../cx.js";
 import { useDialog } from "../hooks/useDialog.js";
 const CloseIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
-function Modal({ open, onClose, title, children, footer, className, style, closeLabel = "Close dialog", role = "dialog" }) {
-  const ref = useDialog(open);
+function Modal({ open, onClose, title, children, footer, className, closeLabel = "Close dialog", role = "dialog", ...rest }) {
+  const ref = useDialog(open, onClose);
   const titleId = useId();
-  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-dialog", className), style, onClose, role, "aria-labelledby": title != null ? titleId : void 0, children: [
+  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-dialog", className), role, "aria-labelledby": title != null ? titleId : void 0, ...rest, children: [
     (title != null || onClose) && /* @__PURE__ */ jsxs("div", { className: "uix-dialog__header", children: [
-      title && /* @__PURE__ */ jsx("div", { id: titleId, className: "uix-dialog__title", children: title }),
+      title && /* @__PURE__ */ jsx("h2", { className: "uix-dialog__title", id: titleId, children: title }),
       onClose && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-dialog__close", onClick: onClose, "aria-label": closeLabel, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
     ] }),
     children != null && /* @__PURE__ */ jsx("div", { className: "uix-dialog__body", children }),

package/dist/components/NavFavourites.js

@@ -66,6 +66,7 @@ function NavFavourites({
   const regionId = useId();
   const headerRef = useRef(null);
   const regionRef = useRef(null);
+  const [announcement, setAnnouncement] = useState("");
   const focusAfterRef = useRef(null);
   const triggerRefs = useRef(/* @__PURE__ */ new Map());
   const order = useMemo(() => items.map((item) => item.id), [items]);
@@ -95,6 +96,8 @@ function NavFavourites({
     if (it === void 0) return;
     reordered.splice(next, 0, it);
     focusAfterRef.current = id;
+    const moved = items.find((i) => i.id === id);
+    if (moved) setAnnouncement(`${moved.label} moved to position ${next + 1} of ${order.length}`);
     onReorder(reordered);
   }, [onReorder, order]);
   const remove = useCallback((id) => {
@@ -108,6 +111,7 @@ function NavFavourites({
     else triggerRefs.current.delete(id);
   }, []);
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-favourites", className), children: [
+    /* @__PURE__ */ jsx("div", { role: "status", className: "uix-visually-hidden", children: announcement }),
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -189,6 +193,12 @@ const FavouriteRow = memo(function FavouriteRow2({
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
       menuItems[(currentIdx - 1 + menuItems.length) % menuItems.length]?.focus();
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      menuItems[0]?.focus();
+    } else if (e.key === "End") {
+      e.preventDefault();
+      menuItems[menuItems.length - 1]?.focus();
     } else if (e.key === "Escape") {
       e.preventDefault();
       closeAndReturnFocus();
@@ -247,6 +257,7 @@ const FavouriteRow = memo(function FavouriteRow2({
               {
                 id: menuId,
                 role: "menu",
+                "aria-label": optionsTemplate.replace("{label}", item.label),
                 onKeyDown: onMenuKeyDown,
                 className: "uix-favourites__menu",
                 children: actions.map((action, i) => /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsx(

package/dist/components/PageHeader.d.ts

@@ -4,6 +4,8 @@ import { HTMLAttributes, ReactNode } from 'react';
 interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     eyebrow?: ReactNode;
     title: ReactNode;
+    /** Heading level for the title — drop to `h2` when the page already owns an `h1` (UIX-A11Y-4). */
+    as?: 'h1' | 'h2';
     /** Supporting copy under the title. */
     subtitle?: ReactNode;
     /** Right-aligned action area (buttons, menus). */
@@ -13,6 +15,6 @@ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
  * Page header — eyebrow / title / subtitle + actions row, over `.uix-page-header`.
  * The hairline + breathing room below come from the component CSS.
  */
-declare function PageHeader({ eyebrow, title, subtitle, actions, className, ...props }: PageHeaderProps): react.JSX.Element;
+declare function PageHeader({ eyebrow, title, subtitle, actions, as: TitleTag, className, ...props }: PageHeaderProps): react.JSX.Element;
 
 export { PageHeader, type PageHeaderProps };

package/dist/components/PageHeader.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
-function PageHeader({ eyebrow, title, subtitle, actions, className, ...props }) {
+function PageHeader({ eyebrow, title, subtitle, actions, as: TitleTag = "h1", className, ...props }) {
   return /* @__PURE__ */ jsxs("header", { className: cx("uix-page-header", className), ...props, children: [
     /* @__PURE__ */ jsxs("div", { className: "uix-page-header__titles", children: [
       eyebrow != null && /* @__PURE__ */ jsx("div", { className: "uix-page-header__eyebrow", children: eyebrow }),
-      /* @__PURE__ */ jsx("h1", { className: "uix-page-header__title", children: title }),
+      /* @__PURE__ */ jsx(TitleTag, { className: "uix-page-header__title", children: title }),
       subtitle != null && /* @__PURE__ */ jsx("p", { className: "uix-page-header__subtitle", children: subtitle })
     ] }),
     actions != null && /* @__PURE__ */ jsx("div", { className: "uix-page-header__actions", children: actions })

package/dist/components/Peek.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 
-interface PeekProps {
+interface PeekProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
     open: boolean;
     onClose?: () => void;
     title?: ReactNode;
@@ -10,8 +10,7 @@ interface PeekProps {
     onNavPrev?: () => void;
     onNavNext?: () => void;
     hint?: string;
-    className?: string;
 }
-declare function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, className }: PeekProps): react.JSX.Element;
+declare function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, className, onClick, ...rest }: PeekProps): react.JSX.Element;
 
 export { Peek, type PeekProps };

package/dist/components/Peek.js

@@ -1,27 +1,30 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { cx } from "../cx.js";
 import { useDialog } from "../hooks/useDialog.js";
 const CloseIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
 const ChevronUp = () => /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 8l4-4 4 4" }) });
 const ChevronDown = () => /* @__PURE__ */ jsx("svg", { width: "12", height: "12", 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 Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, className }) {
-  const ref = useDialog(open);
+function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, className, onClick, ...rest }) {
+  const ref = useDialog(open, onClose);
   const hasNav = onNavPrev != null || onNavNext != null;
+  const titleId = useId();
   const onBackdropClick = (e) => {
+    onClick?.(e);
     if (!onClose || e.target !== e.currentTarget) return;
     const r = e.currentTarget.getBoundingClientRect();
     if (r.width === 0) return;
     const outside = e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom;
     if (outside) onClose();
   };
-  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-peek", className), onClose, onClick: onBackdropClick, children: [
+  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-peek", className), "aria-labelledby": title ? titleId : void 0, ...rest, onClick: onBackdropClick, children: [
     /* @__PURE__ */ jsxs("div", { className: "uix-peek__header", children: [
       hasNav && /* @__PURE__ */ jsxs("div", { className: "uix-peek__nav", children: [
-        /* @__PURE__ */ jsx("button", { className: "uix-peek__navbtn", onClick: onNavPrev, disabled: !onNavPrev, "aria-label": "Previous record", children: /* @__PURE__ */ jsx(ChevronUp, {}) }),
-        /* @__PURE__ */ jsx("button", { className: "uix-peek__navbtn", onClick: onNavNext, disabled: !onNavNext, "aria-label": "Next record", children: /* @__PURE__ */ jsx(ChevronDown, {}) })
+        /* @__PURE__ */ jsx("button", { className: "uix-peek__navbtn", onClick: () => onNavPrev?.(), "aria-disabled": onNavPrev ? void 0 : true, "aria-label": "Previous record", children: /* @__PURE__ */ jsx(ChevronUp, {}) }),
+        /* @__PURE__ */ jsx("button", { className: "uix-peek__navbtn", onClick: () => onNavNext?.(), "aria-disabled": onNavNext ? void 0 : true, "aria-label": "Next record", children: /* @__PURE__ */ jsx(ChevronDown, {}) })
       ] }),
-      title && /* @__PURE__ */ jsx("div", { className: "uix-peek__title", children: title }),
+      title && /* @__PURE__ */ jsx("h2", { className: "uix-peek__title", id: titleId, children: title }),
       hint && /* @__PURE__ */ jsx("span", { className: "uix-peek__hint", children: hint }),
       onClose && /* @__PURE__ */ jsx("button", { className: "uix-peek__close", onClick: onClose, "aria-label": "Close preview", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
     ] }),

package/dist/components/Pipeline.d.ts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type PipelineStageState = 'pending' | 'waiting' | 'active' | 'current' | 'running' | 'done' | 'complete' | 'blocked' | 'failed' | 'error';
+interface PipelineProps extends HTMLAttributes<HTMLOListElement> {
+    detailed?: boolean;
+    children?: ReactNode;
+}
+/** Ordered progress rail. Consumers own workflow meaning; UIx owns stage semantics and presentation. */
+declare function Pipeline({ detailed, children, className, tabIndex, ...props }: PipelineProps): react.JSX.Element;
+interface PipelineStageProps extends Omit<HTMLAttributes<HTMLLIElement>, 'title'> {
+    label: ReactNode;
+    state?: PipelineStageState;
+    stateLabel?: ReactNode;
+    description?: ReactNode;
+    meta?: ReactNode;
+    marker?: ReactNode;
+    detailed?: boolean;
+    /** Marks the stage as the current position independently of its operational state. */
+    current?: boolean;
+}
+/** One pipeline stage. `stateLabel` keeps status explicit instead of relying on colour. */
+declare function PipelineStage({ label, state, stateLabel, description, meta, marker, detailed, current: currentProp, className, ...props }: PipelineStageProps): react.JSX.Element;
+
+export { Pipeline, type PipelineProps, PipelineStage, type PipelineStageProps, type PipelineStageState };

package/dist/components/Pipeline.js

@@ -0,0 +1,65 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from "react";
+import { cx } from "../cx.js";
+function Pipeline({ detailed = false, children, className, tabIndex, ...props }) {
+  const stages = detailed ? Children.map(children, (child) => isValidElement(child) && child.type === PipelineStage ? cloneElement(child, { detailed: child.props.detailed ?? true }) : child) : children;
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      className: cx("uix-pipeline", detailed && "uix-pipeline--detailed", className),
+      tabIndex: tabIndex ?? (detailed ? 0 : void 0),
+      ...props,
+      children: stages
+    }
+  );
+}
+const DEFAULT_STATE_LABELS = {
+  pending: "Pending",
+  waiting: "Waiting",
+  active: "Active",
+  current: "Current",
+  running: "Running",
+  done: "Done",
+  complete: "Complete",
+  blocked: "Blocked",
+  failed: "Failed",
+  error: "Error"
+};
+function PipelineStage({
+  label,
+  state = "pending",
+  stateLabel,
+  description,
+  meta,
+  marker,
+  detailed = false,
+  current: currentProp,
+  className,
+  ...props
+}) {
+  const current = currentProp ?? (state === "active" || state === "current" || state === "running");
+  const resolvedStateLabel = stateLabel ?? DEFAULT_STATE_LABELS[state];
+  const showDetails = detailed || description != null || meta != null || marker != null;
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      className: cx("uix-pipeline__stage", className),
+      "data-state": state,
+      "aria-current": current ? "step" : void 0,
+      ...props,
+      children: showDetails ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "uix-pipeline__marker", "aria-hidden": "true", children: marker }),
+        /* @__PURE__ */ jsxs("div", { className: "uix-pipeline__content", children: [
+          /* @__PURE__ */ jsx("div", { className: "uix-pipeline__eyebrow", children: /* @__PURE__ */ jsx("span", { className: "uix-pipeline__state", children: resolvedStateLabel }) }),
+          /* @__PURE__ */ jsx("div", { className: "uix-pipeline__title", children: label }),
+          description != null && /* @__PURE__ */ jsx("div", { className: "uix-pipeline__description", children: description }),
+          meta != null && /* @__PURE__ */ jsx("div", { className: "uix-pipeline__meta", children: meta })
+        ] })
+      ] }) : label
+    }
+  );
+}
+export {
+  Pipeline,
+  PipelineStage
+};

package/dist/components/Progress.d.ts

@@ -8,7 +8,9 @@ interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
     max?: number;
     /** Continuous slide animation when the amount of work is unknown. */
     indeterminate?: boolean;
+    /** Accessible name — rendered as `aria-label` (an explicit `aria-label` prop wins). */
+    label?: string;
 }
-declare function Progress({ value, max, indeterminate, className, ...props }: ProgressProps): react.JSX.Element;
+declare function Progress({ value, max, indeterminate, label, className, ...props }: ProgressProps): react.JSX.Element;
 
 export { Progress, type ProgressProps };

package/dist/components/Progress.js

@@ -1,14 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import { cx } from "../cx.js";
-function Progress({ value = 0, max = 100, indeterminate, className, ...props }) {
-  const pct = Math.max(0, Math.min(100, value / (max || 100) * 100));
+function Progress({ value = 0, max = 100, indeterminate, label, className, ...props }) {
+  const clamped = Math.max(0, Math.min(max || 100, value));
+  const pct = clamped / (max || 100) * 100;
   return /* @__PURE__ */ jsx(
     "div",
     {
       role: "progressbar",
       "aria-valuemin": 0,
       "aria-valuemax": max,
-      "aria-valuenow": indeterminate ? void 0 : value,
+      "aria-valuenow": indeterminate ? void 0 : clamped,
+      "aria-label": label,
       className: cx("uix-progress", indeterminate && "uix-progress--indeterminate", className),
       ...props,
       children: /* @__PURE__ */ jsx("div", { className: "uix-progress__bar", style: indeterminate ? void 0 : { width: `${pct}%` } })

package/dist/components/Radio.d.ts

@@ -8,7 +8,9 @@ declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttri
 interface RadioGroupProps {
     children: ReactNode;
     className?: string;
+    /** Group name; when set the group renders as fieldset/legend so it's announced with each radio. */
+    label?: ReactNode;
 }
-declare function RadioGroup({ children, className }: RadioGroupProps): react.JSX.Element;
+declare function RadioGroup({ children, className, label }: RadioGroupProps): react.JSX.Element;
 
 export { Radio, RadioGroup, type RadioGroupProps, type RadioProps };

package/dist/components/Radio.js

@@ -9,8 +9,12 @@ const Radio = forwardRef(
   ] })
 );
 Radio.displayName = "Radio";
-function RadioGroup({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cx("uix-radio-group", className), children });
+function RadioGroup({ children, className, label }) {
+  if (label == null) return /* @__PURE__ */ jsx("div", { className: cx("uix-radio-group", className), children });
+  return /* @__PURE__ */ jsxs("fieldset", { className: cx("uix-radio-group", className), children: [
+    /* @__PURE__ */ jsx("legend", { className: "uix-radio-group__legend", children: label }),
+    children
+  ] });
 }
 export {
   Radio,

package/dist/components/Spinner.d.ts

@@ -4,7 +4,9 @@ import { HTMLAttributes } from 'react';
 interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
     size?: 'md' | 'lg';
     accent?: boolean;
+    /** Announced loading text (default "Loading…"). */
+    label?: string;
 }
-declare function Spinner({ size, accent, className, ...props }: SpinnerProps): react.JSX.Element;
+declare function Spinner({ size, accent, label, className, ...props }: SpinnerProps): react.JSX.Element;
 
 export { Spinner, type SpinnerProps };

package/dist/components/Spinner.js

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { cx } from "../cx.js";
-function Spinner({ size = "md", accent, className, ...props }) {
+function Spinner({ size = "md", accent, label, className, ...props }) {
   return /* @__PURE__ */ jsx(
     "span",
     {
       className: cx("uix-spinner", accent && "uix-spinner--accent", size === "lg" && "uix-spinner--lg", className),
       role: "status",
-      "aria-label": "Loading",
-      ...props
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: label ?? "Loading\u2026" })
     }
   );
 }

package/dist/components/Stat.js

@@ -8,7 +8,11 @@ function Stat({ label, value, icon, meta, trend, className, ...props }) {
     ] }),
     /* @__PURE__ */ jsx("div", { className: "uix-stat__value", children: value }),
     (meta != null || trend != null) && /* @__PURE__ */ jsxs("div", { className: "uix-stat__meta", children: [
-      trend != null && /* @__PURE__ */ jsx("span", { className: cx("uix-stat__trend", `uix-stat__trend--${trend.direction}`), children: trend.label }),
+      trend != null && /* @__PURE__ */ jsxs("span", { className: cx("uix-stat__trend", `uix-stat__trend--${trend.direction}`), children: [
+        /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: trend.direction === "up" ? /* @__PURE__ */ jsx("path", { d: "M12 19V5m-6 6 6-6 6 6" }) : /* @__PURE__ */ jsx("path", { d: "M12 5v14m6-6-6 6-6-6" }) }),
+        /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: trend.direction === "up" ? "up" : "down" }),
+        trend.label
+      ] }),
       meta
     ] })
   ] });

package/dist/components/States.d.ts

@@ -49,6 +49,7 @@ interface LoadingStateProps extends HTMLAttributes<HTMLDivElement> {
     /** Number of skeleton rows to render. */
     rows?: number;
     density?: 'compact' | 'comfortable';
+    /** Announced loading text (default "Loading"). */
     label?: string;
 }
 /** A stack of skeleton rows for list/section loading. `role="status"`. */

package/dist/components/States.js

@@ -52,7 +52,13 @@ function Skeleton({ variant = "block", width, height, className, style, ...props
   );
 }
 function LoadingState({ rows = 3, density = "comfortable", label, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cx("uix-stack", density === "compact" && "uix-stack--compact", className), role: "status", "aria-busy": "true", "aria-label": label, ...props, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: `${92 - i % 3 * 14}%` }, i)) });
+  return (
+    // no aria-busy: busy=true tells AT the region isn't ready and suppresses the announcement (UIX-A11Y-4)
+    /* @__PURE__ */ jsxs("div", { className: cx("uix-stack", density === "compact" && "uix-stack--compact", className), role: "status", ...props, children: [
+      /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: label ?? "Loading" }),
+      Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: `${92 - i % 3 * 14}%` }, i))
+    ] })
+  );
 }
 export {
   EmptyState,

package/dist/components/Table.d.ts

@@ -2,6 +2,11 @@ import * as react from 'react';
 import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, TdHTMLAttributes, TableHTMLAttributes, ThHTMLAttributes } from 'react';
 
 interface TableWrapProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Polite live-region text for table state changes — "Sorted by …", "N results",
+     * "N selected". Pass `useTable().announcement` straight through (UIX-A11Y-2).
+     */
+    announcement?: string;
     children?: ReactNode;
 }
 declare const TableWrap: react.ForwardRefExoticComponent<TableWrapProps & react.RefAttributes<HTMLDivElement>>;
@@ -53,9 +58,11 @@ interface RowActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 declare function RowAction({ children, className, type, ...props }: RowActionProps): react.JSX.Element;
 interface ExpandToggleProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     expanded?: boolean;
+    /** id of the detail row this toggle controls → `aria-controls` (UIX-A11Y-2). */
+    controls?: string;
 }
 /** Chevron button that expands/collapses an inline detail row. */
-declare function ExpandToggle({ expanded, className, type, ...props }: ExpandToggleProps): react.JSX.Element;
+declare function ExpandToggle({ expanded, controls, className, type, ...props }: ExpandToggleProps): react.JSX.Element;
 /** Emphasised primary cell text. */
 declare function CellStrong({ children, className, ...props }: HTMLAttributes<HTMLSpanElement>): react.JSX.Element;
 /** Secondary line under a primary cell value (muted, meta size). */

package/dist/components/Table.js

@@ -2,8 +2,11 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cx } from "../cx.js";
 import { highlightSegments } from "../table-engine.js";
-const TableWrap = forwardRef(function TableWrap2({ children, className, ...props }, ref) {
-  return /* @__PURE__ */ jsx("div", { ref, className: cx("uix-table-wrap", className), ...props, children });
+const TableWrap = forwardRef(function TableWrap2({ announcement, children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("div", { ref, className: cx("uix-table-wrap", className), ...props, children: [
+    announcement != null && /* @__PURE__ */ jsx("div", { role: "status", className: "uix-visually-hidden", children: announcement }),
+    children
+  ] });
 });
 function Table({
   density = "standard",
@@ -42,9 +45,9 @@ function Th({ sortable, sortDirection, sortOrder, onSort, className, children, o
       "data-sort": sortable || void 0,
       "data-sort-order": sortOrder != null && sortOrder > 0 ? sortOrder : void 0,
       "aria-sort": sortDirection && sortDirection !== "none" ? sortDirection : void 0,
-      onClick: sortable ? onSort ?? onClick : onClick,
+      onClick: sortable && onSort ? void 0 : onClick,
       ...props,
-      children
+      children: sortable ? /* @__PURE__ */ jsx("button", { type: "button", className: "uix-th__sortbtn", onClick: onSort, children }) : children
     }
   );
 }
@@ -56,7 +59,7 @@ function Tr({ selected, pinned, className, children, ...props }) {
     "tr",
     {
       className,
-      "aria-selected": selected || void 0,
+      "data-selected": selected || void 0,
       "data-pinned": pinned || void 0,
       ...props,
       children
@@ -79,13 +82,14 @@ function RowActions({ children, className, ...props }) {
 function RowAction({ children, className, type = "button", ...props }) {
   return /* @__PURE__ */ jsx("button", { type, className: cx("uix-rowact", className), ...props, children });
 }
-function ExpandToggle({ expanded, className, type = "button", ...props }) {
+function ExpandToggle({ expanded, controls, className, type = "button", ...props }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
       type,
       className: cx("uix-table__expand", className),
       "aria-expanded": expanded,
+      "aria-controls": controls,
       "aria-label": expanded ? "Collapse row" : "Expand row",
       ...props,
       children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4" }) })