@godxjp/ui 17.0.1 → 18.0.1

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

@@ -7,7 +7,8 @@ import type { DayPickerProps } from "react-day-picker";
 import type { DateRange } from "react-day-picker";
 import type * as React from "react";
 import type { UploadFileItem } from "../../components/data-entry/upload-types.js";
-import type { ClassNameProp, DisabledProp, EmptyMessageProp, ErrorProp, HelperProp, IdProp, LabelProp, NameProp, OnChangeProp, OnValueChangeProp, OnSearchChangeProp, PlaceholderProp, RequiredProp, ValueProp, DefaultValueProp, FormLayoutProp, WidthProp, BreakpointProp, DensityProp, SizeProp } from "../vocabulary/index.js";
+import type { FieldA11yProps } from "../../lib/field-a11y.js";
+import type { ClassNameProp, DisabledProp, EmptyMessageProp, ErrorProp, HelperProp, IdProp, LabelProp, NameProp, OnChangeProp, OnValueChangeProp, OnSearchChangeProp, OpenProp, OnOpenChangeProp, PlaceholderProp, RequiredProp, ValueProp, DefaultValueProp, FormLayoutProp, WidthProp, BreakpointProp, DensityProp, SizeProp } from "../vocabulary/index.js";
 import type { ResponsiveGridColumnsProp } from "./layout.prop.js";
 /** @see Input */
 export type InputProp = React.InputHTMLAttributes<HTMLInputElement> & {
@@ -33,7 +34,7 @@ export type TextareaProp = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
  * the stepper buttons and ArrowUp/ArrowDown (Shift = ×10); `precision` sets the committed decimal
  * places (inferred from `step` when omitted). Value commits clamped to `min`/`max` on blur/Enter.
  */
-export type NumberInputProp = {
+export type NumberInputProp = FieldA11yProps & {
     value?: ValueProp<number | null>;
     defaultValue?: DefaultValueProp<number | null>;
     onValueChange?: OnValueChangeProp<number | null>;
@@ -58,9 +59,6 @@ export type NumberInputProp = {
     name?: NameProp;
     id?: IdProp;
     className?: ClassNameProp;
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
-    "aria-describedby"?: string;
     "data-testid"?: string;
 };
 /**
@@ -101,7 +99,7 @@ export type FormFieldProp = {
     children: React.ReactNode;
 };
 /** @see SearchInput */
-export type SearchInputProp = {
+export type SearchInputProp = FieldA11yProps & {
     id?: IdProp;
     label?: LabelProp;
     placeholder?: PlaceholderProp;
@@ -121,7 +119,7 @@ export type ChoiceOptionProp = {
     description?: React.ReactNode;
 };
 /** @see Checkbox.Group */
-export type CheckboxGroupProp = {
+export type CheckboxGroupProp = FieldA11yProps & {
     value?: ValueProp<string[]>;
     defaultValue?: DefaultValueProp<string[]>;
     onValueChange?: OnValueChangeProp<string[]>;
@@ -129,11 +127,13 @@ export type CheckboxGroupProp = {
     orientation?: "horizontal" | "vertical";
     disabled?: DisabledProp;
     name?: NameProp;
+    /** Injected by FormField (or set directly) — applied to the `role="group"` container. */
+    id?: IdProp;
     className?: ClassNameProp;
     children?: React.ReactNode;
 };
 /** @see Radio.Group */
-export type RadioGroupProp = {
+export type RadioGroupProp = FieldA11yProps & {
     value?: ValueProp;
     defaultValue?: DefaultValueProp;
     onValueChange?: OnValueChangeProp;
@@ -141,6 +141,8 @@ export type RadioGroupProp = {
     orientation?: "horizontal" | "vertical";
     disabled?: DisabledProp;
     name?: NameProp;
+    /** Injected by FormField (or set directly) — applied to the `role="radiogroup"` container. */
+    id?: IdProp;
     className?: ClassNameProp;
     children?: React.ReactNode;
 };
@@ -163,7 +165,7 @@ export type SliderProp = React.ComponentPropsWithoutRef<typeof SliderPrimitive.R
 /** @see Calendar — react-day-picker DayPicker. */
 export type CalendarProp = DayPickerProps;
 /** @see DatePicker */
-export type DatePickerProp = {
+export type DatePickerProp = FieldA11yProps & {
     value?: ValueProp<Date>;
     defaultValue?: DefaultValueProp<Date | undefined>;
     onValueChange?: OnValueChangeProp<Date | undefined>;
@@ -180,7 +182,7 @@ export type DatePickerProp = {
     allowClear?: boolean;
 };
 /** @see MonthPicker */
-export type MonthPickerProp = {
+export type MonthPickerProp = FieldA11yProps & {
     value?: ValueProp<Date>;
     defaultValue?: DefaultValueProp<Date | undefined>;
     onValueChange?: OnValueChangeProp<Date | undefined>;
@@ -200,7 +202,7 @@ export type MonthPickerProp = {
  * @see MonthRangePicker — both edges are normalized to the FIRST day of their month
  * (the `DateRange` shape is shared with DateRangePicker so ranges interop).
  */
-export type MonthRangePickerProp = {
+export type MonthRangePickerProp = FieldA11yProps & {
     value?: ValueProp<DateRange>;
     defaultValue?: DefaultValueProp<DateRange | undefined>;
     onValueChange?: OnValueChangeProp<DateRange | undefined>;
@@ -217,7 +219,7 @@ export type MonthRangePickerProp = {
     allowClear?: boolean;
 };
 /** @see DateRangePicker */
-export type DateRangePickerProp = {
+export type DateRangePickerProp = FieldA11yProps & {
     value?: ValueProp<DateRange>;
     defaultValue?: DefaultValueProp<DateRange | undefined>;
     onValueChange?: OnValueChangeProp<DateRange | undefined>;
@@ -234,7 +236,7 @@ export type DateRangePickerProp = {
     allowClear?: boolean;
 };
 /** @see TimePicker — popover HH:mm picker (canonical 24h storage). */
-export type TimePickerProp = {
+export type TimePickerProp = FieldA11yProps & {
     value?: ValueProp;
     defaultValue?: DefaultValueProp;
     onValueChange?: OnValueChangeProp;
@@ -250,7 +252,7 @@ export type TimePickerProp = {
     allowClear?: boolean;
 };
 /** @see ColorPicker */
-export type ColorPickerProp = {
+export type ColorPickerProp = FieldA11yProps & {
     value?: ValueProp;
     onValueChange?: OnValueChangeProp;
     disabled?: DisabledProp;
@@ -320,12 +322,51 @@ export type SearchSelectProp = {
     searchPlaceholder?: PlaceholderProp;
     emptyMessage?: EmptyMessageProp;
     loadingMessage?: string;
-    /** Message shown when an async `loadOptions` rejects — a distinct state from empty/loading. */
+    /** Message shown when an async `loadOptions` rejects — a distinct state from empty/loading. Used
+     *  as-is unless `renderError` is provided. */
     errorMessage?: string;
     clearLabel?: string;
     /** Show a "clear" row when a value is selected (default true). */
     clearable?: boolean;
     disabled?: DisabledProp;
+    /**
+     * Read-only: the current value is shown (and the clear affordance hidden) but the popover cannot
+     * be opened — no new pick, no search. Mirrors the Input/NumberInput readOnly contract (stays
+     * focusable + submits its value, unlike `disabled`). Default false.
+     */
+    readOnly?: boolean;
+    /** Trigger height tier — forwarded to the underlying Button. Default matches Button's own default. */
+    size?: SizeProp;
+    /** Controlled open state for the popover (uncontrolled by default). */
+    open?: OpenProp;
+    onOpenChange?: OnOpenChangeProp;
+    /** Controlled search-box query (uncontrolled by default). Pairs with `onSearchChange`. */
+    search?: string;
+    onSearchChange?: OnSearchChangeProp;
+    /**
+     * Override the default client-side filter (`options` mode only — ignored with `loadOptions`,
+     * which is responsible for its own server-side filtering). Receives the option and the trimmed
+     * query; return true to keep the row. Only consulted while the query is non-empty.
+     */
+    filterOption?: (option: SearchSelectOptionProp, query: string) => boolean;
+    /**
+     * Custom error slot — receives the resolved message and a `retry` callback that reloads from the
+     * first page (a predictable recovery, not a resume of a failed page-N append). Overrides the
+     * default `errorMessage` row.
+     */
+    renderError?: (params: {
+        message: string;
+        retry: () => void;
+    }) => React.ReactNode;
+    /**
+     * Custom "load more" affordance appended below the list while another page is available — pairs
+     * with (does not replace) the built-in scroll-triggered pagination.
+     */
+    renderLoadMore?: (params: {
+        hasMore: boolean;
+        loading: boolean;
+        loadMore: () => void;
+    }) => React.ReactNode;
     /** Form field name — submits the selected value via a hidden input. */
     name?: NameProp;
     id?: IdProp;
@@ -342,6 +383,11 @@ export type SearchSelectProp = {
  * Data-driven (Ant-style) form of {@link Select} — one component covering static `options` or
  * async `loadOptions`, with `showSearch` toggling the searchable combobox vs a plain listbox.
  * Passing `options`/`loadOptions` to `<Select>` switches it from the compound API to this one.
+ *
+ * `readOnly`/`size`/`open`/`onOpenChange`/`search`/`onSearchChange`/`filterOption`/`renderError`/
+ * `renderLoadMore` (inherited from {@link SearchSelectProp}) take effect ONLY in searchable mode
+ * (`showSearch` or `loadOptions`) — they configure the `SearchSelect` engine that mode delegates
+ * to. The plain listbox (no search) is a native Radix listbox and ignores them.
  */
 export type SelectDataProp = SearchSelectProp & {
     /** Show the search box (combobox). Defaults to true when `loadOptions` is set, otherwise false. */
@@ -352,7 +398,7 @@ export type UploadFileItemProp = UploadFileItem;
 /** @see Upload */
 export type UploadVariantProp = "dropzone" | "button" | "picture-card" | "picture" | "avatar" | "avatar-crop";
 /** @see Upload — presentational; wire `onUpload` to media-service in app api.ts */
-export type UploadProp = {
+export type UploadProp = FieldA11yProps & {
     variant?: UploadVariantProp;
     value?: ValueProp<UploadFileItemProp[]>;
     defaultValue?: DefaultValueProp<UploadFileItemProp[]>;
@@ -368,6 +414,8 @@ export type UploadProp = {
         mediaId: string;
         previewUrl?: string;
     }>;
+    /** Injected by FormField (or set directly) — applied to the native `<input type="file">`. */
+    id?: IdProp;
     className?: ClassNameProp;
     children?: React.ReactNode;
 };
@@ -386,7 +434,7 @@ export type TreeFieldNamesProp = {
     children?: string;
 };
 /** @see Cascader — cascade picker (Popover + multi-column). */
-export type CascaderProp = {
+export type CascaderProp = FieldA11yProps & {
     options: TreeOptionProp[];
     value?: ValueProp<string[] | string[][]>;
     defaultValue?: DefaultValueProp<string[] | string[][]>;
@@ -404,7 +452,7 @@ export type CascaderProp = {
 };
 export type ShowCheckedStrategyProp = "SHOW_CHILD" | "SHOW_PARENT" | "SHOW_ALL";
 /** @see TreeSelect — tree in Popover (cmdk search + expand/collapse). */
-export type TreeSelectProp = {
+export type TreeSelectProp = FieldA11yProps & {
     treeData: TreeOptionProp[];
     value?: ValueProp<string | string[]>;
     defaultValue?: DefaultValueProp<string | string[]>;
@@ -430,7 +478,7 @@ export type TransferItemProp = {
     disabled?: boolean;
 };
 /** @see Transfer — dual-list shuttle (Checkbox + SearchInput). */
-export type TransferProp = {
+export type TransferProp = FieldA11yProps & {
     dataSource: TransferItemProp[];
     targetKeys: string[];
     onValueChange?: (targetKeys: string[], direction: "left" | "right", moveKeys: string[]) => void;
@@ -438,6 +486,8 @@ export type TransferProp = {
     showSearch?: boolean;
     oneWay?: boolean;
     disabled?: DisabledProp;
+    /** Injected by FormField (or set directly) — applied to the `role="group"` shuttle container. */
+    id?: IdProp;
     className?: ClassNameProp;
     selectedKeys?: [string[], string[]];
     onSelectChange?: (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => void;

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

@@ -9,6 +9,13 @@ export type PageContainerProp = {
     extra?: ExtraProp;
     footer?: FooterProp;
     breadcrumb?: BreadcrumbProp;
+    /**
+     * Override the breadcrumb `<nav>` landmark's accessible name. Defaults to a localized
+     * "Breadcrumb". Needed when more than one `PageContainer` (each with its own `breadcrumb`)
+     * renders on the same page/view — two `<nav>` landmarks sharing one name/role fail axe's
+     * `landmark-unique` (WCAG 2.4.1 / 1.3.1).
+     */
+    breadcrumbAriaLabel?: string;
     linkComponent?: React.ElementType;
     density?: PageDensityProp;
     variant?: PageContainerVariantProp;
@@ -66,6 +73,21 @@ export type AppShellProp = {
     breadcrumb?: ReactNode;
     footer?: ReactNode;
     sidebarCollapsed?: boolean;
+    /**
+     * Navigation shown in the mobile drawer below the `lg` breakpoint, where the docked sidebar is
+     * hidden. AppShell OWNS the drawer: it renders a hamburger trigger in the topbar and a focus-
+     * trapped Sheet (Esc + overlay close, focus returns to the trigger) — hiding the sidebar without
+     * a reachable alternative is invalid (gh#165). Defaults to `sidebar`, so the same nav is
+     * available on mobile with no extra wiring; pass a distinct node for a mobile-tailored menu, or
+     * `null` to opt out (only when navigation lives elsewhere, e.g. a bottom bar).
+     */
+    mobileNav?: ReactNode;
+    /** Accessible title for the mobile navigation drawer. Defaults to the localized "Menu". */
+    mobileNavLabel?: string;
+    /** Controlled open state of the mobile drawer. Omit for AppShell-owned (uncontrolled) state. */
+    mobileNavOpen?: boolean;
+    /** Change handler for the mobile drawer open state (pairs with `mobileNavOpen`). */
+    onMobileNavOpenChange?: (open: boolean) => void;
 };
 /**
  * @see AuthShell — centred auth/login page shell (login · mfa · passkey · device · reset). A
@@ -97,6 +119,13 @@ export type SidebarItemProp = {
     icon: ComponentType<SVGProps<SVGSVGElement>>;
     badge?: ReactNode;
     disabled?: boolean;
+    /**
+     * Render the row as a real anchor (`<a href>`) — the link is the SOLE interactive element (no
+     * nested `<button>`). Use for MPA links / right-click-open-in-new-tab. Omit for SPA rows that
+     * report selection via `onSelect(id)`. For a framework router `<Link>`, use `renderItem` instead
+     * (its returned element is merged as the row via Slot, so there is still no nested interactive).
+     */
+    href?: string;
     /** Nested rows — renders a collapsible submenu group (the parent reads active when any child is). */
     children?: SidebarItemProp[];
 };
@@ -117,8 +146,21 @@ export type SidebarProp = {
     brand?: ReactNode;
     collapsed?: boolean;
     children?: ChildrenProp;
+    /**
+     * Escape hatch to render a leaf row as a custom element — typically a framework router `<Link>`.
+     * Return a SINGLE interactive element; the Sidebar merges the row styling + active state onto it
+     * via Slot (so it is the row and the sole interactive element — no nested `<button>`). Any
+     * secondary affix (a star, a count) must be a non-interactive descendant of that element.
+     */
     renderItem?: (item: SidebarItemData) => ReactNode;
     footer?: ReactNode;
+    /**
+     * Override the nav landmark's accessible name. Defaults to a localized "Main navigation".
+     * Needed when more than one Sidebar renders on the same page/view (e.g. a docked sidebar +
+     * its mobile-drawer twin, both mounted at once) — two `<nav>` landmarks sharing one name/role
+     * fail axe's `landmark-unique` (WCAG 2.4.1 / 1.3.1).
+     */
+    "aria-label"?: string;
 };
 /**
  * @see Topbar — a PURE SLOT bar (no baked chrome). The library only positions three clusters; the

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

@@ -22,10 +22,26 @@ export type PaginationProp = {
     pageSizeOptions?: number[];
     showSizeChanger?: boolean;
     showTotal?: boolean | ((total: number, range: [number, number]) => React.ReactNode);
+    /**
+     * Hide the whole control when there is nothing to page through — zero items OR exactly one page.
+     * `true` (default) keeps table footers clean: pagination is navigation between multiple result
+     * pages, so a lone disabled `1 / 1` bar is noise. Set `false` for the explicit opt-in when a
+     * consumer still wants the bar on a single page (e.g. to keep `showTotal` visible). A control
+     * with `total === 0` is ALWAYS hidden — there is no data to navigate. (gh#153)
+     */
+    hideOnSinglePage?: boolean;
     simple?: boolean;
     disabled?: DisabledProp;
     className?: ClassNameProp;
     onValueChange?: (page: number, pageSize: number) => void;
+    /**
+     * Override the `<nav>` landmark's accessible name. Defaults to a localized "Pagination".
+     * Multiple Pagination instances on one page/view (e.g. two independent result lists) need a
+     * DISTINCT name each — two `<nav>` landmarks sharing one name/role fail axe's `landmark-unique`
+     * (WCAG 2.4.1 / 1.3.1). Pass something that names what is being paged, e.g. `"注文一覧の
+     * ページネーション"` vs `"請求書一覧のページネーション"`.
+     */
+    "aria-label"?: string;
 };
 export type StepStatusProp = "wait" | "process" | "finish" | "error";
 /** @see StepItem */

package/dist/props/registry.d.ts

@@ -610,13 +610,13 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly SearchSelectProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry.prop.ts";
-        readonly vocabulary: readonly ["ValueProp", "OnValueChangeProp", "PlaceholderProp", "EmptyMessageProp", "DisabledProp", "NameProp", "IdProp", "ClassNameProp"];
+        readonly vocabulary: readonly ["ValueProp", "OnValueChangeProp", "PlaceholderProp", "EmptyMessageProp", "DisabledProp", "NameProp", "IdProp", "ClassNameProp", "OpenProp", "OnOpenChangeProp", "SizeProp"];
         readonly note: "Internal — the searchable engine behind `<Select options showSearch>` (not public API); use Select.";
     };
     readonly SelectDataProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry.prop.ts";
-        readonly vocabulary: readonly ["ValueProp", "OnValueChangeProp", "PlaceholderProp", "EmptyMessageProp", "DisabledProp", "NameProp", "IdProp", "ClassNameProp"];
+        readonly vocabulary: readonly ["ValueProp", "OnValueChangeProp", "PlaceholderProp", "EmptyMessageProp", "DisabledProp", "NameProp", "IdProp", "ClassNameProp", "OpenProp", "OnOpenChangeProp", "SizeProp"];
         readonly note: "Ant-style data-driven form of Select (options|loadOptions + showSearch). One Select for all single-selects.";
     };
     readonly SearchSelectOptionProp: {
@@ -687,7 +687,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly EmptyStateProp: {
         readonly group: "data-display";
         readonly file: "components/data-display.prop.ts";
-        readonly vocabulary: readonly ["IconProp", "TitleProp", "DescriptionProp", "ActionProp", "ToneProp"];
+        readonly vocabulary: readonly ["IconProp", "TitleProp", "DescriptionProp", "ActionProp", "ToneProp", "HeadingLevelProp"];
     };
     readonly EmptyStateToneProp: {
         readonly group: "data-display";
@@ -1097,6 +1097,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-display/card.tsx";
         readonly vocabulary: readonly ["TitleProp", "DescriptionProp", "ClassNameProp", "ChildrenProp"];
     };
+    readonly CardTitleProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display/card.tsx";
+        readonly vocabulary: readonly ["HeadingLevelProp", "ClassNameProp", "ChildrenProp"];
+    };
     readonly CardContentProp: {
         readonly group: "data-display";
         readonly file: "components/data-display/card.tsx";

package/dist/props/registry.js

@@ -637,7 +637,10 @@ const COMPONENT_PROP_REGISTRY = {
       "DisabledProp",
       "NameProp",
       "IdProp",
-      "ClassNameProp"
+      "ClassNameProp",
+      "OpenProp",
+      "OnOpenChangeProp",
+      "SizeProp"
     ],
     note: "Internal \u2014 the searchable engine behind `<Select options showSearch>` (not public API); use Select."
   },
@@ -652,7 +655,10 @@ const COMPONENT_PROP_REGISTRY = {
       "DisabledProp",
       "NameProp",
       "IdProp",
-      "ClassNameProp"
+      "ClassNameProp",
+      "OpenProp",
+      "OnOpenChangeProp",
+      "SizeProp"
     ],
     note: "Ant-style data-driven form of Select (options|loadOptions + showSearch). One Select for all single-selects."
   },
@@ -742,7 +748,14 @@ const COMPONENT_PROP_REGISTRY = {
   EmptyStateProp: {
     group: "data-display",
     file: "components/data-display.prop.ts",
-    vocabulary: ["IconProp", "TitleProp", "DescriptionProp", "ActionProp", "ToneProp"]
+    vocabulary: [
+      "IconProp",
+      "TitleProp",
+      "DescriptionProp",
+      "ActionProp",
+      "ToneProp",
+      "HeadingLevelProp"
+    ]
   },
   EmptyStateToneProp: {
     group: "data-display",
@@ -1104,6 +1117,11 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/data-display/card.tsx",
     vocabulary: ["TitleProp", "DescriptionProp", "ClassNameProp", "ChildrenProp"]
   },
+  CardTitleProp: {
+    group: "data-display",
+    file: "components/data-display/card.tsx",
+    vocabulary: ["HeadingLevelProp", "ClassNameProp", "ChildrenProp"]
+  },
   CardContentProp: {
     group: "data-display",
     file: "components/data-display/card.tsx",

package/dist/props/vocabulary/data.prop.d.ts

@@ -13,6 +13,15 @@ export type OnRowClickProp<T> = (row: T) => void;
 export type ColumnDefProp<T> = {
     key: string;
     header: React.ReactNode;
+    /**
+     * Accessible header text for a column whose `header` is visually empty — the
+     * standard case for a row-actions or selection column. Rendered as an
+     * `sr-only` label inside the `<th>` so the column keeps a screen-reader name
+     * (e.g. "Actions" / "Select") while showing nothing on screen. Required
+     * (dev-warned) when `header` is empty; ignored when `header` has visible text.
+     * Route the string through `t()` for i18n.
+     */
+    ariaLabel?: string;
     render?: (row: T) => React.ReactNode;
     sortable?: boolean;
     width?: string;

package/dist/styles/layout.css

@@ -175,6 +175,16 @@
     gap: var(--space-inline-lg);
   }
 
+  /* ResponsiveGrid OWNS its query container. The component wraps the grid in
+   * `.ui-responsive-grid-scope` (container-type: inline-size, named `responsive-grid`) so the
+   * column breakpoints resolve against the WIDTH AVAILABLE TO THE GRID — not the viewport and not
+   * an undeclared ancestor `container-type`. This makes it correct inside a narrow card, a
+   * SplitPane aside, or a bare `<div>`; it can never silently stay one column for want of an
+   * external container context (gh#165). Named so it queries its own scope, never a closer one. */
+  .ui-responsive-grid-scope {
+    container: responsive-grid / inline-size;
+  }
+
   .ui-responsive-grid {
     display: grid;
     gap: var(--space-stack-md);
@@ -185,24 +195,33 @@
     min-width: 0;
   }
 
-  @container (min-width: 640px) {
+  @container responsive-grid (min-width: 40rem) {
     .ui-responsive-grid {
       grid-template-columns: repeat(var(--responsive-grid-sm, 2), minmax(0, 1fr));
     }
   }
 
-  @container (min-width: 768px) {
+  @container responsive-grid (min-width: 48rem) {
     .ui-responsive-grid {
       grid-template-columns: repeat(var(--responsive-grid-md, 3), minmax(0, 1fr));
     }
   }
 
-  @container (min-width: 1024px) {
+  @container responsive-grid (min-width: 64rem) {
     .ui-responsive-grid {
       grid-template-columns: repeat(var(--responsive-grid-lg, 4), minmax(0, 1fr));
     }
   }
 
+  /* SplitPane OWNS its query container too — `.ui-split-pane-scope`
+   * (container-type: inline-size, named `split-pane`). The two-column layout is chosen from the
+   * pane's OWN available width, so a narrow embedded pane on a large viewport correctly stays a
+   * single column, and a wide pane on a small viewport can split (gh#165 — replaces the old
+   * `@media (min-width: 1080px)` viewport query that ignored the container). */
+  .ui-split-pane-scope {
+    container: split-pane / inline-size;
+  }
+
   .ui-split-pane {
     display: grid;
     gap: var(--space-stack-md);
@@ -259,7 +278,7 @@
     opacity: 0.5;
   }
 
-  @media (min-width: 1080px) {
+  @container split-pane (min-width: 48rem) {
     .ui-split-pane[data-aside-width="sm"] {
       grid-template-columns: minmax(0, 1fr) 20rem;
     }
@@ -543,22 +562,30 @@
 }
 
 @layer components {
+  /* Pagination is ONE horizontal row and never wraps to a second desktop line (gh#153 — the old
+   * `flex-wrap: wrap` split the range / size-changer / page strip across rows). The number strip
+   * (`.ui-pagination-list`) absorbs any overflow by scrolling horizontally rather than wrapping; a
+   * genuinely narrow viewport uses the INTENTIONAL compact form via the `simple` prop (Prev · n/N ·
+   * Next, no page buttons) — not browser-driven wrapping. */
   .ui-pagination {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    min-width: 0;
     align-items: center;
     justify-content: flex-end;
     gap: var(--pagination-gap);
   }
 
-  .ui-pagination[data-simple="true"] {
-    flex-wrap: nowrap;
-  }
-
+  /* Total / range label sits at the start and truncates rather than pushing the controls onto a
+   * second line — the nav row stays one line at every width (gh#153). */
   .ui-pagination-total {
+    min-width: 0;
     margin-inline-end: auto;
+    overflow: hidden;
     color: hsl(var(--muted-foreground));
     font-size: var(--pagination-total-font-size);
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .ui-pagination-count {
@@ -576,12 +603,22 @@
 
   .ui-pagination-list {
     display: flex;
+    min-width: 0;
     align-items: center;
     gap: var(--pagination-item-gap);
+    /* Overflow scrolls horizontally instead of wrapping onto a second row. Hidden scrollbar keeps
+     * the desktop bar clean; the strip stays swipeable on touch. */
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .ui-pagination-list::-webkit-scrollbar {
+    display: none;
   }
 
   .ui-pagination-item {
     display: flex;
+    flex: 0 0 auto;
     align-items: center;
     justify-content: center;
   }

package/dist/styles/shell-layout.css

@@ -143,6 +143,21 @@
     display: none;
   }
 
+  /* AppShell-owned mobile drawer trigger — hidden on desktop, shown once the docked sidebar
+   * collapses out below `lg` (gh#165). The drawer nav itself is a focus-trapped Sheet. */
+  .app-mobile-nav-trigger {
+    display: none;
+    flex: 0 0 auto;
+    margin-inline-end: var(--space-1);
+  }
+
+  /* The drawer nav reuses the docked Sidebar node; its `.sb-root { display: contents }` flattens
+   * into the scrollable SheetBody so sections/footer flow naturally in the panel. */
+  .app-mobile-nav-body {
+    display: flex;
+    flex-direction: column;
+  }
+
   .app-topbar-spacer {
     flex: 1;
   }
@@ -171,6 +186,10 @@
     .app-topbar-left:has(.app-mobile-sidebar-trigger) {
       display: flex;
     }
+
+    .app-mobile-nav-trigger {
+      display: inline-flex;
+    }
   }
 
   .sb-root {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "17.0.1",
-  "godxUiMcp": "17.0.0",
+  "version": "18.0.1",
+  "godxUiMcp": "18.0.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,
@@ -276,9 +276,10 @@
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "check:example-imports": "node scripts/check-example-imports.mjs",
-    "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:audit-sync && pnpm test",
-    "verify:release": "pnpm build && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
+    "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
+    "verify:release": "pnpm build && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm check:frame-coverage && pnpm check:frame-axe && pnpm test",
     "check:mcp-lockstep": "node scripts/check-release-lockstep.mjs",
+    "check:mcp-pattern-imports": "node scripts/check-mcp-pattern-imports.mjs",
     "check:mcp-sync": "node scripts/check-mcp-sync.mjs",
     "check:mcp-orphans": "node scripts/check-mcp-orphans.mjs",
     "check:mcp-prop-sync": "node scripts/check-mcp-prop-sync.mjs",
@@ -304,6 +305,9 @@
     "check:contrast": "node scripts/check-contrast.mjs",
     "visual-audit": "node scripts/visual-audit.mjs",
     "check:visual-audit": "node scripts/visual-audit-smoke.mjs",
+    "check:frame-axe": "node scripts/check-frame-axe.mjs",
+    "check:frame-geometry": "node scripts/frame-geometry.mjs",
+    "check:frame-coverage": "node scripts/frame-coverage.mjs",
     "postinstall": "node scripts/postinstall.mjs",
     "init-agent": "node scripts/init-agent-kit.mjs",
     "check:use-client": "node scripts/check-use-client.mjs"