@godxjp/ui 18.15.4 → 19.1.0

package/dist/components/general/button.js

@@ -6,20 +6,11 @@ import { cva } from "class-variance-authority";
 import { Loader2 } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { useTranslation } from "../../i18n/use-translation.js";
-const buttonCountClass = {
-  default: "bg-primary-foreground/15",
-  destructive: "bg-destructive-foreground/15",
-  secondary: "bg-secondary-foreground/15",
-  outline: "bg-foreground/8 text-muted-foreground",
-  dashed: "bg-foreground/8 text-muted-foreground",
-  ghost: "bg-foreground/8 text-muted-foreground",
-  link: "bg-foreground/8 text-muted-foreground"
-};
 const buttonVariants = cva("ui-button", {
   variants: {
     variant: {
       default: "ui-button--default bg-primary text-primary-foreground hover:bg-primary/90",
-      destructive: "ui-button--destructive bg-destructive text-destructive-foreground focus-visible:ring-destructive/20",
+      destructive: "ui-button--destructive bg-destructive text-destructive-foreground",
       outline: "ui-button--outline border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
       dashed: "ui-button--dashed border border-dashed bg-background hover:bg-accent hover:text-accent-foreground",
       secondary: "ui-button--secondary bg-secondary text-secondary-foreground hover:bg-secondary/80",
@@ -27,13 +18,16 @@ const buttonVariants = cva("ui-button", {
       link: "ui-button--link text-primary underline-offset-4 hover:underline"
     },
     size: {
-      default: "ui-button--default-size py-2 has-[>svg]:px-3",
-      md: "ui-button--default-size py-2 has-[>svg]:px-3",
-      xs: "h-[calc(var(--control-height)-0.75rem)] gap-1 px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-      sm: "ui-button--sm gap-1.5 has-[>svg]:px-2.5",
-      lg: "ui-button--lg has-[>svg]:px-4",
+      default: "ui-button--default-size",
+      md: "ui-button--default-size",
+      // The glyph rules stay UTILITIES, not a components-layer rule: Tailwind v4 orders
+      // utilities after components, so only a utility can out-rank a child's own `size-*`.
+      // They read the token, so the value is still themeable.
+      xs: "ui-button--xs [&_svg:not([class*='size-'])]:size-[var(--button-xs-icon-size)]",
+      sm: "ui-button--sm",
+      lg: "ui-button--lg",
       icon: "ui-button--icon",
-      "icon-xs": "ui-button--icon-xs [&_svg]:size-3 [&_svg]:shrink-0",
+      "icon-xs": "ui-button--icon-xs [&_svg]:size-[var(--button-xs-icon-size)] [&_svg]:shrink-0",
       "icon-sm": "ui-button--icon-sm",
       "icon-lg": "ui-button--icon-lg"
     },
@@ -79,10 +73,7 @@ const Button = React.forwardRef(
       "span",
       {
         "data-slot": "button-count",
-        className: cn(
-          "inline-flex min-w-4 items-center justify-center rounded-[var(--radius-pill)] px-1 text-xs leading-none tabular-nums",
-          buttonCountClass[variant ?? "default"]
-        ),
+        className: "ui-button-count",
         children: countLabel
       }
     ) : null;
@@ -99,11 +90,7 @@ const Button = React.forwardRef(
         disabled: isLoading || disabled,
         type: asChild ? void 0 : type ?? "button",
         className: cn(
-          "inline-flex shrink-0 items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-all outline-none",
           fullWidth && "w-full",
-          "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-          "disabled:pointer-events-none disabled:opacity-50",
-          "data-[loading]:pointer-events-none",
           "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
           "[&_svg]:pointer-events-none [&_svg]:shrink-0",
           buttonVariants({ variant, size, shape, className })

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

@@ -6,3 +6,5 @@ export { Logo } from "./logo.js";
 export type { LogoMark, LogoProps, LogoSize, LogoTone } from "./logo.js";
 export { Reveal } from "./reveal.js";
 export type { RevealProp, RevealProps } from "./reveal.js";
+export { Activity } from "./activity.js";
+export type { ActivityProp, ActivityProps } from "./activity.js";

package/dist/components/general/index.js

@@ -2,7 +2,9 @@ import { Button, buttonVariants } from "./button.js";
 import { Text, Heading } from "./typography.js";
 import { Logo } from "./logo.js";
 import { Reveal } from "./reveal.js";
+import { Activity } from "./activity.js";
 export {
+  Activity,
   Button,
   Heading,
   Logo,

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

@@ -35,6 +35,7 @@ function AppShell({
       setDrawerOpen(false);
     }
   };
+  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 }),
     topbarLeft !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-left", children: topbarLeft }),
@@ -42,7 +43,7 @@ function AppShell({
     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 bar = /* @__PURE__ */ jsxs("header", { className: "app-topbar ui-scale-fixed", "aria-label": t("layout.appShell.headerLabel"), children: [
+  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(
         Button,
@@ -53,7 +54,7 @@ function AppShell({
           className: "app-mobile-nav-trigger hidden max-[900px]:inline-flex",
           "aria-label": t("layout.appShell.openNav"),
           "aria-haspopup": "dialog",
-          children: /* @__PURE__ */ jsx(Menu, { className: "size-5", "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx(Menu, { className: "size-[var(--app-shell-mobile-nav-icon-size)]", "aria-hidden": "true" })
         }
       ) }),
       /* @__PURE__ */ jsxs(
@@ -77,7 +78,7 @@ function AppShell({
         }
       )
     ] }),
-    resolvedTopbar
+    hasTopbarContent && resolvedTopbar
   ] });
   return /* @__PURE__ */ jsxs(
     "div",
@@ -85,6 +86,7 @@ function AppShell({
       className: "app-root",
       "data-collapsed": sidebarCollapsed ? "true" : void 0,
       "data-responsive-navigation": responsiveNavigation,
+      "data-topbar": hasTopbarContent ? void 0 : "none",
       "data-topbar-span": topbarSpan === "full" ? "full" : void 0,
       children: [
         topbarSpan === "full" ? bar : rail,

package/dist/components/layout/auth-divider.d.ts

@@ -1,7 +1,14 @@
 import type { AuthDividerProp } from "../../props/components/layout.prop.js";
 export type { AuthDividerProp, AuthDividerProp as AuthDividerProps, } from "../../props/components/layout.prop.js";
 /**
- * AuthDivider — a centred, localized conjunction between two equal separator rules. The grid
- * composition keeps the label optically and geometrically centred regardless of translation.
+ * AuthDivider — a centred, localized conjunction between two equal separator rules.
+ *
+ * Since gh#308 this is a thin PRESET over `Separator label`, not a parallel implementation: the
+ * grid, the accessible-name contract and the rule geometry all live on the primitive, and
+ * `.ui-auth-divider` only re-points Separator's `--separator-*` knobs at the `--auth-shell-divider-*`
+ * layer. That keeps #263's canonical login geometry byte-for-byte identical while breaking the
+ * coupling the issue reported — a service retuning its login divider no longer retunes every day
+ * divider in its message streams, and vice versa. New code that wants a labelled rule outside an
+ * auth form should use `<Separator label>` directly.
  */
 export declare function AuthDivider({ label, className }: AuthDividerProp): import("react").JSX.Element;

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

@@ -1,18 +1,14 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+"use client";
+import { jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
+import { Separator } from "../ui/separator.js";
 function AuthDivider({ label, className }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsx(
+    Separator,
     {
       "data-slot": "auth-divider",
-      className: cn("ui-auth-divider", className),
-      role: "separator",
-      "aria-label": label,
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "ui-auth-divider-rule", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx("span", { className: "ui-auth-divider-label", "aria-hidden": "true", children: label }),
-        /* @__PURE__ */ jsx("span", { className: "ui-auth-divider-rule", "aria-hidden": "true" })
-      ]
+      label,
+      className: cn("ui-auth-divider", className)
     }
   );
 }

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

@@ -39,6 +39,7 @@ export type { MasterDetailProps } from "./master-detail.js";
 export { SplitPane } from "./split-pane.js";
 export type { SplitPaneProps } from "./split-pane.js";
 export { Separator } from "./separator.js";
+export type { SeparatorProp, SeparatorProps } from "./separator.js";
 export { AspectRatio } from "./aspect-ratio.js";
 export { LegalDocumentShell } from "./legal-document-shell.js";
 export type { LegalDocumentSectionProp, LegalDocumentShellProp, LegalDocumentShellProps, } from "./legal-document-shell.js";

package/dist/components/layout/page-container.d.ts

@@ -2,7 +2,7 @@ import type { PageContainerProp, PageInsetProp } from "../../props/components/la
 export type { PageContainerProp, PageContainerProp as PageContainerProps, } from "../../props/components/layout.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbItemProp as BreadcrumbItem, } from "../../props/vocabulary/navigation.prop.js";
 export declare function PageContainerInset({ className, children, ...props }: PageInsetProp): import("react").JSX.Element;
-declare function PageContainerRoot({ title, subtitle, status, extra, footer, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, headerLoading, density, variant, preset, headerLayout, measure, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
+declare function PageContainerRoot({ title, subtitle, status, extra, toolbar, footer, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, headerLoading, density, variant, preset, headerLayout, headerScale, measure, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
 export declare const PageContainer: typeof PageContainerRoot & {
     Inset: typeof PageContainerInset;
 };

package/dist/components/layout/page-container.js

@@ -38,6 +38,7 @@ function PageContainerRoot({
   subtitle,
   status,
   extra,
+  toolbar,
   footer,
   breadcrumb,
   breadcrumbLabel,
@@ -48,6 +49,7 @@ function PageContainerRoot({
   variant = "default",
   preset = "default",
   headerLayout = "stack",
+  headerScale = "document",
   measure = "default",
   stickyFooter = false,
   footerReveal = "always",
@@ -63,6 +65,7 @@ function PageContainerRoot({
     {
       "data-preset": preset,
       "data-measure": measure,
+      "data-header-scale": headerScale === "chrome" ? "chrome" : void 0,
       "data-revealed": revealed ? "true" : void 0,
       className: cn(
         "ui-page-container",
@@ -91,30 +94,38 @@ function PageContainerRoot({
                   className: "ui-breadcrumb",
                   children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: breadcrumb.map((item, i) => {
                     const isLast = i === breadcrumb.length - 1;
-                    return /* @__PURE__ */ jsxs("li", { className: "ui-inline-xs", children: [
-                      item.to && !isLast ? /* @__PURE__ */ jsx(
-                        LinkComponent,
-                        {
-                          href: item.to,
-                          to: item.to,
-                          className: "hover:text-foreground hover:underline",
-                          children: item.label
-                        }
-                      ) : /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: isLast ? "text-foreground" : "",
-                          "aria-current": isLast ? "page" : void 0,
-                          children: item.label
-                        }
-                      ),
-                      !isLast && /* @__PURE__ */ jsx(ChevronRight, { className: "size-3", "aria-hidden": "true" })
-                    ] }, i);
+                    return (
+                      // The package's own breadcrumb item hook (gh#319): same
+                      // `--space-inline-xs` gap the previous `.ui-inline-xs` gave, and it brings
+                      // `.ui-breadcrumb-item svg { 0.75rem }` with it, so the separator glyph no
+                      // longer carries a `size-3` literal. It also drops `.ui-inline-xs`'s
+                      // `flex-wrap: wrap` — a crumb must not break between its label and its
+                      // chevron; the LIST wraps instead, exactly as <Breadcrumb> already behaves.
+                      /* @__PURE__ */ jsxs("li", { className: "ui-breadcrumb-item", children: [
+                        item.to && !isLast ? /* @__PURE__ */ jsx(
+                          LinkComponent,
+                          {
+                            href: item.to,
+                            to: item.to,
+                            className: "hover:text-foreground hover:underline",
+                            children: item.label
+                          }
+                        ) : /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: isLast ? "text-foreground" : "",
+                            "aria-current": isLast ? "page" : void 0,
+                            children: item.label
+                          }
+                        ),
+                        !isLast && /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
+                      ] }, i)
+                    );
                   }) })
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "ui-page-header-row", children: [
-                /* @__PURE__ */ jsxs("div", { className: "ui-page-header-heading min-w-0", children: [
+                /* @__PURE__ */ jsxs("div", { className: "ui-page-header-heading", children: [
                   headerLoading ? /* @__PURE__ */ jsx("h1", { className: "ui-page-title ui-skeleton-block ui-page-title-placeholder", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("layout.pageHeader.loading") }) }) : status != null ? /* @__PURE__ */ jsxs("div", { className: "ui-page-header-title-row", children: [
                     /* @__PURE__ */ jsx("h1", { className: "ui-page-title", children: title }),
                     /* @__PURE__ */ jsx("div", { className: "ui-page-header-status", children: status })
@@ -136,6 +147,7 @@ function PageContainerRoot({
             ]
           }
         ),
+        toolbar != null && /* @__PURE__ */ jsx("div", { className: "ui-page-toolbar", children: toolbar }),
         children != null && /* @__PURE__ */ jsx("div", { className: "ui-page-body", children }),
         footer && /* @__PURE__ */ jsx("footer", { className: "ui-page-footer", children: footer })
       ]

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

@@ -1,14 +1,14 @@
 import * as React from "react";
 import * as ResizablePrimitive from "react-resizable-panels";
-export declare const ResizablePanelGroup: {
-    ({ className, ...props }: React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Group>): React.JSX.Element;
-    displayName: string;
-};
-export declare const ResizablePanel: {
-    ({ className, elementRef, ...props }: React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Panel>): React.JSX.Element;
-    displayName: string;
-};
-export declare const ResizableHandle: {
-    ({ className, ...props }: React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Separator>): React.JSX.Element;
-    displayName: string;
-};
+export declare function ResizablePanelGroup({ className, ...props }: React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Group>): React.JSX.Element;
+export declare namespace ResizablePanelGroup {
+    var displayName: string;
+}
+export declare function ResizablePanel({ className, elementRef, ...props }: React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Panel>): React.JSX.Element;
+export declare namespace ResizablePanel {
+    var displayName: string;
+}
+export declare function ResizableHandle({ className, ...props }: React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Separator>): React.JSX.Element;
+export declare namespace ResizableHandle {
+    var displayName: string;
+}

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

@@ -1 +1,2 @@
 export { Separator } from "../ui/separator.js";
+export type { SeparatorProp, SeparatorProps } from "../ui/separator.js";

package/dist/components/layout/service-role-panel.js

@@ -132,49 +132,54 @@ const ServiceRolePanel = React.forwardRef(
             masterLabel: masterLabel ?? t("layout.serviceRolePanel.rolesLabel"),
             detailLabel: detailLabel ?? t("layout.serviceRolePanel.detailLabel"),
             detailId,
-            master: /* @__PURE__ */ jsx("ul", { className: "flex list-none flex-col gap-1", "data-slot": "service-role-panel-list", children: roles.map((role) => {
+            master: /* @__PURE__ */ jsx("ul", { className: "ui-service-role-panel-list", "data-slot": "service-role-panel-list", children: roles.map((role) => {
               const selected = role.id === value;
-              return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: selected ? "secondary" : "ghost",
-                    className: "h-auto flex-1 justify-start py-2 text-start",
-                    "aria-current": selected ? "true" : void 0,
-                    "aria-controls": detailId,
-                    onClick: () => select(role.id),
-                    children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col items-start leading-tight", children: [
-                      /* @__PURE__ */ jsxs("span", { className: "inline-flex max-w-full items-center gap-1.5", children: [
-                        /* @__PURE__ */ jsx(Text, { weight: "medium", className: "truncate", children: role.name }),
-                        role.locked && /* @__PURE__ */ jsxs(Badge, { tone: "default", variant: "outline", children: [
-                          /* @__PURE__ */ jsx(Lock, { "aria-hidden": "true" }),
-                          t("layout.serviceRolePanel.locked")
-                        ] })
-                      ] }),
-                      (role.description !== void 0 || role.memberCount !== void 0) && /* @__PURE__ */ jsx(Text, { size: "2xs", tone: "muted", className: "max-w-full truncate", children: [
-                        role.description,
-                        role.memberCount !== void 0 ? (
-                          // `{count}` is Intl.NumberFormat-grouped by `interpolate`,
-                          // pluralized by CLDR category — no hand-built formatting.
-                          t("layout.serviceRolePanel.memberCount", {
-                            count: role.memberCount
-                          })
-                        ) : void 0
-                      ].filter((part) => part !== void 0).join(" \xB7 ") })
-                    ] })
-                  }
-                ),
-                deletable && !role.locked && /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "icon-sm",
-                    "aria-label": t("layout.serviceRolePanel.deleteRole", { role: role.name }),
-                    onClick: () => setPendingDelete(role),
-                    children: /* @__PURE__ */ jsx(Trash2, { "aria-hidden": "true" })
-                  }
-                )
-              ] }, role.id);
+              return (
+                // NOT `.ui-inline-xs`: that helper adds `flex-wrap: wrap`, and this row holds a
+                // flex-1 select button next to an icon-only delete button that must never wrap
+                // onto its own line.
+                /* @__PURE__ */ jsxs("li", { className: "ui-service-role-panel-row", children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: selected ? "secondary" : "ghost",
+                      className: "ui-service-role-panel-item h-auto flex-1 justify-start text-start",
+                      "aria-current": selected ? "true" : void 0,
+                      "aria-controls": detailId,
+                      onClick: () => select(role.id),
+                      children: /* @__PURE__ */ jsxs("span", { className: "ui-service-role-panel-item-body", children: [
+                        /* @__PURE__ */ jsxs("span", { className: "ui-service-role-panel-item-title", children: [
+                          /* @__PURE__ */ jsx(Text, { weight: "medium", className: "truncate", children: role.name }),
+                          role.locked && /* @__PURE__ */ jsxs(Badge, { tone: "default", variant: "outline", children: [
+                            /* @__PURE__ */ jsx(Lock, { "aria-hidden": "true" }),
+                            t("layout.serviceRolePanel.locked")
+                          ] })
+                        ] }),
+                        (role.description !== void 0 || role.memberCount !== void 0) && /* @__PURE__ */ jsx(Text, { size: "2xs", tone: "muted", className: "max-w-full truncate", children: [
+                          role.description,
+                          role.memberCount !== void 0 ? (
+                            // `{count}` is Intl.NumberFormat-grouped by `interpolate`,
+                            // pluralized by CLDR category — no hand-built formatting.
+                            t("layout.serviceRolePanel.memberCount", {
+                              count: role.memberCount
+                            })
+                          ) : void 0
+                        ].filter((part) => part !== void 0).join(" \xB7 ") })
+                      ] })
+                    }
+                  ),
+                  deletable && !role.locked && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon-sm",
+                      "aria-label": t("layout.serviceRolePanel.deleteRole", { role: role.name }),
+                      onClick: () => setPendingDelete(role),
+                      children: /* @__PURE__ */ jsx(Trash2, { "aria-hidden": "true" })
+                    }
+                  )
+                ] }, role.id)
+              );
             }) }),
             children: detail
           }

package/dist/components/layout/sidebar.js

@@ -36,7 +36,19 @@ function SidebarRowContent({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     !sub ? /* @__PURE__ */ jsx(SidebarIcon, { icon: item.icon }) : null,
     /* @__PURE__ */ jsx("span", { className: "sb-label", children: item.label }),
-    showBadge ? /* @__PURE__ */ jsx("span", { className: "sb-badge", children: item.badge }) : null
+    showBadge ? (
+      // `data-tone` is emitted ONLY for the emphasis tone (rule #44: present-when-on,
+      // absent-when-off), so a rail that never sets `badgeTone` renders the exact same node it
+      // always did and no consumer selector has to out-specify a marker meaning "unchanged".
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "sb-badge",
+          "data-tone": item.badgeTone === "destructive" ? "destructive" : void 0,
+          children: item.badge
+        }
+      )
+    ) : null
   ] });
 }
 function SidebarItem({

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

@@ -1,7 +1,18 @@
 import type { ReactNode } from "react";
 export type SplitPaneProps = {
     children: ReactNode;
-    aside: ReactNode;
+    /**
+     * Aside (trailing) panel content. Pass `null` to CLOSE the rail: no `<aside>` element is
+     * rendered, the grid drops to one full-width column and the gap goes with it.
+     *
+     * Closing this way — rather than dropping the whole `SplitPane` at the call site — is what
+     * keeps `children` MOUNTED. The three wrappers below are rendered unconditionally, so the
+     * main column sits at the same depth and the same slot in the React tree in both states and
+     * React reuses its DOM node instead of remounting it. A collapsible thread/detail panel that
+     * swapped `<SplitPane>{page}</SplitPane>` for a bare `{page}` changed the tree depth, which
+     * remounted the page and threw the reader to the bottom of a scrolled list.
+     */
+    aside: ReactNode | null;
     /**
      * How wide the rail is once the pane is wide enough to split: `sm` 20rem,
      * `md` 22rem, `lg` 30rem. `lg` is for rails that carry a panel rather than a

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

@@ -1,9 +1,18 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 function SplitPane({ children, aside, asideWidth = "md", asideLabel }) {
-  return /* @__PURE__ */ jsx("div", { className: "ui-split-pane-scope", children: /* @__PURE__ */ jsxs("div", { className: "ui-split-pane", "data-aside-width": asideWidth, children: [
-    /* @__PURE__ */ jsx("div", { className: "ui-split-pane-main", children }),
-    /* @__PURE__ */ jsx("aside", { className: "ui-split-pane-aside", "aria-label": asideLabel, children: aside })
-  ] }) });
+  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 })
+      ]
+    }
+  ) });
 }
 export {
   SplitPane

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

@@ -41,16 +41,6 @@ const ICON = {
   density: Rows3,
   fontSize: Type
 };
-const TRIGGER_WIDTH = {
-  locale: "sm:w-40",
-  timezone: "sm:w-56",
-  dateFormat: "sm:w-44",
-  timeFormat: "sm:w-44",
-  theme: "sm:w-36",
-  brand: "sm:w-44",
-  density: "sm:w-40",
-  fontSize: "sm:w-36"
-};
 const ARIA_KEY = {
   locale: "navigation.localePicker.ariaLabel",
   timezone: "navigation.timezonePicker.ariaLabel",
@@ -139,7 +129,7 @@ const AppSettingPicker = React.forwardRef(
               id,
               showIndicator: !iconOnly && !inline,
               className: cn(
-                inline ? "ui-app-setting-picker-inline h-auto min-h-0 w-auto rounded-none border-0 bg-transparent p-0 shadow-none" : iconOnly ? (
+                inline ? "ui-app-setting-picker-inline" : iconOnly ? (
                   // Structurally icon-only: drop the owned width + value spacing and square the box to
                   // the density-aware --control-height tap target, centring the icon. Visually it
                   // sits among ghost icon buttons (the topbar's sidebar-toggle/notifications/account
@@ -149,7 +139,7 @@ const AppSettingPicker = React.forwardRef(
                   // (`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 w-[length:var(--control-height)] justify-center border-transparent bg-transparent ps-0 pe-0 shadow-none"
+                  "ui-app-setting-picker-icon hover:bg-accent hover:text-accent-foreground"
                 ) : (
                   // Labeled: sized to a per-kind width from `sm` up; below `sm` it hugs its content and
                   // caps at the container (`w-auto max-w-full`) instead of the old UNCONDITIONAL
@@ -157,7 +147,7 @@ const AppSettingPicker = React.forwardRef(
                   // fill the bar (gh#165). 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 && TRIGGER_WIDTH[kind])
+                  cn("w-auto 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
@@ -165,13 +155,14 @@ const AppSettingPicker = React.forwardRef(
                 isCompact && "ui-app-setting-picker-compact gap-[length:var(--app-setting-picker-compact-gap)]",
                 className
               ),
+              "data-kind": kind,
               "aria-label": t(ARIA_KEY[kind]),
               children: [
                 inline ? null : /* @__PURE__ */ jsx(
                   Icon,
                   {
                     className: cn(
-                      "size-4 shrink-0 opacity-70",
+                      "ui-app-setting-picker-glyph",
                       // Compact relies on the trigger's tokenized flex gap instead of an icon margin.
                       !iconOnly && !isCompact && "me-2"
                     ),