@godxjp/ui 20.2.1 → 22.0.0

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/chat-bubble.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import type { ChatBubbleListProp, ChatBubbleProp } from "../../props/components/data-display.prop.js";
+export type { ChatBubbleListProp, ChatBubblePlacementProp, ChatBubbleProp, ChatBubbleToneProp, ChatBubbleTypingProp, ChatBubbleVariantProp, ChatMessageProp, } from "../../props/components/data-display.prop.js";
+export type ChatBubbleProps = ChatBubbleProp & Omit<React.HTMLAttributes<HTMLElement>, keyof ChatBubbleProp>;
+/**
+ * ChatBubble — ONE message in a conversation: an optional author mark, a header naming the turn,
+ * the message body, and a footer for timestamps or per-message actions.
+ *
+ * It is an `<article>` inside the feed's `role="log"`, and it deliberately owns NO live region of
+ * its own: one live region per bubble floods a screen reader on every token of a stream. The feed
+ * (`ChatBubbleList`) owns the single `aria-live="polite"` region; a bubble only ever says "I am
+ * still being produced" through `aria-busy`.
+ */
+export declare const ChatBubble: React.ForwardRefExoticComponent<ChatBubbleProp & Omit<React.HTMLAttributes<HTMLElement>, keyof ChatBubbleProp> & React.RefAttributes<HTMLElement>>;
+export type ChatBubbleListProps = ChatBubbleListProp & Omit<React.HTMLAttributes<HTMLDivElement>, keyof ChatBubbleListProp>;
+/**
+ * ChatBubbleList — the message feed.
+ *
+ * The behaviour that earns this a component rather than a `ScrollArea` + `map` is STICK-TO-BOTTOM:
+ * new messages keep the viewport pinned only while the reader is ALREADY at the bottom. The moment
+ * they scroll up to re-read something the pin is revoked and stays revoked until they ask for it
+ * back — silently yanking a reader to the newest message mid-sentence is a change of context they
+ * did not request (WCAG 3.2.5), and it is the classic chat-UI defect. The way back is a real,
+ * focusable button that also says how many messages arrived while they were away.
+ *
+ * GIVE IT A DEFINITE HEIGHT — `className="h-96"`, or a flex/grid parent that hands it a track.
+ * The feed scrolls INSIDE itself; with no height it simply grows to its content, nothing ever
+ * overflows, and every behaviour above has nothing to act on.
+ */
+export declare const ChatBubbleList: React.ForwardRefExoticComponent<ChatBubbleListProp & Omit<React.HTMLAttributes<HTMLDivElement>, keyof ChatBubbleListProp> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/chat-bubble.js

@@ -0,0 +1,229 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowDown } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { useMediaQuery } from "../../lib/hooks.js";
+import { cn } from "../../lib/utils.js";
+import { Skeleton } from "../feedback/skeleton.js";
+import { Button } from "../general/button.js";
+import { Text } from "../general/typography.js";
+import { VisuallyHidden } from "../general/visually-hidden.js";
+import { ScrollArea } from "./scroll-area.js";
+const BODY_SIZE = {
+  xs: "2xs",
+  sm: "xs",
+  md: "sm",
+  lg: "lg"
+};
+const META_SIZE = {
+  xs: "2xs",
+  sm: "2xs",
+  md: "xs",
+  lg: "sm"
+};
+const TYPING_STEP = 1;
+const TYPING_INTERVAL = 50;
+function resolveTyping(typing) {
+  if (typing === void 0 || typing === false) {
+    return { enabled: false, step: TYPING_STEP, interval: TYPING_INTERVAL };
+  }
+  if (typing === true) return { enabled: true, step: TYPING_STEP, interval: TYPING_INTERVAL };
+  return {
+    enabled: true,
+    // A non-positive step would never reach the end of the string and a non-positive interval
+    // would spin the timer — both are "the animation never completes", which is the one outcome
+    // a reader can neither read nor dismiss.
+    step: typing.step != null && typing.step > 0 ? Math.floor(typing.step) : TYPING_STEP,
+    interval: typing.interval != null && typing.interval > 0 ? typing.interval : TYPING_INTERVAL
+  };
+}
+function useRevealedLength(text, enabled, step, interval) {
+  const full = text?.length ?? 0;
+  const [revealed, setRevealed] = React.useState(() => enabled ? 0 : full);
+  React.useEffect(() => {
+    if (!enabled || text === void 0) {
+      setRevealed(text?.length ?? 0);
+      return void 0;
+    }
+    setRevealed(0);
+    let shown = 0;
+    const timer = setInterval(() => {
+      shown = Math.min(text.length, shown + step);
+      setRevealed(shown);
+      if (shown >= text.length) clearInterval(timer);
+    }, interval);
+    return () => {
+      clearInterval(timer);
+    };
+  }, [text, enabled, step, interval]);
+  return Math.min(revealed, full);
+}
+const TONE_KEY = {
+  info: "chat.bubble.tone.info",
+  success: "chat.bubble.tone.success",
+  warning: "chat.bubble.tone.warning",
+  destructive: "chat.bubble.tone.destructive"
+};
+const ChatBubble = React.forwardRef(
+  ({
+    children,
+    placement = "start",
+    variant = "filled",
+    avatar,
+    header,
+    footer,
+    loading = false,
+    typing,
+    size = "md",
+    tone = "default",
+    className,
+    id,
+    ...props
+  }, ref) => {
+    const { t } = useTranslation();
+    const generatedId = React.useId();
+    const headerId = `${id ?? generatedId}-header`;
+    const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+    const text = typeof children === "string" ? children : void 0;
+    const { enabled, step, interval } = resolveTyping(typing);
+    const animates = enabled && !loading && text !== void 0 && !reduceMotion;
+    const revealed = useRevealedLength(text, animates, step, interval);
+    const streaming = animates && revealed < (text?.length ?? 0);
+    const body = loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "ui-chat-bubble-skeleton", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "ui-chat-bubble-skeleton-line" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "ui-chat-bubble-skeleton-line ui-chat-bubble-skeleton-line--short" })
+      ] }),
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: t("chat.bubble.loading") })
+    ] }) : streaming ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Text, { as: "div", size: BODY_SIZE[size], whitespace: "pre-wrap", "aria-hidden": "true", children: [
+        text?.slice(0, revealed),
+        /* @__PURE__ */ jsx("span", { className: "ui-chat-bubble-caret" })
+      ] }),
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: t("chat.bubble.typing") })
+    ] }) : /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "div",
+        size: BODY_SIZE[size],
+        whitespace: text !== void 0 ? "pre-wrap" : void 0,
+        children
+      }
+    );
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        ref,
+        id,
+        "data-slot": "chat-bubble",
+        "data-placement": placement,
+        "data-variant": variant,
+        "data-size": size,
+        "data-tone": tone,
+        "aria-busy": loading || streaming ? true : void 0,
+        "aria-labelledby": header != null ? headerId : void 0,
+        className: cn("ui-chat-bubble", className),
+        ...props,
+        children: [
+          avatar != null ? /* @__PURE__ */ jsx("span", { "data-slot": "chat-bubble-avatar", className: "ui-chat-bubble-avatar", children: avatar }) : null,
+          /* @__PURE__ */ jsxs("div", { "data-slot": "chat-bubble-column", className: "ui-chat-bubble-column", children: [
+            header != null ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                as: "div",
+                id: headerId,
+                className: "ui-chat-bubble-header",
+                size: META_SIZE[size],
+                tone: "muted",
+                weight: "medium",
+                children: header
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs("div", { "data-slot": "chat-bubble-body", className: "ui-chat-bubble-body", children: [
+              tone !== "default" ? /* @__PURE__ */ jsx(VisuallyHidden, { children: t(TONE_KEY[tone]) }) : null,
+              body
+            ] }),
+            footer != null ? /* @__PURE__ */ jsx(Text, { as: "div", className: "ui-chat-bubble-footer", size: META_SIZE[size], tone: "muted", children: footer }) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+ChatBubble.displayName = "ChatBubble";
+const ChatBubbleList = React.forwardRef(
+  ({ items, roles, autoScroll = true, label, className, id, ...props }, ref) => {
+    const { t } = useTranslation();
+    const viewportRef = React.useRef(null);
+    const [anchored, setAnchored] = React.useState(true);
+    const seen = React.useRef(items.length);
+    React.useEffect(() => {
+      if (anchored) seen.current = items.length;
+    }, [anchored, items.length]);
+    const pending = anchored ? 0 : Math.max(0, items.length - seen.current);
+    const jumpToLatest = React.useCallback(() => {
+      const viewport = viewportRef.current;
+      if (viewport) {
+        const bottom = Math.max(0, viewport.scrollHeight - viewport.clientHeight);
+        if (typeof viewport.scrollTo === "function") {
+          viewport.scrollTo({ top: bottom, behavior: "instant" });
+        } else {
+          viewport.scrollTop = bottom;
+        }
+      }
+      setAnchored(true);
+    }, []);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        id,
+        "data-slot": "chat-bubble-list",
+        "data-anchored": anchored ? "" : void 0,
+        className: cn("ui-chat-bubble-list", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            ScrollArea,
+            {
+              className: "ui-chat-bubble-list-scroller",
+              anchor: autoScroll ? "bottom" : "none",
+              viewportRef,
+              onAnchoredChange: setAnchored,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "log",
+                  "aria-live": "polite",
+                  "aria-label": label ?? t("chat.list.label"),
+                  "data-slot": "chat-bubble-list-feed",
+                  className: "ui-chat-bubble-list-feed",
+                  children: items.map(({ id: messageId, role, content, ...message }) => /* @__PURE__ */ jsx(
+                    ChatBubble,
+                    {
+                      id: messageId,
+                      ...role != null ? roles?.[role] : void 0,
+                      ...message,
+                      children: content
+                    },
+                    messageId
+                  ))
+                }
+              )
+            }
+          ),
+          anchored ? null : /* @__PURE__ */ jsx("div", { "data-slot": "chat-bubble-list-jump", className: "ui-chat-bubble-list-jump", children: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", variant: "secondary", shape: "pill", onClick: jumpToLatest, children: [
+            /* @__PURE__ */ jsx(ArrowDown, { "aria-hidden": "true" }),
+            pending > 0 ? t("chat.list.newMessages", { count: pending }) : t("chat.list.jumpToLatest")
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+ChatBubbleList.displayName = "ChatBubbleList";
+export {
+  ChatBubble,
+  ChatBubbleList
+};

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

@@ -104,7 +104,10 @@ function DescriptionsItem({ label, mono, span, className, children }) {
             "data-slot": "descriptions-label",
             "data-label-align": endAlignedLabel ? "end" : void 0,
             className: cn(
-              "text-muted-foreground text-xs",
+              // Size comes from the token pair, NOT from `text-xs`: a hard-coded utility here left the
+              // label one type step below the value beside it, and out of reach of a service theme.
+              // The muted colour is what distinguishes a label from its value.
+              "text-muted-foreground text-[length:var(--descriptions-label-font-size)] leading-[var(--descriptions-label-line-height)]",
               // `end`-align only ever applies in horizontal layout — same guard `Form` uses, so a
               endAlignedLabel && "text-end"
             ),

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";
@@ -26,8 +26,6 @@ export type { CodeBlockProp, CodeBlockProps } from "./code-block.js";
 export { Prose } from "./prose.js";
 export type { ProseProp, ProseProps } from "./prose.js";
 export type { ProgressProps, ProgressSegment, ProgressTone } from "./progress.js";
-export { TreeList } from "./tree-list.js";
-export type { TreeListItem, TreeListProps } from "./tree-list.js";
 export { Timeline } from "./timeline.js";
 export type { TimelineItem, TimelineProps } from "./timeline.js";
 export { TimelineGrid } from "./timeline-grid.js";
@@ -43,3 +41,7 @@ export { PermissionMatrix } from "./permission-matrix.js";
 export type { PermissionMatrixGrantsProp, PermissionMatrixPermissionProp, PermissionMatrixProp, PermissionMatrixProps, PermissionMatrixRoleProp, } from "./permission-matrix.js";
 export { RangeTimeline } from "./range-timeline.js";
 export type { RangeTimelineProps, RangeTimelineRow } from "./range-timeline.js";
+export { ChatBubble, ChatBubbleList } from "./chat-bubble.js";
+export type { ChatBubbleListProp, ChatBubbleListProps, ChatBubblePlacementProp, ChatBubbleProp, ChatBubbleProps, ChatBubbleToneProp, ChatBubbleTypingProp, ChatBubbleVariantProp, ChatMessageProp, } from "./chat-bubble.js";
+export { Tree } from "./tree.js";
+export type { TreeNodeProp, TreeProp, TreeProps } from "./tree.js";

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

@@ -28,7 +28,6 @@ import { EmptyState } from "./empty-state.js";
 import { Progress } from "./progress.js";
 import { CodeBlock } from "./code-block.js";
 import { Prose } from "./prose.js";
-import { TreeList } from "./tree-list.js";
 import { Timeline } from "./timeline.js";
 import { TimelineGrid } from "./timeline-grid.js";
 import {
@@ -55,6 +54,8 @@ import {
 } from "./carousel.js";
 import { PermissionMatrix } from "./permission-matrix.js";
 import { RangeTimeline } from "./range-timeline.js";
+import { ChatBubble, ChatBubbleList } from "./chat-bubble.js";
+import { Tree } from "./tree.js";
 export {
   Accordion,
   AccordionContent,
@@ -79,6 +80,8 @@ export {
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
+  ChatBubble,
+  ChatBubbleList,
   CodeBlock,
   Collapsible,
   CollapsibleContent,
@@ -119,7 +122,7 @@ export {
   TableRow,
   Timeline,
   TimelineGrid,
-  TreeList,
+  Tree,
   flexRender,
   useCarousel
 };

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,
@@ -165,7 +171,7 @@ function PopoverContent({
       }
     }
   }, [root.open]);
-  const { open, setOpen, triggerRef } = root;
+  const { open, setOpen, triggerRef, anchorRef, anchored } = root;
   React.useEffect(() => {
     if (!open) return;
     const onPointerDown = (event) => {
@@ -173,11 +179,12 @@ function PopoverContent({
       if (!target) return;
       if (contentRef.current?.contains(target)) return;
       if (triggerRef.current?.contains(target)) return;
+      if (anchored && anchorRef.current?.contains(target)) return;
       setOpen(false);
     };
     document.addEventListener("pointerdown", onPointerDown);
     return () => document.removeEventListener("pointerdown", onPointerDown);
-  }, [open, setOpen, triggerRef]);
+  }, [open, setOpen, triggerRef, anchorRef, anchored]);
   const overlayPortalContainer = useOverlayPortalContainer(portalContainer);
   return /* @__PURE__ */ jsx(
     AriaPopover,
@@ -213,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),
@@ -233,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;