@godxjp/ui 19.6.0 → 20.0.0

package/dist/components/general/logo.js

@@ -1,5 +1,6 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { Slot } from "../../lib/slot.js";
 import { cn } from "../../lib/utils.js";
 const X_HEIGHT_TOP = /^[acegmnopqrsuvwxyz]+$/;
 const LATIN_DESCENDER = /[gjpqy]/;
@@ -83,42 +84,47 @@ const Logo = React.forwardRef(
     tone = "primary",
     wordmark,
     label,
+    asChild,
+    children,
     className,
     ...props
   }, ref) => {
     const hasWordmark = wordmark !== void 0 && wordmark !== null && wordmark !== false;
     const identity = { "data-mark": mark, "data-size": size, "data-tone": tone };
+    const renderRoot = (rootProps, content) => {
+      if (!asChild) {
+        return /* @__PURE__ */ jsx("span", { ref, ...rootProps, children: content });
+      }
+      const borrowed = React.Children.only(children);
+      return /* @__PURE__ */ jsx(Slot, { ...rootProps, ref, children: React.cloneElement(borrowed, void 0, content) });
+    };
     if (hasWordmark) {
-      return /* @__PURE__ */ jsxs(
-        "span",
+      return renderRoot(
         {
-          ref,
           "data-slot": "logo-lockup",
           ...identity,
           className: cn("ui-logo-lockup", className),
           role: label ? "img" : void 0,
           "aria-label": label,
-          ...props,
-          children: [
-            /* @__PURE__ */ jsx("span", { "data-slot": "logo", ...identity, className: "ui-logo", "aria-hidden": "true", children: /* @__PURE__ */ jsx(MarkArtwork, { mark, glyph }) }),
-            /* @__PURE__ */ jsx("span", { "data-slot": "logo-wordmark", "data-logotype": true, className: "ui-logo-wordmark", children: wordmark })
-          ]
-        }
+          ...props
+        },
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { "data-slot": "logo", ...identity, className: "ui-logo", "aria-hidden": "true", children: /* @__PURE__ */ jsx(MarkArtwork, { mark, glyph }) }),
+          /* @__PURE__ */ jsx("span", { "data-slot": "logo-wordmark", "data-logotype": true, className: "ui-logo-wordmark", children: wordmark })
+        ] })
       );
     }
-    return /* @__PURE__ */ jsx(
-      "span",
+    return renderRoot(
       {
-        ref,
         "data-slot": "logo",
         ...identity,
         className: cn("ui-logo", className),
         role: label ? "img" : void 0,
         "aria-label": label,
         "aria-hidden": label ? void 0 : true,
-        ...props,
-        children: /* @__PURE__ */ jsx(MarkArtwork, { mark, glyph })
-      }
+        ...props
+      },
+      /* @__PURE__ */ jsx(MarkArtwork, { mark, glyph })
     );
   }
 );

package/dist/components/layout/app-shell.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { AppShellProp } from "../../props/components/layout.prop.js";
 export type { AppShellProp, AppShellProp as AppShellProps, } from "../../props/components/layout.prop.js";
-export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, breadcrumb, footer, children, sidebarCollapsed, responsiveNavigation, topbarSpan, mobileNav, mobileNavLabel, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): React.JSX.Element;
+export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, breadcrumb, footer, children, sidebarCollapsed, responsiveNavigation, topbarSpan, navRail, navRailLabel, mobileNav, mobileNavLabel, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): React.JSX.Element;

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

@@ -1,10 +1,11 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Menu } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { Button } from "../general/button.js";
 import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTrigger } from "../feedback/sheet.js";
+import { NavSurfaceProvider } from "./nav-surface.js";
 function AppShell({
   sidebar,
   topbar,
@@ -17,14 +18,20 @@ function AppShell({
   sidebarCollapsed = false,
   responsiveNavigation = "drawer",
   topbarSpan = "content",
+  navRail,
+  navRailLabel,
   mobileNav,
   mobileNavLabel,
   mobileNavOpen,
   onMobileNavOpenChange
 }) {
   const { t } = useTranslation();
-  const drawerNav = mobileNav !== void 0 ? mobileNav : sidebar;
+  const drawerNav = mobileNav !== void 0 ? mobileNav : navRail !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    navRail,
+    sidebar
+  ] }) : sidebar;
   const hasDrawer = responsiveNavigation === "drawer" && drawerNav != null;
+  const railInDrawer = mobileNav === void 0 && navRail !== void 0;
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
   const drawerOpen = mobileNavOpen ?? uncontrolledOpen;
   const setDrawerOpen = onMobileNavOpenChange ?? setUncontrolledOpen;
@@ -36,13 +43,39 @@ function AppShell({
     }
   };
   const hasTopbarContent = topbar !== void 0 || topbarLeft !== void 0 || topbarRight !== void 0 || logo !== void 0;
-  const resolvedTopbar = topbar !== void 0 ? topbar : /* @__PURE__ */ jsxs("div", { className: "app-topbar-rail", children: [
-    logo !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-logo", children: logo }),
+  if (process.env.NODE_ENV !== "production" && topbar !== void 0) {
+    const ignored = [
+      topbarLeft !== void 0 && "topbarLeft",
+      topbarRight !== void 0 && "topbarRight"
+    ].filter(Boolean);
+    if (ignored.length > 0) {
+      console.warn(
+        `AppShell: \`topbar\` \u0111\u01B0\u1EE3c truy\u1EC1n, n\xEAn ${ignored.join(", ")} b\u1ECB b\u1ECF qua v\xE0 KH\xD4NG \u0111\u01B0\u1EE3c v\u1EBD. Ho\u1EB7c b\u1ECF \`topbar\` \u0111\u1EC3 AppShell t\u1EF1 d\u1EF1ng d\u1EA3i t\u1EEB c\xE1c khe kia, ho\u1EB7c \u0111\u1EB7t n\u1ED9i dung \u0111\xF3 v\xE0o trong ch\xEDnh \`topbar\`. (\`logo\` KH\xD4NG n\u1EB1m trong s\u1ED1 n\xE0y \u2014 n\xF3 lu\xF4n \u0111\u01B0\u1EE3c v\u1EBD.)`
+      );
+    }
+  }
+  const logoInRail = logo !== void 0 && topbarSpan !== "full";
+  const resolvedTopbar = topbar !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "app-topbar-rail", children: [
+    !logoInRail && logo !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-logo", children: logo }),
+    /* @__PURE__ */ jsx("div", { className: "app-topbar-custom", children: topbar })
+  ] }) : /* @__PURE__ */ jsxs("div", { className: "app-topbar-rail", children: [
+    !logoInRail && logo !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-logo", children: logo }),
     topbarLeft !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-left", children: topbarLeft }),
     /* @__PURE__ */ jsx("div", { className: "app-topbar-spacer" }),
     topbarRight !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-right", children: topbarRight })
   ] });
-  const rail = /* @__PURE__ */ jsx("aside", { className: "app-sidebar", "aria-label": t("layout.appShell.sidebarLabel"), children: sidebar });
+  const rail = /* @__PURE__ */ jsxs("aside", { className: "app-sidebar", "aria-label": t("layout.appShell.sidebarLabel"), children: [
+    logoInRail && /* @__PURE__ */ jsx("div", { className: "app-sidebar-logo", children: logo }),
+    sidebar
+  ] });
+  const navRailRegion = navRail === void 0 ? null : /* @__PURE__ */ jsx(
+    "aside",
+    {
+      className: "app-nav-rail",
+      "aria-label": navRailLabel ?? t("layout.appShell.navRailLabel"),
+      children: navRail
+    }
+  );
   const bar = !hasTopbarContent && !hasDrawer ? null : /* @__PURE__ */ jsxs("header", { className: "app-topbar ui-scale-fixed", "aria-label": t("layout.appShell.headerLabel"), children: [
     hasDrawer && /* @__PURE__ */ jsxs(Sheet, { open: drawerOpen, onOpenChange: setDrawerOpen, children: [
       /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -71,7 +104,10 @@ function AppShell({
               {
                 className: "app-mobile-nav-body px-[var(--app-shell-mobile-nav-inset)]",
                 onClick: handleDrawerClick,
-                children: drawerNav
+                children: railInDrawer ? /* @__PURE__ */ jsxs("div", { className: "app-mobile-nav-columns", children: [
+                  /* @__PURE__ */ jsx("div", { className: "app-mobile-nav-rail", children: navRail }),
+                  /* @__PURE__ */ jsx(NavSurfaceProvider, { surface: "drawer", children: /* @__PURE__ */ jsx("div", { className: "app-mobile-nav-sections", children: sidebar }) })
+                ] }) : /* @__PURE__ */ jsx(NavSurfaceProvider, { surface: "drawer", children: drawerNav })
               }
             )
           ]
@@ -88,9 +124,17 @@ function AppShell({
       "data-responsive-navigation": responsiveNavigation,
       "data-topbar": hasTopbarContent ? void 0 : "none",
       "data-topbar-span": topbarSpan === "full" ? "full" : void 0,
+      "data-nav-rail": navRail !== void 0 ? "" : void 0,
       children: [
-        topbarSpan === "full" ? bar : rail,
-        topbarSpan === "full" ? rail : bar,
+        topbarSpan === "full" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          bar,
+          navRailRegion,
+          rail
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          navRailRegion,
+          rail,
+          bar
+        ] }),
         /* @__PURE__ */ jsxs("main", { className: "app-main", "aria-label": t("layout.appShell.mainLabel"), tabIndex: 0, children: [
           breadcrumb !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-breadcrumb", children: breadcrumb }),
           children

package/dist/components/layout/aspect-ratio.js

@@ -1,4 +1,3 @@
-"use client";
 import { AspectRatio } from "../ui/aspect-ratio.js";
 export {
   AspectRatio

package/dist/components/layout/auth-divider.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
 import { Separator } from "../ui/separator.js";

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

@@ -1,3 +1,3 @@
 import type { FlexProp } from "../../props/components/layout.prop.js";
 export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexProp, FlexProp as FlexProps, } from "../../props/components/layout.prop.js";
-export declare function Flex({ as: Element, direction, gap, align, justify, wrap, hideBelow, hideFrom, className, children, ...props }: FlexProp): import("react").JSX.Element;
+export declare function Flex({ as: Element, direction, gap, gapRaw, pad, padRaw, align, justify, wrap, hideBelow, hideFrom, fill, width, className, style, children, ...props }: FlexProp): import("react").JSX.Element;

package/dist/components/layout/flex.js

@@ -2,17 +2,24 @@
 import { jsx } from "react/jsx-runtime";
 import { mergeAriaIds } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
-import { flexGapClass } from "../../lib/variants.js";
+import { flexGapClass, padStyle } from "../../lib/variants.js";
+const toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
 function Flex({
   as: Element = "div",
   direction = "row",
   gap = "md",
+  gapRaw,
+  pad,
+  padRaw,
   align,
   justify,
   wrap = false,
   hideBelow,
   hideFrom,
+  fill = false,
+  width,
   className,
+  style,
   children,
   ...props
 }) {
@@ -39,7 +46,17 @@ function Flex({
       "data-wrap": wrap ? "true" : void 0,
       "data-hide-below": hideBelow,
       "data-hide-from": hideFrom,
-      className: cn("ui-flex", flexGapClass[gap], className),
+      "data-fill": fill ? "" : void 0,
+      "data-width-raw": width === void 0 ? void 0 : "",
+      "data-gap-raw": gapRaw,
+      className: cn("ui-flex", gapRaw === void 0 ? flexGapClass[gap] : void 0, className),
+      "data-pad-raw": padRaw === void 0 ? void 0 : "",
+      style: {
+        ...style,
+        ...gapRaw === void 0 ? void 0 : { gap: `${gapRaw}px` },
+        ...width === void 0 ? void 0 : { inlineSize: toCssLength(width) },
+        ...padStyle(pad, padRaw)
+      },
       ...domProps,
       children
     }

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+/**
+ * WHICH SURFACE a navigation component is rendering into.
+ *
+ * `AppShell` reuses the very same `sidebar` / `navRail` nodes for the mobile drawer that it docks
+ * on desktop — that is the point of the default, since a consumer should not have to build its
+ * navigation twice. But those nodes carry `collapsed`, and collapse is a DESKTOP answer: it trades
+ * labels for horizontal room in a docked column. A drawer has no such pressure, and below the
+ * breakpoint it is the ONLY navigation there is.
+ *
+ * Shipping both together produced a drawer of anonymous icons: a consumer collapsed its sidebar at
+ * 1280px, resized to 393px, opened the drawer, and got the organization mark plus five unlabelled
+ * glyphs — captured in that repo's own browser test, which is named "desktop sidebar collapse
+ * stays independent from the mobile navigation drawer" and had been asserting exactly this.
+ *
+ * The node cannot be un-collapsed from the outside once it is built, so the surface announces
+ * itself instead and the navigation components read it. Not exported from the public barrel: this
+ * is a contract between `AppShell` and the navigation it hosts, not a consumer knob.
+ */
+export type NavSurface = "docked" | "drawer";
+export declare function NavSurfaceProvider({ surface, children, }: {
+    surface: NavSurface;
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** `"docked"` outside an AppShell drawer — so a standalone `Sidebar` keeps its own `collapsed`. */
+export declare function useNavSurface(): NavSurface;

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

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+const NavSurfaceContext = React.createContext("docked");
+function NavSurfaceProvider({
+  surface,
+  children
+}) {
+  return /* @__PURE__ */ jsx(NavSurfaceContext.Provider, { value: surface, children });
+}
+function useNavSurface() {
+  return React.useContext(NavSurfaceContext);
+}
+export {
+  NavSurfaceProvider,
+  useNavSurface
+};

package/dist/components/layout/org-switcher.d.ts

@@ -1,9 +1,13 @@
 import * as React from "react";
 import type { OrgSwitcherProp } from "../../props/components/layout.prop.js";
 export type { OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, OrgSwitcherProp as OrgSwitcherProps, } from "../../props/components/layout.prop.js";
+/** Arbitrary `data-*` hooks — the one escape hatch this closed component keeps open. */
+type DataAttributes = {
+    [key: `data-${string}`]: string | number | boolean | undefined;
+};
 /**
  * Organization switcher with one stable shell contract: canonical trigger geometry, an optional
  * status badge, a searchable desktop popover, a focus-trapped bottom Sheet at/below the shared
  * `--sheet-responsive-breakpoint-width`, and explicit loading/empty/error states.
  */
-export declare function OrgSwitcher({ organizations, value, onValueChange, collapsed, disabled, loading, error, onRetry, labels, responsive, open, onOpenChange, className, }: OrgSwitcherProp): React.JSX.Element;
+export declare function OrgSwitcher({ organizations, value, onValueChange, collapsed, disabled, loading, error, onRetry, labels, responsive, open, onOpenChange, className, ...rest }: OrgSwitcherProp & Pick<React.ComponentPropsWithoutRef<"button">, "id"> & DataAttributes): React.JSX.Element;

package/dist/components/layout/org-switcher.js

@@ -46,7 +46,7 @@ const OrgSwitcherTrigger = React.forwardRef(
         ref,
         type: "button",
         variant: "ghost",
-        className: "ui-org-switcher-trigger",
+        className: cn("ui-org-switcher-trigger", "h-[length:var(--org-switcher-trigger-height)]"),
         "data-collapsed": collapsed ? "true" : void 0,
         disabled,
         "aria-label": label,
@@ -147,7 +147,8 @@ function OrgSwitcher({
   responsive = "auto",
   open,
   onOpenChange,
-  className
+  className,
+  ...rest
 }) {
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
   const controlled = open !== void 0;
@@ -173,7 +174,8 @@ function OrgSwitcher({
       organization: current,
       collapsed,
       disabled: triggerDisabled,
-      label: triggerLabel
+      label: triggerLabel,
+      ...rest
     }
   );
   const panel = /* @__PURE__ */ jsx(

package/dist/components/layout/separator.js

@@ -1,4 +1,3 @@
-"use client";
 import { Separator } from "../ui/separator.js";
 export {
   Separator

package/dist/components/layout/sidebar.js

@@ -1,11 +1,12 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
+import { Slot } from "../../lib/slot.js";
 import { ChevronDown } from "lucide-react";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../data-display/collapsible.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../feedback/tooltip.js";
+import { useNavSurface } from "./nav-surface.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 function SidebarHeader({ children, className, ...props }) {
@@ -301,6 +302,8 @@ function Sidebar({
 }) {
   const { t } = useTranslation();
   const resolvedSections = sections ?? [];
+  const surface = useNavSurface();
+  collapsed = surface === "drawer" ? false : collapsed;
   return /* @__PURE__ */ jsxs("div", { className: "sb-root", "data-collapsed": collapsed ? "true" : void 0, children: [
     brand !== void 0 ? /* @__PURE__ */ jsx(SidebarHeader, { children: brand }) : product ? (() => {
       const interactive = onProductClick != null;

package/dist/components/layout/split-pane.d.ts

@@ -15,5 +15,18 @@ export type SplitPaneProps = {
     asideWidth?: "sm" | "md" | "lg";
     /** Accessible complementary landmark name; required when multiple panes share a document. */
     asideLabel?: string;
+    /**
+     * Fill the remaining height of the parent instead of growing with the content.
+     *
+     * Default `false` keeps the pane content-height — the right answer for a pane that sits in a
+     * scrolling page. Set it for an app-shell surface whose columns own their own scrolling (a chat
+     * transcript with a pinned composer, a full-height table beside a detail rail): the pane and
+     * both columns get a DEFINITE height, so `overflow` inside a column scrolls that column rather
+     * than pushing the page taller.
+     *
+     * The parent still decides how much height there is to fill — `fill` claims 100% of it, it does
+     * not invent it. Inside a flex column give the wrapper `flex: 1; min-height: 0`.
+     */
+    fill?: boolean;
 };
-export declare function SplitPane({ children, aside, asideWidth, asideLabel }: SplitPaneProps): import("react").JSX.Element;
+export declare function SplitPane({ children, aside, asideWidth, asideLabel, fill, }: SplitPaneProps): import("react").JSX.Element;

package/dist/components/layout/split-pane.js

@@ -1,18 +1,31 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-function SplitPane({ children, aside, asideWidth = "md", asideLabel }) {
+function SplitPane({
+  children,
+  aside,
+  asideWidth = "md",
+  asideLabel,
+  fill = false
+}) {
   const closed = aside === null || aside === void 0;
-  return /* @__PURE__ */ jsx("div", { className: "ui-split-pane-scope", children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "ui-split-pane",
-      "data-aside-width": asideWidth,
-      "data-aside": closed ? "closed" : void 0,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "ui-split-pane-main", children }),
-        closed ? null : /* @__PURE__ */ jsx("aside", { className: "ui-split-pane-aside", "aria-label": asideLabel, children: aside })
-      ]
-    }
-  ) });
+  return (
+    // `data-fill` is published on BOTH wrappers, not just the grid: the scope element is the one
+    // the consumer's own box actually contains, so without it the height stops at the scope and
+    // the grid has nothing definite to fill. Two attributes here are what keeps the consumer from
+    // reaching past its own child with `[&>*>*]` to say the same thing.
+    /* @__PURE__ */ jsx("div", { className: "ui-split-pane-scope", "data-fill": fill ? "true" : void 0, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "ui-split-pane",
+        "data-aside-width": asideWidth,
+        "data-aside": closed ? "closed" : void 0,
+        "data-fill": fill ? "true" : void 0,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "ui-split-pane-main", children }),
+          closed ? null : /* @__PURE__ */ jsx("aside", { className: "ui-split-pane-aside", "aria-label": asideLabel, children: aside })
+        ]
+      }
+    ) })
+  );
 }
 export {
   SplitPane

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

@@ -1,7 +1,6 @@
-"use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
+import { Slot } from "../../lib/slot.js";
 import { cn } from "../../lib/utils.js";
 const TopbarItem = React.forwardRef(function TopbarItem2({ asChild = false, className, type, ...props }, ref) {
   const Comp = asChild ? Slot : "button";

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

@@ -110,7 +110,8 @@ const AppSettingPicker = React.forwardRef(
     }, [kind, ctx?.timezoneOptions, current, t, locale, fallbackLocale]);
     const unbound = current === void 0 || !handleChange;
     const Icon = ICON[kind];
-    const iconOnly = resolvedAppearance === "icon";
+    const bar = resolvedAppearance === "bar";
+    const iconOnly = bar || resolvedAppearance === "icon";
     const inline = resolvedAppearance === "inline";
     const isCompact = compact && !inline;
     return /* @__PURE__ */ jsxs(
@@ -164,7 +165,24 @@ const AppSettingPicker = React.forwardRef(
                   // 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"
+                    "w-[length:var(--control-height)] shrink-0 justify-center",
+                    // `bar` — a CELL of the bar, not a control in it. Both overrides are UTILITIES
+                    // for the reason the block above already records twice: SelectTrigger emits
+                    // `rounded-[var(--control-radius)]` from controlTriggerClass and takes its
+                    // height from `.ui-control`, and a rule in @layer components loses to both.
+                    //
+                    // HEIGHT IS `self-stretch` + `h-auto`, NOT A LENGTH. The bar's height comes
+                    // from a grid row in AppShell, from --topbar-height standalone, or from the
+                    // coarse-pointer override on touch — a cell that named any one of those would
+                    // be wrong in the other two. `h-auto` is what releases `.ui-control`'s height
+                    // so the stretch can take effect; without it the box stays 32px in a 48px bar
+                    // and the hover paints a pill, which is the whole defect this value fixes.
+                    // `min-h` keeps the touch target when the bar is SHORTER than --control-height.
+                    // The radius reads --topbar-item-radius, the SAME knob `TopbarItem` uses, so a
+                    // service that wants softer bar cells retunes one token and both follow. A
+                    // `rounded-none` literal here would put the shape out of a theme's reach
+                    // (rules #44/#45) and let the two bar cells drift apart.
+                    bar && "h-auto min-h-[length:var(--control-height)] self-stretch rounded-[var(--topbar-item-radius)]"
                   )
                 ) : (
                   // Labeled: sized to a per-kind width from `sm` up; below `sm` it hugs its content and
@@ -180,6 +198,7 @@ const AppSettingPicker = React.forwardRef(
                 className
               ),
               "data-kind": kind,
+              "data-appearance": resolvedAppearance,
               "aria-label": t(ARIA_KEY[kind]),
               children: [
                 inline ? null : /* @__PURE__ */ jsx(

package/dist/components/navigation/app-setting-toggle.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { AppSettingToggleProp } from "../../props/components/app.prop.js";
+export type { AppSettingToggleKind, AppSettingToggleProp, AppSettingToggleProp as AppSettingToggleProps, } from "../../props/components/app.prop.js";
+/**
+ * AppSettingToggle — ONE button that steps a single AppProvider setting to its next value.
+ *
+ * The no-menu counterpart to {@link AppSettingPicker}: same binding contract, same option order,
+ * one tap instead of open-then-choose. Reach for it when the value set is closed and short (theme,
+ * density, font size, clock format) and the control lives in a top bar, where a dropdown for three
+ * values is a menu nobody wanted to open.
+ *
+ * The accessible name carries BOTH the setting and its current value ("Theme: Dark"), because the
+ * glyph is the only visible state and a screen-reader user would otherwise be told only which
+ * setting they are standing on, never where it currently is.
+ */
+export declare const AppSettingToggle: React.ForwardRefExoticComponent<AppSettingToggleProp & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,96 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  AArrowDown,
+  AArrowUp,
+  ALargeSmall,
+  Clock,
+  Monitor,
+  Moon,
+  Rows2,
+  Rows3,
+  Rows4,
+  Sun
+} from "lucide-react";
+import { APP_TIME_FORMAT_OPTIONS, getTimeFormatLabel } from "../../app/time-format-labels.js";
+import { APP_DENSITIES, APP_FONT_SIZES, APP_THEMES } from "../../app/theme-axes.js";
+import { useOptionalAppContext } from "../../app/app-provider.js";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { Button } from "../general/button.js";
+import { TopbarItem } from "../layout/topbar-item.js";
+const VALUES = {
+  theme: APP_THEMES,
+  density: APP_DENSITIES,
+  fontSize: APP_FONT_SIZES,
+  timeFormat: APP_TIME_FORMAT_OPTIONS.map((option) => option.value)
+};
+const VALUE_ICON = {
+  theme: { light: Sun, dark: Moon, system: Monitor },
+  density: { compact: Rows4, default: Rows3, comfortable: Rows2 },
+  fontSize: { sm: AArrowDown, default: ALargeSmall, lg: AArrowUp },
+  // 12h vs 24h is a NOTATION, not a picture: `Clock3`/`Clock12` differ only by hand position, which
+  // reads as a time of day. So this kind shows the kind glyph plus the value as text instead.
+  timeFormat: {}
+};
+const KIND_ICON = {
+  theme: Sun,
+  density: Rows3,
+  fontSize: ALargeSmall,
+  timeFormat: Clock
+};
+const ARIA_KEY = {
+  theme: "navigation.themePicker.ariaLabel",
+  density: "navigation.densityPicker.ariaLabel",
+  fontSize: "navigation.fontSizePicker.ariaLabel",
+  timeFormat: "navigation.timeFormatPicker.ariaLabel"
+};
+const AppSettingToggle = React.forwardRef(
+  function AppSettingToggle2({ kind, appearance = "bar", className, disabled, id, value, onValueChange }, ref) {
+    const ctx = useOptionalAppContext();
+    const { t, locale, fallbackLocale } = useTranslation();
+    const raw = value ?? ctx?.[kind];
+    const current = raw == null ? void 0 : String(raw);
+    const setter = ctx ? {
+      theme: ctx.setTheme,
+      density: ctx.setDensity,
+      fontSize: ctx.setFontSize,
+      timeFormat: ctx.setTimeFormat
+    }[kind] : void 0;
+    const handleChange = onValueChange ?? setter;
+    const unbound = current === void 0 || !handleChange;
+    const values = VALUES[kind];
+    const handleClick = () => {
+      if (current === void 0 || !handleChange) return;
+      handleChange(values[(values.indexOf(current) + 1) % values.length]);
+    };
+    const ValueIcon = current === void 0 ? void 0 : VALUE_ICON[kind][current];
+    const Icon = ValueIcon ?? KIND_ICON[kind];
+    const valueLabel = current === void 0 ? "" : kind === "timeFormat" ? getTimeFormatLabel(current, locale, fallbackLocale) : t(`navigation.${kind}Picker.${current}`);
+    const shared = {
+      ref,
+      id,
+      type: "button",
+      disabled: disabled || unbound,
+      onClick: handleClick,
+      "data-kind": kind,
+      // The button has no visible label, so this aria-label is its ONLY accessible name — and it
+      // must name the VALUE too, or a cycler announces the same string at every step.
+      "aria-label": t("navigation.settingToggle.label", {
+        setting: t(ARIA_KEY[kind]),
+        value: valueLabel
+      }),
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }),
+        ValueIcon ? null : /* @__PURE__ */ jsx("span", { children: current })
+      ] })
+    };
+    if (appearance === "bar") {
+      return /* @__PURE__ */ jsx(TopbarItem, { className, ...shared });
+    }
+    return /* @__PURE__ */ jsx(Button, { variant: "ghost", size: ValueIcon ? "icon" : "sm", className, ...shared });
+  }
+);
+export {
+  AppSettingToggle
+};