@godxjp/ui 28.9.0 → 28.10.0

package/dist/styles/control.css

@@ -560,7 +560,9 @@
 
   .ui-switch-thumb {
     pointer-events: none;
-    display: block;
+
+    display: grid;
+    place-items: center;
     width: var(--switch-thumb-size);
     height: var(--switch-thumb-size);
     border-radius: var(--radius-pill);
@@ -1195,8 +1197,13 @@
 
   .ui-segmented-item[data-state="checked"] {
     background: hsl(var(--segmented-item-selected-background));
-    box-shadow: var(--segmented-item-selected-shadow);
+
+    box-shadow:
+      var(--segmented-item-selected-shadow),
+      inset 0 0 0 1px hsl(var(--segmented-item-selected-border-color, var(--input)));
     color: hsl(var(--segmented-item-selected-color));
+
+    font-weight: var(--segmented-item-selected-font-weight);
   }
 
   .ui-segmented-item[data-disabled] {
@@ -1332,6 +1339,13 @@
     cursor: pointer;
   }
 
+  .ui-toggle > svg,
+  .ui-control-trigger > svg {
+    inline-size: var(--control-icon-size);
+    block-size: var(--control-icon-size);
+    flex-shrink: 0;
+  }
+
   .ui-control-trigger:disabled,
   .ui-control-trigger[data-disabled] {
     cursor: not-allowed;
@@ -2102,6 +2116,13 @@
     color: hsl(var(--muted-foreground));
   }
 
+  .ui-input-leading > svg,
+  .ui-input-trailing > svg {
+    inline-size: var(--control-icon-size);
+    block-size: var(--control-icon-size);
+    flex-shrink: 0;
+  }
+
   .ui-input-trailing {
     inset-inline-end: var(--control-inline-affix-inset-inline);
   }
@@ -2873,6 +2894,12 @@
     white-space: nowrap;
   }
 
+  .ui-input-addon > svg {
+    inline-size: var(--control-icon-size);
+    block-size: var(--control-icon-size);
+    flex-shrink: 0;
+  }
+
   .ui-input-group > [data-slot="input-addon-before"] {
     border-start-start-radius: var(--control-radius);
     border-end-start-radius: var(--control-radius);
@@ -2887,12 +2914,14 @@
 
   .ui-input-group:has(> [data-slot="input-addon-before"]) .ui-input,
   .ui-input-group:has(> [data-slot="input-addon-before"]) .ui-input-affix-wrapper {
+    --input-radius-start: 0;
     border-start-start-radius: 0;
     border-end-start-radius: 0;
   }
 
   .ui-input-group:has(> [data-slot="input-addon-after"]) .ui-input,
   .ui-input-group:has(> [data-slot="input-addon-after"]) .ui-input-affix-wrapper {
+    --input-radius-end: 0;
     border-start-end-radius: 0;
     border-end-end-radius: 0;
   }

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

@@ -1232,7 +1232,7 @@
 
   .ui-prose :is(th, td) {
     border: var(--stroke-hairline) solid hsl(var(--border));
-    padding: var(--table-cell-padding-y) var(--table-cell-space-x);
+    padding: var(--table-cell-padding-y) var(--table-cell-space-x, var(--space-section-active));
     text-align: start;
     vertical-align: top;
   }

package/dist/styles/layout.css

@@ -142,6 +142,23 @@
     flex: none;
   }
 
+  .ui-flex[data-measure] {
+    margin-inline: auto;
+    inline-size: 100%;
+  }
+
+  .ui-flex[data-measure="narrow"] {
+    max-inline-size: var(--page-measure-narrow);
+  }
+
+  .ui-flex[data-measure="medium"] {
+    max-inline-size: var(--page-measure-medium);
+  }
+
+  .ui-flex[data-measure="wide"] {
+    max-inline-size: var(--page-measure-wide);
+  }
+
   .ui-flex[data-align="start"] {
     align-items: flex-start;
   }

package/dist/styles/navigation-layout.css

@@ -441,7 +441,9 @@
   }
 
   .ui-pagination .ui-button svg,
-  .ui-pagination .ui-pagination-link svg {
+  .ui-pagination .ui-pagination-link svg,
+
+  .ui-pagination .ui-pagination-ellipsis svg {
     inline-size: var(--pagination-icon-size);
     block-size: var(--pagination-icon-size);
   }

package/dist/styles/shell-layout.css

@@ -1741,6 +1741,8 @@
   .sb-nav-group-trigger .sb-chevron {
     margin-inline-start: auto;
     flex: 0 0 auto;
+    inline-size: var(--sidebar-nav-icon-size);
+    block-size: var(--sidebar-nav-icon-size);
     opacity: 0.6;
     transition: transform 150ms ease;
   }

package/dist/styles/table-layout.css

@@ -88,12 +88,14 @@
 
   .ui-table-row[data-tone] > [data-slot="table-cell"]:first-child {
     border-inline-start: var(--table-row-tone-rail-width) solid hsl(var(--table-row-tone-color));
-    padding-inline-start: calc(var(--table-cell-space-x) - var(--table-row-tone-rail-width));
+    padding-inline-start: calc(
+      var(--table-cell-space-x, var(--space-section-active)) - var(--table-row-tone-rail-width)
+    );
   }
 
   [data-slot="table-head"] {
     height: var(--table-row-height);
-    padding: var(--table-cell-padding-y) var(--table-cell-space-x);
+    padding: var(--table-cell-padding-y) var(--table-cell-space-x, var(--space-section-active));
     text-align: start;
     vertical-align: middle;
     background: var(--table-header-background, hsl(var(--muted)));
@@ -113,7 +115,7 @@
   }
 
   [data-slot="table-cell"] {
-    padding: var(--table-cell-padding-y) var(--table-cell-space-x);
+    padding: var(--table-cell-padding-y) var(--table-cell-space-x, var(--space-section-active));
     vertical-align: middle;
 
     white-space: nowrap;
@@ -146,7 +148,7 @@
 
   [data-slot="table-cell"][data-indent] {
     padding-inline-start: calc(
-      var(--table-cell-space-x) + var(--table-cell-indent-level, 0) *
+      var(--table-cell-space-x, var(--space-section-active)) + var(--table-cell-indent-level, 0) *
         var(--table-cell-indent-space-step)
     );
   }
@@ -207,7 +209,10 @@
     justify-content: flex-end;
     gap: var(--space-inline-sm);
     padding-block: var(--table-pagination-padding-y, var(--space-stack-sm));
-    padding-inline: var(--table-pagination-padding-x, var(--table-cell-space-x));
+    padding-inline: var(
+      --table-pagination-padding-x,
+      var(--table-cell-space-x, var(--space-section-active))
+    );
   }
 
   .ui-data-table-pagination--numbered {
@@ -634,7 +639,16 @@
       white-space: normal;
     }
 
-    [data-collapse-below="sm"] [data-slot="table"]:has([data-slot="table-head"]:nth-child(7)) {
+    [data-collapse-below="sm"]
+      [data-slot="table"]:has(
+        [data-slot="table-head"]:nth-child(7),
+        [data-slot="table-head"][data-priority="primary"]
+          ~ [data-slot="table-head"][data-priority="primary"],
+        [data-slot="table-head"][data-priority="secondary"]
+          ~ [data-slot="table-head"][data-priority="secondary"],
+        [data-slot="table-head"][data-priority="meta"]
+          ~ [data-slot="table-head"][data-priority="meta"]
+      ) {
       --table-action-collection-primary-width: var(--table-action-collection-primary-width-floor);
       --table-action-collection-secondary-width: var(
         --table-action-collection-secondary-width-floor
@@ -664,7 +678,16 @@
       white-space: normal;
     }
 
-    [data-collapse-below="md"] [data-slot="table"]:has([data-slot="table-head"]:nth-child(7)) {
+    [data-collapse-below="md"]
+      [data-slot="table"]:has(
+        [data-slot="table-head"]:nth-child(7),
+        [data-slot="table-head"][data-priority="primary"]
+          ~ [data-slot="table-head"][data-priority="primary"],
+        [data-slot="table-head"][data-priority="secondary"]
+          ~ [data-slot="table-head"][data-priority="secondary"],
+        [data-slot="table-head"][data-priority="meta"]
+          ~ [data-slot="table-head"][data-priority="meta"]
+      ) {
       --table-action-collection-primary-width: var(--table-action-collection-primary-width-floor);
       --table-action-collection-secondary-width: var(
         --table-action-collection-secondary-width-floor
@@ -694,7 +717,16 @@
       white-space: normal;
     }
 
-    [data-collapse-below="lg"] [data-slot="table"]:has([data-slot="table-head"]:nth-child(7)) {
+    [data-collapse-below="lg"]
+      [data-slot="table"]:has(
+        [data-slot="table-head"]:nth-child(7),
+        [data-slot="table-head"][data-priority="primary"]
+          ~ [data-slot="table-head"][data-priority="primary"],
+        [data-slot="table-head"][data-priority="secondary"]
+          ~ [data-slot="table-head"][data-priority="secondary"],
+        [data-slot="table-head"][data-priority="meta"]
+          ~ [data-slot="table-head"][data-priority="meta"]
+      ) {
       --table-action-collection-primary-width: var(--table-action-collection-primary-width-floor);
       --table-action-collection-secondary-width: var(
         --table-action-collection-secondary-width-floor
@@ -724,7 +756,16 @@
       white-space: normal;
     }
 
-    [data-collapse-below="xl"] [data-slot="table"]:has([data-slot="table-head"]:nth-child(7)) {
+    [data-collapse-below="xl"]
+      [data-slot="table"]:has(
+        [data-slot="table-head"]:nth-child(7),
+        [data-slot="table-head"][data-priority="primary"]
+          ~ [data-slot="table-head"][data-priority="primary"],
+        [data-slot="table-head"][data-priority="secondary"]
+          ~ [data-slot="table-head"][data-priority="secondary"],
+        [data-slot="table-head"][data-priority="meta"]
+          ~ [data-slot="table-head"][data-priority="meta"]
+      ) {
       --table-action-collection-primary-width: var(--table-action-collection-primary-width-floor);
       --table-action-collection-secondary-width: var(
         --table-action-collection-secondary-width-floor

package/dist/tokens/components/segmented.css

@@ -28,7 +28,11 @@
   --segmented-item-active-background: var(--secondary);
 
   --segmented-item-selected-background: var(--background);
-  --segmented-item-selected-shadow: var(--shadow-sm);
+  --segmented-item-selected-shadow: var(--shadow-md);
+
+  --segmented-item-selected-font-weight: var(--font-weight-medium);
+
+  --segmented-item-selected-border-color: initial;
 
   --segmented-count-min-width: var(--button-count-min-width);
   --segmented-count-space-inline: var(--button-count-space-inline);

package/dist/tokens/components/table.css

@@ -6,7 +6,8 @@
   --table-row-height-comfortable: var(--band-height-xl);
   --table-row-height: calc(var(--table-row-height-default) * var(--scaling));
   --table-cell-padding-y: var(--space-2);
-  --table-cell-space-x: var(--control-padding-x);
+
+  --table-cell-space-x: initial;
 
   --table-cell-indent-space-step: var(--space-4);
 

package/docs/COMPOSITION-VS-COMPONENT.md

@@ -84,6 +84,7 @@ new UI need
 | **PricingTable** / feature grid                         | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | **Composition** — `ResponsiveGrid` + `Card`                              |
 | Dashboard **page layout**                               | ❌  | ❌  | ❌  | ❌  | ➖  | ❌  | ❌  | **Composition** — `AppShell` + `PageContainer` + `ResponsiveGrid`        |
 | "Icon medallion"                                        | ❌  | ❌  | ❌  | ❌  | ✅  | ❌  | ❌  | **Composition** — `Avatar` (square) + a Lucide glyph                     |
+| **Section** / **Band** (full-bleed + measured column)   | ❌  | ❌  | ❌  | ❌  | ✅  | ❌  | ❌  | **Composition** — `<section>` + `Flex measure` + `pad`; see §3.1         |
 
 `✅ pass · ❌ fail · ➖ borderline`. **StatCard** is the instructive borderline: C2 is weak (it owns little behavior), but it is a universal KPI tile with a controlled API, fully tokenized, broadly reused — so it earns its place. A **Hero** fails six of seven; it is unambiguously a composition.
 
@@ -106,6 +107,46 @@ C2 rather than C7.
 
 **ServiceLauncherCard is the ONE recorded exception, and it is recorded so that it stays one.** It shipped before the test was run against it, and when the test was run it came back with two hard FAILs: **C2** — no state, no keyboard handling, no focus management, its only ARIA three static attributes — and **C3** — its own imports are `Card` + `CardContent` + `Badge` + a Lucide glyph, so "could I build this right now from primitives?" is yes. By §2 that makes it a composition pattern. It is kept anyway because `src/components/layout/app-launcher.tsx` consumes it: it is an internal building block of a component that **does** pass, so the question was never "should it exist" but "should it be PUBLIC", and removing a public export is breaking. Keeping it public was the cheaper call and the ledger lives on gh#814 and at the top of `src/components/data-display/service-launcher-card.tsx`. **Consumers should compose `Card` + `Badge` for a service tile** — reach for `ServiceLauncherCard` only to match `AppLauncher`'s own tiles — and this row is not precedent for adding another static tile to `src/components/`.
 
+### 3.1 "Full-bleed outside, measured column inside" — the case that was answered with a PROP (gh#839)
+
+This row exists because the question it settles was asked the other way round, and the right answer
+turned out to be neither "add a component" nor "do nothing".
+
+**A `Section` component is refused, and it is refused for Hero's reasons.** It owns no state, no
+keyboard, no focus and no ARIA a `<section aria-labelledby>` does not already have (**C2**); it is
+`<section>` + `Flex` + padding + a max-width, i.e. buildable today (**C3**); its API would be the
+grab-bag `band` / `measure` / `glow` / `surface` / `bleed` that **C4** names by name; and a JP
+business-software library would be shipping a marketing band to every consumer (**C7**). One
+criterion of seven passes. Nothing about that is close.
+
+**But "do nothing" was also refused, and that is the part worth remembering.** The doctrine's own
+remedy for a composition is a TOKEN (§4.3), and `--page-measure-wide` shipped in 28.8.0 — so on
+paper the gap was already closed. It was not. A token is only closed when something can READ it,
+and three unrelated pages had each hand-written the identical four declarations to do so:
+`docs/showcase/marketing-page.tsx` as an inline `style` constant, `acme-website.tsx` as `.tx-shell`,
+`futurelastic-web.tsx` as `.fl-shell` — one shape, three spellings, two of them page-local CSS
+classes on the pages whose entire claim is that they need none. `docs/TOKENS.md` calls a value that
+appears in more than one place tier 1, and the same logic reads on a SHAPE.
+
+**The third move is a prop on a primitive that already passes the test.** `Flex measure` (narrow |
+medium | wide) centres the box and caps it at `var(--page-measure-*)`; it adds no gutter, because
+`pad` owns that. A full-bleed band is now `<section>` — carrying the edge-to-edge paint — around one
+`<Flex direction="col" measure="wide" pad={{ inline: 6, block: 20 }}>`. Measured on
+`marketing-page.tsx`: seven bands, 7 inline `style` spreads and 3 `CSSProperties` constants gone,
+the metric that page defends (0 bespoke classes, 0 raw px/rem literals) unchanged at 0/0, and the
+geometry byte-identical (1440: section 1440px, column 1152px, band 96/80px, gutter 24px).
+
+**`PageContainer measure="wide"` stays refused, and for the original reason.** A marketing page is
+full-bleed `<section>`s; `PageContainer` owns page padding and a header/toolbar/footer scaffold, so
+the two pages that are the prop's proof still cannot consume it. The prop went to the primitive
+those pages CAN put inside a `<section>`, which is the distinction the earlier deferral was missing
+rather than a reversal of it.
+
+**The rule this leaves behind:** when a composition repeats a shape, ask whether an existing
+primitive is missing ONE AXIS before you ask whether a new component is missing. A component that
+fails C1–C7 and a prop that closes the same gap are not the same proposal, and the test above is
+only asking about the first.
+
 ---
 
 ## 4. How to build a composition pattern correctly

package/docs/DESIGN-AUTHORITY.md

@@ -449,6 +449,20 @@ expandable.expandedRowKeys` / `onExpandedRowsChange`. This library already mappe
   (`role="toolbar"`, `aria-pressed`); the prop there only keeps the last item selected.
   Divergence from Radix's markup is the point of the change, not a side effect of it.
 
+- **`Input addonBefore` / `addonAfter` stay, although antd DEPRECATED them (gh#841).** Verified in
+  `ant-design@master` rather than on the docs page: `components/input/Input.tsx` carries
+  `@deprecated Use Space.Compact instead` on both props and fires a dev-time
+  `devUseWarning('Input').deprecated(…)` for each, while still rendering them; both locale tables
+  strike the rows through and the `addon` demo is flagged `debug`, so it no longer appears on the
+  published page. The deprecation is a REFACTOR onto `Space.Compact`, and this library has no
+  `Space` — so following it would delete the joined control and put nothing in its place, which is
+  a breaking change bought for nothing. `addonBefore` IS the joined control here: it renders
+  `.ui-input-group`, and gh#841 squared its seam. The steer that IS followed is the one antd's own
+  live surface gives: a GLYPH belongs in `prefix`, inside the field, where there is one box, one
+  border and no seam; an addon is for a label segment. Written on the prop
+  (`src/props/components/data-entry.prop.ts`) and in the MCP catalog. Revisit if a `Space`/compact
+  primitive is ever ported — then antd's steer is followable and this becomes a migration.
+
 **A knob that only a fork could reach is not parity either.** antd's `components`,
 `filterDropdown`, `classNames`/`styles` semantic maps and `prefixCls` all exist to let a consumer
 replace the rendered markup. This library answers that layer with tokens (cardinal rule #45), so

package/docs/DEVELOPMENT.md

@@ -112,16 +112,91 @@ A change isn't done until its documentation reflects it:
 
 ---
 
-## 5. Verify before finishing
+## 5. Verify before finishing — scope the checks to the DIFF
+
+> **Read §5.0 before you run anything.** This section was rewritten after the owner watched a
+> two-file change take six minutes of gates and asked, correctly, _"bản chất chỉ sửa rất ít, check
+> diff đéo được hay sao? có phải release đâu mà run hết thế?"_ — it is not a release, so stop
+> running a release's worth of checks.
+
+### 5.0 MEASURE FIRST, THEN COMPLAIN — the real cost table
+
+Every number below was measured on this repo, on an M-series Mac, warm. **Measure again before you
+believe them; a cost you assumed is how you end up optimising the wrong thing.**
+
+| command                    | cost            | scope                                      |
+| -------------------------- | --------------- | ------------------------------------------ |
+| `check:token-tiers`        | **0.2s**        | whole repo                                 |
+| `audit`                    | **0.5s**        | whole repo (~600 files)                    |
+| `typecheck:docs`           | **0.7s**        | whole `docs/` program                      |
+| `typecheck`                | **1.3s**        | whole `src/` program                       |
+| `build`                    | **1.5s**        | whole package                              |
+| `preview:build`            | **1.9s**        | whole preview                              |
+| `lint`                     | **12.9s**       | whole repo                                 |
+| **`check:frame-overflow`** | **52s** (was 339s before it was parallelised, gh#851) | **199 frames x 2 viewports, in a browser** |
+
+**The lesson is the opposite of the intuition.** "Typecheck the whole system" sounds wasteful and
+costs **1.3 seconds** — typescript-7 is the native compiler, there is nothing to save there, and
+scoping it to changed files would cost more in ceremony than it saves in wall clock. Meanwhile the
+one command that _does_ cost real time is the browser sweep, and it is the one that looks innocent
+in a shell script.
+
+`check:frame-overflow` alone was **~96% of the wall clock** of a full local pass. It ran all 398
+navigations down a SINGLE page, in series. It now runs a pool of one page per core (capped at 8):
+**339s -> 52.3s, 6.5x**, byte-identical output, and a planted overflow is still caught at both
+viewports by both. `FRAME_CONCURRENCY=1` restores the serial run for debugging.
+
+> **Never argue about the cost of a gate you have not timed.** Time it:
+> `st=$(date +%s); pnpm <gate> >/dev/null 2>&1; echo $(( $(date +%s) - st ))s`
+
+### 5.1 What to run, by what you touched
+
+Find the row that matches your diff. Run that row. Do not run the rows below it.
+
+| you changed                        | run                                                                                              | why                                                       |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------- |
+| a `.css` file only                 | `audit` · `check:token-tiers` · the component's own tests · `check:frame-overflow --only <slug>` | no TS changed, so `typecheck` has nothing to say          |
+| a `.tsx`/`.ts` in `src/`           | `typecheck` · `lint` · `audit` · that group's tests                                              | 1.3s + 12.9s, both worth it                               |
+| a file in `docs/`                  | `typecheck:docs` · `audit` · `check:example-imports`                                             | `typecheck` covers `src/`, not `docs/`                    |
+| a token in `src/tokens/`           | + `check:token-tiers` · `src/tokens/__tests__` · `pnpm regen` twice (gh#847)                     | frozen tier tables go stale instantly                     |
+| a public export / prop             | + `pnpm ship:surface`                                                                            | 8 stacked generators; the list is derived, not remembered |
+| anything that moves LAYOUT         | `check:frame-overflow --only <slug>` while you work; the FULL sweep once, before the PR          | 17.5s vs 339s                                             |
+| opening the PR / cutting a release | the full sweep, `verify:ci:static`, the full suite in CI                                         | the only place "run everything" is right                  |
+
+### 5.2 `--only` — the diff-scoped browser sweep
+
+Added in gh#851 for exactly this. The sweep had no filter at all: 199 frames or nothing.
+
+```bash
+pnpm check:frame-overflow --only table                       # 9 frames,  17.5s
+pnpm check:frame-overflow --only '/^data-entry-(switch|segmented)/'   # 3 frames
+pnpm check:frame-overflow                                    # all 199,   52s
+```
+
+Measured: `--only table` is **17.5s against the full sweep's 52.3s**. Both matter — the pool cut
+the full sweep 6.5x, and `--only` cuts what is left to the frames a diff can actually reach.
+
+Two guards, both deliberate:
+
+- **`--only` refuses `--update-baseline`.** A partial sweep does not know whether the frames it
+  skipped are still clean, and recording that as the whole truth is how a baseline stops meaning
+  anything. Rebaselining needs the full sweep.
+- **Its success line says `PARTIAL, not a release gate`** and prints how many frames it skipped, so
+  a filtered green can never be pasted into a PR as if it were the real thing.
+
+### 5.3 The commands, for reference
 
 ```bash
-pnpm lint                 # eslint — self-contained flat config
-pnpm typecheck            # tsc --noEmit
+pnpm lint                 # eslint — self-contained flat config                    12.9s
+pnpm typecheck            # tsc --noEmit over src/                                  1.3s
+pnpm typecheck:docs       # tsc --noEmit over docs/                                 0.7s
+pnpm audit                # godxjp-ui-audit — 0 errors for touched files            0.5s
+pnpm check:mcp-sync       # MCP registry <-> library export drift guard
 pnpm vitest run src/components/<group>/__tests__ --maxWorkers=2   # ONLY what you touched
+pnpm check:frame-overflow --only <slug>   # the frames your change can reach       ~18s
+pnpm check:frame-overflow                 # all 199 — pre-PR and CI only             52s
+pnpm preview:build        # integration test: examples + docs must build            1.9s
 pnpm test                 # FULL suite — CI only, never from an agent loop
-pnpm preview:build        # integration test: examples + docs must build — at most once, pre-PR
-pnpm audit                # godxjp-ui-audit — 0 errors for touched files
-pnpm check:mcp-sync       # MCP registry ↔ library export drift guard
 pnpm check:frame-axe      # WCAG 2.2 AA over every frame — LOCAL ONLY, never in CI (FRAME-A11Y-CI.md)
 ```
 

package/docs/data-entry/tag-input.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
 import { FormField, TagInput } from "@godxjp/ui/data-entry";
+import { useTranslation } from "@godxjp/ui/i18n";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
 /**
@@ -11,9 +12,17 @@ import { Flex, PageContainer } from "@godxjp/ui/layout";
  * Composed only from real @godxjp/ui components.
  */
 export default function Demo() {
+  const { t } = useTranslation();
   const [invoiceTags, setInvoiceTags] = useState<string[]>(["営業部", "Q1"]);
   const [skillTags, setSkillTags] = useState<string[]>(["経理", "仕訳入力"]);
   const [recipientEmails, setRecipientEmails] = useState<string[]>([]);
+  /* The reporter's exact 71-character string, held FIRST so the truncated chip is one of the two
+     that render rather than one of the ones `+N` hides (gh#840). */
+  const [ledgerTags, setLedgerTags] = useState<string[]>([
+    "THEME_SEED_LEDGER_0007_CONTRAST_VERIFIED_AGAINST_CANVAS_AND_LABEL_00042",
+    "本番",
+    "ổn định",
+  ]);
 
   return (
     <PageContainer
@@ -87,6 +96,34 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("showcase.tagInput.longIdTitle")}</CardTitle>
+            <CardDescription>
+              maxTagTextLength cuts the chip TEXT only — the whole value stays in the chip&apos;s
+              title and in the remove button&apos;s accessible name. maxTagCount collapses the rest
+              into a +N that names, in its own title and aria-label, exactly which tags it hides.
+              Neither may swallow a value silently (gh#840).
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField
+              id="ledger-tags"
+              label={t("showcase.tagInput.ledgerLabel")}
+              helper={t("showcase.tagInput.ledgerHelper")}
+            >
+              <TagInput
+                id="ledger-tags"
+                value={ledgerTags}
+                onValueChange={setLedgerTags}
+                maxTagCount={2}
+                maxTagTextLength={16}
+                aria-label={t("showcase.tagInput.ledgerLabel")}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>無効状態</CardTitle>

package/docs/layout/flex.tsx

@@ -8,6 +8,7 @@ import {
   ListRow,
 } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
 /**
@@ -20,6 +21,7 @@ import { Flex, PageContainer } from "@godxjp/ui/layout";
  * @godxjp/ui components.
  */
 export default function Demo() {
+  const { t } = useTranslation();
   return (
     <PageContainer
       title="Flex"
@@ -398,6 +400,44 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("showcase.flexMeasure.title")}</CardTitle>
+            <CardDescription>{t("showcase.flexMeasure.lead")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <Flex
+                id="measure-narrow"
+                measure="narrow"
+                surface="muted"
+                pad={{ block: 2, inline: 6 }}
+                justify="center"
+              >
+                <Text tone="muted">measure=&quot;narrow&quot; · 42rem</Text>
+              </Flex>
+              <Flex
+                id="measure-medium"
+                measure="medium"
+                surface="muted"
+                pad={{ block: 2, inline: 6 }}
+                justify="center"
+              >
+                <Text tone="muted">measure=&quot;medium&quot; · 48rem</Text>
+              </Flex>
+              <Flex
+                id="measure-wide"
+                measure="wide"
+                surface="muted"
+                pad={{ block: 2, inline: 6 }}
+                justify="center"
+              >
+                <Text tone="muted">measure=&quot;wide&quot; · 72rem</Text>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/roadmap/website-components.md

@@ -649,6 +649,40 @@ with no call site in the two pages that are its proof, which is the tier-2 mista
 warns about. The token stands on its own as the vocabulary a composition caps its shell with, the
 way `--gradient-hero` does.
 
+**CLOSED in gh#839, and the refusal above still stands.** Leaving the centred column to "the
+composition writes it" was measured and found wanting: three unrelated pages hand-wrote the SAME
+four declarations — `marketing-page.tsx` as an inline `style` constant, `acme-website.tsx` as
+`.tx-shell`, `futurelastic-web.tsx` as `.fl-shell` — which `docs/TOKENS.md` calls tier 1, and two of
+the three spelled it as a page-local CSS class. The answer was not a `Section` component (it fails
+C1–C7 the way Hero does — `docs/COMPOSITION-VS-COMPONENT.md` §3.1 carries the ledger) and not
+`PageContainer`, which still cannot be consumed by a full-bleed page. It is **`Flex measure`**
+(`narrow | medium | wide`, reading `--page-measure-*`), on the primitive a `<section>` CAN put
+inside itself. It centres and caps and nothing else: `pad` keeps the gutter, so a band is
+`<section>` around one `<Flex direction="col" measure="wide" pad={{ inline: 6, block: 20 }}>`.
+
+| step                               | reader                                                         |
+| ---------------------------------- | -------------------------------------------------------------- |
+| `--space-section-band` (80px)      | `pad={{ block: 20 }}` — `GapStepProp` gained 20/24             |
+| `--space-section-hero` (96px)      | `pad={{ block: 24 }}`                                          |
+| `--page-measure-{narrow,med,wide}` | `Flex measure` — and `PageContainer measure` for the first two |
+
+**No compact rung for the band steps, decided on measurement.** At 320×568 the hero band is 96px
+at both edges = 33.8% of the first screen, and the `<h1>` still lands fully above the fold (top
+195px, bottom 315px). Three reasons not to add one: (1) 96px is already the NARROW rung of the
+industry pair — Tailwind UI's marketing sections are `py-24 sm:py-32`, i.e. 96px on a phone and
+128px from `sm` up, so the missing step is at the wide end, not the narrow one; (2) a numeric `pad`
+step is a VALUE by contract (`pad={3}` is 12px at every width — `GapStepProp`'s own docstring says
+so), and making 20/24 responsive would make them the two steps whose number lies; (3) a
+`--space-section-band-compact` token would have nowhere to be flipped: every `-active`/`-compact`
+pair in this repo switches inside a COMPONENT's scope (`.ui-page-container`,
+`.ui-centered-shell[data-preset="public-landing"]`), and a plain `<section>` has no such scope — so
+it would ship as vocabulary with no caller, the exact defect gh#839 exists to stop.
+`--centered-shell-landing-main-padding-block-compact` is not the counter-example it looks like: it
+is 40px → 24px of a SHELL's `main` padding, not a marketing band, and it lives inside that shell's
+own scope. **The real capability the band wants is a responsive object form for `pad`**, the one
+`direction` and `ResponsiveGrid columns` already take (`pad={{ block: { base: 12, md: 20 } }}`) —
+that is its own issue, and a much larger one than a token rung.
+
 ---
 
 ## 6. The animation and motion story