@godxjp/ui 24.0.0 → 25.0.0

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

@@ -126,8 +126,10 @@ function ShiftPill({
       <Text as="span" size="2xs" weight="medium">
         {meta.label}
       </Text>
+      {/* `inherit`, not `muted` (gh#643): the chip is a TINTED surface, and `muted` is an absolute
+          token that measured 4.46:1 on it. Inheriting lets the chip's own ink win. */}
       {staff ? (
-        <Text as="span" size="2xs" tone="muted" truncate>
+        <Text as="span" size="2xs" tone="inherit" truncate>
           {staff}
         </Text>
       ) : null}
@@ -433,7 +435,7 @@ export default function ShiftCalendarShowcase() {
                     <Text size="xs" weight="medium" className="whitespace-nowrap">
                       {SHIFT_META[k].label}
                     </Text>
-                    <Text size="xs" tone="muted" tabular className="whitespace-nowrap">
+                    <Text size="xs" tone="inherit" tabular className="whitespace-nowrap">
                       {SHIFT_META[k].time}
                     </Text>
                   </Badge>
@@ -582,7 +584,7 @@ function MonthGrid({ onPick }: { onPick: (d: DayCell) => void }) {
                                 tone="destructive"
                                 variant="outline"
                                 shape="sharp"
-                                className="text-[var(--font-size-2xs)]"
+                                className="text-[length:var(--font-size-2xs)]"
                               >
                                 祝
                               </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 font-medium text-[var(--font-size-2xs)] " +
+              "h-full flex-col rounded-none text-[length:var(--font-size-2xs)] font-medium " +
               (isActive ? "text-primary" : "text-muted-foreground")
             }
           >
@@ -637,12 +637,16 @@ function InboundTab({
             <ToggleGroupItem
               key={f.id}
               value={f.id}
-              className="h-9 shrink-0 rounded-full whitespace-nowrap text-[var(--font-size-xs)]"
+              className="h-9 shrink-0 rounded-full text-[length:var(--font-size-xs)] 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 —
+              // `tone="inherit"` cannot help with that. `.ui-toggle[data-state="on"]
+              // .ui-toggle-count` inverts instead (--primary on --primary-foreground, 6.32:1) and
+              // folds the number into the accessible name.
+              count={f.count}
             >
               {f.label}
-              <Text size="xs" mono tabular className="opacity-70">
-                {f.count}
-              </Text>
             </ToggleGroupItem>
           ))}
         </Flex>
@@ -848,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 whitespace-nowrap text-[var(--font-size-xs)]"
+            className="h-9 rounded-xl text-[length:var(--font-size-xs)] whitespace-nowrap"
           >
             Chờ niêm phong
           </ToggleGroupItem>
           <ToggleGroupItem
             value="handoff"
-            className="h-9 rounded-xl whitespace-nowrap text-[var(--font-size-xs)]"
+            className="h-9 rounded-xl text-[length:var(--font-size-xs)] whitespace-nowrap"
           >
             Chờ bàn giao
           </ToggleGroupItem>
           <ToggleGroupItem
             value="done"
-            className="h-9 rounded-xl whitespace-nowrap text-[var(--font-size-xs)]"
+            className="h-9 rounded-xl text-[length:var(--font-size-xs)] whitespace-nowrap"
           >
             Đã bàn giao
           </ToggleGroupItem>
@@ -1014,7 +1018,7 @@ export default function AgencyHandyShowcase() {
                 <ToggleGroupItem
                   key={s}
                   value={s}
-                  className="size-7 rounded-md text-[var(--font-size-2xs)] uppercase"
+                  className="size-7 rounded-md text-[length:var(--font-size-2xs)] uppercase"
                   title={s}
                 >
                   {s[0]}

package/docs/showcase/futurelastic-web.tsx

@@ -63,7 +63,15 @@ const THEME = `
 [data-tenant="futurelastic"] .fl-section { padding-block: 5.5rem; }
 [data-tenant="futurelastic"] .fl-navbar { position: sticky; top: 0; z-index: 30; background: hsl(var(--background) / 0.8);
   backdrop-filter: blur(12px); border-bottom: 1px solid hsl(var(--border)); }
-[data-tenant="futurelastic"] .fl-navbar-inner { height: 68px; display: flex; align-items: center; gap: 2rem; }
+/* REFLOW, NOT DECORATION (gh#643). This row was a fixed 68px flex line with no wrap, so at 320 its
+   content ran to x=569.6 inside a 320px nav: every link painted OUTSIDE the navbar's own
+   translucent box, over the page behind it, and axe read the white labels against the light
+   isolate background at 1.01:1 — 2 nodes at 320, 1 at 375. It was never a contrast bug; it was
+   WCAG 2.2 SC 1.4.10 reflow, reported by the contrast rule because that is what an overflowing
+   element looks like from the outside. min-height rather than height, so a wrapped row may be
+   taller than one line and the language cluster stops overflowing the bar vertically (measured at
+   320: it was 148.3px tall, starting at y=-40.2). */
+[data-tenant="futurelastic"] .fl-navbar-inner { min-height: 68px; display: flex; align-items: center; flex-wrap: wrap; column-gap: 2rem; row-gap: 0.75rem; padding-block: 0.75rem; }
 [data-tenant="futurelastic"] .fl-brand { font-family: var(--font-family-display); font-weight: 700; font-size: 1.25rem; color: hsl(var(--foreground)); }
 [data-tenant="futurelastic"] .fl-eyebrow { font-family: var(--font-family-body); font-weight: 600; font-size: 0.75rem;
   letter-spacing: 0.18em; text-transform: uppercase; color: hsl(var(--primary)); }
@@ -122,14 +130,14 @@ function Navbar() {
         <span className="fl-brand">
           futur<span className="fl-gold">elastic</span>
         </span>
-        <Flex direction="row" gap="xs" align="center">
+        <Flex direction="row" gap="xs" align="center" wrap>
           {links.map((l, i) => (
             <Button key={l} variant="ghost" size="sm" aria-current={i === 0 ? "page" : undefined}>
               {l}
             </Button>
           ))}
         </Flex>
-        <Flex direction="row" gap="sm" align="center" className="ms-auto">
+        <Flex direction="row" gap="sm" align="center" wrap className="ms-auto">
           <Text as="span" size="xs" tone="muted">
             EN · 日本語 · VI
           </Text>

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

@@ -205,8 +205,19 @@ function BulkActionBar({
     <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">
+          {/* left: count + cross-page select-all escalation + safe batch actions.
+              THE `wrap`, AND THE ABSENT `min-w-0`, ARE BOTH LOAD-BEARING (gh#643). This cluster
+              used to carry `min-w-0 flex-1` — "squeeze me to nothing" — while every child inside
+              refuses to be squeezed: two `Button`s and a `whitespace-nowrap` count. At 375 the box
+              duly shrank to 113.6px, the content still ran to x=462, and it painted straight over
+              the destructive cluster beside it — 一括承認 at 264.6→360.2 under 解除 at
+              272.3→341.0, which axe reported as `target-size` with 19.2×30.2 of the button left
+              unobscured against SC 2.5.8's 24×24. Without `min-w-0` the cluster keeps a real
+              min-content width, and `wrap` is what makes that width small enough to be honest:
+              measured after, 375 puts the two clusters on separate rows (left 307px over two
+              lines, destructive below) and 1440 is unchanged — one 30.2px row, destructive still
+              pushed to x=1217.5 by `flex-1`. */}
+          <Flex direction="row" align="center" gap="sm" wrap className="flex-1">
             <Text tone="primary" weight="medium" tabular className="whitespace-nowrap">
               {effective}件を選択中
             </Text>

package/docs/showcase/table-density.tsx

@@ -267,7 +267,9 @@ export default function Demo() {
                     >
                       <Flex direction="row" align="center" gap="xs">
                         <span>{DENSITY_META[key].label}</span>
-                        <Text size="2xs" tone="muted" tabular>
+                        {/* `inherit` (gh#643): a SELECTED item fills with --primary, and `muted`
+                            is an absolute token — it measured 1.11:1 on that fill. */}
+                        <Text size="2xs" tone="inherit" tabular>
                           {DENSITY_META[key].px}
                         </Text>
                       </Flex>

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

@@ -299,7 +299,7 @@ function DetailPanel({ employee }: { employee: Employee }) {
           {/* Per-day breakdown — quiet nested list, real Card chrome */}
           <Card>
             <CardHeader>
-              <CardTitle level={2} className="text-[var(--font-size-xs)]">
+              <CardTitle level={2} className="text-[length:var(--font-size-xs)]">
                 今週の打刻
               </CardTitle>
               <CardAction>
@@ -396,27 +396,37 @@ function ExpandableList() {
           const panelId = `row-detail-${emp.id}`;
           return (
             <React.Fragment key={emp.id}>
+              {/* THE DISCLOSURE IS THE BUTTON, NOT THE ROW (gh#643, found by check:frame-axe).
+                  This row used to carry `tabIndex={0}` + `aria-expanded` + `aria-controls` and be
+                  the control itself. `aria-expanded` is valid on a TREEGRID row and not on a table
+                  row, so axe scored it `aria-conditional-attr` — and the row was a focus stop with
+                  no role and no name, which is the worse half of the same mistake. The chevron is
+                  now a real button: it owns the state, the name and the tab stop. Clicking the row
+                  still works, as a pointer convenience that claims no semantics of its own. */}
               <TableRow
                 data-state={isOpen ? "selected" : undefined}
-                tabIndex={0}
-                aria-expanded={isOpen}
-                aria-controls={panelId}
                 onClick={() => {
                   toggle(emp.id);
                 }}
-                onKeyDown={(e) => {
-                  if (e.key !== "Enter" && e.key !== " ") return;
-                  if (e.target !== e.currentTarget) return;
-                  e.preventDefault();
-                  toggle(emp.id);
-                }}
-                className="hover:bg-muted/50 focus-visible:ring-ring cursor-pointer focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset"
+                className="hover:bg-muted/50 cursor-pointer"
               >
                 <TableCell className={CELL}>
-                  <ChevronRight
-                    className={`text-muted-foreground size-4 transition-transform ${isOpen ? "rotate-90" : ""}`}
-                    aria-hidden="true"
-                  />
+                  <Button
+                    variant="ghost"
+                    size="icon-xs"
+                    aria-expanded={isOpen}
+                    aria-controls={isOpen ? panelId : undefined}
+                    aria-label={`${emp.name} の詳細を${isOpen ? "折りたたむ" : "展開する"}`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      toggle(emp.id);
+                    }}
+                  >
+                    <ChevronRight
+                      className={`text-muted-foreground size-4 transition-transform ${isOpen ? "rotate-90" : ""}`}
+                      aria-hidden="true"
+                    />
+                  </Button>
                 </TableCell>
                 <TableCell className={CELL}>
                   <Text as="div" weight="medium">

package/docs/showcase/table-grouped-subtotals.tsx

@@ -232,7 +232,11 @@ function GroupHeaderRow({
           size="sm"
           onClick={onToggle}
           aria-expanded={open}
-          aria-controls={`grp-${group.id}`}
+          /* NO `aria-controls` (gh#643, found by check:frame-axe). It pointed at `grp-<id>`, and
+             no element in this table ever carried that id — axe: `aria-valid-attr-value`, 5 nodes.
+             It cannot simply be added, either: what this button expands is a RUN OF SIBLING `<tr>`s
+             with no single container to name. `aria-expanded` alone is complete and valid here —
+             `aria-controls` is optional, and a broken one is worse than none. */
           className="h-7 font-medium"
         >
           <Chevron className="text-muted-foreground size-4" aria-hidden="true" />

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "24.0.0",
-  "godxUiMcp": "24.0.0",
+  "version": "25.0.0",
+  "godxUiMcp": "25.0.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -322,6 +322,7 @@
     "check:example-imports": "node scripts/check-example-imports.mjs",
     "check:frame-coverage": "node scripts/frame-coverage.mjs",
     "check:frame-coverage-report": "node scripts/frame-coverage.mjs --check",
+    "check:frame-axe": "node scripts/check-frame-axe.mjs",
     "gen:frame-coverage-ledger": "node scripts/gen-frame-coverage-ledger.mjs",
     "check:frame-coverage-ledger": "node scripts/gen-frame-coverage-ledger.mjs --check && node scripts/check-frame-coverage-ledger.mjs",
     "check:screen-reader-evidence": "node scripts/check-screen-reader-evidence.mjs",
@@ -469,6 +470,7 @@
     "vaul": "^1.1.2"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.13.0",
     "@eslint/js": "^10.0.1",
     "@hookform/resolvers": "^5.9.1",
     "@radix-ui/react-accordion": "^1.2.20",