@godxjp/ui 18.12.19 → 18.13.0

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

@@ -116,8 +116,15 @@ export declare namespace DataTable {
         placeholder?: string;
         className?: string;
     }) => React.JSX.Element;
-    var ViewOptions: ({ className }: {
+    var ViewOptions: ({ className, label, }: {
         className?: string;
+        /**
+         * Overrides the button's text. The default ("View") is the shortest thing
+         * that fits a dense toolbar, but a product whose users know the control by a
+         * longer name — "View Options", "表示項目" — needs to say that, and hiding a
+         * bare text node from the outside is not something CSS can do.
+         */
+        label?: React.ReactNode;
     }) => React.JSX.Element | null;
     var SelectAll: () => React.JSX.Element | null;
     var BulkActions: ({ count, children, className, }: BulkActionsProps) => React.JSX.Element | null;

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

@@ -275,7 +275,10 @@ DataTable.Search = function DataTableSearch({
   );
 };
 DataTable.Search.displayName = "DataTable.Search";
-DataTable.ViewOptions = function DataTableViewOptions({ className }) {
+DataTable.ViewOptions = function DataTableViewOptions({
+  className,
+  label
+}) {
   const { table } = useDataTableContext();
   const { t } = useTranslation();
   const hideable = table.getAllLeafColumns().filter((c) => c.getCanHide());
@@ -283,7 +286,7 @@ DataTable.ViewOptions = function DataTableViewOptions({ className }) {
   return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className, children: [
       /* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-4 shrink-0", "aria-hidden": "true" }),
-      t("dataGrid.view")
+      label ?? t("dataGrid.view")
     ] }) }),
     /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
       /* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("dataGrid.toggleColumns") }),
@@ -301,6 +304,13 @@ DataTable.ViewOptions = function DataTableViewOptions({ className }) {
   ] });
 };
 DataTable.ViewOptions.displayName = "DataTable.ViewOptions";
+function columnWidth(width) {
+  if (width === void 0 || width === "") return {};
+  if (/^(?:[\d.]|calc\(|var\(|clamp\(|min\(|max\()/.test(width.trim())) {
+    return { style: { width } };
+  }
+  return { className: width };
+}
 function isEmptyHeader(header) {
   return header == null || header === "" || header === false;
 }
@@ -498,8 +508,9 @@ DataTable.Content = function DataTableContent() {
                     priority: col.priority,
                     "data-empty": headerEmpty || void 0,
                     "aria-sort": isSortable ? isActiveSort ? activeSort?.direction === "asc" ? "ascending" : "descending" : "none" : void 0,
+                    style: columnWidth(col.width).style,
                     className: cn(
-                      col.width,
+                      columnWidth(col.width).className,
                       col.align === "right" && "text-end",
                       col.align === "center" && "text-center",
                       col.hiddenOnMobile && "hidden md:table-cell",
@@ -533,9 +544,10 @@ DataTable.Content = function DataTableContent() {
                   TableCell,
                   {
                     priority: col.priority,
+                    style: columnWidth(col.width).style,
                     className: cn(
                       cellPadding,
-                      col.width,
+                      columnWidth(col.width).className,
                       col.align === "right" && "text-end",
                       col.align === "center" && "text-center",
                       col.hiddenOnMobile && "hidden md:table-cell",
@@ -655,9 +667,10 @@ DataTable.Content = function DataTableContent() {
                       TableCell,
                       {
                         priority: col.priority,
+                        style: columnWidth(col.width).style,
                         className: cn(
                           cellPadding,
-                          col.width,
+                          columnWidth(col.width).className,
                           col.align === "right" && "text-end",
                           col.align === "center" && "text-center",
                           col.hiddenOnMobile && "hidden md:table-cell",

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

@@ -11,7 +11,7 @@ export interface DescriptionsProps {
      * name/email block above an editable role field, for example) can be told to match it. Applies
      * only in `layout="horizontal"` — a vertical label sits above the value and end-aligning it
      * there would read as a mistake, exactly like `Form`'s own contract. Default `"start"`, matching
-     * this component's historical unconditional left-align — no existing consumer's render changes.
+     * this component's historical unconditional start-align — no existing consumer's render changes.
      */
     labelAlign?: "start" | "end";
     className?: string;

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

@@ -49,7 +49,7 @@ Descriptions.Item = function DescriptionsItem({
             className: cn(
               "text-muted-foreground text-xs",
               // `end`-align only ever applies in horizontal layout — same guard `Form` uses, so a
-              // vertical label (already above its value) never mistakenly right-aligns (gh#294).
+              // vertical label (already above its value) never mistakenly end-aligns (gh#294).
               layout === "horizontal" && labelAlign === "end" && "text-end"
             ),
             children: label

package/dist/components/data-entry/form-field.js

@@ -58,8 +58,14 @@ function FormField({
     "aria-label": childProps?.["aria-label"] ?? (typeof label === "string" ? label : void 0),
     // Helper and error can coexist: helper stays on aria-describedby, the error on
     // aria-errormessage (surfaced when aria-invalid is true).
-    "aria-describedby": mergeIds(childProps?.["aria-describedby"], helperId),
-    "aria-errormessage": mergeIds(childProps?.["aria-errormessage"], errorId),
+    "aria-describedby": mergeIds(
+      childProps?.["aria-describedby"],
+      helperId
+    ),
+    "aria-errormessage": mergeIds(
+      childProps?.["aria-errormessage"],
+      errorId
+    ),
     "aria-required": required ? true : childProps?.["aria-required"],
     "aria-invalid": error ? true : childProps?.["aria-invalid"]
   }) : children;
@@ -80,21 +86,29 @@ function FormField({
       className: cn("ui-form-field", className),
       children: [
         /* @__PURE__ */ jsxs("div", { "data-slot": "form-field-label", className: "ui-form-field-label", children: [
-          /* @__PURE__ */ jsx(Label, { asChild: true, id: labelId, className: "ui-inline-xs", children: /* @__PURE__ */ jsxs(
-            "span",
+          /* @__PURE__ */ jsx(
+            Label,
             {
-              onClick: () => {
-                const el = document.getElementById(resolvedId);
-                if (!(el instanceof HTMLElement)) return;
-                const focusable = el.matches(FOCUSABLE_SELECTOR) ? el : el.querySelector(FOCUSABLE_SELECTOR);
-                (focusable ?? el).focus();
-              },
-              children: [
-                /* @__PURE__ */ jsx("span", { children: label }),
-                required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-destructive", children: "*" })
-              ]
+              asChild: true,
+              id: labelId,
+              className: "ui-inline-xs text-[length:var(--form-label-font-size)]",
+              children: /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  onClick: () => {
+                    const el = document.getElementById(resolvedId);
+                    if (!(el instanceof HTMLElement)) return;
+                    const focusable = el.matches(FOCUSABLE_SELECTOR) ? el : el.querySelector(FOCUSABLE_SELECTOR);
+                    (focusable ?? el).focus();
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: label }),
+                    required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-destructive", children: "*" })
+                  ]
+                }
+              )
             }
-          ) }),
+          ),
           labelAddon
         ] }),
         /* @__PURE__ */ jsxs("div", { "data-slot": "form-field-control", className: "ui-form-field-control", children: [

package/dist/components/data-entry/form.d.ts

@@ -16,6 +16,13 @@ export declare function useFormLayout(): FormLayoutContextValue | null;
  * label/control width, label alignment, and a responsive collapse breakpoint to every FormField
  * inside it. A FormField may override any of these per-field. Optionally lays fields out in a
  * responsive multi-column grid via `columns` (reuses ResponsiveGrid — mobile-first, 1 col on small).
+ *
+ * `asChild` renders the caller's own element instead of a `<form>`, keeping only the layout
+ * context. Routing libraries own the form element — Inertia's `<Form action method>` and
+ * TanStack Form both render their own — so without this every such consumer has to choose
+ * between the router's submission handling and the design system's field layout, and ends up
+ * hand-rolling label columns per field. Two `<form>` elements cannot nest, so wrapping is not
+ * an option: `<Form asChild layout="horizontal" labelWidth={174}><InertiaForm …/></Form>`.
  */
 export declare const Form: React.ForwardRefExoticComponent<React.FormHTMLAttributes<HTMLFormElement> & {
     layout?: FormLayoutProp;
@@ -25,5 +32,6 @@ export declare const Form: React.ForwardRefExoticComponent<React.FormHTMLAttribu
     collapseBelow?: BreakpointProp | false;
     columns?: import("../../props/components/layout.prop.js").ResponsiveGridColumnsProp;
     density?: import("../../props/index.js").DensityProp;
+    asChild?: boolean;
     className?: import("../../props/index.js").ClassNameProp;
 } & React.RefAttributes<HTMLFormElement>>;

package/dist/components/data-entry/form.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
 import { ResponsiveGrid } from "../layout/responsive-grid.js";
@@ -15,6 +16,7 @@ const Form = React.forwardRef(function Form2({
   collapseBelow = "md",
   columns,
   density,
+  asChild = false,
   className,
   children,
   ...props
@@ -24,6 +26,19 @@ const Form = React.forwardRef(function Form2({
     [layout, labelWidth, controlWidth, labelAlign, collapseBelow]
   );
   const content = columns != null ? /* @__PURE__ */ jsx(ResponsiveGrid, { columns, children }) : children;
+  if (asChild) {
+    return /* @__PURE__ */ jsx(FormLayoutContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+      Slot,
+      {
+        ref,
+        "data-slot": "form",
+        "data-layout": layout,
+        className: cn("ui-form", density && `ui-density-${density}`, className),
+        ...props,
+        children
+      }
+    ) });
+  }
   return /* @__PURE__ */ jsx(
     "form",
     {

package/dist/components/layout/app-shell.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { AppShellProp } from "../../props/components/layout.prop.js";
 export type { AppShellProp, AppShellProp as AppShellProps, } from "../../props/components/layout.prop.js";
-export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, breadcrumb, footer, children, sidebarCollapsed, responsiveNavigation, mobileNav, mobileNavLabel, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): React.JSX.Element;
+export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, breadcrumb, footer, children, sidebarCollapsed, responsiveNavigation, topbarSpan, mobileNav, mobileNavLabel, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): React.JSX.Element;

package/dist/components/layout/app-shell.js

@@ -16,6 +16,7 @@ function AppShell({
   children,
   sidebarCollapsed = false,
   responsiveNavigation = "drawer",
+  topbarSpan = "content",
   mobileNav,
   mobileNavLabel,
   mobileNavOpen,
@@ -40,51 +41,54 @@ function AppShell({
     /* @__PURE__ */ jsx("div", { className: "app-topbar-spacer" }),
     topbarRight !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-right", children: topbarRight })
   ] });
+  const rail = /* @__PURE__ */ jsx("aside", { className: "app-sidebar", "aria-label": t("layout.appShell.sidebarLabel"), children: sidebar });
+  const bar = /* @__PURE__ */ jsxs("header", { className: "app-topbar ui-scale-fixed", "aria-label": t("layout.appShell.headerLabel"), children: [
+    hasDrawer && /* @__PURE__ */ jsxs(Sheet, { open: drawerOpen, onOpenChange: setDrawerOpen, children: [
+      /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "app-mobile-nav-trigger hidden max-[900px]:inline-flex",
+          "aria-label": t("layout.appShell.openNav"),
+          "aria-haspopup": "dialog",
+          children: /* @__PURE__ */ jsx(Menu, { className: "size-5", "aria-hidden": "true" })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        SheetContent,
+        {
+          side: "left",
+          width: "var(--app-shell-mobile-nav-width)",
+          className: "app-mobile-nav-drawer",
+          overlayClassName: "app-mobile-nav-overlay",
+          children: [
+            /* @__PURE__ */ jsx(SheetHeader, { title: mobileNavLabel ?? t("layout.appShell.navLabel") }),
+            /* @__PURE__ */ jsx(
+              SheetBody,
+              {
+                className: "app-mobile-nav-body px-[var(--app-shell-mobile-nav-inset)]",
+                onClick: handleDrawerClick,
+                children: drawerNav
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    resolvedTopbar
+  ] });
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: "app-root",
       "data-collapsed": sidebarCollapsed ? "true" : void 0,
       "data-responsive-navigation": responsiveNavigation,
+      "data-topbar-span": topbarSpan === "full" ? "full" : void 0,
       children: [
-        /* @__PURE__ */ jsx("aside", { className: "app-sidebar", "aria-label": t("layout.appShell.sidebarLabel"), children: sidebar }),
-        /* @__PURE__ */ jsxs("header", { className: "app-topbar ui-scale-fixed", "aria-label": t("layout.appShell.headerLabel"), children: [
-          hasDrawer && /* @__PURE__ */ jsxs(Sheet, { open: drawerOpen, onOpenChange: setDrawerOpen, children: [
-            /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                type: "button",
-                variant: "ghost",
-                size: "sm",
-                className: "app-mobile-nav-trigger hidden max-[900px]:inline-flex",
-                "aria-label": t("layout.appShell.openNav"),
-                "aria-haspopup": "dialog",
-                children: /* @__PURE__ */ jsx(Menu, { className: "size-5", "aria-hidden": "true" })
-              }
-            ) }),
-            /* @__PURE__ */ jsxs(
-              SheetContent,
-              {
-                side: "left",
-                width: "var(--app-shell-mobile-nav-width)",
-                className: "app-mobile-nav-drawer",
-                overlayClassName: "app-mobile-nav-overlay",
-                children: [
-                  /* @__PURE__ */ jsx(SheetHeader, { title: mobileNavLabel ?? t("layout.appShell.navLabel") }),
-                  /* @__PURE__ */ jsx(
-                    SheetBody,
-                    {
-                      className: "app-mobile-nav-body px-[var(--app-shell-mobile-nav-inset)]",
-                      onClick: handleDrawerClick,
-                      children: drawerNav
-                    }
-                  )
-                ]
-              }
-            )
-          ] }),
-          resolvedTopbar
-        ] }),
+        topbarSpan === "full" ? bar : rail,
+        topbarSpan === "full" ? rail : bar,
         /* @__PURE__ */ jsxs("main", { className: "app-main", "aria-label": t("layout.appShell.mainLabel"), tabIndex: 0, children: [
           breadcrumb !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-breadcrumb", children: breadcrumb }),
           children

package/dist/components/layout/error-surface.d.ts

@@ -3,8 +3,8 @@ import type { ErrorSurfaceProp } from "../../props/components/layout.prop.js";
 export type { ErrorSurfaceMaintenanceProp, ErrorSurfaceProp, ErrorSurfaceProp as ErrorSurfaceProps, } from "../../props/components/layout.prop.js";
 export type { ErrorSurfaceModeProp, ErrorSurfaceStatusProp } from "../../props/vocabulary/index.js";
 /**
- * ErrorSurface — the package-owned semantic exception surface for **403 · 404 · 500 · 503**
- * (gh#221, gh#251).
+ * ErrorSurface — the package-owned semantic exception surface for **400 · 403 · 404 · 500 · 503**
+ * (gh#221, gh#251, gh#301).
  *
  * It exists because the alternative — every app composing `EmptyState` + `Flex` + `Text` inside a
  * hand-picked shell — is unimportable: a consumer cannot `import` a docs page, so the four
@@ -12,7 +12,7 @@ export type { ErrorSurfaceModeProp, ErrorSurfaceStatusProp } from "../../props/v
  * `.canonical-auth-card`, a bespoke `min-h-dvh` class). What the surface owns is the CONTRACT the
  * composition kept losing:
  *
- * - **`mode` is the shell contract.** `application` (403/404) renders the surface as the BODY you
+ * - **`mode` is the shell contract.** `application` (400/403/404) renders the surface as the BODY you
  *   place inside the `AppShell` the route already provides, so the sidebar, topbar and breadcrumb
  *   are PRESERVED — it never reconstructs navigation chrome, because nav data and the user menu are
  *   consumer-owned and a component cannot manufacture them. `system` (500/503) owns the page and

package/dist/components/layout/error-surface.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { SearchX, ServerCrash, ShieldAlert, Wrench } from "lucide-react";
+import { SearchX, ServerCrash, ShieldAlert, TriangleAlert, Wrench } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { EmptyState } from "../data-display/empty-state.js";
@@ -9,6 +9,7 @@ import { Progress } from "../data-display/progress.js";
 import { Text } from "../general/typography.js";
 import { CenteredShell } from "./centered-shell.js";
 const STATUS_META = {
+  400: { icon: TriangleAlert, tone: "warning" },
   403: { icon: ShieldAlert, tone: "warning" },
   404: { icon: SearchX, tone: "muted" },
   500: { icon: ServerCrash, tone: "destructive" },

package/dist/components/navigation/app-setting-picker.js

@@ -149,7 +149,7 @@ const AppSettingPicker = React.forwardRef(
                   // (`data-[state=open]:border-ring`, from controlTriggerClass) and the
                   // focus-visible ring are untouched, so keyboard and "is this open" affordance
                   // still hold.
-                  "ui-app-setting-picker-icon w-[length:var(--control-height)] justify-center border-transparent bg-transparent ps-0 pe-0 shadow-none hover:bg-accent hover:text-accent-foreground"
+                  "ui-app-setting-picker-icon hover:bg-accent hover:text-accent-foreground w-[length:var(--control-height)] justify-center border-transparent bg-transparent ps-0 pe-0 shadow-none"
                 ) : (
                   // Labeled: sized to a per-kind width from `sm` up; below `sm` it hugs its content and
                   // caps at the container (`w-auto max-w-full`) instead of the old UNCONDITIONAL

package/dist/email/geometry.d.ts

@@ -46,11 +46,12 @@ export declare const EMAIL_SHELL: EmailShellTokens;
 /** Type ramp. Sizes are literal px — no email client resolves the rem scale reliably. */
 export interface EmailTypographyTokens {
     /**
-     * The canonical DXS stack, M PLUS 2 first. Web-font `@font-face` is unavailable in most clients,
-     * so this NAMES the face and degrades: a client with M PLUS 2 installed (or a webmail that
-     * already loaded it) renders the canonical face; everything else falls to Hiragino (macOS/iOS) →
-     * Yu Gothic (Windows) → Noto Sans JP → Meiryo → the system UI face → Arial → `sans-serif`. Family
-     * names are SINGLE-quoted so the value drops straight into a double-quoted `style="…"` attribute.
+     * The canonical DXS stack, Noto Sans JP first (product override, direct instruction). Web-font
+     * `@font-face` is unavailable in most clients, so this NAMES the face and degrades: a client with
+     * Noto Sans JP installed (or a webmail that already loaded it) renders the canonical face;
+     * everything else falls to Hiragino (macOS/iOS) → Yu Gothic (Windows) → M PLUS 2 → Meiryo → the
+     * system UI face → Arial → `sans-serif`. Family names are SINGLE-quoted so the value drops
+     * straight into a double-quoted `style="…"` attribute.
      */
     readonly fontFamily: string;
     /** Mono stack for invoice ids, masked card numbers, ISO dates and amounts. */

package/dist/email/tokens.generated.d.ts

@@ -37,7 +37,7 @@ export declare const EMAIL_COLOR_SOURCE: {
     };
     readonly primary: {
         readonly cssVar: "--primary";
-        readonly hsl: "204 100% 39%";
+        readonly hsl: "204 100% 37%";
     };
     readonly primaryForeground: {
         readonly cssVar: "--primary-foreground";
@@ -138,7 +138,7 @@ export declare const EMAIL_GEOMETRY_SOURCE: {
     readonly "--email-mark-gap": "8px";
     readonly "--email-wordmark-font-size": "13px";
     readonly "--email-wordmark-font-weight": "700";
-    readonly "--email-font-family-sans": "'M PLUS 2', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', YuGothic, 'Noto Sans JP', Meiryo, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, Arial, sans-serif";
+    readonly "--email-font-family-sans": "'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', YuGothic, 'M PLUS 2', Meiryo, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, Arial, sans-serif";
     readonly "--email-font-family-mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
     readonly "--email-body-font-size": "14px";
     readonly "--email-body-line-height": "1.9";

package/dist/email/tokens.generated.js

@@ -29,7 +29,7 @@ const EMAIL_COLOR_SOURCE = {
   },
   "primary": {
     "cssVar": "--primary",
-    "hsl": "204 100% 39%"
+    "hsl": "204 100% 37%"
   },
   "primaryForeground": {
     "cssVar": "--primary-foreground",
@@ -128,7 +128,7 @@ const EMAIL_GEOMETRY_SOURCE = {
   "--email-mark-gap": "8px",
   "--email-wordmark-font-size": "13px",
   "--email-wordmark-font-weight": "700",
-  "--email-font-family-sans": "'M PLUS 2', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', YuGothic, 'Noto Sans JP', Meiryo, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, Arial, sans-serif",
+  "--email-font-family-sans": "'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', YuGothic, 'M PLUS 2', Meiryo, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, Arial, sans-serif",
   "--email-font-family-mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
   "--email-body-font-size": "14px",
   "--email-body-line-height": "1.9",

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

@@ -88,6 +88,12 @@ export type FormProp = React.FormHTMLAttributes<HTMLFormElement> & {
     collapseBelow?: BreakpointProp | false;
     columns?: ResponsiveGridColumnsProp;
     density?: DensityProp;
+    /**
+     * Render the caller's own element instead of a `<form>`, keeping only the layout context.
+     * For routing libraries that own the form element (Inertia, TanStack Form) — two `<form>`
+     * elements cannot nest. `columns` does not apply in this mode; wrap fields in ResponsiveGrid.
+     */
+    asChild?: boolean;
     className?: ClassNameProp;
 };
 /**

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

@@ -222,6 +222,20 @@ export type AppShellProp = {
      * rail; it intentionally suppresses the redundant mobile drawer trigger.
      */
     responsiveNavigation?: "drawer" | "docked";
+    /**
+     * Which columns the topbar spans.
+     *
+     * - `"content"` (default) starts the topbar beside the sidebar, so the rail runs the full height
+     *   of the window and the bar sits over the content only. The admin-console arrangement.
+     * - `"full"` runs the topbar edge to edge across the top with the sidebar starting beneath it —
+     *   the arrangement products use when the bar carries space-level chrome (global search, account,
+     *   notifications) that outranks the current section rather than belonging to it.
+     *
+     * Not cosmetic: it changes what the bar reads as owning. `"full"` also renders the `<header>`
+     * before the `<aside>` so keyboard order follows the visual order — a grid area alone would put
+     * focus in the rail while the eye starts at the bar (WCAG 2.4.3).
+     */
+    topbarSpan?: "content" | "full";
     /**
      * Navigation shown in the mobile drawer at the DXS 900px breakpoint, where the docked sidebar is
      * hidden. AppShell OWNS the drawer: it renders a hamburger trigger in the topbar and a focus-
@@ -431,10 +445,10 @@ export type ErrorSurfaceMaintenanceProp = {
     progress?: number;
 };
 /**
- * @see ErrorSurface — the package-owned semantic exception surface for 403 / 404 / 500 / 503.
+ * @see ErrorSurface — the package-owned semantic exception surface for 400 / 403 / 404 / 500 / 503.
  *
  * The `mode` is the SHELL CONTRACT, not a skin:
- * - `mode="application"` (403/404) renders the surface as the **body** you put inside the
+ * - `mode="application"` (400/403/404) renders the surface as the **body** you put inside the
  *   `AppShell` the route already provides (normally within a `PageContainer`). It deliberately does
  *   NOT reconstruct navigation chrome: the sidebar, topbar and user menu are consumer-owned data,
  *   so the surface preserves the shell it is placed in instead of manufacturing a fake one.
@@ -450,7 +464,7 @@ export type ErrorSurfaceMaintenanceProp = {
  * `t()`); the surface owns only its own metadata labels, which it localizes itself.
  */
 export type ErrorSurfaceProp = {
-    /** Where the surface lives — `application` = AppShell body (403/404), `system` = own page (500/503). */
+    /** Where the surface lives — `application` = AppShell body (400/403/404), `system` = own page (500/503). */
     mode: ErrorSurfaceModeProp;
     /** HTTP status presented. Drives the default `icon`, `tone` and the rendered status code. */
     status: ErrorSurfaceStatusProp;
@@ -464,9 +478,12 @@ export type ErrorSurfaceProp = {
      * development-time error.
      */
     action: ActionProp;
-    /** Override the status-derived icon (403 ShieldAlert · 404 SearchX · 500 ServerCrash · 503 Wrench). */
+    /**
+     * Override the status-derived icon (400 TriangleAlert · 403 ShieldAlert · 404 SearchX ·
+     * 500 ServerCrash · 503 Wrench).
+     */
     icon?: IconProp;
-    /** Override the status-derived tone (403/503 `warning` · 404 `muted` · 500 `destructive`). */
+    /** Override the status-derived tone (400/403/503 `warning` · 404 `muted` · 500 `destructive`). */
     tone?: EmptyStateToneProp;
     /**
      * Semantic heading level of `title`. Defaults to `2` in `application` mode (a `PageContainer`

package/dist/props/registry.d.ts

@@ -217,12 +217,12 @@ export declare const VOCABULARY_REGISTRY: {
     readonly ErrorSurfaceModeProp: {
         readonly file: "vocabulary/layout.prop.ts";
         readonly category: "layout";
-        readonly description: "ErrorSurface shell contract — application (403/404 body inside the route's existing AppShell) vs system (500/503 owns the page via CenteredShell align=center)";
+        readonly description: "ErrorSurface shell contract — application (400/403/404 body inside the route's existing AppShell) vs system (500/503 owns the page via CenteredShell align=center)";
     };
     readonly ErrorSurfaceStatusProp: {
         readonly file: "vocabulary/layout.prop.ts";
         readonly category: "layout";
-        readonly description: "HTTP status an ErrorSurface presents — 403 | 404 | 500 | 503 (numeric); drives the default icon, tone and mode";
+        readonly description: "HTTP status an ErrorSurface presents — 400 | 403 | 404 | 500 | 503 (numeric); drives the default icon, tone and mode";
     };
     readonly AuthShellPresetProp: {
         readonly file: "vocabulary/layout.prop.ts";

package/dist/props/registry.js

@@ -215,12 +215,12 @@ const VOCABULARY_REGISTRY = {
   ErrorSurfaceModeProp: {
     file: "vocabulary/layout.prop.ts",
     category: "layout",
-    description: "ErrorSurface shell contract \u2014 application (403/404 body inside the route's existing AppShell) vs system (500/503 owns the page via CenteredShell align=center)"
+    description: "ErrorSurface shell contract \u2014 application (400/403/404 body inside the route's existing AppShell) vs system (500/503 owns the page via CenteredShell align=center)"
   },
   ErrorSurfaceStatusProp: {
     file: "vocabulary/layout.prop.ts",
     category: "layout",
-    description: "HTTP status an ErrorSurface presents \u2014 403 | 404 | 500 | 503 (numeric); drives the default icon, tone and mode"
+    description: "HTTP status an ErrorSurface presents \u2014 400 | 403 | 404 | 500 | 503 (numeric); drives the default icon, tone and mode"
   },
   AuthShellPresetProp: {
     file: "vocabulary/layout.prop.ts",

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

@@ -24,6 +24,14 @@ export type ColumnDefProp<T> = {
     ariaLabel?: string;
     render?: (row: T) => React.ReactNode;
     sortable?: boolean;
+    /**
+     * Column width: either a utility class (`"w-[300px]"`) or a CSS length
+     * (`"300px"`, `"20%"`, `"calc(50% - 1rem)"`). Both work — a length is
+     * applied inline, anything else is treated as a class.
+     *
+     * It used to be class-only, and a length silently became a dead class name,
+     * so the column fell back to auto layout with nothing to indicate why.
+     */
     width?: string;
     align?: ColumnAlignProp;
     hiddenOnMobile?: boolean;

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

@@ -32,12 +32,17 @@ export type CenteredShellAlignProp = "start" | "center";
  */
 export type ErrorSurfaceModeProp = "application" | "system";
 /**
- * The HTTP status an ErrorSurface presents. Deliberately closed to the four exception pages every
- * app ships (RFC 9110 §15.5.4 / §15.5.5 / §15.6.1 / §15.6.4); it drives the default icon, tone and
- * the recommended `mode`. A number, never a string — it is the numeric status, and it is rendered
- * with tabular figures.
+ * The HTTP status an ErrorSurface presents. Deliberately closed to the five exception pages every
+ * app ships (RFC 9110 §15.5.1 / §15.5.4 / §15.5.5 / §15.6.1 / §15.6.4); it drives the default icon,
+ * tone and the recommended `mode`. A number, never a string — it is the numeric status, and it is
+ * rendered with tabular figures.
+ *
+ * `400` (gh#301) is the malformed-request page: a route reached with parameters the server refuses
+ * to interpret (a bad id, a missing launch parameter, a hand-edited query string). It is an
+ * `application` failure like 403/404 — the app itself is healthy, so the shell stays and the
+ * viewer navigates away from it.
  */
-export type ErrorSurfaceStatusProp = 403 | 404 | 500 | 503;
+export type ErrorSurfaceStatusProp = 400 | 403 | 404 | 500 | 503;
 /**
  * AuthShell named flow preset — the page MEASURE contract for a canonical hosted-identity flow
  * (card max-width plus the desktop and mobile page gutters), owned by component tokens.

package/dist/styles/base.css

@@ -61,7 +61,7 @@
  * base sans. Consumers switch a locale's face by setting its slot, e.g.
  *   :root { --font-sans-ja: "Noto Sans JP", var(--font-sans-base); }
  * without writing any [lang] selectors. The opt-in bundle styles/fonts fills
- * these slots for its M PLUS 2 + Noto Sans JP fallback. `--font-sans-base` is a
+ * these slots for its Noto Sans JP + M PLUS 2 fallback. `--font-sans-base` is a
  * separate token (not --font-family-sans) so the fallback can't self-reference. */
 [lang="ja"] {
   --font-family-sans: var(--font-sans-ja, var(--font-sans-base));

package/dist/styles/fonts.css

@@ -3,9 +3,10 @@
  *
  * Self-contained so consumers need no font config. The browser only downloads
  * the subset files matching the rendered text:
- *   · M PLUS 2 — the DXS DEFAULT face for Japanese and Latin, including the
- *                Vietnamese glyph coverage used by the product locales.
- *   · Noto Sans JP — retained as the CJK fallback after M PLUS 2.
+ *   · Noto Sans JP — the DXS DEFAULT face for Japanese and Latin, including the
+ *                    Vietnamese glyph coverage used by the product locales
+ *                    (product override, direct instruction).
+ *   · M PLUS 2 — retained as the fallback after Noto Sans JP.
  *
  * IMPORT ORDER IS LOAD-BEARING — this file MUST be imported AFTER
  * `@godxjp/ui/styles/base`:
@@ -32,15 +33,14 @@
 
 /* Fill the font-token slots (see tokens/foundation.css + styles/base.css) with
  * the bundled faces, so the all-in-one `@godxjp/ui/styles` entry stays
- * zero-config: M PLUS 2 is the DXS default face for every supported locale and
- * Noto Sans JP remains its CJK fallback. Consumers on the per-layer setup who
+ * zero-config: Noto Sans JP is the DXS default face for every supported locale
+ * and M PLUS 2 remains its fallback. Consumers on the per-layer setup who
  * supply their own faces simply DON'T import this file and set the slots. */
 :root {
   --font-sans-base:
-    "M PLUS 2", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic,
-    "Noto Sans JP", Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui,
-    sans-serif;
+    "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic,
+    "M PLUS 2", Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
   --font-sans-vi:
-    "M PLUS 2", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui,
+    "Noto Sans JP", "M PLUS 2", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui,
     sans-serif;
 }

package/dist/styles/layout.css

@@ -613,9 +613,24 @@
       gap: var(--space-inline-lg);
     }
 
+    /* `extra` sizes to its content but STAYS SHRINKABLE (gh#300). `width: auto` releases the
+     * base rule's full-width stretch so a one-button header hugs the end edge; the historical
+     * `flex-shrink: 0` next to it then froze the box at the action group's max-content width,
+     * which is unbounded — an admin header with 10–13 buttons asks for ~1594px inside a 1408px
+     * content column. Because the box could not shrink, its own `flex-wrap: wrap` never had a
+     * narrower width to wrap into, the whole deficit was charged to `.ui-page-header-heading`
+     * (`min-w-0`, so it collapses to 0), and the `<h1>` wrapped one CJK character per line while
+     * the action group still overflowed the page. The <=720px escape hatch above
+     * (`.ui-page-header-extra > .ui-flex { max-width: 100% }`) could not help either: a
+     * percentage resolved against a fit-content parent is circular.
+     *
+     * `flex-shrink: 1` + `min-inline-size: 0` keep the max-content base size (nothing moves on a
+     * header that already fits) but let the row charge the overflow to `extra` too, so the wrap
+     * it already declares finally engages and the title keeps a readable measure. */
     .ui-page-header-extra {
       width: auto;
-      flex-shrink: 0;
+      flex-shrink: 1;
+      min-inline-size: 0;
       justify-content: flex-end;
     }
   }

package/dist/styles/shell-layout.css

@@ -25,6 +25,20 @@
     grid-template-columns: var(--app-shell-rail-width) minmax(0, 1fr);
   }
 
+  /* topbarSpan="full" — the bar runs edge to edge and the rail starts beneath it, for products
+   * whose bar carries space-level chrome (global search, account, notifications) that outranks the
+   * current section instead of belonging to it. Only the row assignment changes: both track sizes
+   * stay token-owned, so --app-shell-sidebar-width and the collapsed rail still apply untouched.
+   * Below the 900px breakpoint the grid already collapses to a single column, which IS this
+   * arrangement, so no narrow override is needed here — only the docked mode, which rebuilds the
+   * two-track grid, needs restating (see the breakpoint block). */
+  .app-root[data-topbar-span="full"] {
+    grid-template-areas:
+      "topbar topbar"
+      "sidebar main"
+      "sidebar footer";
+  }
+
   .app-sidebar {
     grid-area: sidebar;
     display: flex;
@@ -672,6 +686,15 @@
       grid-template-columns: var(--app-shell-rail-width) minmax(0, 1fr);
     }
 
+    /* Docked mode rebuilds the two-track grid at narrow widths, which would otherwise undo
+     * topbarSpan="full" exactly where the bar's space-level controls matter most. */
+    .app-root[data-responsive-navigation="docked"][data-topbar-span="full"] {
+      grid-template-areas:
+        "topbar topbar"
+        "sidebar main"
+        "sidebar footer";
+    }
+
     .app-root[data-responsive-navigation="docked"] > .app-sidebar {
       display: flex;
     }
@@ -932,7 +955,7 @@
     gap: var(--sidebar-nav-item-gap);
     padding-inline: var(--sidebar-nav-item-padding-x);
     border: 0;
-    border-radius: calc(var(--radius) - 1px);
+    border-radius: var(--sidebar-nav-item-radius);
     background: transparent;
     /* gh#228 — the row/label foreground is its own knob (default = the muted role, unchanged). The
      * icon reads a SEPARATE knob on `.sb-icon` below, so a service can darken 16px nav icons

package/dist/tokens/components/email.css

@@ -38,17 +38,19 @@
   --email-wordmark-font-weight: 700; /* mirrors --logo-wordmark-font-weight */
 
   /* ── Typography — literal px so no client has to resolve the rem scale ──────────────────── */
-  /* The DXS canonical face is M PLUS 2 (see src/styles/fonts.css). Email clients honour NO
-   * @font-face, so the stack ships the face NAME first and degrades through the platform JP faces
-   * to a generic — a client with M PLUS 2 installed (or a webmail that already loaded it) renders
-   * the canonical face, everything else lands on Hiragino (macOS/iOS) → Yu Gothic (Windows) →
-   * Noto Sans JP → Meiryo → the system UI face → Arial → sans-serif. Family names are SINGLE-quoted
+  /* The DXS canonical face is Noto Sans JP (see src/styles/fonts.css; product override, direct
+   * instruction). Email clients honour NO @font-face, so the stack ships the face NAME first and
+   * degrades through the platform JP faces to a generic — a client with Noto Sans JP installed (or
+   * a webmail that already loaded it, which is common — it is a widely preinstalled/CDN-cached
+   * Google face, more likely to actually render than the niche M PLUS 2 ever was) renders the
+   * canonical face, everything else lands on Hiragino (macOS/iOS) → Yu Gothic (Windows) →
+   * M PLUS 2 → Meiryo → the system UI face → Arial → sans-serif. Family names are SINGLE-quoted
    * on export (the generator normalises) because an inline `style="…"` attribute is double-quoted;
    * only ASCII aliases are listed, since a non-ASCII family name does not survive every transfer
    * encoding. */
   --email-font-family-sans:
-    "M PLUS 2", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic,
-    "Noto Sans JP", Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, Arial,
+    "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic,
+    "M PLUS 2", Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, Arial,
     sans-serif;
   /* Tabular/reference strings — invoice ids, masked card numbers, ISO dates, amounts — are set in
    * the mono face in the canonical card. Mirrors --font-family-mono. */

package/dist/tokens/components/form.css

@@ -13,6 +13,13 @@
   /* Column gap between the label and its control in horizontal/inline layout. */
   --form-label-gap: var(--space-4); /* 16px */
 
+  /* Type in the label column. Inherits the body size by default, so nothing moves unless a
+   * service opts in. It is a knob because the label column already is one: --form-label-width
+   * lets a service align forms to its grid, and a service whose grid was drawn around a
+   * smaller label had no way to say so — leaving it to hand-write font-size per label, which
+   * is exactly what the width token exists to prevent. */
+  --form-label-font-size: var(--text-sm); /* 14px */
+
   /* Row rhythm between a Form's own top-level blocks (gh#295) — e.g. the field group's
    * CardContent and its CardFooter action row, or two FormFields that happen to be Form's OWN
    * direct children (no Card framing). Unchanged from the historical value. */

package/dist/tokens/components/shell.css

@@ -70,6 +70,13 @@
   --sidebar-nav-item-gap: 0.625rem;
   --sidebar-nav-item-padding-x: 0.625rem;
   --sidebar-nav-gap: 2px;
+  /* Corner radius of a nav row. Defaults to the global rail radius, which is what an inset pill
+   * wants — but a rail that sets --sidebar-nav-scroll-padding and --sidebar-nav-gap to 0 makes its
+   * rows full-bleed bands flush with both edges, and a band wants square corners. Every other
+   * geometry property of `.sb-nav-item` was already a knob; this one was pinned to a constant, so
+   * the only way to square a band was a consumer selector against a DS internal class — the exact
+   * coupling rule #45 exists to prevent. Set `0` for full-bleed bands. */
+  --sidebar-nav-item-radius: calc(var(--radius) - 1px);
   --sidebar-nav-scroll-padding: var(--space-3) var(--space-2);
   --sidebar-section-gap: var(--space-4);
   --sidebar-section-label-padding-x: var(--space-2);

package/dist/tokens/foundation.css

@@ -9,7 +9,16 @@
   --card-foreground: 48 8% 13%;
   --popover: 60 33% 99%;
   --popover-foreground: 48 8% 13%;
-  --primary: 204 100% 39%; /* SmartHR MAIN #0077c7 */
+  /* SmartHR MAIN, two lightness steps down from #0077c7 (gh#299).
+   *
+   * The published blue measures 4.62:1 as TEXT on --background — compliant,
+   * but with 0.12 of headroom, which every tint this system applies to a row
+   * then spends: the zebra stripe (muted/0.4) takes it to 4.46 and hover
+   * (muted/0.5) to 4.43. A link inside a striped table therefore failed AA
+   * while the same link on a card passed, which is not a defensible place to
+   * draw that line. 37% clears every one of those states with margin and is
+   * indistinguishable from the original side by side. */
+  --primary: 204 100% 37%; /* SmartHR MAIN #0071bd */
   --primary-foreground: 60 33% 99%;
   --secondary: 45 15% 95%; /* #f4f3f0 */
   --secondary-foreground: 48 8% 13%;
@@ -200,8 +209,8 @@
    *        --font-sans-zh-hant  (lang="zh-Hant" | "zh-TW")
    *      e.g. `--font-sans-ja: "Noto Sans JP", var(--font-sans-base);`
    * The opt-in bundle `@godxjp/ui/styles/fonts` overwrites `--font-sans-base`
-   * (and `--font-sans-vi`) with the DXS bundle — "M PLUS 2" primary, "Noto Sans JP"
-   * as the CJK fallback — so the all-in-one entry is zero-config. That fill also
+   * (and `--font-sans-vi`) with the DXS bundle — "Noto Sans JP" primary, "M PLUS 2"
+   * as its fallback — so the all-in-one entry is zero-config. That fill also
    * lands on `:root` at THIS specificity, so `styles/fonts` MUST be imported AFTER
    * `styles/base`, or the system stack below silently wins (issue #210). */
   --font-sans-base:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "18.12.19",
-  "godxUiMcp": "18.12.19",
+  "version": "18.13.0",
+  "godxUiMcp": "18.13.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",