@godxjp/ui 18.9.0 → 18.11.0

package/dist/props/registry.js

@@ -121,6 +121,11 @@ const VOCABULARY_REGISTRY = {
     category: "content",
     description: "Secondary line under title"
   },
+  StatusProp: {
+    file: "vocabulary/content.prop.ts",
+    category: "content",
+    description: "Status/meta band beside a title (StatusBadge, meta text)"
+  },
   DescriptionProp: {
     file: "vocabulary/content.prop.ts",
     category: "content",
@@ -220,7 +225,7 @@ const VOCABULARY_REGISTRY = {
   AuthShellPresetProp: {
     file: "vocabulary/layout.prop.ts",
     category: "layout",
-    description: "AuthShell named flow geometry \u2014 default | login (stable SCR-001 identity/card/footer anchor) | device-authorization (380px card, 5px mobile gutter) | context-selection (25rem card, edge-to-edge mobile) | account-recovery (432px SCR-008 recovery/MFA panel, 15px mobile gutter)"
+    description: "AuthShell named flow geometry \u2014 default | login (stable SCR-001 identity/card/footer anchor) | registration (360px SCR-002 sign-up measure, start-aligned long-form scroll, own footer clearance, 15px mobile gutter) | device-authorization (380px card, 5px mobile gutter) | context-selection (25rem card, edge-to-edge mobile) | account-recovery (432px SCR-008 recovery/MFA panel, 15px mobile gutter)"
   },
   GapProp: {
     file: "vocabulary/layout.prop.ts",
@@ -321,7 +326,7 @@ const VOCABULARY_REGISTRY = {
   AlertVariantProp: {
     file: "vocabulary/interaction.prop.ts",
     category: "interaction",
-    description: "Inline Alert banner tone"
+    description: "Alert structural axis: default inline card | banner full-bleed strip"
   },
   SortDirectionProp: {
     file: "vocabulary/interaction.prop.ts",
@@ -465,51 +470,22 @@ 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",
     vocabulary: [
       "TitleProp",
       "SubtitleProp",
+      "StatusProp",
       "ExtraProp",
       "FooterProp",
       "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)."
+        reason: "Pending state of the TITLE BAND only (skeleton title/subtitle + aria-busy on the header). Named for the BAND it skeletonises, so it can never be read as a page-wide loading flag (that is DataState's job); breadcrumbs and `extra` come from the route and stay live while the record resolves."
       },
       {
         field: "headerLayout",
@@ -1526,8 +1502,6 @@ const COMPONENT_PROP_REGISTRY = {
   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: {
@@ -1559,52 +1533,33 @@ const COMPONENT_PROP_REGISTRY = {
       "OnClearFiltersProp",
       "HasActiveFiltersProp",
       "StickyProp",
+      "ActionsProp",
+      "PendingProp",
+      "DisabledProp",
+      "ErrorProp",
       "ClassNameProp",
-      "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)."
-      }
+      "ChildrenProp"
     ]
   },
-  FilterBarChipProp: {
+  FilterBarOverflowProp: {
     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)."
-      }
-    ]
+    vocabulary: []
   },
-  FilterBarOverflowProp: {
+  FilterBarSearchProp: {
     group: "navigation",
     file: "components/navigation.prop.ts",
-    vocabulary: []
+    vocabulary: ["PlaceholderProp", "IdProp", "DisabledProp"]
+  },
+  FilterBarFilterProp: {
+    group: "navigation",
+    file: "components/navigation.prop.ts",
+    vocabulary: ["LabelProp", "PlaceholderProp", "DisabledProp"]
+  },
+  FilterBarChipProp: {
+    group: "navigation",
+    file: "components/navigation.prop.ts",
+    vocabulary: ["DisabledProp"]
   },
   ToolbarGroupProp: {
     group: "navigation",
@@ -1813,6 +1768,340 @@ const COMPONENT_PROP_REGISTRY = {
     group: "layout",
     file: "components/layout/split-pane.tsx",
     vocabulary: ["ClassNameProp", "ChildrenProp"]
+  },
+  PermissionMatrixRoleProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      "IdProp",
+      {
+        field: "name",
+        local: true,
+        reason: "Consumer-supplied role display name; a plain string so it can label cells for AT."
+      },
+      {
+        field: "description",
+        local: true,
+        reason: "Secondary caption under the role column header."
+      },
+      {
+        field: "locked",
+        local: true,
+        reason: "Per-role read-only flag \u2014 a locked role keeps \u2713/\u2014 cells in an editable matrix."
+      }
+    ]
+  },
+  PermissionMatrixPermissionProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      "IdProp",
+      {
+        field: "name",
+        local: true,
+        reason: "Consumer-supplied permission display name; plain string for accessible labels."
+      },
+      {
+        field: "description",
+        local: true,
+        reason: "Secondary line under the permission name."
+      },
+      {
+        field: "group",
+        local: true,
+        reason: "Optional category caption for the permission row."
+      }
+    ]
+  },
+  PermissionMatrixGrantsProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      {
+        field: "grants",
+        local: true,
+        reason: "The role\xD7permission grant relation \u2014 the grantKey Set from lib/permission-grid or a pair array normalized through the same encoding."
+      }
+    ]
+  },
+  PermissionMatrixProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      "LabelProp",
+      "HandlerProp",
+      "ClassNameProp",
+      "IdProp",
+      {
+        field: "roles",
+        local: true,
+        reason: "Consumer-supplied role columns (see PermissionMatrixRoleProp)."
+      },
+      {
+        field: "permissions",
+        local: true,
+        reason: "Consumer-supplied permission rows (see PermissionMatrixPermissionProp)."
+      },
+      {
+        field: "grants",
+        local: true,
+        reason: "The grant relation (see PermissionMatrixGrantsProp)."
+      },
+      {
+        field: "onGrantChange",
+        local: true,
+        reason: "Cell toggle handler carrying the (roleId, permissionId, granted) triple; its presence switches the grid from read-only \u2713/\u2014 to editable checkboxes."
+      },
+      {
+        field: "readOnly",
+        local: true,
+        reason: "Forces the read-only grid even when onGrantChange is present (viewer permission)."
+      },
+      {
+        field: "compare",
+        local: true,
+        reason: "Two role ids compared side by side \u2014 the lib/permission-grid ComparePair."
+      },
+      {
+        field: "diffOnly",
+        local: true,
+        reason: "\u5DEE\u5206\u306E\u307F filter: with compare set, keep only the rows where the two roles differ."
+      },
+      {
+        field: "loading",
+        local: true,
+        reason: "Read-lifecycle skeleton state mirroring DataTable #216 (precedence loading \u2192 denied \u2192 error \u2192 empty)."
+      },
+      {
+        field: "empty",
+        local: true,
+        reason: "Custom empty content override, mirroring DataTable's empty slot."
+      },
+      {
+        field: "error",
+        local: true,
+        reason: "Read-failure state mirroring DataTable #216 (true = built-in localized message)."
+      },
+      {
+        field: "denied",
+        local: true,
+        reason: "Permission-denied read state mirroring DataTable #216 \u2014 refused, not failed."
+      },
+      {
+        field: "onRetry",
+        local: true,
+        reason: "Retry affordance for the built-in error state, mirroring DataTable #216."
+      }
+    ]
+  },
+  BranchScopeModeProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: [
+      {
+        field: "mode",
+        local: true,
+        reason: "Closed scope vocabulary: all branches vs an explicit subset."
+      }
+    ]
+  },
+  BranchScopeValueProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: [
+      {
+        field: "mode",
+        local: true,
+        reason: "The selected scope mode (see BranchScopeModeProp)."
+      },
+      {
+        field: "branchIds",
+        local: true,
+        reason: "Checked branch ids, meaningful only when mode = selected."
+      }
+    ]
+  },
+  BranchScopeOptionProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: [
+      "IdProp",
+      "DisabledProp",
+      {
+        field: "name",
+        local: true,
+        reason: "Consumer-supplied branch display name; plain string so it is searchable."
+      },
+      {
+        field: "description",
+        local: true,
+        reason: "Secondary line under the branch name."
+      }
+    ]
+  },
+  BranchScopePickerProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: [
+      "ValueProp",
+      "DefaultValueProp",
+      "OnValueChangeProp",
+      "DisabledProp",
+      "ErrorProp",
+      "NameProp",
+      "IdProp",
+      "ClassNameProp",
+      {
+        field: "branches",
+        local: true,
+        reason: "Consumer-supplied selectable branches (see BranchScopeOptionProp)."
+      },
+      {
+        field: "readOnly",
+        local: true,
+        reason: "Locked view: render the current scope without editable affordances."
+      },
+      {
+        field: "searchable",
+        local: true,
+        reason: "Toggle for the built-in branch SearchInput above the checkbox list."
+      },
+      {
+        field: "loading",
+        local: true,
+        reason: "Read-lifecycle skeleton state (precedence loading \u2192 denied \u2192 listError \u2192 empty)."
+      },
+      {
+        field: "empty",
+        local: true,
+        reason: "Custom empty content when there are no branches."
+      },
+      {
+        field: "listError",
+        local: true,
+        reason: "Branch-collection READ failure \u2014 deliberately distinct from ErrorProp `error`, which stays field validation."
+      },
+      {
+        field: "denied",
+        local: true,
+        reason: "Permission-denied read state \u2014 the branch collection was refused, not failed."
+      },
+      {
+        field: "allLabel",
+        local: true,
+        reason: "Override for the localized all-branches radio label."
+      },
+      {
+        field: "selectedLabel",
+        local: true,
+        reason: "Override for the localized selected-branches radio label."
+      }
+    ]
+  },
+  ServiceRoleItemProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: [
+      "IdProp",
+      {
+        field: "name",
+        local: true,
+        reason: "Consumer-supplied role display name; plain string for accessible labels."
+      },
+      {
+        field: "description",
+        local: true,
+        reason: "Secondary line under the role name in the master rail."
+      },
+      {
+        field: "memberCount",
+        local: true,
+        reason: "Member count caption, pluralized via CLDR categories."
+      },
+      {
+        field: "locked",
+        local: true,
+        reason: "System-role flag: lock badge, no delete affordance ever."
+      }
+    ]
+  },
+  ServiceRolePanelProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: [
+      "ValueProp",
+      "DefaultValueProp",
+      "OnValueChangeProp",
+      "ChildrenProp",
+      "BreakpointProp",
+      "IdProp",
+      "ClassNameProp",
+      {
+        field: "roles",
+        local: true,
+        reason: "Consumer-supplied role collection (see ServiceRoleItemProp)."
+      },
+      {
+        field: "onDeleteRole",
+        local: true,
+        reason: "Confirmed-deletion handler; its presence arms the built-in destructive AlertDialog per non-locked role."
+      },
+      {
+        field: "readOnly",
+        local: true,
+        reason: "Locked view: hides every mutating affordance."
+      },
+      {
+        field: "loading",
+        local: true,
+        reason: "Read-lifecycle skeleton state (precedence loading \u2192 denied \u2192 error \u2192 empty)."
+      },
+      {
+        field: "empty",
+        local: true,
+        reason: "Custom empty content when there are no roles."
+      },
+      {
+        field: "error",
+        local: true,
+        reason: "Read-failure state (true = built-in localized message, node replaces it)."
+      },
+      {
+        field: "denied",
+        local: true,
+        reason: "Permission-denied read state \u2014 refused, not failed."
+      },
+      {
+        field: "onRetry",
+        local: true,
+        reason: "Retry affordance for the built-in error state."
+      },
+      {
+        field: "masterLabel",
+        local: true,
+        reason: "Accessible name override for the roles region (localized default otherwise)."
+      },
+      {
+        field: "detailLabel",
+        local: true,
+        reason: "Accessible name override for the detail region (localized default otherwise)."
+      },
+      {
+        field: "railWidth",
+        local: true,
+        reason: "Forwarded MasterDetail rail geometry preset."
+      },
+      {
+        field: "masterViewport",
+        local: true,
+        reason: "Forwarded MasterDetail bounded-collection preset."
+      },
+      {
+        field: "collapseBelow",
+        local: true,
+        reason: "Forwarded MasterDetail stacking threshold override."
+      }
+    ]
   }
 };
 const PROP_ALIASES_FORBIDDEN = {

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

@@ -9,6 +9,11 @@ export type TitleProp = React.ReactNode;
 export type SubtitleProp = React.ReactNode;
 /** Longer explanatory copy — dialog body, empty state body. */
 export type DescriptionProp = React.ReactNode;
+/**
+ * Status/meta band beside a title — StatusBadge, environment tag, "updated …" meta text.
+ * Owned by the canonical page-header contract so consumers never hand-lay a badge row.
+ */
+export type StatusProp = React.ReactNode;
 /** Top-right action slot on pages (Ant Design `extra`). */
 export type ExtraProp = React.ReactNode;
 /** Bottom action bar on pages — save/cancel, pagination controls. */

package/dist/props/vocabulary/index.d.ts

@@ -1,6 +1,6 @@
 /** Barrel — all vocabulary prop types. */
 export type { ClassNameProp, ChildrenProp, IdProp, OpenProp, DefaultOpenProp, OnOpenChangeProp, HandlerProp, PendingProp, RequiredProp, DisabledProp, LabelProp, HelperProp, ErrorProp, PlaceholderProp, NameProp, ValueProp, DefaultValueProp, OnValueChangeProp, OnChangeProp, OnClickProp, AsChildProp, WidthProp, } from "./shared.prop.js";
-export type { TitleProp, SubtitleProp, DescriptionProp, ExtraProp, FooterProp, ActionProp, IconProp, ConfirmLabelProp, CancelLabelProp, ActionsProp, EmptyMessageProp, } from "./content.prop.js";
+export type { TitleProp, SubtitleProp, StatusProp, DescriptionProp, ExtraProp, FooterProp, ActionProp, IconProp, ConfirmLabelProp, CancelLabelProp, ActionsProp, EmptyMessageProp, } from "./content.prop.js";
 export type { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, TableDensityProp, DensityProp, GapProp, } from "./layout.prop.js";
 export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, ShapeProp, AvatarShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, SizeProp, FormLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, } from "./interaction.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbProp } from "./navigation.prop.js";

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

@@ -55,13 +55,10 @@ export type ConfirmVariantProp = "default" | "destructive";
 /** Semantic color/status intent. */
 export type ToneProp = "default" | "success" | "warning" | "destructive" | "info" | "muted" | "neutral";
 /**
- * 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.
+ * Alert STRUCTURAL axis (orthogonal to `tone`, which owns colour/semantics):
+ * `default` — the inline card (rounded, framed on all sides);
+ * `banner` — the full-bleed page/shell attention strip the `Banner` export renders
+ * (square corners, hairline block-end rule only, `--banner-*` token geometry).
  */
 export type AlertVariantProp = "default" | "banner";
 /** Sort direction for table columns. */

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

@@ -46,9 +46,9 @@ export type ErrorSurfaceStatusProp = 403 | 404 | 500 | 503;
  * 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);
- * `"registration"` is the 360px sign-up measure — the only START-aligned preset, because a
+ * `"registration"` is the 360px sign-up measure — start-aligned like `"login"`, 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.
+ * scroll origin, and the only preset with a footer-clearance knob of its own.
  * Orthogonal to AuthShell's `variant` (which owns control density and heading size) — combine them.
  */
 export type AuthShellPresetProp = "default" | "login" | "registration" | "device-authorization" | "context-selection" | "account-recovery";

package/dist/styles/alert-layout.css

@@ -47,44 +47,27 @@
     color: hsl(var(--foreground));
   }
 
-  [data-slot="alert"][data-dismissible] {
-    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.
-   */
+  /* variant="banner" (the <Banner> export) — the full-bleed page/shell attention strip.
+   * ONLY geometry changes here: every tone colour rule above applies unchanged, and the
+   * strip keeps its tone-coloured hairline on the block-end edge alone. All values are
+   * --banner-* component tokens (src/tokens/components/banner.css), so a consumer never
+   * writes CSS to place a banner and a service retunes the strip once via theme. */
   [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);
+    border-block-start-width: 0;
+    border-inline-width: 0;
+    border-block-end-width: var(--banner-border-width);
+    padding-block: var(--banner-space-inset-block);
+    padding-inline: var(--banner-space-inset-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);
+  [data-slot="alert"][data-dismissible] {
+    padding-inline-end: calc(var(--alert-space-inset) + var(--space-8));
   }
 
-  /* 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);
-    }
+  /* The banner strip reserves dismiss clearance from ITS inline inset, not the card's. */
+  [data-slot="alert"][data-variant="banner"][data-dismissible] {
+    padding-inline-end: calc(var(--banner-space-inset-inline) + var(--space-8));
   }
 
   [data-slot="alert-icon"] {

package/dist/styles/badge-layout.css

@@ -15,6 +15,11 @@
     border-radius: var(--radius-md);
     border-width: 1px;
     font-size: var(--badge-font-size);
+    /* The cva used to carry `text-xs`, which set BOTH font-size and the Tailwind companion
+     * line-height. It was dropped (gh#260) so this components-layer rule can own font-size —
+     * so line-height must be restored here too, or the badge would inherit the ambient body
+     * leading and grow taller. Default reproduces `text-xs` exactly. */
+    line-height: var(--badge-line-height);
     font-weight: var(--font-weight-medium);
     /* A status chip must read as one unit — never wrap its label across lines,
      * especially inside narrow table cells. */

package/dist/styles/control.css

@@ -827,6 +827,11 @@
   display: inline-flex;
   align-items: center;
   gap: var(--space-1);
+  /* A 10-star scale needs ~276px of hit area; a 320px viewport offers ~212 inside a card. Without
+   * wrapping, the last stars are painted outside the surface with nothing to scroll them into
+   * view, so they can be neither seen nor clicked (WCAG 2.1.1 / 2.4.7). Wrapping keeps every star
+   * reachable and is a no-op wherever the row already fits. */
+  flex-wrap: wrap;
 }
 .ui-rating-star {
   /* ≥24px hit area (WCAG 2.5.8) around the 20px glyph */