@godxjp/ui 19.2.0 → 19.4.0

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

@@ -1,7 +1,7 @@
 /** 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, StatusProp, ExtraProp, FooterProp, PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, OrientationProp, TextAlignProp, TextToneProp, BreakpointProp, GapProp, ClassNameProp, ChildrenProp, IdProp, DisabledProp, DescriptionProp, ActionProp, IconProp, HeadingLevelProp, ToneProp } from "../vocabulary/index.js";
+import type { BreadcrumbProp, TitleProp, SubtitleProp, StatusProp, ExtraProp, FooterProp, PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, MobileShellHeightProp, OrientationProp, TextAlignProp, TextToneProp, BreakpointProp, GapProp, ClassNameProp, ChildrenProp, IdProp, DisabledProp, DescriptionProp, ActionProp, IconProp, HeadingLevelProp, ToneProp } 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.
@@ -102,6 +102,14 @@ export type FlexAlignProp = "start" | "center" | "end" | "stretch" | "baseline";
 export type FlexJustifyProp = "start" | "center" | "end" | "between" | "around" | "evenly";
 /** @see Flex */
 export type FlexProp = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Render element — `div` (default) or `span` when the Flex sits in a PHRASING context and a
+     * `<div>` would be invalid HTML: inside a `TabsTrigger`/`PopoverTrigger`/`Button` (all of which
+     * render a `<button>`, whose content model is phrasing content only), inside a `<label>`, or
+     * inside a `<p>`. Same closed shape as `ListRow`'s `as` — it swaps the TAG, nothing else: the
+     * `.ui-flex` rules carry `display: flex`, so the box is identical either way (gh#354).
+     */
+    as?: "div" | "span";
     direction?: FlexDirectionProp;
     gap?: GapProp;
     align?: FlexAlignProp;
@@ -226,6 +234,13 @@ export type AuthShellProp = {
     children: ReactNode;
     /** Brand bar slot pinned to the top (e.g. a `<Logo>` / product mark). */
     brand?: ReactNode;
+    /**
+     * Page-level controls pinned to the TOP-RIGHT of the same banner row as `brand` — a locale
+     * picker, a theme toggle, a "need help?" link. These belong to the PAGE, not to the auth form,
+     * which is why they sit in the bar rather than inside the card. The banner renders as soon as
+     * `brand` OR `actions` is present, so an actions-only bar is a legal shape.
+     */
+    actions?: ActionProp;
     /** Footer slot pinned to the bottom (legal links, locale switch, support). */
     footer?: ReactNode;
     /**
@@ -242,6 +257,16 @@ export type AuthShellProp = {
      * canonical 1440x900, 1024x900 and 390x844 viewports.
      */
     preset?: AuthShellPresetProp;
+    /**
+     * Inline MEASURE of the shell's content slot. `"default"` keeps the single auth card (24rem, or
+     * the canonical variant's 22.5rem). `"wide"` opens the slot to
+     * `--auth-shell-wide-card-max-width` so a SPLIT login fits — a brand/marketing panel beside the
+     * auth card, the shape that previously had no shell and reached for `CenteredShell`. The wide
+     * slot centres itself with auto margins, so a tall two-column layout starts at the top instead
+     * of overflowing above the scroll origin. Ignored under a `preset`: a preset already owns its
+     * flow geometry.
+     */
+    measure?: "default" | "wide";
     /**
      * Vertical density scoped to auth-card descendants. The canonical variant defaults to
      * `"compact"`; the default variant defaults to `"comfortable"`.
@@ -249,6 +274,68 @@ export type AuthShellProp = {
     density?: "comfortable" | "compact";
     className?: ClassNameProp;
 };
+/**
+ * @see MobileShell — the HANDHELD app shell: a status band, an app bar, ONE scroll region, a
+ * sticky action bar and a bottom tab bar, in that fixed order.
+ *
+ * It is the fourth root shell, and it exists because the other three cannot express a phone app:
+ * `AppShell` REQUIRES a sidebar (its bar is a grid area beside the nav rail), `AuthShell` is the
+ * UNAUTHENTICATED root and centres a ~24rem card, and `CenteredShell` is a scrolling DOCUMENT —
+ * its `main` scrolls the page, which is exactly what a handheld app must not do. Composing one out
+ * of `Card` + `ui-card-inset*` (what docs/showcase/case6 did before gh#354) reproduces the look
+ * and none of the two behaviours that matter on a real device:
+ *
+ *  1. The shell is the only scroll container. The root is exactly one screen tall, so the DOCUMENT
+ *     never scrolls and the tab bar never slides away under a collapsing URL bar.
+ *  2. Every band pads itself out of `env(safe-area-inset-*)`, so the notch never covers the app
+ *     bar and the home indicator never covers the primary verb.
+ *
+ * Layout-only, like the other shells: it paints chrome and owns geometry, and delegates motion to
+ * `Reveal`. Never nest it inside another shell — it is a ROOT.
+ */
+export type MobileShellProp = {
+    /**
+     * The scrolling screen body — the ONLY scroll container in the shell, and the only elastic band.
+     * Everything else is fixed chrome, so a long list scrolls under a stationary app bar and tab bar.
+     */
+    children: ReactNode;
+    /**
+     * App bar (banner) pinned to the top: the screen title plus its inline actions. When there is no
+     * `statusBar` this band absorbs the top safe-area inset itself. Omit → no banner.
+     *
+     * On a screen with a MODE (multi-select, search, edit) swap the whole node rather than stacking a
+     * second strip under it — replacing the bar's contents is the platform pattern on both iOS and
+     * Android, and it keeps one bar to read instead of two.
+     */
+    header?: ReactNode;
+    /**
+     * The band that sits IN the OS status-bar strip above the app bar — the carrier/clock row of a
+     * `display-mode: standalone` PWA, or the simulated one in a device-frame preview. It absorbs the
+     * top safe-area inset when present. Omit it in an ordinary browser tab, where the OS already owns
+     * that strip: the header then takes the inset.
+     */
+    statusBar?: ReactNode;
+    /**
+     * The sticky action bar pinned above the tab bar — the screen's primary verb (Scan, Save, Hand
+     * over) and at most one secondary. It sits OUTSIDE the scroll region, so it is always reachable
+     * without `position: sticky` and without a scroll-padding hack, and it takes the home-indicator
+     * inset whenever no tab bar follows it.
+     */
+    actions?: ActionProp;
+    /**
+     * Bottom tab bar (navigation) — the app's top-level destinations. Its children TILE: equal width,
+     * no seam, no page gutter, so the consumer never hand-rolls a grid with a column count. Always
+     * the last band, so it owns the home-indicator inset.
+     */
+    tabBar?: ReactNode;
+    /**
+     * Where the shell's one-screen height comes from. `"viewport"` (default) is the real app —
+     * exactly `100dvh`, document never scrolls. `"fill"` fills a BOUNDED parent instead (a
+     * device-frame preview, a phone view embedded in a wider page).
+     */
+    height?: MobileShellHeightProp;
+    className?: ClassNameProp;
+};
 /**
  * @see Separator — the tokenized rule, optionally INTERRUPTED by a localized label.
  *
@@ -256,7 +343,7 @@ export type AuthShellProp = {
  * what they have always been: an inert Radix rule, `decorative` by default, nothing announced.
  * With a `label` the root becomes the three-cell grid `rule · label · rule` and, because
  * "new messages" is CONTENT rather than decoration, a real `role="separator"` carrying the label
- * as its accessible name (gh#308). Every constant — rule weight, label gap, label inset, label
+ * as its accessible name. Every constant — rule weight, label gap, label inset, label
  * type ramp, rule and label colour per tone — is a `--separator-*` component token (rules #44/#45),
  * so a service retunes a day divider or an unread watermark from its theme and never forks CSS.
  */
@@ -284,7 +371,7 @@ export type SeparatorProp = Omit<React.HTMLAttributes<HTMLDivElement>, "children
     decorative?: boolean;
     className?: ClassNameProp;
 };
-/** @see AuthDivider — the auth-scoped preset over `Separator label` (gh#308). */
+/** @see AuthDivider — the auth-scoped preset over `Separator label`. */
 export type AuthDividerProp = {
     /** Short localized conjunction rendered between the two separator rules (for example, "or"). */
     label: string;
@@ -577,7 +664,7 @@ export type SidebarLinkComponentProp = ComponentType<SidebarLinkProp>;
  * @deprecated Prefer `Sidebar.linkComponent` (or `SidebarItem asChild`), where the library composes
  * the row and the consumer supplies only the element. `renderItem` leaves row CONTENT to the
  * consumer, which is how a `<Link>{item.label}</Link>` silently dropped every icon and badge
- * (gh#213). Spreading `rowProps` — including its `children` — now yields the canonical row.
+ *. Spreading `rowProps` — including its `children` — now yields the canonical row.
  */
 export type SidebarRenderItemProp = {
     className: string;
@@ -662,7 +749,7 @@ export type SidebarProp = {
     collapsed?: boolean;
     children?: ChildrenProp;
     /**
-     * THE framework-router contract (gh#213). Supply only the LINK ELEMENT TYPE; the Sidebar still
+     * THE framework-router contract. Supply only the LINK ELEMENT TYPE; the Sidebar still
      * composes the row — icon slot, label, badge, `data-active`/`aria-current`, the icon-only
      * collapsed rail and its tooltip name — and passes it as {@link SidebarLinkProp} `children`.
      * Used for every row that carries an `href`: top-level leaves, submenu children, collapsed-rail
@@ -690,7 +777,7 @@ export type SidebarProp = {
      *
      * Legacy escape hatch: return a SINGLE interactive element and the Sidebar merges the row styling
      * + active state onto it via Slot. Because row CONTENT stayed consumer-authored, a
-     * `<Link>{item.label}</Link>` silently dropped every icon and badge (the gh#213 production
+     * `<Link>{item.label}</Link>` silently dropped every icon and badge (the production
      * regression). `rowProps` now also carries the composed `children`, so spreading it restores the
      * canonical row.
      */

package/dist/props/registry.d.ts

@@ -114,6 +114,11 @@ export declare const VOCABULARY_REGISTRY: {
         readonly category: "shared";
         readonly description: "Radix asChild polymorphism";
     };
+    readonly FlushProp: {
+        readonly file: "vocabulary/shared.prop.ts";
+        readonly category: "shared";
+        readonly description: "Content owns its own inset — the container drops its padding so the child reaches the frame edge (CardContent/CardFooter flush, TableCell flush, PopoverContent flush)";
+    };
     readonly WidthProp: {
         readonly file: "vocabulary/shared.prop.ts";
         readonly category: "shared";
@@ -209,6 +214,11 @@ export declare const VOCABULARY_REGISTRY: {
         readonly category: "layout";
         readonly description: "CenteredShell column block alignment — start (flowing page), center (system surface)";
     };
+    readonly MobileShellHeightProp: {
+        readonly file: "vocabulary/layout.prop.ts";
+        readonly category: "layout";
+        readonly description: "MobileShell block-size contract — viewport (100dvh root, the real app) | fill (fills a bounded parent, e.g. a device-frame preview)";
+    };
     readonly CenteredShellPresetProp: {
         readonly file: "vocabulary/layout.prop.ts";
         readonly category: "layout";
@@ -224,6 +234,11 @@ export declare const VOCABULARY_REGISTRY: {
         readonly category: "data";
         readonly description: "Table column priority for the action-collection preset — primary | secondary | meta | actions (unset = takes the remaining space)";
     };
+    readonly TableCellIndentProp: {
+        readonly file: "vocabulary/data.prop.ts";
+        readonly category: "data";
+        readonly description: "TableCell hierarchy depth — indent = --table-cell-space-x + depth x --table-cell-indent-space-step (tree rows, grouped detail rows)";
+    };
     readonly ErrorSurfaceModeProp: {
         readonly file: "vocabulary/layout.prop.ts";
         readonly category: "layout";
@@ -540,6 +555,10 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
         readonly vocabulary: readonly [{
+            readonly field: "as";
+            readonly local: true;
+            readonly reason: "Closed tag seam (div | span) so a Flex stays valid HTML inside a phrasing-only parent such as the <button> a TabsTrigger renders — same shape as ListRow's `as` (gh#354).";
+        }, {
             readonly field: "direction";
             readonly local: true;
             readonly reason: "Flex-specific axis control.";
@@ -648,7 +667,28 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly field: "density";
             readonly local: true;
             readonly reason: "Auth-specific vertical-density scope for card descendants.";
-        }, "AuthShellPresetProp"];
+        }, {
+            readonly field: "measure";
+            readonly local: true;
+            readonly reason: "Auth-shell content-slot measure; wide is the split brand-panel login.";
+        }, "ActionProp", "AuthShellPresetProp"];
+    };
+    readonly MobileShellProp: {
+        readonly group: "layout";
+        readonly file: "components/layout.prop.ts";
+        readonly vocabulary: readonly ["ChildrenProp", "ClassNameProp", "ActionProp", "MobileShellHeightProp", {
+            readonly field: "header";
+            readonly local: true;
+            readonly reason: "MobileShell app-bar band — the screen title row; it absorbs the top safe-area inset when no statusBar precedes it.";
+        }, {
+            readonly field: "statusBar";
+            readonly local: true;
+            readonly reason: "MobileShell OS status-bar band — standalone/PWA chrome or a device-frame preview; owns the top safe-area inset.";
+        }, {
+            readonly field: "tabBar";
+            readonly local: true;
+            readonly reason: "MobileShell bottom navigation band — tiling equal-width destinations; owns the home-indicator inset.";
+        }];
     };
     readonly SeparatorProp: {
         readonly group: "layout";
@@ -1160,7 +1200,15 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly BadgeProp: {
         readonly group: "data-display";
         readonly file: "components/data-display.prop.ts";
-        readonly vocabulary: readonly ["BadgeVariantProp", "ShapeProp", "ToneProp", "ChildrenProp", "ClassNameProp"];
+        readonly vocabulary: readonly [{
+            readonly field: "as";
+            readonly local: true;
+            readonly reason: "Closed tag seam (div | span) so a chip stays valid HTML inside a phrasing-only parent such as the <button> a TabsTrigger renders — same shape as ListRow's `as` (gh#354).";
+        }, "BadgeVariantProp", "ShapeProp", "ToneProp", "ChildrenProp", "ClassNameProp", {
+            readonly field: "color";
+            readonly local: true;
+            readonly reason: "The entity's OWN colour as a CSS colour string — DATA a person picked in a settings screen (a status, an issue type, a tag), a third axis beside `variant` (structure) and `tone` (meaning). No vocabulary type fits: ToneProp is the closed semantic set, and this value is open by definition. Washed into --badge-tint-surface rather than filled, because no foreground clears WCAG AA against every colour a picker can produce.";
+        }];
     };
     readonly DataTableProp: {
         readonly group: "data-display";
@@ -1721,6 +1769,69 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-display/timeline.tsx";
         readonly vocabulary: readonly ["ClassNameProp"];
     };
+    readonly TimelineGridColumnProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["IdProp", "LabelProp", "DescriptionProp", {
+            readonly field: "current";
+            readonly local: true;
+            readonly reason: "Marks the column as now/today — it carries the tint and hosts the grid's now marker.";
+        }];
+    };
+    readonly TimelineGridEventProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["IdProp", "TitleProp", "DescriptionProp", {
+            readonly field: "columnId";
+            readonly local: true;
+            readonly reason: "Id of the column the event belongs to (see TimelineGridColumnProp.id).";
+        }, {
+            readonly field: "start";
+            readonly local: true;
+            readonly reason: 'Start clock time in the column\'s own day, "HH:MM" — no date, no timezone.';
+        }, {
+            readonly field: "end";
+            readonly local: true;
+            readonly reason: 'End clock time, "HH:MM"; at or before start means the event continues into the next day.';
+        }, {
+            readonly field: "color";
+            readonly local: true;
+            readonly reason: "The record's own colour, washed into the block exactly like Badge `color` — decorative, never the only signal.";
+        }];
+    };
+    readonly TimelineGridProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["LabelProp", "ClassNameProp", "IdProp", {
+            readonly field: "columns";
+            readonly local: true;
+            readonly reason: "Consumer-supplied columns in render order (see TimelineGridColumnProp).";
+        }, {
+            readonly field: "events";
+            readonly local: true;
+            readonly reason: "Consumer-supplied events (see TimelineGridEventProp).";
+        }, {
+            readonly field: "start";
+            readonly local: true;
+            readonly reason: 'First clock time on the axis, "HH:MM"; defaults to the earliest event on the hour so a block can only fall outside a PINNED axis.';
+        }, {
+            readonly field: "end";
+            readonly local: true;
+            readonly reason: 'Last clock time on the axis, "HH:MM"; defaults to the latest event on the hour.';
+        }, {
+            readonly field: "interval";
+            readonly local: true;
+            readonly reason: "Hours between hour rules and axis labels (default 1).";
+        }, {
+            readonly field: "now";
+            readonly local: true;
+            readonly reason: 'Current clock time, "HH:MM" — draws the now marker in the columns marked current.';
+        }, {
+            readonly field: "onEventSelect";
+            readonly local: true;
+            readonly reason: "Block click handler carrying the event; its presence turns every block into a real button.";
+        }];
+    };
     readonly TreeListProp: {
         readonly group: "data-display";
         readonly file: "components/data-display/tree-list.tsx";

package/dist/props/registry.js

@@ -110,6 +110,11 @@ const VOCABULARY_REGISTRY = {
     category: "shared",
     description: "Radix asChild polymorphism"
   },
+  FlushProp: {
+    file: "vocabulary/shared.prop.ts",
+    category: "shared",
+    description: "Content owns its own inset \u2014 the container drops its padding so the child reaches the frame edge (CardContent/CardFooter flush, TableCell flush, PopoverContent flush)"
+  },
   WidthProp: {
     file: "vocabulary/shared.prop.ts",
     category: "shared",
@@ -207,6 +212,11 @@ const VOCABULARY_REGISTRY = {
     category: "layout",
     description: "CenteredShell column block alignment \u2014 start (flowing page), center (system surface)"
   },
+  MobileShellHeightProp: {
+    file: "vocabulary/layout.prop.ts",
+    category: "layout",
+    description: "MobileShell block-size contract \u2014 viewport (100dvh root, the real app) | fill (fills a bounded parent, e.g. a device-frame preview)"
+  },
   CenteredShellPresetProp: {
     file: "vocabulary/layout.prop.ts",
     category: "layout",
@@ -222,6 +232,11 @@ const VOCABULARY_REGISTRY = {
     category: "data",
     description: "Table column priority for the action-collection preset \u2014 primary | secondary | meta | actions (unset = takes the remaining space)"
   },
+  TableCellIndentProp: {
+    file: "vocabulary/data.prop.ts",
+    category: "data",
+    description: "TableCell hierarchy depth \u2014 indent = --table-cell-space-x + depth x --table-cell-indent-space-step (tree rows, grouped detail rows)"
+  },
   ErrorSurfaceModeProp: {
     file: "vocabulary/layout.prop.ts",
     category: "layout",
@@ -546,6 +561,11 @@ const COMPONENT_PROP_REGISTRY = {
     group: "layout",
     file: "components/layout.prop.ts",
     vocabulary: [
+      {
+        field: "as",
+        local: true,
+        reason: "Closed tag seam (div | span) so a Flex stays valid HTML inside a phrasing-only parent such as the <button> a TabsTrigger renders \u2014 same shape as ListRow's `as` (gh#354)."
+      },
       { field: "direction", local: true, reason: "Flex-specific axis control." },
       "GapProp",
       { field: "align", local: true, reason: "Flex-specific align-items keyword subset." },
@@ -656,9 +676,40 @@ const COMPONENT_PROP_REGISTRY = {
         local: true,
         reason: "Auth-specific vertical-density scope for card descendants."
       },
+      {
+        field: "measure",
+        local: true,
+        reason: "Auth-shell content-slot measure; wide is the split brand-panel login."
+      },
+      "ActionProp",
       "AuthShellPresetProp"
     ]
   },
+  MobileShellProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: [
+      "ChildrenProp",
+      "ClassNameProp",
+      "ActionProp",
+      "MobileShellHeightProp",
+      {
+        field: "header",
+        local: true,
+        reason: "MobileShell app-bar band \u2014 the screen title row; it absorbs the top safe-area inset when no statusBar precedes it."
+      },
+      {
+        field: "statusBar",
+        local: true,
+        reason: "MobileShell OS status-bar band \u2014 standalone/PWA chrome or a device-frame preview; owns the top safe-area inset."
+      },
+      {
+        field: "tabBar",
+        local: true,
+        reason: "MobileShell bottom navigation band \u2014 tiling equal-width destinations; owns the home-indicator inset."
+      }
+    ]
+  },
   SeparatorProp: {
     group: "layout",
     file: "components/layout.prop.ts",
@@ -1345,7 +1396,23 @@ const COMPONENT_PROP_REGISTRY = {
   BadgeProp: {
     group: "data-display",
     file: "components/data-display.prop.ts",
-    vocabulary: ["BadgeVariantProp", "ShapeProp", "ToneProp", "ChildrenProp", "ClassNameProp"]
+    vocabulary: [
+      {
+        field: "as",
+        local: true,
+        reason: "Closed tag seam (div | span) so a chip stays valid HTML inside a phrasing-only parent such as the <button> a TabsTrigger renders \u2014 same shape as ListRow's `as` (gh#354)."
+      },
+      "BadgeVariantProp",
+      "ShapeProp",
+      "ToneProp",
+      "ChildrenProp",
+      "ClassNameProp",
+      {
+        field: "color",
+        local: true,
+        reason: "The entity's OWN colour as a CSS colour string \u2014 DATA a person picked in a settings screen (a status, an issue type, a tag), a third axis beside `variant` (structure) and `tone` (meaning). No vocabulary type fits: ToneProp is the closed semantic set, and this value is open by definition. Washed into --badge-tint-surface rather than filled, because no foreground clears WCAG AA against every colour a picker can produce."
+      }
+    ]
   },
   DataTableProp: {
     group: "data-display",
@@ -1905,6 +1972,93 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/data-display/timeline.tsx",
     vocabulary: ["ClassNameProp"]
   },
+  TimelineGridColumnProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      "IdProp",
+      "LabelProp",
+      "DescriptionProp",
+      {
+        field: "current",
+        local: true,
+        reason: "Marks the column as now/today \u2014 it carries the tint and hosts the grid's now marker."
+      }
+    ]
+  },
+  TimelineGridEventProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      "IdProp",
+      "TitleProp",
+      "DescriptionProp",
+      {
+        field: "columnId",
+        local: true,
+        reason: "Id of the column the event belongs to (see TimelineGridColumnProp.id)."
+      },
+      {
+        field: "start",
+        local: true,
+        reason: `Start clock time in the column's own day, "HH:MM" \u2014 no date, no timezone.`
+      },
+      {
+        field: "end",
+        local: true,
+        reason: 'End clock time, "HH:MM"; at or before start means the event continues into the next day.'
+      },
+      {
+        field: "color",
+        local: true,
+        reason: "The record's own colour, washed into the block exactly like Badge `color` \u2014 decorative, never the only signal."
+      }
+    ]
+  },
+  TimelineGridProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      "LabelProp",
+      "ClassNameProp",
+      "IdProp",
+      {
+        field: "columns",
+        local: true,
+        reason: "Consumer-supplied columns in render order (see TimelineGridColumnProp)."
+      },
+      {
+        field: "events",
+        local: true,
+        reason: "Consumer-supplied events (see TimelineGridEventProp)."
+      },
+      {
+        field: "start",
+        local: true,
+        reason: 'First clock time on the axis, "HH:MM"; defaults to the earliest event on the hour so a block can only fall outside a PINNED axis.'
+      },
+      {
+        field: "end",
+        local: true,
+        reason: 'Last clock time on the axis, "HH:MM"; defaults to the latest event on the hour.'
+      },
+      {
+        field: "interval",
+        local: true,
+        reason: "Hours between hour rules and axis labels (default 1)."
+      },
+      {
+        field: "now",
+        local: true,
+        reason: 'Current clock time, "HH:MM" \u2014 draws the now marker in the columns marked current.'
+      },
+      {
+        field: "onEventSelect",
+        local: true,
+        reason: "Block click handler carrying the event; its presence turns every block into a real button."
+      }
+    ]
+  },
   TreeListProp: {
     group: "data-display",
     file: "components/data-display/tree-list.tsx",

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

@@ -87,3 +87,9 @@ export type TablePresetProp = "default" | "action-collection" | "stacked-record-
  * is reserved first so it can never be pushed outside the viewport.
  */
 export type TableColumnPriorityProp = "primary" | "secondary" | "meta" | "actions";
+/**
+ * Hierarchy depth a table cell renders at. `0` sits on the column's own text axis and every
+ * further level adds one `--table-cell-indent-space-step`, so a tree row or a grouped detail row
+ * expresses its level instead of hand-rolling `style={{ paddingInlineStart }}` at the call site.
+ */
+export type TableCellIndentProp = number;

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, WidthProp, ControlWidthProp, } from "./shared.prop.js";
+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, } 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, OrientationProp, TableDensityProp, DensityProp, GapProp, } from "./layout.prop.js";
+export type { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, MobileShellHeightProp, OrientationProp, TableDensityProp, DensityProp, GapProp, } from "./layout.prop.js";
 export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, ShapeProp, AvatarShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, SizeProp, FormLayoutProp, DescriptionsLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, ActivityVariantProp, ActivityAnnounceProp, } from "./interaction.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbProp } from "./navigation.prop.js";
-export type { GetRowIdProp, OnRowClickProp, ColumnDefProp, TablePresetProp, TableColumnPriorityProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, StickyProp, } from "./data.prop.js";
+export type { GetRowIdProp, OnRowClickProp, ColumnDefProp, TablePresetProp, TableColumnPriorityProp, TableCellIndentProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, StickyProp, } from "./data.prop.js";

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

@@ -17,6 +17,15 @@ export type CenteredShellWidthProp = "sm" | "md" | "lg";
  * maintenance notice) — the geometry stays package-owned, so no consumer `min-h-dvh` / flex CSS.
  */
 export type CenteredShellAlignProp = "start" | "center";
+/**
+ * MobileShell block-size contract — WHERE the handheld shell gets its one-screen height, the one
+ * question a bounded shell cannot answer for itself.
+ * `"viewport"` (default) is the real app: the shell is exactly `100dvh`, the document never
+ * scrolls, and the chrome bands stay on screen while the URL bar collapses. `"fill"` fills a
+ * BOUNDED parent instead — a device-frame preview, or a phone view embedded in a wider page —
+ * where a viewport-tall root would overflow its frame. Nothing else differs between the two.
+ */
+export type MobileShellHeightProp = "viewport" | "fill";
 /**
  * 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
@@ -43,8 +52,14 @@ export type ErrorSurfaceStatusProp = 400 | 403 | 404 | 500 | 503 | (number & {})
  * scroll origin, and the only preset with a footer-clearance knob of its own.
  */
 export type AuthShellPresetProp = "default" | "login" | "registration" | "device-authorization" | "context-selection" | "account-recovery";
-/** Shared gap between layout children; components may document subsets. */
-export type GapProp = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * Shared gap between layout children; components may document subsets.
+ * `"none"` is a DELIBERATE zero, not the absence of a value: two lines that read as ONE block —
+ * a name over its role, a weekday over its date, a tab bar with no seam between its triggers.
+ * Without it those stacks had to carry `gap="xs"`, which is a visual change forced by a missing
+ * step rather than by design (gh#354).
+ */
+export type GapProp = "none" | "xs" | "sm" | "md" | "lg" | "xl";
 /** DataTable row density subset. */
 export type TableDensityProp = Exclude<DensityProp, "default">;
 /**

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

@@ -50,6 +50,13 @@ export type OnChangeProp = React.ChangeEventHandler<HTMLInputElement>;
 export type OnClickProp = React.MouseEventHandler<HTMLButtonElement>;
 /** Radix/shadcn `asChild` polymorphism — render as child element. */
 export type AsChildProp = boolean;
+/**
+ * The slot's CONTENT owns its own inset: the container drops its padding so the child reaches the
+ * frame edge — a full-bleed table inside a Card, an expanded detail panel inside a table cell, a
+ * Command list inside a Popover. It is the sanctioned replacement for the `p-0` utility a consumer
+ * would otherwise write at the call site.
+ */
+export type FlushProp = boolean;
 /**
  * An explicit layout dimension (NOT the `SizeProp` control-height tier). A `number` is treated as
  * px; a `string` is any CSS length (`"32rem"`, `"90vw"`, `"50%"`).

package/dist/styles/badge-layout.css

@@ -25,6 +25,21 @@
     }
   }
 
+  [data-slot="badge"][data-tinted] {
+
+    background-color: color-mix(
+      in srgb,
+      var(--badge-tint-surface),
+      var(--badge-color) var(--badge-tint-fill)
+    );
+    border-color: color-mix(
+      in srgb,
+      var(--badge-tint-surface),
+      var(--badge-color) var(--badge-tint-edge)
+    );
+    color: var(--badge-tint-foreground);
+  }
+
   [data-slot="badge-icon"] {
     width: var(--badge-icon-size);
     height: var(--badge-icon-size);

package/dist/styles/control.css

@@ -368,7 +368,7 @@
     width: var(--checkbox-size);
     height: var(--checkbox-size);
     flex-shrink: 0;
-    border: 1px solid hsl(var(--primary));
+    border: var(--checkbox-border-width) solid hsl(var(--primary));
     color: hsl(var(--primary));
     background: transparent;
   }
@@ -999,6 +999,23 @@
     --control-height: var(--control-height-sm);
   }
 
+  .ui-control-trigger {
+    cursor: pointer;
+  }
+
+  .ui-control-trigger:disabled,
+  .ui-control-trigger[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  .ui-control[data-size="sm"] {
+    --control-height: var(--control-height-sm);
+  }
+
+  .ui-control[data-size="lg"] {
+    --control-height: var(--control-height-lg);
+  }
+
   .ui-number-input[data-size="sm"] {
     --control-height: var(--control-height-sm);
   }