@godxjp/ui 28.5.0 → 28.7.0

package/dist/components/navigation/app-setting-picker.js

@@ -186,10 +186,27 @@ const AppSettingPicker = React.forwardRef(
                   )
                 ) : (
                   // Labeled: sized to a per-kind width from `sm` up; below `sm` it hugs its content and
-                  // A form field that wants a full-width control passes
-                  // `className="w-full"`, which wins over `w-auto`.
                   // `compact` drops the per-kind width entirely so the trigger hugs its value.
-                  cn("w-auto max-w-full", !isCompact && "ui-app-setting-picker-trigger")
+                  //
+                  // The width is a UTILITY READING A TOKEN, for the third time in this file's
+                  // history and for the same reason (gh#366 icon, gh#375 Select, gh#819 here):
+                  // @layer utilities is ordered after @layer components, so the `w-auto` that
+                  // stood here outranked `.ui-app-setting-picker-trigger[data-kind]`'s
+                  // `inline-size` and every one of the eight per-kind tokens was inert — a
+                  // consumer who retuned --app-setting-picker-density-width saw nothing move.
+                  // `--app-setting-picker-trigger-width` is what `data-kind` resolves in
+                  // navigation-layout.css (a custom property, which no utility competes with);
+                  // it defaults to `auto`, so below the breakpoint and under `compact` this is
+                  // byte-for-byte the old `w-auto` behaviour.
+                  //
+                  // It stays a SINGLE unprefixed `w-*` (not `sm:w-[…]` per kind): `cn` is
+                  // tailwind-merge, so a form field that wants a full-width control still passes
+                  // `className="w-full"` and REPLACES this one. A `sm:`-variant utility would
+                  // survive that merge and quietly ignore the consumer above 40rem.
+                  cn(
+                    "w-[length:var(--app-setting-picker-trigger-width)] max-w-full",
+                    !isCompact && "ui-app-setting-picker-trigger"
+                  )
                 ),
                 // Compact re-tiers the box through tokens (--app-setting-picker-compact-*); the height
                 // still comes from the official --control-height-sm tier, never a literal. The gap is a

package/dist/components/ui/password-input.d.ts

@@ -18,7 +18,7 @@ export type PasswordInputProps = Omit<React.ComponentPropsWithoutRef<typeof Inpu
 };
 export declare const PasswordInput: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix" | "size"> & {
     onValueChange?: (value: string) => void;
-    size?: "sm" | "md" | "lg";
+    size?: "xs" | "sm" | "md" | "lg";
     status?: import("../../props/index.js").ControlStatusProp;
     variant?: import("../../props/index.js").ControlVariantProp;
     allowClear?: import("../../props/index.js").AllowClearProp;

package/dist/components/ui/table.js

@@ -1 +1,2 @@
+"use client";
 export * from "../data-display/table.js";

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "28.5.0",
+  "version": "28.7.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -325,6 +325,9 @@
       "ariaLabel": "Progress",
       "breakdownSeparator": ", "
     },
+    "scrollArea": {
+      "region": "Scrollable region"
+    },
     "tree": {
       "expand": "Expand",
       "collapse": "Collapse",
@@ -537,7 +540,8 @@
     "sortAscending": "Sort ascending",
     "sortDescending": "Sort descending",
     "sortCancel": "Cancel sort",
-    "selectColumn": "Select"
+    "selectColumn": "Select",
+    "scrollRegion": "Scrollable table"
   },
   "dataGrid": {
     "search": "Search",

package/dist/i18n/messages/ja.json

@@ -318,6 +318,9 @@
       "ariaLabel": "進捗",
       "breakdownSeparator": "、"
     },
+    "scrollArea": {
+      "region": "スクロール可能な領域"
+    },
     "tree": {
       "expand": "展開",
       "collapse": "折りたたむ",
@@ -524,7 +527,8 @@
     "sortAscending": "昇順に並べ替え",
     "sortDescending": "降順に並べ替え",
     "sortCancel": "並べ替えを解除",
-    "selectColumn": "選択"
+    "selectColumn": "選択",
+    "scrollRegion": "スクロール可能な表"
   },
   "dataGrid": {
     "search": "検索",

package/dist/i18n/messages/vi.json

@@ -319,6 +319,9 @@
       "ariaLabel": "Tiến độ",
       "breakdownSeparator": ", "
     },
+    "scrollArea": {
+      "region": "Vùng có thể cuộn"
+    },
     "tree": {
       "expand": "Mở rộng",
       "collapse": "Thu gọn",
@@ -525,7 +528,8 @@
     "sortAscending": "Sắp xếp tăng dần",
     "sortDescending": "Sắp xếp giảm dần",
     "sortCancel": "Bỏ sắp xếp",
-    "selectColumn": "Chọn"
+    "selectColumn": "Chọn",
+    "scrollRegion": "Bảng có thể cuộn"
   },
   "dataGrid": {
     "search": "Tìm kiếm",

package/dist/lib/control-styles.d.ts

@@ -30,11 +30,26 @@ export declare const controlOpenRingClass = "ui-control-trigger";
  * `--control-bounded-width` in gh#375). A control that wants the antd `variant` × `status` matrix
  * therefore composes THIS class plus `ui-control-surface`, which supplies the identical resting
  * border and fill from `--control-surface-*`.
+ *
+ * TRUNCATION HAS TO READ AS TRUNCATION (gh#813). `line-clamp-1` clips the value and — inside the
+ * trigger's `whitespace-nowrap` — never reaches a second line, so its own ellipsis never engages:
+ * `YYYY-MM-DD（年-月-日）` in a 101px value box showed `YYYY-MM-DD（全`, a format string cut through
+ * the middle of a glyph, with nothing to say it had been cut. Two declarations because the two
+ * engines ellipsize by different mechanisms, both measured on
+ * `/isolate/navigation-app-setting-picker` (dateFormat, ja, 1280×1000, value box 101px / text
+ * 160px):
+ *
+ *   text-ellipsis      Blink honours `text-overflow` on the clamped box → `YYYY-MM-DD…`.
+ *                      Gecko ignores it there (still `YYYY-MM-DD（全`).
+ *   whitespace-normal  lets `-webkit-line-clamp` clamp a real line, which is the ellipsis Gecko
+ *                      DOES paint → `YYYY-MM-D…` in Firefox, `YYYY-MM-DD…` in Chromium.
+ *
+ * The clamp keeps it to one line, so a wrappable value cannot grow the control.
  */
-export declare const controlTriggerBaseClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1";
-export declare const controlTriggerClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 border-input bg-background";
+export declare const controlTriggerBaseClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis";
+export declare const controlTriggerClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis border-input bg-background";
 /** `controlTriggerBaseClass` + the token-driven surface — the select-family trigger. */
-export declare const controlSurfaceTriggerClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 ui-control-surface";
+export declare const controlSurfaceTriggerClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis ui-control-surface";
 export declare const controlIconClass = "size-[length:var(--control-height)] shrink-0";
 export declare const controlIconSmClass = "size-[calc(var(--control-height)-0.5rem)] shrink-0";
 /** Leading/affix icon inside an input row (search, command) — sized to `--control-icon-size`. */

package/dist/lib/control-styles.js

@@ -2,7 +2,7 @@ const controlMultilineClass = "ui-control-multiline aria-invalid:border-destruct
 const controlMultilineGhostClass = "ui-control-multiline data-[status=error]:border-destructive data-[status=warning]:border-warning w-full min-h-0 border-0 bg-transparent shadow-none placeholder:text-muted-foreground focus-visible:ring-0";
 const controlMultilineFilledClass = "ui-control-multiline ui-control--filled aria-invalid:border-destructive data-[status=error]:border-destructive data-[status=warning]:border-warning w-full rounded-[var(--control-radius)] ring-offset-background placeholder:text-muted-foreground";
 const controlOpenRingClass = "ui-control-trigger";
-const controlTriggerBaseClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1";
+const controlTriggerBaseClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis";
 const controlTriggerClass = `${controlTriggerBaseClass} border-input bg-background`;
 const controlSurfaceTriggerClass = `${controlTriggerBaseClass} ui-control-surface`;
 const controlIconClass = "size-[length:var(--control-height)] shrink-0";

package/dist/lib/hooks.d.ts

@@ -1,3 +1,4 @@
+import { type RefObject } from "react";
 /**
  * Returns a debounced view of `value`, updated only after `delay` ms of no
  * change. Use for search inputs to avoid querying on every keystroke.
@@ -37,3 +38,25 @@ export declare function useIsMobile(): boolean;
  * @param element the scroll container itself (state, not a ref, so the effect re-runs when it mounts)
  */
 export declare function useScrollableRegionTabIndex(element: HTMLElement | null): void;
+/**
+ * Does this scroll box actually have somewhere to scroll, on the axes it is allowed to scroll on?
+ *
+ * Drives BOTH halves of a scroll region: the `tabindex="0"` a keyboard user needs to reach the
+ * overflow (WCAG 2.1.1 / axe `scrollable-region-focusable`) AND the `role`/name that stop needs in
+ * order not to be an anonymous one (gh#817 for the table, gh#821 for `ScrollArea`). A stop that
+ * scrolls nothing is pure noise, and a name on it is noise too, so both are withheld until there is
+ * overflow to reach.
+ *
+ * The measurement may only ever REMOVE the stop, never withhold it on a guess: a box that has not
+ * been laid out reports 0 for `clientWidth`/`clientHeight` (the server render, jsdom, a
+ * `display:none` ancestor, the frame before first layout), and that is not evidence that nothing
+ * overflows. Reading it as "no overflow" would strand the overflow from every keyboard user — a
+ * worse failure than an extra tab stop — so an unmeasured box counts as scrolling.
+ *
+ * `axis` is the box's OWN `overflow`, not a preference: an axis it does not scroll on is `hidden`
+ * there, so overflow on that axis is CLIPPED rather than reachable, and measuring it would keep a
+ * tab stop that scrolls nothing. `ScrollArea`'s `orientation` is exactly this union.
+ */
+export declare function useScrollsOnAxis(ref: RefObject<HTMLElement | null>, enabled: boolean, axis: "horizontal" | "vertical" | "both"): boolean;
+/** A table's wrapper scrolls on one axis only, so it asks the one question it has (gh#817). */
+export declare function useScrollsHorizontally(ref: RefObject<HTMLElement | null>, enabled: boolean): boolean;

package/dist/lib/hooks.js

@@ -104,11 +104,38 @@ function useScrollableRegionTabIndex(element) {
     };
   }, [element]);
 }
+function useScrollsOnAxis(ref, enabled, axis) {
+  const [scrolls, setScrolls] = useState(true);
+  useEffect(() => {
+    const el = ref.current;
+    if (!enabled || !el) return void 0;
+    const overflows = (client, scroll) => client === 0 || scroll - client > 1;
+    const update = () => {
+      setScrolls(
+        axis !== "vertical" && overflows(el.clientWidth, el.scrollWidth) || axis !== "horizontal" && overflows(el.clientHeight, el.scrollHeight)
+      );
+    };
+    update();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(update);
+    observer.observe(el);
+    if (el.firstElementChild) observer.observe(el.firstElementChild);
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref, enabled, axis]);
+  return enabled && scrolls;
+}
+function useScrollsHorizontally(ref, enabled) {
+  return useScrollsOnAxis(ref, enabled, "horizontal");
+}
 export {
   useControlledLatch,
   useDebouncedValue,
   useIsMobile,
   useMediaQuery,
   useScrollableRegionTabIndex,
+  useScrollsHorizontally,
+  useScrollsOnAxis,
   useTimeoutFlag
 };

package/dist/props/components/data-display.prop.d.ts

@@ -605,6 +605,20 @@ export type ScrollAreaProp = {
      * from it — anchoring must never be the only route back to new content.
      */
     onAnchoredChange?: (anchored: boolean) => void;
+    /**
+     * Accessible name for the scroll REGION — the `tabindex="0"` element a keyboard user lands on to
+     * scroll content taller or wider than the box.
+     *
+     * Optional on purpose. A consumer is never forced to invent a name for every scrolling box: left
+     * out, the region takes the localized `dataDisplay.scrollArea.region` default ("Scrollable
+     * region"), which is what a screen-reader user needs to hear anyway — that the arrow keys now
+     * scroll something. Pass a plain string when the screen can say WHICH region ("Activity log"); a
+     * non-string node cannot be an `aria-label`, so it falls back to the default.
+     *
+     * The region is only announced while it HAS overflow to reach, on the axes `orientation` opens:
+     * no overflow, no tab stop, no role and no name. (gh#821)
+     */
+    label?: LabelProp;
 };
 /**
  * @see TimelineGrid — one COLUMN of the grid (a day, a room, a machine). The label names the

package/dist/props/components/data-entry.prop.d.ts

@@ -126,8 +126,18 @@ export type CommandProp = {
 };
 export type InputProp = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> & {
     onValueChange?: (value: string) => void;
-    /** Control height tier: `md` (default), `sm` or `lg` — the same tiers as SelectTrigger. */
-    size?: "sm" | "md" | "lg";
+    /**
+     * Control height tier: `md` (default), plus `xs`, `sm` and `lg` — the same tiers as
+     * SelectTrigger and NumberInput.
+     *
+     * `xs` was missing from this union alone. Everything underneath it already worked: `Input`
+     * renders `ui-control` and emits `data-size={size}`, and `.ui-control[data-size="xs"]`
+     * (src/styles/control.css:1674) binds `--control-height-xs`. That rule was added for the
+     * select family — its comment says the token "existed with nothing reading it" — and this
+     * union was never widened to match, so the most-used control in the package was the one
+     * control missing the bottom rung, for a reason no user could have guessed from behaviour.
+     */
+    size?: "xs" | "sm" | "md" | "lg";
     /** Validation state the field paints — antd `status`. `error` also reports `aria-invalid`. */
     status?: ControlStatusProp;
     /** Chrome level — antd `variant`. Default `outlined`. */
@@ -547,7 +557,31 @@ export type SwitchProp = Omit<React.ComponentPropsWithoutRef<"button">, "checked
 export type FieldProp = {
     id: IdProp;
     label: LabelProp;
+    /**
+     * Optional content rendered BESIDE the label and OUTSIDE the `<label>` element — a help
+     * button, a Tooltip trigger, a status chip, a short text action. `FormField.labelAddon` with
+     * the same semantics, and it has to live outside the label for a reason this row has that a
+     * stacked field does not: `Field`'s label is a real `<label htmlFor>` pointing at a
+     * checkbox / radio / switch, so a browser forwards a click anywhere inside it to that
+     * control. An interactive addon passed through `label` therefore TOGGLES the control when
+     * pressed (gh#812). A non-interactive mark (a `Badge as="span"`) is still fine inside
+     * `label`; anything pressable belongs here.
+     */
+    labelAddon?: React.ReactNode;
+    /**
+     * Muted hint under the label. Announced with the control (`aria-describedby`) rather than
+     * left as decoration, and it COMPOSES with `error` — `.ui-choice-content` is already a
+     * vertical stack, so the two lines sit under each other exactly as they do on `FormField`.
+     */
     description?: React.ReactNode;
+    /**
+     * Validation message under the description (`role="alert"`). Presence of a message IS the
+     * invalid state: the control is cloned with `aria-invalid`, and the message id reaches it
+     * through `aria-errormessage` AND `aria-describedby` (see field.tsx — react-aria's hidden
+     * input drops the former). This is the slot that lets a validated boolean stay in `Field`:
+     * `FormField` must not wrap a bare `Switch`, so before this there was nowhere to put it.
+     */
+    error?: ErrorProp;
     className?: ClassNameProp;
     children: React.ReactNode;
 };

package/dist/props/components/layout.prop.d.ts

@@ -932,11 +932,14 @@ export type SidebarItemProp = {
     id: string;
     label: string;
     /**
-     * Leading 16px glyph — REQUIRED: the collapsed rail is icon-only and the expanded rail aligns
-     * every label to the icon column. Its colour is themeable separately from the label via
+     * Leading 16px glyph. STRONGLY RECOMMENDED on the rail — the collapsed rail is icon-only, so a
+     * row without one reads as a hole there — but OPTIONAL at the type level (gh#815): the runtime
+     * has always rendered an empty `.sb-icon` box for a row whose data carries no glyph, precisely
+     * so the label column still aligns, and `NavList` (which has no collapsed rail) routinely mixes
+     * rows with and without one. Its colour is themeable separately from the label via
      * `--sidebar-nav-icon-foreground` (see {@link SidebarProp}).
      */
-    icon: ComponentType<SVGProps<SVGSVGElement>>;
+    icon?: ComponentType<SVGProps<SVGSVGElement>>;
     /**
      * Count/status affix rendered in the row's `.sb-badge` pill. Pass the CONTENT ONLY — a number, a
      * string, `"9+"`.
@@ -968,7 +971,11 @@ export type SidebarItemProp = {
      * right-click / open-in-new-tab / middle-click all work.
      */
     href?: string;
-    /** Nested rows — renders a collapsible submenu group (the parent reads active when any child is). */
+    /**
+     * Nested rows — renders a collapsible submenu group (the parent reads active when any child is).
+     * Honoured by BOTH `Sidebar` and `NavList` (gh#815): `NavList` used to map `items` straight to a
+     * row, so a nested group type-checked, rendered as one flat row and lost its children silently.
+     */
     children?: SidebarItemProp[];
 };
 /**
@@ -979,7 +986,11 @@ export type SidebarItemProp = {
  * learn a second one, and a fix to the row reaches both.
  */
 export type NavListProp = Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> & {
-    /** Rows, in reading order. `icon` is required by `SidebarItemProp` — the label aligns to it. */
+    /**
+     * Rows, in reading order. An item carrying `children` renders as a collapsible GROUP — the same
+     * `.sb-nav-group` the rail draws, opened by the route whenever a descendant is active — so a
+     * grouped settings nav is one `NavList` and one `<nav>` landmark, not one per group (gh#815).
+     */
     items: SidebarItemProp[];
     /** `SidebarItemProp.id` of the current route; that row gets `aria-current="page"`. */
     activeId?: string;

package/dist/props/registry.d.ts

@@ -1470,7 +1470,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly FieldProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry.prop.ts";
-        readonly vocabulary: readonly ["IdProp", "LabelProp", "DescriptionProp", "ClassNameProp", "ChildrenProp"];
+        readonly vocabulary: readonly ["IdProp", "LabelProp", "DescriptionProp", "ErrorProp", "ClassNameProp", "ChildrenProp"];
     };
     readonly SliderProp: {
         readonly group: "data-entry";
@@ -1851,7 +1851,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly field: "onAnchoredChange";
             readonly local: true;
             readonly reason: 'Pinned-state change handler (boolean), so the consumer can render its own focusable "jump to newest" affordance.';
-        }];
+        }, "LabelProp"];
     };
     readonly ChartSeriesProp: {
         readonly group: "data-display";

package/dist/props/registry.js

@@ -1689,7 +1689,14 @@ const COMPONENT_PROP_REGISTRY = {
   FieldProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",
-    vocabulary: ["IdProp", "LabelProp", "DescriptionProp", "ClassNameProp", "ChildrenProp"]
+    vocabulary: [
+      "IdProp",
+      "LabelProp",
+      "DescriptionProp",
+      "ErrorProp",
+      "ClassNameProp",
+      "ChildrenProp"
+    ]
   },
   SliderProp: {
     group: "data-entry",
@@ -2254,7 +2261,8 @@ const COMPONENT_PROP_REGISTRY = {
         field: "onAnchoredChange",
         local: true,
         reason: 'Pinned-state change handler (boolean), so the consumer can render its own focusable "jump to newest" affordance.'
-      }
+      },
+      "LabelProp"
     ]
   },
   ChartSeriesProp: {

package/dist/styles/control.css

@@ -435,11 +435,23 @@
     font-weight: var(--font-weight-normal);
   }
 
+  .ui-choice-label-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--control-label-space-gap);
+  }
+
   .ui-choice-description {
     color: hsl(var(--muted-foreground));
     font-size: var(--choice-description-font-size);
   }
 
+  .ui-choice-error {
+    color: hsl(var(--text-error));
+    font-size: var(--choice-description-font-size);
+  }
+
   .ui-label {
     display: flex;
     align-items: center;

package/dist/styles/data-display-layout.css

@@ -289,9 +289,32 @@
   .ui-progress-ring-label {
     position: relative;
     color: hsl(var(--foreground));
-    font-size: var(--progress-ring-label-font-size);
+    font-size: var(--progress-ring-label-font-size, calc(var(--progress-ring-size) * 0.28));
     font-variant-numeric: tabular-nums;
-    line-height: 1;
+
+    line-height: var(--line-height-normal);
+
+    max-inline-size: calc(
+      var(--progress-ring-size) - 2 * var(--progress-ring-border-width) - var(--space-1)
+    );
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui-disclosure-chevron {
+    transition: rotate var(--duration-fast) var(--ease-standard);
+  }
+
+  :is([data-state="open"], [aria-expanded="true"]) > .ui-disclosure-chevron,
+  :is([data-state="open"], [aria-expanded="true"]) .ui-disclosure-chevron {
+    rotate: 180deg;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-disclosure-chevron {
+      transition: none;
+    }
   }
 
   .ui-legend {

package/dist/styles/dialog-layout.css

@@ -146,6 +146,18 @@
     opacity: var(--dialog-close-rest-alpha);
   }
 
+  :is([data-slot="dialog-close"], [data-slot="sheet-close"])::after {
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    translate: -50% -50%;
+    min-inline-size: var(--dialog-close-size);
+    min-block-size: var(--dialog-close-size);
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
   [data-slot="dialog-close"]:hover {
     opacity: 1;
   }

package/dist/styles/form-layout.css

@@ -259,4 +259,26 @@
       text-align: end;
     }
   }
+
+  .ui-form-feedback > svg {
+    inline-size: var(--form-feedback-icon-size);
+    block-size: var(--form-feedback-icon-size);
+    flex-shrink: 0;
+  }
+
+  .ui-form-feedback[data-status="success"] {
+    color: hsl(var(--text-success));
+  }
+
+  .ui-form-feedback[data-status="warning"] {
+    color: hsl(var(--text-warning));
+  }
+
+  .ui-form-feedback[data-status="error"] {
+    color: hsl(var(--text-error));
+  }
+
+  .ui-form-feedback[data-status="validating"] {
+    color: hsl(var(--muted-foreground));
+  }
 }

package/dist/styles/layout.css

@@ -834,7 +834,7 @@
     .ui-page-header-extra {
       width: auto;
       flex-shrink: 1;
-      min-inline-size: 0;
+      min-inline-size: auto;
       justify-content: flex-end;
     }
 
@@ -1053,7 +1053,6 @@
   }
 
   .ui-pagination-size-trigger {
-    width: var(--pagination-size-width);
 
     height: var(--control-height);
   }

package/dist/styles/navigation-layout.css

@@ -220,27 +220,27 @@
   }
 
   [data-slot="tabs"][data-variant="card"][data-placement="start"] [data-slot="tabs-list"],
-  [data-slot="tabs"][data-variant="editable-card"][data-placement="start"]
-    [data-slot="tabs-list"] {
+  [data-slot="tabs"][data-variant="editable-card"][data-placement="start"] [data-slot="tabs-list"] {
     box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width)) 0 0 hsl(var(--border));
   }
 
   [data-slot="tabs"][data-variant="card"][data-placement="end"] [data-slot="tabs-list"],
-  [data-slot="tabs"][data-variant="editable-card"][data-placement="end"]
-    [data-slot="tabs-list"] {
+  [data-slot="tabs"][data-variant="editable-card"][data-placement="end"] [data-slot="tabs-list"] {
     box-shadow: inset var(--tabs-card-rail-border-width) 0 0 hsl(var(--border));
   }
 
-  [dir="rtl"] [data-slot="tabs"][data-variant="card"][data-placement="start"]
+  [dir="rtl"]
+    [data-slot="tabs"][data-variant="card"][data-placement="start"]
     [data-slot="tabs-list"],
-  [dir="rtl"] [data-slot="tabs"][data-variant="editable-card"][data-placement="start"]
+  [dir="rtl"]
+    [data-slot="tabs"][data-variant="editable-card"][data-placement="start"]
     [data-slot="tabs-list"] {
     box-shadow: inset var(--tabs-card-rail-border-width) 0 0 hsl(var(--border));
   }
 
-  [dir="rtl"] [data-slot="tabs"][data-variant="card"][data-placement="end"]
-    [data-slot="tabs-list"],
-  [dir="rtl"] [data-slot="tabs"][data-variant="editable-card"][data-placement="end"]
+  [dir="rtl"] [data-slot="tabs"][data-variant="card"][data-placement="end"] [data-slot="tabs-list"],
+  [dir="rtl"]
+    [data-slot="tabs"][data-variant="editable-card"][data-placement="end"]
     [data-slot="tabs-list"] {
     box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width)) 0 0 hsl(var(--border));
   }
@@ -277,7 +277,7 @@
     margin-inline-start: calc(var(--tabs-panel-space-inset) + var(--tabs-panel-border-width));
   }
 
-    [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-panel"],
+  [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-panel"],
   [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-content"] {
     border: var(--tabs-panel-border-width) solid hsl(var(--border));
     border-radius: var(--tabs-panel-radius);
@@ -1002,7 +1002,6 @@
   }
 
   .ui-app-setting-picker-icon {
-    inline-size: var(--control-height);
     justify-content: center;
     border-color: transparent;
     background: transparent;
@@ -1026,35 +1025,35 @@
 
   @media (min-width: 40rem) {
     .ui-app-setting-picker-trigger[data-kind="locale"] {
-      inline-size: var(--app-setting-picker-locale-width);
+      --app-setting-picker-trigger-width: var(--app-setting-picker-locale-width);
     }
 
     .ui-app-setting-picker-trigger[data-kind="timezone"] {
-      inline-size: var(--app-setting-picker-timezone-width);
+      --app-setting-picker-trigger-width: var(--app-setting-picker-timezone-width);
     }
 
     .ui-app-setting-picker-trigger[data-kind="dateFormat"] {
-      inline-size: var(--app-setting-picker-date-format-width);
+      --app-setting-picker-trigger-width: var(--app-setting-picker-date-format-width);
     }
 
     .ui-app-setting-picker-trigger[data-kind="timeFormat"] {
-      inline-size: var(--app-setting-picker-time-format-width);
+      --app-setting-picker-trigger-width: var(--app-setting-picker-time-format-width);
     }
 
     .ui-app-setting-picker-trigger[data-kind="theme"] {
-      inline-size: var(--app-setting-picker-theme-width);
+      --app-setting-picker-trigger-width: var(--app-setting-picker-theme-width);
     }
 
     .ui-app-setting-picker-trigger[data-kind="brand"] {
-      inline-size: var(--app-setting-picker-brand-width);
+      --app-setting-picker-trigger-width: var(--app-setting-picker-brand-width);
     }
 
     .ui-app-setting-picker-trigger[data-kind="density"] {
-      inline-size: var(--app-setting-picker-density-width);
+      --app-setting-picker-trigger-width: var(--app-setting-picker-density-width);
     }
 
     .ui-app-setting-picker-trigger[data-kind="fontSize"] {
-      inline-size: var(--app-setting-picker-font-size-width);
+      --app-setting-picker-trigger-width: var(--app-setting-picker-font-size-width);
     }
   }
 }

package/dist/tokens/components/data-display.css

@@ -113,7 +113,8 @@
   --progress-ring-size: 2.75rem;
   --progress-ring-size-sm: 2rem;
   --progress-ring-border-width: var(--stroke-lg);
-  --progress-ring-label-font-size: var(--font-size-xs);
+
+  --progress-ring-label-font-size: initial;
 
   --legend-gap: 0.875rem;
   --legend-item-gap: 0.3125rem;

package/dist/tokens/components/feedback.css

@@ -43,6 +43,8 @@
 
   --dialog-close-rest-alpha: 0.7;
 
+  --dialog-close-size: var(--touch-target-min);
+
   --dialog-step-up-error-font-size: var(--font-size-sm);
 
   --alert-radius: var(--card-radius);