@tensor_1/react 2.16.0 → 2.18.0

package/README.md

@@ -61,4 +61,33 @@ traversal, three-way JSON diffing, metric parsing/stepping, color conversion and
 contrast checks, plus brand-profile apply/restore helpers. No graph or date
 runtime dependency is required.
 
+### RelationshipGraph layouts
+
+`RelationshipGraph` has two layouts:
+- `radial` (the default): a small neighbourhood ringed around the selection.
+- `layered` (ADR-0003): reads left to right by distance from `rootId`.
+
+Layered mode draws shared nodes once, marks cycles, collapses leaf fan-outs into clusters and labels edges. It adds structural keyboard traversal (←/→ along edges, ↑/↓ in a column, Home, End), pan and Ctrl/⌘-wheel zoom.
+
+```tsx
+<RelationshipGraph
+  layout="layered"
+  rootId={root.id}
+  nodes={nodes}            // { id, label, type?, description?, depth? }
+  edges={edges}            // { id, source, target, type?, label?, arrow?, emphasis? }
+  labels={translatedLabels} // Partial<RelationshipGraphLabels>
+  renderNode={(node) => <MyNodeBody node={node} />}
+  nodeAriaLabel={(node) => `${node.label}, ${riskText(node)}`}
+  onSelect={openPeek}
+  height="clamp(360px, 60vh, 640px)"
+/>
+```
+
+Rules the component cannot enforce for you:
+
+- **Whatever `renderNode` / `renderCluster` shows must also be in the accessible name.** Pass `nodeAriaLabel` whenever the node body carries meaning beyond `label`, `type` and `description`.
+- **Keep the equivalent list.** `showList={false}` is allowed only when the same labelled region renders a complete equivalent: every node, its relations and its state.
+- **Dimming is not a signal.** `dimmedNodeIds` must be accompanied by text that says what is dimmed and why.
+- **Localise everything.** Every visible and announced string comes from `labels`; the English defaults live in `DEFAULT_RELATIONSHIP_GRAPH_LABELS`.
+
 Ships **ESM + CJS + types**, with per-file `"use client"` so it's safe under React Server Components. Part of the **[UIx v2 styleguide](https://github.com/COx-ORG-H/UIx)**.

package/dist/chart-preset.cjs

@@ -60,6 +60,12 @@ function readToken(name) {
 function uixChartPalette() {
   return [1, 2, 3, 4, 5, 6, 7, 8].map((i) => readToken(`--uix-chart-${i}`));
 }
+function motionSafe(option) {
+  if (typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    return { ...option, animation: false };
+  }
+  return option;
+}
 function ChartCore({
   engine,
   option,
@@ -85,16 +91,22 @@ function ChartCore({
   const onReadyRef = (0, import_react.useRef)(onReady);
   const tableId = (0, import_react.useId)();
   const hasEmpty = empty != null;
+  const hasTextAlternative = Boolean(ariaLabel || title || tableData?.length);
+  const hasTextAlternativeRef = (0, import_react.useRef)(hasTextAlternative);
   latestOptionRef.current = option;
   onReadyRef.current = onReady;
+  hasTextAlternativeRef.current = hasTextAlternative;
   (0, import_react.useEffect)(() => {
     const element = containerRef.current;
     if (!element) return;
     const chart = engine.init(element, null, { renderer: "svg" });
     chartRef.current = chart;
-    chart.setOption(latestOptionRef.current);
+    chart.setOption(motionSafe(latestOptionRef.current));
     appliedOptionRef.current = latestOptionRef.current;
     onReadyRef.current?.(chart);
+    if (!hasTextAlternativeRef.current) {
+      console.warn("[uix] Chart has no text alternative \u2014 provide ariaLabel, title, or tableData.");
+    }
     let frame = 0;
     let width = element.clientWidth;
     let height2 = element.clientHeight;
@@ -122,7 +134,7 @@ function ChartCore({
   (0, import_react.useEffect)(() => {
     const chart = chartRef.current;
     if (!chart || appliedOptionRef.current === option) return;
-    chart.setOption(option, { notMerge: false });
+    chart.setOption(motionSafe(option), { notMerge: false });
     appliedOptionRef.current = option;
   }, [option]);
   const heightValue = typeof height === "number" ? `${height}px` : height;
@@ -147,7 +159,7 @@ function ChartCore({
         "aria-describedby": hasTable ? tableId : void 0
       }
     ) }),
-    hasTable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { id: tableId, className: "sr-only", "aria-label": `${effectiveAriaLabel} \u2014 data table`, children: [
+    hasTable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { id: tableId, className: "uix-visually-hidden", "aria-label": `${effectiveAriaLabel} \u2014 data table`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: label }, label)) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: tableData.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: row[label] }, label)) }, index)) })
     ] }) : null,

package/dist/chart.cjs

@@ -58,6 +58,12 @@ function readToken(name) {
 function uixChartPalette() {
   return [1, 2, 3, 4, 5, 6, 7, 8].map((i) => readToken(`--uix-chart-${i}`));
 }
+function motionSafe(option) {
+  if (typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    return { ...option, animation: false };
+  }
+  return option;
+}
 function ChartCore({
   engine,
   option,
@@ -83,16 +89,22 @@ function ChartCore({
   const onReadyRef = (0, import_react.useRef)(onReady);
   const tableId = (0, import_react.useId)();
   const hasEmpty = empty != null;
+  const hasTextAlternative = Boolean(ariaLabel || title || tableData?.length);
+  const hasTextAlternativeRef = (0, import_react.useRef)(hasTextAlternative);
   latestOptionRef.current = option;
   onReadyRef.current = onReady;
+  hasTextAlternativeRef.current = hasTextAlternative;
   (0, import_react.useEffect)(() => {
     const element = containerRef.current;
     if (!element) return;
     const chart = engine.init(element, null, { renderer: "svg" });
     chartRef.current = chart;
-    chart.setOption(latestOptionRef.current);
+    chart.setOption(motionSafe(latestOptionRef.current));
     appliedOptionRef.current = latestOptionRef.current;
     onReadyRef.current?.(chart);
+    if (!hasTextAlternativeRef.current) {
+      console.warn("[uix] Chart has no text alternative \u2014 provide ariaLabel, title, or tableData.");
+    }
     let frame = 0;
     let width = element.clientWidth;
     let height2 = element.clientHeight;
@@ -120,7 +132,7 @@ function ChartCore({
   (0, import_react.useEffect)(() => {
     const chart = chartRef.current;
     if (!chart || appliedOptionRef.current === option) return;
-    chart.setOption(option, { notMerge: false });
+    chart.setOption(motionSafe(option), { notMerge: false });
     appliedOptionRef.current = option;
   }, [option]);
   const heightValue = typeof height === "number" ? `${height}px` : height;
@@ -145,7 +157,7 @@ function ChartCore({
         "aria-describedby": hasTable ? tableId : void 0
       }
     ) }),
-    hasTable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { id: tableId, className: "sr-only", "aria-label": `${effectiveAriaLabel} \u2014 data table`, children: [
+    hasTable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { id: tableId, className: "uix-visually-hidden", "aria-label": `${effectiveAriaLabel} \u2014 data table`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: label }, label)) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: tableData.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: row[label] }, label)) }, index)) })
     ] }) : null,

package/dist/components/Alert.js

@@ -1,13 +1,21 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
 function Alert({ tone, title, icon, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx("uix-alert", tone && tone !== "neutral" && `uix-alert--${tone}`, className), ...props, children: [
-    icon && /* @__PURE__ */ jsx("div", { className: "uix-alert__icon", children: icon }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      title && /* @__PURE__ */ jsx("div", { className: "uix-alert__title", children: title }),
-      children && /* @__PURE__ */ jsx("div", { className: "uix-alert__body", children })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("uix-alert", tone && tone !== "neutral" && `uix-alert--${tone}`, className),
+      role: tone === "danger" || tone === "warning" ? "alert" : "status",
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("div", { className: "uix-alert__icon", children: icon }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          title && /* @__PURE__ */ jsx("div", { className: "uix-alert__title", children: title }),
+          children && /* @__PURE__ */ jsx("div", { className: "uix-alert__body", children })
+        ] })
+      ]
+    }
+  );
 }
 export {
   Alert

package/dist/components/AppShell.d.ts

@@ -17,10 +17,12 @@ interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
     onExitFocus?: () => void;
     /** Drop the content gutter so a genuinely wide table runs edge-to-edge. */
     mainBleed?: boolean;
+    /** id given to `<main>` and targeted by the skip link. Override on collision (UIX-A11Y-2). */
+    mainId?: string;
     sidebar?: ReactNode;
     topbar?: ReactNode;
     children?: ReactNode;
 }
-declare function AppShell({ nav, collapsed, focus, onExitFocus, mainBleed, sidebar, topbar, children, className, ...props }: AppShellProps): react.JSX.Element;
+declare function AppShell({ nav, collapsed, focus, onExitFocus, mainBleed, mainId, sidebar, topbar, children, className, ...props }: AppShellProps): react.JSX.Element;
 
 export { AppShell, type AppShellProps, type ShellNav };

package/dist/components/AppShell.js

@@ -8,6 +8,7 @@ function AppShell({
   focus,
   onExitFocus,
   mainBleed,
+  mainId = "uix-main",
   sidebar,
   topbar,
   children,
@@ -32,9 +33,10 @@ function AppShell({
       "data-focus": focus || void 0,
       ...props,
       children: [
+        /* @__PURE__ */ jsx("a", { className: "uix-skiplink", href: `#${mainId}`, children: "Skip to content" }),
         sidebar && /* @__PURE__ */ jsx("div", { className: "uix-shell__sidebar", children: sidebar }),
         topbar && /* @__PURE__ */ jsx("div", { className: "uix-shell__topbar", children: topbar }),
-        /* @__PURE__ */ jsx("main", { className: cx("uix-shell__main", mainBleed && "uix-shell__main--bleed"), children }),
+        /* @__PURE__ */ jsx("main", { id: mainId, tabIndex: -1, className: cx("uix-shell__main", mainBleed && "uix-shell__main--bleed"), children }),
         focus && onExitFocus && /* @__PURE__ */ jsx("div", { className: "uix-shell__focus-exit", children: /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: onExitFocus, children: "Esc \xB7 Exit focus" }) })
       ]
     }

package/dist/components/Avatar.js

@@ -3,7 +3,8 @@ import { cx } from "../cx.js";
 function Avatar({ size = "md", src, alt, children, status, className, ...props }) {
   return /* @__PURE__ */ jsxs("span", { className: cx("uix-avatar", size !== "md" && `uix-avatar--${size}`, className), ...props, children: [
     src ? /* @__PURE__ */ jsx("img", { src, alt: alt ?? "" }) : children,
-    status && /* @__PURE__ */ jsx("span", { className: "uix-avatar__status" })
+    status && /* @__PURE__ */ jsx("span", { className: "uix-avatar__status", "aria-hidden": "true" }),
+    status && /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: "online" })
   ] });
 }
 function AvatarGroup({ children, className, ...props }) {

package/dist/components/Button.js

@@ -1,24 +1,40 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cx } from "../cx.js";
+let warnedIconButton = false;
 const Button = forwardRef(
-  ({ variant = "secondary", size = "md", icon = false, loading = false, className, children, disabled, ...props }, ref) => /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref,
-      className: cx(
-        "uix-btn",
-        `uix-btn--${variant}`,
-        size !== "md" && `uix-btn--${size}`,
-        icon && "uix-btn--icon",
-        className
-      ),
-      disabled: disabled || loading,
-      "data-loading": loading || void 0,
-      ...props,
-      children
+  ({ variant = "secondary", size = "md", icon = false, loading = false, className, children, disabled, onClick, ...props }, ref) => {
+    if (!warnedIconButton && icon && children == null && !props["aria-label"] && !props["aria-labelledby"] && typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+      warnedIconButton = true;
+      console.warn("uix: icon-only <Button> has no accessible name \u2014 pass aria-label or aria-labelledby.");
     }
-  )
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        className: cx(
+          "uix-btn",
+          `uix-btn--${variant}`,
+          size !== "md" && `uix-btn--${size}`,
+          icon && "uix-btn--icon",
+          className
+        ),
+        disabled,
+        "aria-disabled": loading || void 0,
+        "aria-busy": loading || void 0,
+        "data-loading": loading || void 0,
+        onClick: loading || onClick ? (e) => {
+          if (loading) {
+            e.preventDefault();
+            return;
+          }
+          onClick?.(e);
+        } : void 0,
+        ...props,
+        children
+      }
+    );
+  }
 );
 Button.displayName = "Button";
 function ButtonGroup({ children, className }) {

package/dist/components/Card.d.ts

@@ -3,12 +3,14 @@ import { HTMLAttributes, ReactNode, AnchorHTMLAttributes } from 'react';
 
 interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: ReactNode;
+    /** Element for the title — pick a real heading to slot the card into the page outline (UIX-A11Y-4). Default `div` keeps legacy rendering. */
+    titleAs?: 'h2' | 'h3' | 'h4' | 'div';
     subtitle?: ReactNode;
     headerAction?: ReactNode;
     footer?: ReactNode;
     children?: ReactNode;
 }
-declare function Card({ title, subtitle, headerAction, footer, children, className, ...props }: CardProps): react.JSX.Element;
+declare function Card({ title, titleAs: TitleTag, subtitle, headerAction, footer, children, className, ...props }: CardProps): react.JSX.Element;
 interface CardLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'title'> {
     title?: ReactNode;
     subtitle?: ReactNode;

package/dist/components/Card.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
-function Card({ title, subtitle, headerAction, footer, children, className, ...props }) {
+function Card({ title, titleAs: TitleTag = "div", subtitle, headerAction, footer, children, className, ...props }) {
   const hasHeader = title != null || subtitle != null || headerAction != null;
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-card", className), ...props, children: [
     hasHeader && /* @__PURE__ */ jsxs("div", { className: "uix-card__header", children: [
       /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-        title && /* @__PURE__ */ jsx("div", { className: "uix-card__title", children: title }),
+        title && /* @__PURE__ */ jsx(TitleTag, { className: "uix-card__title", children: title }),
         subtitle && /* @__PURE__ */ jsx("div", { className: "uix-card__subtitle", children: subtitle })
       ] }),
       headerAction

package/dist/components/ChartCore.js

@@ -9,6 +9,12 @@ function readToken(name) {
 function uixChartPalette() {
   return [1, 2, 3, 4, 5, 6, 7, 8].map((i) => readToken(`--uix-chart-${i}`));
 }
+function motionSafe(option) {
+  if (typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    return { ...option, animation: false };
+  }
+  return option;
+}
 function ChartCore({
   engine,
   option,
@@ -34,16 +40,22 @@ function ChartCore({
   const onReadyRef = useRef(onReady);
   const tableId = useId();
   const hasEmpty = empty != null;
+  const hasTextAlternative = Boolean(ariaLabel || title || tableData?.length);
+  const hasTextAlternativeRef = useRef(hasTextAlternative);
   latestOptionRef.current = option;
   onReadyRef.current = onReady;
+  hasTextAlternativeRef.current = hasTextAlternative;
   useEffect(() => {
     const element = containerRef.current;
     if (!element) return;
     const chart = engine.init(element, null, { renderer: "svg" });
     chartRef.current = chart;
-    chart.setOption(latestOptionRef.current);
+    chart.setOption(motionSafe(latestOptionRef.current));
     appliedOptionRef.current = latestOptionRef.current;
     onReadyRef.current?.(chart);
+    if (!hasTextAlternativeRef.current) {
+      console.warn("[uix] Chart has no text alternative \u2014 provide ariaLabel, title, or tableData.");
+    }
     let frame = 0;
     let width = element.clientWidth;
     let height2 = element.clientHeight;
@@ -71,7 +83,7 @@ function ChartCore({
   useEffect(() => {
     const chart = chartRef.current;
     if (!chart || appliedOptionRef.current === option) return;
-    chart.setOption(option, { notMerge: false });
+    chart.setOption(motionSafe(option), { notMerge: false });
     appliedOptionRef.current = option;
   }, [option]);
   const heightValue = typeof height === "number" ? `${height}px` : height;
@@ -96,7 +108,7 @@ function ChartCore({
         "aria-describedby": hasTable ? tableId : void 0
       }
     ) }),
-    hasTable ? /* @__PURE__ */ jsxs("table", { id: tableId, className: "sr-only", "aria-label": `${effectiveAriaLabel} \u2014 data table`, children: [
+    hasTable ? /* @__PURE__ */ jsxs("table", { id: tableId, className: "uix-visually-hidden", "aria-label": `${effectiveAriaLabel} \u2014 data table`, children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ jsx("th", { scope: "col", children: label }, label)) }) }),
       /* @__PURE__ */ jsx("tbody", { children: tableData.map((row, index) => /* @__PURE__ */ jsx("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ jsx("td", { children: row[label] }, label)) }, index)) })
     ] }) : null,

package/dist/components/CommandPalette.d.ts

@@ -8,7 +8,9 @@ interface CommandPaletteProps extends HTMLAttributes<HTMLDivElement> {
 }
 /**
  * ⌘K command palette surface over `.uix-cmdk`. Presentational: mount it inside a
- * Modal/Popover and wire search + keyboard selection in the consumer.
+ * Modal/Popover and wire search + keyboard selection in the consumer. The input is
+ * a combobox over the listbox of `CommandItem`s; spreads override every default, so
+ * consumers already passing their own roles/labels keep working.
  */
 declare function CommandPalette({ inputProps, children, className, ...props }: CommandPaletteProps): react.JSX.Element;
 interface CommandGroupProps {
@@ -25,6 +27,6 @@ interface CommandItemProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
 /** A single command row over `.uix-cmdk__item`. */
-declare function CommandItem({ icon, shortcut, active, children, className, ...props }: CommandItemProps): react.JSX.Element;
+declare function CommandItem({ icon, shortcut, active, children, className, id, ...props }: CommandItemProps): react.JSX.Element;
 
 export { CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps };

package/dist/components/CommandPalette.js

@@ -1,23 +1,76 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useState } from "react";
 import { cx } from "../cx.js";
+const CmdkContext = createContext(null);
 function CommandPalette({ inputProps, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx("uix-cmdk", className), ...props, children: [
-    /* @__PURE__ */ jsx("input", { className: "uix-cmdk__input", ...inputProps }),
-    /* @__PURE__ */ jsx("div", { className: "uix-cmdk__list", children })
-  ] });
+  const listId = useId();
+  const [activeId, setActiveId] = useState(null);
+  const [count, setCount] = useState(0);
+  const [announced, setAnnounced] = useState("");
+  const setActive = useCallback((id, active) => {
+    setActiveId((cur) => active ? id : cur === id ? null : cur);
+  }, []);
+  const registerItem = useCallback(() => {
+    setCount((c) => c + 1);
+    return () => setCount((c) => c - 1);
+  }, []);
+  useEffect(() => {
+    const t = window.setTimeout(() => setAnnounced(`${count} result${count === 1 ? "" : "s"}`), 150);
+    return () => clearTimeout(t);
+  }, [count]);
+  const ctx = useMemo(() => ({ listId, setActive, registerItem }), [listId, setActive, registerItem]);
+  return /* @__PURE__ */ jsx(CmdkContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs("div", { className: cx("uix-cmdk", className), ...props, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: "uix-cmdk__input",
+        role: "combobox",
+        "aria-expanded": "true",
+        "aria-autocomplete": "list",
+        "aria-controls": listId,
+        "aria-activedescendant": activeId ?? void 0,
+        "aria-label": "Command palette",
+        ...inputProps
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "uix-cmdk__list", role: "listbox", id: listId, children }),
+    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", children: announced })
+  ] }) });
 }
 function CommandGroup({ label, children }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    label != null && /* @__PURE__ */ jsx("div", { className: "uix-cmdk__group", children: label }),
+  const labelId = useId();
+  return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": label != null ? labelId : void 0, children: [
+    label != null && /* @__PURE__ */ jsx("div", { className: "uix-cmdk__group", id: labelId, children: label }),
     children
   ] });
 }
-function CommandItem({ icon, shortcut, active, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx("uix-cmdk__item", className), "data-active": active || void 0, ...props, children: [
-    icon,
-    /* @__PURE__ */ jsx("span", { children }),
-    shortcut
-  ] });
+function CommandItem({ icon, shortcut, active, children, className, id, ...props }) {
+  const ctx = useContext(CmdkContext);
+  const autoId = useId();
+  const itemId = id ?? autoId;
+  useEffect(() => ctx?.registerItem(), [ctx]);
+  useEffect(() => {
+    if (!ctx || !active) return;
+    ctx.setActive(itemId, true);
+    return () => ctx.setActive(itemId, false);
+  }, [ctx, itemId, active]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("uix-cmdk__item", className),
+      "data-active": active || void 0,
+      id: itemId,
+      role: "option",
+      "aria-selected": !!active,
+      ...props,
+      children: [
+        icon,
+        /* @__PURE__ */ jsx("span", { children }),
+        shortcut
+      ]
+    }
+  );
 }
 export {
   CommandGroup,

package/dist/components/Comments.d.ts

@@ -4,7 +4,11 @@ import { HTMLAttributes, ReactNode } from 'react';
 interface CommentsProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
-/** Comment thread container over `.uix-comments`. */
+/**
+ * Comment thread container over `.uix-comments`. role="log" is an implicit polite
+ * live region: comments appended after initial render are announced, the initial
+ * list is not (UIX-A11Y-3). Pass `role` to override.
+ */
 declare function Comments({ children, className, ...props }: CommentsProps): react.JSX.Element;
 interface CommentProps extends HTMLAttributes<HTMLDivElement> {
     /** Usually an `<Avatar />` (the grid reserves the leading column). */

package/dist/components/Comments.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
 function Comments({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cx("uix-comments", className), ...props, children });
+  return /* @__PURE__ */ jsx("div", { role: "log", className: cx("uix-comments", className), ...props, children });
 }
 function Comment({ avatar, author, meta, children, className, ...props }) {
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-comment", className), ...props, children: [

package/dist/components/Composer.d.ts

@@ -3,6 +3,8 @@ import { HTMLAttributes, ReactNode } from 'react';
 
 interface ComposerProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
+    /** Accessible name for the child `<textarea>`; applied as its `aria-label`. */
+    label?: string;
 }
 /**
  * Composer surface over `.uix-composer` — a single box that owns the
@@ -10,8 +12,13 @@ interface ComposerProps extends HTMLAttributes<HTMLDivElement> {
  * `<ComposerBar>` inside; the descendant `textarea` picks up the composer's
  * padding/typography automatically, so the input never reads as a second
  * nested box.
+ *
+ * A placeholder is not an accessible name, so the composer labels a bare child
+ * `<textarea>` with `label` (default "Add a comment"); a textarea that brings its
+ * own `aria-label`/`aria-labelledby` — or an `id` (likely tied to an external
+ * `<label htmlFor>`) — is left untouched (UIX-A11Y-3).
  */
-declare function Composer({ children, className, ...props }: ComposerProps): react.JSX.Element;
+declare function Composer({ children, className, label, ...props }: ComposerProps): react.JSX.Element;
 interface ComposerBarProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }

package/dist/components/Composer.js

@@ -1,7 +1,12 @@
 import { jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from "react";
 import { cx } from "../cx.js";
-function Composer({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cx("uix-composer", className), ...props, children });
+function Composer({ children, className, label = "Add a comment", ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("uix-composer", className), ...props, children: Children.map(children, (child) => {
+    if (!isValidElement(child) || child.type !== "textarea") return child;
+    const p = child.props;
+    return p["aria-label"] || p["aria-labelledby"] || p.id ? child : cloneElement(child, { "aria-label": label });
+  }) });
 }
 function ComposerBar({ children, className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cx("uix-composer__bar", className), ...props, children });

package/dist/components/DetailLayout.js

@@ -3,7 +3,7 @@ import { cx } from "../cx.js";
 function DetailLayout({ side, children, className, ...props }) {
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-detail", className), ...props, children: [
     /* @__PURE__ */ jsx("div", { className: "uix-detail__main", children }),
-    side != null && /* @__PURE__ */ jsx("div", { className: "uix-detail__side", children: side })
+    side != null && /* @__PURE__ */ jsx("aside", { className: "uix-detail__side", children: side })
   ] });
 }
 export {

package/dist/components/Drawer.d.ts

@@ -1,14 +1,13 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 
-interface DrawerProps {
+interface DrawerProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
     open: boolean;
     onClose?: () => void;
     title?: ReactNode;
     children?: ReactNode;
     footer?: ReactNode;
-    className?: string;
 }
-declare function Drawer({ open, onClose, title, children, footer, className }: DrawerProps): react.JSX.Element;
+declare function Drawer({ open, onClose, title, children, footer, className, ...rest }: DrawerProps): react.JSX.Element;
 
 export { Drawer, type DrawerProps };

package/dist/components/Drawer.js

@@ -1,13 +1,15 @@
 "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" }) });
-function Drawer({ open, onClose, title, children, footer, className }) {
-  const ref = useDialog(open);
-  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-drawer", className), onClose, children: [
+function Drawer({ open, onClose, title, children, footer, className, ...rest }) {
+  const ref = useDialog(open, onClose);
+  const titleId = useId();
+  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-drawer", className), "aria-labelledby": title ? titleId : void 0, ...rest, children: [
     (title != null || onClose) && /* @__PURE__ */ jsxs("div", { className: "uix-drawer__header", children: [
-      title && /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, fontSize: "var(--uix-text-h3)" }, children: title }),
+      title && /* @__PURE__ */ jsx("h2", { id: titleId, style: { fontWeight: 600, fontSize: "var(--uix-text-h3)", fontFamily: "inherit", letterSpacing: "inherit", lineHeight: "inherit" }, children: title }),
       onClose && /* @__PURE__ */ jsx(
         "button",
         {

package/dist/components/Field.js

@@ -5,14 +5,17 @@ function Field({ label, hint, error, success, required, children, className, htm
   const uid = useId();
   const msgId = `${uid}-msg`;
   const describedBy = error || success || hint ? msgId : void 0;
+  const controlId = isValidElement(children) ? children.props.id ?? `${uid}-ctl` : void 0;
   const control = isValidElement(children) ? cloneElement(children, {
+    id: controlId,
     "aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0,
-    "aria-invalid": error ? true : children.props["aria-invalid"]
+    "aria-invalid": error ? true : children.props["aria-invalid"],
+    "aria-required": children.props["aria-required"] ?? (required || void 0)
   }) : children;
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-field", className), children: [
-    label && /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor, "data-required": required || void 0, children: label }),
+    label && /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor: htmlFor ?? controlId, "data-required": required || void 0, children: label }),
     control,
-    /* @__PURE__ */ jsx("div", { className: "uix-field__msg", id: msgId, children: error ? /* @__PURE__ */ jsx("span", { className: "uix-field__error", role: "alert", children: error }) : success ? /* @__PURE__ */ jsx("span", { className: "uix-field__success", children: success }) : hint ? /* @__PURE__ */ jsx("span", { className: "uix-field__hint", children: hint }) : null })
+    /* @__PURE__ */ jsx("div", { className: "uix-field__msg", id: msgId, children: error ? /* @__PURE__ */ jsx("span", { className: "uix-field__error", role: "alert", children: error }) : success ? /* @__PURE__ */ jsx("span", { className: "uix-field__success", role: "status", children: success }) : hint ? /* @__PURE__ */ jsx("span", { className: "uix-field__hint", children: hint }) : null })
   ] });
 }
 export {