@godxjp/ui 19.3.1 → 19.4.1

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,11 @@ 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.";
@@ -1725,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",
@@ -1346,6 +1397,11 @@ const COMPONENT_PROP_REGISTRY = {
     group: "data-display",
     file: "components/data-display.prop.ts",
     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",
@@ -1916,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.
+ */
+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/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);
   }

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

@@ -897,3 +897,170 @@
     border-block-start: var(--stroke-hairline) solid hsl(var(--border));
   }
 }
+
+@layer components {
+  .ui-timeline-grid {
+    overflow-x: auto;
+  }
+
+  .ui-timeline-grid-frame {
+    display: grid;
+    grid-template-columns:
+      var(--timeline-grid-axis-width)
+      repeat(var(--timeline-grid-columns, 1), minmax(var(--timeline-grid-column-min-width), 1fr));
+  }
+
+  .ui-timeline-grid-corner {
+    border-block-end: 1px solid hsl(var(--border));
+  }
+
+  .ui-timeline-grid-head {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: var(--space-1);
+    border-block-end: 1px solid hsl(var(--border));
+    border-inline-start: 1px solid hsl(var(--border));
+    background: hsl(var(--secondary));
+    font-size: var(--timeline-grid-head-font-size);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-tight);
+    text-align: center;
+  }
+
+  .ui-timeline-grid-head[data-current="true"] {
+    background: var(--timeline-grid-current-tint, hsl(var(--primary) / 0.08));
+  }
+
+  .ui-timeline-grid-head-description {
+    color: hsl(var(--muted-foreground));
+    font-size: var(--timeline-grid-axis-font-size);
+    font-weight: var(--font-weight-normal);
+  }
+
+  .ui-timeline-grid-axis,
+  .ui-timeline-grid-column {
+    position: relative;
+    block-size: calc(var(--timeline-grid-hour-height) * var(--timeline-grid-hours, 24));
+  }
+
+  .ui-timeline-grid-tick {
+    position: absolute;
+    inset-inline-end: var(--space-1);
+    inset-block-start: calc(var(--timeline-grid-hour-height) * var(--timeline-grid-tick-offset, 0));
+    color: hsl(var(--muted-foreground));
+    font-size: var(--timeline-grid-axis-font-size);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    transform: translateY(-50%);
+    white-space: nowrap;
+  }
+
+  .ui-timeline-grid-column {
+    margin: 0;
+    padding: 0;
+    border-inline-start: 1px solid hsl(var(--border));
+    background-image: repeating-linear-gradient(
+      to bottom,
+      var(--timeline-grid-line-color, hsl(var(--border))) 0 1px,
+      transparent 1px calc(var(--timeline-grid-hour-height) * var(--timeline-grid-interval, 1))
+    );
+    list-style: none;
+  }
+
+  .ui-timeline-grid-column[data-current="true"] {
+    background-color: var(--timeline-grid-current-tint, hsl(var(--primary) / 0.05));
+  }
+
+  .ui-timeline-grid-event {
+    position: absolute;
+    inset-block-start: calc(
+      var(--timeline-grid-hour-height) * var(--timeline-grid-event-offset, 0)
+    );
+    inset-inline-start: calc(
+      var(--timeline-grid-event-lane, 0) / var(--timeline-grid-event-lanes, 1) * 100%
+    );
+    box-sizing: border-box;
+    inline-size: calc(100% / var(--timeline-grid-event-lanes, 1));
+    block-size: calc(var(--timeline-grid-hour-height) * var(--timeline-grid-event-span, 0));
+    min-block-size: var(--timeline-grid-event-min-height);
+    padding-inline-end: var(--timeline-grid-event-gap);
+    padding-block-end: var(--timeline-grid-event-gap);
+  }
+
+  .ui-timeline-grid-event-body {
+    display: flex;
+    overflow: hidden;
+    box-sizing: border-box;
+    flex-direction: column;
+    inline-size: 100%;
+    block-size: 100%;
+    padding: var(--timeline-grid-event-space-inset);
+    border-inline-start: var(--timeline-grid-event-border-width) solid
+      var(--timeline-grid-event-color, hsl(var(--primary)));
+    border-radius: var(--timeline-grid-event-radius);
+
+    background-color: color-mix(
+      in srgb,
+      hsl(var(--background)),
+      var(--timeline-grid-event-color, hsl(var(--primary))) 12%
+    );
+    color: hsl(var(--foreground));
+    font-size: var(--timeline-grid-event-font-size);
+    line-height: var(--line-height-tight);
+    text-align: start;
+  }
+
+  .ui-timeline-grid-event[data-clipped="start"] .ui-timeline-grid-event-body,
+  .ui-timeline-grid-event[data-clipped="both"] .ui-timeline-grid-event-body {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+
+  .ui-timeline-grid-event[data-clipped="end"] .ui-timeline-grid-event-body,
+  .ui-timeline-grid-event[data-clipped="both"] .ui-timeline-grid-event-body {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .ui-timeline-grid-event-time {
+    color: var(--timeline-grid-event-muted-color);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .ui-timeline-grid-event-title {
+    overflow: hidden;
+    font-weight: var(--font-weight-medium);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui-timeline-grid-event-description {
+    overflow: hidden;
+    color: var(--timeline-grid-event-muted-color);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  button.ui-timeline-grid-event-body {
+    cursor: pointer;
+  }
+
+  button.ui-timeline-grid-event-body:hover {
+    background-color: color-mix(
+      in srgb,
+      hsl(var(--background)),
+      var(--timeline-grid-event-color, hsl(var(--primary))) 20%
+    );
+  }
+
+  .ui-timeline-grid-now {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: calc(var(--timeline-grid-hour-height) * var(--timeline-grid-now-offset, 0));
+    block-size: var(--timeline-grid-now-width);
+    background: var(--timeline-grid-now-color, hsl(var(--destructive)));
+    pointer-events: none;
+  }
+}

package/dist/styles/layout.css

@@ -158,6 +158,10 @@
     justify-content: space-evenly;
   }
 
+  .ui-flex-gap-none {
+    gap: 0;
+  }
+
   .ui-flex-gap-xs {
     gap: var(--space-stack-xs);
   }
@@ -238,6 +242,9 @@
     grid-template-columns: minmax(0, 1fr);
   }
 
+  .ui-responsive-grid[data-gap="none"] {
+    gap: 0;
+  }
   .ui-responsive-grid[data-gap="xs"] {
     gap: var(--space-stack-xs);
   }