@godxjp/ui 18.6.0 → 18.7.0

package/dist/components/feedback/alert.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { ToneProp } from "../../props/vocabulary/index.js";
-import type { AlertQueryErrorProp } from "../../props/components/feedback.prop.js";
-export type { AlertProp, AlertProp as AlertProps, AlertTitleProp, AlertTitleProp as AlertTitleProps, AlertContentProp, AlertContentProp as AlertContentProps, AlertDescriptionProp, AlertDescriptionProp as AlertDescriptionProps, AlertActionsProp, AlertActionsProp as AlertActionsProps, AlertQueryErrorProp, AlertQueryErrorProp as AlertQueryErrorProps, } from "../../props/components/feedback.prop.js";
+import type { AlertQueryErrorProp, BannerProp } from "../../props/components/feedback.prop.js";
+export type { BannerProp, BannerProp as BannerProps, AlertProp, AlertProp as AlertProps, AlertTitleProp, AlertTitleProp as AlertTitleProps, AlertContentProp, AlertContentProp as AlertContentProps, AlertDescriptionProp, AlertDescriptionProp as AlertDescriptionProps, AlertActionsProp, AlertActionsProp as AlertActionsProps, AlertQueryErrorProp, AlertQueryErrorProp as AlertQueryErrorProps, } from "../../props/components/feedback.prop.js";
 declare const AlertBase: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     variant?: import("../../props/index.js").AlertVariantProp;
     tone?: ToneProp;
@@ -63,4 +63,22 @@ export declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes
     } & React.RefAttributes<HTMLDivElement>>;
     QueryError: typeof AlertQueryError;
 };
+export declare const Banner: React.ForwardRefExoticComponent<BannerProp & React.RefAttributes<HTMLDivElement>> & {
+    Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLParagraphElement>>;
+    Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Description: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLParagraphElement>>;
+    Actions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLDivElement>>;
+};
 export { AlertBase };

package/dist/components/feedback/alert.js

@@ -159,6 +159,15 @@ const Alert = Object.assign(AlertBase, {
   Actions: AlertActions,
   QueryError: AlertQueryError
 });
+const BannerBase = React.forwardRef(function Banner(props, ref) {
+  return /* @__PURE__ */ jsx(AlertBase, { ...props, ref, variant: "banner" });
+});
+const Banner2 = Object.assign(BannerBase, {
+  Title: AlertTitle,
+  Content: AlertContent,
+  Description: AlertDescription,
+  Actions: AlertActions
+});
 export {
   Alert,
   AlertActions,
@@ -166,5 +175,6 @@ export {
   AlertContent,
   AlertDescription,
   AlertQueryError,
-  AlertTitle
+  AlertTitle,
+  Banner2 as Banner
 };

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

@@ -8,6 +8,6 @@ export { Toaster } from "./sonner.js";
 export { toast } from "./use-toast.js";
 export { Skeleton, SkeletonRows, SkeletonTable, SkeletonDetail, SkeletonStat } from "./skeleton.js";
 export type { SkeletonProps } from "./skeleton.js";
-export { Alert, AlertTitle, AlertContent, AlertDescription, AlertActions, AlertQueryError, } from "./alert.js";
-export type { AlertProp, AlertProps, AlertTitleProp, AlertTitleProps, AlertContentProp, AlertContentProps, AlertDescriptionProp, AlertDescriptionProps, AlertActionsProp, AlertActionsProps, AlertQueryErrorProp, AlertQueryErrorProps, } from "./alert.js";
+export { Alert, AlertTitle, AlertContent, AlertDescription, AlertActions, AlertQueryError, Banner, } from "./alert.js";
+export type { BannerProp, BannerProps, AlertProp, AlertProps, AlertTitleProp, AlertTitleProps, AlertContentProp, AlertContentProps, AlertDescriptionProp, AlertDescriptionProps, AlertActionsProp, AlertActionsProps, AlertQueryErrorProp, AlertQueryErrorProps, } from "./alert.js";
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./tooltip.js";

package/dist/components/feedback/index.js

@@ -49,7 +49,8 @@ import {
   AlertContent,
   AlertDescription,
   AlertActions,
-  AlertQueryError
+  AlertQueryError,
+  Banner
 } from "./alert.js";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./tooltip.js";
 export {
@@ -71,6 +72,7 @@ export {
   AlertDialogTrigger,
   AlertQueryError,
   AlertTitle,
+  Banner,
   Dialog,
   DialogAction,
   DialogBody,

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

@@ -10,8 +10,10 @@ export type { AuthShellProp, AuthShellProp as AuthShellProps, } from "../../prop
  *
  * `preset` names the flow MEASURE (card max-width + desktop/mobile page gutters) so a consumer
  * never overrides page geometry by hand: `"login"` = SCR-001's stable identity/card/footer anchor
- * for standalone and real requester states; `"device-authorization"` = 380px card with a 5px
- * inline gutter at 390px; `"context-selection"` = 25rem card, edge-to-edge on mobile;
+ * for standalone and real requester states; `"registration"` = the 360px sign-up measure, the only
+ * START-aligned preset (a tall sign-up card must scroll, not clip its own top above the scroll
+ * origin) and the only one with its own footer clearance; `"device-authorization"` = 380px card
+ * with a 5px inline gutter at 390px; `"context-selection"` = 25rem card, edge-to-edge on mobile;
  * `"account-recovery"` = the 432px SCR-008 panel measure shared by password recovery and the
  * sign-in MFA challenge, with a 15px inline gutter at 390px. It is orthogonal to `variant` —
  * combine `variant="canonical"` with any preset.

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

@@ -1,5 +1,7 @@
 export { PageContainer } from "./page-container.js";
 export type { PageContainerProp, PageContainerProps, BreadcrumbItem, BreadcrumbItemProp, } from "./page-container.js";
+export { PageHeader } from "./page-header.js";
+export type { PageHeaderProp, PageHeaderProps } from "./page-header.js";
 export { Flex } from "./flex.js";
 export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexProp, FlexProps, } from "./flex.js";
 export { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";

package/dist/components/layout/index.js

@@ -1,4 +1,5 @@
 import { PageContainer } from "./page-container.js";
+import { PageHeader } from "./page-header.js";
 import { Flex } from "./flex.js";
 import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
 import { AppShell } from "./app-shell.js";
@@ -37,6 +38,7 @@ export {
   MasterDetail,
   OrgSwitcher,
   PageContainer,
+  PageHeader,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,

package/dist/components/layout/page-container.d.ts

@@ -2,7 +2,7 @@ import type { PageContainerProp, PageInsetProp } from "../../props/components/la
 export type { PageContainerProp, PageContainerProp as PageContainerProps, } from "../../props/components/layout.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbItemProp as BreadcrumbItem, } from "../../props/vocabulary/navigation.prop.js";
 export declare function PageContainerInset({ className, children, ...props }: PageInsetProp): import("react").JSX.Element;
-declare function PageContainerRoot({ title, subtitle, extra, footer, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, density, variant, preset, headerLayout, measure, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
+declare function PageContainerRoot({ title, subtitle, meta, headerLoading, extra, footer, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, density, variant, preset, headerLayout, measure, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
 export declare const PageContainer: typeof PageContainerRoot & {
     Inset: typeof PageContainerInset;
 };

package/dist/components/layout/page-container.js

@@ -1,10 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { ChevronRight } from "lucide-react";
-import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { densityClass, pageContainerVariantClass } from "../../lib/variants.js";
+import { PageHeader } from "./page-header.js";
 function scrollParent(el) {
   let node = el?.parentElement ?? null;
   while (node) {
@@ -36,6 +35,8 @@ function PageContainerInset({ className, children, ...props }) {
 function PageContainerRoot({
   title,
   subtitle,
+  meta,
+  headerLoading,
   extra,
   footer,
   breadcrumb,
@@ -55,7 +56,6 @@ function PageContainerRoot({
 }) {
   const reveal = stickyFooter && footer != null && footerReveal === "onScroll";
   const { headerRef, revealed } = useFooterReveal(reveal);
-  const { t } = useTranslation();
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -74,44 +74,22 @@ function PageContainerRoot({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("header", { ref: headerRef, className: "ui-page-header", "data-layout": headerLayout, children: [
-          breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx(
-            "nav",
-            {
-              "aria-label": breadcrumbLabel ?? breadcrumbAriaLabel ?? t("navigation.breadcrumb.ariaLabel"),
-              className: "ui-breadcrumb",
-              children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: breadcrumb.map((item, i) => {
-                const isLast = i === breadcrumb.length - 1;
-                return /* @__PURE__ */ jsxs("li", { className: "ui-inline-xs", children: [
-                  item.to && !isLast ? /* @__PURE__ */ jsx(
-                    LinkComponent,
-                    {
-                      href: item.to,
-                      to: item.to,
-                      className: "hover:text-foreground hover:underline",
-                      children: item.label
-                    }
-                  ) : /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: isLast ? "text-foreground" : "",
-                      "aria-current": isLast ? "page" : void 0,
-                      children: item.label
-                    }
-                  ),
-                  !isLast && /* @__PURE__ */ jsx(ChevronRight, { className: "size-3", "aria-hidden": "true" })
-                ] }, i);
-              }) })
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "ui-page-header-row", children: [
-            /* @__PURE__ */ jsxs("div", { className: "ui-page-header-heading min-w-0", children: [
-              /* @__PURE__ */ jsx("h1", { className: "ui-page-title", children: title }),
-              subtitle && /* @__PURE__ */ jsx("p", { className: "ui-page-subtitle", children: subtitle })
-            ] }),
-            extra && /* @__PURE__ */ jsx("div", { className: "ui-page-header-extra", children: extra })
-          ] })
-        ] }),
+        /* @__PURE__ */ jsx(
+          PageHeader,
+          {
+            ref: headerRef,
+            title,
+            subtitle,
+            meta,
+            extra,
+            breadcrumb,
+            breadcrumbLabel,
+            breadcrumbAriaLabel,
+            linkComponent: LinkComponent,
+            layout: headerLayout,
+            loading: headerLoading
+          }
+        ),
         children != null && /* @__PURE__ */ jsx("div", { className: "ui-page-body", children }),
         footer && /* @__PURE__ */ jsx("footer", { className: "ui-page-footer", children: footer })
       ]

package/dist/components/layout/page-header.d.ts

@@ -0,0 +1,22 @@
+/**
+ * PageHeader — the canonical page title band (gh#255).
+ *
+ * This is the geometry `PageContainer` has always rendered, lifted into its own export so a
+ * consumer can mount it OUTSIDE a full page shell — a Sheet detail, a `MasterDetail` detail pane, a
+ * tab body, a nested route header — without re-authoring `.ui-page-header` CSS locally. There is
+ * exactly ONE implementation: `PageContainer` renders this component, so the two can never drift.
+ *
+ * The band owns: breadcrumbs (a named `<nav>` landmark with `aria-current="page"` on the leaf), the
+ * `<h1>` title, the subtitle/description, a status/meta slot, the `extra` action region, the
+ * responsive overflow arrangement (`layout`), and the pending state (`loading`). It owns no page
+ * chrome — padding, measure and body rhythm stay with `PageContainer`.
+ *
+ * DENIED / ERROR are deliberately NOT states of this component: a page the user may not see must
+ * not render its title, breadcrumb trail or actions at all (they leak the resource's existence and
+ * its name). That whole-surface contract belongs to `ErrorSurface`, which is the canonical public
+ * replacement — see `docs/CANONICAL-CONTRACTS.md`.
+ */
+import * as React from "react";
+import type { PageHeaderProp } from "../../props/components/layout.prop.js";
+export type { PageHeaderProp, PageHeaderProp as PageHeaderProps, } from "../../props/components/layout.prop.js";
+export declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProp & React.RefAttributes<HTMLElement>>;

package/dist/components/layout/page-header.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronRight } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+const PageHeader = React.forwardRef(function PageHeader2({
+  title,
+  subtitle,
+  meta,
+  extra,
+  breadcrumb,
+  breadcrumbLabel,
+  breadcrumbAriaLabel,
+  linkComponent: LinkComponent = "a",
+  layout = "stack",
+  loading = false,
+  className
+}, ref) {
+  const { t } = useTranslation();
+  return (
+    // `data-layout` is the only hook the header arrangement needs: `stack` (the default)
+    // matches no rule, so the historical geometry is untouched, while `responsive-inline`
+    // selects the compact-range rules that keep `extra` beside the title band (gh#231).
+    /* @__PURE__ */ jsxs(
+      "header",
+      {
+        ref,
+        className: cn("ui-page-header", className),
+        "data-layout": layout,
+        "aria-busy": loading ? "true" : void 0,
+        children: [
+          breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx(
+            "nav",
+            {
+              "aria-label": breadcrumbLabel ?? breadcrumbAriaLabel ?? t("navigation.breadcrumb.ariaLabel"),
+              className: "ui-breadcrumb",
+              children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: breadcrumb.map((item, i) => {
+                const isLast = i === breadcrumb.length - 1;
+                return /* @__PURE__ */ jsxs("li", { className: "ui-inline-xs", children: [
+                  item.to && !isLast ? /* @__PURE__ */ jsx(
+                    LinkComponent,
+                    {
+                      href: item.to,
+                      to: item.to,
+                      className: "hover:text-foreground hover:underline",
+                      children: item.label
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: isLast ? "text-foreground" : "",
+                      "aria-current": isLast ? "page" : void 0,
+                      children: item.label
+                    }
+                  ),
+                  !isLast && /* @__PURE__ */ jsx(ChevronRight, { className: "size-3", "aria-hidden": "true" })
+                ] }, i);
+              }) })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "ui-page-header-row", children: [
+            /* @__PURE__ */ jsxs("div", { className: "ui-page-header-heading min-w-0", children: [
+              loading ? /* @__PURE__ */ jsx("h1", { className: "ui-page-title ui-skeleton-block ui-page-title-placeholder", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("layout.pageHeader.loading") }) }) : meta != null ? /* @__PURE__ */ jsxs("div", { className: "ui-page-title-band", children: [
+                /* @__PURE__ */ jsx("h1", { className: "ui-page-title", children: title }),
+                /* @__PURE__ */ jsx("div", { className: "ui-page-header-meta", children: meta })
+              ] }) : /* @__PURE__ */ jsx("h1", { className: "ui-page-title", children: title }),
+              loading ? (
+                // Decorative only — the pending state is already announced once by the heading above,
+                // so a second live placeholder here would double-announce it.
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "ui-page-subtitle ui-skeleton-block ui-page-subtitle-placeholder",
+                    "aria-hidden": "true"
+                  }
+                )
+              ) : subtitle && /* @__PURE__ */ jsx("p", { className: "ui-page-subtitle", children: subtitle })
+            ] }),
+            extra && /* @__PURE__ */ jsx("div", { className: "ui-page-header-extra", children: extra })
+          ] })
+        ]
+      }
+    )
+  );
+});
+export {
+  PageHeader
+};

package/dist/components/navigation/filter-bar.d.ts

@@ -1,6 +1,6 @@
 import type { ToolbarGroupProp, ToolbarProp } from "../../props/components/navigation.prop.js";
-export type { FilterBarOverflowProp, ToolbarGroupProp, ToolbarGroupProp as ToolbarGroupProps, ToolbarGroupProp as FilterBarGroupProp, ToolbarGroupProp as FilterBarGroupProps, ToolbarProp, ToolbarProp as ToolbarProps, ToolbarProp as FilterBarProp, ToolbarProp as FilterBarProps, } from "../../props/components/navigation.prop.js";
-export declare function Toolbar({ onClear, hasActiveFilters, sticky, overflow, className, children, }: ToolbarProp): import("react").JSX.Element;
+export type { FilterBarChipProp, FilterBarChipProp as FilterBarChipProps, FilterBarOverflowProp, ToolbarGroupProp, ToolbarGroupProp as ToolbarGroupProps, ToolbarGroupProp as FilterBarGroupProp, ToolbarGroupProp as FilterBarGroupProps, ToolbarProp, ToolbarProp as ToolbarProps, ToolbarProp as FilterBarProp, ToolbarProp as FilterBarProps, } from "../../props/components/navigation.prop.js";
+export declare function Toolbar({ onClear, hasActiveFilters, sticky, overflow, search, chips, onChipRemove, resultCount, actions, className, children, }: ToolbarProp): import("react").JSX.Element;
 export declare function ToolbarGroup({ label, controlId, className, children }: ToolbarGroupProp): import("react").JSX.Element;
 /**
  * Canonical list-page filter strip.

package/dist/components/navigation/filter-bar.js

@@ -10,10 +10,16 @@ function Toolbar({
   hasActiveFilters = true,
   sticky = false,
   overflow = "wrap",
+  search,
+  chips,
+  onChipRemove,
+  resultCount,
+  actions,
   className,
   children
 }) {
   const { t } = useTranslation();
+  const hasChips = chips != null && chips.length > 0;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -22,11 +28,48 @@ function Toolbar({
       "data-overflow": overflow,
       className: cn("ui-toolbar", sticky && "ui-toolbar-sticky", className),
       children: [
+        search != null && // A region, not a bare child, so the search control gets ONE measure
+        // (--filter-bar-search-width) across every list page instead of whatever width the
+        // caller's control happened to have.
+        /* @__PURE__ */ jsx("div", { className: "ui-filter-bar-search", children: search }),
         children,
+        hasChips && // `group` (not a second toolbar) — a toolbar may own a group, and the chips are a labelled
+        // set of related controls rather than an independent toolbar competing for the same role.
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "group",
+            "aria-label": t("navigation.filterBar.appliedFilters"),
+            className: "ui-filter-bar-chips",
+            children: chips.map((chip) => /* @__PURE__ */ jsxs("span", { className: "ui-filter-bar-chip", children: [
+              /* @__PURE__ */ jsx("span", { className: "ui-filter-bar-chip-label", children: chip.label }),
+              (chip.onRemove || onChipRemove) && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "xs",
+                  className: "ui-filter-bar-chip-remove",
+                  "aria-label": t("navigation.filterBar.removeFilter", { label: chip.label }),
+                  onClick: () => {
+                    chip.onRemove?.();
+                    onChipRemove?.(chip.id);
+                  },
+                  children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+                }
+              )
+            ] }, chip.id))
+          }
+        ),
+        resultCount !== void 0 && // The whole reason this is a prop rather than caller markup: a sighted user SEES the table
+        // change, and a polite live region is what tells everyone else that filtering happened.
+        // The number is grouped by `Intl.NumberFormat` and the noun selected by CLDR plural rules
+        // for the active locale — never a hand-built "N items".
+        /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "ui-filter-bar-count", children: t("navigation.filterBar.resultCount", { count: resultCount }) }),
         onClear && hasActiveFilters && /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: onClear, className: "ui-toolbar-clear", children: [
           /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }),
           t("common.clearFilters")
-        ] })
+        ] }),
+        actions != null && /* @__PURE__ */ jsx("div", { className: "ui-filter-bar-actions", children: actions })
       ]
     }
   );

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

@@ -5,7 +5,7 @@ export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarLabel
 export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, } from "./navigation-menu.js";
 export { Steps } from "./steps.js";
 export { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./filter-bar.js";
-export type { FilterBarGroupProp, FilterBarGroupProps, FilterBarProp, FilterBarProps, ToolbarGroupProps, ToolbarProps, } from "./filter-bar.js";
+export type { FilterBarChipProp, FilterBarChipProps, FilterBarGroupProp, FilterBarGroupProps, FilterBarProp, FilterBarProps, ToolbarGroupProps, ToolbarProps, } from "./filter-bar.js";
 export { AppSettingPicker } from "./app-setting-picker.js";
 export type { AppSettingPickerProp, AppSettingPickerProps, AppSettingKind, } from "./app-setting-picker.js";
 export type { BreadcrumbItemProp as BreadcrumbItem } from "../../props/vocabulary/navigation.prop.js";

package/dist/i18n/messages/en.json

@@ -135,6 +135,9 @@
       "openNav": "Open navigation menu",
       "navLabel": "Menu"
     },
+    "pageHeader": {
+      "loading": "Loading page…"
+    },
     "authShell": {
       "brandLabel": "Brand",
       "mainLabel": "Main content",
@@ -227,6 +230,14 @@
     "toolbar": {
       "ariaLabel": "Filters"
     },
+    "filterBar": {
+      "appliedFilters": "Applied filters",
+      "removeFilter": "Remove filter {label}",
+      "resultCount": {
+        "one": "{count} result",
+        "other": "{count} results"
+      }
+    },
     "localePicker": {
       "ariaLabel": "Language"
     },

package/dist/i18n/messages/ja.json

@@ -135,6 +135,9 @@
       "openNav": "ナビゲーションメニューを開く",
       "navLabel": "メニュー"
     },
+    "pageHeader": {
+      "loading": "ページを読み込んでいます…"
+    },
     "authShell": {
       "brandLabel": "ブランド",
       "mainLabel": "メインコンテンツ",
@@ -227,6 +230,11 @@
     "toolbar": {
       "ariaLabel": "フィルター"
     },
+    "filterBar": {
+      "appliedFilters": "適用中のフィルター",
+      "removeFilter": "フィルター「{label}」を解除",
+      "resultCount": "{count} 件"
+    },
     "localePicker": {
       "ariaLabel": "言語"
     },

package/dist/i18n/messages/vi.json

@@ -135,6 +135,9 @@
       "openNav": "Mở menu điều hướng",
       "navLabel": "Menu"
     },
+    "pageHeader": {
+      "loading": "Đang tải trang…"
+    },
     "authShell": {
       "brandLabel": "Thương hiệu",
       "mainLabel": "Nội dung chính",
@@ -227,6 +230,11 @@
     "toolbar": {
       "ariaLabel": "Bộ lọc"
     },
+    "filterBar": {
+      "appliedFilters": "Bộ lọc đang áp dụng",
+      "removeFilter": "Bỏ bộ lọc {label}",
+      "resultCount": "{count} kết quả"
+    },
     "localePicker": {
       "ariaLabel": "Ngôn ngữ"
     },

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

@@ -42,6 +42,12 @@ export type AlertProp = React.HTMLAttributes<HTMLDivElement> & {
     className?: ClassNameProp;
     children?: ChildrenProp;
 };
+/**
+ * @see Banner — page-level Alert. `variant` is fixed to `"banner"` by the alias, so it is the one
+ * prop a Banner does not take; everything else (tone, icon, onDismiss, children) is Alert's
+ * contract verbatim. gh#255.
+ */
+export type BannerProp = Omit<AlertProp, "variant">;
 /** @see AlertTitle */
 export type AlertTitleProp = React.HTMLAttributes<HTMLParagraphElement> & {
     className?: ClassNameProp;

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

@@ -24,10 +24,55 @@ export type PageContainerPresetProp = "default" | "admin-collection";
  * fluid at the compact gutter.
  */
 export type PageContainerMeasureProp = "default" | "narrow" | "medium";
+/**
+ * @see PageHeader — the canonical page title band, extracted from PageContainer so a consumer can
+ * mount the SAME token-owned geometry outside a full page shell (a Sheet detail, a MasterDetail
+ * pane, a tab body) instead of re-authoring `.ui-page-header` CSS locally (gh#255).
+ */
+export type PageHeaderProp = {
+    title: TitleProp;
+    subtitle?: SubtitleProp;
+    /**
+     * Status / meta band rendered INLINE with the title (a `Badge` tone, an ID, a timestamp).
+     * Omitted → the title band emits its historical single-`<h1>` DOM, so no existing page moves.
+     */
+    meta?: ReactNode;
+    /** Trailing action region — buttons, a search field, an overflow menu. */
+    extra?: ExtraProp;
+    breadcrumb?: BreadcrumbProp;
+    /**
+     * Override the breadcrumb `<nav>` landmark's accessible name. Defaults to a localized
+     * "Breadcrumb". Needed when more than one header (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).
+     */
+    breadcrumbLabel?: string;
+    /** Kebab/DOM-style alias of `breadcrumbLabel` (same landmark-unique override). */
+    breadcrumbAriaLabel?: string;
+    linkComponent?: React.ElementType;
+    /**
+     * How the title band and `extra` share the header row below the 640px step. Defaults to
+     * `stack`. @see PageContainerHeaderLayoutProp
+     */
+    layout?: PageContainerHeaderLayoutProp;
+    /**
+     * Pending state for the title band while the page's own data resolves. Renders the title/subtitle
+     * /meta as `Skeleton` placeholders and marks the header `aria-busy`, keeping the `<h1>` in the
+     * document with an accessible name (an empty heading is an axe violation) so the page's heading
+     * outline never disappears mid-load. Breadcrumbs and `extra` are NOT skeletonised — they come
+     * from the route, not the record.
+     */
+    loading?: boolean;
+    className?: ClassNameProp;
+};
 /** @see PageContainer */
 export type PageContainerProp = {
     title: TitleProp;
     subtitle?: SubtitleProp;
+    /** Status / meta band rendered inline with the title. @see PageHeaderProp.meta */
+    meta?: ReactNode;
+    /** Skeletonise the title band while the page record loads. @see PageHeaderProp.loading */
+    headerLoading?: boolean;
     extra?: ExtraProp;
     footer?: FooterProp;
     breadcrumb?: BreadcrumbProp;
@@ -240,6 +285,14 @@ export type AuthShellProp = {
      *   so standalone, one-line requester and wrapped two-line requester states keep the same card
      *   position without truncating or inventing requester data. Pass AuthIdentity, Card and
      *   AuthFooter as direct children (an anchor may wrap AuthIdentity).
+     * - `"registration"` — the 360px sign-up measure with a 15px inline gutter at 390px (the same
+     *   page rhythm as `"login"`, so sign-in → sign-up never jumps on a phone). The ONLY preset whose
+     *   column is START-aligned: a registration card is the tallest surface in the hosted-identity
+     *   set (name · email · password · confirm · strength · consent · submit · providers), and a
+     *   vertically centred tall card overflows ABOVE the scroll origin on a short viewport, putting
+     *   its first field out of reach. It is also the only preset with a footer-clearance knob of its
+     *   own, so the legal/consent footer never sits flush against the submit button. Carries the full
+     *   password form and the pending-email confirmation state with no consumer geometry CSS.
      * - `"device-authorization"` — 380px card measure with a 5px inline page gutter at a 390px
      *   viewport (canonical device-grant artboard).
      * - `"context-selection"` — 25rem card measure on desktop/tablet, edge-to-edge on mobile, and a

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

@@ -7,10 +7,62 @@ import type { ChildrenProp, ClassNameProp, DisabledProp, HasActiveFiltersProp, I
  * bounded row that scrolls inline, so a wide filter set never pushes the list below the fold.
  */
 export type FilterBarOverflowProp = "wrap" | "scroll";
+/**
+ * One APPLIED filter, rendered as a removable chip under the control row (#258).
+ *
+ * The chip is the visible record of a filter that is already in effect — it is NOT the control that
+ * sets it. `label` is caller-localized text (the bar never interprets or formats domain values);
+ * omit `onRemove` for a chip the user may not lift (a scope locked by the route or by permission),
+ * and the chip renders as a static token with no dead button.
+ */
+export type FilterBarChipProp = {
+    /** Stable identity — also the argument passed back to {@link ToolbarProp.onChipRemove}. */
+    id: string;
+    /** Already-localized chip text, e.g. "状態: 未払い". */
+    label: string;
+    /**
+     * Per-chip removal. Omit for a chip the user cannot lift; the bar then renders no remove control
+     * rather than a disabled one, so nothing focusable is dead.
+     */
+    onRemove?: () => void;
+};
 /** @see Toolbar */
 export type ToolbarProp = {
     onClear?: OnClearFiltersProp;
     hasActiveFilters?: HasActiveFiltersProp;
+    /**
+     * The search control (#258). A slot, not a rendered input: the bar owns its MEASURE
+     * (`--filter-bar-search-width`) and its position at the START of the row, while the caller
+     * still chooses the real primitive (`SearchInput`, or a `Select showSearch` for scoped search)
+     * and owns its debounce and value. Passing the control as a child instead is what produced the
+     * inconsistent search widths the issue was filed against.
+     */
+    search?: ChildrenProp;
+    /**
+     * Applied filters as removable chips (#258). The bar owns the CHIP LIFECYCLE — chips render
+     * below the control row, each with an accessible remove control, and the row disappears entirely
+     * when the array is empty (never an empty reserved strip). It owns no state: removing a chip
+     * calls back and the caller re-renders the array.
+     */
+    chips?: readonly FilterBarChipProp[];
+    /**
+     * Called with the chip's `id` when its remove control is activated. Fires in addition to that
+     * chip's own `onRemove`, so a caller may handle removal per chip, centrally, or both.
+     */
+    onChipRemove?: (id: string) => void;
+    /**
+     * Number of records the current filters resolve to (#258). Rendered in a POLITE LIVE REGION and
+     * formatted with `Intl.NumberFormat` + CLDR plurals for the active locale — which is the point:
+     * a sighted user sees the table change, and this is what tells everyone else that filtering
+     * happened. Omit when the count is unknown or still loading.
+     */
+    resultCount?: number;
+    /**
+     * Trailing action region (#258) — export, column settings, a saved-view menu. Rendered AFTER the
+     * reset control, so "clear filters" never sits at the end of the row beside an unrelated primary
+     * action. The bar owns the ordering; the caller owns the controls.
+     */
+    actions?: ChildrenProp;
     /**
      * Pin the strip to the top of its scroll container while the list scrolls beneath it
      * (list-page filter bars, #197). Opt-in — default `false` keeps the toolbar quiet. Tune

package/dist/props/registry.d.ts

@@ -461,10 +461,35 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/layout.prop.ts";
         readonly vocabulary: readonly [];
     };
+    readonly PageHeaderProp: {
+        readonly group: "layout";
+        readonly file: "components/layout.prop.ts";
+        readonly vocabulary: readonly ["TitleProp", "SubtitleProp", "ExtraProp", "BreadcrumbProp", {
+            readonly field: "meta";
+            readonly local: true;
+            readonly reason: "Status/meta band rendered inline with the `<h1>` (a Badge tone, a record id, a timestamp). A free ReactNode slot, not a controlled value — the header never interprets what it holds.";
+        }, {
+            readonly field: "layout";
+            readonly local: true;
+            readonly reason: "Header ARRANGEMENT of the title band vs the extra slot below the 640px step (stack | responsive-inline) — the standalone spelling of PageContainer's `headerLayout`.";
+        }, {
+            readonly field: "loading";
+            readonly local: true;
+            readonly reason: "Pending state of the TITLE BAND only (skeleton title/subtitle + aria-busy), distinct from a page-wide DataState: breadcrumbs and actions come from the route and stay live while the record resolves.";
+        }];
+    };
     readonly PageContainerProp: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
         readonly vocabulary: readonly ["TitleProp", "SubtitleProp", "ExtraProp", "FooterProp", "BreadcrumbProp", "DensityProp", "PageContainerVariantProp", {
+            readonly field: "meta";
+            readonly local: true;
+            readonly reason: "Forwarded verbatim to PageHeader's `meta` slot — see PageHeaderProp.";
+        }, {
+            readonly field: "headerLoading";
+            readonly local: true;
+            readonly reason: "Forwarded to PageHeader's `loading`. Named for the BAND it skeletonises, so it can never be read as a page-wide loading flag (that is DataState's job).";
+        }, {
             readonly field: "headerLayout";
             readonly local: true;
             readonly reason: "Header ARRANGEMENT of the title band vs the extra slot below the 640px step (stack | responsive-inline) — orthogonal to PageContainerVariantProp, which selects the page shell layout.";
@@ -1350,6 +1375,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/feedback.prop.ts";
         readonly vocabulary: readonly ["AlertVariantProp", "ToneProp", "IconProp", "OnValueChangeProp", "ClassNameProp", "ChildrenProp"];
     };
+    readonly BannerProp: {
+        readonly group: "feedback";
+        readonly file: "components/feedback.prop.ts";
+        readonly vocabulary: readonly ["ToneProp", "IconProp", "OnValueChangeProp", "ClassNameProp", "ChildrenProp"];
+    };
     readonly AlertTitleProp: {
         readonly group: "feedback";
         readonly file: "components/feedback.prop.ts";
@@ -1383,7 +1413,36 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly ToolbarProp: {
         readonly group: "navigation";
         readonly file: "components/navigation.prop.ts";
-        readonly vocabulary: readonly ["OnClearFiltersProp", "HasActiveFiltersProp", "StickyProp", "ClassNameProp", "ChildrenProp"];
+        readonly vocabulary: readonly ["OnClearFiltersProp", "HasActiveFiltersProp", "StickyProp", "ClassNameProp", "ChildrenProp", {
+            readonly field: "search";
+            readonly local: true;
+            readonly reason: "SLOT for the caller's own search control, positioned at the start of the row and measured by --filter-bar-search-width. Not a value/onValueChange pair: the bar owns the search's PLACE and WIDTH, never its state (gh#258).";
+        }, {
+            readonly field: "chips";
+            readonly local: true;
+            readonly reason: "APPLIED filters as removable chips — the visible record of filters already in effect, distinct from the controls that set them. A bar-specific shape (id/label/onRemove), not a shared vocabulary type (gh#258).";
+        }, {
+            readonly field: "onChipRemove";
+            readonly local: true;
+            readonly reason: "Chip-removal callback keyed by chip id. Not `onValueChange`: it reports ONE lifted filter rather than the bar's whole value, which the bar deliberately does not hold (gh#258).";
+        }, {
+            readonly field: "resultCount";
+            readonly local: true;
+            readonly reason: "Number of records the current filters resolve to, announced in a polite live region and formatted via Intl.NumberFormat + CLDR plurals. Presentational output, not a controlled value (gh#258).";
+        }, {
+            readonly field: "actions";
+            readonly local: true;
+            readonly reason: "Trailing action SLOT (export, column settings, saved views), ordered AFTER the reset control by the bar so `clear filters` never sits beside an unrelated primary action (gh#258).";
+        }];
+    };
+    readonly FilterBarChipProp: {
+        readonly group: "navigation";
+        readonly file: "components/navigation.prop.ts";
+        readonly vocabulary: readonly ["IdProp", "LabelProp", {
+            readonly field: "onRemove";
+            readonly local: true;
+            readonly reason: "Per-chip removal. Omitting it is meaningful — the chip renders with NO remove control (a filter the user may not lift), rather than a disabled button that is a dead tab stop (gh#258).";
+        }];
     };
     readonly FilterBarOverflowProp: {
         readonly group: "navigation";

package/dist/props/registry.js

@@ -465,6 +465,31 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/layout.prop.ts",
     vocabulary: []
   },
+  PageHeaderProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: [
+      "TitleProp",
+      "SubtitleProp",
+      "ExtraProp",
+      "BreadcrumbProp",
+      {
+        field: "meta",
+        local: true,
+        reason: "Status/meta band rendered inline with the `<h1>` (a Badge tone, a record id, a timestamp). A free ReactNode slot, not a controlled value \u2014 the header never interprets what it holds."
+      },
+      {
+        field: "layout",
+        local: true,
+        reason: "Header ARRANGEMENT of the title band vs the extra slot below the 640px step (stack | responsive-inline) \u2014 the standalone spelling of PageContainer's `headerLayout`."
+      },
+      {
+        field: "loading",
+        local: true,
+        reason: "Pending state of the TITLE BAND only (skeleton title/subtitle + aria-busy), distinct from a page-wide DataState: breadcrumbs and actions come from the route and stay live while the record resolves."
+      }
+    ]
+  },
   PageContainerProp: {
     group: "layout",
     file: "components/layout.prop.ts",
@@ -476,6 +501,16 @@ const COMPONENT_PROP_REGISTRY = {
       "BreadcrumbProp",
       "DensityProp",
       "PageContainerVariantProp",
+      {
+        field: "meta",
+        local: true,
+        reason: "Forwarded verbatim to PageHeader's `meta` slot \u2014 see PageHeaderProp."
+      },
+      {
+        field: "headerLoading",
+        local: true,
+        reason: "Forwarded to PageHeader's `loading`. Named for the BAND it skeletonises, so it can never be read as a page-wide loading flag (that is DataState's job)."
+      },
       {
         field: "headerLayout",
         local: true,
@@ -1483,6 +1518,13 @@ const COMPONENT_PROP_REGISTRY = {
       "ChildrenProp"
     ]
   },
+  BannerProp: {
+    group: "feedback",
+    file: "components/feedback.prop.ts",
+    // `Omit<AlertProp, "variant">` — the alias fixes the one prop it drops, so it inherits Alert's
+    // vocabulary exactly. Listing it again here is what keeps the guard honest if Alert's API moves.
+    vocabulary: ["ToneProp", "IconProp", "OnValueChangeProp", "ClassNameProp", "ChildrenProp"]
+  },
   AlertTitleProp: {
     group: "feedback",
     file: "components/feedback.prop.ts",
@@ -1513,7 +1555,45 @@ const COMPONENT_PROP_REGISTRY = {
       "HasActiveFiltersProp",
       "StickyProp",
       "ClassNameProp",
-      "ChildrenProp"
+      "ChildrenProp",
+      {
+        field: "search",
+        local: true,
+        reason: "SLOT for the caller's own search control, positioned at the start of the row and measured by --filter-bar-search-width. Not a value/onValueChange pair: the bar owns the search's PLACE and WIDTH, never its state (gh#258)."
+      },
+      {
+        field: "chips",
+        local: true,
+        reason: "APPLIED filters as removable chips \u2014 the visible record of filters already in effect, distinct from the controls that set them. A bar-specific shape (id/label/onRemove), not a shared vocabulary type (gh#258)."
+      },
+      {
+        field: "onChipRemove",
+        local: true,
+        reason: "Chip-removal callback keyed by chip id. Not `onValueChange`: it reports ONE lifted filter rather than the bar's whole value, which the bar deliberately does not hold (gh#258)."
+      },
+      {
+        field: "resultCount",
+        local: true,
+        reason: "Number of records the current filters resolve to, announced in a polite live region and formatted via Intl.NumberFormat + CLDR plurals. Presentational output, not a controlled value (gh#258)."
+      },
+      {
+        field: "actions",
+        local: true,
+        reason: "Trailing action SLOT (export, column settings, saved views), ordered AFTER the reset control by the bar so `clear filters` never sits beside an unrelated primary action (gh#258)."
+      }
+    ]
+  },
+  FilterBarChipProp: {
+    group: "navigation",
+    file: "components/navigation.prop.ts",
+    vocabulary: [
+      "IdProp",
+      "LabelProp",
+      {
+        field: "onRemove",
+        local: true,
+        reason: "Per-chip removal. Omitting it is meaningful \u2014 the chip renders with NO remove control (a filter the user may not lift), rather than a disabled button that is a dead tab stop (gh#258)."
+      }
     ]
   },
   FilterBarOverflowProp: {

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

@@ -54,8 +54,16 @@ export type BreakpointProp = "sm" | "md" | "lg" | "xl";
 export type ConfirmVariantProp = "default" | "destructive";
 /** Semantic color/status intent. */
 export type ToneProp = "default" | "success" | "warning" | "destructive" | "info" | "muted" | "neutral";
-/** Inline Alert visual treatment. */
-export type AlertVariantProp = "default";
+/**
+ * Alert visual treatment.
+ *
+ * `"default"` is the inset, rounded, fully-bordered INLINE alert that sits inside a page body.
+ * `"banner"` is the page-level strip the `Banner` alias ships (gh#255): square, edge-to-edge, ruled
+ * on the block-end edge only, so it reads as page chrome above the content rather than as a card
+ * inside it. Both share one implementation, one tone scale and one dismiss/actions contract —
+ * `banner` re-measures the box through `--banner-*` tokens and changes nothing else.
+ */
+export type AlertVariantProp = "default" | "banner";
 /** Sort direction for table columns. */
 export type SortDirectionProp = "asc" | "desc";
 /** Table column text alignment. */

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

@@ -45,10 +45,13 @@ export type ErrorSurfaceStatusProp = 403 | 404 | 500 | 503;
  * standalone and requester flows; `"device-authorization"` is the 380px device-grant measure with
  * a 5px mobile inline gutter; `"context-selection"` is the 25rem organisation/context picker
  * measure that goes edge-to-edge on mobile; `"account-recovery"` is the 432px SCR-008 measure
- * shared by the password-recovery and sign-in MFA challenge panels (15px mobile inline gutter).
+ * shared by the password-recovery and sign-in MFA challenge panels (15px mobile inline gutter);
+ * `"registration"` is the 360px sign-up measure — the only START-aligned preset, because a
+ * registration card is the tallest surface in the set and a centred tall card overflows above the
+ * scroll origin, and the only one with its own footer-clearance knob.
  * Orthogonal to AuthShell's `variant` (which owns control density and heading size) — combine them.
  */
-export type AuthShellPresetProp = "default" | "login" | "device-authorization" | "context-selection" | "account-recovery";
+export type AuthShellPresetProp = "default" | "login" | "registration" | "device-authorization" | "context-selection" | "account-recovery";
 /** Shared gap between layout children; components may document subsets. */
 export type GapProp = "xs" | "sm" | "md" | "lg" | "xl";
 /** DataTable row density subset. */

package/dist/styles/alert-layout.css

@@ -51,6 +51,42 @@
     padding-inline-end: calc(var(--alert-space-inset) + var(--space-8));
   }
 
+  /*
+   * BANNER variant (gh#255) — the same Alert, re-measured as page chrome: edge-to-edge, square,
+   * ruled only on the block-end edge so it separates itself from the content BELOW it. Declared
+   * after the base box (equal specificity → source order wins) and it touches geometry only, so
+   * every tone, the icon treatment, the actions grid and the dismiss control are inherited
+   * unchanged from the inline alert above.
+   */
+  [data-slot="alert"][data-variant="banner"] {
+    border-radius: var(--banner-radius);
+    border-width: var(--banner-border-width);
+    border-block-end-width: var(--banner-border-block-end-width);
+    padding: var(--banner-space-block) var(--banner-space-inline);
+  }
+
+  /* The dismissible reserve is re-derived from the BANNER inset — reusing the inline-alert
+   * calc would leave a ✕-sized hole on a strip whose own inset is half as deep. */
+  [data-slot="alert"][data-variant="banner"][data-dismissible] {
+    padding-inline-end: calc(var(--banner-space-inline) + var(--space-8));
+  }
+
+  [data-slot="alert"][data-variant="banner"] > [data-slot="alert-dismiss"] {
+    top: var(--banner-dismiss-space-offset);
+    inset-inline-end: var(--banner-dismiss-space-offset);
+  }
+
+  /* The compact page gutter. `.ui-page-container` steps `--space-page-active-x` down at this same
+   * breakpoint, and a banner mounted ABOVE the container (the normal case — page/app chrome) does
+   * not inherit that, so without this rule its text would sit 8px outside the page title at 390px.
+   * Bound to its own `--banner-space-inline-compact` knob rather than a literal, so a service
+   * retunes the mobile inset the same way it retunes the desktop one. */
+  @media (max-width: 720px) {
+    [data-slot="alert"][data-variant="banner"] {
+      --banner-space-inline: var(--banner-space-inline-compact);
+    }
+  }
+
   [data-slot="alert-icon"] {
     width: 1.25rem;
     height: 1.25rem;

package/dist/styles/layout.css

@@ -529,6 +529,41 @@
     overflow-wrap: anywhere;
   }
 
+  /* Title + `meta` share one baseline-aligned band (gh#255). The band only exists when `meta` is
+   * passed, so a header without it keeps its historical bare-`<h1>` DOM. `wrap` is what keeps a
+   * long JA/VI title and a status Badge legible at 390px instead of squeezing the title column. */
+  .ui-page-title-band {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--page-header-meta-gap);
+    min-inline-size: 0;
+  }
+
+  .ui-page-header-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--page-header-meta-gap);
+    min-inline-size: 0;
+  }
+
+  /* `loading` placeholders — the real `<h1>`/`<p>` wearing the shared `.ui-skeleton-block` skin, so
+   * the pending band occupies the same rhythm the settled band will. `max-inline-size: 100%` keeps
+   * them inside a 390px column; the block size replaces the line box the (sr-only) text no longer
+   * fills. */
+  .ui-page-title-placeholder {
+    inline-size: var(--page-title-placeholder-measure);
+    max-inline-size: 100%;
+    min-block-size: var(--page-title-placeholder-block-size);
+  }
+
+  .ui-page-subtitle-placeholder {
+    inline-size: var(--page-subtitle-placeholder-measure);
+    max-inline-size: 100%;
+    min-block-size: var(--page-subtitle-placeholder-block-size);
+  }
+
   /* Compact viewports use a responsive type step, not compact density: body/control text and
    * touch targets remain readable while page chrome stops competing with primary actions. A
    * single Flex action group must wrap even when the consumer omitted `wrap`, because clipping
@@ -918,6 +953,84 @@
     font-size: var(--filter-label-font-size);
   }
 
+  /* ── FilterBar typed model (#258) ──────────────────────────────────────────────────────────
+   * Every rule below is scoped to a region the bar only emits when its prop is passed, so a bar
+   * built the old way (children + onClear) matches none of them and is geometrically untouched.
+   *
+   * SEARCH — full-width while the strip is stacked (a bounded search box on a 390px screen wastes
+   * the row), then one shared token-owned measure from the 640px step up. This single measure is
+   * what the issue was filed against: as a plain child, every page picked its own width. */
+  .ui-filter-bar-search {
+    width: 100%;
+    min-width: 0;
+  }
+
+  @media (min-width: 640px) {
+    .ui-filter-bar-search {
+      width: var(--filter-bar-search-width);
+      max-width: 100%;
+      flex: 0 0 auto;
+    }
+  }
+
+  /* CHIPS — always their own full-width line. Applied filters are a record of state, not another
+   * control in the row; wrapping them in beside the pickers makes both harder to scan. */
+  .ui-filter-bar-chips {
+    display: flex;
+    width: 100%;
+    flex-basis: 100%;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--filter-bar-chip-row-gap);
+    min-width: 0;
+  }
+
+  .ui-filter-bar-chip {
+    display: inline-flex;
+    max-width: 100%;
+    align-items: center;
+    gap: var(--filter-bar-chip-gap);
+    padding: var(--filter-bar-chip-padding-block) var(--filter-bar-chip-padding-inline);
+    border-radius: var(--filter-bar-chip-radius);
+    background: hsl(var(--filter-bar-chip-background, var(--muted)));
+    color: hsl(var(--filter-bar-chip-foreground, var(--muted-foreground)));
+    font-size: var(--filter-bar-chip-font-size);
+  }
+
+  /* A long JA/VI chip value wraps inside the chip rather than pushing the row into a horizontal
+   * scroll — the remove control must stay reachable at 390px. */
+  .ui-filter-bar-chip-label {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .ui-filter-bar-chip-remove {
+    flex: none;
+  }
+
+  .ui-filter-bar-count {
+    color: hsl(var(--filter-bar-count-foreground, var(--muted-foreground)));
+    font-size: var(--filter-bar-count-font-size);
+    /* The count is a number that changes in place — tabular figures stop the row from twitching
+     * as it goes 9 → 10 → 100. */
+    font-variant-numeric: tabular-nums;
+  }
+
+  .ui-filter-bar-actions {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-inline-sm);
+  }
+
+  @media (min-width: 640px) {
+    .ui-filter-bar-actions {
+      width: auto;
+      flex: 0 0 auto;
+    }
+  }
+
   /* Toolbar/FilterBar `overflow="scroll"` (#216) — one bounded row that scrolls INLINE instead of
    * wrapping onto extra rows. Below 640px the strip still stacks (the `wrap` base rules above own
    * that): a 390px viewport must never hide a filter behind a horizontal scroll it cannot see.

package/dist/styles/shell-layout.css

@@ -212,6 +212,30 @@
     --auth-shell-main-padding: var(--auth-shell-recovery-main-padding);
   }
 
+  /* Registration preset (gh#256) — the sign-up measure. `flex-start` is the load-bearing line: a
+   * registration card is the tallest surface in the hosted-identity set, and a vertically CENTRED
+   * tall card overflows ABOVE the scroll origin on a short viewport, putting its first field out of
+   * reach. Start-aligned, the block-start inset is ordinary page padding the user scrolls past, and
+   * the block-end inset is the footer clearance the form keeps at the end of a long scroll. */
+  .ui-auth-shell[data-preset="registration"] {
+    --auth-shell-card-max-width: var(--auth-shell-registration-card-max-width);
+    --auth-shell-main-align: flex-start;
+    --auth-shell-main-padding: var(--auth-shell-registration-main-padding-block-start)
+      var(--auth-shell-registration-main-padding-inline)
+      var(--auth-shell-registration-main-padding-block-end);
+    --auth-shell-card-stack-gap: var(--auth-shell-registration-card-stack-gap);
+  }
+
+  /* Fixed identity track — the mechanism `login` proved (gh#237), applied to the identity block
+   * wherever it sits in the column rather than through a grid row, so the preset does not constrain
+   * how many sections the page stacks. Content aligns to the slot END, so absent / one-line /
+   * wrapped two-line identity copy changes only the empty space ABOVE it and never moves the card
+   * off its canonical anchor. */
+  .ui-auth-shell[data-preset="registration"] .ui-auth-shell-card > .ui-auth-identity {
+    block-size: var(--auth-shell-registration-identity-slot-block-size);
+    justify-content: flex-end;
+  }
+
   .ui-auth-identity {
     display: flex;
     flex-direction: column;
@@ -391,6 +415,16 @@
     .ui-auth-shell[data-preset="account-recovery"] {
       --auth-shell-main-padding: var(--auth-shell-recovery-main-padding-mobile);
     }
+
+    /* registration = 15px inline at 390 (card x=15, width=360 — the same page rhythm as Login, so
+     * sign-in → sign-up never jumps on a phone). The block insets tighten but the footer clearance
+     * stays deliberately larger than the block-start inset: at 390 the form is at its tallest and
+     * the consent/legal footer must not sit flush against the submit button. */
+    .ui-auth-shell[data-preset="registration"] {
+      --auth-shell-main-padding: var(--auth-shell-registration-main-padding-block-start-mobile)
+        var(--auth-shell-registration-main-padding-inline-mobile)
+        var(--auth-shell-registration-main-padding-block-end-mobile);
+    }
   }
 
   /*

package/dist/tokens/components/feedback.css

@@ -29,6 +29,26 @@
    * (a brand's success-bg/-border are often more present than the faint 5%/30% default). */
   --alert-bg-alpha: 0.05;
   --alert-border-alpha: 0.3;
+  /* BANNER — the page-level Alert treatment (gh#255). Every constant a service would want to
+   * match to its page grid is a knob (rule #45): a banner that must keep the app's rounded card
+   * language sets --banner-radius, one that rules its top edge too sets --banner-border-width.
+   * The inline inset tracks the live page gutter, so a banner mounted above a PageContainer lines
+   * its text up with the page title instead of sitting at a second, unrelated margin. */
+  --banner-radius: 0;
+  --banner-border-width: 0;
+  --banner-border-block-end-width: 1px;
+  --banner-space-block: var(--space-3);
+  /* Inline inset tracks the page gutter so a banner's text lines up with the page title.
+   * `--space-page-active-x` steps down to the compact gutter on `.ui-page-container` only, and
+   * custom properties inherit — so a banner rendered INSIDE the container picks the compact value
+   * up for free, while the normal case (a banner mounted ABOVE the container, or in AppShell) would
+   * keep the desktop gutter and sit 8px out at 390px. The compact step below is what actually keeps
+   * the two aligned; retune it rather than hard-coding a mobile inset at the call site. */
+  --banner-space-inline: var(--space-page-active-x);
+  --banner-space-inline-compact: var(--space-page-compact-x);
+  /* Dismiss offset is measured from the banner's own (shorter) block inset, so the ✕ stays
+   * optically centred on a one-line strip instead of floating at the inline-alert offset. */
+  --banner-dismiss-space-offset: var(--space-2);
   /* Brand glow layer for the raised dialog/sheet panel — invisible no-op at rest (rule #44).
    * Paired AFTER --shadow-lg in the surface box-shadow so a service can wash the overlay with the
    * global glow, e.g. --dialog-content-glow: var(--shadow-glow), with no markup change. */

package/dist/tokens/components/navigation.css

@@ -55,4 +55,30 @@
    * scrollbar never overlaps the controls. Rule #45 — a service theme retunes it to its grid
    * (0 on an overlay-scrollbar platform). */
   --filter-bar-scroll-padding-y: var(--space-1);
+
+  /* FilterBar typed model (#258) — the search / chip / result-count regions the bar now OWNS, so a
+   * list page never re-decides them. Every constant is a knob (rule #45): a service matches its own
+   * grid by retuning these once instead of per page.
+   *
+   * Search MEASURE — the whole point of the `search` slot. Below the 640px step the control is
+   * full-width (a bounded search box on a 390px screen wastes the row), so this binds only at and
+   * above it. 18rem = 288px: comfortable for a JA/VI query without crowding the filter groups. */
+  --filter-bar-search-width: 18rem;
+
+  /* Applied-filter chips. */
+  --filter-bar-chip-gap: var(--space-inline-xs);
+  --filter-bar-chip-row-gap: var(--space-inline-xs);
+  --filter-bar-chip-padding-inline: var(--space-2);
+  --filter-bar-chip-padding-block: var(--space-1);
+  --filter-bar-chip-radius: var(--radius-sm);
+  --filter-bar-chip-font-size: var(--font-size-xs);
+  /* Role-mirror knobs (docs/TOKENS.md) — `initial` at :root so --muted / --muted-foreground
+   * re-resolve at the CALL SITE under a scoped [data-tenant]/.dark theme. Binding a role var here
+   * would freeze the chip at the :root palette and a tenant override would never reach it. */
+  --filter-bar-chip-background: initial;
+  --filter-bar-chip-foreground: initial;
+
+  /* Result-count live region. */
+  --filter-bar-count-font-size: var(--font-size-xs);
+  --filter-bar-count-foreground: initial;
 }

package/dist/tokens/components/shell.css

@@ -201,6 +201,43 @@
   --auth-shell-recovery-main-padding: 1rem;
   --auth-shell-recovery-main-padding-mobile: 0.9375rem;
 
+  /* Registration preset (gh#256) — the canonical sign-up measure. Two things make it structurally
+   * different from every preset above, and both are the reason it could not be expressed by
+   * re-using `login`:
+   *
+   *  1. LONG-FORM SCROLLING. A registration card is the tallest surface in the hosted-identity set
+   *     (name · email · password · confirm · strength meter · consent · submit · provider row), and
+   *     a vertically CENTRED tall card clips its own top on a short viewport — the top overflows
+   *     above the scroll origin and becomes unreachable. So the column is start-aligned and the
+   *     block-start inset becomes ordinary page padding the user can scroll past.
+   *  2. FOOTER CLEARANCE. The legal/consent footer must never be flush against the submit button
+   *     at the end of a long scroll, so the block-end inset is a knob of its own rather than
+   *     mirroring the block-start one.
+   *
+   * The 360px form measure and the 15px mobile inline gutter match the canonical Login flow exactly
+   * (22.5rem card, x=15 at 390 ⇒ width=360), so a user moving sign-in → sign-up on a phone never
+   * sees the surface jump. */
+  --auth-shell-registration-card-max-width: 22.5rem;
+  /* Block-start offsets are DERIVED from the canonical SCR-002 artboard, not chosen: the card
+   * anchors at y=284 (1440x900) and y=274 (390x844), and the column is
+   *   card y = padding-block-start + identity slot + stack gap
+   * so 284 - 112 - 20 = 152px (9.5rem) and 274 - 112 - 20 = 142px (8.875rem). Like every canonical
+   * screen in this family the page passes NO brand bar (the mark lives INSIDE the column as
+   * AuthIdentity), so `main` starts at the viewport top and the offset is the whole anchor. */
+  --auth-shell-registration-main-padding-block-start: 9.5rem;
+  --auth-shell-registration-main-padding-block-start-mobile: 8.875rem;
+  --auth-shell-registration-main-padding-inline: 1rem;
+  --auth-shell-registration-main-padding-inline-mobile: 0.9375rem;
+  /* Footer clearance — the gap the legal footer keeps below the end of a long form. */
+  --auth-shell-registration-main-padding-block-end: 3rem;
+  --auth-shell-registration-main-padding-block-end-mobile: 2rem;
+  --auth-shell-registration-card-stack-gap: 1.25rem;
+  /* Fixed identity track, the same 112px `login` proved (gh#237). Without it the card anchor moves
+   * with the title/requester line count — measured here at 82.69px for one wrapped requester — so
+   * the canonical y above would hold for exactly one copy length and drift for every other. The
+   * slot absorbs absent / one-line / two-line identity content instead. */
+  --auth-shell-registration-identity-slot-block-size: 7rem;
+
   /* Labelled auth divider geometry. */
   --auth-shell-divider-gap: 0.625rem;
   --auth-shell-divider-label-font-size: 0.6875rem;

package/dist/tokens/semantic/layout.css

@@ -83,6 +83,19 @@
    * page moves. 11rem = 176px, i.e. the control ends flush with the compact page gutter. */
   --page-header-extra-measure: 11rem; /* 176px */
 
+  /* Inline gap between the `<h1>` and the PageHeader `meta` slot (a status Badge, a record ID) when
+   * they share the title band (gh#255). Only consumed when `meta` is passed — a header without it
+   * emits no band wrapper at all, so no existing page moves. */
+  --page-header-meta-gap: var(--space-inline-sm);
+
+  /* PageHeader `loading` placeholders (gh#255). The title/subtitle elements wear the shared
+   * `.ui-skeleton-block` skin, so they need only a MEASURE and a block size — a service retunes the
+   * pending band's proportions here instead of per page. */
+  --page-title-placeholder-measure: 14rem; /* 224px */
+  --page-title-placeholder-block-size: 1.5em;
+  --page-subtitle-placeholder-measure: 22rem; /* 352px */
+  --page-subtitle-placeholder-block-size: 1.25em;
+
   /* Bounded page MEASURE (gh#245 / gh#247) — the shared inline cap applied to the page HEADER and
    * BODY together, so the header `extra` action ends on the same edge as the body surface (the
    * `variant="narrow"` complaint: it caps only `.ui-page-body`, leaving the header action out at

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "18.6.0",
-  "godxUiMcp": "18.6.0",
+  "version": "18.7.0",
+  "godxUiMcp": "18.7.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "pnpm": {