@godxjp/ui 32.8.0 → 32.9.0

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.9.0",
   "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

@@ -1574,6 +1574,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;

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "32.8.0",
+  "version": "32.9.0",
   "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/shell-layout.css

@@ -1653,9 +1653,9 @@
     color: var(--sidebar-section-label-foreground, hsl(var(--muted-foreground)));
     font-size: var(--sidebar-section-label-font-size);
     font-weight: 700;
-    letter-spacing: 0.08em;
+    letter-spacing: var(--sidebar-section-label-letter-spacing);
     line-height: 1.2;
-    text-transform: uppercase;
+    text-transform: var(--sidebar-section-label-letter-case);
   }
 
   .sb-nav {
@@ -2085,6 +2085,127 @@
     justify-content: center;
   }
 
+  .ui-topbar-search,
+  .ui-topbar-search-panel {
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+    gap: var(--topbar-gap);
+  }
+
+  .ui-topbar-search-panel > .ui-search-input {
+    inline-size: var(--topbar-search-inline-size);
+    flex: 0 1 auto;
+  }
+
+  .ui-topbar-search .ui-search-input-control {
+    min-inline-size: calc(
+      var(--search-input-start-padding) + var(--topbar-search-min-text-inline-size) +
+        max(
+          var(--search-input-end-padding),
+          var(--search-input-end-padding) - var(--control-icon-size) - var(--control-gap) + 6ch
+        )
+    );
+  }
+
+  .app-topbar:has(.ui-topbar-search[data-open]),
+  .ui-topbar:not(.app-topbar .ui-topbar):has(.ui-topbar-search[data-open]) {
+    position: relative;
+  }
+
+  @media (width >= 40rem) {
+    .ui-topbar-search[data-collapse-below="sm"]
+      :is(.ui-topbar-search-trigger, .ui-topbar-search-close) {
+      display: none;
+    }
+  }
+  @media (width >= 48rem) {
+    .ui-topbar-search[data-collapse-below="md"]
+      :is(.ui-topbar-search-trigger, .ui-topbar-search-close) {
+      display: none;
+    }
+  }
+  @media (width >= 64rem) {
+    .ui-topbar-search[data-collapse-below="lg"]
+      :is(.ui-topbar-search-trigger, .ui-topbar-search-close) {
+      display: none;
+    }
+  }
+  @media (width >= 80rem) {
+    .ui-topbar-search[data-collapse-below="xl"]
+      :is(.ui-topbar-search-trigger, .ui-topbar-search-close) {
+      display: none;
+    }
+  }
+  @media (width < 40rem) {
+    .ui-topbar-search[data-collapse-below="sm"]:not([data-open]) .ui-topbar-search-panel {
+      display: none;
+    }
+    .ui-topbar-search[data-collapse-below="sm"][data-open] .ui-topbar-search-panel {
+      position: absolute;
+      z-index: 1;
+      inset: 0;
+      padding-inline: var(--app-shell-bar-inset-compact);
+      background: var(--app-shell-bar-background, hsl(var(--card) / var(--card-alpha, 100%)));
+    }
+    .ui-topbar-search[data-collapse-below="sm"][data-open]
+      .ui-topbar-search-panel
+      > .ui-search-input {
+      flex: 1 1 auto;
+    }
+  }
+  @media (width < 48rem) {
+    .ui-topbar-search[data-collapse-below="md"]:not([data-open]) .ui-topbar-search-panel {
+      display: none;
+    }
+    .ui-topbar-search[data-collapse-below="md"][data-open] .ui-topbar-search-panel {
+      position: absolute;
+      z-index: 1;
+      inset: 0;
+      padding-inline: var(--app-shell-bar-inset-compact);
+      background: var(--app-shell-bar-background, hsl(var(--card) / var(--card-alpha, 100%)));
+    }
+    .ui-topbar-search[data-collapse-below="md"][data-open]
+      .ui-topbar-search-panel
+      > .ui-search-input {
+      flex: 1 1 auto;
+    }
+  }
+  @media (width < 64rem) {
+    .ui-topbar-search[data-collapse-below="lg"]:not([data-open]) .ui-topbar-search-panel {
+      display: none;
+    }
+    .ui-topbar-search[data-collapse-below="lg"][data-open] .ui-topbar-search-panel {
+      position: absolute;
+      z-index: 1;
+      inset: 0;
+      padding-inline: var(--app-shell-bar-inset-compact);
+      background: var(--app-shell-bar-background, hsl(var(--card) / var(--card-alpha, 100%)));
+    }
+    .ui-topbar-search[data-collapse-below="lg"][data-open]
+      .ui-topbar-search-panel
+      > .ui-search-input {
+      flex: 1 1 auto;
+    }
+  }
+  @media (width < 80rem) {
+    .ui-topbar-search[data-collapse-below="xl"]:not([data-open]) .ui-topbar-search-panel {
+      display: none;
+    }
+    .ui-topbar-search[data-collapse-below="xl"][data-open] .ui-topbar-search-panel {
+      position: absolute;
+      z-index: 1;
+      inset: 0;
+      padding-inline: var(--app-shell-bar-inset-compact);
+      background: var(--app-shell-bar-background, hsl(var(--card) / var(--card-alpha, 100%)));
+    }
+    .ui-topbar-search[data-collapse-below="xl"][data-open]
+      .ui-topbar-search-panel
+      > .ui-search-input {
+      flex: 1 1 auto;
+    }
+  }
+
   :is(.ui-topbar-start, .ui-topbar-center, .ui-topbar-end) > *:has(.ui-topbar-item) {
     align-self: stretch;
   }