@godxjp/ui 19.2.0 → 19.4.0

package/docs/showcase/futurelastic-web.tsx

@@ -83,6 +83,7 @@ const THEME = `
 [data-tenant="futurelastic"] .fl-lead { font-size: 1.25rem; line-height: 1.65; color: hsl(var(--muted-foreground)); max-width: 620px; }
 [data-tenant="futurelastic"] .fl-note { font-size: 0.9375rem; color: hsl(var(--muted-foreground)); margin-top: 2.5rem; }
 [data-tenant="futurelastic"] .fl-head { max-width: 640px; margin-inline: auto; text-align: center; }
+[data-tenant="futurelastic"] .fl-hero-actions { margin-top: 1.75rem; }
 [data-tenant="futurelastic"] .fl-cta-inner { position: relative; max-width: 680px; margin-inline: auto; }
 [data-tenant="futurelastic"] .fl-footer-tagline { max-width: 260px; }
 [data-tenant="futurelastic"] .fl-logocloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.5rem; }
@@ -121,7 +122,7 @@ function Navbar() {
         <span className="fl-brand">
           futur<span className="fl-gold">elastic</span>
         </span>
-        <Flex direction="row" gap="xs" align="center" className="ms-4">
+        <Flex direction="row" gap="xs" align="center">
           {links.map((l, i) => (
             <Button key={l} variant="ghost" size="sm" aria-current={i === 0 ? "page" : undefined}>
               {l}
@@ -154,7 +155,7 @@ function Hero() {
           Futurelastic là pháp nhân holding của nhóm công ty công nghệ &amp; AI vận hành xuyên Nhật
           Bản và Việt Nam, từ logistics, fintech đến F&amp;B và thương mại.
         </p>
-        <Flex direction="row" gap="md" className="mt-7">
+        <Flex direction="row" gap="md" className="fl-hero-actions">
           <Button size="lg">Khám phá hệ sinh thái</Button>
           <Button variant="outline" size="lg">
             Liên hệ hợp tác
@@ -176,8 +177,8 @@ function LogoCloud() {
   ];
   return (
     <section className="fl-section-tint">
-      <div className={SHELL}>
-        <Text as="p" size="xs" tone="muted" className="mb-6 text-center tracking-widest uppercase">
+      <Flex direction="col" gap="lg" className={SHELL}>
+        <Text as="p" size="xs" tone="muted" className="text-center tracking-widest uppercase">
           Các pháp nhân vận hành dưới Futurelastic
         </Text>
         <div className="fl-logocloud">
@@ -187,7 +188,7 @@ function LogoCloud() {
             </span>
           ))}
         </div>
-      </div>
+      </Flex>
     </section>
   );
 }
@@ -235,8 +236,8 @@ function Bento() {
   ];
   return (
     <section className="fl-section" id="ventures">
-      <div className={SHELL}>
-        <div className="fl-head mb-12">
+      <Flex direction="col" gap="xl" className={SHELL}>
+        <div className="fl-head">
           <div className="fl-eyebrow">Hệ sinh thái</div>
           <h2 className="fl-h2">Một mái nhà, nhiều mũi nhọn</h2>
           <p className="fl-lead mx-auto">
@@ -247,18 +248,20 @@ function Bento() {
           {cells.map((c) => (
             <Card key={c.title} className={`fl-cell ${c.span ?? ""}`}>
               <CardContent>
-                <Medallion icon={c.icon} />
-                <Text as="div" weight="bold" size="lg" className="mt-5">
-                  {c.title}
-                </Text>
-                <Text as="p" size="sm" tone="muted" className="mt-2">
-                  {c.text}
-                </Text>
+                <Flex direction="col" gap="lg">
+                  <Medallion icon={c.icon} />
+                  <Text as="div" weight="bold" size="lg">
+                    {c.title}
+                  </Text>
+                  <Text as="p" size="sm" tone="muted">
+                    {c.text}
+                  </Text>
+                </Flex>
               </CardContent>
             </Card>
           ))}
         </div>
-      </div>
+      </Flex>
     </section>
   );
 }
@@ -275,12 +278,12 @@ function Stats() {
       <div className={SHELL}>
         <div className="fl-stats">
           {stats.map(([n, l]) => (
-            <div key={l} className="text-center">
+            <Flex key={l} direction="col" gap="sm" className="text-center">
               <div className="fl-stat-num">{n}</div>
-              <Text as="div" size="sm" tone="muted" className="mt-2">
+              <Text as="div" size="sm" tone="muted">
                 {l}
               </Text>
-            </div>
+            </Flex>
           ))}
         </div>
       </div>
@@ -294,20 +297,20 @@ function Cta() {
       <div className={SHELL}>
         <div className="fl-cta">
           <div className="fl-cta-glow" />
-          <div className="fl-cta-inner">
+          <Flex direction="col" gap="xl" className="fl-cta-inner">
             <h2 className="fl-h2">Cùng xây điều mới?</h2>
-            <p className="fl-lead mx-auto mt-3">
+            <p className="fl-lead mx-auto">
               Chúng tôi tìm đối tác, nhân tài và cơ hội M&amp;A trong công nghệ, logistics và
               F&amp;B tại Nhật Bản &amp; Việt Nam.
             </p>
-            <Flex direction="row" gap="md" className="mt-7 justify-center">
+            <Flex direction="row" gap="md" className="justify-center">
               <Button size="lg">Đặt lịch trao đổi</Button>
               <Button variant="ghost" size="lg">
                 Đọc blog
                 <ArrowRight aria-hidden="true" />
               </Button>
             </Flex>
-          </div>
+          </Flex>
         </div>
       </div>
     </section>
@@ -323,26 +326,26 @@ function Footer() {
   return (
     <footer className="fl-footer">
       <div className={`${SHELL} fl-footer-grid`}>
-        <div>
+        <Flex direction="col" gap="md">
           <span className="fl-brand">
             futur<span className="fl-gold">elastic</span>
           </span>
-          <Text as="p" size="sm" tone="muted" className="fl-footer-tagline mt-4">
+          <Text as="p" size="sm" tone="muted" className="fl-footer-tagline">
             Tech · AI · Holdings · building the elastic infrastructure of the future across Japan
             &amp; Vietnam.
           </Text>
-        </div>
+        </Flex>
         {cols.map(([h, items]) => (
-          <div key={h}>
+          <Flex direction="col" gap="md" key={h}>
             <Text
               as="div"
               size="2xs"
               weight="bold"
-              className="text-foreground mb-3 tracking-widest uppercase"
+              className="text-foreground tracking-widest uppercase"
             >
               {h}
             </Text>
-            <Flex direction="col" gap="xs" className="mt-2">
+            <Flex direction="col" gap="xs">
               {items.map((i) => (
                 <Button
                   key={i}
@@ -354,7 +357,7 @@ function Footer() {
                 </Button>
               ))}
             </Flex>
-          </div>
+          </Flex>
         ))}
       </div>
       <div className={`${SHELL} fl-footer-bottom`}>

package/docs/showcase/org-switcher.tsx

@@ -1,7 +1,7 @@
 /**
  * Showcase · OrgSwitcher — sidebar organization/tenant switcher (Slack/Linear pattern)
  *
- * Requested by dxs-platform (godxjp-ui#196) as a "first-class OrgSwitcher component".
+ * Requested by dxs-platform as a "first-class OrgSwitcher component".
  * GATE 0 — Framework-Component Test verdict: **COMPOSITION PATTERN**, not a framework
  * component. It owns NO new behaviour — search/keyboard/filtering come from `Command`
  * (cmdk), open/focus-trap/dismiss from `Popover`, the trigger from `Button` + `Avatar`.
@@ -44,6 +44,7 @@ import {
   AppShell,
   Flex,
   PageContainer,
+  Separator,
   Sidebar,
   type SidebarSectionProp,
   Topbar,
@@ -116,25 +117,29 @@ function OrgSwitcher({ organizations, currentId, onSelect, onCreate, onJoin }: O
           type="button"
           variant="ghost"
           aria-label={`Tổ chức hiện tại: ${current.name}. Nhấn để đổi tổ chức`}
-          className="w-full justify-between gap-2 px-2"
+          className="w-full justify-between"
         >
-          <Flex align="center" gap="sm" className="min-w-0">
+          {/* Inside a Button, i.e. inside a <button>, whose content model is phrasing content
+              only — so every Flex on this branch renders as a <span> (gh#354). */}
+          <Flex as="span" align="center" gap="sm" className="min-w-0">
             <Avatar className="size-7 rounded-md">
               <AvatarFallback>{monogram(current.name)}</AvatarFallback>
             </Avatar>
-            <span className="flex min-w-0 flex-col text-start">
+            <Flex as="span" direction="col" gap="none" className="min-w-0 text-start">
               <Text as="span" size="sm" weight="medium" truncate>
                 {current.name}
               </Text>
               <Text as="span" size="xs" tone="muted" truncate>
                 {current.role}
               </Text>
-            </span>
+            </Flex>
           </Flex>
           <ChevronsUpDown aria-hidden className="size-4 shrink-0 opacity-60" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent align="start" sideOffset={6} className="w-64 p-0">
+      {/* `flush` — the Command list owns its own inset, so its rows and separators run edge to
+          edge inside the popover instead of being indented by the panel padding. */}
+      <PopoverContent flush align="start" sideOffset={6} className="w-64">
         <Command label="Chọn tổ chức">
           <CommandInput
             placeholder="Tìm tổ chức…"
@@ -154,18 +159,18 @@ function OrgSwitcher({ organizations, currentId, onSelect, onCreate, onJoin }: O
                     keywords={[org.id]}
                     onSelect={() => choose(org.id)}
                   >
-                    <Flex align="center" gap="sm" className="w-full min-w-0">
+                    <Flex as="span" align="center" gap="sm" className="w-full min-w-0">
                       <Avatar className="size-6 rounded">
                         <AvatarFallback>{monogram(org.name)}</AvatarFallback>
                       </Avatar>
-                      <span className="flex min-w-0 flex-col text-start">
+                      <Flex as="span" direction="col" gap="none" className="min-w-0 text-start">
                         <Text as="span" size="sm" truncate>
                           {org.name}
                         </Text>
                         <Text as="span" size="xs" tone="muted" truncate>
                           {org.role}
                         </Text>
-                      </span>
+                      </Flex>
                       {active ? (
                         <Check aria-hidden className="text-primary ms-auto size-4 shrink-0" />
                       ) : null}
@@ -176,12 +181,14 @@ function OrgSwitcher({ organizations, currentId, onSelect, onCreate, onJoin }: O
               })}
             </CommandGroup>
           </CommandList>
-          <div className="border-t p-1">
+          <Separator />
+          {/* Menu-style footer: the two actions read as one list, so no seam between them. */}
+          <Flex direction="col" gap="none">
             <Button
               type="button"
               variant="ghost"
               size="sm"
-              className="w-full justify-start gap-2"
+              className="w-full justify-start"
               onClick={() => {
                 onCreate();
                 setOpen(false);
@@ -194,7 +201,7 @@ function OrgSwitcher({ organizations, currentId, onSelect, onCreate, onJoin }: O
               type="button"
               variant="ghost"
               size="sm"
-              className="w-full justify-start gap-2"
+              className="w-full justify-start"
               onClick={() => {
                 onJoin();
                 setOpen(false);
@@ -203,7 +210,7 @@ function OrgSwitcher({ organizations, currentId, onSelect, onCreate, onJoin }: O
               <TicketPlus aria-hidden className="size-4" />
               Tham gia bằng mã mời
             </Button>
-          </div>
+          </Flex>
         </Command>
       </PopoverContent>
     </Popover>

package/docs/showcase/permission-matrix.tsx

@@ -4,12 +4,12 @@
  * A role × permission matrix with a STICKY first column (権限), ✓/— cells, a
  * two-role COMPARE mode, and a 差分のみ (differences-only) filter — the pattern
  * DXS role tabs (SCR-203) and the org role editor (SCR-111b) each hand-rolled
- * (godxjp-ui#194). Read-only by default.
+ *. Read-only by default.
  *
- * SINCE gh#257 the grid itself IS a package export — `PermissionMatrix` from
+ * SINCE the grid itself IS a package export — `PermissionMatrix` from
  * `@godxjp/ui/data-display` (see docs/data-display/permission-matrix.tsx). The
  * original Gate-0 "composition pattern" verdict was OUTCOME-corrected the same
- * way ErrorSurface was (gh#251): a consumer cannot import a docs page, so the
+ * way ErrorSurface was: a consumer cannot import a docs page, so the
  * canonical grid needed an importable home. Prefer the export in app code.
  *
  * This showcase remains as the COMPOSED form of the same screen — the full
@@ -34,6 +34,7 @@ import { Check, Minus } from "lucide-react";
 import {
   Badge,
   Card,
+  CardAction,
   CardContent,
   CardHeader,
   CardTitle,
@@ -128,10 +129,10 @@ function GrantCell({ granted }: { granted: boolean }) {
       <span className="sr-only">許可</span>
     </Badge>
   ) : (
-    <span className="text-muted-foreground inline-flex items-center justify-center">
+    <Flex align="center" justify="center" gap="none" className="text-muted-foreground">
       <Minus aria-hidden="true" className="size-4" />
       <span className="sr-only">不許可</span>
-    </span>
+    </Flex>
   );
 }
 
@@ -217,11 +218,13 @@ export default function Demo() {
 
         {/* ── マトリクス本体 ── */}
         <Card>
-          <CardHeader className="flex flex-row items-center justify-between">
+          <CardHeader>
             <CardTitle level={2}>ロール × 権限</CardTitle>
-            <Text size="xs" tone="muted" tabular>
-              権限 {rows.length} / {PERMISSIONS.length} 件 · ロール {ROLES.length}
-            </Text>
+            <CardAction>
+              <Text size="xs" tone="muted" tabular>
+                権限 {rows.length} / {PERMISSIONS.length} 件 · ロール {ROLES.length}
+              </Text>
+            </CardAction>
           </CardHeader>
           <CardContent flush>
             <div className="overflow-x-auto">
@@ -237,19 +240,19 @@ export default function Demo() {
                           className={cn("text-center", isCompared && "bg-primary/[0.06]")}
                           aria-label={isCompared ? `${role.name}（比較対象）` : role.name}
                         >
-                          <span className="inline-flex flex-col items-center leading-tight">
-                            <span className="inline-flex items-center gap-1">
+                          <Flex direction="col" align="center" gap="none" className="leading-tight">
+                            <Flex align="center" gap="xs">
                               <Text weight="medium">{role.name}</Text>
                               {isCompared && (
                                 <Badge tone="primary" variant="outline">
                                   {role.id === compareA ? "A" : "B"}
                                 </Badge>
                               )}
-                            </span>
+                            </Flex>
                             <Text size="2xs" tone="muted">
                               {role.hint} · {countGrants(PERMISSIONS, GRANTS, role.id)}件
                             </Text>
-                          </span>
+                          </Flex>
                         </TableHead>
                       );
                     })}
@@ -267,14 +270,14 @@ export default function Demo() {
                       >
                         <TableCell className={cn(PIN_START, "w-64 min-w-64 align-middle")}>
                           <Flex direction="col" className="leading-tight">
-                            <span className="inline-flex items-center gap-1.5">
+                            <Flex align="center" gap="xs">
                               <Text weight="medium">{perm.name}</Text>
                               {isDiffRow && (
                                 <Badge tone="warning" variant="outline">
                                   差分
                                 </Badge>
                               )}
-                            </span>
+                            </Flex>
                             <Text size="2xs" tone="muted">
                               {perm.category} · {perm.description}
                             </Text>
@@ -319,9 +322,9 @@ export default function Demo() {
                 </Text>
               </Flex>
               <Flex direction="row" align="center" gap="xs">
-                <span className="text-muted-foreground inline-flex">
+                <Flex align="center" gap="none" className="text-muted-foreground">
                   <Minus aria-hidden="true" className="size-4" />
-                </span>
+                </Flex>
                 <Text size="xs" tone="muted">
                   不許可
                 </Text>

package/docs/showcase/public-landing.tsx

@@ -1,5 +1,5 @@
 /**
- * Showcase · Public landing (gh#252) — the PUBLIC marketing/product landing page composed from
+ * Showcase · Public landing — the PUBLIC marketing/product landing page composed from
  * real @godxjp/ui primitives with **zero page-local CSS**.
  *
  * Gate 0 (docs/COMPOSITION-VS-COMPONENT.md): a landing header / hero / section grid / legal footer

package/docs/showcase/settings-account-sections.tsx

@@ -1,5 +1,5 @@
 /**
- * Showcase · settings-account-sections — the canonical SETTINGS SECTION / ROW composition (gh#216)
+ * Showcase · settings-account-sections — the canonical SETTINGS SECTION / ROW composition
  *
  * ── Gate 0 verdict: COMPOSITION PATTERN, not a framework component ────────────────────────────
  * A "SettingsSection" / "SettingsRow" / "DangerZone" fails the Framework-Component Test
@@ -477,7 +477,7 @@ export default function SettingsAccountSectionsShowcase() {
             </Descriptions>
           </CardContent>
           <CardFooter separated>
-            <Flex direction="col" gap="xs" className="sm:flex-row sm:items-center sm:gap-4">
+            <Flex direction="col" gap="md" className="sm:flex-row sm:items-center">
               <Button variant="outline" asChild>
                 <a href="https://billing.example.com/portal" target="_blank" rel="noreferrer">
                   <ExternalLink aria-hidden="true" />

package/docs/showcase/settings-security-mfa.tsx

@@ -7,13 +7,13 @@
  *   ✗ wrong (hand-rolled)                        ✓ here (rule)
  *   ─────────────────────────────────────────────────────────────────────────────────────────
  *   factor row = a centered <div> with the       ListRow — leading icon · title/description ·
- *     title duplicated as its own description       trailing action (no redundant copy)   (#113)
+ *     title duplicated as its own description trailing action (no redundant copy)
  *   "Xoá" rendered as plain black text            destructive-toned ghost button — delete is a
  *                                                    destructive action, color carries intent
  *   every action a full-width stacked bar         right-aligned, auto-width actions; ONE primary
  *     (rule 217 explicitly forbids this)             per card, secondary = outline      (rule 217)
  *   📱 / ✉️ emoji as "icons"                       lucide icons (no emoji in product UI) (anti-tell)
- *   brand glyph = a styled <span> (size/radius    Avatar primitive — real brand mark      (#116)
+ *   brand glyph = a styled <span> (size/radius Avatar primitive — real brand mark
  *     baked as literals)
  *
  * Built ENTIRELY from real @godxjp/ui primitives. reference-design DNA: small headings, 14/1.7 body,
@@ -130,7 +130,7 @@ export default function SecurityMfaShowcase() {
               </Text>
             </Flex>
           </CardContent>
-          <CardFooter separated className="justify-end gap-2">
+          <CardFooter separated className="justify-end">
             <Button variant="ghost" size="sm">
               Tải xuống
             </Button>

package/docs/showcase/table-approval-queue.tsx

@@ -1,5 +1,5 @@
 /**
- * Showcase · アクセス承認キュー / Access approval queue (gh#253) — the canonical five-column
+ * Showcase · アクセス承認キュー / Access approval queue — the canonical five-column
  * approval collection at 1440 · 1024 · 390 using ONLY public API.
  *
  * The whole responsive contract is `Table preset="action-collection"` plus a `priority` on each

package/docs/showcase/table-bulk-actions.tsx

@@ -202,61 +202,58 @@ function BulkActionBar({
 }) {
   const effective = spanAll ? total : count;
   return (
-    <Flex
-      role="region"
-      aria-label="一括操作"
-      wrap
-      align="center"
-      gap="md"
-      className="bg-primary/5 border-primary/30 rounded-md border px-3 py-2"
-    >
-      {/* left: count + cross-page select-all escalation + safe batch actions */}
-      <Flex direction="row" align="center" gap="sm" className="min-w-0 flex-1">
-        <Text tone="primary" weight="medium" tabular className="whitespace-nowrap">
-          {effective}件を選択中
-        </Text>
-
-        {/* cross-page select-all: only offered once the whole page is selected */}
-        {pageAllSelected &&
-          (spanAll ? (
-            <Text size="xs" tone="muted">
-              フィルタ条件の全{" "}
-              <Text as="span" tabular>
-                {total}
-              </Text>{" "}
-              件を選択しました
+    <Card className="bg-primary/5 border-primary/30">
+      <CardContent solo>
+        <Flex role="region" aria-label="一括操作" wrap align="center" gap="md">
+          {/* left: count + cross-page select-all escalation + safe batch actions */}
+          <Flex direction="row" align="center" gap="sm" className="min-w-0 flex-1">
+            <Text tone="primary" weight="medium" tabular className="whitespace-nowrap">
+              {effective}件を選択中
             </Text>
-          ) : (
-            <Button variant="link" size="sm" onClick={onSelectSpanAll}>
-              全 <span className="tabular-nums">{total}</span> 件を選択
+
+            {/* cross-page select-all: only offered once the whole page is selected */}
+            {pageAllSelected &&
+              (spanAll ? (
+                <Text size="xs" tone="muted">
+                  フィルタ条件の全{" "}
+                  <Text as="span" tabular>
+                    {total}
+                  </Text>{" "}
+                  件を選択しました
+                </Text>
+              ) : (
+                <Button variant="link" size="sm" onClick={onSelectSpanAll}>
+                  全 <span className="tabular-nums">{total}</span> 件を選択
+                </Button>
+              ))}
+
+            <span className="bg-border h-4 w-px" aria-hidden="true" />
+
+            <Button variant="outline" size="sm" onClick={onApprove}>
+              <CheckCheck aria-hidden="true" />
+              一括承認
             </Button>
-          ))}
-
-        <span className="bg-border h-4 w-px" aria-hidden="true" />
-
-        <Button variant="outline" size="sm" onClick={onApprove}>
-          <CheckCheck aria-hidden="true" />
-          一括承認
-        </Button>
-        <Button variant="outline" size="sm" onClick={onExport}>
-          <Download aria-hidden="true" />
-          CSV出力
-        </Button>
-      </Flex>
+            <Button variant="outline" size="sm" onClick={onExport}>
+              <Download aria-hidden="true" />
+              CSV出力
+            </Button>
+          </Flex>
 
-      {/* right: ISOLATED destructive action, kept apart from the safe ones */}
-      <Flex direction="row" align="center" gap="sm">
-        <Button variant="destructive" size="sm" onClick={onDelete}>
-          <Trash2 aria-hidden="true" />
-          一括削除
-        </Button>
-        <span className="bg-border h-4 w-px" aria-hidden="true" />
-        <Button variant="ghost" size="sm" onClick={onClear} aria-label="選択を解除">
-          <X aria-hidden="true" />
-          解除
-        </Button>
-      </Flex>
-    </Flex>
+          {/* right: ISOLATED destructive action, kept apart from the safe ones */}
+          <Flex direction="row" align="center" gap="sm">
+            <Button variant="destructive" size="sm" onClick={onDelete}>
+              <Trash2 aria-hidden="true" />
+              一括削除
+            </Button>
+            <span className="bg-border h-4 w-px" aria-hidden="true" />
+            <Button variant="ghost" size="sm" onClick={onClear} aria-label="選択を解除">
+              <X aria-hidden="true" />
+              解除
+            </Button>
+          </Flex>
+        </Flex>
+      </CardContent>
+    </Card>
   );
 }
 

package/docs/showcase/table-conditional-format.tsx

@@ -205,11 +205,11 @@ export default function Demo() {
       sortable: true,
       render: (r) =>
         isEarlyCell(r) ? (
-          <span className="bg-attention/10 text-attention inline-flex rounded-sm px-1.5 py-0.5">
+          <Badge tone="warning" shape="sharp">
             <Text as="span" weight="medium" tabular style={{ color: "inherit" }}>
               {hours(r.earlyLeaveHours)}
             </Text>
-          </span>
+          </Badge>
         ) : (
           <Text tabular>{hours(r.earlyLeaveHours)}</Text>
         ),
@@ -221,11 +221,11 @@ export default function Demo() {
       sortable: true,
       render: (r) =>
         isOvertimeCell(r) ? (
-          <span className="bg-warning/10 text-warning-foreground inline-flex rounded-sm px-1.5 py-0.5">
+          <Badge tone="warning" shape="sharp">
             <Text as="span" weight="medium" tabular style={{ color: "inherit" }}>
               {hours(r.overtime)}
             </Text>
-          </span>
+          </Badge>
         ) : (
           <Text tabular>{hours(r.overtime)}</Text>
         ),
@@ -247,7 +247,7 @@ export default function Demo() {
       <Flex direction="col" gap="lg">
         {/* ── 行レベル + セルレベルの条件付き書式（実 Table primitive で合成） ── */}
         <Card>
-          <CardHeader className="gap-2">
+          <CardHeader>
             <Flex direction="row" wrap align="center" justify="between" gap="sm">
               <CardTitle level={2}>勤怠サマリ · 製造部（当月締め）</CardTitle>
               <Text size="xs" tone="muted" tabular>
@@ -312,11 +312,11 @@ export default function Demo() {
                       {/* 早退セル: > 2.0h は attention(朱) で背景＋前景強調 */}
                       <TableCell className="text-end">
                         {isEarlyCell(r) ? (
-                          <span className="bg-attention/10 text-attention inline-flex rounded-sm px-1.5 py-0.5">
+                          <Badge tone="warning" shape="sharp">
                             <Text as="span" weight="medium" tabular style={{ color: "inherit" }}>
                               {hours(r.earlyLeaveHours)}
                             </Text>
-                          </span>
+                          </Badge>
                         ) : (
                           <Text tone="muted" tabular>
                             {hours(r.earlyLeaveHours)}
@@ -326,11 +326,11 @@ export default function Demo() {
                       {/* 残業セル: ≥ 45h は warning(山吹) で注意 */}
                       <TableCell className="text-end">
                         {isOvertimeCell(r) ? (
-                          <span className="bg-warning/10 text-warning-foreground inline-flex rounded-sm px-1.5 py-0.5">
+                          <Badge tone="warning" shape="sharp">
                             <Text as="span" weight="medium" tabular style={{ color: "inherit" }}>
                               {hours(r.overtime)}
                             </Text>
-                          </span>
+                          </Badge>
                         ) : (
                           <Text tabular>{hours(r.overtime)}</Text>
                         )}