@godxjp/ui 18.4.0 → 18.6.0

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

@@ -40,6 +40,17 @@ export type ColumnDefProp<T> = {
      * separating shadow. Pin at most one column per table.
      */
     pin?: "end";
+    /**
+     * Relative importance of the column, read ONLY by `DataTable preset="action-collection"`
+     * (gh#253). It is the SAME contract the `Table` primitive exposes on `TableHead`/`TableCell`:
+     * DataTable stamps it onto both cells of the column for you, so the preset can swap the desktop
+     * intrinsic widths for the token-owned priority measures (`--table-action-collection-*`) instead
+     * of scrolling a five-column approval queue sideways at 390px. Leave the free-text column
+     * unmarked — it takes the remaining space. Emitted as `data-priority` only when set, so an
+     * ordinary column gains no attribute. Prefer this over `width` under the preset: an explicit
+     * `width` utility wins the cascade and defeats the priority measure.
+     */
+    priority?: TableColumnPriorityProp;
 };
 /** Set of selected row IDs. */
 export type SelectedIdsProp = Set<string>;
@@ -64,3 +75,19 @@ export type HasActiveFiltersProp = boolean;
  * offset/background are tuned via the `--filter-bar-sticky-*` theme knobs.
  */
 export type StickyProp = boolean;
+/**
+ * Table named collection preset. `"default"` keeps the plain table (and emits no attribute).
+ * `"action-collection"` is the canonical dense approval / action queue: below `collapseBelow`
+ * the desktop intrinsic column widths are replaced by token-owned column-PRIORITY measures under
+ * `table-layout: fixed` and cells wrap, so every column — including the row actions — stays inside
+ * the initial narrow frame. The real `<table>` semantics are never rewritten.
+ */
+export type TablePresetProp = "default" | "action-collection";
+/**
+ * Relative importance of a table column, used by `preset="action-collection"` to allocate the
+ * narrow-frame measure. `"primary"` is the row's subject, `"secondary"` its object/target,
+ * `"meta"` a low-priority stamp (dates, ids), `"actions"` the row-action affordance whose measure
+ * is reserved first so it can never be pushed outside the viewport. A column with no priority
+ * takes the remaining space (the free-text column).
+ */
+export type TableColumnPriorityProp = "primary" | "secondary" | "meta" | "actions";

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, 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 { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, TableDensityProp, DensityProp, GapProp, } from "./layout.prop.js";
-export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, ShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, SizeProp, FormLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, } from "./interaction.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";
-export type { GetRowIdProp, OnRowClickProp, ColumnDefProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, StickyProp, } from "./data.prop.js";
+export type { GetRowIdProp, OnRowClickProp, ColumnDefProp, TablePresetProp, TableColumnPriorityProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, StickyProp, } from "./data.prop.js";

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

@@ -7,6 +7,15 @@ export type ButtonVariantProp = "default" | "destructive" | "outline" | "dashed"
 /** Corner shape — maps to the radius tokens (default = control/component radius). Shared by
  *  Button + Badge. `pill` = fully rounded (`--radius-pill`), `sharp` = square (`--radius-sharp`). */
 export type ShapeProp = "default" | "pill" | "sharp";
+/**
+ * Avatar geometry — WHAT the mark represents, not just its corner radius, which is why it is a
+ * separate vocabulary from the control `ShapeProp` (`default | pill | sharp`): an entity mark is a
+ * ROUNDED rect, a value `ShapeProp` cannot express (its `sharp` = `--radius-sharp` = 0).
+ * - `circle` (default) — a person: the fully-round `--radius-pill` identity avatar.
+ * - `square` — an organization / service entity mark for an entity header: the compact rounded
+ *   square on the brand surface (`--avatar-square-*` tokens).
+ */
+export type AvatarShapeProp = "circle" | "square";
 /** Text size — steps of the golden-ratio type scale (NEVER an arbitrary px). `sm` = base. */
 export type TextSizeProp = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 /** Text colour intent — maps to semantic foreground tokens (no raw palette). */
@@ -29,7 +38,7 @@ export type BadgeVariantProp = "default" | "secondary" | "outline" | "dashed";
  *   `aria-label`, focus ring, keyboard behaviour and a `--control-height` tap target (which is
  *   ≥44px on coarse/touch pointers per Rule #24) — so consumers never hide internal nodes via CSS.
  */
-export type AppSettingPickerAppearanceProp = "labeled" | "icon";
+export type AppSettingPickerAppearanceProp = "labeled" | "icon" | "inline";
 /** Button size preset. */
 export type SizeProp = "xs" | "sm" | "md" | "lg";
 /** Button size preset; icon-only sizes are a documented Button subset. */

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

@@ -10,7 +10,56 @@ export type DensityProp = "compact" | "default" | "comfortable";
 export type PageContainerVariantProp = "default" | "narrow" | "flush" | "ghost";
 /** CenteredShell content-column max-width tier — sm ~32rem, md ~46rem, lg ~64rem. */
 export type CenteredShellWidthProp = "sm" | "md" | "lg";
+/**
+ * CenteredShell content-column BLOCK alignment inside the viewport-height shell.
+ * `"start"` (default) keeps the top-aligned flowing/scrolling page shape; `"center"` centres the
+ * column in the viewport for a SYSTEM-level standalone surface (a 500/503 error page, a
+ * maintenance notice) — the geometry stays package-owned, so no consumer `min-h-dvh` / flex CSS.
+ */
+export type CenteredShellAlignProp = "start" | "center";
+/**
+ * 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 is
+ * the page BODY of the `AppShell` the route already renders. It never reconstructs nav chrome — a
+ * component cannot manufacture the sidebar/topbar/user menu, which are consumer-owned; it renders
+ * as `AppShell`'s children (usually inside a `PageContainer`) so the shell is PRESERVED and the
+ * user is never stranded chrome-less.
+ *
+ * `"system"` (500 / 503): the app itself failed — session and nav data may be gone — so the surface
+ * owns the whole page and renders package-owned viewport-centred geometry
+ * (`CenteredShell align="center"`), with no consumer `min-h-dvh` / flex CSS at 1440 / 1024 / 390.
+ */
+export type ErrorSurfaceModeProp = "application" | "system";
+/**
+ * The HTTP status an ErrorSurface presents. Deliberately closed to the four exception pages every
+ * app ships (RFC 9110 §15.5.4 / §15.5.5 / §15.6.1 / §15.6.4); it drives the default icon, tone and
+ * the recommended `mode`. A number, never a string — it is the numeric status, and it is rendered
+ * with tabular figures.
+ */
+export type ErrorSurfaceStatusProp = 403 | 404 | 500 | 503;
+/**
+ * AuthShell named flow preset — the page MEASURE contract for a canonical hosted-identity flow
+ * (card max-width plus the desktop and mobile page gutters), owned by component tokens.
+ * `"default"` keeps the shell's own measure; `"login"` owns SCR-001's stable card anchor for
+ * standalone and requester flows; `"device-authorization"` is the 380px device-grant measure with
+ * 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).
+ * Orthogonal to AuthShell's `variant` (which owns control density and heading size) — combine them.
+ */
+export type AuthShellPresetProp = "default" | "login" | "device-authorization" | "context-selection" | "account-recovery";
 /** Shared gap between layout children; components may document subsets. */
 export type GapProp = "xs" | "sm" | "md" | "lg" | "xl";
 /** DataTable row density subset. */
 export type TableDensityProp = Exclude<DensityProp, "default">;
+/**
+ * CenteredShell named page preset — the token-owned SHELL geometry of a whole page shape.
+ * `"default"` keeps the shell's own box (and emits no attribute at all, so it can match no rule).
+ * `"public-landing"` is the PUBLIC marketing / product landing contract: one content measure
+ * shared by the header bar, the centred column and the footer, the section rhythm between page
+ * sections, the flat (elevation-free) public-surface chrome and the hero heading tier — all owned
+ * by `--centered-shell-landing-*` knobs so the landing COMPOSITION (hero, nav, sections, footer —
+ * each of which fails the Framework-Component Test) needs no page-local CSS.
+ */
+export type CenteredShellPresetProp = "default" | "public-landing";

package/dist/styles/base.css

@@ -14,8 +14,14 @@
  *
  * The layout files declare `@layer components` and use `@apply`, so base.css
  * (which pulls in Tailwind) MUST be imported before them, in the same
- * stylesheet. Bundled fonts are opt-in — add `@godxjp/ui/styles/fonts` if you
- * want them, or skip it and supply your own via the --font-family-* tokens.
+ * stylesheet.
+ *
+ * Bundled fonts are opt-in — add `@godxjp/ui/styles/fonts` if you want them, or
+ * skip it and supply your own via the --font-family-* tokens. When you DO import
+ * it, it MUST come AFTER this file: base.css pulls in tokens/foundation.css,
+ * whose font-agnostic `:root { --font-sans-base: <system stack> }` sits at the
+ * same specificity as the bundle's fill, so the later import wins. Imported
+ * first, the bundle is dead weight (issue #210).
  *
  * Prefer the all-in-one `@godxjp/ui/styles` entry if you'd rather ship every
  * component's CSS + the bundled fonts and not think about it.

package/dist/styles/card-layout.css

@@ -56,14 +56,19 @@
     box-shadow: 0 0 0 1px hsl(var(--primary));
   }
 
-  /* ── Density — override the shell inset/body tokens ──────────────────── */
+  /* ── Density — override the shell inset/body tokens ──────────────────────
+   * `--card-space-shell-y: initial` re-arms the block axis to follow THIS card's inset again: the
+   * `density` prop is an explicit per-instance decision and must beat an ambient shell-level block
+   * override (e.g. AuthShell compact), exactly as it did when one inset owned both axes. */
   [data-slot="card"][data-density="tight"] {
     --card-space-inset: var(--space-3);
+    --card-space-shell-y: initial;
     --card-space-body-y: var(--space-3);
   }
 
   [data-slot="card"][data-density="cozy"] {
     --card-space-inset: var(--space-5);
+    --card-space-shell-y: initial;
     --card-space-body-y: var(--space-5);
   }
 
@@ -111,7 +116,7 @@
   }
 
   [data-slot="card-header"]:not([data-banded]) {
-    padding-top: var(--card-space-inset);
+    padding-top: var(--card-space-shell-y, var(--card-space-inset));
     padding-bottom: 0;
   }
 
@@ -254,7 +259,7 @@
   /* Header-only card — terminal slot owns bottom shell */
   [data-slot="card"]:not(:has([data-slot="card-content"], [data-slot="card-footer"]))
     [data-slot="card-header"] {
-    padding-bottom: var(--card-space-inset);
+    padding-bottom: var(--card-space-shell-y, var(--card-space-inset));
   }
 
   /* Cover — header below media uses section top, not shell */
@@ -271,18 +276,27 @@
     padding-top: var(--card-space-body-y);
   }
 
-  /* ── Content ─────────────────────────────────────────────────────────── */
+  /* ── Content ─────────────────────────────────────────────────────────────
+   * The two axes are INDEPENDENT (gh#232): the inline column reads --card-space-inset, the block
+   * shell edge reads --card-space-shell-y (default = the same inset, so the resting render is
+   * unchanged). A shell that needs a shorter card without a narrower column — AuthShell compact —
+   * now moves the block axis alone instead of hitting a wall at a uniform inset. */
   [data-slot="card-content"] {
     padding-inline: var(--card-space-inset);
-    padding-bottom: var(--card-space-inset);
+    padding-bottom: var(--card-space-shell-y, var(--card-space-inset));
   }
 
   [data-slot="card-content"]:not([data-tight]):not([data-solo]) {
     padding-top: var(--card-space-body-y);
   }
 
+  /* A solo body owns BOTH block edges (there is no header/footer to carry them), so this is
+   * `padding-block`, not just `padding-top` — it overrides the generic bottom edge above.
+   * The fallback chain solo-y → shell-y → inset means: a shell that tunes only the general block
+   * knob still reaches a solo body, an explicit --card-space-solo-y wins over it, and with neither
+   * set the render is the historical inset. */
   [data-slot="card-content"][data-solo] {
-    padding-top: var(--card-space-inset);
+    padding-block: var(--card-space-solo-y, var(--card-space-shell-y, var(--card-space-inset)));
   }
 
   [data-slot="card-content"][data-flush] {
@@ -343,7 +357,7 @@
 
   [data-slot="card-footer"]:not([data-separated]) {
     padding-top: 0;
-    padding-bottom: var(--card-space-inset);
+    padding-bottom: var(--card-space-shell-y, var(--card-space-inset));
   }
 
   [data-slot="card-footer"][data-separated] {
@@ -474,4 +488,144 @@
     font-size: var(--stat-card-hint-font-size);
     line-height: var(--line-height-normal);
   }
+
+  /* ── Service launcher — organization-scoped downstream app tile ─────── */
+  [data-slot="card"][data-service-launcher] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--card-service-launcher-space-gap);
+    padding: var(--card-space-inset);
+  }
+
+  [data-slot="service-launcher-heading"],
+  [data-slot="service-launcher-skeleton-heading"] {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--card-service-launcher-space-gap);
+  }
+
+  [data-slot="service-launcher-icon"] {
+    display: inline-flex;
+    width: var(--card-service-launcher-icon-size);
+    height: var(--card-service-launcher-icon-size);
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--card-service-launcher-icon-radius);
+    background: hsl(var(--card-service-launcher-icon-background, var(--accent)));
+    color: hsl(var(--card-service-launcher-icon-foreground, var(--primary)));
+  }
+
+  /* Unavailable tile (the consumer supplied a `disabledReason`): the medallion drops its brand
+   * wash so an un-launchable service never reads as live. Role-mirror knobs default at the CALL
+   * SITE, so a scoped [data-tenant]/.dark override of --muted still reaches it (docs/TOKENS.md). */
+  [data-slot="card"][data-service-launcher][data-unavailable] [data-slot="service-launcher-icon"] {
+    background: hsl(var(--card-service-launcher-unavailable-icon-background, var(--muted)));
+    color: hsl(var(--card-service-launcher-unavailable-icon-foreground, var(--muted-foreground)));
+  }
+
+  [data-slot="service-launcher-icon"] > svg {
+    width: var(--card-service-launcher-icon-glyph-size);
+    height: var(--card-service-launcher-icon-glyph-size);
+  }
+
+  [data-slot="service-launcher-title"] {
+    min-width: 0;
+    flex: 1;
+    overflow-wrap: anywhere;
+    font-size: var(--card-title-font-size);
+    font-weight: var(--card-title-font-weight);
+    line-height: var(--card-title-line-height);
+  }
+
+  [data-slot="service-launcher-status"] {
+    flex: none;
+  }
+
+  [data-slot="service-launcher-description"] {
+    flex: 1;
+    overflow-wrap: anywhere;
+    color: hsl(var(--muted-foreground));
+    font-size: var(--card-service-launcher-description-font-size);
+    line-height: var(--card-service-launcher-description-line-height);
+  }
+
+  /* Mono metadata ONLY (hostname · plan) — machine identifiers, never prose. */
+  [data-slot="service-launcher-metadata"] {
+    overflow-wrap: anywhere;
+    color: hsl(var(--muted-foreground));
+    font-family: var(--font-mono);
+    font-size: var(--card-service-launcher-metadata-font-size);
+    line-height: var(--card-service-launcher-metadata-line-height);
+  }
+
+  /* The disabled/unavailable reason is a localized SENTENCE — it takes the description's prose
+   * rhythm, not the mono metadata treatment (a JA/VI sentence in monospace is unreadable). */
+  [data-slot="service-launcher-disabled-reason"] {
+    overflow-wrap: anywhere;
+    color: hsl(var(--muted-foreground));
+    font-size: var(--card-service-launcher-description-font-size);
+    line-height: var(--card-service-launcher-description-line-height);
+  }
+
+  [data-slot="service-launcher-action"] > [data-slot="button"] {
+    width: 100%;
+  }
+
+  [data-slot="card"][data-service-catalog-cta] {
+    min-height: var(--card-service-launcher-cta-min-height);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--card-service-launcher-space-gap);
+    border-style: dashed;
+    padding: var(--card-space-inset);
+    text-align: center;
+  }
+
+  [data-slot="service-catalog-icon"] {
+    width: var(--card-service-launcher-icon-glyph-size);
+    height: var(--card-service-launcher-icon-glyph-size);
+    color: hsl(var(--muted-foreground));
+  }
+
+  [data-slot="service-catalog-title"] {
+    color: hsl(var(--muted-foreground));
+    font-size: var(--card-service-launcher-description-font-size);
+    line-height: var(--card-service-launcher-description-line-height);
+  }
+
+  [data-slot^="service-launcher-skeleton-"] {
+    display: block;
+  }
+
+  [data-slot="service-launcher-skeleton-icon"] {
+    width: var(--card-service-launcher-icon-size);
+    height: var(--card-service-launcher-icon-size);
+    flex: none;
+  }
+
+  [data-slot="service-launcher-skeleton-title"] {
+    width: var(--card-service-launcher-skeleton-title-width);
+    height: var(--font-size-base);
+  }
+
+  [data-slot="service-launcher-skeleton-status"] {
+    width: var(--card-service-launcher-skeleton-status-width);
+    height: var(--font-size-xs);
+    margin-inline-start: auto;
+  }
+
+  [data-slot="service-launcher-skeleton-description"],
+  [data-slot="service-launcher-skeleton-metadata"],
+  [data-slot="service-launcher-skeleton-action"] {
+    width: 100%;
+    height: var(--font-size-xs);
+  }
+
+  [data-slot="service-launcher-skeleton-action"] {
+    height: var(--control-height);
+  }
 }

package/dist/styles/chart-layout.css

@@ -37,3 +37,100 @@
   color: hsl(var(--popover-foreground));
   font-size: var(--font-size-xs);
 }
+
+/* Content that sits BELOW the plot (the activity footer slot) — outside the
+ * `role="img"` canvas so links/buttons in it stay reachable and announced. */
+.ui-chart-footer {
+  margin-block-start: var(--chart-trend-footer-gap);
+  font-size: var(--font-size-xs);
+  color: hsl(var(--muted-foreground));
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+ * CompactBarTrend — a dependency-free (no recharts) vertical bar trend.
+ * ALL geometry resolves from `--chart-trend-*` tokens; the only inline value is
+ * the DATUM itself (`--chart-trend-bar-value`, a 0..1 ratio), so a consumer never
+ * writes a height calculation or a colour of its own.
+ * ─────────────────────────────────────────────────────────────────────────── */
+
+/* `size` → the active plot-height tier. Set on the <figure> as `data-size`. */
+.ui-chart-trend[data-size="xs"] {
+  --chart-trend-plot-height: var(--chart-trend-plot-height-xs);
+}
+
+.ui-chart-trend[data-size="sm"] {
+  --chart-trend-plot-height: var(--chart-trend-plot-height-sm);
+}
+
+.ui-chart-trend[data-size="md"] {
+  --chart-trend-plot-height: var(--chart-trend-plot-height-md);
+}
+
+.ui-chart-trend[data-size="lg"] {
+  --chart-trend-plot-height: var(--chart-trend-plot-height-lg);
+}
+
+.ui-chart-trend-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--chart-trend-tick-gap);
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.ui-chart-trend-plot {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--chart-trend-bar-gap);
+  block-size: var(--chart-trend-plot-height);
+  inline-size: 100%;
+  min-inline-size: 0;
+  /* Quiet by default (rule #44) — a service opts into a baseline rule with
+   * `--chart-trend-baseline-border: 1px solid hsl(var(--border));`. */
+  border-block-end: var(--chart-trend-baseline-border, none);
+}
+
+.ui-chart-trend-column {
+  display: flex;
+  flex: 1 1 0;
+  align-items: flex-end;
+  justify-content: center;
+  min-inline-size: 0;
+  block-size: 100%;
+}
+
+.ui-chart-trend-bar {
+  inline-size: 100%;
+  max-inline-size: var(--chart-trend-bar-max-width);
+  /* Data-driven: the 0..1 ratio arrives as an inline custom property. */
+  block-size: max(var(--chart-trend-bar-min-height), calc(var(--chart-trend-bar-value, 0) * 100%));
+  border-start-start-radius: var(--chart-trend-bar-radius);
+  border-start-end-radius: var(--chart-trend-bar-radius);
+  background: var(
+    --chart-trend-bar-background,
+    hsl(var(--muted-foreground) / var(--chart-trend-bar-background-alpha))
+  );
+}
+
+.ui-chart-trend-bar[data-emphasized="true"] {
+  background: var(--chart-trend-bar-emphasis-background, hsl(var(--primary)));
+}
+
+.ui-chart-trend-ticks {
+  display: flex;
+  gap: var(--chart-trend-bar-gap);
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.ui-chart-trend-tick {
+  flex: 1 1 0;
+  min-inline-size: 0;
+  overflow: hidden;
+  font-size: var(--chart-trend-tick-font-size);
+  line-height: var(--line-height-tight);
+  color: hsl(var(--muted-foreground));
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/styles/control.css

@@ -585,6 +585,52 @@
     opacity: 0.5;
   }
 
+  [data-slot="dialog-content"].ui-command-palette {
+    top: var(--command-palette-inset-top);
+    width: min(
+      var(--command-palette-width),
+      calc(100vw - (2 * var(--command-palette-viewport-inset)))
+    );
+    max-width: none;
+    transform: translateX(-50%);
+    gap: 0;
+    padding: 0;
+    background: hsl(var(--popover));
+  }
+
+  .ui-command-palette-trigger {
+    min-width: 0;
+  }
+
+  .ui-command-palette-label {
+    min-width: 0;
+  }
+
+  .ui-command-palette-meta {
+    margin-inline-start: auto;
+    color: hsl(var(--muted-foreground));
+    font-size: var(--font-size-xs);
+  }
+
+  .ui-command-palette-state {
+    padding-block: var(--space-6);
+    padding-inline: var(--space-4);
+    text-align: center;
+    color: hsl(var(--muted-foreground));
+    font-size: var(--font-size-base);
+  }
+
+  .ui-command-palette-hints {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--command-palette-hint-gap);
+    border-top: 1px solid hsl(var(--border));
+    padding: var(--command-palette-hint-padding-y) var(--command-palette-hint-padding-x);
+    color: hsl(var(--muted-foreground));
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+  }
+
   .ui-search-input {
     position: relative;
   }
@@ -680,8 +726,8 @@
 .ui-otp-slot {
   position: relative;
   display: flex;
-  width: var(--control-height);
-  height: var(--control-height);
+  width: var(--otp-slot-size, var(--control-height));
+  height: var(--otp-slot-size, var(--control-height));
   align-items: center;
   justify-content: center;
   font-size: var(--font-size-base);
@@ -699,6 +745,34 @@
   border-start-end-radius: var(--radius-md);
   border-end-end-radius: var(--radius-md);
 }
+.ui-otp-group[data-appearance="grouped"] {
+  overflow: hidden;
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius-md);
+  background: hsl(var(--background));
+}
+.ui-otp-group[data-appearance="grouped"] .ui-otp-slot {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+.ui-otp-group[data-appearance="grouped"] .ui-otp-slot[data-active="true"] {
+  box-shadow: none;
+}
+.ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
+  border-color: hsl(var(--focus-ring-color, var(--ring)));
+  box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
+}
+.ui-otp-container:has(.ui-otp-input[aria-invalid="true"]) .ui-otp-group[data-appearance="grouped"] {
+  border-color: hsl(var(--destructive));
+}
+.ui-otp-container:has(.ui-otp-input[aria-invalid="true"])
+  .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
+  box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));
+}
+.ui-otp-container:has(.ui-otp-input:disabled) .ui-otp-group[data-appearance="grouped"] {
+  background: hsl(var(--muted));
+}
 .ui-otp-slot[data-active="true"] {
   z-index: 1;
   box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));