@godxjp/ui 18.6.0 → 18.8.0

package/dist/components/ui/input-otp.js

@@ -4,11 +4,12 @@ import * as React from "react";
 import { OTPInput, OTPInputContext } from "input-otp";
 import { Minus } from "lucide-react";
 import { cn } from "../../lib/utils.js";
-const InputOTP = React.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
+const InputOTP = React.forwardRef(({ className, containerClassName, align, ...props }, ref) => /* @__PURE__ */ jsx(
   OTPInput,
   {
     ref,
     "data-slot": "input-otp",
+    "data-align": align && align !== "start" ? align : void 0,
     containerClassName: cn("ui-otp-container", containerClassName),
     className: cn("ui-otp-input", className),
     ...props

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

@@ -146,8 +146,8 @@ export declare const EMAIL_GEOMETRY_SOURCE: {
     readonly "--email-heading-font-size": "17px";
     readonly "--email-heading-line-height": "1.7";
     readonly "--email-heading-font-weight": "500";
-    readonly "--email-cta-height": "36px";
-    readonly "--email-cta-line-height": "36px";
+    readonly "--email-cta-height": "44px";
+    readonly "--email-cta-line-height": "44px";
     readonly "--email-cta-padding-x": "16px";
     readonly "--email-cta-radius": "6px";
     readonly "--email-cta-font-size": "14px";

package/dist/email/tokens.generated.js

@@ -136,8 +136,8 @@ const EMAIL_GEOMETRY_SOURCE = {
   "--email-heading-font-size": "17px",
   "--email-heading-line-height": "1.7",
   "--email-heading-font-weight": "500",
-  "--email-cta-height": "36px",
-  "--email-cta-line-height": "36px",
+  "--email-cta-height": "44px",
+  "--email-cta-line-height": "44px",
   "--email-cta-padding-x": "16px",
   "--email-cta-radius": "6px",
   "--email-cta-font-size": "14px",

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/data-display.prop.d.ts

@@ -62,9 +62,25 @@ export type DescriptionsItemProp = {
  */
 export type AvatarProp = React.ComponentPropsWithoutRef<"span"> & {
     shape?: AvatarShapeProp;
+    appearance?: AvatarAppearanceProp;
     className?: ClassNameProp;
     children?: ChildrenProp;
 };
+/**
+ * Avatar fill treatment.
+ *
+ * - `"default"` — the identity fill: `--muted` for a person, the solid brand mark for
+ *   `shape="square"`.
+ * - `"tinted"` — the **capability medallion**: a soft role wash behind a role-coloured glyph.
+ *   This is the plate a capability/feature icon sits on (`shape="square" appearance="tinted"` for
+ *   the canonical rounded square). It exists because the medallion is a composition — `Avatar` +
+ *   a Lucide glyph, per docs/COMPOSITION-VS-COMPONENT.md — but its *tint* was not reachable from
+ *   a token, so consumers were re-deriving `hsl(var(--primary) / 0.1)` in page CSS or giving up
+ *   and rendering a bare glyph. Retune with `--avatar-tinted-*`.
+ *
+ * @see Avatar
+ */
+export type AvatarAppearanceProp = "default" | "tinted";
 /** @see Badge */
 export type BadgeProp = {
     variant?: "default" | "secondary" | "outline";

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

@@ -16,6 +16,13 @@ export type InputOTPGroupAppearanceProp = "slots" | "grouped";
 export type InputOTPGroupProp = React.HTMLAttributes<HTMLDivElement> & {
     appearance?: InputOTPGroupAppearanceProp;
 };
+/**
+ * Main-axis alignment of the whole code row (groups + separators) inside its container.
+ * `start` is the historical default. A centred challenge is the common auth case and used to
+ * force every consumer to wrap `.ui-otp-container` in their own flex-centring div.
+ * @see InputOTP
+ */
+export type InputOTPAlignProp = "start" | "center" | "end";
 /** @see Input */
 export type InputProp = React.InputHTMLAttributes<HTMLInputElement> & {
     /** Show an inline ✕ that clears the field while it holds text (default false). */

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
@@ -92,9 +144,18 @@ export type StepsProp = {
     type?: "default" | "dot" | "inline";
     size?: "md" | "sm";
     titlePlacement?: "horizontal" | "vertical";
+    /**
+     * The glyph between inline steps (`type="inline"` only). `chevron` (default, `›`) is the
+     * breadcrumb-flavoured original. `arrow` (`→`) is the canonical hosted-identity progression
+     * marker: a chevron reads as "drill into", an arrow reads as "then" — which is what a step row
+     * means. Ignored by every other `type`.
+     */
+    separator?: StepsSeparatorProp;
     onValueChange?: (value: number) => void;
     className?: ClassNameProp;
 };
+/** @see Steps — inline separator glyph. */
+export type StepsSeparatorProp = "chevron" | "arrow";
 /** Tab pane — Ant Design `items` entry. */
 export type TabItemProp = {
     value: string;

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.";
@@ -1038,6 +1063,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-display.prop.ts";
         readonly vocabulary: readonly ["AvatarShapeProp", "ChildrenProp", "ClassNameProp"];
     };
+    readonly AvatarAppearanceProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly [];
+    };
     readonly BadgeProp: {
         readonly group: "data-display";
         readonly file: "components/data-display.prop.ts";
@@ -1350,6 +1380,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 +1418,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";
@@ -1415,6 +1479,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-entry.prop.ts";
         readonly vocabulary: readonly [];
     };
+    readonly InputOTPAlignProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly [];
+    };
     readonly StepItemProp: {
         readonly group: "navigation";
         readonly file: "components/navigation.prop.ts";
@@ -1425,6 +1494,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/navigation.prop.ts";
         readonly vocabulary: readonly [];
     };
+    readonly StepsSeparatorProp: {
+        readonly group: "navigation";
+        readonly file: "components/navigation.prop.ts";
+        readonly vocabulary: readonly [];
+    };
     readonly TabsProp: {
         readonly group: "navigation";
         readonly file: "components/navigation.prop.ts";

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,
@@ -1189,6 +1224,11 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/data-display.prop.ts",
     vocabulary: ["AvatarShapeProp", "ChildrenProp", "ClassNameProp"]
   },
+  AvatarAppearanceProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: []
+  },
   BadgeProp: {
     group: "data-display",
     file: "components/data-display.prop.ts",
@@ -1483,6 +1523,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 +1560,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: {
@@ -1546,12 +1631,22 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/data-entry.prop.ts",
     vocabulary: []
   },
+  InputOTPAlignProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: []
+  },
   StepItemProp: {
     group: "navigation",
     file: "components/navigation.prop.ts",
     vocabulary: ["TitleProp", "SubtitleProp", "DescriptionProp", "IconProp", "DisabledProp"]
   },
   StepStatusProp: { group: "navigation", file: "components/navigation.prop.ts", vocabulary: [] },
+  StepsSeparatorProp: {
+    group: "navigation",
+    file: "components/navigation.prop.ts",
+    vocabulary: []
+  },
   TabsProp: {
     group: "navigation",
     file: "components/navigation.prop.ts",

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. */