@godxjp/ui 33.1.1 → 33.3.0

package/dist/lib/field-a11y.js

@@ -78,7 +78,18 @@ function pickGroupFieldA11y(props) {
     ...props["data-field"] !== void 0 ? { "data-field": props["data-field"] } : {}
   };
 }
+const FieldErrorReportContext = React.createContext(null);
+function useReportFieldError(message) {
+  const report = React.useContext(FieldErrorReportContext);
+  React.useEffect(() => {
+    if (!report) return;
+    report(message);
+    return () => report(void 0);
+  }, [report, message]);
+  return report !== null;
+}
 export {
+  FieldErrorReportContext,
   FieldIdentityContext,
   FieldNameContext,
   mergeAriaIds,
@@ -88,5 +99,6 @@ export {
   resolveFieldA11y,
   useFieldIdentity,
   useFieldNameFallback,
-  useMirroredInputAttributes
+  useMirroredInputAttributes,
+  useReportFieldError
 };

package/dist/lib/intl-cache.d.ts

@@ -30,3 +30,4 @@ export declare function dateTimeFormat(locale: string, options?: Intl.DateTimeFo
 export declare function numberFormat(locale: string, options?: Intl.NumberFormatOptions): Intl.NumberFormat;
 export declare function pluralRules(locale: string, options?: Intl.PluralRulesOptions): Intl.PluralRules;
 export declare function listFormat(locale: string, options?: Intl.ListFormatOptions): Intl.ListFormat;
+export declare function displayNames(locale: string, options: Intl.DisplayNamesOptions): Intl.DisplayNames;

package/dist/lib/intl-cache.js

@@ -21,8 +21,12 @@ function pluralRules(locale, options) {
 function listFormat(locale, options) {
   return memoise("lf", locale, options, () => new Intl.ListFormat(locale, options));
 }
+function displayNames(locale, options) {
+  return memoise("dn", locale, options, () => new Intl.DisplayNames(locale, options));
+}
 export {
   dateTimeFormat,
+  displayNames,
   listFormat,
   numberFormat,
   pluralRules

package/dist/props/components/data-entry.prop.d.ts

@@ -125,6 +125,14 @@ export type CommandProp = {
      */
     split?: boolean;
 };
+export type CommandSeparatorProp = {
+    /**
+     * Keep the separator while a search query is typed. Default `true` — the opposite of cmdk, which
+     * hides it under a query; a `+ Create "<q>"` group only exists while the user types, so the rule
+     * above it must stay. `false` restores cmdk's palette behaviour.
+     */
+    alwaysRender?: boolean;
+};
 export type InputProp = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> & {
     onValueChange?: (value: string) => void;
     /**
@@ -221,6 +229,43 @@ export type TextareaProp = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
     /** Character counter — antd `count`. */
     count?: ControlCountProp;
 };
+/**
+ * One translatable field's per-locale values, keyed by BCP-47 tag: `{ ja: "…", en: "…", vi: "…" }`.
+ * A locale with no key (or `""`) is empty. The shape a `*_translations` backend (Astrotomic,
+ * Spatie translatable, Rails Mobility) already sends.
+ */
+export type TranslatableValue = Partial<Record<string, string>>;
+/** The locale + value contract shared by {@link TranslatableInputProp} and {@link TranslatableTextareaProp}. */
+type TranslatableFieldProp = {
+    /** Controlled per-locale values. */
+    value?: ValueProp<TranslatableValue>;
+    /** Uncontrolled initial per-locale values. */
+    defaultValue?: DefaultValueProp<TranslatableValue>;
+    /** The WHOLE map after an edit — every other locale's text is carried over untouched. */
+    onValueChange?: OnValueChangeProp<TranslatableValue>;
+    /**
+     * The locales the field edits, in tab order. Default: every locale registered with the app
+     * (`getRegisteredLocales()` — the built-in `vi`/`en`/`ja` plus `registerLocale(...)`).
+     */
+    locales?: readonly string[];
+    /** The locale tab selected first. Default: the AppProvider's active locale when it is in `locales`. */
+    defaultLocale?: string;
+    /**
+     * The locale whose text shows as the placeholder of an EMPTY locale. Default: the AppProvider's
+     * `fallbackLocale`, or the first of `locales` when that is not one of them.
+     */
+    fallbackLocale?: string;
+    /**
+     * Per-locale validation messages. A locale that has one gets an error mark on its tab (a glyph
+     * plus screen-reader text, never colour alone); the ACTIVE locale's message sets `aria-invalid`
+     * and is shown by the enclosing `FormField` (or under the field when there is none).
+     */
+    errors?: Partial<Record<string, ErrorProp>>;
+};
+/** @see TranslatableInput — one `Input` holding a value per locale, switched by locale tabs. */
+export type TranslatableInputProp = Omit<InputProp, "value" | "defaultValue" | "onValueChange" | "lang"> & TranslatableFieldProp;
+/** @see TranslatableTextarea — the `Textarea` counterpart of {@link TranslatableInputProp}. */
+export type TranslatableTextareaProp = Omit<TextareaProp, "value" | "defaultValue" | "onValueChange" | "lang"> & TranslatableFieldProp;
 /**
  * @see NumberInput — localized numeric spinbutton (composes `Input` + step `Button`s).
  * `value`/`defaultValue`/`onValueChange` carry a `number | null` (null = empty). `step` drives both
@@ -2469,3 +2514,4 @@ export type EmojiPickerProp = {
     id?: IdProp;
     className?: ClassNameProp;
 };
+export {};

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

@@ -1,6 +1,6 @@
 export type { AppLauncherApp, AppLauncherGroup, AppLauncherLabels, AppLauncherProp, AppShellProp, AuthFooterProp, AuthIdentityProp, OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, DragAxisProp, DragBoundsProp, DraggablePanelLabels, DraggablePanelPlacementProp, DraggablePanelPositionProp, DraggablePanelProp, PageContainerExtraProp, PageContainerProp, PageInsetProp, SidebarItemProp, SidebarProductProp, SidebarProp, SidebarSectionProp, TopbarProp, } from "./layout.prop.js";
 export type { ButtonProp } from "./general.prop.js";
-export type { CommandProp, InputProp, TextareaProp, FormFieldProp, SearchInputProp, CheckboxProp, CheckboxGroupProp, ChoiceOptionProp, RadioProp, RadioGroupProp, SwitchProp, SliderProp, CalendarProp, DatePickerProp, TimePickerProp, ColorPickerProp, ColorPickerPresetProp, UploadProp, UploadFileItemProp, UploadVariantProp, TreeOptionProp, TreeFieldNamesProp, CascaderProp, TreeSelectProp, ShowCheckedStrategyProp, TransferProp, TransferItemProp, } from "./data-entry.prop.js";
+export type { CommandProp, CommandSeparatorProp, InputProp, TextareaProp, FormFieldProp, SearchInputProp, CheckboxProp, CheckboxGroupProp, ChoiceOptionProp, RadioProp, RadioGroupProp, SwitchProp, SliderProp, CalendarProp, DatePickerProp, TimePickerProp, ColorPickerProp, ColorPickerPresetProp, UploadProp, UploadFileItemProp, UploadVariantProp, TreeOptionProp, TreeFieldNamesProp, CascaderProp, TreeSelectProp, ShowCheckedStrategyProp, TransferProp, TransferItemProp, } from "./data-entry.prop.js";
 export type { AvatarProp, EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, QrCodeProp, } from "./data-display.prop.js";
 export type { ChartDatum, ChartSeriesProp, LineChartProp, BarChartProp, AreaChartProp, PieChartProp, } from "./charts.prop.js";
 export type { AlertQueryErrorProp, AuthExpiryProviderProp, AlertProp, DialogProp, DialogContentProp, AlertTitleProp, AlertContentProp, AlertDescriptionProp, AlertActionsProp, SheetResponsiveProp, SkeletonRowsProp, } from "./feedback.prop.js";

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";
 /**

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

@@ -1641,11 +1641,62 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly reason: "antd List `split` — ruled-list presentation (row dividers, 0 list padding) for option/checkbox lists; the rest of the root API is cmdk's (gh#699).";
         }];
     };
+    readonly CommandSeparatorProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly [{
+            readonly field: "alwaysRender";
+            readonly local: true;
+            readonly reason: "cmdk's own Command.Separator prop name, kept so the cmdk docs still apply; only its default differs (true) so the rule stays above a `+ Create` group while the user types (gh#1335).";
+        }];
+    };
     readonly TextareaProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry.prop.ts";
         readonly vocabulary: readonly ["PlaceholderProp", "DisabledProp", "ValueProp", "DefaultValueProp", "OnChangeProp", "IdProp", "ClassNameProp"];
     };
+    readonly TranslatableInputProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly ["ValueProp", "DefaultValueProp", "OnValueChangeProp", "SizeProp", "PlaceholderProp", "DisabledProp", "IdProp", "ClassNameProp", {
+            readonly field: "locales";
+            readonly local: true;
+            readonly reason: "The BCP-47 tags the field edits, in tab order (gh#1336). Defaults to the app's registered locales; a per-field list, not a value.";
+        }, {
+            readonly field: "defaultLocale";
+            readonly local: true;
+            readonly reason: "The locale tab selected first — the AppProvider's own `defaultLocale` spelling, scoped to one field. Defaults to the active app locale.";
+        }, {
+            readonly field: "fallbackLocale";
+            readonly local: true;
+            readonly reason: "The locale whose text an EMPTY locale shows as its placeholder — the AppProvider's own `fallbackLocale` spelling, scoped to one field.";
+        }, {
+            readonly field: "errors";
+            readonly local: true;
+            readonly reason: "Per-locale validation messages keyed by BCP-47 tag; marks each locale's tab and sends the ACTIVE one through FormField. `error` (one message) cannot say which locale failed.";
+        }];
+    };
+    readonly TranslatableTextareaProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly ["ValueProp", "DefaultValueProp", "OnValueChangeProp", "SizeProp", "PlaceholderProp", "DisabledProp", "IdProp", "ClassNameProp", {
+            readonly field: "locales";
+            readonly local: true;
+            readonly reason: "The BCP-47 tags the field edits, in tab order (gh#1336). Defaults to the app's registered locales; a per-field list, not a value.";
+        }, {
+            readonly field: "defaultLocale";
+            readonly local: true;
+            readonly reason: "The locale tab selected first — the AppProvider's own `defaultLocale` spelling, scoped to one field. Defaults to the active app locale.";
+        }, {
+            readonly field: "fallbackLocale";
+            readonly local: true;
+            readonly reason: "The locale whose text an EMPTY locale shows as its placeholder — the AppProvider's own `fallbackLocale` spelling, scoped to one field.";
+        }, {
+            readonly field: "errors";
+            readonly local: true;
+            readonly reason: "Per-locale validation messages keyed by BCP-47 tag; marks each locale's tab and sends the ACTIVE one through FormField. `error` (one message) cannot say which locale failed.";
+        }];
+    };
     readonly NumberInputProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry.prop.ts";
@@ -2641,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

@@ -1854,6 +1854,17 @@ const COMPONENT_PROP_REGISTRY = {
       }
     ]
   },
+  CommandSeparatorProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: [
+      {
+        field: "alwaysRender",
+        local: true,
+        reason: "cmdk's own Command.Separator prop name, kept so the cmdk docs still apply; only its default differs (true) so the rule stays above a `+ Create` group while the user types (gh#1335)."
+      }
+    ]
+  },
   TextareaProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",
@@ -1867,6 +1878,74 @@ const COMPONENT_PROP_REGISTRY = {
       "ClassNameProp"
     ]
   },
+  TranslatableInputProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: [
+      "ValueProp",
+      "DefaultValueProp",
+      "OnValueChangeProp",
+      "SizeProp",
+      "PlaceholderProp",
+      "DisabledProp",
+      "IdProp",
+      "ClassNameProp",
+      {
+        field: "locales",
+        local: true,
+        reason: "The BCP-47 tags the field edits, in tab order (gh#1336). Defaults to the app's registered locales; a per-field list, not a value."
+      },
+      {
+        field: "defaultLocale",
+        local: true,
+        reason: "The locale tab selected first \u2014 the AppProvider's own `defaultLocale` spelling, scoped to one field. Defaults to the active app locale."
+      },
+      {
+        field: "fallbackLocale",
+        local: true,
+        reason: "The locale whose text an EMPTY locale shows as its placeholder \u2014 the AppProvider's own `fallbackLocale` spelling, scoped to one field."
+      },
+      {
+        field: "errors",
+        local: true,
+        reason: "Per-locale validation messages keyed by BCP-47 tag; marks each locale's tab and sends the ACTIVE one through FormField. `error` (one message) cannot say which locale failed."
+      }
+    ]
+  },
+  TranslatableTextareaProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: [
+      "ValueProp",
+      "DefaultValueProp",
+      "OnValueChangeProp",
+      "SizeProp",
+      "PlaceholderProp",
+      "DisabledProp",
+      "IdProp",
+      "ClassNameProp",
+      {
+        field: "locales",
+        local: true,
+        reason: "The BCP-47 tags the field edits, in tab order (gh#1336). Defaults to the app's registered locales; a per-field list, not a value."
+      },
+      {
+        field: "defaultLocale",
+        local: true,
+        reason: "The locale tab selected first \u2014 the AppProvider's own `defaultLocale` spelling, scoped to one field. Defaults to the active app locale."
+      },
+      {
+        field: "fallbackLocale",
+        local: true,
+        reason: "The locale whose text an EMPTY locale shows as its placeholder \u2014 the AppProvider's own `fallbackLocale` spelling, scoped to one field."
+      },
+      {
+        field: "errors",
+        local: true,
+        reason: "Per-locale validation messages keyed by BCP-47 tag; marks each locale's tab and sends the ACTIVE one through FormField. `error` (one message) cannot say which locale failed."
+      }
+    ]
+  },
   NumberInputProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",
@@ -3080,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/control.css

@@ -966,6 +966,17 @@
     opacity: 0.5;
   }
 
+  .ui-command-separator {
+    height: var(--command-item-divider-width, var(--stroke-hairline));
+    margin-block: var(--command-group-padding);
+    background: hsl(var(--command-item-divider-color, var(--border)));
+  }
+
+  .ui-command-group[hidden] + .ui-command-separator,
+  .ui-command-separator:has(+ .ui-command-group[hidden]) {
+    display: none;
+  }
+
   .ui-command[data-split] .ui-command-group {
     padding: var(--command-list-split-padding);
   }
@@ -990,6 +1001,10 @@
       hsl(var(--command-item-divider-color, var(--border)));
   }
 
+  .ui-command[data-split] .ui-command-separator {
+    display: none;
+  }
+
   [data-slot="dialog-content"].ui-command-palette {
     top: var(--command-palette-inset-top);
     width: min(

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

@@ -868,3 +868,28 @@
     border-radius: var(--radius-md);
   }
 }
+
+@layer components {
+
+  .ui-translatable-field {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--translatable-field-gap);
+    min-inline-size: 0;
+  }
+  .ui-translatable-field-tabs {
+    align-self: flex-start;
+    max-inline-size: 100%;
+  }
+  .ui-translatable-field-panel {
+    min-inline-size: 0;
+  }
+
+  .ui-translatable-field-error-mark {
+    inline-size: var(--translatable-field-error-icon-size);
+    block-size: var(--translatable-field-error-icon-size);
+    flex: none;
+    color: hsl(var(--text-error));
+  }
+}

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "33.1.1",
+  "version": "33.3.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"
@@ -1097,6 +1107,24 @@
         "navigation-layout.css"
       ]
     },
+    "TranslatableInput": {
+      "layers": [
+        "control.css",
+        "toggle.css",
+        "dialog-layout.css",
+        "data-entry-layout.css",
+        "navigation-layout.css"
+      ]
+    },
+    "TranslatableTextarea": {
+      "layers": [
+        "control.css",
+        "toggle.css",
+        "dialog-layout.css",
+        "data-entry-layout.css",
+        "navigation-layout.css"
+      ]
+    },
     "Tree": {
       "layers": [
         "layout.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));