@godxjp/ui 18.5.0 → 18.7.0

package/dist/email/index.js

@@ -22,6 +22,7 @@ import {
   roundedRectPath
 } from "./brand-mark.js";
 import { emailInlineStyle } from "./inline-style.js";
+import { EMAIL_URGENCY, EMAIL_URGENCY_DARK } from "./urgency.js";
 import {
   EMAIL_COLOR_SOURCE,
   EMAIL_COLOR_SOURCE_DARK,
@@ -37,9 +38,12 @@ import {
   EMAIL_MOBILE as EMAIL_MOBILE2
 } from "./geometry.js";
 import { EMAIL_BRAND_MARK as EMAIL_BRAND_MARK2 } from "./brand-mark.js";
+import { EMAIL_URGENCY as EMAIL_URGENCY2, EMAIL_URGENCY_DARK as EMAIL_URGENCY_DARK2 } from "./urgency.js";
 const EMAIL_TOKENS = Object.freeze({
   colors: EMAIL_COLORS2,
   colorsDark: EMAIL_COLORS_DARK2,
+  urgency: EMAIL_URGENCY2,
+  urgencyDark: EMAIL_URGENCY_DARK2,
   shell: EMAIL_SHELL2,
   typography: EMAIL_TYPOGRAPHY2,
   cta: EMAIL_CTA2,
@@ -67,6 +71,8 @@ export {
   EMAIL_TOKENS,
   EMAIL_TOKENS_JSON,
   EMAIL_TYPOGRAPHY,
+  EMAIL_URGENCY,
+  EMAIL_URGENCY_DARK,
   emailBrandMarkDataUri,
   emailBrandMarkSvg,
   emailBrandMarkTableHtml,

package/dist/email/inline-style.d.ts

@@ -3,10 +3,11 @@
  *
  * Email clients do not run the cascade: Gmail strips `<style>`, Outlook resolves no custom
  * property, and only the `style=""` attribute on the painting element is universally honoured.
- * `emailInlineStyle` turns a declaration map into that attribute value AND enforces the two rules
- * that silently break templates — no `var()` (nothing resolves it) and no `calc()` (Outlook's Word
- * renderer drops the whole declaration). Failing loudly at template-build time beats a broken
- * layout discovered in Mailpit.
+ * `emailInlineStyle` turns a declaration map into that attribute value AND enforces the three rules
+ * that silently break templates — no `var()` (nothing resolves it), no `calc()` (Outlook's Word
+ * renderer drops the whole declaration) and no `"` (it closes the `style="…"` attribute mid-value,
+ * which is how a double-quoted font family corrupts a whole tag). Failing loudly at template-build
+ * time beats a broken layout discovered in Mailpit.
  */
 /** A declaration map. Numbers are emitted verbatim (already-unitless values like `font-weight`). */
 export type EmailStyleDeclarations = Record<string, string | number | null | undefined>;
@@ -20,6 +21,7 @@ export type EmailStyleDeclarations = Record<string, string | number | null | und
  *
  * `null` / `undefined` values are dropped, so a conditional declaration needs no branch.
  *
- * @throws if a value contains `var()` or `calc()` — neither survives an email client.
+ * @throws if a value contains `var()` or `calc()` (neither survives an email client) or a double
+ *   quote (it terminates the `style="…"` attribute).
  */
 export declare function emailInlineStyle(declarations: EmailStyleDeclarations): string;

package/dist/email/inline-style.js

@@ -9,6 +9,11 @@ function emailInlineStyle(declarations) {
         `emailInlineStyle: "${property}: ${serialised}" uses var()/calc(), which no email client resolves. Pass the literal value from the @godxjp/ui/email token export instead.`
       );
     }
+    if (serialised.includes('"')) {
+      throw new TypeError(
+        `emailInlineStyle: "${property}: ${serialised}" contains a double quote, which terminates the style="\u2026" attribute it is written into. Use single quotes \u2014 a quoted font family from EMAIL_TYPOGRAPHY already ships that way.`
+      );
+    }
     parts.push(`${kebab(property)}:${serialised}`);
   }
   return parts.join(";");

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

@@ -48,11 +48,19 @@ export declare const EMAIL_COLOR_SOURCE: {
         readonly hsl: "204 100% 39%";
     };
     readonly brand: {
-        readonly cssVar: "--success";
-        readonly hsl: "146 40% 58%";
+        readonly cssVar: "--brand";
+        readonly hsl: "160.5 100% 29.6%";
     };
     readonly brandForeground: {
-        readonly cssVar: "--success-foreground";
+        readonly cssVar: "--brand-foreground";
+        readonly hsl: "60 33% 99%";
+    };
+    readonly urgency: {
+        readonly cssVar: "--attention";
+        readonly hsl: "25 99% 46%";
+    };
+    readonly urgencyForeground: {
+        readonly cssVar: "--attention-foreground";
         readonly hsl: "60 33% 99%";
     };
 };
@@ -99,11 +107,19 @@ export declare const EMAIL_COLOR_SOURCE_DARK: {
         readonly hsl: "204 90% 60%";
     };
     readonly brand: {
-        readonly cssVar: "--success";
-        readonly hsl: "146 45% 55%";
+        readonly cssVar: "--brand";
+        readonly hsl: "160.5 100% 36%";
     };
     readonly brandForeground: {
-        readonly cssVar: "--success-foreground";
+        readonly cssVar: "--brand-foreground";
+        readonly hsl: "48 9% 9%";
+    };
+    readonly urgency: {
+        readonly cssVar: "--attention";
+        readonly hsl: "25 95% 56%";
+    };
+    readonly urgencyForeground: {
+        readonly cssVar: "--attention-foreground";
         readonly hsl: "48 9% 9%";
     };
 };
@@ -117,23 +133,27 @@ export declare const EMAIL_GEOMETRY_SOURCE: {
     readonly "--email-card-reference-height": "407px";
     readonly "--email-stack-gap": "24px";
     readonly "--email-stack-gap-sm": "12px";
-    readonly "--email-mark-width": "32px";
-    readonly "--email-mark-height": "32px";
-    readonly "--email-font-family-sans": "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif";
+    readonly "--email-mark-width": "22px";
+    readonly "--email-mark-height": "22px";
+    readonly "--email-mark-gap": "8px";
+    readonly "--email-wordmark-font-size": "13px";
+    readonly "--email-wordmark-font-weight": "700";
+    readonly "--email-font-family-sans": "'M PLUS 2', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', YuGothic, 'Noto Sans JP', Meiryo, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, Arial, sans-serif";
+    readonly "--email-font-family-mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
     readonly "--email-body-font-size": "14px";
-    readonly "--email-body-line-height": "1.7";
+    readonly "--email-body-line-height": "1.9";
     readonly "--email-body-font-weight": "400";
-    readonly "--email-heading-font-size": "20px";
-    readonly "--email-heading-line-height": "1.25";
-    readonly "--email-heading-font-weight": "700";
-    readonly "--email-cta-height": "44px";
-    readonly "--email-cta-line-height": "44px";
-    readonly "--email-cta-padding-x": "24px";
+    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-padding-x": "16px";
     readonly "--email-cta-radius": "6px";
     readonly "--email-cta-font-size": "14px";
-    readonly "--email-cta-font-weight": "700";
-    readonly "--email-footer-font-size": "12px";
-    readonly "--email-footer-line-height": "1.5";
+    readonly "--email-cta-font-weight": "500";
+    readonly "--email-footer-font-size": "11px";
+    readonly "--email-footer-line-height": "1.8";
     readonly "--email-footer-link-gap": "12px";
     readonly "--email-footer-padding-top": "20px";
     readonly "--email-footer-border-width": "1px";
@@ -142,6 +162,6 @@ export declare const EMAIL_GEOMETRY_SOURCE: {
     readonly "--email-mobile-width": "100%";
     readonly "--email-mobile-padding": "20px";
     readonly "--email-mobile-page-padding": "12px";
-    readonly "--email-mobile-heading-font-size": "18px";
+    readonly "--email-mobile-heading-font-size": "16px";
     readonly "--email-mobile-cta-width": "100%";
 };

package/dist/email/tokens.generated.js

@@ -40,11 +40,19 @@ const EMAIL_COLOR_SOURCE = {
     "hsl": "204 100% 39%"
   },
   "brand": {
-    "cssVar": "--success",
-    "hsl": "146 40% 58%"
+    "cssVar": "--brand",
+    "hsl": "160.5 100% 29.6%"
   },
   "brandForeground": {
-    "cssVar": "--success-foreground",
+    "cssVar": "--brand-foreground",
+    "hsl": "60 33% 99%"
+  },
+  "urgency": {
+    "cssVar": "--attention",
+    "hsl": "25 99% 46%"
+  },
+  "urgencyForeground": {
+    "cssVar": "--attention-foreground",
     "hsl": "60 33% 99%"
   }
 };
@@ -90,11 +98,19 @@ const EMAIL_COLOR_SOURCE_DARK = {
     "hsl": "204 90% 60%"
   },
   "brand": {
-    "cssVar": "--success",
-    "hsl": "146 45% 55%"
+    "cssVar": "--brand",
+    "hsl": "160.5 100% 36%"
   },
   "brandForeground": {
-    "cssVar": "--success-foreground",
+    "cssVar": "--brand-foreground",
+    "hsl": "48 9% 9%"
+  },
+  "urgency": {
+    "cssVar": "--attention",
+    "hsl": "25 95% 56%"
+  },
+  "urgencyForeground": {
+    "cssVar": "--attention-foreground",
     "hsl": "48 9% 9%"
   }
 };
@@ -107,23 +123,27 @@ const EMAIL_GEOMETRY_SOURCE = {
   "--email-card-reference-height": "407px",
   "--email-stack-gap": "24px",
   "--email-stack-gap-sm": "12px",
-  "--email-mark-width": "32px",
-  "--email-mark-height": "32px",
-  "--email-font-family-sans": "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif",
+  "--email-mark-width": "22px",
+  "--email-mark-height": "22px",
+  "--email-mark-gap": "8px",
+  "--email-wordmark-font-size": "13px",
+  "--email-wordmark-font-weight": "700",
+  "--email-font-family-sans": "'M PLUS 2', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', YuGothic, 'Noto Sans JP', Meiryo, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, Arial, sans-serif",
+  "--email-font-family-mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
   "--email-body-font-size": "14px",
-  "--email-body-line-height": "1.7",
+  "--email-body-line-height": "1.9",
   "--email-body-font-weight": "400",
-  "--email-heading-font-size": "20px",
-  "--email-heading-line-height": "1.25",
-  "--email-heading-font-weight": "700",
-  "--email-cta-height": "44px",
-  "--email-cta-line-height": "44px",
-  "--email-cta-padding-x": "24px",
+  "--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-padding-x": "16px",
   "--email-cta-radius": "6px",
   "--email-cta-font-size": "14px",
-  "--email-cta-font-weight": "700",
-  "--email-footer-font-size": "12px",
-  "--email-footer-line-height": "1.5",
+  "--email-cta-font-weight": "500",
+  "--email-footer-font-size": "11px",
+  "--email-footer-line-height": "1.8",
   "--email-footer-link-gap": "12px",
   "--email-footer-padding-top": "20px",
   "--email-footer-border-width": "1px",
@@ -132,7 +152,7 @@ const EMAIL_GEOMETRY_SOURCE = {
   "--email-mobile-width": "100%",
   "--email-mobile-padding": "20px",
   "--email-mobile-page-padding": "12px",
-  "--email-mobile-heading-font-size": "18px",
+  "--email-mobile-heading-font-size": "16px",
   "--email-mobile-cta-width": "100%"
 };
 export {

package/dist/email/urgency.d.ts

@@ -0,0 +1,22 @@
+import { type EmailHex } from "./color.js";
+/**
+ * Semantic action-required styling for transactional email.
+ *
+ * `accent` is the non-text rail/border color painted on the normal email surface. The solid pair
+ * is safe for icons and large or bold labels that satisfy the 3:1 contrast floor; it is not a
+ * replacement for normal body copy, which remains `EMAIL_COLORS.foreground` on
+ * `EMAIL_COLORS.surface`. This deliberately narrow contract prevents urgency from becoming an
+ * undocumented second CTA or a component-local palette.
+ */
+export interface EmailUrgencyTokens {
+    /** Non-text action-required rail or border on the standard email surface. */
+    readonly accent: EmailHex;
+    /** Solid action-required fill for an icon or large/bold label. */
+    readonly solidBackground: EmailHex;
+    /** Foreground paired only with `solidBackground` under the usage restriction above. */
+    readonly solidForeground: EmailHex;
+}
+/** Light-scheme action-required email contract. */
+export declare const EMAIL_URGENCY: Readonly<EmailUrgencyTokens>;
+/** Dark-scheme action-required email contract for clients that honor dark-mode overrides. */
+export declare const EMAIL_URGENCY_DARK: Readonly<EmailUrgencyTokens>;

package/dist/email/urgency.js

@@ -0,0 +1,14 @@
+import { EMAIL_COLORS, EMAIL_COLORS_DARK } from "./color.js";
+function resolveUrgency(colors) {
+  return Object.freeze({
+    accent: colors.urgency,
+    solidBackground: colors.urgency,
+    solidForeground: colors.urgencyForeground
+  });
+}
+const EMAIL_URGENCY = resolveUrgency(EMAIL_COLORS);
+const EMAIL_URGENCY_DARK = resolveUrgency(EMAIL_COLORS_DARK);
+export {
+  EMAIL_URGENCY,
+  EMAIL_URGENCY_DARK
+};

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

@@ -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/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/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";