@godxjp/ui 28.8.0 → 28.10.0

package/docs/showcase/case4-login.tsx

@@ -283,11 +283,19 @@ export default function LoginShowcase() {
 
               <Text as="p" size="2xs" tone="muted" align="center" className="leading-relaxed">
                 ログインすると{" "}
-                <Button variant="link" size="sm" className="text-[length:var(--font-size-2xs)]">
+                <Button
+                  variant="link"
+                  size="sm"
+                  className="text-[length:var(--font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)))]"
+                >
                   利用規約
                 </Button>{" "}
                 ·{" "}
-                <Button variant="link" size="sm" className="text-[length:var(--font-size-2xs)]">
+                <Button
+                  variant="link"
+                  size="sm"
+                  className="text-[length:var(--font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)))]"
+                >
                   プライバシーポリシー
                 </Button>{" "}
                 に同意したものとみなされます。

package/docs/showcase/case5-shift-calendar.tsx

@@ -588,7 +588,7 @@ function MonthGrid({ onPick }: { onPick: (d: DayCell) => void }) {
                                 tone="destructive"
                                 variant="outline"
                                 shape="sharp"
-                                className="text-[length:var(--font-size-2xs)]"
+                                className="text-[length:var(--font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)))]"
                               >
                                 祝
                               </Badge>

package/docs/showcase/case6-agency-handy.tsx

@@ -368,7 +368,7 @@ function TabBar({ active, onChange }: { active: string; onChange: (id: string) =
             onClick={() => onChange(t.id)}
             aria-current={isActive ? "page" : undefined}
             className={
-              "h-full flex-col rounded-none text-[length:var(--font-size-2xs)] font-medium " +
+              "text-[length:var(--font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)))] h-full flex-col rounded-none font-medium " +
               (isActive ? "text-primary" : "text-muted-foreground")
             }
           >
@@ -637,7 +637,7 @@ function InboundTab({
             <ToggleGroupItem
               key={f.id}
               value={f.id}
-              className="h-9 shrink-0 rounded-full text-[length:var(--font-size-xs)] whitespace-nowrap"
+              className="text-[length:var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))] h-9 shrink-0 rounded-full whitespace-nowrap"
               // The library's OWN counter pill, not a `Text` at 70% opacity (gh#643). The
               // hand-rolled one measured 2.15:1 on the selected chip's --primary fill, because
               // `opacity-70` blends whatever ink it inherits back towards the fill underneath it —
@@ -852,19 +852,19 @@ function OutboundTab({ seg, setSeg }: { seg: string; setSeg: (v: string) => void
         <ResponsiveGrid columns={3} gap="xs">
           <ToggleGroupItem
             value="seal"
-            className="h-9 rounded-xl text-[length:var(--font-size-xs)] whitespace-nowrap"
+            className="text-[length:var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))] h-9 rounded-xl whitespace-nowrap"
           >
             Chờ niêm phong
           </ToggleGroupItem>
           <ToggleGroupItem
             value="handoff"
-            className="h-9 rounded-xl text-[length:var(--font-size-xs)] whitespace-nowrap"
+            className="text-[length:var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))] h-9 rounded-xl whitespace-nowrap"
           >
             Chờ bàn giao
           </ToggleGroupItem>
           <ToggleGroupItem
             value="done"
-            className="h-9 rounded-xl text-[length:var(--font-size-xs)] whitespace-nowrap"
+            className="text-[length:var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))] h-9 rounded-xl whitespace-nowrap"
           >
             Đã bàn giao
           </ToggleGroupItem>
@@ -1018,7 +1018,7 @@ export default function AgencyHandyShowcase() {
                 <ToggleGroupItem
                   key={s}
                   value={s}
-                  className="size-7 rounded-md text-[length:var(--font-size-2xs)] uppercase"
+                  className="text-[length:var(--font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)))] size-7 rounded-md uppercase"
                   title={s}
                 >
                   {s[0]}

package/docs/showcase/futurelastic-web.tsx

@@ -55,16 +55,14 @@ const THEME = `
   --font-family-display: "Sora", system-ui, sans-serif;
   --font-family-body: "Be Vietnam Pro", system-ui, "Noto Sans JP", sans-serif;
   --font-family-sans: var(--font-family-body);
-  /* 80px hero. --font-size-display is the display ramp's BASE KNOB, but overriding it HERE does
-     not move the derived steps: --font-size-5xl is declared at :root as var(--font-size-display),
-     so it computes on :root and merely INHERITS down — the freeze docs/TOKENS.md names, and the
-     reason its role-mirror knobs are declared initial. The whole --font-size-* scale is built this way
-     (--font-size-lg freezes on --font-size-base identically), so it is a systemic token-tier
-     defect, not this ramp's, and not gh#826's to fix. Measured, not assumed: with only the line
-     below, <Heading size="5xl"> painted 54px here, the :root value. Setting the STEP works,
-     because this declaration is on an ancestor of the heading. */
+  /* 80px hero, from the display ramp's BASE KNOB alone (gh#834).
+     This used to need a second line — --font-size-5xl: 5rem — and the comment that stood here said
+     why: --font-size-5xl was declared at :root as var(--font-size-display), so it substituted on
+     <html> and this scope merely INHERITED the answer root had given. Heading size="5xl" painted
+     54px with the display knob alone. The step is an initial knob now and the formula sits at the
+     call site, so one line moves the ramp: re-measured here at 80px, with 3xl/4xl following to
+     48.83/62.5px. */
   --font-size-display: 5rem;
-  --font-size-5xl: 5rem;
   /* The glass bar, opted into once (gh#831). acme-website.tsx hand-wrote the identical pair,
      which is why these are framework knobs now and not two literals on .fl-navbar. */
   --topbar-background-alpha: 80%;

package/docs/showcase/marketing-page.tsx

@@ -30,32 +30,40 @@
  *
  * ── WHAT IS STILL HAND-WRITTEN, AND WHY (the finding this page exists to produce) ───────────────
  *
- * Zero classes and zero literals did NOT mean zero CSS. Six things below are inline `style`
- * objects because no PROP reaches them. Each one is a named gap, in the order a reader meets them:
+ * Zero classes and zero literals did NOT mean zero CSS. Six things below WERE inline `style`
+ * objects because no PROP reached them. Each one is a named gap, in the order a reader meets them;
+ * gh#839 closed the first two:
  *
- *  1. THE SECTION BAND — `paddingBlock: var(--space-section-band | --space-section-hero)`.
- *     gh#831 minted the tokens and nothing reads them. `Flex pad` / `ResponsiveGrid pad` take a
- *     `GapProp`, whose numeric ladder stops at `12` (`--space-12`, 48px); `--space-20` (80px) and
- *     `--space-24` (96px) are off the end of it, so the marketing rhythm is the one spacing a
- *     layout primitive cannot state. It also has no compact step: `--space-section-hero` measures
- *     96px at 1440 AND at 320, where the package's own landing preset drops its band through
- *     `--centered-shell-landing-main-padding-block-compact`.
- *  2. THE CENTRED COLUMN — `marginInline: auto` + `inlineSize: 100%` +
+ *  1. THE SECTION BAND — was `paddingBlock: var(--space-section-band | --space-section-hero)`.
+ *     CLOSED by gh#839: the numeric `GapProp` ladder reaches the two band steps, so
+ *     `pad={{ block: 20 }}` (80px) and `pad={{ block: 24 }}` (96px) state the rhythm through the
+ *     public API, and every band below now does. Neither step has a compact variant and gh#839
+ *     decided it should not: `--space-section-hero` measures 96px at 1440 AND at 320, which is
+ *     deliberate — Tailwind UI's own marketing sections are `py-24 sm:py-32`, i.e. 96px is the
+ *     NARROW rung of the industry pair and the desktop one is the step above. A numeric `pad`
+ *     step is a VALUE (`pad={3}` is 12px everywhere); making one of them responsive would break
+ *     that contract for the whole ladder. `--centered-shell-landing-main-padding-block-compact`
+ *     is not the counter-example it looks like: 40px → 24px is a SHELL's main padding, not a
+ *     marketing band, and it switches inside `.ui-centered-shell`'s own scope, which a plain
+ *     `<section>` has no equivalent of.
+ *  2. THE CENTRED COLUMN — was `marginInline: auto` + `inlineSize: 100%` +
  *     `maxInlineSize: var(--page-measure-wide)` + `paddingInline: var(--space-6)`, repeated at
- *     every band. gh#831 minted `--page-measure-wide` and deliberately did not add
- *     `PageContainer measure="wide"`, reasoning that a marketing page is full-bleed sections with
- *     a centred inner column and `PageContainer` owns neither. The reasoning holds; its
- *     consequence is that NOTHING owns the centred inner column.
- *  3. THE STICKY BAR — `position: sticky` + `insetBlockStart` + `zIndex`. `Affix` does not exist
- *     here (`docs/roadmap/website-components.md` §5.2 proposed `--affix-inset-block-start` and
- *     `--affix-z-index`; neither shipped) and `Topbar` has no `sticky` prop.
+ *     every band. CLOSED by gh#839 as `Flex measure="wide"` + `pad={{ inline: 6 }}`. gh#831 minted
+ *     `--page-measure-wide` and deliberately did not add `PageContainer measure="wide"`, reasoning
+ *     that a marketing page is full-bleed sections with a centred inner column and `PageContainer`
+ *     owns neither. That reasoning still holds and was not reopened — the prop went to `Flex`, the
+ *     primitive a full-bleed `<section>` can actually put inside itself, where it has seven call
+ *     sites on this page. `measure` adds NO gutter: `pad` owns that, and one band with two padding
+ *     owners is how a measure and its inset drift apart.
+ *  3. THE STICKY BAR — `position: sticky` + `insetBlockStart` + `zIndex`. `Affix` has since
+ *     shipped (28.8.0, with the measured placeholder that removes the 62px page jump) and this
+ *     page has not yet been moved onto it; `Topbar` still has no `sticky` prop.
  *  4. THE GLASS — `--topbar-background-alpha` / `--topbar-backdrop-blur-size` as inline custom
- *     properties. They are `initial` by design, so a call site MUST set them, and that part is
- *     correct. The blur is the gap: this library has no blur SCALE (no `--blur-*` tier), so the
- *     only sources for a length are a raw literal or another component's private knob
- *     (`--app-launcher-launchpad-backdrop-blur-size`). It reads `--space-2` here, which keeps the
- *     literal count at zero by borrowing a token that means something else. A `--blur-sm|md|lg`
- *     foundation tier would close it properly. Measured result: `blur(8px)`.
+ *     properties. They are `initial` by design, so a call site MUST set them, and that is correct.
+ *     This used to read `--space-2`, borrowing a token that means something else, because the
+ *     library had no blur SCALE at all. gh#837 closed that: `--blur-sm|md|lg` now exists in
+ *     `foundation.css`, deliberately NOT `--scaling`-multiplied, because a backdrop blur is an
+ *     optical effect and compact density does not mean thinner glass. Measured: `blur(8px)`.
  *  5. THE HALO — `position: relative` / `overflow: hidden` on the band and `position: absolute` /
  *     `inset: 0` on the `.ui-brand-glow` layer. This is the package's own idiom (both siblings
  *     write `className="ui-brand-glow absolute inset-0"`), spelled as logical inline style so
@@ -155,20 +163,9 @@ import { useTranslation } from "@godxjp/ui/i18n";
 import { Flex, ResponsiveGrid, Separator, Topbar } from "@godxjp/ui/layout";
 import { AppSettingPicker } from "@godxjp/ui/navigation";
 
-/* ── The five inline-style constants named in the docblock. Every value is a token reference; no
-   number with a unit appears anywhere in this file. ─────────────────────────────────────────── */
-
-/** (2) The centred inner column. Nothing in the package owns this shape yet. */
-const SHELL: CSSProperties = {
-  marginInline: "auto",
-  inlineSize: "100%",
-  maxInlineSize: "var(--page-measure-wide)",
-  paddingInline: "var(--space-6)",
-};
-
-/** (1) The section rhythm gh#831 named and no prop reads. */
-const BAND: CSSProperties = { paddingBlock: "var(--space-section-band)" };
-const HERO_BAND: CSSProperties = { paddingBlock: "var(--space-section-hero)" };
+/* ── The inline-style constants named in the docblock. Every value is a token reference; no number
+   with a unit appears anywhere in this file. Gaps 1 and 2 no longer have one: `Flex measure` and
+   `Flex pad` state the band through props (gh#839). ──────────────────────────────────────────── */
 
 /** (5) The halo host and the halo layer. */
 const GLOW_HOST: CSSProperties = { position: "relative", overflow: "hidden" };
@@ -189,7 +186,7 @@ const GLASS_BAR: CSSProperties = {
      package writes for CenteredShell's landing preset, so no page-local media query. */
   "--topbar-inset": "max(var(--space-6), calc((100% - var(--page-measure-wide)) / 2))",
   "--topbar-background-alpha": "85%",
-  "--topbar-backdrop-blur-size": "var(--space-2)",
+  "--topbar-backdrop-blur-size": "var(--blur-md)",
 } as CSSProperties;
 
 /** Per-instance halo shaping — the four `--brand-glow-*` knobs, at the call site. */
@@ -446,7 +443,13 @@ export default function MarketingPage() {
             className="ui-brand-glow"
             style={{ ...GLOW_LAYER, ...HERO_GLOW }}
           />
-          <div style={{ ...SHELL, ...HERO_BAND, ...ABOVE_GLOW }}>
+          <Flex
+            direction="col"
+            gap="none"
+            measure="wide"
+            pad={{ inline: 6, block: 24 }}
+            style={ABOVE_GLOW}
+          >
             <ResponsiveGrid columns={{ base: 1, lg: 2 }} gap="xl" align="start">
               <Reveal>
                 <Flex direction="col" gap="lg">
@@ -532,12 +535,12 @@ export default function MarketingPage() {
                 </Card>
               </Reveal>
             </ResponsiveGrid>
-          </div>
+          </Flex>
         </section>
 
         {/* ── LOGO WALL ────────────────────────────────────────────────────────────────────── */}
         <section aria-labelledby="logos-title">
-          <div style={{ ...SHELL, ...BAND }}>
+          <Flex direction="col" gap="none" measure="wide" pad={{ inline: 6, block: 20 }}>
             <Flex direction="col" gap="lg">
               <Flex direction="col" gap="xs">
                 <Heading level={2} size="lg" id="logos-title">
@@ -567,13 +570,13 @@ export default function MarketingPage() {
                 ))}
               </Marquee>
             </Flex>
-          </div>
+          </Flex>
         </section>
 
         {/* ── FEATURE GRID ─────────────────────────────────────────────────────────────────── */}
         <section id="solutions" aria-labelledby="features-title">
           <Flex as="div" direction="col" gap="none" surface="muted">
-            <div style={{ ...SHELL, ...BAND }}>
+            <Flex direction="col" gap="none" measure="wide" pad={{ inline: 6, block: 20 }}>
               <Flex direction="col" gap="xl">
                 <Flex direction="col" gap="xs">
                   <Heading level={2} size="3xl" weight="bold" id="features-title">
@@ -613,13 +616,13 @@ export default function MarketingPage() {
                   ))}
                 </ResponsiveGrid>
               </Flex>
-            </div>
+            </Flex>
           </Flex>
         </section>
 
         {/* ── TESTIMONIALS ─────────────────────────────────────────────────────────────────── */}
         <section aria-labelledby="quotes-title">
-          <div style={{ ...SHELL, ...BAND }}>
+          <Flex direction="col" gap="none" measure="wide" pad={{ inline: 6, block: 20 }}>
             <Flex direction="col" gap="lg">
               <Heading level={2} size="3xl" weight="bold" id="quotes-title">
                 {t("marketingShowcase.testimonials.title")}
@@ -673,13 +676,13 @@ export default function MarketingPage() {
                 <CarouselDots />
               </Carousel>
             </Flex>
-          </div>
+          </Flex>
         </section>
 
         {/* ── PRICING ──────────────────────────────────────────────────────────────────────── */}
         <section id="pricing" aria-labelledby="pricing-title">
           <Flex as="div" direction="col" gap="none" surface="muted">
-            <div style={{ ...SHELL, ...BAND }}>
+            <Flex direction="col" gap="none" measure="wide" pad={{ inline: 6, block: 20 }}>
               <Flex direction="col" gap="xl">
                 <Flex direction="col" gap="md">
                   <Heading level={2} size="3xl" weight="bold" id="pricing-title">
@@ -774,7 +777,7 @@ export default function MarketingPage() {
                   })}
                 </ResponsiveGrid>
               </Flex>
-            </div>
+            </Flex>
           </Flex>
         </section>
 
@@ -785,7 +788,13 @@ export default function MarketingPage() {
             className="ui-brand-glow"
             style={{ ...GLOW_LAYER, ...CTA_GLOW }}
           />
-          <div style={{ ...SHELL, ...BAND, ...ABOVE_GLOW }}>
+          <Flex
+            direction="col"
+            gap="none"
+            measure="wide"
+            pad={{ inline: 6, block: 20 }}
+            style={ABOVE_GLOW}
+          >
             <Reveal on="view">
               <Flex direction="col" gap="md" align="center">
                 <Heading level={2} size="4xl" weight="bold" align="center" id="cta-title">
@@ -810,14 +819,14 @@ export default function MarketingPage() {
                 </Text>
               </Flex>
             </Reveal>
-          </div>
+          </Flex>
         </section>
       </main>
 
       {/* ── FOOTER ───────────────────────────────────────────────────────────────────────── */}
       <footer>
         <Flex as="div" direction="col" gap="none" surface="muted">
-          <div style={{ ...SHELL, ...BAND }}>
+          <Flex direction="col" gap="none" measure="wide" pad={{ inline: 6, block: 20 }}>
             <Flex direction="col" gap="lg">
               {/* ResponsiveGrid.Item span — the asymmetric footer both siblings hand-wrote a
                   `grid-template-columns: 1.4fr 1fr 1fr 1fr` for. It has shipped the whole time. */}
@@ -877,7 +886,7 @@ export default function MarketingPage() {
                 </Flex>
               </Flex>
             </Flex>
-          </div>
+          </Flex>
         </Flex>
       </footer>
     </Flex>

package/docs/showcase/table-expandable-rows.tsx

@@ -299,7 +299,10 @@ function DetailPanel({ employee }: { employee: Employee }) {
           {/* Per-day breakdown — quiet nested list, real Card chrome */}
           <Card>
             <CardHeader>
-              <CardTitle level={2} className="text-[length:var(--font-size-xs)]">
+              <CardTitle
+                level={2}
+                className="text-[length:var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))]"
+              >
                 今週の打刻
               </CardTitle>
               <CardAction>

package/docs/showcase/table-pagination.tsx

@@ -36,6 +36,7 @@ import {
 import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import { Pagination } from "@godxjp/ui/navigation";
+import { useTranslation } from "@godxjp/ui/i18n";
 import {
   Select,
   SelectContent,
@@ -91,8 +92,13 @@ function makeRows(count: number, prefix = "ATT"): Attendance[] {
       date: `2026-06-${String((i % 28) + 1).padStart(2, "0")}`,
       employee: NAMES[i % NAMES.length],
       dept: DEPTS[i % DEPTS.length],
-      clockIn: `0${startHour}:${["02", "58", "31", "07"][i % 4]}`,
-      clockOut: ot ? `${18 + Math.floor(ot / 60)}:${String(ot % 60).padStart(2, "0")}` : "18:00",
+      // `0${startHour}` hard-coded the leading zero and printed `010:07` at startHour 10 —
+      // the hand-built formatting this repo's own rules forbid. `padStart` on the hour, the
+      // same way the line above already does it for the date.
+      clockIn: `${String(startHour).padStart(2, "0")}:${["02", "58", "31", "07"][i % 4]}`,
+      clockOut: ot
+        ? `${String(18 + Math.floor(ot / 60)).padStart(2, "0")}:${String(ot % 60).padStart(2, "0")}`
+        : "18:00",
       overtime: ot,
       status: statuses[i % statuses.length],
     };
@@ -102,20 +108,38 @@ function makeRows(count: number, prefix = "ATT"): Attendance[] {
 const minutesFmt = (m: number) => (m === 0 ? "—" : `${m}分`);
 
 // Columns are shared between the cards (pure data — no per-card state inside).
+/* EVERY column declares a width, not just the first (gh#849).
+ *
+ * Measured at 2000px before this, as empty pixels between one cell's ink and the next's:
+ *
+ *   部署 → 出勤   521      残業 → 状態    57
+ *   従業員 → 部署 411      勤務日 → 従業員 40
+ *   退勤 → 残業   280
+ *
+ * A 521px hole beside a 40px seam, in one row. Only `勤務日` carried a width, so
+ * `table-layout: auto` sized the rest from content and dumped ALL the slack of a 1952px card
+ * into the two free-text columns — and because those are start-aligned while the measures are
+ * end-aligned, the slack opened as craters BETWEEN columns rather than inside them.
+ *
+ * With a width on every column the engine distributes the excess proportionally instead, so the
+ * gaps scale together and no single one dominates. The numbers are a ratio, not a measurement:
+ * the two free-text columns get the larger share because they are the ones that actually wrap. */
 const columns: ColumnDef<Attendance>[] = [
   { key: "date", header: "勤務日", width: "w-28" },
-  { key: "employee", header: "従業員" },
-  { key: "dept", header: "部署", hiddenOnMobile: true },
+  { key: "employee", header: "従業員", width: "w-44" },
+  { key: "dept", header: "部署", hiddenOnMobile: true, width: "w-36" },
   {
     key: "clockIn",
     header: "出勤",
     align: "right",
+    width: "w-24",
     render: (row) => <Text tabular>{row.clockIn}</Text>,
   },
   {
     key: "clockOut",
     header: "退勤",
     align: "right",
+    width: "w-24",
     render: (row) => <Text tabular>{row.clockOut}</Text>,
   },
   {
@@ -123,12 +147,17 @@ const columns: ColumnDef<Attendance>[] = [
     header: "残業",
     align: "right",
     hiddenOnMobile: true,
+    width: "w-24",
     render: (row) => <Text tabular>{minutesFmt(row.overtime)}</Text>,
   },
   {
     key: "status",
     header: "状態",
-    align: "center",
+    /* END, not CENTER (gh#849). The status column carries the table's right edge; centring a
+     * ~90px pill in it put the badges 102px inboard while the header count, the column headers
+     * and the pagination all landed on 17px. */
+    align: "right",
+    width: "w-32",
     render: (row) => <Badge status={row.status}>{STATUS_LABEL[row.status]}</Badge>,
   },
 ];
@@ -138,6 +167,8 @@ const columns: ColumnDef<Attendance>[] = [
 const NUMBERED_DATA = makeRows(83, "OFS");
 
 function NumberedPaginationCard() {
+  const { t } = useTranslation();
+  const fmt = useFormatters();
   const [page, setPage] = React.useState(2); // start mid-set so prev/next are both live
   const [pageSize, setPageSize] = React.useState(10);
 
@@ -150,7 +181,7 @@ function NumberedPaginationCard() {
         <CardTitle level={2}>番号付き + 件数選択</CardTitle>
         <CardAction>
           <Text size="xs" tone="muted" tabular>
-            全 {NUMBERED_DATA.length} 件
+            {t("showcase.pagination.recordCount", { count: NUMBERED_DATA.length })}
           </Text>
         </CardAction>
       </CardHeader>
@@ -164,7 +195,9 @@ function NumberedPaginationCard() {
           pageSize={pageSize}
           pageSizeOptions={[10, 20, 50]}
           showSizeChanger
-          showTotal={(total, [from, to]) => `${from}–${to} / ${total} 件`}
+          showTotal={(total, [from, to]) =>
+            `${fmt.number(from)}–${fmt.number(to)} / ${t("showcase.pagination.recordCount", { count: total })}`
+          }
           onValueChange={(nextPage, nextSize) => {
             setPage(nextPage);
             setPageSize(nextSize);
@@ -181,6 +214,8 @@ const LOADMORE_DATA = makeRows(42, "LDM");
 const LOADMORE_STEP = 8;
 
 function LoadMoreCard() {
+  const { t } = useTranslation();
+  const fmt = useFormatters();
   // Mid-load state at rest: some rows already revealed, more remaining.
   const [visible, setVisible] = React.useState(LOADMORE_STEP * 2);
   const [loading, setLoading] = React.useState(false);
@@ -205,7 +240,8 @@ function LoadMoreCard() {
         <CardTitle level={2}>もっと読む</CardTitle>
         <CardAction>
           <Text size="xs" tone="muted" tabular>
-            {rows.length} / {LOADMORE_DATA.length} 件表示
+            {fmt.number(rows.length)} /{" "}
+            {t("showcase.pagination.recordCount", { count: LOADMORE_DATA.length })}
           </Text>
         </CardAction>
       </CardHeader>
@@ -225,11 +261,13 @@ function LoadMoreCard() {
             {!done && <ChevronDown aria-hidden="true" />}
             {done
               ? "すべて表示しました"
-              : `さらに ${Math.min(LOADMORE_STEP, remaining)} 件を読み込む`}
+              : t("showcase.pagination.loadMore", {
+                  count: Math.min(LOADMORE_STEP, remaining),
+                })}
           </Button>
           {!done && (
             <Text size="xs" tone="muted" tabular>
-              残り {remaining} 件
+              {t("showcase.pagination.recordCount", { count: remaining })}
             </Text>
           )}
         </Flex>
@@ -242,11 +280,11 @@ function LoadMoreCard() {
 
 // Time-series 勤怠 logs grouped by month — offset paging is meaningless here,
 // so we use cursor first/next (DataTable.Pagination) + a period Select to jump.
-const PERIODS = [
-  { value: "2026-06", label: "2026年 6月" },
-  { value: "2026-05", label: "2026年 5月" },
-  { value: "2026-04", label: "2026年 4月" },
-] as const;
+/* The VALUE is data; the LABEL is a formatting decision and belongs to the active locale.
+ * Hard-coded "2026年 6月" rendered beside the library's own "Đầu" / "Tiếp" — two languages in one
+ * row, which is what the owner photographed. `Intl.DateTimeFormat` gives 「2026年6月」, "June 2026"
+ * and "tháng 6 năm 2026" from the same value. */
+const PERIODS = [{ value: "2026-06" }, { value: "2026-05" }, { value: "2026-04" }] as const;
 
 const PERIOD_DATA: Record<string, Attendance[]> = {
   "2026-06": makeRows(7, "CUR-06"),
@@ -255,6 +293,8 @@ const PERIOD_DATA: Record<string, Attendance[]> = {
 };
 
 function CursorPeriodCard() {
+  const { t } = useTranslation();
+  const fmt = useFormatters();
   const [period, setPeriod] = React.useState<string>("2026-06");
   // cursor === id of the last row of the previous page; undefined = first page.
   const [cursor, setCursor] = React.useState<string | undefined>(undefined);
@@ -284,7 +324,7 @@ function CursorPeriodCard() {
             <SelectContent>
               {PERIODS.map((p) => (
                 <SelectItem key={p.value} value={p.value}>
-                  {p.label}
+                  {fmt.month(p.value)}
                 </SelectItem>
               ))}
             </SelectContent>
@@ -294,10 +334,19 @@ function CursorPeriodCard() {
       <CardContent flush>
         <DataTable data={rows} columns={columns} getRowId={(row) => row.id} density="compact" />
       </CardContent>
-      <CardContent className="border-t">
+      {/* `DataTable.Pagination` owns its own inline inset, because it is normally the lone child
+       * of a FLUSH container. Here it shares a padded `CardContent` with the period label, so the
+       * two insets stack — measured 28px against the columns' 16px before this. Zeroing the slot's
+       * own knob hands the inset to the container that already supplies it; that is what
+       * `--table-pagination-padding-x` is for, and an instance override is the right tier for one
+       * element in one arrangement (docs/CUSTOMER-THEMING.md, tier 4). */}
+      <CardContent
+        className="border-t"
+        style={{ "--table-pagination-padding-x": "0" } as React.CSSProperties}
+      >
         <Flex direction="row" align="center" justify="between" wrap gap="sm">
           <Text size="xs" tone="muted" tabular>
-            {PERIODS.find((p) => p.value === period)?.label} · {all.length} 件
+            {fmt.month(period)} · {t("showcase.pagination.recordCount", { count: all.length })}
           </Text>
           <DataTable.Pagination
             cursor={lastVisibleId}
@@ -310,6 +359,27 @@ function CursorPeriodCard() {
   );
 }
 
+/* COUNTS AND MONTHS FOLLOW THE ACTIVE LOCALE, and this page used to hard-code them.
+ *
+ * The library's own chrome is localized — the page-size Select renders "10 / trang" under `vi` —
+ * so a page that hard-codes `件` puts two languages in one row and they can never agree. That is
+ * exactly what the owner photographed: "11–20 / 83 件" beside "10 / trang".
+ *
+ * `Intl.NumberFormat` groups the number for the locale; the unit word comes from the library's own
+ * message catalogue, which already carries a CLDR plural map per language. Nothing here is a
+ * hand-built string. */
+const useFormatters = () => {
+  const { locale } = useTranslation();
+  return React.useMemo(() => {
+    const number = new Intl.NumberFormat(locale);
+    const month = new Intl.DateTimeFormat(locale, { year: "numeric", month: "long" });
+    return {
+      number: (n: number) => number.format(n),
+      month: (iso: string) => month.format(new Date(`${iso}-01T00:00:00`)),
+    };
+  }, [locale]);
+};
+
 export default function Demo() {
   return (
     <PageContainer

package/docs/showcase/theme-customization.tsx

@@ -302,7 +302,13 @@ export default function ThemeCustomizationShowcase() {
   const [corner, setCorner] = React.useState("default");
   const [custom, setCustom] = React.useState("#0F62FE");
   const [regions, setRegions] = React.useState<string[]>(["JP", "VN"]);
-  const [labels, setLabels] = React.useState<string[]>(["本番", "ổn định", UNBREAKABLE]);
+  /* UNBREAKABLE FIRST, ON PURPOSE (gh#840). With `maxTagCount={2}` the tag in third place is the
+   * one that collapses into `+N` — so while the 71-character id sat last, the chip that painted
+   * outside the control was never actually drawn on this page, and `maxTagTextLength` had nothing
+   * to demonstrate. Held first, the row now draws all three of the issue's answers at once: the
+   * long id truncated to its ceiling (full value in `title` and in the remover's name), a normal
+   * chip beside it, and a `+1` that names the tag behind it. */
+  const [labels, setLabels] = React.useState<string[]>([UNBREAKABLE, "本番", "ổn định"]);
   const [plan, setPlan] = React.useState("standard");
   const [channels, setChannels] = React.useState<string[]>(["email"]);
   const [cadence, setCadence] = React.useState("weekly");
@@ -565,7 +571,19 @@ function ComponentsBoard(props: {
   } = props;
 
   return (
-    <ResponsiveGrid columns={{ base: 1, sm: 2, lg: 3 }} gap="lg" align="start">
+    /* PADDED HERE, because nothing above this pads it (gh#841 follow-up). The board sits in
+       `<CardContent flush>` so the tab STRIP can meet the card edge — which is right, a line
+       variant's underline should run edge to edge — and `bodied` is a no-op on `variant="line"`
+       by design (`tabs.tsx`: `const bodiedCard = card && Boolean(bodied)`). So the body has no
+       inline inset from either side, and the form sat 1px from the card border: measured label
+       at x=25 against a card at x=24. `pad` on the board is the composition answer — the same
+       step `CardContent` would have used. */
+    <ResponsiveGrid
+      columns={{ base: 1, sm: 2, lg: 3 }}
+      gap="lg"
+      align="start"
+      pad={{ inline: "lg", block: "md" }}
+    >
       {/* 1 · text entry */}
       <Flex direction="col" gap="md">
         <FormField
@@ -618,6 +636,11 @@ function ComponentsBoard(props: {
             value={labels}
             onValueChange={setLabels}
             maxTagCount={2}
+            /* The ceiling the 71-character id is measured against (gh#840). 16 is the widest cut
+               that still leaves room for a second chip and the `+1` on one row at 375px; the value
+               is untouched — it stays in the chip's `title` and in the remover's accessible name,
+               which is the only reason truncating an identifier is allowed at all. */
+            maxTagTextLength={16}
             placeholder={t("themeShowcase.form.labelsPlaceholder")}
           />
         </FormField>