@godxjp/ui 19.2.0 → 19.4.0

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);
   }

package/dist/styles/shell-layout.css

@@ -112,9 +112,19 @@
   .ui-auth-shell-bar {
     display: flex;
     align-items: center;
+
+    flex-wrap: wrap;
+    gap: var(--auth-shell-bar-gap);
     padding: var(--auth-shell-bar-padding);
   }
 
+  .ui-auth-shell-bar-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--auth-shell-bar-gap);
+    margin-inline-start: auto;
+  }
+
   .ui-auth-shell-main {
     display: flex;
     flex: 1 1 auto;
@@ -142,6 +152,15 @@
     --auth-shell-main-padding: var(--auth-shell-canonical-main-padding);
   }
 
+  .ui-auth-shell[data-measure="wide"]:not([data-preset]) {
+    --auth-shell-card-max-width: var(--auth-shell-wide-card-max-width);
+    --auth-shell-main-align: flex-start;
+  }
+
+  .ui-auth-shell[data-measure="wide"]:not([data-preset]) .ui-auth-shell-card {
+    margin-block: auto;
+  }
+
   .ui-auth-shell[data-preset] .ui-auth-shell-card {
     display: flex;
     flex-direction: column;
@@ -1417,6 +1436,135 @@
   }
 }
 
+@layer components {
+  .ui-mobile-shell {
+    --control-height: var(--mobile-shell-control-height);
+
+    --mobile-shell-padding-inline: calc(
+      var(--mobile-shell-inset-inline) + var(--mobile-shell-safe-inset-inline)
+    );
+    display: flex;
+
+    block-size: var(--mobile-shell-block-size);
+    flex-direction: column;
+    overflow: hidden;
+    background: hsl(var(--background));
+  }
+
+  .ui-mobile-shell[data-height="fill"] {
+    --mobile-shell-block-size: 100%;
+  }
+
+  .ui-mobile-shell-chrome {
+    display: flex;
+    min-inline-size: 0;
+    flex: 0 0 auto;
+    flex-direction: column;
+  }
+
+  .ui-mobile-shell-status {
+    display: flex;
+    min-block-size: calc(
+      var(--mobile-shell-status-bar-height) + var(--mobile-shell-safe-inset-block-start)
+    );
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--mobile-shell-region-gap);
+    padding-block-start: var(--mobile-shell-safe-inset-block-start);
+    padding-inline: var(--mobile-shell-padding-inline);
+    background: hsl(var(--card));
+  }
+
+  .ui-mobile-shell-header {
+    display: flex;
+    min-block-size: var(--mobile-shell-header-bar-height);
+    min-inline-size: 0;
+    flex: 0 0 auto;
+
+    overflow: clip;
+    overflow-clip-margin: var(--focus-ring-clip-margin);
+    align-items: center;
+    gap: var(--mobile-shell-region-gap);
+    padding-inline: var(--mobile-shell-padding-inline);
+    border-block-end: 1px solid hsl(var(--border));
+    background: hsl(var(--card));
+    background-image: var(--topbar-gradient);
+  }
+
+  .ui-mobile-shell-header:first-child {
+    min-block-size: calc(
+      var(--mobile-shell-header-bar-height) + var(--mobile-shell-safe-inset-block-start)
+    );
+    padding-block-start: var(--mobile-shell-safe-inset-block-start);
+  }
+
+  .ui-mobile-shell-main {
+    display: flex;
+    min-block-size: 0;
+    min-inline-size: 0;
+
+    flex: 1 1 auto;
+    flex-direction: column;
+    overflow-y: auto;
+
+    overscroll-behavior-block: contain;
+
+    contain: paint;
+    padding-block: var(--mobile-shell-main-padding-block);
+    padding-inline: var(--mobile-shell-padding-inline);
+    background-image: var(--gradient-glow);
+  }
+
+  .ui-mobile-shell-main:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 var(--region-focus-ring-width)
+      var(--region-focus-ring-color, hsl(var(--focus-ring-color, var(--ring))));
+  }
+
+  .ui-mobile-shell-actions {
+    display: flex;
+    min-inline-size: 0;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: var(--mobile-shell-region-gap);
+    padding-block: var(--mobile-shell-actions-padding-block);
+    padding-inline: var(--mobile-shell-padding-inline);
+    border-block-start: 1px solid hsl(var(--border));
+    background: hsl(var(--card));
+  }
+
+  .ui-mobile-shell-tabbar {
+    display: flex;
+    min-block-size: calc(
+      var(--mobile-shell-tab-bar-height) + var(--mobile-shell-safe-inset-block-end)
+    );
+    min-inline-size: 0;
+    flex: 0 0 auto;
+    padding-block-end: var(--mobile-shell-safe-inset-block-end);
+    padding-inline: var(--mobile-shell-safe-inset-inline);
+    border-block-start: 1px solid hsl(var(--border));
+    background: hsl(var(--card));
+  }
+
+  .ui-mobile-shell-tabbar > * {
+    min-inline-size: 0;
+    flex: 1 1 0;
+  }
+
+  .ui-mobile-shell-actions:last-child {
+    padding-block-end: calc(
+      var(--mobile-shell-actions-padding-block) + var(--mobile-shell-safe-inset-block-end)
+    );
+  }
+
+  .ui-mobile-shell-main:last-child {
+    padding-block-end: calc(
+      var(--mobile-shell-main-padding-block) + var(--mobile-shell-safe-inset-block-end)
+    );
+  }
+}
+
 @layer components {
 
   .ui-centered-shell[data-preset="public-landing"] {

package/dist/styles/table-layout.css

@@ -46,6 +46,17 @@
     padding-inline-end: 0;
   }
 
+  [data-slot="table-cell"][data-indent] {
+    padding-inline-start: calc(
+      var(--table-cell-space-x) + var(--table-cell-indent-level, 0) *
+        var(--table-cell-indent-space-step)
+    );
+  }
+
+  [data-slot="table-cell"][data-flush] {
+    padding: 0;
+  }
+
   .ui-data-table-toolbar {
     display: flex;
     flex-wrap: wrap;
@@ -520,7 +531,9 @@
 
     [data-collapse-below="sm"] .ui-table-row {
       display: block;
-      border: 1px solid hsl(var(--border));
+
+      height: auto;
+      border: var(--stroke-hairline) solid hsl(var(--border));
       border-radius: var(--radius-md);
       padding: var(--table-stacked-collection-card-padding-y)
         var(--table-stacked-collection-card-padding-x);
@@ -562,7 +575,9 @@
 
     [data-collapse-below="md"] .ui-table-row {
       display: block;
-      border: 1px solid hsl(var(--border));
+
+      height: auto;
+      border: var(--stroke-hairline) solid hsl(var(--border));
       border-radius: var(--radius-md);
       padding: var(--table-stacked-collection-card-padding-y)
         var(--table-stacked-collection-card-padding-x);
@@ -604,7 +619,9 @@
 
     [data-collapse-below="lg"] .ui-table-row {
       display: block;
-      border: 1px solid hsl(var(--border));
+
+      height: auto;
+      border: var(--stroke-hairline) solid hsl(var(--border));
       border-radius: var(--radius-md);
       padding: var(--table-stacked-collection-card-padding-y)
         var(--table-stacked-collection-card-padding-x);
@@ -646,7 +663,9 @@
 
     [data-collapse-below="xl"] .ui-table-row {
       display: block;
-      border: 1px solid hsl(var(--border));
+
+      height: auto;
+      border: var(--stroke-hairline) solid hsl(var(--border));
       border-radius: var(--radius-md);
       padding: var(--table-stacked-collection-card-padding-y)
         var(--table-stacked-collection-card-padding-x);

package/dist/tokens/components/badge.css

@@ -10,4 +10,12 @@
   --badge-line-height: calc(1 / 0.75);
 
   --badge-icon-size: var(--icon-size-xs);
+
+  --badge-tint-fill: 18%;
+  --badge-tint-edge: 45%;
+
+  --badge-tint-surface: hsl(var(--card));
+  --badge-tint-foreground: hsl(var(--card-foreground));
+
+  --badge-color: var(--badge-tint-surface);
 }

package/dist/tokens/components/control.css

@@ -31,6 +31,7 @@
 
   --rating-focus-ring-offset: 2px;
 
+  --checkbox-border-width: var(--stroke-hairline);
   --checkbox-size: calc(1rem * var(--scaling));
   --checkbox-size-compact: 0.875rem;
   --checkbox-size-comfortable: 1.125rem;

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

@@ -83,6 +83,26 @@
   --scroll-area-bar-padding: 1px;
   --scroll-area-thumb-radius: var(--radius-pill);
 
+  --timeline-grid-hour-height: 2.5rem;
+  --timeline-grid-axis-width: 3.25rem;
+  --timeline-grid-column-min-width: 6rem;
+  --timeline-grid-event-min-height: 1.5rem;
+  --timeline-grid-axis-font-size: var(--font-size-2xs);
+  --timeline-grid-head-font-size: var(--font-size-xs);
+  --timeline-grid-event-font-size: var(--font-size-2xs);
+  --timeline-grid-event-gap: var(--space-1);
+  --timeline-grid-event-space-inset: var(--space-1);
+  --timeline-grid-event-radius: var(--radius-sm);
+  --timeline-grid-event-border-width: var(--stroke-md);
+  --timeline-grid-now-width: var(--stroke-sm);
+
+  --timeline-grid-line-color: initial;
+  --timeline-grid-event-color: initial;
+
+  --timeline-grid-event-muted-color: hsl(var(--foreground));
+  --timeline-grid-now-color: initial;
+  --timeline-grid-current-tint: initial;
+
   --permission-matrix-label-width: 16rem;
   --permission-matrix-role-space-gap: var(--space-1);
   --permission-matrix-name-space-gap: 0.375rem;

package/dist/tokens/components/shell.css

@@ -107,6 +107,10 @@
   --auth-shell-main-padding: var(--space-6);
   --auth-shell-footer-padding: var(--space-3) var(--space-6) var(--space-4);
 
+  --auth-shell-bar-gap: var(--space-inline-sm);
+
+  --auth-shell-wide-card-max-width: 64rem;
+
   --auth-shell-canonical-control-height: var(--band-height-lg);
   --auth-shell-canonical-card-max-width: 22.5rem;
   --auth-shell-canonical-heading-size: var(--font-size-base);
@@ -228,3 +232,21 @@
     --app-shell-bar-height: var(--band-height-3xl);
   }
 }
+
+:root {
+  --mobile-shell-block-size: 100dvh;
+  --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));
+
+  --mobile-shell-inset-inline: var(--space-4);
+
+  --mobile-shell-control-height: var(--control-height-comfortable);
+  --mobile-shell-region-gap: var(--space-2);
+  --mobile-shell-status-bar-height: var(--band-height-lg);
+  --mobile-shell-header-bar-height: var(--band-height-3xl);
+
+  --mobile-shell-tab-bar-height: calc(var(--band-height-3xl) + var(--space-2));
+  --mobile-shell-main-padding-block: var(--space-4);
+  --mobile-shell-actions-padding-block: var(--space-3);
+}

package/dist/tokens/components/table.css

@@ -8,6 +8,8 @@
   --table-cell-padding-y: var(--space-2);
   --table-cell-space-x: var(--control-padding-x);
 
+  --table-cell-indent-space-step: var(--space-4);
+
   --table-border-color: initial;
   --table-pagination-padding-y: initial;
   --table-pagination-padding-x: initial;

package/docs/SPACING.md

@@ -42,15 +42,28 @@ Implementation: `src/tokens/base.css` (values) · layout owners: `src/styles/*-l
 | `--card-space-body-y`                             | `--space-section-active` | Header↔body gap                            |
 | `--card-space-header-y` / `--card-space-footer-y` | `--space-stack-sm`       | Banded header + separated footer band      |
 
-| Component                 | Use                                                |
-| ------------------------- | -------------------------------------------------- |
-| `StatCard`                | KPI / stat tile (`solo` path)                      |
-| `CardContent solo`        | Body-only card (same padding as `StatCard`)        |
-| `CardContent flush tight` | Edge-to-edge table/tabs in card                    |
-| `ui-card-inset-x`         | Align nested cells to shell (tables in flush body) |
+| Component                 | Use                                         |
+| ------------------------- | ------------------------------------------- |
+| `StatCard`                | KPI / stat tile (`solo` path)               |
+| `CardContent solo`        | Body-only card (same padding as `StatCard`) |
+| `CardContent flush tight` | Edge-to-edge table/tabs in card             |
 
 See preview **Data Display → Card** for live examples.
 
+### Inset classes (padding on something that is not a `Card*` slot)
+
+`Card*` slots get their padding from `data-slot`. Everything else that must sit on the same rhythm (a table cell, a grid header strip, a scroll body, a sticky action row, a full-bleed toolbar) uses one of three public classes. They are the only legal way to take card-token padding onto a plain element, because the audit rejects Tailwind `p-*` / `px-*` (`no-utility-spacing`).
+
+Pick by AXIS, and note that the three do **not** share one value: each reads a different card token, so `ui-card-inset` is not `ui-card-inset-x` plus `ui-card-inset-y`.
+
+| Class             | Axis               | Token                   | Use when                                                                                                                                                                                                     |
+| ----------------- | ------------------ | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `ui-card-inset-x` | inline (start/end) | `--card-space-inset`    | The element must line up with the card shell edge, and the block axis is owned by something else (a fixed row height, a table cell). Rows in a `CardContent flush` table, a header strip in a bordered grid. |
+| `ui-card-inset-y` | block (top/bottom) | `--card-space-header-y` | The element runs edge to edge inline but needs the band rhythm of a banded header / separated footer. A weekday header strip, a full-bleed toolbar cell.                                                     |
+| `ui-card-inset`   | all four sides     | `--card-space-body-y`   | A self-contained panel that owns its own padding on every side: a scrollable body, a sticky action bar, an expanded row panel below a table row.                                                             |
+
+Because `ui-card-inset-x` reads `--card-space-inset`, it follows the card it sits in: a `Card density="tight"` or `"cozy"` moves those cells with the shell. The other two read fixed steps (band and body) and do not.
+
 ## MCP
 
 `get_pattern page-sections` (a page of Cards, spaced by the page) · `get_rule 40` (mobile-first spacing) · `list_audit_rules` (the spacing rules the CLI enforces).

package/docs/charts/compact-bar-trend.tsx

@@ -13,13 +13,12 @@ import { Text } from "@godxjp/ui/general";
 import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
 
 /**
- * CompactBarTrend — the DEPENDENCY-FREE compact bar trend (gh#218).
+ * CompactBarTrend — the DEPENDENCY-FREE compact bar trend.
  *
- * `BarChart` needs the `recharts` optional peer; a platform whose policy forbids screen
- * implementers from adding dependencies cannot use it, and used to fall back to a page-local
- * grid with inline heights. `CompactBarTrend` closes that gap: the marks are token-sized CSS
- * blocks, so the canonical SCR-201 admin dashboard gets a real framework chart with zero
- * consumer CSS, zero inline height math and zero hardcoded colour.
+ * `BarChart` needs the `recharts` optional peer, so a platform whose policy forbids screen
+ * implementers from adding dependencies cannot use it. The marks here are token-sized CSS
+ * blocks instead, so a dashboard gets a real framework chart with zero consumer CSS, zero
+ * inline height math and zero hardcoded colour.
  *
  * Everything below is composed from real @godxjp/ui primitives only.
  */

package/docs/data-display/avatar.tsx

@@ -25,12 +25,10 @@ import portraitSlate from "../assets/portrait-slate.svg";
  * URL against PREVIEW_BASE — an absolute "/assets/…" would 404 wherever the site is served from a
  * sub-path.
  *
- * They used to be `https://picsum.photos/...`. A docs page that fetches a THIRD-PARTY image cannot
- * render without the public internet, and on CI it does not merely look wrong — it hangs: the
- * request never settles, `networkidle` never fires, and `page.goto` times out at 30s. That is what
- * failed `data-display-avatar` and `data-display-card-index` at every viewport in both the axe and
- * geometry sweeps (gh#333), long after the preview server itself was fixed. Committed files cost
- * no request that can hang and no service that can disappear.
+ * A docs page must never fetch a THIRD-PARTY image: without the public internet it cannot render,
+ * and on CI it does not merely look wrong, it hangs — the request never settles, `networkidle`
+ * never fires, and `page.goto` times out. Committed files cost no request that can hang and no
+ * service that can disappear.
  */
 
 /**
@@ -93,7 +91,7 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        {/* shape="square" — the entity-header organization / service mark (gh#249) */}
+        {/* shape="square" — the entity-header organization / service mark */}
         <Card>
           <CardHeader>
             <CardTitle level={2}>エンティティヘッダー · shape=&quot;square&quot;</CardTitle>
@@ -136,7 +134,7 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        {/* appearance="tinted" — the capability medallion (gh#12) */}
+        {/* appearance="tinted" — the capability medallion */}
         <Card>
           <CardHeader>
             <CardTitle level={2}>
@@ -192,7 +190,7 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        {/* presence — the realtime reachability dot (gh#309) */}
+        {/* presence — the realtime reachability dot */}
         <Card>
           <CardHeader>
             <CardTitle level={2}>プレゼンス · presence</CardTitle>

package/docs/data-display/badge.tsx

@@ -30,6 +30,21 @@ const shapes = [
   { shape: "sharp" as const, label: "角 Sharp" },
 ];
 
+/**
+ * Colours a person picked, not colours that mean something — a status and an
+ * issue type out of a project's own settings screen, plus the two ends of the
+ * range an administrator can still type. `#488a5a` is here because it is the
+ * worst case for a SOLID chip: near-black and white measure equal on it, both
+ * 4.15:1, under the 4.5 badge-sized text needs. Washed, it clears 8.52.
+ */
+const dataColours = [
+  { color: "#4488c5", label: "処理中 In progress" },
+  { color: "#ea9a10", label: "未対応 Open" },
+  { color: "#488a5a", label: "完了 Done" },
+  { color: "#000000", label: "黒 Black" },
+  { color: "#ffffff", label: "白 White" },
+];
+
 const tones = [
   { tone: "default" as const, label: "既定 Default" },
   { tone: "primary" as const, label: "ブランド Brand" },
@@ -44,7 +59,7 @@ const tones = [
 const statuses = ["active", "draft", "pending", "cancelled", "failed", "scheduled"];
 
 /**
- * Subscription/billing lifecycle keys (gh#216). They ship the SAME canonical status→tone→icon
+ * Subscription/billing lifecycle keys. They ship the SAME canonical status→tone→icon
  * map as every other key, so a billing screen never keeps a page-local colour table. They are
  * demoed explicitly because their i18n labels were once missing. A missing key renders the raw
  * `status.trialing` string, and only a rendered demo makes that regression visible.
@@ -120,6 +135,27 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>The record&rsquo;s own colour</CardTitle>
+            <CardDescription>
+              color carries DATA: a status an administrator coloured, an issue type, a tag. The chip
+              is washed into the surface rather than filled, because a solid chip has to choose a
+              foreground and no choice is readable for every colour a picker can produce. Retune the
+              wash with --badge-tint-fill / --badge-tint-edge.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" wrap align="center" gap="sm">
+              {dataColours.map((c) => (
+                <Badge key={c.color} shape="pill" color={c.color}>
+                  {c.label}
+                </Badge>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Semantic tones</CardTitle>