@cahyo-dimas/freeday 1.27.0 → 1.28.0

package/CHANGELOG.md

@@ -3,6 +3,51 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [1.28.0] — 2026-08-18
+Improvement note 007, written while fixing a workspace picker whose cards showed a pointer cursor
+and swallowed every click.
+### Added
+- **`.fdy-btn--stretch`** — the pattern for **one card, one primary action, one escape hatch**, which
+  the kit had no shape for: `--button` is a card that *is* one control, `--interactive` a card that
+  merely *has* one, and a card with two actions can be neither (interactive content nested in a
+  `<button>` is invalid HTML). The primary control keeps its real `<button>`/`<a>` semantics and
+  spreads its hit area over the card with a pseudo-element.
+  This is shipped rather than documented because it **cannot be hand-rolled on a `.fdy-btn`**: the
+  button nudges itself with a transform on `:hover`/`:active`, a transformed element becomes the
+  containing block for its own absolutely positioned descendants, and the overlay therefore
+  re-anchors from the card to the button's own box mid-gesture. `mousedown` lands on the button,
+  `mouseup` somewhere else, and the browser fires `click` on their common ancestor — the button never
+  gets one. The symptom is identical to the bug being fixed.
+  The report found this on `--text`/`--ghost`, which break on press. The kit's **base** rule is
+  `.fdy-btn:hover{transform:translateY(-1px)}`, so the default and `--danger` fills break one step
+  earlier, on hover: neutralising only `:active` — the obvious half-fix — still leaks.
+- **Escape hatches are raised automatically.** Every focusable element in a card holding a stretched
+  target sits above the overlay without markup or CSS from the consumer, because forgetting a
+  `z-index` here fails silently — the control looks and hovers exactly as before and simply never
+  receives the click.
+### Fixed
+- `--interactive` is now documented as **presentational**: the only affordance in the kit whose
+  correctness lives outside it. The CSS cannot know whether a handler exists, so the modifier without
+  a control and a control without the modifier both fail silently. It now points at the shape that
+  makes the promise true.
+### Notes on the shape of the fix
+- **Raising the escape hatch must not outweigh the app.** The first version declared
+  `position:relative` at normal specificity and *measurably* dragged an absolutely positioned corner
+  dismiss button back into the flow — a control the app had pinned itself, moved by the kit, with no
+  error. `z-index` still wins, but the `position` it needs is now a zero-specificity `:where()`
+  default that any app rule beats. The two rules must stay split; the gate asserts it.
+- **Cards only.** The overlay anchors to the nearest *positioned* ancestor. `.fdy-list__row` is not
+  positioned (`.fdy-list` is), so a stretched target in a list row would cover the whole list —
+  documented, with `.fdy-list__row--button` as the answer for clickable rows.
+### Added — guards
+- `browser/card-stretch.mjs` drives real presses: the target receives clicks from anywhere on the
+  card, the click is dispatched **on the button** rather than on a common ancestor, the secondary
+  action and an inline link keep their own clicks, and an app-pinned control keeps its own
+  `position`. A synthetic `.click()` never enters `:active` and passes against the broken CSS, which
+  is why this spec is worth its weight.
+- `test/css.test.mjs` guards all of it at the CI gate. Mutation-checked against six defects,
+  including both of the ones written during this change.
+
 ## [1.27.0] — 2026-08-14
 Improvement note #44, found while building a settings screen whose only numeric field looked like it
 belonged to a different application.

package/COMPONENTS.md

@@ -885,7 +885,11 @@ is `role="group" aria-roledescription="slide"`.
 Parts `__body` `__title` `__desc` `__footer`. Modifiers:
 
 - `--elevated` — raise it (use sparingly; most surfaces are flat)
-- `--interactive` — cursor + hover-lift for a card that *has* a click handler
+- `--interactive` — cursor + hover-lift for a card that *has* a click handler. **Presentational
+  only:** it is the one affordance in the kit whose correctness lives outside it — the CSS cannot
+  know whether a handler exists, so the modifier without a control (a card that looks clickable and
+  swallows every click) and a control without the modifier both fail silently. Pair it with a real
+  control — normally the stretched target below.
 - `--button` — for a card that **is** the control: render it as `<button>` and add this to reset
   the UA button box **without** losing the card surface/border
 - `.fdy-card--button` never replaces keyboard semantics — a clickable card must be a real
@@ -895,6 +899,44 @@ Parts `__body` `__title` `__desc` `__footer`. Modifiers:
 - The card is `position:relative`, so a badge or ribbon you absolutely position inside it anchors
   to the card. That is also what keeps hidden labels inside it from escaping — see *Containment*.
 
+### One card, one primary action, one escape hatch
+
+A card with **two** actions cannot be `--button`: interactive content nested in a `<button>` is
+invalid HTML. Give the primary control `.fdy-btn--stretch` — its hit area covers the whole card,
+while it stays a real `<button>`/`<a>` with real keyboard semantics.
+
+```html
+<article class="fdy-card fdy-card--interactive">
+  <div class="fdy-card__body">
+    <h3 class="fdy-card__title">Workspace Alpha</h3>
+    <p class="fdy-card__desc">12 members · 4 boards</p>
+  </div>
+  <div class="fdy-card__footer">
+    <button class="fdy-btn fdy-btn--text" type="button">Details</button>   <!-- escape hatch -->
+    <button class="fdy-btn fdy-btn--stretch" type="button">Open workspace Alpha</button>
+  </div>
+</article>
+```
+
+- **The escape hatch needs nothing.** Every focusable element in a card that holds a stretched
+  target is raised above the overlay automatically — forgetting a `z-index` here fails silently, and
+  a silent failure is what this pattern exists to remove. The `position` that raising needs is only a
+  **default** (zero-specificity), so a control you pin yourself — a corner dismiss, a favourite star —
+  keeps its own `position:absolute` and is raised anyway.
+- **Name the stretched button for what the whole card does** ("Open workspace Alpha", not "Open").
+  Its label is the accessible name of the entire hit area.
+- **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`.
+- `.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
+  transforms and moves the press feedback to the card. This is why the pattern is shipped rather
+  than documented.
+
 ## Badge — `.fdy-badge`
 Inline status pill: `--success` `--warning` `--danger` `--info` `--outline`. Never colour-only —
 the text carries the meaning.

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.27.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.27.0)
+[![Release](https://img.shields.io/badge/release-v1.28.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.28.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.27.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.27.0)
+[![Release](https://img.shields.io/badge/release-v1.28.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.28.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/dist/freeday.bundle.css

@@ -711,6 +711,22 @@ a { color: var(--color-primary); }
 .fdy-btn--ghost[aria-pressed="true"],.fdy-btn--text[aria-pressed="true"]{background:var(--color-primary-soft);color:var(--color-primary-strong);border-color:var(--color-primary-border);box-shadow:none;}
 .fdy-btn--ghost[aria-pressed="true"]:hover,.fdy-btn--text[aria-pressed="true"]:hover{background:var(--color-primary-soft);transform:none;box-shadow:none;}
 
+/* Stretched hit area (#007) — spread this button's click target over its nearest positioned
+ * ancestor, so "one card, one primary action, one escape hatch" needs no click handler on the
+ * <article>: the real control stays a real <button>/<a> and keeps its keyboard semantics.
+ * `.fdy-card` is already position:relative, so it is the anchor.
+ *
+ * The transforms MUST go, and this is the whole reason the modifier exists rather than a docs line:
+ * a transformed element becomes the containing block for its own absolutely-positioned descendants,
+ * so `inset:0` re-anchors from the card to the button's own box the moment the button is hovered or
+ * pressed. Measured: mousedown lands on the button, the overlay collapses under the pointer, mouseup
+ * lands on some other element, and the browser fires `click` on their common ancestor — the button
+ * never gets one. It demos fine on hover for --text/--ghost (their hover is already transform:none)
+ * and only a real press reveals it; the default and --danger fills break one step earlier, on hover.
+ * Press feedback moves to the card, which is the object actually being pressed (see card.css). */
+.fdy-btn--stretch::after{content:'';position:absolute;inset:0;}
+.fdy-btn--stretch:hover,.fdy-btn--stretch:active{transform:none;}
+
 /* Icon-only — square; combine with --ghost/--text/--sm/--lg. Requires aria-label. */
 .fdy-btn--icon{width:var(--control-h);padding:0;}
 .fdy-btn--icon.fdy-btn--sm{width:calc(var(--control-h) - var(--space-2));}
@@ -744,9 +760,13 @@ a { color: var(--color-primary); }
 .fdy-card--elevated{box-shadow:var(--shadow-lift-hover);}
 .fdy-card--interactive{cursor:pointer;}
 .fdy-card--interactive:hover{box-shadow:var(--shadow-lift-hover);transform:translateY(-3px);}
+/* Pressing a stretched target (see .fdy-btn--stretch) is pressing the CARD — the button's own
+   nudge had to go, and the object under the pointer is the card. Ordered before the reduced-motion
+   block and the disabled rules so both still win at equal specificity. */
+.fdy-card--interactive:has(.fdy-btn--stretch:active){transform:translateY(-1px);}
 /* The global reduced-motion reset kills the ANIMATION; drop the -3px shift too so the card
  * doesn't jump. The shadow still communicates the affordance. */
-@media (prefers-reduced-motion:reduce){.fdy-card--interactive:hover{transform:none;}}
+@media (prefers-reduced-motion:reduce){.fdy-card--interactive:hover,.fdy-card--interactive:has(.fdy-btn--stretch:active){transform:none;}}
 /* When the whole card IS the control — a real <button> so the row is keyboard-reachable and
  * announced — reset the UA button box. Note: it does NOT reset background/border, because
  * .fdy-card already sets its own surface + border (resetting them here would strip the card). */
@@ -755,6 +775,17 @@ a { color: var(--color-primary); }
    --interactive lift is withdrawn so a refusing control stops answering the pointer. */
 .fdy-card--button:disabled,.fdy-card--button[aria-disabled="true"],.fdy-card--interactive[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
 .fdy-card--interactive:disabled:hover,.fdy-card--interactive[aria-disabled="true"]:hover{box-shadow:var(--shadow-lift);transform:none;}
+/* Escape hatches stay clickable above a stretched target — automatic, not a documented convention,
+   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;}
+/* 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;}
 .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/dist/freeday.css

@@ -341,6 +341,22 @@ a { color: var(--color-primary); }
 .fdy-btn--ghost[aria-pressed="true"],.fdy-btn--text[aria-pressed="true"]{background:var(--color-primary-soft);color:var(--color-primary-strong);border-color:var(--color-primary-border);box-shadow:none;}
 .fdy-btn--ghost[aria-pressed="true"]:hover,.fdy-btn--text[aria-pressed="true"]:hover{background:var(--color-primary-soft);transform:none;box-shadow:none;}
 
+/* Stretched hit area (#007) — spread this button's click target over its nearest positioned
+ * ancestor, so "one card, one primary action, one escape hatch" needs no click handler on the
+ * <article>: the real control stays a real <button>/<a> and keeps its keyboard semantics.
+ * `.fdy-card` is already position:relative, so it is the anchor.
+ *
+ * The transforms MUST go, and this is the whole reason the modifier exists rather than a docs line:
+ * a transformed element becomes the containing block for its own absolutely-positioned descendants,
+ * so `inset:0` re-anchors from the card to the button's own box the moment the button is hovered or
+ * pressed. Measured: mousedown lands on the button, the overlay collapses under the pointer, mouseup
+ * lands on some other element, and the browser fires `click` on their common ancestor — the button
+ * never gets one. It demos fine on hover for --text/--ghost (their hover is already transform:none)
+ * and only a real press reveals it; the default and --danger fills break one step earlier, on hover.
+ * Press feedback moves to the card, which is the object actually being pressed (see card.css). */
+.fdy-btn--stretch::after{content:'';position:absolute;inset:0;}
+.fdy-btn--stretch:hover,.fdy-btn--stretch:active{transform:none;}
+
 /* Icon-only — square; combine with --ghost/--text/--sm/--lg. Requires aria-label. */
 .fdy-btn--icon{width:var(--control-h);padding:0;}
 .fdy-btn--icon.fdy-btn--sm{width:calc(var(--control-h) - var(--space-2));}
@@ -374,9 +390,13 @@ a { color: var(--color-primary); }
 .fdy-card--elevated{box-shadow:var(--shadow-lift-hover);}
 .fdy-card--interactive{cursor:pointer;}
 .fdy-card--interactive:hover{box-shadow:var(--shadow-lift-hover);transform:translateY(-3px);}
+/* Pressing a stretched target (see .fdy-btn--stretch) is pressing the CARD — the button's own
+   nudge had to go, and the object under the pointer is the card. Ordered before the reduced-motion
+   block and the disabled rules so both still win at equal specificity. */
+.fdy-card--interactive:has(.fdy-btn--stretch:active){transform:translateY(-1px);}
 /* The global reduced-motion reset kills the ANIMATION; drop the -3px shift too so the card
  * doesn't jump. The shadow still communicates the affordance. */
-@media (prefers-reduced-motion:reduce){.fdy-card--interactive:hover{transform:none;}}
+@media (prefers-reduced-motion:reduce){.fdy-card--interactive:hover,.fdy-card--interactive:has(.fdy-btn--stretch:active){transform:none;}}
 /* When the whole card IS the control — a real <button> so the row is keyboard-reachable and
  * announced — reset the UA button box. Note: it does NOT reset background/border, because
  * .fdy-card already sets its own surface + border (resetting them here would strip the card). */
@@ -385,6 +405,17 @@ a { color: var(--color-primary); }
    --interactive lift is withdrawn so a refusing control stops answering the pointer. */
 .fdy-card--button:disabled,.fdy-card--button[aria-disabled="true"],.fdy-card--interactive[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
 .fdy-card--interactive:disabled:hover,.fdy-card--interactive[aria-disabled="true"]:hover{box-shadow:var(--shadow-lift);transform:none;}
+/* Escape hatches stay clickable above a stretched target — automatic, not a documented convention,
+   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;}
+/* 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;}
 .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/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.27.0"` (public npm package). `dist/` is
+Lands in `package.json` as `"@cahyo-dimas/freeday": "^1.28.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.27.0",
+  "version": "1.28.0",
   "description": "Freeday — token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",
@@ -71,7 +71,7 @@
   "scripts": {
     "build": "node tokens/build.mjs",
     "test": "node --test",
-    "test:browser": "node --test browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs",
+    "test:browser": "node --test browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs browser/card-stretch.mjs",
     "prepack": "node tokens/build.mjs",
     "version": "node tokens/build.mjs && git add dist",
     "typecheck:react": "tsc -p adapters/react/tsconfig.json --noEmit"

package/src/components/button.css

@@ -45,6 +45,22 @@
 .fdy-btn--ghost[aria-pressed="true"],.fdy-btn--text[aria-pressed="true"]{background:var(--color-primary-soft);color:var(--color-primary-strong);border-color:var(--color-primary-border);box-shadow:none;}
 .fdy-btn--ghost[aria-pressed="true"]:hover,.fdy-btn--text[aria-pressed="true"]:hover{background:var(--color-primary-soft);transform:none;box-shadow:none;}
 
+/* Stretched hit area (#007) — spread this button's click target over its nearest positioned
+ * ancestor, so "one card, one primary action, one escape hatch" needs no click handler on the
+ * <article>: the real control stays a real <button>/<a> and keeps its keyboard semantics.
+ * `.fdy-card` is already position:relative, so it is the anchor.
+ *
+ * The transforms MUST go, and this is the whole reason the modifier exists rather than a docs line:
+ * a transformed element becomes the containing block for its own absolutely-positioned descendants,
+ * so `inset:0` re-anchors from the card to the button's own box the moment the button is hovered or
+ * pressed. Measured: mousedown lands on the button, the overlay collapses under the pointer, mouseup
+ * lands on some other element, and the browser fires `click` on their common ancestor — the button
+ * never gets one. It demos fine on hover for --text/--ghost (their hover is already transform:none)
+ * and only a real press reveals it; the default and --danger fills break one step earlier, on hover.
+ * Press feedback moves to the card, which is the object actually being pressed (see card.css). */
+.fdy-btn--stretch::after{content:'';position:absolute;inset:0;}
+.fdy-btn--stretch:hover,.fdy-btn--stretch:active{transform:none;}
+
 /* Icon-only — square; combine with --ghost/--text/--sm/--lg. Requires aria-label. */
 .fdy-btn--icon{width:var(--control-h);padding:0;}
 .fdy-btn--icon.fdy-btn--sm{width:calc(var(--control-h) - var(--space-2));}

package/src/components/card.css

@@ -5,9 +5,13 @@
 .fdy-card--elevated{box-shadow:var(--shadow-lift-hover);}
 .fdy-card--interactive{cursor:pointer;}
 .fdy-card--interactive:hover{box-shadow:var(--shadow-lift-hover);transform:translateY(-3px);}
+/* Pressing a stretched target (see .fdy-btn--stretch) is pressing the CARD — the button's own
+   nudge had to go, and the object under the pointer is the card. Ordered before the reduced-motion
+   block and the disabled rules so both still win at equal specificity. */
+.fdy-card--interactive:has(.fdy-btn--stretch:active){transform:translateY(-1px);}
 /* The global reduced-motion reset kills the ANIMATION; drop the -3px shift too so the card
  * doesn't jump. The shadow still communicates the affordance. */
-@media (prefers-reduced-motion:reduce){.fdy-card--interactive:hover{transform:none;}}
+@media (prefers-reduced-motion:reduce){.fdy-card--interactive:hover,.fdy-card--interactive:has(.fdy-btn--stretch:active){transform:none;}}
 /* When the whole card IS the control — a real <button> so the row is keyboard-reachable and
  * announced — reset the UA button box. Note: it does NOT reset background/border, because
  * .fdy-card already sets its own surface + border (resetting them here would strip the card). */
@@ -16,6 +20,17 @@
    --interactive lift is withdrawn so a refusing control stops answering the pointer. */
 .fdy-card--button:disabled,.fdy-card--button[aria-disabled="true"],.fdy-card--interactive[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
 .fdy-card--interactive:disabled:hover,.fdy-card--interactive[aria-disabled="true"]:hover{box-shadow:var(--shadow-lift);transform:none;}
+/* Escape hatches stay clickable above a stretched target — automatic, not a documented convention,
+   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;}
+/* 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;}
 .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);}