@godxjp/ui 20.1.0 → 20.2.0

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

@@ -4,9 +4,9 @@ import * as React from "react";
 import { Menu } from "lucide-react";
 import { useMediaQuery } from "../../lib/hooks.js";
 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";
+import { TopbarItem } from "./topbar-item.js";
 function useAppShellNavigationMode() {
   return useMediaQuery("(width <= 56.25rem)") ? "drawer" : "docked";
 }
@@ -23,6 +23,8 @@ function AppShell({
   responsiveNavigation = "drawer",
   topbarSpan = "content",
   navRail,
+  navRailPosition = "start",
+  navRailEnd,
   navRailLabel,
   mobileNav,
   mobileNavLabel,
@@ -32,8 +34,12 @@ function AppShell({
   const { t } = useTranslation();
   const navigationMode = useAppShellNavigationMode();
   const hasSidebar = sidebar !== void 0 && sidebar !== null && sidebar !== false;
-  const drawerNav = mobileNav !== void 0 ? mobileNav : navRail !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  const railContent = navRail === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
     navRail,
+    navRailEnd !== void 0 ? /* @__PURE__ */ jsx("div", { className: "app-nav-rail-end", children: navRailEnd }) : null
+  ] });
+  const drawerNav = mobileNav !== void 0 ? mobileNav : navRail !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    railContent,
     sidebar
   ] }) : sidebar;
   const hasDrawer = responsiveNavigation === "drawer" && drawerNav != null && drawerNav !== false;
@@ -82,18 +88,18 @@ function AppShell({
     "aside",
     {
       className: "app-nav-rail",
+      "data-orientation": navRailPosition === "top" || navRailPosition === "bottom" ? "horizontal" : "vertical",
+      "data-edge": navRailPosition,
       "aria-label": navRailLabel ?? t("layout.appShell.navRailLabel"),
-      children: navRail
+      children: railContent
     }
   );
   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,
+        TopbarItem,
         {
           type: "button",
-          variant: "ghost",
-          size: "sm",
           className: "app-mobile-nav-trigger",
           "aria-label": t("layout.appShell.openNav"),
           "aria-haspopup": "dialog",
@@ -115,7 +121,7 @@ function AppShell({
                 className: "app-mobile-nav-body px-[var(--app-shell-mobile-nav-inset)]",
                 onClick: handleDrawerClick,
                 children: railInDrawer ? /* @__PURE__ */ jsxs("div", { className: "app-mobile-nav-columns", children: [
-                  /* @__PURE__ */ jsx("div", { className: "app-mobile-nav-rail", children: navRail }),
+                  /* @__PURE__ */ jsx("div", { className: "app-mobile-nav-rail", children: railContent }),
                   /* @__PURE__ */ jsx(NavSurfaceProvider, { surface: "drawer", children: /* @__PURE__ */ jsx("div", { className: "app-mobile-nav-sections", children: sidebar }) })
                 ] }) : /* @__PURE__ */ jsx(NavSurfaceProvider, { surface: "drawer", children: drawerNav })
               }
@@ -137,6 +143,7 @@ function AppShell({
       "data-topbar": hasTopbarContent ? void 0 : "none",
       "data-topbar-span": topbarSpan === "full" ? "full" : void 0,
       "data-nav-rail": navRail !== void 0 ? "" : void 0,
+      "data-nav-rail-position": navRail !== void 0 ? navRailPosition : void 0,
       children: [
         topbarSpan === "full" ? /* @__PURE__ */ jsxs(Fragment, { children: [
           bar,

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

@@ -7,4 +7,4 @@ export type { AuthShellProp, AuthShellProp as AuthShellProps, } from "../../prop
  * locale picker, a theme toggle), and `measure="wide"` opens the content slot to the split login
  * (a brand panel beside the card) that used to have no shell of its own.
  */
-export declare function AuthShell({ brand, actions, footer, children, variant, preset, measure, density, className, }: AuthShellProp): import("react").JSX.Element;
+export declare function AuthShell({ brand, actions, footer, children, variant, preset, measure, align, density, className, }: AuthShellProp): import("react").JSX.Element;

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

@@ -10,6 +10,7 @@ function AuthShell({
   variant = "default",
   preset = "default",
   measure = "default",
+  align,
   density,
   className
 }) {
@@ -22,6 +23,7 @@ function AuthShell({
       "data-variant": variant,
       "data-preset": preset === "default" ? void 0 : preset,
       "data-measure": measure === "default" ? void 0 : measure,
+      "data-align": align,
       "data-density": resolvedDensity,
       className: cn("ui-auth-shell", className),
       children: [

package/dist/components/layout/sidebar.js

@@ -304,8 +304,9 @@ function Sidebar({
   const resolvedSections = sections ?? [];
   const surface = useNavSurface();
   collapsed = surface === "drawer" ? false : collapsed;
+  const brandNode = typeof brand === "function" ? brand(collapsed) : brand;
   return /* @__PURE__ */ jsxs("div", { className: "sb-root", "data-collapsed": collapsed ? "true" : void 0, children: [
-    brand !== void 0 ? /* @__PURE__ */ jsx(SidebarHeader, { children: brand }) : product ? (() => {
+    brand !== void 0 ? /* @__PURE__ */ jsx(SidebarHeader, { children: brandNode }) : product ? (() => {
       const interactive = onProductClick != null;
       const mark = /* @__PURE__ */ jsx(
         "span",

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

@@ -1,5 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useOverlayPortalContainer } from "../../lib/overlay-portal.js";
 import * as React from "react";
 import {
   Header,
@@ -145,9 +146,11 @@ function DropdownMenuContent({
   void forceMount;
   const { modal } = React.useContext(DropdownMenuModalContext);
   const anchor = placement ? DROPDOWN_MENU_PLACEMENT[placement] : void 0;
+  const overlayPortalContainer = useOverlayPortalContainer();
   return /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs(
     Popover,
     {
+      UNSTABLE_portalContainer: overlayPortalContainer,
       "data-slot": "dropdown-menu-content",
       isNonModal: !modal,
       placement: toPlacement(side ?? anchor?.side, align ?? anchor?.align),
@@ -384,9 +387,11 @@ function DropdownMenuSubContent({
   void forceMount;
   void hideWhenDetached;
   void sticky;
+  const overlayPortalContainer = useOverlayPortalContainer();
   return /* @__PURE__ */ jsx(
     Popover,
     {
+      UNSTABLE_portalContainer: overlayPortalContainer,
       "data-slot": "dropdown-menu-sub-content",
       placement: align ? toPlacement("right", align) : void 0,
       offset: sideOffset,

package/dist/components/ui/hover-card.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { useOverlayPortalContainer } from "../../lib/overlay-portal.js";
 import * as React from "react";
 import { chain, mergeRefs } from "@react-aria/utils";
 import { Popover as AriaPopover } from "react-aria-components";
@@ -142,9 +143,11 @@ function HoverCardContent({
   ...props
 }) {
   const card = useHoverCard("HoverCardContent");
+  const overlayPortalContainer = useOverlayPortalContainer();
   return /* @__PURE__ */ jsx(
     AriaPopover,
     {
+      UNSTABLE_portalContainer: overlayPortalContainer,
       isOpen: card.open,
       onOpenChange: card.setOpenImmediately,
       isNonModal: true,

package/dist/i18n/index.d.ts

@@ -1,3 +1,3 @@
-export { translate, translateCurrent, syncI18nLocale, resetI18nLocale, MESSAGE_CATALOG, } from "./translate.js";
+export { translate, translateCurrent, syncI18nLocale, resetI18nLocale, MESSAGE_CATALOG, registerMessages, } from "./translate.js";
 export type { Messages, MessageKey, TranslateParams } from "./translate.js";
 export { useTranslation, usePickerLocales } from "./use-translation.js";

package/dist/i18n/index.js

@@ -3,11 +3,13 @@ import {
   translateCurrent,
   syncI18nLocale,
   resetI18nLocale,
-  MESSAGE_CATALOG
+  MESSAGE_CATALOG,
+  registerMessages
 } from "./translate.js";
 import { useTranslation, usePickerLocales } from "./use-translation.js";
 export {
   MESSAGE_CATALOG,
+  registerMessages,
   resetI18nLocale,
   syncI18nLocale,
   translate,

package/dist/i18n/messages/en.json

@@ -19,7 +19,9 @@
   "dataEntry": {
     "calendar": {
       "today": "Today",
-      "close": "Close"
+      "close": "Close",
+      "nav": "{label} navigation",
+      "name": "Calendar"
     },
     "datePicker": {
       "placeholder": "Select date",

package/dist/i18n/messages/ja.json

@@ -19,7 +19,9 @@
   "dataEntry": {
     "calendar": {
       "today": "今日",
-      "close": "閉じる"
+      "close": "閉じる",
+      "nav": "{label}のナビゲーション",
+      "name": "カレンダー"
     },
     "datePicker": {
       "placeholder": "日付を選択",

package/dist/i18n/messages/vi.json

@@ -19,7 +19,9 @@
   "dataEntry": {
     "calendar": {
       "today": "Hôm nay",
-      "close": "Đóng"
+      "close": "Đóng",
+      "nav": "Điều hướng {label}",
+      "name": "Lịch"
     },
     "datePicker": {
       "placeholder": "Chọn ngày",

package/dist/i18n/translate.d.ts

@@ -3,6 +3,25 @@ import vi from "./messages/vi.json" with { type: "json" };
 export type Messages = typeof vi;
 export declare const MESSAGE_CATALOG: Record<AppLocale, Record<string, unknown>>;
 export type MessageKey = string;
+/**
+ * ADD AN APPLICATION'S OWN STRINGS TO THE LIBRARY'S CATALOG.
+ *
+ * The catalog used to be closed: `MESSAGE_CATALOG` was exported but there was no way to extend it,
+ * so an application had to run a SECOND translation system beside this one — two lookups, two
+ * fallback chains, and two places a missing key can hide. That is a real cost for a product whose
+ * pages mix library chrome and application copy in the same sentence.
+ *
+ * MERGES, never replaces: a partial tree is layered onto what is already there, so registering
+ * `{ myApp: { title: "…" } }` cannot delete `dataEntry.calendar.today`. Registering the same key
+ * twice is last-write-wins, which is what a hot reload needs and what a second call with corrected
+ * copy expects.
+ *
+ * A LIBRARY KEY CANNOT BE SILENTLY REPLACED. Overwriting `dataEntry.*` or any other namespace this
+ * package ships would let one application change what a shared component says — invisibly, from a
+ * distance, and only in the build where that call ran. Reach for the component's own labels prop
+ * instead; every string this library renders has one.
+ */
+export declare function registerMessages(locale: AppLocale, messages: Record<string, unknown>): void;
 export type TranslateParams = Record<string, string | number>;
 /** Resolve a dot-path message with fallback locale chain, CLDR plurals, and locale number formatting. */
 export declare function translate(locale: AppLocale, fallbackLocale: AppLocale, key: MessageKey, params?: TranslateParams): string;

package/dist/i18n/translate.js

@@ -6,6 +6,29 @@ const MESSAGE_CATALOG = {
   en,
   ja
 };
+const LIBRARY_NAMESPACES = new Set(
+  Object.values(MESSAGE_CATALOG).flatMap((messages) => Object.keys(messages))
+);
+function registerMessages(locale, messages) {
+  const reserved = [...LIBRARY_NAMESPACES].filter((key) => Object.hasOwn(messages, key));
+  if (reserved.length > 0) {
+    throw new Error(
+      `@godxjp/ui i18n: [${reserved.join(", ")}] ${reserved.length === 1 ? "is a" : "are"} reserved top-level namespace(s) owned by the library. Register your strings under a namespace of your own, and change what a component says through its \`labels\` prop.`
+    );
+  }
+  MESSAGE_CATALOG[locale] = mergeDeep(MESSAGE_CATALOG[locale] ?? {}, messages);
+}
+function mergeDeep(target, source) {
+  const merged = { ...target };
+  for (const [key, value] of Object.entries(source)) {
+    const existing = merged[key];
+    merged[key] = isPlainObject(existing) && isPlainObject(value) ? mergeDeep(existing, value) : value;
+  }
+  return merged;
+}
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
 function getNested(obj, path) {
   const parts = path.split(".");
   let current = obj;
@@ -75,6 +98,7 @@ export {
   MESSAGE_CATALOG,
   getSyncedFallbackLocale,
   getSyncedLocale,
+  registerMessages,
   resetI18nLocale,
   syncI18nLocale,
   translate,

package/dist/lib/overlay-portal.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+export interface OverlayPortalProviderProps {
+    /**
+     * The element overlays are rendered into. Pass the shadow root, or any element inside it.
+     * `undefined` restores the default, so a subtree can opt back out.
+     */
+    container: Element | undefined;
+    children: React.ReactNode;
+}
+export declare function OverlayPortalProvider({ container, children }: OverlayPortalProviderProps): React.JSX.Element;
+/**
+ * The container this overlay should render into. An explicit prop wins, so one panel can be placed
+ * elsewhere without unmounting the provider around it.
+ *
+ * Not exported from the public barrel: this is a contract between the provider and the overlays
+ * this library ships, not a knob for consumers — a consumer that needs the value has a provider.
+ */
+export declare function useOverlayPortalContainer(override?: Element): Element | undefined;

package/dist/lib/overlay-portal.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { enableShadowDOM } from "react-stately/private/flags/flags";
+const OverlayPortalContext = React.createContext(void 0);
+enableShadowDOM();
+function OverlayPortalProvider({ container, children }) {
+  return /* @__PURE__ */ jsx(OverlayPortalContext.Provider, { value: container, children });
+}
+function useOverlayPortalContainer(override) {
+  const fromContext = React.useContext(OverlayPortalContext);
+  return override ?? fromContext;
+}
+export {
+  OverlayPortalProvider,
+  useOverlayPortalContainer
+};

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

@@ -3,6 +3,7 @@ import type { Locale } from "date-fns";
 import type { DayPickerProps } from "react-day-picker";
 import type { AppLocale, AppRequestHeaders, AppTimeFormat, AppTimezone, AppTimezoneDefault, AppDateFormat } from "../../app/types.js";
 import type { AppBrand, AppDensity, AppFontSize, AppTheme } from "../../app/theme-axes.js";
+import type { AppPreferenceAxis } from "../../app/storage.js";
 import type { AppSettingPickerAppearanceProp, AppSettingToggleAppearanceProp, ChildrenProp, ClassNameProp, DisabledProp, IdProp, NameProp, OnValueChangeProp, ValueProp } from "../vocabulary/index.js";
 /** @see AppProvider */
 export type AppProviderProp = {
@@ -26,8 +27,18 @@ export type AppProviderProp = {
     timezoneOptions?: readonly AppTimezone[];
     /** localStorage key. Default: `godxjp.app`. */
     storageKey?: string;
-    /** Persist user choices. Default: true. */
-    persist?: boolean;
+    /**
+     * Which viewer preferences survive a reload. `true` (default) every axis, `false` none, or a
+     * LIST of axes — `["theme", "density", "fontSize"]`.
+     *
+     * The list exists because the axes do not share an owner. `theme` / `brand` / `density` /
+     * `fontSize` / `scaling` are the VIEWER's and belong in this browser. `locale` / `timezone` /
+     * `timeFormat` / `dateFormat` are frequently the SERVER's, resolved per request from a cookie,
+     * an account row or a header — and a stored copy then WINS over the value the server just sent,
+     * because storage is read after the props. Faced with one all-or-nothing flag, that consumer
+     * sets `persist={false}` and loses the viewer's theme along with it; naming the axes keeps both.
+     */
+    persist?: boolean | readonly AppPreferenceAxis[];
     /**
      * Initial theme choice. `"light"` / `"dark"` are written straight to `<html data-theme>`;
      * `"system"` defers to `prefers-color-scheme` and is re-resolved whenever the OS changes.

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

@@ -89,6 +89,19 @@ export type ButtonProp = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     /** Corner shape — `default` (control radius) · `pill` (fully rounded) · `sharp` (square). */
     shape?: ShapeProp;
     fullWidth?: boolean;
+    /**
+     * Take the space the siblings leave, and let a long label ELLIPSE instead of widening the row —
+     * the same axis `Flex` calls `fill`, for the same reason.
+     *
+     * Button ships `flex-shrink: 0`, right almost everywhere and wrong in a constrained bar: an
+     * account menu holding an avatar plus a person's name keeps its full width while the cluster
+     * clips it, so a keyboard user tabs to a control they cannot see (SC 2.4.7). Until this axis
+     * existed the only move was `className="min-w-0 flex-1"`, which ui-audit blocks — and which this
+     * package's own Topbar guidance recommended, so the docs prescribed the utility the audit forbids.
+     *
+     * Sets `flex: 1 1 auto` and `min-inline-size: 0`; pair it with a `<Text truncate>` label.
+     */
+    fill?: boolean;
     /** Allow a text button to grow vertically for multi-line labels. */
     wrap?: boolean;
     /** Logical content alignment, especially for full-width collection actions. */

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

@@ -336,6 +336,30 @@ export type AppShellProp = {
      * to be tellable apart by name; the shell always supplies both defaults rather than requiring
      * this prop, so the two columns of equal rank behave the same way.
      */
+    /**
+     * WHICH EDGE the rail sits on. `start` (default) and `end` are the INLINE edges — logical, so an
+     * RTL document mirrors them without a `[dir]` rule; `top` and `bottom` are the block edges, where
+     * the rail becomes a full-measure horizontal strip and the shell grows a ROW instead of a column.
+     *
+     * The scope contract does not move with it: wherever it sits, the rail is PLATFORM scope. The
+     * edge is a presentation choice — a docked column reads as permanent chrome (Slack), a bottom
+     * strip reads as the phone/tab-bar shape, a top strip as a platform band above the app's own bar.
+     * Thickness follows the orientation: `--app-shell-nav-rail-width` as a column,
+     * `--app-shell-nav-rail-height` as a strip.
+     *
+     * Collapsing the sidebar folds the sidebar track only, at every position.
+     */
+    navRailPosition?: "start" | "end" | "top" | "bottom";
+    /**
+     * Rail content pinned to its FAR end — the counterpart of `Sidebar`'s `footer`, and the tray end
+     * of a taskbar: settings, appearance, the account glyph. It follows the orientation, so it is the
+     * bottom of a column and the inline-end of a strip, and it stays put while `navRail` scrolls.
+     *
+     * A slot rather than "whatever you put last", because pinning it needs an auto margin on the
+     * right axis — geometry that would otherwise land in consumer CSS, which this library does not
+     * accept. Ignored when `navRail` is not passed: there is no rail to pin anything to.
+     */
+    navRailEnd?: ReactNode;
     navRailLabel?: string;
     /**
      * Navigation shown in the mobile drawer at the DXS 900px breakpoint, where the docked sidebar is
@@ -398,6 +422,22 @@ export type AuthShellProp = {
      * flow geometry.
      */
     measure?: "default" | "wide";
+    /**
+     * Block-axis placement of the auth column, ORTHOGONAL to `preset` the way `variant` is: a preset
+     * owns the page MEASURE (card width, inline gutters, section rhythm), `align` owns where that
+     * column sits vertically.
+     *
+     * Omit it to keep the preset's own choice — `"login"` and `"registration"` anchor so a
+     * requester/identity line that wraps to two lines cannot move the card, every other preset
+     * centres. Pass `"center"` for a vertically centred column (the block-start inset collapses to
+     * the preset's block-end one, desktop and mobile, so the padding is symmetric) or `"anchored"`
+     * for a top-anchored one. This replaces re-declaring a preset's offset tokens from consumer CSS.
+     *
+     * HAZARD on a tall flow: a vertically centred tall card overflows ABOVE the scroll origin on a
+     * short viewport, putting its first field out of reach. That is why `"registration"` anchors by
+     * default; `"center"` is legal there but is the caller's judgement.
+     */
+    align?: "anchored" | "center";
     /**
      * Vertical density scoped to auth-card descendants. The canonical variant defaults to
      * `"compact"`; the default variant defaults to `"comfortable"`.
@@ -988,6 +1028,11 @@ export type AppLauncherProp = {
      * Grid column count. Omit it and the panel keeps the stylesheet's own `--app-launcher-columns`
      * (3, the Google-launcher shape, declared on `.ui-app-launcher-panel`): the default is where a
      * theme can reach it, and this prop is the per-instance override written inline on top.
+     *
+     * `responsive="fullscreen"` steps that DEFAULT up with the surface — 3 · 4 · 5 · 6 on the house
+     * container ladder — because a fixed three columns on a full viewport is three columns of tiles
+     * and a screen of nothing. Passing `columns` still wins everywhere: an inline custom property
+     * beats every stylesheet rule, so a stated count is a stated count on both surfaces.
      */
     columns?: number;
     /**
@@ -1008,11 +1053,42 @@ export type AppLauncherProp = {
      * responsive="auto"`, resolved through the shared `useSheetResponsiveMode()` hook, so a service
      * moves the drawer line once for every overlay instead of per component.
      *
-     * No `"dialog"` here, unlike `OrgSwitcher`: a launcher grid is a jump table, and a modal that
-     * takes over the screen to offer nine links is heavier than the errand. Switching ORGANIZATION
-     * re-scopes everything on screen and earns the interruption; opening an app does not.
+     * `"fullscreen"` is the LAUNCHPAD: one full-viewport surface, the page behind it blurred, the
+     * grid floating on that ground at tile size — the macOS Launchpad / Windows Start shape. It is
+     * pinned at every width, because a start surface that becomes a popover on a wide screen is two
+     * different products.
+     *
+     * WHEN IT IS RIGHT, AND WHEN IT IS NOT. This prop used to say a modal was always wrong here:
+     * "a launcher grid is a jump table, and a modal that takes over the screen to offer nine links
+     * is heavier than the errand." That reasoning is sound for a launcher in ONE application's
+     * topbar, where the grid is a shortcut away from the work on screen and the work should stay
+     * visible. It does not hold for a PLATFORM start bar — a strip that is present in every service,
+     * whose launcher is the primary way to move between products rather than a shortcut. There the
+     * grid IS the errand, the page behind it is the thing being left, and the interruption is the
+     * point. Keep `"auto"` for a topbar launcher; reach for `"fullscreen"` for a dock.
+     */
+    responsive?: "auto" | "popover" | "sheet" | "fullscreen";
+    /**
+     * The BOX the trigger takes — the same split `AppSettingToggle` draws, and for the same reason.
+     * `bar` (default) is a `TopbarItem`: a cell as tall as the bar, whose hover is the bar's own
+     * surface. `icon` is a square ghost `Button`, for chrome that is NOT a bar — a nav rail, a card
+     * header, a toolbar. A `TopbarItem` outside a bar has nothing to bleed to: it stretches to a
+     * container that never set a band height, and its squared corners and full-bleed hover read as a
+     * broken cell. The panel, the grid and the responsive contract are identical either way.
+     */
+    appearance?: "bar" | "icon";
+    /**
+     * Which side of the trigger the panel opens on, and how it aligns to it. Both default from
+     * `appearance` — a bar drops the grid below and aligns to the bar's end; anything else opens to
+     * the inline-end aligned to the trigger's start.
+     *
+     * State them when the chrome can be RE-DOCKED. `appearance` says the trigger is not in a bar; it
+     * cannot say which way is out, and a rail pinned to the top edge still opens downward. Measured
+     * without this: a launcher in a top strip opened sideways and left the panel 440px from the
+     * trigger it belonged to.
      */
-    responsive?: "auto" | "popover" | "sheet";
+    side?: "top" | "right" | "bottom" | "left";
+    align?: "start" | "center" | "end";
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     className?: ClassNameProp;
@@ -1026,7 +1102,21 @@ export type SidebarProp = {
     sections?: SidebarSectionProp[];
     product?: SidebarProductProp;
     onProductClick?: () => void;
-    brand?: ReactNode;
+    /**
+     * Header slot ABOVE the navigation, replacing `product`.
+     *
+     * Pass a FUNCTION to follow the EFFECTIVE collapsed state. A plain node cannot: `AppShell` hands
+     * the same Sidebar to the drawer and the drawer un-collapses the rows (see `NavSurface`), so a
+     * node built from the consumer's own `collapsed` boolean renders a glyph-only lockup inside a
+     * full-width drawer. The escape hatch consumers reach for is a SECOND hand-built `Sidebar` in
+     * `AppShell.mobileNav` — and that override is precisely what switches off `railInDrawer`, so the
+     * `navRail` silently stops reaching mobile. The function is called with the surface-effective
+     * value, which removes the reason to build the second node at all.
+     *
+     * SCOPE: this is the APP's brand lockup. A PLATFORM switch (which organization, which app) does
+     * not belong here — see AppShell's `navRail` for where it goes and why.
+     */
+    brand?: ReactNode | ((collapsed: boolean) => ReactNode);
     collapsed?: boolean;
     children?: ChildrenProp;
     /**

package/dist/styles/card-layout.css

@@ -458,6 +458,7 @@
     display: flex;
     min-width: 0;
     align-items: center;
+    flex-wrap: wrap;
     gap: var(--card-service-launcher-space-gap);
   }
 
@@ -483,9 +484,17 @@
     height: var(--card-service-launcher-icon-glyph-size);
   }
 
+  [data-slot="service-launcher-identity"] {
+    display: flex;
+    min-width: 0;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: var(--card-service-launcher-space-gap);
+  }
+
   [data-slot="service-launcher-title"] {
     min-width: 0;
-    flex: 1;
+    flex: 1 1 auto;
     overflow-wrap: anywhere;
     font-size: var(--card-title-font-size);
     font-weight: var(--card-title-font-weight);

package/dist/styles/chart-layout.css

@@ -113,7 +113,8 @@
   min-inline-size: 0;
   overflow: hidden;
   font-size: var(--chart-trend-tick-font-size);
-  line-height: var(--line-height-tight);
+
+    line-height: var(--line-height-normal);
   color: hsl(var(--muted-foreground));
   text-align: center;
   text-overflow: ellipsis;

package/dist/styles/control.css

@@ -92,6 +92,11 @@
     opacity: var(--disabled-opacity);
   }
 
+  .ui-button[data-fill] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+
   .ui-button svg {
     width: var(--control-icon-size);
     height: var(--control-icon-size);

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

@@ -647,6 +647,11 @@
     justify-content: center;
     color: hsl(var(--muted-foreground));
   }
+
+  [data-slot="list-row-leading"] > svg:not([class*="size-"]) {
+    width: var(--list-row-leading-icon-size, var(--control-icon-size));
+    height: var(--list-row-leading-icon-size, var(--control-icon-size));
+  }
   [data-slot="list-row-body"] {
     display: flex;
     min-inline-size: min(var(--list-row-body-min-width, 12rem), 100%);
@@ -1086,7 +1091,8 @@
     );
     color: hsl(var(--foreground));
     font-size: var(--timeline-grid-event-font-size);
-    line-height: var(--line-height-tight);
+
+    line-height: var(--line-height-normal);
     text-align: start;
   }
 

package/dist/styles/navigation-layout.css

@@ -14,7 +14,7 @@
 
   [data-slot="auth-legal-footer"] .ui-app-setting-picker-inline {
     width: auto;
-    min-height: 0;
+    min-block-size: var(--auth-footer-target-min-size);
     height: auto;
     border-width: 0;
     border-radius: 0;
@@ -961,6 +961,8 @@
   }
 
   .ui-app-setting-picker-icon[data-appearance="bar"] {
+    min-inline-size: var(--topbar-item-min-width);
+    padding-inline: var(--topbar-item-padding-inline);
     border-width: var(--app-setting-picker-bar-border-width);
     box-shadow: var(--app-setting-picker-bar-shadow);
   }