@godxjp/ui 21.0.0 → 22.0.0

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

@@ -1,7 +1,7 @@
 /** Barrel — all vocabulary prop types. */
 export type { ClassNameProp, ChildrenProp, IdProp, OpenProp, DefaultOpenProp, OnOpenChangeProp, HandlerProp, PendingProp, RequiredProp, DisabledProp, LabelProp, HelperProp, ErrorProp, ErrorBagProp, PlaceholderProp, NameProp, ValueProp, DefaultValueProp, OnValueChangeProp, OnChangeProp, OnClickProp, AsChildProp, FlushProp, WidthProp, ControlWidthProp, AllowClearProp, MaxTagCountProp, MaxTagPlaceholderProp, NotFoundContentProp, PopupMatchWidthProp, } from "./shared.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, MobileShellHeightProp, OrientationProp, TableDensityProp, DensityProp, GapNameProp, PadProp, PadRawProp, PadSides, GapProp, GapStepProp, } from "./layout.prop.js";
+export type { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, MobileShellHeightProp, MobileShellWidthProp, OrientationProp, TableDensityProp, DensityProp, GapNameProp, PadProp, PadRawProp, PadSides, GapProp, GapStepProp, } from "./layout.prop.js";
 export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, AppSettingToggleAppearanceProp, ShapeProp, AvatarShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, TextWhitespaceProp, SizeProp, ControlStatusProp, ControlVariantProp, FormLayoutProp, DescriptionsLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, ActivityVariantProp, ActivityAnnounceProp, } from "./interaction.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbProp, BreadcrumbItemMenuProp, BreadcrumbItemMenuEntryProp, BreadcrumbSeparatorProp, BreadcrumbItemRenderProp, } from "./navigation.prop.js";
-export type { GetRowIdProp, OnRowClickProp, ColumnDefProp, TablePresetProp, TableColumnPriorityProp, TableCellIndentProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, StickyProp, ColumnFixedProp, ColumnFilterValueProp, ColumnFilterItemProp, ColumnFilterStateProp, OnColumnFilterChangeProp, ColumnCompareProp, ColumnSorterProp, TableSelectionItemProp, TableRowSelectionProp, TableExpandableProp, TableSummaryProp, TableScrollProp, TableStickyProp, OnRowProp, TablePaginationProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, } from "./data.prop.js";
+export type { GetRowIdProp, OnRowClickProp, ColumnDefProp, TablePresetProp, TableColumnPriorityProp, TableCellIndentProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, TableRowToneProp, RowToneProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, StickyProp, ColumnFixedProp, ColumnFilterValueProp, ColumnFilterItemProp, ColumnFilterStateProp, OnColumnFilterChangeProp, ColumnCompareProp, ColumnSorterProp, TableSelectionItemProp, TableRowSelectionProp, TableExpandableProp, TableSummaryProp, TableScrollProp, TableStickyProp, OnRowProp, TablePaginationProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, } from "./data.prop.js";

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

@@ -26,6 +26,17 @@ export type CenteredShellAlignProp = "start" | "center";
  * where a viewport-tall root would overflow its frame. Nothing else differs between the two.
  */
 export type MobileShellHeightProp = "viewport" | "fill";
+/**
+ * MobileShell inline-size contract — the axis `height` had and `width` did not.
+ * `"fill"` (default, and what the shell has always done) takes the whole inline size it is given.
+ * `"phone"` caps it at the handheld measure (`--mobile-shell-max-inline-size`) and centres the
+ * column, for the case the shell's own docstring already names on the block axis: a handheld
+ * screen rendered on a viewport wider than a handheld — a device-frame preview, a desktop browser
+ * opening a mobile route, a phone view embedded in a wider page. Measured at a 1280px viewport
+ * before this existed: the shell drew 1232px wide with `max-inline-size: none`, so a 44px tab bar
+ * spread its four destinations across a metre of screen.
+ */
+export type MobileShellWidthProp = "fill" | "phone";
 /**
  * ErrorSurface shell contract — WHERE the exception surface lives, not how it looks.
  * `"application"` (403 / 404): the failure happened INSIDE the authenticated app, so the surface

package/dist/styles/badge-layout.css

@@ -26,6 +26,10 @@
     }
   }
 
+  [data-slot="badge"][data-tabular] {
+    font-variant-numeric: tabular-nums;
+  }
+
   [data-slot="badge"][data-tinted] {
 
     background-color: color-mix(

package/dist/styles/card-layout.css

@@ -44,27 +44,27 @@
   }
 
   [data-slot="card"][data-accent="primary"] {
-    --card-accent-color: hsl(var(--primary));
+    --card-accent-color: hsl(var(--mark-primary));
   }
 
   [data-slot="card"][data-accent="success"] {
-    --card-accent-color: hsl(var(--success));
+    --card-accent-color: hsl(var(--mark-success));
   }
 
   [data-slot="card"][data-accent="warning"] {
-    --card-accent-color: hsl(var(--warning));
+    --card-accent-color: hsl(var(--mark-warning));
   }
 
   [data-slot="card"][data-accent="info"] {
-    --card-accent-color: hsl(var(--info));
+    --card-accent-color: hsl(var(--mark-info));
   }
 
   [data-slot="card"][data-accent="attention"] {
-    --card-accent-color: hsl(var(--attention));
+    --card-accent-color: hsl(var(--mark-attention));
   }
 
   [data-slot="card"][data-accent="destructive"] {
-    --card-accent-color: hsl(var(--destructive));
+    --card-accent-color: hsl(var(--mark-destructive));
   }
 
   [data-slot="card"][data-accent] {

package/dist/styles/control.css

@@ -452,7 +452,7 @@
     fill: currentColor;
   }
 
-  .ui-switch[aria-invalid="true"] {
+  .ui-switch:has(input[aria-invalid="true"]) {
     --tw-ring-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));
     box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));
   }
@@ -988,6 +988,8 @@
   }
 
   .ui-segmented {
+
+    --segmented-item-height: calc(var(--control-height) - var(--segmented-track-padding) * 2);
     display: inline-flex;
     max-width: 100%;
     align-items: stretch;
@@ -1222,14 +1224,15 @@
     font-size: var(--font-size-base);
     pointer-events: none;
   }
-  .ui-number-input-affix:first-of-type {
+
+  [data-slot="number-input-prefix"] {
     inset-inline-start: var(--control-padding-x);
   }
 
-  .ui-number-input:has(.ui-number-input-affix:first-of-type) .ui-number-input-field {
+  .ui-number-input:has([data-slot="number-input-prefix"]) .ui-number-input-field {
     padding-inline-start: calc(var(--control-padding-x) + 1.25rem);
   }
-  .ui-number-input-affix:last-of-type {
+  [data-slot="number-input-suffix"] {
     inset-inline-end: calc(var(--control-height) + var(--space-2));
   }
   .ui-number-input-steppers {
@@ -2407,6 +2410,11 @@
     gap: var(--month-picker-grid-space-gap);
   }
 
+  .ui-month-picker-row,
+  .ui-month-picker-gridcell {
+    display: contents;
+  }
+
   .ui-month-picker-cell {
     padding-inline: var(--month-picker-cell-space-inline);
     font-weight: var(--font-weight-normal);
@@ -2782,7 +2790,7 @@
     border-color: hsl(var(--choice-button-solid-background));
   }
 
-  .ui-radio-button:disabled {
+  .ui-radio-button[data-disabled] {
     cursor: not-allowed;
     opacity: var(--disabled-opacity);
   }
@@ -2792,7 +2800,7 @@
     inline-size: 100%;
   }
 
-  .ui-segmented[data-block="true"] > .ui-segmented-item {
+  .ui-segmented[data-block="true"]:not([data-orientation="vertical"]) > .ui-segmented-item {
     flex: 1 1 0;
     min-inline-size: 0;
     justify-content: center;
@@ -2803,6 +2811,7 @@
   }
 
   .ui-segmented[data-orientation="vertical"] > .ui-segmented-item {
+    block-size: var(--control-height);
     justify-content: flex-start;
   }
 

package/dist/styles/data-display-layout.css

@@ -143,7 +143,7 @@
   }
 
   .ui-progress-track {
-    height: 0.5rem;
+    height: var(--progress-meter-block-size);
     overflow: hidden;
     border-radius: var(--radius-pill);
     background: var(--progress-track-background, hsl(var(--secondary)));
@@ -152,19 +152,19 @@
   .ui-progress-bar {
     height: 100%;
     border-radius: inherit;
-    background: var(--progress-fill-background, hsl(var(--success)));
+    background: var(--progress-fill-background, hsl(var(--mark-success)));
   }
 
   .ui-progress[data-tone="warning"] .ui-progress-bar {
-    background: hsl(var(--warning));
+    background: hsl(var(--mark-warning));
   }
 
   .ui-progress[data-tone="destructive"] .ui-progress-bar {
-    background: hsl(var(--destructive));
+    background: hsl(var(--mark-destructive));
   }
 
   .ui-progress[data-over] .ui-progress-bar {
-    background-color: hsl(var(--destructive));
+    background-color: hsl(var(--mark-destructive));
     background-image: repeating-linear-gradient(
       45deg,
       hsl(var(--destructive-foreground) / 0.4) 0,
@@ -180,20 +180,28 @@
     border-radius: var(--progress-breakdown-radius);
   }
 
+  .ui-progress[data-size="sm"] .ui-progress-track {
+    height: var(--progress-meter-block-size-sm);
+  }
+
+  .ui-progress[data-breakdown][data-size="sm"] .ui-progress-track {
+    height: var(--progress-breakdown-block-size-sm);
+  }
+
   .ui-progress-segment {
     height: 100%;
   }
 
   .ui-progress-segment[data-tone="success"] {
-    background: hsl(var(--success));
+    background: hsl(var(--mark-success));
   }
 
   .ui-progress-segment[data-tone="warning"] {
-    background: hsl(var(--warning));
+    background: hsl(var(--mark-warning));
   }
 
   .ui-progress-segment[data-tone="destructive"] {
-    background: hsl(var(--destructive));
+    background: hsl(var(--mark-destructive));
   }
 
   .ui-progress-label {
@@ -201,6 +209,61 @@
     font-size: var(--progress-label-font-size);
   }
 
+  .ui-progress[data-shape="ring"] {
+    display: inline-flex;
+  }
+
+  .ui-progress-ring {
+    position: relative;
+    display: inline-grid;
+    inline-size: var(--progress-ring-size);
+    block-size: var(--progress-ring-size);
+    place-items: center;
+  }
+
+  .ui-progress[data-size="sm"] .ui-progress-ring {
+    --progress-ring-size: var(--progress-ring-size-sm);
+  }
+
+  .ui-progress-ring-svg {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .ui-progress-ring-track,
+  .ui-progress-ring-indicator {
+    fill: none;
+    stroke-width: var(--progress-ring-border-width);
+  }
+
+  .ui-progress-ring-track {
+    stroke: var(--progress-track-background, hsl(var(--secondary)));
+  }
+
+  .ui-progress-ring-indicator {
+    stroke: var(--progress-fill-background, hsl(var(--mark-success)));
+
+    stroke-linecap: butt;
+  }
+
+  .ui-progress[data-tone="warning"] .ui-progress-ring-indicator {
+    stroke: hsl(var(--mark-warning));
+  }
+
+  .ui-progress[data-tone="destructive"] .ui-progress-ring-indicator {
+    stroke: hsl(var(--mark-destructive));
+  }
+
+  .ui-progress-ring-label {
+    position: relative;
+    color: hsl(var(--foreground));
+    font-size: var(--progress-ring-label-font-size);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+  }
+
   .ui-legend {
     display: flex;
     flex-wrap: wrap;
@@ -227,23 +290,23 @@
   }
 
   .ui-legend-swatch[data-tone="default"] {
-    background: hsl(var(--primary));
+    background: hsl(var(--mark-primary));
   }
 
   .ui-legend-swatch[data-tone="success"] {
-    background: hsl(var(--success));
+    background: hsl(var(--mark-success));
   }
 
   .ui-legend-swatch[data-tone="warning"] {
-    background: hsl(var(--warning));
+    background: hsl(var(--mark-warning));
   }
 
   .ui-legend-swatch[data-tone="destructive"] {
-    background: hsl(var(--destructive));
+    background: hsl(var(--mark-destructive));
   }
 
   .ui-legend-swatch[data-tone="info"] {
-    background: hsl(var(--info));
+    background: hsl(var(--mark-info));
   }
 
   .ui-legend-swatch[data-tone="muted"],

package/dist/styles/focus-ring.css

@@ -14,7 +14,6 @@
     .ui-checkbox,
     .ui-radio,
     .ui-slider-thumb,
-    .ui-switch,
     .ui-steps-inline-control,
     .ui-pagination-link,
     .ui-legal-document-toc-link,
@@ -30,6 +29,8 @@
   ):focus-visible,
 
   .ui-checkbox[data-focus-visible],
+  .ui-switch[data-focus-visible],
+  .ui-focus-ring[data-focus-visible],
   .ui-control-trigger[data-state="open"],
   .ui-tag-input:focus-within,
   .ui-control-composite-field:focus-within,
@@ -59,7 +60,6 @@
       .ui-checkbox,
       .ui-radio,
       .ui-slider-thumb,
-      .ui-switch,
       .ui-steps-inline-control,
       .ui-pagination-link,
       .ui-legal-document-toc-link,
@@ -75,6 +75,8 @@
     ):focus-visible,
 
   :root[data-focus-outline="on"] .ui-checkbox[data-focus-visible],
+  :root[data-focus-outline="on"] .ui-switch[data-focus-visible],
+  :root[data-focus-outline="on"] .ui-focus-ring[data-focus-visible],
   :root[data-focus-outline="on"] .ui-control-trigger[data-state="open"],
   :root[data-focus-outline="on"] .ui-tag-input:focus-within,
   :root[data-focus-outline="on"] .ui-control-composite-field:focus-within,

package/dist/styles/navigation-layout.css

@@ -96,6 +96,10 @@
 
   .ui-tabs-bar > [data-slot="tabs-list"] {
     min-inline-size: 0;
+    flex: 0 1 auto;
+  }
+
+  [data-slot="tabs"]:not([data-orientation="vertical"]) .ui-tabs-bar > [data-slot="tabs-list"] {
     flex: 1 1 auto;
   }
 
@@ -146,6 +150,27 @@
     block-size: var(--tabs-tab-remove-icon-size);
   }
 
+  .ui-tabs-overflow {
+    display: inline-flex;
+    flex: 0 0 auto;
+    inline-size: var(--tabs-overflow-size);
+    block-size: var(--tabs-overflow-size);
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--tabs-overflow-radius);
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-tabs-overflow:hover {
+    background: hsl(var(--accent));
+    color: hsl(var(--accent-foreground));
+  }
+
+  .ui-tabs-overflow-icon {
+    inline-size: var(--tabs-overflow-icon-size);
+    block-size: var(--tabs-overflow-icon-size);
+  }
+
   .ui-tabs-add {
     display: inline-flex;
     flex: 0 0 auto;

package/dist/styles/shell-layout.css

@@ -2332,6 +2332,11 @@
     --mobile-shell-block-size: 100%;
   }
 
+  .ui-mobile-shell[data-width="phone"] {
+    max-inline-size: var(--mobile-shell-max-inline-size);
+    margin-inline: auto;
+  }
+
   .ui-mobile-shell-chrome {
     display: flex;
     min-inline-size: 0;

package/dist/styles/table-layout.css

@@ -15,6 +15,40 @@
     border-block-end-width: 0;
   }
 
+  .ui-table-row[data-tone="primary"] {
+    --table-row-tone-color: var(--mark-primary);
+  }
+
+  .ui-table-row[data-tone="success"] {
+    --table-row-tone-color: var(--mark-success);
+  }
+
+  .ui-table-row[data-tone="warning"] {
+    --table-row-tone-color: var(--mark-warning);
+  }
+
+  .ui-table-row[data-tone="info"] {
+    --table-row-tone-color: var(--mark-info);
+  }
+
+  .ui-table-row[data-tone="attention"] {
+    --table-row-tone-color: var(--mark-attention);
+  }
+
+  .ui-table-row[data-tone="destructive"] {
+    --table-row-tone-color: var(--mark-destructive);
+  }
+
+  .ui-table-row[data-tone] {
+    background: hsl(var(--table-row-tone-color) / var(--table-row-tone-wash-alpha));
+  }
+
+  .ui-table-row[data-tone] > [data-slot="table-cell"]:first-child {
+    border-inline-start: var(--table-row-tone-rail-width) solid
+      hsl(var(--table-row-tone-color));
+    padding-inline-start: calc(var(--table-cell-space-x) - var(--table-row-tone-rail-width));
+  }
+
   [data-slot="table-head"] {
     height: var(--table-row-height);
     padding: var(--table-cell-padding-y) var(--table-cell-space-x);

package/dist/tokens/components/data-display.css

@@ -65,6 +65,15 @@
   --progress-breakdown-block-size: 1.375rem;
   --progress-breakdown-radius: var(--radius);
 
+  --progress-meter-block-size: 0.5rem;
+  --progress-meter-block-size-sm: 0.25rem;
+  --progress-breakdown-block-size-sm: 0.5rem;
+
+  --progress-ring-size: 2.75rem;
+  --progress-ring-size-sm: 2rem;
+  --progress-ring-border-width: var(--stroke-lg);
+  --progress-ring-label-font-size: var(--font-size-xs);
+
   --legend-gap: 0.875rem;
   --legend-item-gap: 0.3125rem;
   --legend-swatch-size: 0.625rem;

package/dist/tokens/components/navigation.css

@@ -49,6 +49,8 @@
 
   --tabs-list-line-space-inset: 0px;
 
+  --tabs-list-line-space-gap: 0.25rem;
+
   --tabs-list-focus-ring-space-inset: initial;
 
   --tabs-trigger-line-radius: 0px;
@@ -74,6 +76,10 @@
 
   --tabs-bar-gap: var(--space-2);
   --tabs-extra-gap: var(--space-2);
+
+  --tabs-overflow-size: var(--band-height-md);
+  --tabs-overflow-radius: var(--radius-md);
+  --tabs-overflow-icon-size: var(--control-icon-size);
   --tabs-add-size: var(--band-height-md);
   --tabs-add-radius: var(--radius-md);
   --tabs-add-icon-size: var(--control-icon-size);

package/dist/tokens/components/segmented.css

@@ -9,8 +9,6 @@
   --segmented-track-radius: var(--radius);
   --segmented-item-radius: var(--radius-md);
 
-  --segmented-item-height: calc(var(--control-height) - var(--segmented-track-padding) * 2);
-
   --segmented-item-padding-inline: calc(var(--control-padding-x) - 1px);
 
   --segmented-item-gap: calc(var(--space-3) / 2);

package/dist/tokens/components/shell.css

@@ -355,6 +355,8 @@
 
 :root {
   --mobile-shell-block-size: 100dvh;
+
+  --mobile-shell-max-inline-size: 26.875rem;
   --mobile-shell-safe-inset-block-start: env(safe-area-inset-top);
   --mobile-shell-safe-inset-block-end: env(safe-area-inset-bottom);
   --mobile-shell-safe-inset-inline: max(env(safe-area-inset-left), env(safe-area-inset-right));

package/dist/tokens/components/table.css

@@ -91,4 +91,7 @@
   --table-row-border-width: var(--stroke-hairline);
 
   --table-flush-divider-width: var(--table-row-border-width);
+
+  --table-row-tone-rail-width: var(--stroke-2xl);
+  --table-row-tone-wash-alpha: 0.06;
 }

package/dist/tokens/foundation.css

@@ -47,6 +47,13 @@
   --text-info: 221 70% 38%;
   --text-error: 357 75% 38%;
 
+  --mark-primary: var(--text-primary);
+  --mark-success: var(--text-success);
+  --mark-warning: var(--text-warning);
+  --mark-info: var(--text-info);
+  --mark-destructive: var(--text-error);
+  --mark-attention: var(--attention);
+
   --secondary-hover: 45 15% 91%;
   --secondary-active: 45 15% 88%;
 

package/docs/COMPONENTS.md

@@ -48,8 +48,8 @@ All UI is **mobile-first**: base layout targets ~320–428px viewport; `sm` (640
 
 Default `direction="row"`; use `direction="col"` for vertical rhythm.
 
-| Component | Prop       | Key props                                                                                            |
-| --------- | ---------- | ---------------------------------------------------------------------------------------------------- |
+| Component | Prop       | Key props                                                                                                           |
+| --------- | ---------- | ------------------------------------------------------------------------------------------------------------------- |
 | `Flex`    | `FlexProp` | `direction: "row" \| "col"`, `gap: GapProp`, `gapRaw`, `pad`, `padRaw`, `fill`, `width`, `align`, `justify`, `wrap` |
 
 `fill` / `width` are the `fixed | elastic | fixed` row: `width` pins a column (number = px, and
@@ -82,25 +82,25 @@ and sets `min-inline-size: 0` so a truncating child ellipses instead of widening
 | `Textarea`    | `TextareaProp`    | extends native textarea                            |
 | `FormField`   | `FormFieldProp`   | `id`, `label`, `required`, `helper`, `error`       |
 | `SearchInput` | `SearchInputProp` | `onSearchChange: OnSearchChangeProp`               |
-| `Checkbox`    | `CheckboxProp`    | Radix checkbox; `Checkbox.Group` với `options`     |
+| `Checkbox`    | `CheckboxProp`    | Checkbox (RAC); `Checkbox.Group` với `options`     |
 | `Radio`       | `RadioGroupProp`  | `Radio.Group` single-select; `Radio.Root` compound |
 
 ---
 
 ## Data Display
 
-| Component      | Prop type          | Key props                                |
-| -------------- | ------------------ | ---------------------------------------- |
-| `EmptyState`   | `EmptyStateProp`   | `icon`, `title`, `description`, `action` |
-| `DataTable`    | `DataTableProp<T>` | `columns`, `density: TableDensityProp`   |
-| `Descriptions` | `DescriptionsProp` | `items[]`                                |
-| `Badge`        | `BadgeProp`        | `status`, `tone: ToneProp`               |
-| `Badge`        | `BadgeProp`        | shadcn badge variants                    |
+| Component      | Prop type          | Key props                                 |
+| -------------- | ------------------ | ----------------------------------------- |
+| `EmptyState`   | `EmptyStateProp`   | `icon`, `title`, `description`, `action`  |
+| `DataTable`    | `DataTableProp<T>` | `columns`, `density: TableDensityProp`    |
+| `Descriptions` | `DescriptionsProp` | `items[]`                                 |
+| `Badge`        | `BadgeProp`        | `status`, `tone: ToneProp`                |
+| `Badge`        | `BadgeProp`        | shadcn badge variants                     |
 | `Progress`     | `ProgressProp`     | `value` (meter) \| `segments` (breakdown) |
-| `Legend`       | `LegendProp`       | `items[]` — the key for a tone           |
-| `Popover`      | Radix primitives   | floating content panel                   |
-| `ScrollArea`   | Radix primitives   | scrollable regions                       |
-| `Collapsible`  | Radix primitives   | expand/collapse sections                 |
+| `Legend`       | `LegendProp`       | `items[]` — the key for a tone            |
+| `Popover`      | Radix primitives   | floating content panel                    |
+| `ScrollArea`   | Radix primitives   | scrollable regions                        |
+| `Collapsible`  | Radix primitives   | expand/collapse sections                  |
 
 ---
 

package/docs/CONSUMER-RULES.md

@@ -6,7 +6,7 @@ Read this once; the audit enforces it. Everything else in `docs/` is for contrib
 2. Every page is `<PageContainer title subtitle extra footer>`; its sections are spaced by the page. Group items inside a section with `<Flex direction="col" gap>` or `<ResponsiveGrid>`.
 3. No Tailwind layout on your own elements: no `flex`, `grid`, `gap-*`, `p-*`, `m-*`, `space-*`. Rows are `<Flex>` (default row), stacks are `<Flex direction="col">`, grids are `<ResponsiveGrid>`.
 4. No hand-rolled surfaces: no `rounded-* border bg-*` divs. A box is `Card`, a pill is `Badge`, a person is `Avatar`, a row is `ListRow`, a label/value pair is `Descriptions`, an empty area is `EmptyState`.
-5. Real controls only: `Button`, `Input`, `Select`, `Textarea`, `Checkbox`… never raw `<button>`/`<input>`; a labelled control lives in `<FormField label>`. A Select outside a form takes `width="auto"`.
+5. Real controls only: `Button`, `Input`, `Select`, `Textarea`, `Checkbox`… never raw `<button>`/`<input>`; a labelled control lives in `<FormField label>`. A Select outside a form takes `width="auto"`. **A disabled control's reason is visible text, never a tooltip** — see below.
 6. Text is `<Text>` / `<Heading>` with `tone`, `size`, `weight`, `truncate`, `mono` — not `className="text-muted-foreground font-semibold"`.
 7. Colours are semantic tokens (`tone="destructive"`, `bg-primary`), never palette names, hex, or `bg-black` / `text-white`.
 8. Sizes come from props (`size`, `width`, `columns`), never `w-[240px]` / `max-h-[420px]`.
@@ -25,3 +25,26 @@ const legacyClasses = ["gap-3", "p-2"];
 ```
 
 A block with no reason (or under 12 characters of it) is ignored and the finding stands; an unclosed block runs to the end of the file. The class-shaped rules (`gap-*`, `bg-red-500`, `w-[37px]`, `pr-*`, `dark:*`) only read class expressions — a `className`/`class` attribute, a class-named binding (`baseClass`, `statusStyles`, `badgeVariants`) or a `cn()`/`clsx()`/`cva()` call — so product copy or an i18n value that happens to spell a utility is never a finding.
+
+---
+
+## Why a disabled control's reason cannot be a tooltip
+
+A disabled `<button>` receives no pointer events and is not in the tab order, so an explanation
+attached to it never reaches anyone. Measured in Chromium on this package's own tooltip page: the
+same trigger produced **1** tooltip on hover while enabled and **0** while disabled, and calling
+`focus()` on it left `document.activeElement` as `BODY` — so keyboard and touch get nothing either.
+Hover-only would fail a touch user in any case.
+
+This is not a gap waiting for a DS prop. The reason is required information, and required
+information belongs on the screen:
+
+- Render it as a `<Text size="xs" tone="muted">` line **before** the control, so a screen-reader or
+  keyboard user meets the explanation ahead of the thing they cannot use (WCAG 2.2 · 1.3.2,
+  meaningful sequence).
+- `ServiceLauncherCard` already has this shape as a prop — `disabledReason`, rendered above the
+  action — and it is the pattern to copy anywhere else.
+
+If the control is disabled *pending something the user can fix*, prefer leaving it enabled and
+explaining on submit: an inert control with a paragraph beside it is often a validation message
+wearing a disguise.

package/docs/FRAME-COVERAGE-REPORT.md

@@ -3,8 +3,8 @@
 > Generated by `scripts/frame-coverage.mjs` (issue #163). Do not edit by hand — run `pnpm check:frame-coverage`.
 > Standard: [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md). A missing dimension is **UNTESTED**, never a pass.
 
-- Public components: **141**
-- With ≥1 frame: **136** · zero-frame: **5**
+- Public components: **138**
+- With ≥1 frame: **133** · zero-frame: **5**
 - Fully covered (every contract axis declared): **0**
 
 ## UNTESTED — no `/frame/**` route
@@ -60,7 +60,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | QrCode | ✓ | ✓ | N/A | · | · | · | · | · | · | · |
 | Descriptions | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | EmptyState | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
-| Progress | ✓ | ✓ | N/A | · | · | · | · | · | · | · |
+| Progress | ✓ | · | N/A | · | · | · | · | · | · | · |
 | CodeBlock | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | Prose | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | Timeline | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
@@ -80,8 +80,6 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | Label | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | Checkbox | ✓ | N/A | · | · | · | · | · | · | · | · |
 | RadioGroup | ✓ | N/A | · | · | · | · | · | · | · | · |
-| MonthPicker | ✓ | · | · | · | · | · | · | · | · | · |
-| MonthRangePicker | ✓ | · | · | · | · | · | · | · | · | · |
 | DatePicker | ✓ | · | · | · | · | · | · | · | · | · |
 | Dialog | ✓ | N/A | N/A | · | · | · | · | · | · | · |
 | AlertDialog | ✓ | ✓ | · | · | · | · | · | · | · | · |
@@ -99,7 +97,6 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | AppProvider | ✓ | · | · | · | · | · | · | · | · | · |
 | formatDate | ✓ | · | · | · | · | · | · | · | · | · |
 | TimePicker | ✓ | · | · | · | · | · | · | · | · | · |
-| DateRangePicker | ✓ | · | · | · | · | · | · | · | · | · |
 | Cascader | ✓ | ✓ | · | · | · | · | · | · | · | · |
 | TreeSelect | ✓ | ✓ | · | · | · | · | · | · | · | · |
 | Transfer | ✓ | N/A | · | · | · | · | · | · | · | · |