@godxjp/ui 21.0.0 → 23.0.0

package/README.md

@@ -55,7 +55,7 @@ A value is defined **once** as a CSS var (`--primary`), mapped to a utility in t
 | **Data Display**   | `@godxjp/ui/data-display` | `Table`, `DataTable`, `Card`, `StatCard`, `Badge`, `Avatar`, `Descriptions`, `Timeline`, `EmptyState`, `Progress`, `QrCode`, `CredentialReveal`, `Accordion`, `HoverCard`, `Carousel`, `Popover`, `Collapsible`                         |
 | **Feedback**       | `@godxjp/ui/feedback`     | `Dialog`, `AlertDialog`, `Sheet` (side), `Drawer` (bottom-sheet), `Toast`, `Skeleton`, `Alert`, `Tooltip`                                                                                                                               |
 | **Query**          | `@godxjp/ui/query`        | `DataState`, `InfiniteQueryState`, `PrefetchLink` (adapter subpath — pulls TanStack Query)                                                                                                                                              |
-| **Navigation**     | `@godxjp/ui/navigation`   | `Tabs`, `Toolbar`, `DropdownMenu`, `ContextMenu`, `Menubar`, `NavigationMenu`, `Steps`, `Pagination`, `Breadcrumb`, `AppSettingPicker`                                                                                                  |
+| **Navigation**     | `@godxjp/ui/navigation`   | `Tabs`, `Toolbar`, `DropdownMenu`, `Steps`, `Pagination`, `Breadcrumb`, `AppSettingPicker`                                                                                                                                              |
 | **App**            | `@godxjp/ui/app`          | `AppProvider`, `useDateTime` (adapter — i18n/datetime singleton)                                                                                                                                                                        |
 | **Datetime**       | `@godxjp/ui/datetime`     | `formatDate` (mandatory for display)                                                                                                                                                                                                    |
 | **Form**           | `@godxjp/ui/form`         | `useZodForm`, `FormRoot` (adapter subpath — pulls react-hook-form)                                                                                                                                                                      |
@@ -155,9 +155,9 @@ pnpm release --ui <patch|minor|major> --mcp <…|skip>   # publish lib + MCP in
 | `check:mcp-orphans`     | every public component HAS a catalog entry (catalog can't rot)       |
 | `check:core-isolation`  | the root export pulls no foreign runtime (adapters stay on subpaths) |
 
-### Runtime visual audit (Playwright + axe-core)
+### Runtime visual audit (Playwright)
 
-`scripts/visual-audit.mjs` drives a **real browser** over a running app and runs axe-core plus computed-style heuristics (target size, OKLCH accent chroma, rendered emoji, mis-laid-out alerts) — catching what the static `pnpm audit` (source regexes) can't see. Playwright + `@axe-core/playwright` are **optional peers**, installed only by apps that run the audit.
+`scripts/visual-audit.mjs` drives a **real browser** over a running app and runs computed-style heuristics (target size, OKLCH accent chroma, rendered emoji, mis-laid-out alerts) — catching what the static `pnpm audit` (source regexes) can't see. Playwright + `@axe-core/playwright` are **optional peers**, installed only by apps that run the audit.
 
 ```bash
 # from a consumer, against its running dev/preview server:
@@ -166,7 +166,7 @@ node node_modules/@godxjp/ui/scripts/visual-audit.mjs http://localhost:5173 --fo
 node node_modules/@godxjp/ui/scripts/visual-audit.mjs --strict http://localhost:5173       # CI gate
 ```
 
-**Tested peer range** (pin one of these): `playwright >=1.55 <2` (tested 1.61.1) · `@axe-core/playwright >=4.10 <5` (tested 4.12.1) · `axe-core >=4.10 <5` (tested 4.12.1). Playwright 1.55+ is required for the `browser.newContext()` → `context.newPage()` flow axe expects; older `browser.newPage()` throws _"Please use browser.newContext()"_.
+**Tested peer range** (pin one of these): `playwright >=1.55 <2` (tested 1.61.1)
 
 `--format json` **always** emits valid JSON — even on bootstrap failure — with a `status` (`ok` · `partial` · `error`) that separates **infrastructure errors** (missing peers, page won't load, axe won't inject → `errors[]`, `summary: null`/flagged) from **product findings** (`findings[]`). A tool failure can therefore never be misread as "zero violations". `pnpm check:visual-audit` is the CI smoke test: it serves a fixture page tripping all five rule families and asserts each one fires.
 

package/dist/app/app-provider.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { I18nProvider } from "react-aria-components";
 import { resolveDefaultDateFormat } from "./date-format-labels.js";
 import { getDateFnsLocale, getDayPickerLocale } from "./locales.js";
 import { syncAppRequestHeaders } from "./request-headers.js";
@@ -362,7 +363,7 @@ function AppProvider({
       setScaling
     ]
   );
-  return /* @__PURE__ */ jsx(AppContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx(I18nProvider, { locale, children: /* @__PURE__ */ jsx(AppContext.Provider, { value, children }) });
 }
 function useAppContext() {
   const ctx = React.useContext(AppContext);

package/dist/components/data-display/badge.d.ts

@@ -45,9 +45,36 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
         className?: string;
     }> | null;
     status?: string;
+    /**
+     * Lining, fixed-width figures — for a chip whose content is a COUNT that sits in a column with
+     * other counts (a queue length per row, an unread tally per tab, a defect count per site). With
+     * proportional figures a `1` is narrower than a `0`, so the chips jitter and the numbers do not
+     * line up down the column; it is the same axis `Text`, `TableCell` and `StatCard` already carry,
+     * and its absence here was the asymmetry rather than a decision.
+     *
+     * MEASURE IT BEFORE YOU EXPECT PIXELS TO MOVE. With the stack this library ships,
+     * `font-variant-numeric` changes nothing: measured in Chromium at the chip's own 12.47px,
+     * `"1111"` and `"0000"` both advance **31.094px** with and without `tabular-nums`, because the
+     * resolved face already gives its figures one advance. What this prop buys is the DECLARATION —
+     * it survives a service retuning `--font-family-sans` to a face whose figures are proportional,
+     * which is the same reason `Text`, `TableCell` and `StatCard` carry the axis.
+     *
+     * It is also NOT the fix for chips of DIFFERENT WIDTHS down a column: `11` and `100` are two
+     * and three figures, so they are two widths whatever the face does. That is a minimum measure on
+     * the chip, and it belongs to the screen.
+     *
+     * There WAS a legal move — `<Badge><Text size="xs" tabular>12</Text></Badge>` measures the same
+     * 12.47px as the chip's own label. It just requires the call site to know that a Badge's type
+     * step is `xs`, which is the chip's own `--badge-font-size` token and not a fact a consumer
+     * should have to carry: retune that token in a theme and every such call site silently desyncs.
+     *
+     * Off by default. Tabular figures are wider than proportional ones in a face that has both, so a
+     * chip carrying WORDS should not pay for them.
+     */
+    tabular?: boolean;
     children?: React.ReactNode;
 }
-export declare function Badge({ as: Element, className, variant, shape, tone, color, icon, status, style, children, ...props }: BadgeProps): React.JSX.Element;
+export declare function Badge({ as: Element, className, variant, shape, tone, color, icon, status, tabular, style, children, ...props }: BadgeProps): React.JSX.Element;
 /**
  * Status-aware badge with the shared domain-status-to-tone mapping. `Badge` remains the
  * general-purpose primitive.

package/dist/components/data-display/badge.js

@@ -97,6 +97,7 @@ function Badge({
   color,
   icon,
   status,
+  tabular,
   style,
   children,
   ...props
@@ -114,6 +115,7 @@ function Badge({
       "data-tone": tinted ? void 0 : resolvedTone,
       "data-tinted": tinted ? "" : void 0,
       "data-shape": shape ?? "default",
+      "data-tabular": tabular ? "" : void 0,
       className: cn(
         badgeVariants({
           variant: tinted ? "tinted" : variant ?? "default",

package/dist/components/data-display/data-table.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { flexRender, type ColumnVisibilityState, type OnChangeFn, type PaginationState } from "@tanstack/react-table";
-import type { BreakpointProp, ColumnDefProp, DensityProp, OnColumnFilterChangeProp, OnRowProp, SortDirectionProp, SortStateProp, TableExpandableProp, TablePaginationProp, TablePresetProp, TableRowSelectionProp, TableScrollProp, TableStickyProp, TableSummaryProp } from "../../props/vocabulary/index.js";
+import type { BreakpointProp, ColumnDefProp, DensityProp, OnColumnFilterChangeProp, OnRowProp, RowToneProp, SortDirectionProp, SortStateProp, TableExpandableProp, TablePaginationProp, TablePresetProp, TableRowSelectionProp, TableScrollProp, TableStickyProp, TableSummaryProp } from "../../props/vocabulary/index.js";
 export type Density = DensityProp;
 /**
  * Lean column definition — the simple, common-case column API. `render` shapes a cell; `sortable`
@@ -82,6 +82,22 @@ interface DataTableProps<T> {
      * classes are appended last, so they win over the built-in hover/selected fills.
      */
     rowClassName?: (row: T) => string | undefined;
+    /**
+     * Per-row STATE, drawn as a leading-edge rail plus a wash — the same six tone names `Card accent`
+     * carries, so a row that needs attention and a card that needs attention read as one vocabulary.
+     * Return `undefined` for an ordinary row.
+     *
+     * This is the token-driven answer to what `rowClassName` could only do with utilities, and
+     * `ui-audit` blocks those in a consumer: `rowClassName` matches the gate's `class`-name suffix
+     * rule, so every colour and spacing rule scans the arrow body — a leading-edge border utility
+     * plus a raw palette fill in there is two errors, not zero. Consumers fell back to a badge in a
+     * cell instead.
+     *
+     * It is never the ONLY signal: colour alone cannot carry meaning (WCAG 1.4.1), so keep the
+     * reason in a cell — a Badge, a status column — and let the rail make that cell findable in a
+     * long table.
+     */
+    rowTone?: RowToneProp<T>;
     /**
      * Full row-selection configuration (antd `rowSelection`). Supersedes — and can be mixed with —
      * `selectable` / `selected` / `onSelectChange`, which drive the same state.
@@ -114,7 +130,7 @@ interface DataTableProps<T> {
     className?: string;
     children?: React.ReactNode;
 }
-export declare function DataTable<T>({ data, columns, getRowId, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, globalFilter: controlledGlobalFilter, onGlobalFilterChange, pagination: paginationProp, onPaginationChange, rowCount, columnVisibility: controlledVisibility, onColumnVisibilityChange, manualSorting, manualFiltering, manualPagination, loading, empty, error, denied, onRetry, striped, hoverable, stickyHeader, preset, collapseBelow, rowClassName, rowSelection, expandable, summary, scroll, sticky, onRow, bordered, showSorterTooltip, sortDirections, onFilterChange, className, children, }: DataTableProps<T>): React.JSX.Element;
+export declare function DataTable<T>({ data, columns, getRowId, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, globalFilter: controlledGlobalFilter, onGlobalFilterChange, pagination: paginationProp, onPaginationChange, rowCount, columnVisibility: controlledVisibility, onColumnVisibilityChange, manualSorting, manualFiltering, manualPagination, loading, empty, error, denied, onRetry, striped, hoverable, stickyHeader, preset, collapseBelow, rowClassName, rowTone, rowSelection, expandable, summary, scroll, sticky, onRow, bordered, showSorterTooltip, sortDirections, onFilterChange, className, children, }: DataTableProps<T>): React.JSX.Element;
 export declare namespace DataTable {
     var Toolbar: ({ children, className, }: {
         children?: React.ReactNode;

package/dist/components/data-display/data-table.js

@@ -219,6 +219,7 @@ function DataTable({
   preset = "default",
   collapseBelow = "sm",
   rowClassName,
+  rowTone,
   rowSelection,
   expandable,
   summary,
@@ -431,6 +432,7 @@ function DataTable({
     preset,
     collapseBelow,
     rowClassName,
+    rowTone,
     bordered,
     scroll,
     sticky,
@@ -751,6 +753,7 @@ DataTable.Content = function DataTableContent() {
     preset,
     collapseBelow,
     rowClassName,
+    rowTone,
     bordered,
     scroll,
     sticky,
@@ -1106,6 +1109,7 @@ DataTable.Content = function DataTableContent() {
                       {
                         ...rowProps,
                         "data-state": isSelected ? "selected" : void 0,
+                        "data-tone": rowTone?.(original),
                         tabIndex: onRowClick ? 0 : rowProps.tabIndex,
                         onClick: (e) => {
                           rowProps.onClick?.(e);

package/dist/components/data-display/index.d.ts

@@ -1,5 +1,5 @@
 export { Badge, StatusBadge } from "./badge.js";
-export type { BadgeProps } from "./badge.js";
+export type { BadgeProps, BadgeTone } from "./badge.js";
 export { Legend } from "./legend.js";
 export type { LegendItemProp, LegendProp, LegendProps } from "./legend.js";
 export { ListRow } from "./list-row.js";

package/dist/components/data-display/popover.d.ts

@@ -33,7 +33,25 @@ export declare function PopoverAnchor({ asChild, ref, ...props }: PopoverAnchorP
 type PopoverContentFlush = {
     flush?: FlushProp;
 };
+/**
+ * How the panel is MEASURED across the inline axis.
+ *
+ * `"panel"` (default) is the popover's own measure, `--popover-width` (18rem) — right for prose and
+ * for a list the panel itself sizes. `"auto"` lets the CONTENT decide, which is the only correct
+ * answer for something that already has a width of its own: a two-month `Calendar` is far wider
+ * than 18rem and was being clipped by it. `"trigger"` matches the anchor, the shape every
+ * select-like control in this library wants.
+ *
+ * The axis exists because `flush` had no counterpart. The catalog's own rule says a panel must
+ * never zero its padding with a `p-0` utility, "that is a per-call-site constant no service theme
+ * can retune" — and until now the only way to get a content-width panel was exactly such a
+ * constant, `className="w-auto"`. The library's internal `.ui-control-panel-flush` has always set
+ * both knobs; this is the public half of it.
+ */
+type PopoverContentWidth = "panel" | "auto" | "trigger";
 interface PopoverContentProps extends React.ComponentPropsWithRef<"div">, PopoverContentFlush {
+    /** Inline measure of the panel — `panel` (default) · `auto` (content decides) · `trigger`. */
+    width?: PopoverContentWidth;
     /**
      * Render THIS panel somewhere other than the default. Almost always unnecessary: mounting the
      * whole tree in a shadow root is what `OverlayPortalProvider` is for, and it moves every overlay
@@ -73,7 +91,7 @@ interface PopoverContentProps extends React.ComponentPropsWithRef<"div">, Popove
      */
     onCloseAutoFocus?: (event: Event) => void;
 }
-export declare function PopoverContent({ className, style, children, ref, flush, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, sticky: _sticky, hideWhenDetached: _hideWhenDetached, forceMount: _forceMount, onOpenAutoFocus, onCloseAutoFocus, portalContainer, ...props }: PopoverContentProps): React.JSX.Element;
+export declare function PopoverContent({ className, style, children, ref, flush, width, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, sticky: _sticky, hideWhenDetached: _hideWhenDetached, forceMount: _forceMount, onOpenAutoFocus, onCloseAutoFocus, portalContainer, ...props }: PopoverContentProps): React.JSX.Element;
 export declare const PopoverHeader: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
 export declare const PopoverTitle: ({ className, id, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
 export declare const PopoverDescription: ({ className, id, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => React.JSX.Element;

package/dist/components/data-display/popover.js

@@ -126,12 +126,18 @@ function PopoverAnchor({ asChild, ref, ...props }) {
   }, [setAnchored]);
   return /* @__PURE__ */ jsx(Comp, { "data-slot": "popover-anchor", ...props, ref: mergeRefs(ref, root.anchorRef) });
 }
+const POPOVER_SURFACE_INLINE_SIZE = {
+  panel: null,
+  auto: "auto",
+  trigger: "var(--trigger-width)"
+};
 function PopoverContent({
   className,
   style,
   children,
   ref,
   flush,
+  width,
   side = "bottom",
   align = "center",
   sideOffset = 4,
@@ -214,6 +220,7 @@ function PopoverContent({
             "data-align": align,
             "data-state": isExiting ? "closed" : "open",
             "data-flush": flush ? "" : void 0,
+            "data-width": width && width !== "panel" ? width : void 0,
             ...props,
             "aria-labelledby": props["aria-labelledby"] ?? (props["aria-label"] ? void 0 : root.hasTitle ? root.titleId : root.triggerId),
             "aria-describedby": props["aria-describedby"] ?? (root.hasDescription ? root.descriptionId : void 0),
@@ -234,7 +241,8 @@ function PopoverContent({
                 "--radix-popover-content-available-height": typeof availableHeight === "number" ? `${availableHeight}px` : availableHeight
               },
               ...style,
-              ...flush ? { "--popover-space-inset": "0" } : null
+              ...flush ? { "--popover-space-inset": "0" } : null,
+              ...width && POPOVER_SURFACE_INLINE_SIZE[width] ? { "--popover-surface-inline-size": POPOVER_SURFACE_INLINE_SIZE[width] } : null
             },
             children
           }

package/dist/components/data-display/progress.d.ts

@@ -14,6 +14,20 @@ export type ProgressSegment = {
     label: string;
 };
 type ProgressBase = Omit<React.HTMLAttributes<HTMLDivElement>, "role" | "children" | "aria-valuenow" | "aria-valuemin" | "aria-valuemax" | "aria-valuetext"> & {
+    /**
+     * Bar thickness — `md` (default) or `sm`.
+     *
+     * `md` is the size each form was designed at, and it stays the default for the reason spelled
+     * out on the breakdown below: three abutting fills need height before their ratios are
+     * comparable. `sm` is for a bar that is not the subject of the screen but a column of one — an
+     * in-table capacity bar next to a row of numbers, where a 22px partition outweighs the row it
+     * annotates and sets the row height for the whole table.
+     *
+     * Both steps come from the same token pair (`--progress-*-block-size`,
+     * `--progress-*-block-size-sm`), so a theme retunes the scale rather than one call site. Nothing
+     * about the ARIA changes: `sm` is thickness, not meaning.
+     */
+    size?: "sm" | "md";
     /**
      * Visible caption under the bar; it also becomes the bar's accessible name. Omit it and the bar
      * falls back to the catalogue name — or to whatever `aria-label`/`aria-labelledby` the caller
@@ -21,10 +35,31 @@ type ProgressBase = Omit<React.HTMLAttributes<HTMLDivElement>, "role" | "childre
      */
     label?: string;
 };
+/**
+ * Geometry of the METER — the same measurement, drawn two ways.
+ *
+ * `bar` is the default and what every existing call site gets. `ring` draws the identical ratio as
+ * an arc, for a header with no room for a full-width bar: a phone app bar that has to show
+ * "18 of 42 done" beside a title has one square of space, and a bar plus its caption needs two
+ * stacked rows. Reach for it when the SPACE is square, not when the number is important — the two
+ * shapes say exactly the same thing and carry the same ARIA.
+ *
+ * It is a meter shape only. A ring around a `segments` breakdown is a pie chart, which is
+ * `PieChart donut` and belongs to the charts entry point; that one is a part-to-whole across
+ * CATEGORIES with a legend and tooltips, and a screen reader should hear it as an image, not as a
+ * progressbar.
+ */
+export type ProgressShape = "bar" | "ring";
 /** A METER: one ratio of one whole. */
 type ProgressMeterProps = ProgressBase & {
     value: number;
     tone?: ProgressTone;
+    /**
+     * `bar` (default) or `ring` — the same measurement drawn as a full-width bar or as an arc.
+     * `label` moves INSIDE the ring, which is the point of it: the readout and its proportion take
+     * one square instead of two stacked rows.
+     */
+    shape?: ProgressShape;
     /**
      * Allow `value` to exceed 100 and render an OVER-CAPACITY fill: the bar caps at 100% width but
      * gets a diagonal striped overlay + destructive tone, so an over-limit meter (e.g. 252% of a
@@ -57,6 +92,8 @@ type ProgressBreakdownProps = ProgressBase & {
     value?: never;
     tone?: never;
     over?: never;
+    /** A ring around a partition is a pie chart — that is `PieChart donut`, not this. */
+    shape?: never;
 };
 export type ProgressProps = ProgressMeterProps | ProgressBreakdownProps;
 export declare function Progress(props: ProgressProps): React.JSX.Element;

package/dist/components/data-display/progress.js

@@ -1,8 +1,12 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
+const RING_BOX = 40;
+const RING_CENTRE = RING_BOX / 2;
+const RING_RADIUS = 16;
+const RING_ROTATION = `rotate(-90 ${RING_CENTRE} ${RING_CENTRE})`;
 function Progress(props) {
   const { t } = useTranslation();
   const labelId = React.useId();
@@ -12,6 +16,8 @@ function Progress(props) {
     segments,
     value,
     tone,
+    size,
+    shape,
     over = false,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
@@ -30,6 +36,7 @@ function Progress(props) {
       {
         className: cn("ui-progress", className),
         "data-breakdown": "",
+        "data-size": size === "sm" ? "sm" : void 0,
         role: "img",
         "aria-labelledby": ariaLabelledBy,
         "aria-label": ariaLabelledBy !== void 0 ? void 0 : ariaLabel !== void 0 ? `${ariaLabel}${separator}${spoken}` : label !== void 0 ? `${label}${separator}${spoken}` : spoken,
@@ -53,12 +60,14 @@ function Progress(props) {
   const isOver = over && meterValue > 100;
   const boundedValue = Math.max(0, Math.min(100, meterValue));
   const effectiveTone = tone ?? (isOver ? "destructive" : "success");
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn("ui-progress", className),
       "data-tone": effectiveTone,
-      "data-over": isOver ? "" : void 0,
+      "data-size": size === "sm" ? "sm" : void 0,
+      "data-shape": shape === "ring" ? "ring" : void 0,
+      "data-over": isOver && shape !== "ring" ? "" : void 0,
       role: "progressbar",
       "aria-valuenow": boundedValue,
       "aria-valuemin": 0,
@@ -67,10 +76,53 @@ function Progress(props) {
       "aria-labelledby": labelledBy,
       "aria-label": labelledBy !== void 0 ? void 0 : named ? ariaLabel : t("dataDisplay.progress.ariaLabel"),
       ...domProps,
-      children: [
+      children: shape === "ring" ? (
+        /*
+         * The ARC is aria-hidden and the ring carries no text of its own for a screen reader: the
+         * element above is already `role="progressbar"` with `aria-valuenow`/`aria-valuetext`, so
+         * announcing the drawing as well would say the same number twice. `focusable="false"`
+         * because IE-era SVG semantics still reach some AT through the tab order.
+         */
+        /* @__PURE__ */ jsxs("div", { className: "ui-progress-ring", children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "ui-progress-ring-svg",
+              viewBox: `0 0 ${RING_BOX} ${RING_BOX}`,
+              "aria-hidden": "true",
+              focusable: "false",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "ui-progress-ring-track",
+                    cx: RING_CENTRE,
+                    cy: RING_CENTRE,
+                    r: RING_RADIUS,
+                    pathLength: 100
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "ui-progress-ring-indicator",
+                    cx: RING_CENTRE,
+                    cy: RING_CENTRE,
+                    r: RING_RADIUS,
+                    pathLength: 100,
+                    transform: RING_ROTATION,
+                    strokeDasharray: `${boundedValue} 100`
+                  }
+                )
+              ]
+            }
+          ),
+          label !== void 0 ? /* @__PURE__ */ jsx("div", { className: "ui-progress-ring-label", id: labelId, children: label }) : null
+        ] })
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("div", { className: "ui-progress-track", children: /* @__PURE__ */ jsx("div", { className: "ui-progress-bar", style: { width: `${boundedValue}%` } }) }),
         caption
-      ]
+      ] })
     }
   );
 }

package/dist/components/data-display/scroll-area.d.ts

@@ -1,6 +1,26 @@
 import * as React from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import type { ScrollAreaProp } from "../../props/components/data-display.prop.js";
-export type ScrollAreaProps = ScrollAreaProp & Omit<React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>, keyof ScrollAreaProp>;
-export declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProp & Omit<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref">, keyof ScrollAreaProp> & React.RefAttributes<HTMLDivElement>>;
-export declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type ScrollAreaProps = ScrollAreaProp & Omit<React.ComponentPropsWithoutRef<"div">, keyof ScrollAreaProp>;
+export declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProp & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof ScrollAreaProp> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Deliberately NOT exported: a deprecated no-op must not grow the package's public type surface.
+ * Nothing was exported for it before either — it used to be typed straight off Radix.
+ */
+type ScrollBarProps = {
+    orientation?: "vertical" | "horizontal";
+    className?: string;
+};
+/**
+ * @deprecated Renders nothing. Native scrolling has no separate bar element to mount: the browser
+ * draws the scrollbar for whichever axis overflows, and WHICH axes may overflow is
+ * `<ScrollArea orientation="vertical | horizontal | both">`.
+ *
+ * Under Radix, mounting a `ScrollBar` was what ENABLED its axis (Radix read `scrollbarXEnabled` /
+ * `scrollbarYEnabled` from these children and wrote the viewport's inline `overflowX`/`overflowY`
+ * from them), so `<ScrollBar orientation="horizontal" />` was load-bearing rather than decorative.
+ * It is kept as an inert export so existing call sites keep compiling; move the intent to
+ * `orientation` — `<ScrollArea orientation="both">` is the replacement for a vertical area that
+ * also mounted a horizontal bar.
+ */
+export declare function ScrollBar(_props: ScrollBarProps): null;
+export {};

package/dist/components/data-display/scroll-area.js

@@ -1,8 +1,6 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useLayoutEffect } from "@react-aria/utils";
+import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "../../lib/utils.js";
 const ANCHOR_OFFSET_TOKEN = "--scroll-area-anchor-offset";
 const ANCHOR_OFFSET_FALLBACK_PX = 48;
@@ -113,18 +111,6 @@ function useBottomAnchor(viewport, enabled, offset, onAnchoredChange) {
     };
   }, [viewport, enabled, offset]);
 }
-function useAmbientDirection(root, provided) {
-  const [ambient, setAmbient] = React.useState(void 0);
-  useLayoutEffect(() => {
-    if (provided !== void 0) return;
-    const parent = root?.parentElement;
-    if (!parent || typeof window === "undefined" || typeof window.getComputedStyle !== "function") {
-      return;
-    }
-    setAmbient(window.getComputedStyle(parent).direction === "rtl" ? "rtl" : "ltr");
-  }, [root, provided]);
-  return provided ?? ambient;
-}
 const ScrollArea = React.forwardRef(
   ({
     className,
@@ -134,75 +120,51 @@ const ScrollArea = React.forwardRef(
     anchorOffset,
     onAnchoredChange,
     orientation = "vertical",
-    dir,
     ...props
   }, ref) => {
     const [viewport, setViewport] = React.useState(null);
-    const [root, setRoot] = React.useState(null);
-    const attachRoot = React.useCallback(
-      (node) => {
-        setRoot(node);
-        if (typeof ref === "function") ref(node);
-        else if (ref) ref.current = node;
-      },
-      [ref]
-    );
-    const direction = useAmbientDirection(root, dir);
     const attachViewport = React.useCallback(
       (node) => {
         setViewport(node);
-        if (typeof viewportRef === "function") viewportRef(node);
-        else if (viewportRef)
-          viewportRef.current = node;
+        for (const target of [ref, viewportRef]) {
+          if (typeof target === "function") target(node);
+          else if (target) target.current = node;
+        }
       },
-      [viewportRef]
+      [ref, viewportRef]
     );
     useBottomAnchor(viewport, anchor === "bottom", anchorOffset, onAnchoredChange);
-    return /* @__PURE__ */ jsxs(
-      ScrollAreaPrimitive.Root,
-      {
-        ref: attachRoot,
-        dir: direction,
-        className: cn("relative overflow-hidden", className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
-            ScrollAreaPrimitive.Viewport,
-            {
-              ref: attachViewport,
-              tabIndex: 0,
-              "data-slot": "scroll-area-viewport",
-              "data-anchor": anchor,
-              "data-orientation": orientation,
-              className: "size-full rounded-[inherit]",
-              children
-            }
-          ),
-          orientation !== "horizontal" && /* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical" }),
-          orientation !== "vertical" && /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" }),
-          /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
-        ]
-      }
+    return (
+      // `tabIndex={0}` keeps the scroll viewport keyboard-reachable so overflowing content can be
+      // scrolled without a pointer (WCAG 2.1.1 / axe scrollable-region-focusable).
+      //
+      // NO `dir` IS STAMPED HERE, deliberately. Radix's Root called `useDirection(dir)`, which
+      // falls back to the literal "ltr" and writes it onto the element — and a `dir` attribute is
+      // not advisory: it resets the inline axis for the whole subtree, so every `margin-inline-*`,
+      // `text-align: start` and `align-items: flex-end` inside resolved LTR on an RTL page
+      // (measured in Chromium: a chat feed inside `dir="rtl"` kept its own bubbles on the wrong
+      // side). A plain element inherits the page's direction, which is the correct answer and
+      // needs no code. A caller may still pass `dir` explicitly; it rides through with the rest.
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: attachViewport,
+          tabIndex: 0,
+          "data-slot": "scroll-area-viewport",
+          "data-anchor": anchor,
+          "data-orientation": orientation,
+          className: cn("ui-scroll-area", className),
+          ...props,
+          children: /* @__PURE__ */ jsx("div", { "data-slot": "scroll-area-content", className: "ui-scroll-area-content", children })
+        }
+      )
     );
   }
 );
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
-  ScrollAreaPrimitive.ScrollAreaScrollbar,
-  {
-    ref,
-    orientation,
-    className: cn(
-      "ui-scroll-area-bar flex touch-none transition-colors select-none",
-      orientation === "vertical" && "ui-scroll-area-bar--vertical h-full border-s border-s-transparent",
-      orientation === "horizontal" && "ui-scroll-area-bar--horizontal flex-col border-t border-t-transparent",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "ui-scroll-area-thumb bg-border relative flex-1" })
-  }
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+ScrollArea.displayName = "ScrollArea";
+function ScrollBar(_props) {
+  return null;
+}
 export {
   ScrollArea,
   ScrollBar

package/dist/components/data-entry/cascader.js

@@ -13,7 +13,7 @@ import {
   resolveAriaInvalid
 } from "./control-surface.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
-import { ScrollArea, ScrollBar } from "../data-display/scroll-area.js";
+import { ScrollArea } from "../data-display/scroll-area.js";
 import { Command, CommandInput } from "./command.js";
 import {
   filterTreeOptions,
@@ -311,8 +311,11 @@ function Cascader({
     if (multiple) commitMulti([]);
     else commitSingle([]);
   };
-  const renderCascadeColumns = () => /* @__PURE__ */ jsxs(ScrollArea, { className: "w-full", children: [
-    /* @__PURE__ */ jsx("div", { className: "ui-cascader-columns", children: columns.map((col, colIndex) => /* @__PURE__ */ jsx(
+  const renderCascadeColumns = () => (
+    // `both`: the columns strip overflows sideways, and a tall column scrolls down. Under Radix
+    // this was a vertical area plus a mounted `<ScrollBar orientation="horizontal" />`, which was
+    // how Radix was told to open the second axis at all.
+    /* @__PURE__ */ jsx(ScrollArea, { className: "w-full", orientation: "both", children: /* @__PURE__ */ jsx("div", { className: "ui-cascader-columns", children: columns.map((col, colIndex) => /* @__PURE__ */ jsx(
       "ul",
       {
         role: "listbox",
@@ -371,9 +374,8 @@ function Cascader({
         })
       },
       colIndex
-    )) }),
-    /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" })
-  ] });
+    )) }) })
+  );
   const clearControl = resolveAllowClear(allowClear, true, t("dataEntry.cascader.clear"));
   const showClear = clearControl.enabled && hasValue && !disabled && !readOnly && !loading;
   const surface = controlSurfaceAttrs({ variant, status, size });