@godxjp/ui 19.4.1 → 19.5.0

package/dist/components/general/inert-background.d.ts

@@ -1,5 +1,10 @@
+import * as React from "react";
 /**
- * Call from an overlay's content wrapper (the always-mounted portal wrapper, not the portalled
- * content itself). Idempotent and refcounted: one observer serves every overlay on the page.
+ * Call from an overlay's content wrapper, and spread the returned ref onto the Radix content
+ * element itself — that element is what carries `data-state`, and registering it is what lets the
+ * background be released on close intent rather than on unmount (gh#385).
+ *
+ * The caller's own forwarded ref is composed in, so a content component still hands its node to
+ * the consumer. Idempotent and refcounted: one observer serves every overlay on the page.
  */
-export declare function useInertHiddenBackground(): void;
+export declare function useInertHiddenBackground<T extends HTMLElement>(forwarded?: React.Ref<T>): (node: T | null) => void;

package/dist/components/general/inert-background.js

@@ -2,12 +2,24 @@
 import * as React from "react";
 const TABBABLE = 'a[href], area[href], button, input, select, textarea, iframe, object, embed, details, audio[controls], video[controls], [contenteditable="true"], [tabindex]:not([tabindex^="-"])';
 const owned = /* @__PURE__ */ new Set();
+const anchors = /* @__PURE__ */ new Set();
 let observer = null;
 let mounted = 0;
+function anyOverlayOpen() {
+  for (const anchor of anchors) {
+    if (anchor.isConnected && anchor.getAttribute("data-state") !== "closed") return true;
+  }
+  return false;
+}
 function sync() {
+  if (!anyOverlayOpen()) {
+    release();
+    return;
+  }
   for (const el of document.querySelectorAll("[data-aria-hidden]")) {
     if (owned.has(el) || el.hasAttribute("inert")) continue;
-    if (el.querySelector(TABBABLE)) {
+    if (el.matches("[data-radix-focus-guard]")) continue;
+    if (el.matches(TABBABLE) || el.querySelector(TABBABLE)) {
       el.setAttribute("inert", "");
       owned.add(el);
     }
@@ -22,7 +34,7 @@ function release() {
   for (const el of owned) el.removeAttribute("inert");
   owned.clear();
 }
-function useInertHiddenBackground() {
+function useInertHiddenBackground(forwarded) {
   React.useEffect(() => {
     mounted += 1;
     if (!observer) {
@@ -30,7 +42,8 @@ function useInertHiddenBackground() {
       observer.observe(document.body, {
         subtree: true,
         attributes: true,
-        attributeFilter: ["data-aria-hidden"]
+        // `data-state` is the close-intent signal; `data-aria-hidden` is the what-to-hide signal.
+        attributeFilter: ["data-aria-hidden", "data-state"]
       });
     }
     sync();
@@ -42,6 +55,18 @@ function useInertHiddenBackground() {
       release();
     };
   }, []);
+  const registered = React.useRef(null);
+  const forwardedRef = React.useRef(forwarded);
+  forwardedRef.current = forwarded;
+  return React.useCallback((node) => {
+    if (registered.current) anchors.delete(registered.current);
+    registered.current = node;
+    if (node) anchors.add(node);
+    sync();
+    const target = forwardedRef.current;
+    if (typeof target === "function") target(node);
+    else if (target) target.current = node;
+  }, []);
 }
 export {
   useInertHiddenBackground

package/dist/components/general/logo.d.ts

@@ -6,6 +6,15 @@ export interface LogoProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
     /**
      * The brand glyph — a short mark (a letter/initials, default `"g"`) or a custom node such as an
      * inline `<svg>`. Keep it to 1–2 glyphs; the box is square and centres its content.
+     *
+     * A STRING is classified by the ink band it occupies (`g` x-height→descender, `GX` cap→baseline,
+     * `神` the full em box) and optically centred for that band — a line box is not a letterform, and
+     * the classes' centres are 0.21em apart. Any other node is left alone. Retune a band, or pin one
+     * mark, with the `--logo-glyph-*-optical-offset` tokens.
+     *
+     * A string is also FITTED to the box: two full-width forms want ~2em against a box sized for
+     * roughly one, so `東京` at `xs` is SET SMALLER rather than wrapping. The mark is always one
+     * line. Retune how much of the box a fitted glyph may take with `--logo-glyph-fit-max-width`.
      */
     glyph?: React.ReactNode;
     /**
@@ -37,6 +46,50 @@ export interface LogoProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
      */
     label?: string;
 }
+/**
+ * The band the glyph's ink actually occupies, as the (top edge, bottom edge) of the UNION of every
+ * character in the string — `"GX"` is cap→baseline, `"gX"` is cap→descender.
+ */
+export type LogoGlyphInk = "cap-baseline" | "cap-descender" | "x-baseline" | "x-descender";
+/**
+ * Classify a glyph for optical centring. Pure, no layout read, no measurement — the component is
+ * the only layer that can do this at all, because CSS cannot see which character is in the box.
+ * Returns `undefined` for a non-string glyph (an inline `<svg>`, any other node) and for an empty
+ * string: those are not classified and keep the neutral default rather than being guessed at.
+ */
+export declare function logoGlyphInk(glyph: React.ReactNode): LogoGlyphInk | undefined;
+/**
+ * How much INLINE space the glyph string wants, as counts of the four advance classes — the fact
+ * `.ui-logo-glyph`'s fit cap is computed from (gh#377). `fullwidth` is the characters that occupy
+ * a whole em; `wide` is the proportional forms that REACH that em (`M W m`); `space` is the runs
+ * of collapsible white space the paint keeps; `narrow` is everything else.
+ *
+ * The contract is that the FITTED font-size times the PAINTED advance stays inside the box, at
+ * every tier, on every bundled face. Over-stating an advance only sets the mark a little smaller
+ * than it had to be; under-stating it puts the mark outside its own box, which is the defect
+ * these classes exist to remove.
+ */
+export interface LogoGlyphAdvance {
+    fullwidth: number;
+    wide: number;
+    narrow: number;
+    space: number;
+}
+/**
+ * Count a glyph string's characters by advance class. Pure, no layout read, no measurement — the
+ * component is the only layer that can do this, because CSS cannot see which characters are in the
+ * box. Returns `undefined` for a non-string glyph and for an empty string, exactly like
+ * `logoGlyphInk`: those are not classified and keep the neutral default rather than being guessed
+ * at. Iterates code points, so a surrogate pair (CJK Extension B) counts once.
+ *
+ * WHITE SPACE IS COUNTED, NOT DROPPED. `.ui-logo-glyph` sets `white-space: nowrap`, which stops
+ * the mark wrapping but still PAINTS an interior space — measured 0.198em (system) to 0.333em
+ * (Hiragino Sans) — so a string whose space was dropped from the count was fitted to an advance
+ * narrower than the one that reached the screen (`東 京` spilled 2.63px at `md`). CSS's own
+ * processing is mirrored exactly: leading and trailing runs are trimmed away, and an interior run
+ * of any length collapses to ONE space (both verified in Chromium against the shipped `nowrap`).
+ */
+export declare function logoGlyphAdvance(glyph: React.ReactNode): LogoGlyphAdvance | undefined;
 /**
  * Logo — the product brand-mark box: a glyph on the primary fill, or (with `wordmark`) the full
  * mark + wordmark LOCKUP. Size, radius, per-tier font-size, the wordmark's

package/dist/components/general/logo.js

@@ -1,8 +1,60 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
+const X_HEIGHT_TOP = /^[acegmnopqrsuvwxyz]+$/;
+const LATIN_DESCENDER = /[gjpqy]/;
+function logoGlyphInk(glyph) {
+  if (typeof glyph !== "string") return void 0;
+  const text = glyph.replace(/\s+/gu, "");
+  if (!text) return void 0;
+  const top = X_HEIGHT_TOP.test(text) ? "x" : "cap";
+  const bottom = LATIN_DESCENDER.test(text) ? "descender" : "baseline";
+  return `${top}-${bottom}`;
+}
+const FULL_WIDTH_ADVANCE = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}\u{3000}-\u{303F}\u{FF01}-\u{FF60}\u{FFE0}-\u{FFE6}]/u;
+const EM_WIDE_ADVANCE = /[MWm]/;
+const COLLAPSIBLE_SPACE = /[\t\n\f\r ]/;
+function logoGlyphAdvance(glyph) {
+  if (typeof glyph !== "string") return void 0;
+  const text = glyph.replace(/^[\t\n\f\r ]+|[\t\n\f\r ]+$/g, "");
+  if (!text) return void 0;
+  const counts = { fullwidth: 0, wide: 0, narrow: 0, space: 0 };
+  let inSpaceRun = false;
+  for (const character of text) {
+    if (FULL_WIDTH_ADVANCE.test(character)) {
+      counts.fullwidth += 1;
+    } else if (COLLAPSIBLE_SPACE.test(character)) {
+      if (!inSpaceRun) counts.space += 1;
+      inSpaceRun = true;
+      continue;
+    } else if (EM_WIDE_ADVANCE.test(character)) {
+      counts.wide += 1;
+    } else {
+      counts.narrow += 1;
+    }
+    inSpaceRun = false;
+  }
+  return counts;
+}
 function MarkArtwork({ mark, glyph }) {
-  if (mark !== "godx") return /* @__PURE__ */ jsx(Fragment, { children: glyph });
+  if (mark !== "godx") {
+    const advance = logoGlyphAdvance(glyph);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "logo-glyph",
+        "data-ink": logoGlyphInk(glyph),
+        className: "ui-logo-glyph",
+        style: advance && {
+          "--logo-glyph-fullwidth-count": advance.fullwidth,
+          "--logo-glyph-wide-count": advance.wide,
+          "--logo-glyph-narrow-count": advance.narrow,
+          "--logo-glyph-space-count": advance.space
+        },
+        children: glyph
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -72,5 +124,7 @@ const Logo = React.forwardRef(
 );
 Logo.displayName = "Logo";
 export {
-  Logo
+  Logo,
+  logoGlyphAdvance,
+  logoGlyphInk
 };

package/dist/components/layout/app-shell.js

@@ -51,7 +51,7 @@ function AppShell({
           type: "button",
           variant: "ghost",
           size: "sm",
-          className: "app-mobile-nav-trigger hidden max-[900px]:inline-flex",
+          className: "app-mobile-nav-trigger",
           "aria-label": t("layout.appShell.openNav"),
           "aria-haspopup": "dialog",
           children: /* @__PURE__ */ jsx(Menu, { className: "size-[var(--app-shell-mobile-nav-icon-size)]", "aria-hidden": "true" })

package/dist/components/layout/index.d.ts

@@ -3,6 +3,8 @@ export type { PageContainerProp, PageContainerProps, BreadcrumbItem, BreadcrumbI
 export { Flex } from "./flex.js";
 export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexProp, FlexProps, } from "./flex.js";
 export { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
+export { NavList } from "./nav-list.js";
+export type { NavListProp, NavListProps } from "./nav-list.js";
 export { AppShell } from "./app-shell.js";
 export type { AppShellProps } from "./app-shell.js";
 export { OrgSwitcher } from "./org-switcher.js";
@@ -37,6 +39,8 @@ export { createSidebarLink, Sidebar, SidebarHeader, SidebarItem, SidebarSection
 export type { SidebarItemData, SidebarLinkComponentProp, SidebarLinkProp, SidebarProductProp as SidebarProduct, SidebarProp, SidebarProp as SidebarProps, SidebarRenderItemProp, SidebarSectionProp, } from "../../props/components/layout.prop.js";
 export { Topbar } from "./topbar.js";
 export type { TopbarProp, TopbarProps } from "./topbar.js";
+export { TopbarItem } from "./topbar-item.js";
+export type { TopbarItemProp, TopbarItemProps } from "./topbar-item.js";
 export { ResponsiveGrid } from "./responsive-grid.js";
 export type { ResponsiveGridProps } from "./responsive-grid.js";
 export { MasterDetail } from "./master-detail.js";

package/dist/components/layout/index.js

@@ -1,6 +1,7 @@
 import { PageContainer } from "./page-container.js";
 import { Flex } from "./flex.js";
 import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
+import { NavList } from "./nav-list.js";
 import { AppShell } from "./app-shell.js";
 import { OrgSwitcher } from "./org-switcher.js";
 import { AuthShell } from "./auth-shell.js";
@@ -16,6 +17,7 @@ import { ErrorSurface } from "./error-surface.js";
 import { Breadcrumb } from "./breadcrumb.js";
 import { createSidebarLink, Sidebar, SidebarHeader, SidebarItem, SidebarSection } from "./sidebar.js";
 import { Topbar } from "./topbar.js";
+import { TopbarItem } from "./topbar-item.js";
 import { ResponsiveGrid } from "./responsive-grid.js";
 import { MasterDetail } from "./master-detail.js";
 import { SplitPane } from "./split-pane.js";
@@ -40,6 +42,7 @@ export {
   LegalDocumentShell,
   MasterDetail,
   MobileShell,
+  NavList,
   OrgSwitcher,
   PageContainer,
   ResizableHandle,
@@ -54,5 +57,6 @@ export {
   SidebarSection,
   SplitPane,
   Topbar,
+  TopbarItem,
   createSidebarLink
 };

package/dist/components/layout/master-detail.d.ts

@@ -5,4 +5,4 @@ export type MasterDetailProps = MasterDetailProp;
  * drives. Either way `master` comes first in DOM order, so below the threshold the regions stack
  * list-then-detail.
  */
-export declare function MasterDetail({ master, children, rail, railWidth, masterViewport, collapseBelow, masterLabel, detailLabel, detailId, }: MasterDetailProps): import("react").JSX.Element;
+export declare function MasterDetail({ master, mobilePane, detailBack, children, rail, railWidth, masterViewport, collapseBelow, masterLabel, detailLabel, detailId, }: MasterDetailProps): import("react").JSX.Element;

package/dist/components/layout/master-detail.js

@@ -1,6 +1,10 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 function MasterDetail({
   master,
+  mobilePane,
+  detailBack,
   children,
   rail = "detail",
   railWidth = "standard",
@@ -10,11 +14,45 @@ function MasterDetail({
   detailLabel,
   detailId
 }) {
+  const rootRef = useRef(null);
+  const thresholdRef = useRef(null);
+  const [compact, setCompact] = useState(false);
+  const navigable = mobilePane !== void 0;
+  useLayoutEffect(() => {
+    if (!navigable || !rootRef.current || !thresholdRef.current) return;
+    const root = rootRef.current;
+    const threshold = thresholdRef.current;
+    const measure = () => setCompact(root.getBoundingClientRect().width < threshold.getBoundingClientRect().width);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(root);
+    observer.observe(threshold);
+    return () => observer.disconnect();
+  }, [navigable, collapseBelow]);
+  const masterRef = useRef(null);
+  const detailRef = useRef(null);
+  useEffect(() => {
+    if (!mobilePane) return;
+    if (mobilePane === "detail" && masterRef.current?.getClientRects().length === 0) {
+      const heading = detailRef.current?.querySelector("h1, h2, h3");
+      if (heading) {
+        heading.tabIndex = -1;
+        heading.focus();
+      } else {
+        detailRef.current?.focus();
+      }
+    } else if (mobilePane === "master" && detailRef.current?.getClientRects().length === 0) {
+      masterRef.current?.querySelector("a[aria-current], a[href]")?.focus({ preventScroll: true });
+    }
+  }, [mobilePane, detailLabel, compact]);
   const bounded = masterViewport !== "auto";
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: rootRef,
       className: "ui-master-detail",
+      "data-mobile-compact": navigable && compact ? "" : void 0,
+      "data-mobile-pane": mobilePane,
       "data-rail": rail,
       "data-rail-width": railWidth,
       "data-master-viewport": masterViewport,
@@ -23,22 +61,28 @@ function MasterDetail({
         /* @__PURE__ */ jsx(
           "section",
           {
+            ref: masterRef,
             className: "ui-master-detail-master",
             "aria-label": masterLabel,
             tabIndex: bounded ? 0 : void 0,
             children: master
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           "section",
           {
+            ref: detailRef,
             className: "ui-master-detail-detail",
             id: detailId,
             "aria-label": detailLabel,
             tabIndex: -1,
-            children
+            children: [
+              mobilePane && detailBack ? /* @__PURE__ */ jsx("div", { className: "ui-master-detail-back", children: detailBack }) : null,
+              children
+            ]
           }
-        )
+        ),
+        navigable ? /* @__PURE__ */ jsx("span", { className: "ui-master-detail-measure", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { ref: thresholdRef }) }) : null
       ]
     }
   );

package/dist/components/layout/nav-list.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import type { NavListProp } from "../../props/components/layout.prop.js";
+export type { NavListProp };
+export type NavListProps = NavListProp;
+/**
+ * NavList — a vertical route navigation that is NOT shell furniture (gh#374).
+ *
+ * `Sidebar` owns the app's primary rail and renders into `AppShell`'s grid, so it cannot be nested
+ * in a page. The settings-nav shape — a column of links beside the pane they drive, one of them
+ * current — had no primitive, which left every consumer hand-rolling rows out of `Button`s with the
+ * current one encoded as a variant swap: no `aria-current`, no icon column, a different invention
+ * per app.
+ *
+ * This is the SAME row as the rail, deliberately: it composes `SidebarItem`, so icon slot, label,
+ * badge, active tokens and `aria-current="page"` are one implementation shared by both, and a
+ * consumer that already learnt `SidebarItemProp` / `linkComponent` for the rail knows this too.
+ * Only the container differs — a `<nav>` landmark instead of the shell's grid area, and no
+ * collapsed rail (a page-level nav has no rail to collapse into).
+ */
+export declare const NavList: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> & {
+    items: import("../../props/index.js").SidebarItemProp[];
+    activeId?: string;
+    label: string;
+    linkComponent?: import("./sidebar.js").SidebarLinkComponentProp;
+    onSelect?: (id: string) => void;
+} & React.RefAttributes<HTMLElement>>;

package/dist/components/layout/nav-list.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { SidebarItem } from "./sidebar.js";
+const NavList = React.forwardRef(
+  ({ items, activeId, label, linkComponent, onSelect, className, ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": label, className: cn("ui-nav-list", className), ...props, children: items.map((item) => /* @__PURE__ */ jsx(
+    SidebarItem,
+    {
+      item,
+      active: item.id === activeId,
+      linkComponent,
+      onActivate: onSelect
+    },
+    item.id
+  )) })
+);
+NavList.displayName = "NavList";
+export {
+  NavList
+};

package/dist/components/layout/responsive-grid.js

@@ -1,24 +1,27 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
 const RESPONSIVE_GRID_PRESET_COLUMNS = {
-  "pricing-plans": { sm: 3, md: 3, lg: 3 }
+  "pricing-plans": { base: 1, sm: 3, md: 3, lg: 3 }
 };
 function resolveColumns(columns) {
   if (typeof columns === "number") {
     return {
+      base: 1,
       sm: Math.min(columns, 2),
       md: Math.min(columns, 3),
       lg: columns
     };
   }
   return {
-    sm: columns.sm ?? 1,
-    md: columns.md ?? columns.sm ?? 1,
-    lg: columns.lg ?? columns.md ?? columns.sm ?? 1
+    base: columns.base ?? 1,
+    sm: columns.sm ?? columns.base ?? 1,
+    md: columns.md ?? columns.sm ?? columns.base ?? 1,
+    lg: columns.lg ?? columns.md ?? columns.sm ?? columns.base ?? 1
   };
 }
 function toStyle(resolved) {
   return {
+    "--responsive-grid-base": resolved.base,
     "--responsive-grid-sm": resolved.sm,
     "--responsive-grid-md": resolved.md,
     "--responsive-grid-lg": resolved.lg

package/dist/components/layout/topbar-item.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export type { TopbarItemProp, TopbarItemProp as TopbarItemProps, } from "../../props/components/layout.prop.js";
+/**
+ * TopbarItem — one interactive cell of a {@link Topbar} slot, shaped like part of the bar.
+ *
+ * Full bar height, the bar's own hover surface, and the focus mark hosted INSIDE the cell (a
+ * full-bleed cell has nothing outside itself to ring, and the bar clips its own overflow). All of
+ * that lives in `.ui-topbar-item`; this component only picks the element and the classes.
+ *
+ * `ui-focus-ring` is the ONE focus source (styles/focus-ring.css) — the cell hosts whatever that
+ * file resolves, including nothing at all while the `--focus-outline` switch ships off.
+ */
+export declare const TopbarItem: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    className?: import("../../props/index.js").ClassNameProp;
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/layout/topbar-item.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../lib/utils.js";
+const TopbarItem = React.forwardRef(function TopbarItem2({ asChild = false, className, type, ...props }, ref) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-slot": "topbar-item",
+      className: cn("ui-topbar-item ui-focus-ring", className),
+      type: asChild ? void 0 : type ?? "button",
+      ...props
+    }
+  );
+});
+export {
+  TopbarItem
+};

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

@@ -135,11 +135,37 @@ const AppSettingPicker = React.forwardRef(
                   // sits among ghost icon buttons (the topbar's sidebar-toggle/notifications/account
                   // triggers), so it drops controlTriggerClass's form-input chrome (border/bg/shadow)
                   // at rest and adopts the same ghost hover — a resting border here read as visually
-                  // inconsistent next to its borderless topbar siblings. The open-state ring
-                  // (`data-[state=open]:border-ring`, from controlTriggerClass) and the
-                  // focus-visible ring are untouched, so keyboard and "is this open" affordance
-                  // still hold.
-                  "ui-app-setting-picker-icon hover:bg-accent hover:text-accent-foreground"
+                  // inconsistent next to its borderless topbar siblings. The open-state and
+                  // focus-visible rings are untouched, so keyboard and "is this open" affordance
+                  // still hold: both come from styles/focus-ring.css, which also excludes this
+                  // variant from the bordered-field rebind precisely BECAUSE it has no resting
+                  // border to recolour, so it keeps the opaque ring form.
+                  // Bề ngang phải là UTILITY, không phải luật class. SelectTrigger phát `w-full`,
+                  // mà utility nằm sau components trong thứ tự layer nên `inline-size` khai trong
+                  // .ui-app-setting-picker-icon luôn thua. Trong một khe co theo nội dung của
+                  // topbar, `width: 100%` co lại bằng chính nội dung, tức 18px thay vì ô vuông
+                  // --control-height. Nhánh có nhãn ngay dưới đã phải tự vệ đúng như vậy bằng
+                  // `w-auto`. Giá trị vẫn đọc token chứ không phải một con số.
+                  // `justify-content` đi cùng lý do đó: SelectTrigger phát `justify-between`,
+                  // với một con duy nhất thì nó dồn glyph sát viền trái (khe 1px/15px trong ô
+                  // 32px). `justify-content: center` khai trong .ui-app-setting-picker-icon
+                  // cũng nằm ở @layer components nên cũng thua. Cả hai trục của cái hộp này
+                  // phải do lớp utility sở hữu, không được để sót nửa nào lại trong luật class.
+                  // `shrink-0` là NỬA CÒN LẠI của trục ngang, không phải trang trí. `w-*` chỉ khai
+                  // kích thước MONG MUỐN; trong một flex row chật, `flex-shrink: 1` mặc định vẫn
+                  // ép nó nhỏ hơn. Đo thật trong Chromium ở chính frame tài liệu của component:
+                  // `.ui-topbar-end` rộng 82px, gap 8px, hai trigger cùng co → ô vuông ra
+                  // 21,28 × 32px thay vì 32 × 32. Đây không phải gh#366 quay lại: `inline-size`
+                  // vẫn giải đúng --control-height; cái hỏng là co giãn. Một tap target vuông
+                  // biến thành hình chữ nhật 21px mỗi khi topbar chật là lỗi thật, và nó kéo
+                  // theo cả vùng chạm. Nhánh CÓ NHÃN cố tình KHÔNG nhận `shrink-0`: nó rộng theo
+                  // nội dung và mang sẵn `max-w-full` để được phép thu lại.
+                  // Vẫn phải là utility vì cùng lý do với `w-*`: luật trong @layer components
+                  // thua lớp utilities mà SelectTrigger phát ra.
+                  cn(
+                    "ui-app-setting-picker-icon hover:bg-accent hover:text-accent-foreground",
+                    "w-[length:var(--control-height)] shrink-0 justify-center"
+                  )
                 ) : (
                   // 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

package/dist/components/navigation/context-menu.js

@@ -11,11 +11,11 @@ function ContextMenuTrigger(props) {
 }
 const ContextMenuPortal = ContextMenuPrimitive.Portal;
 const ContextMenuContent = React.forwardRef(({ className, ...props }, ref) => {
-  useInertHiddenBackground();
+  const contentRef = useInertHiddenBackground(ref);
   return /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     ContextMenuPrimitive.Content,
     {
-      ref,
+      ref: contentRef,
       "data-slot": "context-menu-content",
       className: cn("ui-context-menu-content", className),
       ...props

package/dist/components/navigation/dropdown-menu.js

@@ -24,11 +24,11 @@ function DropdownMenuSub(props) {
   return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
 }
 const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
-  useInertHiddenBackground();
+  const contentRef = useInertHiddenBackground(ref);
   return /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Content,
     {
-      ref,
+      ref: contentRef,
       "data-slot": "dropdown-menu-content",
       sideOffset,
       className: cn(