@godxjp/ui 18.5.0 → 18.6.0

package/dist/i18n/messages/en.json

@@ -150,6 +150,14 @@
       "version": "Version {version}",
       "effectiveDate": "Effective {date}"
     },
+    "errorSurface": {
+      "statusLabel": "HTTP status {status}",
+      "requestId": "Request ID",
+      "permission": "Required permission",
+      "organization": "Organization",
+      "maintenanceWindow": "Scheduled maintenance",
+      "maintenanceProgress": "Maintenance progress {percent}"
+    },
     "topbar": {
       "toggleSidebar": "Toggle sidebar",
       "search": "Search",
@@ -205,7 +213,13 @@
   },
   "navigation": {
     "steps": {
-      "ariaLabel": "Progress"
+      "ariaLabel": "Progress",
+      "status": {
+        "wait": "Waiting",
+        "process": "Current step",
+        "finish": "Completed",
+        "error": "Error"
+      }
     },
     "breadcrumb": {
       "ariaLabel": "Breadcrumb"

package/dist/i18n/messages/ja.json

@@ -150,6 +150,14 @@
       "version": "バージョン {version}",
       "effectiveDate": "施行日 {date}"
     },
+    "errorSurface": {
+      "statusLabel": "HTTP ステータス {status}",
+      "requestId": "リクエスト ID",
+      "permission": "必要な権限",
+      "organization": "組織",
+      "maintenanceWindow": "計画メンテナンス",
+      "maintenanceProgress": "メンテナンス進捗 {percent}"
+    },
     "topbar": {
       "toggleSidebar": "サイドバーの切り替え",
       "search": "検索",
@@ -205,7 +213,13 @@
   },
   "navigation": {
     "steps": {
-      "ariaLabel": "進行状況"
+      "ariaLabel": "進行状況",
+      "status": {
+        "wait": "未完了",
+        "process": "現在のステップ",
+        "finish": "完了",
+        "error": "エラー"
+      }
     },
     "breadcrumb": {
       "ariaLabel": "パンくずリスト"

package/dist/i18n/messages/vi.json

@@ -150,6 +150,14 @@
       "version": "Phiên bản {version}",
       "effectiveDate": "Hiệu lực từ {date}"
     },
+    "errorSurface": {
+      "statusLabel": "Trạng thái HTTP {status}",
+      "requestId": "Mã yêu cầu",
+      "permission": "Quyền yêu cầu",
+      "organization": "Tổ chức",
+      "maintenanceWindow": "Bảo trì theo lịch",
+      "maintenanceProgress": "Tiến độ bảo trì {percent}"
+    },
     "topbar": {
       "toggleSidebar": "Bật/tắt thanh bên",
       "search": "Tìm kiếm",
@@ -205,7 +213,13 @@
   },
   "navigation": {
     "steps": {
-      "ariaLabel": "Tiến trình"
+      "ariaLabel": "Tiến trình",
+      "status": {
+        "wait": "Đang chờ",
+        "process": "Bước hiện tại",
+        "finish": "Đã hoàn tất",
+        "error": "Lỗi"
+      }
     },
     "breadcrumb": {
       "ariaLabel": "Đường dẫn"

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

@@ -1,6 +1,6 @@
 /** Data Display component prop types — @see docs/COMPONENTS.md#data-display */
 import type * as React from "react";
-import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ColumnDefProp, GetRowIdProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, ChildrenProp, ToneProp, HeadingLevelProp, HandlerProp, SizeProp, LabelProp, IdProp } from "../vocabulary/index.js";
+import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ColumnDefProp, GetRowIdProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, TablePresetProp, BreakpointProp, DensityProp, ChildrenProp, ToneProp, AvatarShapeProp, HeadingLevelProp, HandlerProp, SizeProp, LabelProp, IdProp } from "../vocabulary/index.js";
 /** @see EmptyState */
 /**
  * Semantic intent of the EmptyState icon medallion — a subset of the shared `ToneProp` vocabulary
@@ -50,6 +50,21 @@ export type DescriptionsItemProp = {
     value: React.ReactNode;
     mono?: boolean;
 };
+/**
+ * @see Avatar
+ *
+ * Identity mark. `shape` is the ONLY appearance knob: the default `circle` is the person avatar
+ * (unchanged — an existing `<Avatar>` renders identically), `square` is the entity-header
+ * organization / service mark (compact rounded square on the brand surface). Every value it
+ * paints — radius, box size, fill, glyph colour — comes from the `--avatar-square-*` component
+ * tokens (cardinal rule #45), so a service retunes the entity mark once in its theme instead of
+ * overriding `className` per call site.
+ */
+export type AvatarProp = React.ComponentPropsWithoutRef<"span"> & {
+    shape?: AvatarShapeProp;
+    className?: ClassNameProp;
+    children?: ChildrenProp;
+};
 /** @see Badge */
 export type BadgeProp = {
     variant?: "default" | "secondary" | "outline";
@@ -148,6 +163,53 @@ export type DataTableProp<T> = {
     denied?: React.ReactNode;
     /** Retry handler surfaced by the built-in `error` state. */
     onRetry?: HandlerProp;
+    /**
+     * Named collection contract (gh#253) — the SAME preset the `Table` primitive owns, forwarded to
+     * the table DataTable renders. `"default"` (the default) emits no attribute and matches no
+     * selector. `"action-collection"` is the canonical dense approval / action queue: below
+     * `collapseBelow` the desktop intrinsic column widths give way to the token-owned column-PRIORITY
+     * measures (`--table-action-collection-*`) under `table-layout: fixed`, cells wrap, and the
+     * surface drops its `--table-surface-min-inline-size` floor — so every column, row actions
+     * included, stays inside a 390px frame with no horizontal scroll. Mark each column with
+     * `priority` on its `ColumnDef`.
+     */
+    preset?: TablePresetProp;
+    /**
+     * Container step at which `preset="action-collection"` switches to the compact priority measures.
+     * Measured against the TABLE's own container (a container query), not the viewport, so a table in
+     * a master rail collapses before the page does. Default `"sm"`. Ignored while `preset` is
+     * `"default"`.
+     */
+    collapseBelow?: BreakpointProp;
     className?: ClassNameProp;
     children?: ChildrenProp;
 };
+/**
+ * ListRow geometry — `default` (the roomy entity row) or `compact` (#246: the inline-actions row —
+ * Avatar + title/description + one or two small trailing Buttons on ONE line inside a narrow card).
+ * A ListRow-LOCAL subset of the shared density vocabulary: the row has no `comfortable` step, so it
+ * is deliberately narrower than `DensityProp` (and unrelated to `PageDensityProp`/`TableDensityProp`).
+ */
+export type ListRowDensityProp = Exclude<DensityProp, "comfortable">;
+/** @see ListRow */
+export type ListRowProp = {
+    /** Render element — `div` (default) or `li` when the parent is a `<ul>`/`<ol>`. */
+    as?: "div" | "li";
+    /** Leading slot — a decorative icon or an Avatar. Mark a purely decorative icon `aria-hidden`. */
+    leading?: React.ReactNode;
+    /** Primary line — rendered in medium weight. */
+    title: TitleProp | React.ReactNode;
+    /** Secondary line under the title (muted, xs). */
+    description?: DescriptionProp | React.ReactNode;
+    /** Trailing slot — the row action(s): a Button / DropdownMenu trigger, a Badge, or a Switch. */
+    trailing?: React.ReactNode;
+    /** Cross-axis alignment of the columns — `center` (default) or `start` for multi-line content. */
+    align?: "center" | "start";
+    /** How over-long title/description resolve — `truncate` (default) or `wrap` (#224). */
+    overflow?: "truncate" | "wrap";
+    /** Row geometry — `default` or the compact inline-actions preset (#246). */
+    density?: ListRowDensityProp;
+    /** Read/unread state — indicator dot + localized `sr-only` text, never colour alone (#225). */
+    unread?: boolean;
+    className?: ClassNameProp;
+};

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

@@ -10,6 +10,12 @@ import type { UploadFileItem } from "../../components/data-entry/upload-types.js
 import type { FieldA11yProps } from "../../lib/field-a11y.js";
 import type { ClassNameProp, DisabledProp, EmptyMessageProp, ErrorProp, HelperProp, IdProp, LabelProp, NameProp, OnChangeProp, OnValueChangeProp, OnSearchChangeProp, OpenProp, OnOpenChangeProp, PlaceholderProp, RequiredProp, ValueProp, DefaultValueProp, FormLayoutProp, WidthProp, BreakpointProp, DensityProp, SizeProp } from "../vocabulary/index.js";
 import type { ResponsiveGridColumnsProp } from "./layout.prop.js";
+/** One-outline-per-group appearance for the compound InputOTP control. */
+export type InputOTPGroupAppearanceProp = "slots" | "grouped";
+/** @see InputOTPGroup */
+export type InputOTPGroupProp = React.HTMLAttributes<HTMLDivElement> & {
+    appearance?: InputOTPGroupAppearanceProp;
+};
 /** @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/index.d.ts

@@ -1,7 +1,7 @@
 export type { AppShellProp, AuthFooterProp, AuthIdentityProp, OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, PageContainerProp, PageInsetProp, SidebarItemProp, SidebarProductProp, SidebarProp, SidebarSectionProp, TopbarProp, } from "./layout.prop.js";
 export type { ButtonProp } from "./general.prop.js";
 export type { InputProp, TextareaProp, FormFieldProp, SearchInputProp, CheckboxProp, CheckboxGroupProp, ChoiceOptionProp, RadioProp, RadioGroupProp, SwitchProp, SliderProp, CalendarProp, DatePickerProp, DateRangePickerProp, TimePickerProp, ColorPickerProp, UploadProp, UploadFileItemProp, UploadVariantProp, TreeOptionProp, TreeFieldNamesProp, CascaderProp, TreeSelectProp, ShowCheckedStrategyProp, TransferProp, TransferItemProp, } from "./data-entry.prop.js";
-export type { EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, QrCodeProp, } from "./data-display.prop.js";
+export type { AvatarProp, EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, QrCodeProp, } from "./data-display.prop.js";
 export type { ChartDatum, ChartSeriesProp, LineChartProp, BarChartProp, AreaChartProp, PieChartProp, } from "./charts.prop.js";
 export type { AlertQueryErrorProp, AlertProp, AlertTitleProp, AlertContentProp, AlertDescriptionProp, AlertActionsProp, SheetResponsiveProp, SkeletonRowsProp, } from "./feedback.prop.js";
 export type { DataStateProp, InfiniteQueryStateProp, InfiniteQueryHelpers, PrefetchLinkProp, } from "./query.prop.js";

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

@@ -1,7 +1,8 @@
 /** Layout component prop types — @see docs/COMPONENTS.md#layout */
 import type * as React from "react";
 import type { ComponentType, ReactNode, SVGProps } from "react";
-import type { BreadcrumbProp, TitleProp, SubtitleProp, ExtraProp, FooterProp, PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, AuthShellPresetProp, BreakpointProp, GapProp, ClassNameProp, ChildrenProp, IdProp } from "../vocabulary/index.js";
+import type { BreadcrumbProp, TitleProp, SubtitleProp, ExtraProp, FooterProp, PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, BreakpointProp, GapProp, ClassNameProp, ChildrenProp, IdProp, DisabledProp, DescriptionProp, ActionProp, IconProp, HeadingLevelProp } from "../vocabulary/index.js";
+import type { EmptyStateToneProp } from "./data-display.prop.js";
 /**
  * Arrangement of the page header's title band and its `extra` slot below the 640px step.
  * `stack` (default) is the historical arrangement — `extra` drops onto its own full-width line
@@ -9,6 +10,20 @@ import type { BreadcrumbProp, TitleProp, SubtitleProp, ExtraProp, FooterProp, Pa
  * `--page-header-extra-measure` measure, letting the title/subtitle wrap into what is left.
  */
 export type PageContainerHeaderLayoutProp = "stack" | "responsive-inline";
+/** Whole-page semantic composition owned by PageContainer. */
+export type PageContainerPresetProp = "default" | "admin-collection";
+/**
+ * Bounded page MEASURE — 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. Orthogonal to
+ * `PageContainerVariantProp` (chrome) and to `PageContainerHeaderLayoutProp`, so a quiet
+ * `variant="ghost"` feed can finally have a bounded measure too (gh#245 / gh#247).
+ *
+ * `default` applies NO cap — the page is fluid exactly as before. `narrow` / `medium` read the
+ * `--page-measure-{narrow,medium}` tokens (42rem / 48rem OUTER, i.e. 624px / 720px VISIBLE surface
+ * once the package-owned page gutters are subtracted). Both are maxes, so a compact viewport stays
+ * fluid at the compact gutter.
+ */
+export type PageContainerMeasureProp = "default" | "narrow" | "medium";
 /** @see PageContainer */
 export type PageContainerProp = {
     title: TitleProp;
@@ -28,6 +43,12 @@ export type PageContainerProp = {
     linkComponent?: React.ElementType;
     density?: PageDensityProp;
     variant?: PageContainerVariantProp;
+    /**
+     * Whole-page composition contract. `admin-collection` sets the header-to-toolbar rhythm,
+     * collection search measure, control height and table density once for the entire subtree.
+     * Geometry remains token-owned and service-themeable; no child needs a sizing override.
+     */
+    preset?: PageContainerPresetProp;
     /**
      * How the title band and `extra` share the header row below the 640px step. Defaults to
      * `stack` — the historical arrangement, where `extra` wraps onto its own full-width line under
@@ -36,6 +57,15 @@ export type PageContainerProp = {
      * `--page-header-extra-measure`. At >=640px both arrangements are identical.
      */
     headerLayout?: PageContainerHeaderLayoutProp;
+    /**
+     * Bounded page measure shared by the header and the body. Defaults to `default` — no cap, the
+     * historical fluid page. `narrow` (624px surface) / `medium` (720px surface) cap BOTH bands to
+     * one token-owned measure (`--page-measure-{narrow,medium}`), so a header action ends flush with
+     * the body surface instead of at the page edge. Orthogonal to `variant`, so `variant="ghost"`
+     * quiet chrome composes with a bounded measure (gh#245 / gh#247). Unlike `variant="narrow"`,
+     * which caps only the body.
+     */
+    measure?: PageContainerMeasureProp;
     /** Pin footer to viewport bottom on scroll — pairs well with `variant="narrow"`. */
     stickyFooter?: boolean;
     /**
@@ -68,6 +98,20 @@ export type FlexProp = React.HTMLAttributes<HTMLDivElement> & {
     align?: FlexAlignProp;
     justify?: FlexJustifyProp;
     wrap?: boolean;
+    /**
+     * Drop this region below a breakpoint step (`sm` 40rem · `md` 48rem · `lg` 64rem · `xl` 80rem).
+     * The ONE public way to make a layout region responsive without a page-local media query — a
+     * public header hides its anchor navigation below the tablet step with `hideBelow="md"` instead
+     * of a consumer `@media` rule (gh#252). Omit (the default) and no attribute is emitted, so no
+     * rule can match and the Flex is unchanged. The region is removed from the accessibility tree
+     * too, so keep its destinations reachable elsewhere at that width (a footer nav).
+     */
+    hideBelow?: BreakpointProp;
+    /**
+     * The inverse of `hideBelow` — drop this region FROM a breakpoint step upwards, i.e. keep it
+     * only on the narrow side (a compact-only affordance). Omit for no attribute and no rule.
+     */
+    hideFrom?: BreakpointProp;
 };
 export type ResponsiveGridColumnsProp = number | {
     sm?: number;
@@ -136,6 +180,17 @@ export type AppShellProp = {
     breadcrumb?: ReactNode;
     footer?: ReactNode;
     sidebarCollapsed?: boolean;
+    /**
+     * Responsive navigation strategy below the canonical 900px shell breakpoint.
+     *
+     * - `"drawer"` (default) hides the docked sidebar and exposes the accessible mobile Sheet.
+     * - `"docked"` keeps the sidebar grid track, footer/account region and active navigation in the
+     *   shell at narrow widths. The sidebar width remains owned by `--app-shell-sidebar-width`.
+     *
+     * Use `"docked"` only when the product's approved responsive contract explicitly retains the
+     * rail; it intentionally suppresses the redundant mobile drawer trigger.
+     */
+    responsiveNavigation?: "drawer" | "docked";
     /**
      * Navigation shown in the mobile drawer at the DXS 900px breakpoint, where the docked sidebar is
      * hidden. AppShell OWNS the drawer: it renders a hamburger trigger in the topbar and a focus-
@@ -176,10 +231,15 @@ export type AuthShellProp = {
     /**
      * Named flow MEASURE — the page geometry contract for one canonical hosted-identity flow: the
      * auth card's max-width plus the desktop and mobile page gutters, all owned by component tokens
-     * (`--auth-shell-{device,context,recovery}-*`). Selecting a preset replaces every consumer-side
-     * `--auth-shell-card-max-width` override.
+     * (`--auth-shell-{login,device,context,recovery}-*`). Selecting a preset replaces every
+     * consumer-side geometry override.
      *
      * - `"default"` (default) — the shell's own measure; nothing changes.
+     * - `"login"` — SCR-001's 360px card at x=540/332/15 and y=363/363/353 for the canonical
+     *   1440x900, 1024x900 and 390x844 viewports. The identity occupies a package-owned anchor slot,
+     *   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).
      * - `"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
@@ -190,7 +250,7 @@ export type AuthShellProp = {
      *   · passkey-failure), whose title and description sit INSIDE the bordered surface.
      *
      * Orthogonal to `variant`: presets are applied AFTER it, so `variant="canonical"` keeps owning
-     * control density and heading size while the preset re-measures the page.
+     * control density and heading size while the preset re-measures/anchors the page.
      */
     preset?: AuthShellPresetProp;
     /**
@@ -241,6 +301,20 @@ export type AuthIdentityProp = {
     requester?: ReactNode;
     className?: ClassNameProp;
 };
+/**
+ * @see AuthAccountSummary — compact signed-in identity row for hosted authentication surfaces.
+ * It owns avatar fallback, bidi-safe email truncation and the keyboard action geometry; the
+ * consumer owns the authoritative email, localized action label and navigation handler.
+ */
+export type AuthAccountSummaryProp = {
+    email: string;
+    avatarSrc?: string;
+    avatarFallback?: ReactNode;
+    actionLabel: ReactNode;
+    onAction: () => void;
+    disabled?: DisabledProp;
+    className?: ClassNameProp;
+};
 /**
  * @see CenteredShell — authenticated, no-sidebar, centred-column page shell (hosted-ID "My Page",
  * account / self-service, standalone settings). A padded top bar with real actions (banner) reusing
@@ -276,6 +350,119 @@ export type CenteredShellProp = {
      * a long localized message is never clipped.
      */
     align?: CenteredShellAlignProp;
+    /**
+     * Whole-page shell contract. `"default"` (the default) emits no attribute and keeps the shell's
+     * exact box. `"public-landing"` owns the PUBLIC landing geometry — one content measure shared by
+     * the header bar, the centred column and the footer, the section rhythm, the flat public-surface
+     * card chrome and the hero `h1` tier — from `--centered-shell-landing-*` tokens, so a landing
+     * composition (header · hero · sections · legal footer) needs no page-local CSS and no descendant
+     * selector against shell internals (gh#252).
+     */
+    preset?: CenteredShellPresetProp;
+    className?: ClassNameProp;
+};
+/**
+ * @see ErrorSurface — the optional maintenance / planned-outage timing slot (503, occasionally a
+ * planned 500).
+ *
+ * `start` / `end` are **ISO-8601 instants** and `timeZone` an **IANA** zone id: the surface formats
+ * them with `Intl.DateTimeFormat(locale, …).formatRange()` (CLDR), so ja / en / vi each read
+ * natively. NEVER pass a pre-formatted string like `"18:00 - 20:00 JST"` — it cannot localize, and
+ * the machine-readable value is what lands in `<time dateTime>`.
+ *
+ * `progress` is server-sent on purpose: deriving "how far through the window are we" from the
+ * client clock makes SSR and hydration disagree, and an exception page must be readable before
+ * hydration.
+ */
+export type ErrorSurfaceMaintenanceProp = {
+    /** Window start as an ISO-8601 instant (`2026-08-02T18:00:00Z`). Also the `<time dateTime>` value. */
+    start: string;
+    /** Window end as an ISO-8601 instant. Omit for an open-ended outage — a single instant is shown. */
+    end?: string;
+    /**
+     * IANA time zone id (`Asia/Tokyo`) the window is presented in. Omit to use the runtime zone —
+     * pass it explicitly whenever the page is server-rendered, or SSR and client output diverge.
+     */
+    timeZone?: string;
+    /**
+     * Completion of the maintenance window as a **percentage 0–100**, rendered as a labelled
+     * `Progress` meter. Server-sent (see above); omit for an outage with no published progress.
+     */
+    progress?: number;
+};
+/**
+ * @see ErrorSurface — the package-owned semantic exception surface for 403 / 404 / 500 / 503.
+ *
+ * The `mode` is the SHELL CONTRACT, not a skin:
+ * - `mode="application"` (403/404) renders the surface as the **body** you put inside the
+ *   `AppShell` the route already provides (normally within a `PageContainer`). It deliberately does
+ *   NOT reconstruct navigation chrome: the sidebar, topbar and user menu are consumer-owned data,
+ *   so the surface preserves the shell it is placed in instead of manufacturing a fake one.
+ * - `mode="system"` (500/503) owns the whole page: it renders `CenteredShell align="center"`, so
+ *   the viewport-centred geometry at 1440 / 1024 / 390 stays package-owned and a consumer never
+ *   writes `min-h-dvh`, a flex-centring class or a media query.
+ *
+ * `action` is **exactly one** recovery action, enforced structurally by a single slot (a second
+ * element is dropped with a development error). Support contact belongs in `description`, not in a
+ * second CTA.
+ *
+ * All product COPY stays consumer-owned (`title` / `description` / `action` come from the app's own
+ * `t()`); the surface owns only its own metadata labels, which it localizes itself.
+ */
+export type ErrorSurfaceProp = {
+    /** Where the surface lives — `application` = AppShell body (403/404), `system` = own page (500/503). */
+    mode: ErrorSurfaceModeProp;
+    /** HTTP status presented. Drives the default `icon`, `tone` and the rendered status code. */
+    status: ErrorSurfaceStatusProp;
+    /** Headline. Consumer-owned copy from the app's `t()` — the library ships no product text. */
+    title: TitleProp;
+    /** Supporting sentence under the title. Put support-contact guidance here, never in a 2nd CTA. */
+    description?: DescriptionProp;
+    /**
+     * The ONE recovery action (a `Button`, or a `Button asChild` wrapping a router `Link`). A single
+     * slot IS the enforcement: pass more than one element and only the first renders, with a
+     * development-time error.
+     */
+    action: ActionProp;
+    /** Override the status-derived icon (403 ShieldAlert · 404 SearchX · 500 ServerCrash · 503 Wrench). */
+    icon?: IconProp;
+    /** Override the status-derived tone (403/503 `warning` · 404 `muted` · 500 `destructive`). */
+    tone?: EmptyStateToneProp;
+    /**
+     * Semantic heading level of `title`. Defaults to `2` in `application` mode (a `PageContainer`
+     * `h1` sits above it) and `1` in `system` mode (the surface IS the page). Choose it to keep the
+     * outline valid, never for size.
+     */
+    titleLevel?: HeadingLevelProp;
+    /**
+     * Support correlation id for the failure, rendered as a monospace/tabular metadata row so it can
+     * be read out or copied accurately. Pass the bare id — the localized label is the surface's.
+     */
+    requestId?: string;
+    /**
+     * The permission / role the viewer is missing (403). Pass the bare permission name
+     * (`reports.view`) — the surface renders the localized "Required permission" label around it.
+     */
+    permission?: ReactNode;
+    /**
+     * The organization / tenant the failed request was scoped to. Disambiguates a 403 caused by
+     * being in the wrong workspace from one caused by a missing role.
+     */
+    organization?: ReactNode;
+    /** Optional planned-outage timing + progress (503). ISO-8601 + IANA, formatted with `Intl`. */
+    maintenance?: ErrorSurfaceMaintenanceProp;
+    /**
+     * `system` mode only — brand slot above the status code (a `Logo`). Ignored in `application`
+     * mode, where the shell already shows the product brand.
+     */
+    brand?: ReactNode;
+    /** `system` mode only — the page footer (contentinfo): copyright, status page, locale switch. */
+    footer?: FooterProp;
+    /**
+     * `system` mode only — measure of the centred column (`CenteredShell` width tier). Default `sm`.
+     */
+    width?: CenteredShellWidthProp;
+    id?: IdProp;
     className?: ClassNameProp;
 };
 /** @see Sidebar */

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

@@ -85,7 +85,11 @@ export type StepsProp = {
     defaultValue?: number;
     status?: StepStatusProp;
     orientation?: "horizontal" | "vertical";
-    type?: "default" | "dot";
+    /**
+     * Marker appearance. `inline` renders the compact numbered auth/device progress row without the
+     * icon rail while preserving the same status and current-step semantics.
+     */
+    type?: "default" | "dot" | "inline";
     size?: "md" | "sm";
     titlePlacement?: "horizontal" | "vertical";
     onValueChange?: (value: number) => void;