@cahyo-dimas/freeday 1.29.0 → 1.30.0

package/CHANGELOG.md

@@ -3,6 +3,53 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [1.30.0] — 2026-08-18
+Note 008 (adopting 1.29.0) plus a direct design report: *"the input border looks too dark next to the
+card and button-group borders."*
+### Fixed
+- **The dark theme's contrast has not actually been tested since v1.21.0.** `contrast.test.mjs` looked
+  for `:root[data-theme="dark"]`; un-rooting the theme selectors in 1.21.0 changed the emitted
+  selector to `[data-theme="dark"]`, so the regex matched nothing, `dark` fell back to the **light**
+  values, and every `WCAG contrast — DARK` assertion re-tested the light theme under a dark label —
+  54 declarations ignored, all green. Fixed, and the scope now has a guard of its own: a dark scope
+  that parses to nothing, or that resolves to the light surface, fails loudly. *No latent dark-theme
+  failures were hiding behind it — the theme passes on its own merits.*
+- **`--color-control-border` retuned** to a new ramp step `--slate-450` (`#798295`). It was
+  `--slate-500`, the same ink as `--color-text-subtle`: a control **boundary** carrying text-level
+  contrast (4.69:1 on surface where WCAG 1.4.11 asks 3:1), which is what makes a form look heavier
+  than the cards around it. Now ≈3.9/3.6/3.4 across the three light surfaces. The same step
+  *strengthens* the dark theme, which was sitting at **3.02:1** on `surface-3` — 0.02 above the
+  floor, and unguarded because of the bug above; it is now 3.66:1.
+- **`.fdy-stat__label` uses `--color-text-muted`.** It spent `--color-text-subtle`, which is gated at
+  3.0 *on purpose* (placeholders, dividers, decorative glyphs) and measures 4.41:1 on `surface-2` —
+  under AA for text, on the only thing naming the number above it. Reported in 006 §6 and still
+  carried by the app at 1.29.0.
+### Added
+- **`.fdy-btn--stretch` now works in a `.fdy-list__row`** (note 008 §1). The pattern existed for
+  "one card, one primary action, one escape hatch" and had no equivalent for the same sentence with
+  *row* in it — an app rendering both grid and list from one component had to hand-roll the row half.
+  The row anchors the overlay itself, opt-in through `:has(.fdy-btn--stretch)` so a plain row is
+  untouched and nothing an app pinned inside one starts resolving against a new containing block.
+  Measured before the fix: **every** row's overlay covered the whole list and the last one in the DOM
+  won, so a click on row one opened row two — under row one's name.
+### Notes on the shape of the fix
+- **Note 008 §2 is not reproducible** and no code shipped for it. With a positive control to prove
+  the measurement works (pointing at the card body *does* put the stretched target in `:hover`),
+  pointing at the escape hatch leaves it at rest: the hover chain is `HTML > BODY > card > footer >
+  hatch`, and the stretched button is a sibling, not an ancestor. The `pointer-events:none` rule the
+  report carries fixes something the kit's own composition does not do.
+- The report's contrast figures (4.41 / 4.69) were re-derived from the 1.29 ramp and are exact.
+### Added — guards
+- `contrast.test.mjs`: the control border is now asserted on **all three** surfaces (`surface-3` was
+  missing, and it is the worst case that pinned the dark theme to the floor) and at **3.25**, not
+  3.0 — a boundary that clears the floor by 0.02 has no headroom, and the margin is what catches a
+  revert to the old ink.
+- `css.test.mjs`: a stat label must spend a *text* ink, and a list row hosting a stretched target
+  must anchor it — both are class↔token pairings that every token-level assertion passes straight
+  through.
+- `browser/card-stretch.mjs`: the list case, asserting **row one** (the point that hides the bug is
+  row two, which passes even when the overlay belongs to another row).
+
 ## [1.29.0] — 2026-08-18
 Improvement note 001 from a second consuming app (a 40-screen back office). Eight findings; six
 executed, one already documented, one left as an owner decision.

package/COMPONENTS.md

@@ -962,9 +962,13 @@ while it stays a real `<button>`/`<a>` with real keyboard semantics.
 - **Do not add `.fdy-btn--stretch` to more than one control per card** — the last one wins the
   overlap, and which one that is depends on source order.
 - Text under the overlay is no longer selectable; that is the cost of the pattern, not a bug.
-- **Cards only.** The overlay anchors to the nearest *positioned* ancestor, and in the kit that is
-  `.fdy-card`. A `.fdy-list__row` is **not** positioned (`.fdy-list` is), so a stretched target in a
-  list row would cover the **whole list** — for clickable rows use `.fdy-list__row--button`.
+- **Cards and list rows.** The overlay anchors to the nearest *positioned* ancestor, and both hosts
+  supply one: `.fdy-card` always, `.fdy-list__row` when it contains a stretched target. Everything
+  above applies to a row unchanged — same markup, same automatic raise. In any *other* container,
+  make the element `position:relative` yourself, or the overlay resolves against whatever is
+  positioned further up (in a list that used to be `.fdy-list` itself, so every row's target covered
+  the whole list and the last one in the DOM won — a click on row one opened row two).
+  A row whose *whole* surface is one control is still better as `.fdy-list__row--button`.
 - `.fdy-btn` nudges itself on `:hover`/`:active`, and a transformed element becomes the containing
   block for its own absolutely positioned descendants — so a hand-rolled `::after{inset:0}` overlay
   **re-anchors to the button mid-gesture** and the click never lands. `--stretch` neutralises those

package/README.id.md

@@ -5,7 +5,7 @@
 > **Lebih banyak _free day_ buat dev — UI kit-nya sudah siap pakai.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v1.29.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.29.0)
+[![Release](https://img.shields.io/badge/release-v1.30.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.30.0)
 
 UI KIT yang token-driven & framework-agnostic — satu sumber kebenaran untuk warna, tipografi,
 spasi, dan komponen. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/README.md

@@ -5,7 +5,7 @@
 > **More free days for devs — the UI kit is ready to use.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v1.29.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.29.0)
+[![Release](https://img.shields.io/badge/release-v1.30.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.30.0)
 
 A token-driven, framework-agnostic UI kit — one source of truth for color, typography,
 spacing, and components. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/USAGE.md

@@ -27,6 +27,21 @@ the single biggest cause of "flat grey mush". Pick the role, not the size:
 Everything else is body. If you reach for a fourth title size, you probably need a section, not a
 font size.
 
+
+## Borders: two roles, two contrast contracts
+
+`--color-border` (and `-muted` / `-strong`) is **decoration** — a card edge, a table rule, a
+separator. Nothing in WCAG requires it to be visible, and it is deliberately faint (≈1.3:1).
+
+`--color-control-border` is the **boundary of a control** — input, textarea, checkbox, radio,
+switch, dropzone. WCAG 1.4.11 requires 3:1 against every surface it can sit on, so it is
+necessarily darker than a card edge; that difference is the contract, not an inconsistency.
+
+It is tuned to clear that floor with margin (≈3.4–3.9 depending on surface) rather than to be as
+dark as it can be: a boundary that reads as loud as body text makes a form feel heavier than it is.
+Do not "harmonise" a control border down to `--color-border` — that drops a required 3:1 boundary to
+1.3:1.
+
 ## 2. Spacing rhythm — three gaps, always from the scale
 
 Never a loose value; always `var(--space-N)` (a 4px scale). Three rhythms carry most layouts, and the

package/dist/freeday.bundle.css

@@ -18,6 +18,7 @@
   --slate-200: #e0e3ea;
   --slate-300: #cbd0da;
   --slate-400: #99a1b3;
+  --slate-450: #798295;
   --slate-500: #6b7488;
   --slate-600: #4d5568;
   --slate-700: #3a4152;
@@ -138,7 +139,7 @@
   --color-border: var(--slate-200);
   --color-border-strong: var(--slate-300);
   --color-border-muted: var(--slate-100);
-  --color-control-border: var(--slate-500);
+  --color-control-border: var(--slate-450);
   --color-switch-thumb: var(--slate-0);
   --color-shadow-inset: rgba(16,14,30,.06);
   --color-inverse-surface: var(--slate-900);
@@ -209,7 +210,7 @@
   --color-border: var(--slate-800);
   --color-border-strong: var(--slate-700);
   --color-border-muted: #1c2130;
-  --color-control-border: var(--slate-500);
+  --color-control-border: var(--slate-450);
   --color-inverse-surface: var(--slate-100);
   --color-inverse-text: var(--slate-900);
   --color-success: var(--green-500);
@@ -272,7 +273,7 @@
   --color-border: var(--slate-800);
   --color-border-strong: var(--slate-700);
   --color-border-muted: #1c2130;
-  --color-control-border: var(--slate-500);
+  --color-control-border: var(--slate-450);
   --color-inverse-surface: var(--slate-100);
   --color-inverse-text: var(--slate-900);
   --color-success: var(--green-500);
@@ -328,7 +329,7 @@
   --color-border: var(--slate-200);
   --color-border-strong: var(--slate-300);
   --color-border-muted: var(--slate-100);
-  --color-control-border: var(--slate-500);
+  --color-control-border: var(--slate-450);
   --color-inverse-surface: var(--slate-900);
   --color-inverse-text: var(--slate-0);
   --color-success: var(--green-600);
@@ -779,13 +780,13 @@ a { color: var(--color-primary); }
    because forgetting it fails SILENTLY: the secondary control looks and hovers exactly as before and
    simply never receives the click, which is the very symptom the pattern exists to cure. Matched by
    shape (anything focusable) so a control the kit does not ship yet is covered too. */
-.fdy-card:has(.fdy-btn--stretch) :is(a[href],button,input,select,textarea,[tabindex]):not(.fdy-btn--stretch){z-index:1;}
+:is(.fdy-card,.fdy-list__row):has(.fdy-btn--stretch) :is(a[href],button,input,select,textarea,[tabindex]):not(.fdy-btn--stretch){z-index:1;}
 /* The position is a DEFAULT, not an override: z-index needs a positioned box (or a flex/grid item),
    but an app that deliberately pins a control inside the card — a corner dismiss, a favourite star —
    must keep its own `position:absolute`. Wrapped in :where() so this whole selector weighs nothing
    and ANY app rule wins it; measured, because at normal specificity the kit silently dragged an
    absolutely positioned dismiss button back into the flow. Do not merge these two rules. */
-:where(.fdy-card:has(.fdy-btn--stretch) :is(a[href],button,input,select,textarea,[tabindex]):not(.fdy-btn--stretch)){position:relative;}
+:where(:is(.fdy-card,.fdy-list__row):has(.fdy-btn--stretch) :is(a[href],button,input,select,textarea,[tabindex]):not(.fdy-btn--stretch)){position:relative;}
 .fdy-card__body{padding:var(--space-5);}
 .fdy-card__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--color-text);margin:0 0 var(--space-1);}
 .fdy-card__desc{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;line-height:var(--leading-normal);}
@@ -1043,7 +1044,10 @@ a { color: var(--color-primary); }
  * single boxed strip, or use .fdy-stats--boxed for shared surface + dividers. */
 .fdy-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--space-5);}
 .fdy-stat{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;}
-.fdy-stat__label{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-subtle);}
+/* --color-text-muted, not -subtle: this is a LABEL, i.e. text, and -subtle is deliberately gated at
+   3.0 (placeholders, dividers, decorative glyphs). On surface-2 -subtle measures 4.41 — under AA
+   for text, and a stat label is often the only thing naming the number above it. */
+.fdy-stat__label{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-muted);}
 .fdy-stat__value{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tighter);line-height:1;color:var(--color-text);font-variant-numeric:tabular-nums;}
 .fdy-stat__value small{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-muted);}
 .fdy-stat__meta{font-size:var(--text-sm);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-2);}
@@ -1343,6 +1347,13 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
  * Works on <ul>/<ol> (list-style is reset here) or on plain <div>s. */
 /* position:relative — containing block for out-of-flow row content (see base.css). */
 .fdy-list{position:relative;list-style:none;margin:0;padding:0;background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;}
+/* A row that hosts a stretched target has to be the anchor itself (#008 §1). Without this the
+   overlay resolves against .fdy-list — which IS positioned — so EVERY row's target covers the whole
+   list and the last one in the DOM wins: measured, a click on row one opens row two, under row one's
+   name, which looks exactly like working software. Opt-in via :has(), so a row that doesn't use the
+   pattern is untouched and nothing an app absolutely positions inside a plain row starts resolving
+   against a new containing block. The escape-hatch raise lives in card.css beside the card's. */
+.fdy-list__row:has(.fdy-btn--stretch){position:relative;}
 .fdy-list__row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);min-width:0;}
 /* Divider between rows. Two shapes are supported and both are load-bearing: rows as direct children
  * of the list, and rows wrapped in <li> (the semantic shape, where the ADJACENT siblings are the

package/dist/freeday.css

@@ -409,13 +409,13 @@ a { color: var(--color-primary); }
    because forgetting it fails SILENTLY: the secondary control looks and hovers exactly as before and
    simply never receives the click, which is the very symptom the pattern exists to cure. Matched by
    shape (anything focusable) so a control the kit does not ship yet is covered too. */
-.fdy-card:has(.fdy-btn--stretch) :is(a[href],button,input,select,textarea,[tabindex]):not(.fdy-btn--stretch){z-index:1;}
+:is(.fdy-card,.fdy-list__row):has(.fdy-btn--stretch) :is(a[href],button,input,select,textarea,[tabindex]):not(.fdy-btn--stretch){z-index:1;}
 /* The position is a DEFAULT, not an override: z-index needs a positioned box (or a flex/grid item),
    but an app that deliberately pins a control inside the card — a corner dismiss, a favourite star —
    must keep its own `position:absolute`. Wrapped in :where() so this whole selector weighs nothing
    and ANY app rule wins it; measured, because at normal specificity the kit silently dragged an
    absolutely positioned dismiss button back into the flow. Do not merge these two rules. */
-:where(.fdy-card:has(.fdy-btn--stretch) :is(a[href],button,input,select,textarea,[tabindex]):not(.fdy-btn--stretch)){position:relative;}
+:where(:is(.fdy-card,.fdy-list__row):has(.fdy-btn--stretch) :is(a[href],button,input,select,textarea,[tabindex]):not(.fdy-btn--stretch)){position:relative;}
 .fdy-card__body{padding:var(--space-5);}
 .fdy-card__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--color-text);margin:0 0 var(--space-1);}
 .fdy-card__desc{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;line-height:var(--leading-normal);}
@@ -673,7 +673,10 @@ a { color: var(--color-primary); }
  * single boxed strip, or use .fdy-stats--boxed for shared surface + dividers. */
 .fdy-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--space-5);}
 .fdy-stat{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;}
-.fdy-stat__label{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-subtle);}
+/* --color-text-muted, not -subtle: this is a LABEL, i.e. text, and -subtle is deliberately gated at
+   3.0 (placeholders, dividers, decorative glyphs). On surface-2 -subtle measures 4.41 — under AA
+   for text, and a stat label is often the only thing naming the number above it. */
+.fdy-stat__label{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-muted);}
 .fdy-stat__value{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tighter);line-height:1;color:var(--color-text);font-variant-numeric:tabular-nums;}
 .fdy-stat__value small{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-muted);}
 .fdy-stat__meta{font-size:var(--text-sm);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-2);}
@@ -973,6 +976,13 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
  * Works on <ul>/<ol> (list-style is reset here) or on plain <div>s. */
 /* position:relative — containing block for out-of-flow row content (see base.css). */
 .fdy-list{position:relative;list-style:none;margin:0;padding:0;background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;}
+/* A row that hosts a stretched target has to be the anchor itself (#008 §1). Without this the
+   overlay resolves against .fdy-list — which IS positioned — so EVERY row's target covers the whole
+   list and the last one in the DOM wins: measured, a click on row one opens row two, under row one's
+   name, which looks exactly like working software. Opt-in via :has(), so a row that doesn't use the
+   pattern is untouched and nothing an app absolutely positions inside a plain row starts resolving
+   against a new containing block. The escape-hatch raise lives in card.css beside the card's. */
+.fdy-list__row:has(.fdy-btn--stretch){position:relative;}
 .fdy-list__row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);min-width:0;}
 /* Divider between rows. Two shapes are supported and both are load-bearing: rows as direct children
  * of the list, and rows wrapped in <li> (the semantic shape, where the ADJACENT siblings are the

package/dist/freeday.tokens.css

@@ -17,6 +17,7 @@
   --slate-200: #e0e3ea;
   --slate-300: #cbd0da;
   --slate-400: #99a1b3;
+  --slate-450: #798295;
   --slate-500: #6b7488;
   --slate-600: #4d5568;
   --slate-700: #3a4152;
@@ -137,7 +138,7 @@
   --color-border: var(--slate-200);
   --color-border-strong: var(--slate-300);
   --color-border-muted: var(--slate-100);
-  --color-control-border: var(--slate-500);
+  --color-control-border: var(--slate-450);
   --color-switch-thumb: var(--slate-0);
   --color-shadow-inset: rgba(16,14,30,.06);
   --color-inverse-surface: var(--slate-900);
@@ -208,7 +209,7 @@
   --color-border: var(--slate-800);
   --color-border-strong: var(--slate-700);
   --color-border-muted: #1c2130;
-  --color-control-border: var(--slate-500);
+  --color-control-border: var(--slate-450);
   --color-inverse-surface: var(--slate-100);
   --color-inverse-text: var(--slate-900);
   --color-success: var(--green-500);
@@ -271,7 +272,7 @@
   --color-border: var(--slate-800);
   --color-border-strong: var(--slate-700);
   --color-border-muted: #1c2130;
-  --color-control-border: var(--slate-500);
+  --color-control-border: var(--slate-450);
   --color-inverse-surface: var(--slate-100);
   --color-inverse-text: var(--slate-900);
   --color-success: var(--green-500);
@@ -327,7 +328,7 @@
   --color-border: var(--slate-200);
   --color-border-strong: var(--slate-300);
   --color-border-muted: var(--slate-100);
-  --color-control-border: var(--slate-500);
+  --color-control-border: var(--slate-450);
   --color-inverse-surface: var(--slate-900);
   --color-inverse-text: var(--slate-0);
   --color-success: var(--green-600);

package/docs/getting-started.md

@@ -184,7 +184,7 @@ live docs also have a copy button per component.
 ```bash
 npm i @cahyo-dimas/freeday
 ```
-Lands in `package.json` as `"@cahyo-dimas/freeday": "^1.29.0"` (public npm package). `dist/` is
+Lands in `package.json` as `"@cahyo-dimas/freeday": "^1.30.0"` (public npm package). `dist/` is
 committed and published → no build step; `npm ci` runs without auth.
 
 ### 2. Import the CSS + enhancers **once** in your entry (`src/main.ts`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "1.29.0",
+  "version": "1.30.0",
   "description": "Freeday — token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",

package/src/components/card.css

@@ -24,13 +24,13 @@
    because forgetting it fails SILENTLY: the secondary control looks and hovers exactly as before and
    simply never receives the click, which is the very symptom the pattern exists to cure. Matched by
    shape (anything focusable) so a control the kit does not ship yet is covered too. */
-.fdy-card:has(.fdy-btn--stretch) :is(a[href],button,input,select,textarea,[tabindex]):not(.fdy-btn--stretch){z-index:1;}
+:is(.fdy-card,.fdy-list__row):has(.fdy-btn--stretch) :is(a[href],button,input,select,textarea,[tabindex]):not(.fdy-btn--stretch){z-index:1;}
 /* The position is a DEFAULT, not an override: z-index needs a positioned box (or a flex/grid item),
    but an app that deliberately pins a control inside the card — a corner dismiss, a favourite star —
    must keep its own `position:absolute`. Wrapped in :where() so this whole selector weighs nothing
    and ANY app rule wins it; measured, because at normal specificity the kit silently dragged an
    absolutely positioned dismiss button back into the flow. Do not merge these two rules. */
-:where(.fdy-card:has(.fdy-btn--stretch) :is(a[href],button,input,select,textarea,[tabindex]):not(.fdy-btn--stretch)){position:relative;}
+:where(:is(.fdy-card,.fdy-list__row):has(.fdy-btn--stretch) :is(a[href],button,input,select,textarea,[tabindex]):not(.fdy-btn--stretch)){position:relative;}
 .fdy-card__body{padding:var(--space-5);}
 .fdy-card__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--color-text);margin:0 0 var(--space-1);}
 .fdy-card__desc{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;line-height:var(--leading-normal);}

package/src/components/composition.css

@@ -40,7 +40,10 @@
  * single boxed strip, or use .fdy-stats--boxed for shared surface + dividers. */
 .fdy-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--space-5);}
 .fdy-stat{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;}
-.fdy-stat__label{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-subtle);}
+/* --color-text-muted, not -subtle: this is a LABEL, i.e. text, and -subtle is deliberately gated at
+   3.0 (placeholders, dividers, decorative glyphs). On surface-2 -subtle measures 4.41 — under AA
+   for text, and a stat label is often the only thing naming the number above it. */
+.fdy-stat__label{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-muted);}
 .fdy-stat__value{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tighter);line-height:1;color:var(--color-text);font-variant-numeric:tabular-nums;}
 .fdy-stat__value small{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-muted);}
 .fdy-stat__meta{font-size:var(--text-sm);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-2);}

package/src/components/list.css

@@ -10,6 +10,13 @@
  * Works on <ul>/<ol> (list-style is reset here) or on plain <div>s. */
 /* position:relative — containing block for out-of-flow row content (see base.css). */
 .fdy-list{position:relative;list-style:none;margin:0;padding:0;background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;}
+/* A row that hosts a stretched target has to be the anchor itself (#008 §1). Without this the
+   overlay resolves against .fdy-list — which IS positioned — so EVERY row's target covers the whole
+   list and the last one in the DOM wins: measured, a click on row one opens row two, under row one's
+   name, which looks exactly like working software. Opt-in via :has(), so a row that doesn't use the
+   pattern is untouched and nothing an app absolutely positions inside a plain row starts resolving
+   against a new containing block. The escape-hatch raise lives in card.css beside the card's. */
+.fdy-list__row:has(.fdy-btn--stretch){position:relative;}
 .fdy-list__row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);min-width:0;}
 /* Divider between rows. Two shapes are supported and both are load-bearing: rows as direct children
  * of the list, and rows wrapped in <li> (the semantic shape, where the ADJACENT siblings are the

package/tokens/tokens.json

@@ -10,7 +10,7 @@
   "slate": {
     "0": { "$value": "#ffffff" }, "50": { "$value": "#f7f8fa" },
     "100": { "$value": "#eef0f4" }, "200": { "$value": "#e0e3ea" },
-    "300": { "$value": "#cbd0da" }, "400": { "$value": "#99a1b3" },
+    "300": { "$value": "#cbd0da" }, "400": { "$value": "#99a1b3" }, "450": { "$value": "#798295" },
     "500": { "$value": "#6b7488" }, "600": { "$value": "#4d5568" },
     "700": { "$value": "#3a4152" }, "800": { "$value": "#262b38" },
     "900": { "$value": "#171b26" }, "950": { "$value": "#0e111a" }
@@ -86,7 +86,7 @@
     "border":        { "$value": "{slate.200}", "$dark": "{slate.800}" },
     "border-strong": { "$value": "{slate.300}", "$dark": "{slate.700}" },
     "border-muted":  { "$value": "{slate.100}", "$dark": "#1c2130" },
-    "control-border": { "$value": "{slate.500}", "$dark": "{slate.500}" },
+    "control-border": { "$value": "{slate.450}", "$dark": "{slate.450}" },
     "switch-thumb": { "$value": "{slate.0}" },
     "shadow-inset": { "$value": "rgba(16,14,30,.06)" },