@godxjp/ui 32.8.0 → 32.10.1

package/agent/tokens.json

@@ -2556,10 +2556,16 @@
     "value": "var(--font-weight-medium)"
   },
   {
-    "description": "Card component tokens: card chrome derives from semantic layout tokens.",
+    "description": "gh#1305 (ADR C12): sentence case, no tracking by default; a theme opts into small caps.",
     "name": "--stat-card-label-letter-spacing",
     "tier": "component",
-    "value": "0.04em"
+    "value": "normal"
+  },
+  {
+    "description": "Card component tokens: card chrome derives from semantic layout tokens.",
+    "name": "--stat-card-label-letter-case",
+    "tier": "component",
+    "value": "none"
   },
   {
     "description": "Card component tokens: card chrome derives from semantic layout tokens.",
@@ -5387,6 +5393,12 @@
     "tier": "component",
     "value": "calc(2 * var(--control-height-xs) + var(--space-2))"
   },
+  {
+    "description": "Below 40rem the gutter collapses to this (ADR C05: first line ≤24px from the inner edge) and the handle rises above the caret's block at its inline end instead of sitting beside it.",
+    "name": "--block-editor-compact-gutter-inline-size",
+    "tier": "component",
+    "value": "var(--block-editor-frame-padding)"
+  },
   {
     "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).",
     "name": "--block-editor-min-height",
@@ -5640,7 +5652,7 @@
     "value": "initial"
   },
   {
-    "description": "Progress track + fill — `initial` so the role defaults re-resolve under a scoped theme. Track reads --secondary, fill reads --success; a service re-tones once. Defaults = hsl(var(--secondary)) track · hsl(var(--success)) fill.",
+    "description": "Progress track + fill — `initial` so the role defaults re-resolve under a scoped theme. Track reads --secondary, the default (`primary`) fill reads the brand mark; a service re-tones once. Defaults = hsl(var(--secondary)) track · hsl(var(--mark-primary, var(--primary))) fill (gh#1308 — it was the success mark; status tones are opt-in and do not read this knob).",
     "name": "--progress-track-background",
     "tier": "component",
     "value": "initial"
@@ -10241,6 +10253,18 @@
     "tier": "component",
     "value": "var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )"
   },
+  {
+    "description": "Section label case and tracking (gh#1305, ADR C12): default sentence case, no tracking — tiny letter-spaced capitals (11px, 0.08em) are the classic \"AI dashboard\" eyebrow. A theme that wants small caps back sets both.",
+    "name": "--sidebar-section-label-letter-case",
+    "tier": "component",
+    "value": "none"
+  },
+  {
+    "description": "Shell (sidebar / topbar / kbd) component tokens — small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale.",
+    "name": "--sidebar-section-label-letter-spacing",
+    "tier": "component",
+    "value": "normal"
+  },
   {
     "description": "Shell (sidebar / topbar / kbd) component tokens — small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale.",
     "name": "--sidebar-product-tenant-font-size",
@@ -10709,6 +10733,18 @@
     "tier": "component",
     "value": "none"
   },
+  {
+    "description": "TopbarSearch (ADR C02): the inline field's TEXT AREA never shrinks below this — measured after the icon and clear/shortcut padding, in the field's own font. Below its `collapseBelow` step the field folds to a search cell instead of shrinking. 8ch is a repo-chosen policy, not a standard.",
+    "name": "--topbar-search-min-text-inline-size",
+    "tier": "component",
+    "value": "8ch"
+  },
+  {
+    "description": "The inline field's preferred width from the step up; it shrinks toward the floor above.",
+    "name": "--topbar-search-inline-size",
+    "tier": "component",
+    "value": "16rem"
+  },
   {
     "description": "TOPBAR BAR ITEM — the shape of an interactive cell IN the bar, as opposed to a control dropped into it. The bar's own chrome (Fluent's command bar, SLDS's global header, Atlassian's navigation, and the right-hand action slot of enterprise pro-layouts generally) draws a trigger as a full-height cell whose hover is the bar's surface; a `Button` in the same slot draws a --control-height pill with its own hover fill and its own ring, floating inside a taller strip. NO HEIGHT KNOB, DELIBERATELY. The cell's height IS the bar's, whatever the bar's is — `--app-shell-bar-height` inside AppShell, `--topbar-height` for a standalone Topbar, the coarse-pointer override on a touch device. A knob here would be a second answer that goes stale the moment either of those moves.",
     "name": "--topbar-item-padding-inline",

package/dist/components/data-display/progress.d.ts

@@ -1,12 +1,18 @@
 import * as React from "react";
-export type ProgressTone = "success" | "warning" | "destructive";
 /**
- * A breakdown SLICE takes two more tones than the meter (gh#1302): `info` and `neutral`, the same
- * pair `Legend` already keys — a partition with four states (done · done-awaiting · in progress ·
- * not started) needs four distinguishable fills, and the meter's three made two of them identical.
- * Each paints exactly what the matching Legend swatch paints, so a key and its bar stay one.
+ * The METER's tone. `primary` (the default, gh#1308) is the brand role for ordinary progress — a
+ * reading position, an upload; the status tones are opt-in for a bar that reports that status
+ * (ADR C09). `primary` is the name `Badge` already gives its brand tone.
  */
-export type ProgressSegmentTone = ProgressTone | "info" | "neutral";
+export type ProgressTone = "primary" | "success" | "warning" | "destructive";
+/**
+ * A breakdown SLICE takes two more status tones than the meter (gh#1302): `info` and `neutral`, the
+ * same pair `Legend` already keys — a partition with four states (done · done-awaiting · in
+ * progress · not started) needs four distinguishable fills, and the meter's three made two of them
+ * identical. Each paints exactly what the matching Legend swatch paints, so a key and its bar stay
+ * one. No `primary`: a partition is states, and Legend keys no brand swatch.
+ */
+export type ProgressSegmentTone = Exclude<ProgressTone, "primary"> | "info" | "neutral";
 /**
  * One slice of a BREAKDOWN bar — how much of the total this state holds, in the SAME unit as every
  * other slice (counts, bytes, yen). Never a percentage: the bar owns the ratio arithmetic, so the

package/dist/components/data-display/progress.js

@@ -73,7 +73,7 @@ function Progress(props) {
   const meterValue = value ?? 0;
   const isOver = over && meterValue > 100;
   const boundedValue = Math.max(0, Math.min(100, meterValue));
-  const effectiveTone = tone ?? (isOver ? "destructive" : "success");
+  const effectiveTone = tone ?? (isOver ? "destructive" : "primary");
   return /* @__PURE__ */ jsx(
     "div",
     {

package/dist/components/data-display/tree.js

@@ -5,6 +5,7 @@ import { mergeRefs } from "@react-aria/utils";
 import { ChevronDown, ChevronRight, File as FileIcon, Folder, FolderOpen } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
+import { truncatedPart } from "../../lib/truncation.js";
 import { CheckboxVisual } from "../data-entry/checkbox.js";
 import { Skeleton } from "../feedback/skeleton.js";
 import {
@@ -273,6 +274,44 @@ function TreeRoot({
     const measured = firstRow?.offsetHeight ?? 0;
     if (measured > 0 && measured !== rowHeight) setRowHeight(measured);
   }, [isWindowed, rowHeight, size, visible.length]);
+  const markTruncatedLabels = React.useCallback(() => {
+    const tree = treeRef.current;
+    if (!tree) return;
+    for (const label of tree.querySelectorAll(".ui-tree-label")) {
+      if (label.dataset.truncated !== void 0 && label.parentElement === document.activeElement)
+        continue;
+      const ownTitle = label.dataset.truncatedTitle !== void 0;
+      const part = truncatedPart(label);
+      if (part) {
+        label.dataset.truncated = "";
+        if (!label.title || ownTitle) {
+          label.title = (label.textContent ?? "").replace(/\s+/g, " ").trim();
+          label.dataset.truncatedTitle = "";
+        }
+      } else if (label.dataset.truncated !== void 0) {
+        delete label.dataset.truncated;
+        if (ownTitle) {
+          label.removeAttribute("title");
+          delete label.dataset.truncatedTitle;
+        }
+      }
+    }
+  }, []);
+  React.useEffect(() => {
+    markTruncatedLabels();
+  });
+  React.useEffect(() => {
+    const tree = treeRef.current;
+    if (!tree || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(markTruncatedLabels);
+    observer.observe(tree);
+    const refold = () => requestAnimationFrame(markTruncatedLabels);
+    tree.addEventListener("focusout", refold);
+    return () => {
+      observer.disconnect();
+      tree.removeEventListener("focusout", refold);
+    };
+  }, [markTruncatedLabels]);
   const nodeRefs = React.useRef(/* @__PURE__ */ new Map());
   const pendingFocus = React.useRef(null);
   React.useEffect(() => {

package/dist/components/layout/breadcrumb.js

@@ -26,8 +26,8 @@ function Breadcrumb({
         className: "ui-breadcrumb-item",
         "data-ellipsis": item.ellipsis ? "" : void 0,
         children: [
-          renderBreadcrumbSegment({ item, index, isLast, items, itemRender, LinkComponent }),
-          !isLast ? /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-separator", "aria-hidden": "true", children: separatorNode }) : null
+          index > 0 ? /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-separator", "aria-hidden": "true", children: separatorNode }) : null,
+          renderBreadcrumbSegment({ item, index, isLast, items, itemRender, LinkComponent })
         ]
       },
       item.to ?? index

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

@@ -41,6 +41,8 @@ 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 { TopbarSearch } from "./topbar-search.js";
+export type { TopbarSearchProp, TopbarSearchProps } from "./topbar-search.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

@@ -18,6 +18,7 @@ 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 { TopbarSearch } from "./topbar-search.js";
 import { ResponsiveGrid } from "./responsive-grid.js";
 import { MasterDetail } from "./master-detail.js";
 import { SplitPane } from "./split-pane.js";
@@ -59,6 +60,7 @@ export {
   SplitPane,
   Topbar,
   TopbarItem,
+  TopbarSearch,
   createSidebarLink,
   useAppShellNavigationMode
 };

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

@@ -123,6 +123,7 @@ function PageContainerRoot({
                           className: "ui-breadcrumb-item",
                           "data-ellipsis": item.ellipsis ? "" : void 0,
                           children: [
+                            i > 0 ? /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-separator", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }) }) : null,
                             item.to && !isLast ? /* @__PURE__ */ jsx(BreadcrumbCrumbText, { item, children: /* @__PURE__ */ jsx(
                               LinkComponent,
                               {
@@ -138,8 +139,7 @@ function PageContainerRoot({
                                 "aria-current": isLast ? "page" : void 0,
                                 children: item.label
                               }
-                            ) }),
-                            !isLast && /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
+                            ) })
                           ]
                         },
                         i

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { TopbarSearchProp } from "../../props/components/layout.prop.js";
+export type { TopbarSearchProp, TopbarSearchProp as TopbarSearchProps, } from "../../props/components/layout.prop.js";
+/**
+ * TopbarSearch — the bar's search box, folded to a named search cell below `collapseBelow` (ADR C02).
+ *
+ * WAI-ARIA APG disclosure: the cell is a button with `aria-expanded` / `aria-controls`; the panel it
+ * shows holds the ONE `SearchInput` this component renders. Which of the two is on screen is decided
+ * by CSS at the step (`data-collapse-below`), not by a media-query hook, so SSR and the first client
+ * paint agree and the field keeps its value across a resize.
+ */
+export declare function TopbarSearch({ collapseBelow, className, ...props }: TopbarSearchProp): React.JSX.Element;

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

@@ -0,0 +1,87 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Search, X } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import { SearchInput } from "../data-entry/search-input.js";
+import { TopbarItem } from "./topbar-item.js";
+function TopbarSearch({ collapseBelow = "sm", className, ...props }) {
+  const { t } = useTranslation();
+  const [open, setOpen] = React.useState(false);
+  const triggerRef = React.useRef(null);
+  const panelRef = React.useRef(null);
+  const pressedInside = React.useRef(false);
+  const panelId = React.useId();
+  const name = props.ariaLabel ?? t("common.search");
+  React.useEffect(() => {
+    if (open) panelRef.current?.querySelector("input")?.focus();
+  }, [open]);
+  const close = (returnFocus) => {
+    setOpen(false);
+    if (returnFocus) triggerRef.current?.focus();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "topbar-search",
+      "data-collapse-below": collapseBelow,
+      "data-open": open ? "true" : void 0,
+      className: cn("ui-topbar-search", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          TopbarItem,
+          {
+            ref: triggerRef,
+            className: "ui-topbar-search-trigger",
+            "aria-label": name,
+            "aria-expanded": open,
+            "aria-controls": panelId,
+            icon: /* @__PURE__ */ jsx(Search, { "aria-hidden": "true" }),
+            onClick: () => setOpen(true)
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: panelRef,
+            id: panelId,
+            className: "ui-topbar-search-panel",
+            onKeyDown: (event) => {
+              if (open && event.key === "Escape" && !event.nativeEvent.isComposing) {
+                event.preventDefault();
+                close(true);
+              }
+            },
+            onPointerDownCapture: () => {
+              pressedInside.current = true;
+              setTimeout(() => {
+                pressedInside.current = false;
+              });
+            },
+            onBlur: (event) => {
+              if (open && !pressedInside.current && !event.currentTarget.contains(event.relatedTarget)) {
+                close(false);
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(SearchInput, { ...props }),
+              /* @__PURE__ */ jsx(
+                TopbarItem,
+                {
+                  className: "ui-topbar-search-close",
+                  "aria-label": t("layout.topbar.closeSearch"),
+                  icon: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }),
+                  onClick: () => close(true)
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  TopbarSearch
+};

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "32.8.0",
+  "version": "32.10.1",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -340,6 +340,7 @@
       "more": "More",
       "search": "Search",
       "searchPlaceholder": "Search...",
+      "closeSearch": "Close search",
       "notifications": "Notifications",
       "tweaks": "Open settings"
     },

package/dist/i18n/messages/ja.json

@@ -335,6 +335,7 @@
       "more": "その他",
       "search": "検索",
       "searchPlaceholder": "検索...",
+      "closeSearch": "検索を閉じる",
       "notifications": "通知",
       "tweaks": "設定を開く"
     },

package/dist/i18n/messages/vi.json

@@ -336,6 +336,7 @@
       "more": "Thêm",
       "search": "Tìm kiếm",
       "searchPlaceholder": "Tìm kiếm...",
+      "closeSearch": "Đóng tìm kiếm",
       "notifications": "Thông báo",
       "tweaks": "Mở tùy chỉnh"
     },

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

@@ -3,6 +3,7 @@ import type * as React from "react";
 import type { ComponentType, ReactNode, SVGProps } from "react";
 import type { BreadcrumbProp, TitleProp, SubtitleProp, StatusProp, ExtraProp, FooterProp, PageDensityProp, DensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, MobileShellHeightProp, MobileShellWidthProp, OrientationProp, TextAlignProp, TextToneProp, BreakpointProp, GapProp, PadProp, PadRawProp, ClassNameProp, ChildrenProp, IdProp, DisabledProp, DescriptionProp, ActionProp, IconProp, HeadingLevelProp, ToneProp, WidthProp, SizeProp } from "../vocabulary/index.js";
 import type { EmptyStateToneProp } from "./data-display.prop.js";
+import type { SearchInputProp } from "./data-entry.prop.js";
 /**
  * Arrangement of the page header's title band and its `extra` slot below the 640px step.
  * `responsive-inline` keeps `extra` beside the title band at the `--page-header-extra-measure`
@@ -1568,6 +1569,27 @@ export type TopbarProp = Omit<React.HTMLAttributes<HTMLDivElement>, "children">
     /** Escape hatch — render fully custom bar content instead of the three slots. */
     children?: ReactNode;
 };
+/**
+ * @see TopbarSearch — the bar's one search box, which folds to a named search cell on a narrow bar.
+ *
+ * A `SearchInput` dropped into a `Topbar` slot shrinks with its cluster: at 390px in a consumer bar
+ * its text area held under 3ch, so neither a query nor the placeholder could be read (ADR C02).
+ * Below `collapseBelow` this renders a `TopbarItem` named by `ariaLabel`; activating it opens the
+ * field across the whole bar (Material 3 search bar → search view), focused, with a close cell.
+ * Escape or the close cell folds it back and returns focus to the trigger; focus leaving the open
+ * field folds it too. From the step up it is the inline field, whose text area never shrinks below
+ * `--topbar-search-min-text-inline-size` (8ch).
+ *
+ * Every `SearchInput` prop passes through unchanged. ONE field is rendered at every width, so the
+ * typed query survives a resize and the open/closed switch.
+ */
+export type TopbarSearchProp = SearchInputProp & {
+    /**
+     * The step below which the field folds to a search cell. Default `"sm"` (40rem) — the bar's own
+     * compact step, shared with `TopbarItem labelHideBelow` and `AppShell logoCompactBelow`.
+     */
+    collapseBelow?: BreakpointProp;
+};
 /**
  * @see TopbarItem — ONE interactive cell of a {@link TopbarProp} slot: the account button, a
  * settings trigger, a notifications bell.

package/dist/props/registry.d.ts

@@ -1456,6 +1456,15 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly reason: "Flex `hideBelow` scoped to the cell's label — icon-only below a breakpoint; visually hidden so the accessible name survives (gh#726).";
         }];
     };
+    readonly TopbarSearchProp: {
+        readonly group: "layout";
+        readonly file: "components/layout.prop.ts";
+        readonly vocabulary: readonly ["LabelProp", "PlaceholderProp", "DisabledProp", "ClassNameProp", "IdProp", {
+            readonly field: "collapseBelow";
+            readonly local: true;
+            readonly reason: "Flex `hideBelow`'s breakpoint vocabulary, naming the step below which the bar's search folds to a search cell (ADR C02).";
+        }];
+    };
     readonly NavListProp: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";

package/dist/props/registry.js

@@ -1579,6 +1579,22 @@ const COMPONENT_PROP_REGISTRY = {
       }
     ]
   },
+  TopbarSearchProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: [
+      "LabelProp",
+      "PlaceholderProp",
+      "DisabledProp",
+      "ClassNameProp",
+      "IdProp",
+      {
+        field: "collapseBelow",
+        local: true,
+        reason: "Flex `hideBelow`'s breakpoint vocabulary, naming the step below which the bar's search folds to a search cell (ADR C02)."
+      }
+    ]
+  },
   NavListProp: {
     group: "layout",
     file: "components/layout.prop.ts",

package/dist/styles/card-layout.css

@@ -501,7 +501,7 @@
     font-weight: var(--stat-card-label-font-weight);
     letter-spacing: var(--stat-card-label-letter-spacing);
     line-height: var(--line-height-normal);
-    text-transform: uppercase;
+    text-transform: var(--stat-card-label-letter-case);
   }
 
   [data-slot="stat-card-label"] svg {

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

@@ -189,7 +189,11 @@
   .ui-progress-bar {
     height: 100%;
     border-radius: inherit;
-    background: var(--progress-fill-background, hsl(var(--mark-success, var(--text-success))));
+    background: var(--progress-fill-background, hsl(var(--mark-primary, var(--primary))));
+  }
+
+  .ui-progress[data-tone="success"] .ui-progress-bar {
+    background: hsl(var(--mark-success, var(--text-success)));
   }
 
   .ui-progress[data-tone="warning"] .ui-progress-bar {
@@ -291,11 +295,15 @@
   }
 
   .ui-progress-ring-indicator {
-    stroke: var(--progress-fill-background, hsl(var(--mark-success, var(--text-success))));
+    stroke: var(--progress-fill-background, hsl(var(--mark-primary, var(--primary))));
 
     stroke-linecap: butt;
   }
 
+  .ui-progress[data-tone="success"] .ui-progress-ring-indicator {
+    stroke: hsl(var(--mark-success, var(--text-success)));
+  }
+
   .ui-progress[data-tone="warning"] .ui-progress-ring-indicator {
     stroke: hsl(var(--mark-warning, var(--text-warning)));
   }
@@ -1574,6 +1582,25 @@
     gap: var(--space-1);
   }
 
+  @media (width < 40rem) {
+    .ui-block-editor {
+      padding-inline-start: var(--block-editor-compact-gutter-inline-size);
+    }
+
+    .ui-block-editor-handle {
+      inset-inline: auto var(--block-editor-compact-gutter-inline-size);
+      translate: 0 -100%;
+      padding: var(--stroke-hairline);
+      border: var(--stroke-hairline) solid hsl(var(--border));
+      border-radius: var(--popover-radius, var(--radius));
+      background-color: hsl(var(--popover) / var(--popover-alpha, 100%));
+    }
+
+    .ui-block-editor-handle[data-first-block] {
+      translate: none;
+    }
+  }
+
   @media (hover: hover) {
     .ui-block-editor:not(:hover):not(:focus-within) .ui-block-editor-handle {
       opacity: 0;
@@ -2924,6 +2951,14 @@
     white-space: nowrap;
   }
 
+  .ui-tree:not([data-virtual])
+    .ui-tree-node:focus-visible
+    > .ui-tree-label[data-truncated]:not(:has([data-ellipsis])) {
+    overflow: visible;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
   .ui-tree-group {
     display: flex;
     flex-direction: column;

package/dist/styles/dialog-layout.css

@@ -458,6 +458,8 @@
 
     background-color: var(--sheet-surface-background, hsl(var(--background)));
     box-shadow: var(--sheet-shadow, var(--shadow-lg));
+
+    outline: none;
   }
 
   .ui-sheet-panel[data-side="top"] {

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "32.8.0",
+  "version": "32.10.1",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -1072,6 +1072,12 @@
         "shell-layout.css"
       ]
     },
+    "TopbarSearch": {
+      "layers": [
+        "shell-layout.css",
+        "control.css"
+      ]
+    },
     "Transfer": {
       "layers": [
         "layout.css",

package/dist/styles/navigation-layout.css

@@ -802,6 +802,9 @@
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
+
+    align-self: flex-start;
+    block-size: 1lh;
   }
 
   .ui-breadcrumb-menu-trigger {