@godxjp/ui 33.10.1 → 33.12.1

package/dist/components/layout/topbar.js

@@ -1,5 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { revealKeyboardFocus } from "../../lib/focus-reveal.js";
 import { MoreHorizontal } from "lucide-react";
 import * as React from "react";
 import { useTranslation } from "../../i18n/use-translation.js";
@@ -11,17 +12,21 @@ function Topbar({
   start,
   center,
   end,
+  identity,
   className,
   children,
   height,
   overflow = "scroll",
   pad,
   style,
+  onFocusCapture,
   ...props
 }) {
   const barRef = React.useRef(null);
+  const controlsRef = React.useRef(null);
+  const hasIdentity = identity != null && children == null;
   const foldable = overflow === "menu" && children == null;
-  const collapsed = useCollapsesToMenu(barRef, foldable);
+  const collapsed = useCollapsesToMenu(hasIdentity ? controlsRef : barRef, foldable);
   const clusters = /* @__PURE__ */ jsxs(Fragment, { children: [
     start != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-start", className: "ui-topbar-start", children: start }) : null,
     center != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-center", className: "ui-topbar-center", children: center }) : null,
@@ -31,14 +36,32 @@ function Topbar({
     "div",
     {
       ref: barRef,
+      onFocusCapture: (event) => {
+        onFocusCapture?.(event);
+        if (!event.defaultPrevented) revealKeyboardFocus(event);
+      },
       "data-height": height,
+      "data-identity": hasIdentity ? "true" : void 0,
       "data-overflow": overflow,
       "data-collapsed": foldable ? String(collapsed) : void 0,
       style: { ...style, ...padStyle(pad, void 0) },
       "data-slot": "topbar",
       className: cn("ui-topbar", className),
       ...props,
-      children: children ?? (collapsed ? /* @__PURE__ */ jsx(TopbarOverflowMenu, { children: clusters }) : clusters)
+      children: children ?? (hasIdentity ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: controlsRef,
+            onFocusCapture: revealKeyboardFocus,
+            "data-slot": "topbar-controls",
+            "data-overflow": overflow,
+            className: "ui-topbar ui-topbar-controls",
+            children: collapsed ? /* @__PURE__ */ jsx(TopbarOverflowMenu, { children: clusters }) : clusters
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { "data-slot": "topbar-identity", className: "ui-topbar-identity", children: identity })
+      ] }) : collapsed ? /* @__PURE__ */ jsx(TopbarOverflowMenu, { children: clusters }) : clusters)
     }
   );
 }
@@ -69,7 +92,13 @@ function useCollapsesToMenu(ref, enabled) {
     if (typeof ResizeObserver === "undefined") return void 0;
     const observer = new ResizeObserver(update);
     observer.observe(bar);
-    if (!collapsed) for (const cluster of bar.children) observer.observe(cluster);
+    if (!collapsed)
+      for (const cluster of bar.children) {
+        observer.observe(cluster);
+        if (cluster.getAttribute("data-slot") === "topbar-start") {
+          for (const cell of cluster.children) observer.observe(cell);
+        }
+      }
     return () => observer.disconnect();
   }, [ref, enabled, collapsed]);
   return enabled && collapsed;

package/dist/components/navigation/pagination.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { revealKeyboardFocus } from "../../lib/focus-reveal.js";
 import * as React from "react";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
@@ -33,6 +34,7 @@ const PaginationContent = React.forwardRef(({ className, ...props }, ref) => {
     "ul",
     {
       ref: setListElement,
+      onFocusCapture: revealKeyboardFocus,
       className: cn("ui-pagination-list", className),
       role: "list",
       ...props
@@ -186,6 +188,7 @@ function Pagination({
     return /* @__PURE__ */ jsxs(
       "nav",
       {
+        onFocusCapture: revealKeyboardFocus,
         "aria-label": navLabel,
         "data-simple": "true",
         "data-size": size,
@@ -230,6 +233,7 @@ function Pagination({
   return /* @__PURE__ */ jsxs(
     "nav",
     {
+      onFocusCapture: revealKeyboardFocus,
       "aria-label": navLabel,
       "data-size": size,
       "data-align": align,

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": "33.10.1",
+  "version": "33.12.1",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/lab/anchor.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { revealKeyboardFocus } from "../lib/focus-reveal.js";
 import * as React from "react";
 import { useTranslation } from "../i18n/use-translation.js";
 import { isDevelopment } from "../lib/dev.js";
@@ -264,7 +265,16 @@ function Anchor({
             } : void 0
           }
         ),
-        /* @__PURE__ */ jsx("ul", { ref: listRef, "data-slot": "anchor-list", className: "ui-anchor-list", children: renderItems(items ?? [], false) })
+        /* @__PURE__ */ jsx(
+          "ul",
+          {
+            onFocusCapture: revealKeyboardFocus,
+            ref: listRef,
+            "data-slot": "anchor-list",
+            className: "ui-anchor-list",
+            children: renderItems(items ?? [], false)
+          }
+        )
       ] })
     }
   );

package/dist/lib/focus-reveal.d.ts

@@ -0,0 +1,5 @@
+import type { FocusEvent } from "react";
+/** Native Tab scrolling can leave a partially visible control clipped (Chromium).
+ * Reveal keyboard targets that fit inside a scroll viewport, without moving oversized
+ * rows, changing layout, or scrolling on pointer focus. */
+export declare function revealKeyboardFocus(event: FocusEvent<HTMLElement>): void;

package/dist/lib/focus-reveal.js

@@ -0,0 +1,19 @@
+function revealKeyboardFocus(event) {
+  const viewport = event.currentTarget;
+  const target = event.target;
+  if (!(target instanceof HTMLElement) || target === viewport || !viewport.contains(target) || !target.matches(":focus-visible"))
+    return;
+  const carrier = target.closest(".ui-tag-input,.ui-control-composite-field") ?? target;
+  const box = carrier.getBoundingClientRect();
+  const frame = viewport.getBoundingClientRect();
+  const left = frame.left + viewport.clientLeft;
+  const top = frame.top + viewport.clientTop;
+  const style = getComputedStyle(viewport);
+  const outsideX = /auto|scroll/.test(style.overflowX) && box.width <= viewport.clientWidth && (box.left < left || box.right > left + viewport.clientWidth);
+  const outsideY = /auto|scroll/.test(style.overflowY) && box.height <= viewport.clientHeight && (box.top < top || box.bottom > top + viewport.clientHeight);
+  if (outsideX || outsideY)
+    carrier.scrollIntoView?.({ block: "nearest", inline: "nearest", behavior: "instant" });
+}
+export {
+  revealKeyboardFocus
+};

package/dist/lib/hooks.js

@@ -77,9 +77,12 @@ function useScrollableRegionTabIndex(element) {
     const sync = () => {
       const scrolls = element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
       const hasFocusableContent = element.querySelector(SCROLLABLE_REGION_FOCUSABLE_SELECTOR) !== null;
-      if (scrolls && !hasFocusableContent) {
+      const hasVisibleBox = element.clientWidth > 0 && element.clientHeight > 0;
+      if (!hasVisibleBox) {
+        if (element.getAttribute("tabindex") !== "-1") element.setAttribute("tabindex", "-1");
+      } else if (scrolls && !hasFocusableContent) {
         if (element.getAttribute("tabindex") !== "0") element.setAttribute("tabindex", "0");
-      } else if (element.getAttribute("tabindex") === "0") {
+      } else if (["0", "-1"].includes(element.getAttribute("tabindex") ?? "")) {
         element.removeAttribute("tabindex");
       }
     };

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

@@ -1545,6 +1545,14 @@ export type TopbarProp = Omit<React.HTMLAttributes<HTMLDivElement>, "children">
     center?: ReactNode;
     /** Inline-end cluster — settings pickers, notifications, the user menu. */
     end?: ReactNode;
+    /**
+     * Opt-in shared-device identity, pinned outside scrolling/overflow menus. Pass one
+     * TopbarItem with `truncate` and an Avatar in `icon`; use a plain string name so its full
+     * title is automatic. Never combine with hideBelow/labelHideBelow/iconHideFrom.
+     * Capped by --topbar-identity-max-inline-size (40%); primary controls retain their floors.
+     * At extreme widths only the other clusters scroll or move to the menu. Ignored with children.
+     */
+    identity?: ReactNode;
     /**
      * What a bar that does not fit does with the cells that do not fit (gh#728).
      *
@@ -1643,6 +1651,11 @@ export type TopbarItemProp = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
      * accessible name. Under `asChild` the child element's own children are the label.
      */
     labelHideBelow?: BreakpointProp;
+    /** Ellipse the label in the available width, keeping the icon and control minimum.
+     * Same boolean vocabulary as Text.truncate. Overrides labelHideBelow; the complete text
+     * remains the accessible name. String children automatically supply title (asChild too).
+     */
+    truncate?: boolean;
     /**
      * Unread count OVERLAID on the cell's glyph — the notification-bell affordance the cell's own use
      * cases name (gh#398). Pass the CONTENT ONLY, exactly like `SidebarItemProp.badge`: a number, a

package/dist/props/registry.d.ts

@@ -1433,7 +1433,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly TopbarProp: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
-        readonly vocabulary: readonly ["ChildrenProp", {
+        readonly vocabulary: readonly [{
+            readonly field: "identity";
+            readonly local: true;
+            readonly reason: "Reserved shared-device account slot; bounded and outside the overflow policy.";
+        }, "ChildrenProp", {
             readonly field: "overflow";
             readonly local: true;
             readonly reason: "The bar's overflow contract — `scroll` (default) keeps every cell reachable, `clip` is the pre-gh#728 slicing.";
@@ -1443,6 +1447,10 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
         readonly vocabulary: readonly ["ChildrenProp", "ClassNameProp", {
+            readonly field: "truncate";
+            readonly local: true;
+            readonly reason: "Text.truncate boolean vocabulary applied to the bar cell label.";
+        }, {
             readonly field: "asChild";
             readonly local: true;
             readonly reason: "Radix Slot passthrough — merges onto the child";

package/dist/props/registry.js

@@ -1551,6 +1551,11 @@ const COMPONENT_PROP_REGISTRY = {
     group: "layout",
     file: "components/layout.prop.ts",
     vocabulary: [
+      {
+        field: "identity",
+        local: true,
+        reason: "Reserved shared-device account slot; bounded and outside the overflow policy."
+      },
       "ChildrenProp",
       {
         field: "overflow",
@@ -1565,6 +1570,11 @@ const COMPONENT_PROP_REGISTRY = {
     vocabulary: [
       "ChildrenProp",
       "ClassNameProp",
+      {
+        field: "truncate",
+        local: true,
+        reason: "Text.truncate boolean vocabulary applied to the bar cell label."
+      },
       { field: "asChild", local: true, reason: "Radix Slot passthrough \u2014 merges onto the child" },
       "BreakpointProp",
       {

package/dist/styles/control.css

@@ -1232,7 +1232,10 @@
 
   .ui-search-input-control {
     padding-inline-start: var(--search-input-start-padding);
-    padding-inline-end: var(--search-input-end-padding);
+    padding-inline-end: max(
+      var(--search-input-end-padding),
+      var(--search-input-affix-min-padding, 0px)
+    );
   }
 
   .ui-search-input-clear {
@@ -1263,8 +1266,8 @@
     .ui-search-input-clear::after {
       content: "";
       position: absolute;
-      inset-block: min(0px, calc((100% - var(--control-height-default)) / 2));
-      inset-inline: min(0px, calc((100% - var(--control-height-default)) / 2));
+      inset-block: min(0px, calc((100% - var(--control-affix-touch-target-size)) / 2));
+      inset-inline: min(0px, calc((100% - var(--control-affix-touch-target-size)) / 2));
     }
   }
 
@@ -3767,3 +3770,128 @@
     min-inline-size: var(--control-height-touch);
   }
 }
+
+@layer components {
+  @media (pointer: coarse) {
+    .ui-control-inline-affix-action:not(.ui-badge-remove),
+    .ui-control-affix-action,
+    .ui-tree-select-clear,
+    .ui-password-input-toggle,
+    .ui-search-input-clear,
+    .ui-number-input-step {
+      min-inline-size: var(--control-affix-touch-target-size);
+      min-block-size: var(--control-affix-touch-target-size);
+      flex-shrink: 0;
+    }
+
+    .ui-control-inline-affix-action:not(.ui-badge-remove)::after {
+      inset: 0;
+      translate: none;
+    }
+
+    .ui-input-affix-wrapper:has(.ui-control-inline-affix-action) > .ui-input {
+      min-block-size: var(--control-affix-touch-target-size);
+    }
+
+    .ui-input--trailing-affix {
+      padding-inline-end: max(
+        var(--control-inline-affix-space-inline-end),
+        calc(
+          var(--input-trailing-measured-size, var(--control-affix-touch-target-size)) +
+            var(--control-inline-affix-inset-inline) + var(--control-inline-affix-space-gap)
+        )
+      );
+    }
+
+    .ui-control-trigger-affixed {
+      min-block-size: var(--control-affix-touch-target-size);
+      padding-inline-end: max(
+        var(--control-trigger-space-inline-end),
+        calc(
+          var(--control-affix-touch-target-size) + var(--control-affix-inset-inline-end) +
+            var(--control-inline-affix-space-gap)
+        )
+      );
+    }
+
+    .ui-tree-select-trigger-affixed {
+      min-block-size: var(--control-affix-touch-target-size);
+      padding-inline-end: calc(
+        var(--control-affix-touch-target-size) + var(--space-3) +
+          var(--control-inline-affix-space-gap)
+      );
+    }
+
+    .ui-password-input-field {
+      min-block-size: var(--control-affix-touch-target-size);
+      padding-inline-end: calc(
+        var(--control-affix-touch-target-size) + var(--control-inline-affix-space-gap)
+      );
+    }
+
+    .ui-number-input-steppers {
+      flex-direction: row;
+      align-items: center;
+      inset-block: var(--control-border-width, var(--stroke-hairline));
+    }
+
+    .ui-number-input-step {
+      border: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+    .ui-number-input-step:hover {
+      background: hsl(var(--accent));
+      color: hsl(var(--accent-foreground));
+    }
+    .ui-number-input-step::after {
+      inset-block: calc((100% - var(--control-affix-touch-target-size)) / 2) auto;
+      inset-inline: calc((100% - var(--control-affix-touch-target-size)) / 2) auto;
+      inline-size: var(--control-affix-touch-target-size);
+      block-size: var(--control-affix-touch-target-size);
+      translate: none;
+    }
+    .ui-search-input-control {
+      min-block-size: var(--control-affix-touch-target-size);
+
+      --search-input-affix-min-padding: max(
+        var(--control-affix-touch-target-size),
+        calc(
+          var(--search-input-edge-inset) + var(--touch-target-min) / 2 +
+            var(--control-affix-touch-target-size) / 2
+        )
+      );
+    }
+    [data-slot="textarea-affix-wrapper"]:has(.ui-textarea-clear) > textarea {
+      min-block-size: calc(
+        var(--control-affix-touch-target-size) + 2 * var(--textarea-clear-inset-block-start)
+      );
+    }
+    .ui-search-input-clear {
+      inset-inline-end: max(
+        0px,
+        calc(
+          var(--search-input-edge-inset) + var(--touch-target-min) / 2 -
+            var(--control-affix-touch-target-size) / 2
+        )
+      );
+    }
+    .ui-number-input-field {
+      min-block-size: calc(
+        var(--control-affix-touch-target-size) + 2 *
+          var(--control-border-width, var(--stroke-hairline))
+      );
+      padding-inline-end: calc(2 * var(--control-affix-touch-target-size) + var(--space-2));
+    }
+    .ui-number-input:not([data-controls="off"]) [data-slot="number-input-suffix"] {
+      inset-inline-end: calc(2 * var(--control-affix-touch-target-size) + var(--space-2));
+    }
+    .ui-number-input:not([data-controls="off"]):has([data-slot="number-input-suffix"])
+      .ui-number-input-field {
+      padding-inline-end: calc(
+        2 * var(--control-affix-touch-target-size) + var(--space-2) +
+          var(--control-inline-affix-size)
+      );
+    }
+  }
+}

package/dist/styles/focus-ring.css

@@ -4,6 +4,34 @@
   :is(
     .ui-focus-ring,
     .ui-focus-ring-outline,
+    .ui-flex,
+    .ui-table-scroll,
+    .ui-pagination-list,
+    .react-aria-Menu,
+    .ui-chart [tabindex],
+    .ui-prose input,
+    .ui-auth-legal-footer a[href],
+    .ui-auth-shell a[href],
+    .app-main a[href],
+    .ui-breadcrumb a[href],
+    .ui-breadcrumb-link,
+    .ui-password-input-toggle,
+    .ui-search-select-value-remove,
+    .ui-tabs-overflow,
+    .ui-resizable-handle,
+    .ui-scroll-area,
+    .ui-data-table-scroll,
+    .ui-resizable-panel,
+    .ui-master-detail-master,
+    .ui-branch-scope-picker-list,
+    .ui-tag-input-chip,
+    .ui-attachments-placeholder,
+    .ui-block-editor-content,
+    .ui-range-timeline,
+    .sb-product,
+    .ui-logo,
+    .ui-logo-lockup,
+    [data-slot="anchor-link"],
     [data-interactive] > [data-slot="table-cell"] a[href],
     [data-interactive] > [data-slot="table-cell"] button,
     .ui-data-table-ellipsis[data-truncated],
@@ -51,6 +79,8 @@
     .tb-icon-btn
   ):focus-visible,
 
+  .ui-command-input-wrapper:has(.ui-command-input:focus-visible),
+  .ui-attachments:has(.ui-attachments-input:focus-visible),
   .ui-calendar-dropdown-root:has(.ui-calendar-dropdown:focus-visible),
   .ui-checkbox[data-focus-visible],
   .ui-radio[data-focus-visible],
@@ -70,17 +100,20 @@
       var(--focus-outline-color, var(--focus-ring-color, var(--ring))) /
         var(--focus-ring-opacity, 1)
     );
-    outline-offset: var(--focus-ring-offset);
+    outline-offset: var(--focus-ring-contained-offset, var(--focus-ring-offset));
 
     transition:
       outline-offset 0s,
       outline 0s;
   }
 
-  :root[data-focus-outline="on"]
+  :root:not([data-focus-outline="off"])
     :is(
       .ui-focus-ring,
       .ui-focus-ring-outline,
+      .ui-logo,
+      .ui-logo-lockup,
+      [data-slot="anchor-link"],
       .ui-input,
       .ui-control,
       .ui-control-multiline,
@@ -123,21 +156,22 @@
       .tb-icon-btn
     ):focus-visible,
 
-  :root[data-focus-outline="on"] .ui-checkbox[data-focus-visible],
-  :root[data-focus-outline="on"] .ui-radio[data-focus-visible],
-  :root[data-focus-outline="on"] .ui-switch[data-focus-visible],
-  :root[data-focus-outline="on"] .ui-slider-thumb[data-focus-visible],
-  :root[data-focus-outline="on"] .ui-focus-ring[data-focus-visible],
-  :root[data-focus-outline="on"] .ui-control-trigger[data-state="open"],
-  :root[data-focus-outline="on"] .ui-tag-input:focus-within,
-  :root[data-focus-outline="on"] .ui-control-composite-field:focus-within,
-  :root[data-focus-outline="on"] .ui-control-composite-field[data-state="open"],
-  :root[data-focus-outline="on"] .ui-otp-slot[data-active="true"],
-  :root[data-focus-outline="on"]
+  :root:not([data-focus-outline="off"]) .ui-checkbox[data-focus-visible],
+  :root:not([data-focus-outline="off"]) .ui-radio[data-focus-visible],
+  :root:not([data-focus-outline="off"]) .ui-switch[data-focus-visible],
+  :root:not([data-focus-outline="off"]) .ui-slider-thumb[data-focus-visible],
+  :root:not([data-focus-outline="off"]) .ui-focus-ring[data-focus-visible],
+  :root:not([data-focus-outline="off"]) .ui-control-trigger[data-state="open"],
+  :root:not([data-focus-outline="off"]) .ui-tag-input:focus-within,
+  :root:not([data-focus-outline="off"]) .ui-control-composite-field:focus-within,
+  :root:not([data-focus-outline="off"]) .ui-control-composite-field[data-state="open"],
+  :root:not([data-focus-outline="off"]) .ui-otp-slot[data-active="true"],
+  :root:not([data-focus-outline="off"])
     .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
 
     --tw-ring-shadow: var(
       --focus-field-shadow,
+      inset 0 0 0 calc(-1 * var(--focus-ring-contained-offset, 0px)) hsl(var(--background)),
       0 0 0 var(--focus-ring-glow-width)
         hsl(
           var(
@@ -149,6 +183,7 @@
     );
     box-shadow: var(
       --focus-field-shadow,
+      inset 0 0 0 calc(-1 * var(--focus-ring-contained-offset, 0px)) hsl(var(--background)),
       0 0 0 var(--focus-ring-glow-width)
         hsl(
           var(
@@ -160,7 +195,7 @@
     );
   }
 
-  :root[data-focus-outline="on"]
+  :root:not([data-focus-outline="off"])
     :is(
       .ui-input,
       .ui-control,
@@ -168,10 +203,10 @@
       .ui-control-trigger,
       .ui-tag-input
     ):focus-visible,
-  :root[data-focus-outline="on"] .ui-control-trigger[data-state="open"],
-  :root[data-focus-outline="on"] .ui-tag-input:focus-within,
-  :root[data-focus-outline="on"] .ui-control-composite-field:focus-within,
-  :root[data-focus-outline="on"] .ui-control-composite-field[data-state="open"] {
+  :root:not([data-focus-outline="off"]) .ui-control-trigger[data-state="open"],
+  :root:not([data-focus-outline="off"]) .ui-tag-input:focus-within,
+  :root:not([data-focus-outline="off"]) .ui-control-composite-field:focus-within,
+  :root:not([data-focus-outline="off"]) .ui-control-composite-field[data-state="open"] {
     --input: var(--focus-ring-color, var(--ring));
   }
 
@@ -191,10 +226,35 @@
 
   a.ui-list-row,
   tr.ui-focus-ring,
-  .sb-nav-item {
+  .sb-nav-item,
+  .ui-app-setting-picker-icon[data-appearance="bar"],
+  .ui-legal-document-toc-link,
+  [data-slot="anchor-link"] {
     --focus-ring-offset: calc(-1 * var(--focus-ring-width));
   }
 
+  :is(
+    .ui-pagination,
+    .ui-pagination-list,
+    [data-slot="card"],
+    [data-slot="tabs-list"],
+    .ui-topbar,
+    .app-topbar,
+    .ui-anchor-list,
+    .app-main,
+    .ui-data-table-scroll,
+    .ui-scroll-area,
+    .ui-table-scroll,
+    .ui-mobile-shell,
+    .ui-resizable-panel-group,
+    .ui-legal-document-rail,
+    .ui-command-input-wrapper,
+    .ui-attachments
+  ) {
+    --focus-ring-contained-offset: var(--focus-ring-inset-offset);
+
+  }
+
   .ui-accordion-trigger {
     --focus-ring-offset: var(--accordion-focus-ring-offset);
   }

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "33.10.1",
+  "version": "33.12.1",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",

package/dist/styles/layout.css

@@ -647,7 +647,7 @@
   }
 
   .ui-resizable-handle {
-    width: var(--control-border-width, var(--stroke-hairline));
+    inline-size: var(--resizable-handle-size);
     background: hsl(var(--border));
     position: relative;
     flex-shrink: 0;
@@ -657,9 +657,9 @@
     color: hsl(var(--muted-foreground));
   }
 
-  .ui-resizable-handle[aria-orientation="vertical"] {
-    width: auto;
-    height: var(--control-border-width, var(--stroke-hairline));
+  .ui-resizable-handle[aria-orientation="horizontal"] {
+    inline-size: auto;
+    block-size: var(--resizable-handle-size);
   }
 
   .ui-resizable-handle:hover,