@godxjp/ui 33.2.1 → 33.4.0

package/agent/tokens.json

@@ -10968,16 +10968,16 @@
     "value": "var(--secondary)"
   },
   {
-    "description": "COUNT PILL overlaid on the cell's glyph (gh#398) — the unread affordance the bell needs. The offsets are what a call site used to hand-write as `relative` + `absolute -end-0.5 -top-0.5`, i.e. a position the cell owns and no theme could retune; they are measured from the GLYPH box (the pill is centred on the cell, then pushed out by these), so a bar that retunes --topbar-icon-size keeps the pill on the glyph's corner. Colour mirrors `.sb-badge`: quiet by default, `badgeTone=\"destructive\"` for a count addressed to the user. The two role-mirror knobs stay `initial` so a scoped [data-tenant]/.dark override of --secondary/--destructive still reaches the pill (docs/TOKENS.md). Defaults = hsl(var(--secondary)) · hsl(var(--muted-foreground)) · hsl(var(--destructive)) · hsl(var(--destructive-foreground)).",
+    "description": "How far a one-digit pill's top edge (block) and end edge (inline) sit OUTSIDE the glyph's. Fractions of the pill, not a flat length (gh#1341 — Material 3 badges / Apple HIG): half a pill inline centres it on the glyph's corner, three quarters block leaves a quarter of it on the glyph, so at most a quarter of the glyph is covered; a longer count stays inside the cell and grows back across the glyph, still covering at most a quarter of it. They used to be a flat 4px, which left a 16px pill covering 56% of a 16px bell. Declared `initial` with the default resolved at the call site, so a scoped --topbar-item-badge-size still moves them (the freeze rule). The ring is the surface colour drawn round the pill so it reads cut out of the glyph; role-mirror knob, default = hsl(var(--card)) (the bar) at the call site, and the nav rail sets it to its own surface. default = calc(var(--topbar-item-badge-size) * 3 / 4)",
     "name": "--topbar-item-badge-offset-block",
     "tier": "component",
-    "value": "var(--space-1)"
+    "value": "initial"
   },
   {
-    "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.",
+    "description": "default = calc(var(--topbar-item-badge-size) / 2)",
     "name": "--topbar-item-badge-offset-inline",
     "tier": "component",
-    "value": "var(--space-1)"
+    "value": "initial"
   },
   {
     "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.",
@@ -10985,6 +10985,18 @@
     "tier": "component",
     "value": "1rem"
   },
+  {
+    "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": "--topbar-item-badge-ring-width",
+    "tier": "component",
+    "value": "var(--stroke-md)"
+  },
+  {
+    "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": "--topbar-item-badge-ring-color",
+    "tier": "component",
+    "value": "initial"
+  },
   {
     "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": "--topbar-item-badge-padding-inline",

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

@@ -5,6 +5,7 @@ import * as React from "react";
 import { chain, mergeRefs } from "@react-aria/utils";
 import { Popover as AriaPopover } from "react-aria-components";
 import { cn } from "../../lib/utils.js";
+import { getActiveElement } from "../../lib/active-element.js";
 import { Slot } from "../../lib/slot.js";
 import { useOverlayCloseFocus } from "../feedback/overlay-close-focus.js";
 function toPlacement(side, align) {
@@ -278,7 +279,7 @@ function ClickContent({
     if (!event.defaultPrevented) {
       const target = firstTabbable(node);
       target?.focus({ preventScroll: true });
-      if (!node.contains(document.activeElement)) {
+      if (!node.contains(getActiveElement(node))) {
         node.focus({ preventScroll: true });
       }
     }
@@ -287,11 +288,11 @@ function ClickContent({
   React.useEffect(() => {
     if (!open) return;
     const onPointerDown = (event) => {
-      const target = event.target;
-      if (!target) return;
-      if (contentRef.current?.contains(target)) return;
-      if (triggerRef.current?.contains(target)) return;
-      if (anchored && anchorRef.current?.contains(target)) return;
+      const path = event.composedPath();
+      const within = (node) => node !== null && path.includes(node);
+      if (within(contentRef.current)) return;
+      if (within(triggerRef.current)) return;
+      if (anchored && within(anchorRef.current)) return;
       setOpen(false);
     };
     document.addEventListener("pointerdown", onPointerDown);
@@ -305,6 +306,7 @@ function ClickContent({
       isOpen: root.open,
       onOpenChange: onAriaOpenChange,
       isNonModal: root.isNonModal,
+      shouldCloseOnInteractOutside: (element) => !triggerRef.current?.contains(element),
       triggerRef: root.anchored ? root.anchorRef : root.triggerRef,
       placement: toPlacement(side, align),
       offset: sideOffset,

package/dist/components/feedback/overlay-close-focus.js

@@ -1,5 +1,6 @@
 "use client";
 import * as React from "react";
+import { getActiveElement } from "../../lib/active-element.js";
 function useOverlayCloseFocus(isOpen, onCloseAutoFocus, contentRef) {
   const nodeToRestore = React.useRef(null);
   const renderedOpen = React.useRef(false);
@@ -7,7 +8,7 @@ function useOverlayCloseFocus(isOpen, onCloseAutoFocus, contentRef) {
   if (isOpen !== renderedOpen.current) {
     renderedOpen.current = isOpen;
     if (isOpen && typeof document !== "undefined") {
-      const active = document.activeElement;
+      const active = getActiveElement();
       nodeToRestore.current = active === document.body ? null : active;
     }
   }
@@ -17,7 +18,7 @@ function useOverlayCloseFocus(isOpen, onCloseAutoFocus, contentRef) {
       onCloseAutoFocus?.(event);
       const node = nodeToRestore.current;
       nodeToRestore.current = null;
-      const active = document.activeElement;
+      const active = getActiveElement();
       const focusMovedAway = contentRef != null && active != null && active !== document.body && active.isConnected && contentRef.current?.contains(active) !== true;
       if (!event.defaultPrevented && !focusMovedAway && node?.isConnected === true) {
         node.focus();

package/dist/components/feedback/tooltip.js

@@ -10,6 +10,7 @@ import {
   TooltipTriggerStateContext
 } from "react-aria-components";
 import { cn } from "../../lib/utils.js";
+import { getActiveElement } from "../../lib/active-element.js";
 import { Slot } from "../../lib/slot.js";
 const DEFAULT_DELAY_DURATION = 200;
 const TooltipAnchorContext = React.createContext(
@@ -166,7 +167,7 @@ function EllipsisTooltip({
       show(DEFAULT_DELAY_DURATION);
     };
     const onFocusIn = () => {
-      const active = document.activeElement;
+      const active = getActiveElement(node);
       if (active && (active === host || node.contains(active)) && isFocusVisible(active)) show(0);
     };
     node.addEventListener("pointerenter", onPointerEnter);

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

@@ -16,7 +16,7 @@ const TopbarItem = React.forwardRef(function TopbarItem2({
   ...props
 }, ref) {
   const Comp = asChild ? Slot : "button";
-  const showBadge = badge !== void 0 && badge !== "";
+  const showBadge = badge !== void 0 && badge !== "" && badge !== 0;
   const iconNode = icon !== void 0 && icon !== null && icon !== false ? /* @__PURE__ */ jsx(
     "span",
     {

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

@@ -3,6 +3,8 @@ export { Pagination, PaginationContent, PaginationItem, PaginationLink, Paginati
 export { Steps } from "./steps.js";
 export { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./toolbar.js";
 export type { FilterBarChipProp, FilterBarChipProps, FilterBarFilterProp, FilterBarFilterProps, FilterBarGroupProp, FilterBarGroupProps, FilterBarProp, FilterBarProps, FilterBarSearchProp, FilterBarSearchProps, ToolbarGroupProps, ToolbarProps, } from "./toolbar.js";
+export { SearchForm } from "./search-form.js";
+export type { SearchFormProp, SearchFormProps } from "./search-form.js";
 export { AppSettingPicker } from "./app-setting-picker.js";
 export type { AppSettingPickerProp, AppSettingPickerProps, AppSettingPickerMenuProp, AppSettingPickerCycleProp, AppSettingKind, AppSettingCycleKind, } from "./app-setting-picker.js";
 export type { BreadcrumbItemProp as BreadcrumbItem } from "../../props/vocabulary/navigation.prop.js";

package/dist/components/navigation/index.js

@@ -10,6 +10,7 @@ import {
 } from "./pagination.js";
 import { Steps } from "./steps.js";
 import { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./toolbar.js";
+import { SearchForm } from "./search-form.js";
 import { AppSettingPicker } from "./app-setting-picker.js";
 import {
   DropdownMenu,
@@ -54,6 +55,7 @@ export {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
+  SearchForm,
   Steps,
   Tabs,
   TabsContent,

package/dist/components/navigation/search-form.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import type { SearchFormProp } from "../../props/components/navigation.prop.js";
+export type { SearchFormProp, SearchFormProp as SearchFormProps };
+/**
+ * SearchForm — the submit-driven 検索条件フォーム (Ant Design ProComponents `QueryFilter`).
+ *
+ * A `search` landmark (`<form role="search">`) holding a grid of labelled conditions, aligned in
+ * columns. The conditions past the first row sit behind one 詳細条件を開く / 閉じる toggle that
+ * names how many are hidden; Search (検索) submits, Clear (クリア) resets. After a search the
+ * conditions the results were searched with, and the result count, are announced in one
+ * `role="status"` line. Every label is localized through the library catalogue.
+ *
+ * Choose it over a live FilterBar when the conditions are many, the query is heavy, or the users
+ * expect an explicit 検索 button (Japanese business systems). Hidden conditions stay MOUNTED, so a
+ * value typed into one survives collapsing the section.
+ */
+export declare const SearchForm: React.ForwardRefExoticComponent<Omit<import("../data-entry/index.js").FormProp, "aria-label" | "asChild" | "children" | "columns" | "onReset" | "role"> & {
+    children: import("../../props/index.js").ChildrenProp;
+    columns?: import("../../props/components/layout.prop.js").ResponsiveGridColumnsProp;
+    visibleFields?: number;
+    open?: import("../../props/index.js").OpenProp;
+    defaultOpen?: import("../../props/index.js").DefaultOpenProp;
+    onOpenChange?: import("../../props/index.js").OnOpenChangeProp;
+    onReset?: () => void;
+    searchLabel?: import("../../props/index.js").LabelProp;
+    resetLabel?: import("../../props/index.js").LabelProp;
+    summary?: React.ReactNode;
+    resultCount?: number;
+    loading?: import("../../props/index.js").PendingProp;
+    label?: string;
+} & React.RefAttributes<HTMLFormElement>>;

package/dist/components/navigation/search-form.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import { Form } from "../data-entry/form.js";
+import { Button } from "../general/button.js";
+import { ResponsiveGrid } from "../layout/responsive-grid.js";
+const DEFAULT_COLUMNS = { base: 1, md: 2, lg: 3 };
+function widestStep(columns) {
+  if (typeof columns === "number") return Math.max(1, columns);
+  const steps = Object.values(columns ?? DEFAULT_COLUMNS).filter(
+    (n) => typeof n === "number"
+  );
+  return Math.max(1, ...steps);
+}
+const SearchForm = React.forwardRef(function SearchForm2({
+  children,
+  columns = DEFAULT_COLUMNS,
+  visibleFields,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  onReset,
+  searchLabel,
+  resetLabel,
+  summary,
+  resultCount,
+  loading,
+  label,
+  className,
+  ...props
+}, ref) {
+  const { t } = useTranslation();
+  const baseId = React.useId();
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const isOpen = open ?? uncontrolledOpen;
+  const fields = React.Children.toArray(children).filter(React.isValidElement);
+  const limit = Math.max(1, visibleFields ?? widestStep(columns));
+  const hiddenCount = Math.max(0, fields.length - limit);
+  const hiddenIds = Array.from({ length: hiddenCount }, (_, i) => `${baseId}-more-${i}`);
+  const toggle = () => {
+    const next = !isOpen;
+    if (open === void 0) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  };
+  const showMeta = summary != null || resultCount !== void 0;
+  return /* @__PURE__ */ jsx(
+    Form,
+    {
+      ref,
+      role: "search",
+      "aria-label": label ?? t("navigation.searchForm.label"),
+      className: cn("ui-search-form", className),
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "ui-search-form-body", children: [
+        /* @__PURE__ */ jsx(ResponsiveGrid, { columns, children: fields.map(
+          (field, index) => index < limit ? field : (
+            /* Past the first row: kept mounted and hidden, so a typed value survives a collapse. */
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: hiddenIds[index - limit],
+                hidden: !isOpen,
+                className: "ui-search-form-more",
+                children: field
+              },
+              field.key ?? index
+            )
+          )
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "ui-search-form-actions", children: [
+          hiddenCount > 0 && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              className: "ui-search-form-toggle",
+              "aria-expanded": isOpen,
+              "aria-controls": hiddenIds.join(" "),
+              onClick: toggle,
+              count: isOpen ? void 0 : hiddenCount,
+              showZero: false,
+              countLabel: t("navigation.searchForm.hiddenCount"),
+              children: [
+                isOpen ? t("navigation.searchForm.collapse") : t("navigation.searchForm.expand"),
+                isOpen ? /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "ui-search-form-submit", children: [
+            onReset && /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: onReset, children: resetLabel ?? t("navigation.searchForm.reset") }),
+            /* @__PURE__ */ jsx(Button, { type: "submit", loading, children: searchLabel ?? t("navigation.searchForm.search") })
+          ] })
+        ] }),
+        showMeta && /* @__PURE__ */ jsxs("p", { role: "status", className: "ui-search-form-meta", children: [
+          summary != null && /* @__PURE__ */ jsxs("span", { className: "ui-search-form-summary", children: [
+            /* @__PURE__ */ jsx("span", { className: "ui-search-form-summary-label", children: t("navigation.searchForm.summary") }),
+            " ",
+            summary
+          ] }),
+          resultCount !== void 0 && /* @__PURE__ */ jsx("span", { className: "ui-search-form-count", children: t("navigation.filterBar.resultCount", { count: resultCount }) })
+        ] })
+      ] })
+    }
+  );
+});
+export {
+  SearchForm
+};

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": "33.2.1",
+  "version": "33.4.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

@@ -588,6 +588,15 @@
         "other": "{count} results"
       }
     },
+    "searchForm": {
+      "label": "Search conditions",
+      "search": "Search",
+      "reset": "Clear",
+      "expand": "More conditions",
+      "collapse": "Fewer conditions",
+      "hiddenCount": "hidden conditions",
+      "summary": "Searched with:"
+    },
     "localePicker": {
       "ariaLabel": "Language"
     },

package/dist/i18n/messages/ja.json

@@ -574,6 +574,15 @@
       "removeFilter": "フィルターを解除: {label}",
       "resultCount": "{count} 件の結果"
     },
+    "searchForm": {
+      "label": "検索条件",
+      "search": "検索",
+      "reset": "クリア",
+      "expand": "詳細条件を開く",
+      "collapse": "詳細条件を閉じる",
+      "hiddenCount": "件の条件が非表示",
+      "summary": "検索条件:"
+    },
     "localePicker": {
       "ariaLabel": "言語"
     },

package/dist/i18n/messages/vi.json

@@ -575,6 +575,15 @@
       "removeFilter": "Bỏ bộ lọc: {label}",
       "resultCount": "{count} kết quả"
     },
+    "searchForm": {
+      "label": "Điều kiện tìm kiếm",
+      "search": "Tìm kiếm",
+      "reset": "Xoá điều kiện",
+      "expand": "Mở thêm điều kiện",
+      "collapse": "Thu gọn điều kiện",
+      "hiddenCount": "điều kiện đang ẩn",
+      "summary": "Điều kiện tìm kiếm:"
+    },
     "localePicker": {
       "ariaLabel": "Ngôn ngữ"
     },

package/dist/lab/mega-menu.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ChevronDown } from "lucide-react";
 import { cn } from "../lib/utils.js";
+import { getActiveElement } from "../lib/active-element.js";
 import { useTranslation } from "../i18n/use-translation.js";
 const OPEN_DELAY_MS = 0;
 const CLOSE_DELAY_MS = 100;
@@ -216,7 +217,7 @@ const MegaMenu = React.forwardRef(function MegaMenu2({
     if (openKey === null) return;
     const onPointerDown = (event) => {
       const node = rootRef.current;
-      if (node && event.target instanceof Node && !node.contains(event.target)) close();
+      if (node && !event.composedPath().includes(node)) close();
     };
     document.addEventListener("pointerdown", onPointerDown);
     return () => document.removeEventListener("pointerdown", onPointerDown);
@@ -381,7 +382,7 @@ const MegaMenu = React.forwardRef(function MegaMenu2({
     closeTimer.current = setTimeout(() => {
       closeTimer.current = null;
       const node = rootRef.current;
-      if (node && node.contains(document.activeElement)) return;
+      if (node && node.contains(getActiveElement(node))) return;
       commitOpen(null);
     }, closeDelay);
   };

package/dist/lib/active-element.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The element that REALLY has focus, through shadow roots (gh#1340).
+ *
+ * `document.activeElement` stops at the shadow HOST: with the app mounted in a shadow root (GoDX
+ * Dock, `OverlayPortalProvider`), every `node.contains(document.activeElement)` in this library
+ * read "focus is not in here" while focus sat on an input inside the panel.
+ *
+ * With `scope`, the walk starts at that node's own root (`getRootNode().activeElement`), which also
+ * sees into a CLOSED shadow root the node lives in; it returns `null` when focus is not inside that
+ * root at all. Without it, the walk starts at `document` and descends through open shadow roots.
+ */
+export declare function getActiveElement(scope?: Node | null): Element | null;

package/dist/lib/active-element.js

@@ -0,0 +1,10 @@
+function getActiveElement(scope) {
+  if (typeof document === "undefined") return null;
+  const root = scope?.getRootNode();
+  let active = root instanceof Document || root instanceof ShadowRoot ? root.activeElement : document.activeElement;
+  while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+  return active;
+}
+export {
+  getActiveElement
+};

package/dist/lib/shortcut.js

@@ -53,9 +53,10 @@ function isEditableTarget(target) {
 }
 function shouldHandleShortcut(spec, event, owner) {
   if (isImeComposing(event) || !shortcutMatches(spec, event)) return false;
-  if (inForeignLayer(event.target, owner)) return false;
+  const target = event.composedPath()[0] ?? event.target;
+  if (inForeignLayer(target, owner)) return false;
   const commandModifier = spec.mod || spec.meta || spec.ctrl || spec.alt;
-  return commandModifier || !isEditableTarget(event.target);
+  return commandModifier || !isEditableTarget(target);
 }
 const SHORTCUT_LAYER = '[role="dialog"], [role="alertdialog"], [aria-modal="true"], [role="menu"], [role="listbox"]';
 function inForeignLayer(target, owner) {

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

@@ -401,9 +401,11 @@ export type ResponsiveGridPresetProp = "pricing-plans";
  * Block-axis alignment of the cells in each grid row — antd `Row align`, spelled with Flex's
  * `FlexAlignProp` values (antd `top` → `start`; `stretch` is the same word). `stretch` gives every
  * cell the height of the tallest one, so an empty Kanban lane is still a full-height drop zone.
+ * `center` is antd `middle`: cells of different heights share one centre line (a condition row's
+ * number and ＋/− buttons beside taller controls).
  * Omitted, each flow keeps its own alignment: `columns` → `start`, `rows` → the grid's stretch.
  */
-export type ResponsiveGridAlignProp = Extract<FlexAlignProp, "start" | "stretch">;
+export type ResponsiveGridAlignProp = Extract<FlexAlignProp, "start" | "center" | "stretch">;
 export type MasterDetailRailWidthProp = "narrow" | "compact" | "standard" | "wide";
 export type MasterDetailRailProp = "master" | "detail";
 /**
@@ -1654,6 +1656,9 @@ export type TopbarItemProp = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
      * Drawn under `asChild` too (gh#1171): the pill goes inside the child element, after its own
      * children, so a bell that is a link (`<TopbarItem asChild badge={3}><a …/></TopbarItem>`) keeps
      * its count.
+     *
+     * Nothing renders for `undefined`, `""` or the NUMBER `0` (gh#1341), so pass the count as it is.
+     * To show a zero deliberately, pass the string `"0"`.
      */
     badge?: ReactNode;
     /**

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

@@ -1,9 +1,9 @@
 /** Navigation component prop types — @see docs/COMPONENTS.md#navigation */
 import type * as React from "react";
 import type { ReactNode } from "react";
-import type { AffixProp, AffixTargetProp } from "./layout.prop.js";
-import type { ActionsProp, ChildrenProp, ClassNameProp, DisabledProp, ErrorProp, HasActiveFiltersProp, IdProp, LabelProp, OnClearFiltersProp, PendingProp, PlaceholderProp, StickyProp, TextAlignProp } from "../vocabulary/index.js";
-import type { SearchSelectOptionProp } from "./data-entry.prop.js";
+import type { AffixProp, AffixTargetProp, ResponsiveGridColumnsProp } from "./layout.prop.js";
+import type { ActionsProp, ChildrenProp, ClassNameProp, DisabledProp, ErrorProp, HasActiveFiltersProp, IdProp, LabelProp, OnClearFiltersProp, OnOpenChangeProp, OpenProp, DefaultOpenProp, PendingProp, PlaceholderProp, StickyProp, TextAlignProp } from "../vocabulary/index.js";
+import type { FormProp, SearchSelectOptionProp } from "./data-entry.prop.js";
 /**
  * Renders the canonical SearchInput as the FIRST control of the strip, with a token-owned
  * consistent width (`--filter-bar-search-width`, full-width below 640px). Controlled by consumer
@@ -123,6 +123,46 @@ export type ToolbarProp = {
 export type FilterBarViewsPlacementProp = "above" | "inline";
 /** @see ToolbarProp.clearDisplay */
 export type FilterBarClearDisplayProp = "label" | "icon";
+/**
+ * @see SearchForm — the submit-driven 検索条件フォーム (Ant Design ProComponents `QueryFilter`): a
+ * grid of labelled conditions, an explicit Search (検索) + Clear (クリア) pair, the conditions past
+ * the first row behind one 詳細条件を開く toggle, and a 検索条件 summary + result count after the
+ * search. A live FilterBar applies each change at once; a SearchForm applies them on submit.
+ */
+export type SearchFormProp = Omit<FormProp, "role" | "onReset" | "children" | "columns" | "asChild" | "aria-label"> & {
+    /** One FormField per condition, in reading order. Each direct child is one grid cell. */
+    children: ChildrenProp;
+    /** Grid columns per breakpoint. Default `{ base: 1, md: 2, lg: 3 }`: one column on a phone. */
+    columns?: ResponsiveGridColumnsProp;
+    /**
+     * How many conditions stay visible while the detail section is closed (antd
+     * `defaultFormItemsNumber`). Defaults to the widest `columns` step: the first row.
+     */
+    visibleFields?: number;
+    /** Whether the conditions past `visibleFields` are shown (controlled). */
+    open?: OpenProp;
+    /** Initial open state when uncontrolled. Default `false`: collapsed to the first row. */
+    defaultOpen?: DefaultOpenProp;
+    /** Fires when the 詳細条件を開く / 閉じる toggle is pressed. */
+    onOpenChange?: OnOpenChangeProp;
+    /** Clear (クリア) handler. The Clear button renders only when this is set. */
+    onReset?: () => void;
+    /** Overrides the localized Search (検索) button text. */
+    searchLabel?: LabelProp;
+    /** Overrides the localized Clear (クリア) button text. */
+    resetLabel?: LabelProp;
+    /**
+     * The conditions the CURRENT results were searched with, shown after the localized 検索条件
+     * label in a `role="status"` line (e.g. 「国: ベトナム / 状態: 稼働中」).
+     */
+    summary?: ReactNode;
+    /** Localized, pluralized result count shown in the same status line. */
+    resultCount?: number;
+    /** Puts the Search button in its loading state while the query runs. */
+    loading?: PendingProp;
+    /** Accessible name of the `search` landmark. Defaults to a localized "Search conditions". */
+    label?: string;
+};
 /** @see ToolbarGroup */
 export type ToolbarGroupProp = {
     label: LabelProp;

package/dist/props/registry.d.ts

@@ -2692,6 +2692,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/navigation.prop.ts";
         readonly vocabulary: readonly ["OnClearFiltersProp", "HasActiveFiltersProp", "StickyProp", "ActionsProp", "PendingProp", "DisabledProp", "ErrorProp", "ClassNameProp", "ChildrenProp"];
     };
+    readonly SearchFormProp: {
+        readonly group: "navigation";
+        readonly file: "components/navigation.prop.ts";
+        readonly vocabulary: readonly ["OpenProp", "DefaultOpenProp", "OnOpenChangeProp", "LabelProp", "PendingProp", "ChildrenProp"];
+    };
     readonly FilterBarClearDisplayProp: {
         readonly group: "navigation";
         readonly file: "components/navigation.prop.ts";

package/dist/props/registry.js

@@ -3159,6 +3159,18 @@ const COMPONENT_PROP_REGISTRY = {
       "ChildrenProp"
     ]
   },
+  SearchFormProp: {
+    group: "navigation",
+    file: "components/navigation.prop.ts",
+    vocabulary: [
+      "OpenProp",
+      "DefaultOpenProp",
+      "OnOpenChangeProp",
+      "LabelProp",
+      "PendingProp",
+      "ChildrenProp"
+    ]
+  },
   FilterBarClearDisplayProp: {
     group: "navigation",
     file: "components/navigation.prop.ts",

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "33.2.1",
+  "version": "33.4.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -853,6 +853,16 @@
         "data-display-layout.css"
       ]
     },
+    "SearchForm": {
+      "layers": [
+        "layout.css",
+        "control.css",
+        "text-layout.css",
+        "dialog-layout.css",
+        "alert-layout.css",
+        "form-layout.css"
+      ]
+    },
     "SearchInput": {
       "layers": [
         "control.css"

package/dist/styles/layout.css

@@ -431,6 +431,10 @@
     align-items: stretch;
   }
 
+  .ui-responsive-grid[data-align="center"] {
+    align-items: center;
+  }
+
   .ui-responsive-grid[data-gap="none"] {
     gap: 0;
   }
@@ -1580,6 +1584,43 @@
     color: hsl(var(--text-error));
   }
 
+  .ui-search-form-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--filter-bar-section-gap);
+  }
+
+  .ui-search-form-more {
+    min-inline-size: 0;
+  }
+
+  .ui-search-form-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--filter-bar-gap);
+  }
+
+  .ui-search-form-submit {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+    margin-inline-start: auto;
+  }
+
+  .ui-search-form-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-1) var(--space-3);
+    font-size: var(--filter-label-font-size);
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-search-form-summary-label {
+    font-weight: var(--font-weight-medium);
+  }
+
   .ui-legal-document-scope {
     container: legal-document / inline-size;
     padding-inline: var(--legal-document-page-padding-inline, var(--space-page-x));