@cahyo-dimas/freeday 1.26.0 → 1.28.0

package/CHANGELOG.md

@@ -3,6 +3,104 @@
 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.
+### Fixed
+- **`.fdy-input[type="number"]` no longer shows the user agent's spin buttons.** They are OS widgets
+  in OS colours that no theme reaches, so on a dark surface they read as a light-grey artefact glued
+  to an otherwise themed field — the one unthemed control on a page where everything else is themed
+  to the last pixel. Both halves ship, because they cover different engines: `appearance: textfield`
+  (Firefox) and `::-webkit-outer/inner-spin-button { appearance: none }` (Blink/WebKit).
+### Added
+- **`[data-fdy-number]` + `freeday-number.js`** — the increment affordance back on the kit's terms,
+  since hiding the native buttons removes it. **Not a new block:** it is an `.fdy-input-group` with
+  two `__btn`s, so it inherits the shared border, `:focus-within` ring and `:has()` error promotion
+  that already existed. The reported `.fdy-number` block would have duplicated all of it.
+  - **No custom event.** Stepping dispatches native bubbling `input` + `change` on the input, so
+    `v-model` / `onChange` / `@bind` work with no adapter and no new API — the input stays the source
+    of truth. That is also why this needs no typed wrapper in any of the four stacks.
+  - `min`/`max`/`step` live on the input and the buttons never redo the arithmetic (`stepUp()`/
+    `stepDown()` clamp for free). They go `disabled` at a bound, on a `disabled`/`readonly` field,
+    and when `step="any"` — which has no defined increment and makes `stepUp()` throw, so a stepper
+    cannot honestly express it.
+  - A `MutationObserver` watches `disabled`/`readonly`/`min`/`max`/`step`: a framework changes those
+    without firing an event, and a button that still looks enabled while doing nothing is the exact
+    lie this state machine exists to prevent. (First observer in the kit — the alternative was a
+    button whose appearance silently drifts from its behaviour.)
+  - The buttons are **not tab stops** (`tabindex="-1"`): the input is already focusable and ↑/↓
+    already step it, so two extra stops per field cost every keyboard user and buy nothing. They keep
+    an `aria-label`, and `type="button"` so they cannot submit their form.
+- `.fdy-input-group__btn` gains a **leading-position** rule (divider on the correct side when the
+  button comes first) and a **`:disabled`** state — dim + `not-allowed`, with `:hover` withdrawn,
+  because a disabled button still matches `:hover`.
+- `COMPONENTS.md` now answers **which `type` `.fdy-input` covers**, which is the question that would
+  have prevented this note: every text-like type themes identically, and the two that keep a native
+  widget are named with what to do about each.
+### Notes on the shape of the fix
+- **`type="search"` deliberately left alone.** Its WebKit clear (×) button is unthemed too — and it
+  is on the kit's own docs pages, 10 of them — but it is the only way to empty the field. Stripping
+  it removes function, not chrome; the number arrows only removed a mouse-only increment that ↑/↓
+  still provides. `type="date"`/`time` likewise keep their picker indicator; the kit ships its own
+  datepicker/timepicker and the docs now say to use those instead.
+- **Why this was never caught:** `type="number"` appears **zero** times across `docs/index.html`,
+  `docs/reference-screen.html` and `examples/` (against `search` ×10, `text` ×12, `date` ×4). The kit
+  never used the input it shipped. The docs page now carries a real number field, in the input-group
+  section where it belongs.
+### Added — guards
+- `test/css.test.mjs` asserts both engine halves survive (each is invisible in review and each brings
+  the artefact back on one engine only), and states in-file why `search`/`date` are excluded.
+- `browser/number.mjs` drives real clicks and a real Tab: stepping fires native `input` + `change`,
+  bounds disable the right button, a disabled button changes nothing, `readonly` and `step="any"`
+  are inert without throwing, and Tab skips the buttons. Mutation-checked against five defects.
+- `browser/harness.mjs` gains `pressKey` — tab order only moves for a trusted key, so the claim is
+  measured rather than read off an attribute.
+
 ## [1.26.0] — 2026-08-14
 Improvement note #43, found while chasing a "the upload is stuck" report on a 626 KB PDF: the
 transfer took about a second, the server then spent nearly a minute reading the document.

package/COMPONENTS.md

@@ -91,6 +91,7 @@ element is fine. Events are bubbling
 | `data-fdy-tree` | `freeday-tree.js` | `FreedayTree` | — |
 | `data-fdy-rating` | `freeday-rating.js` | `FreedayRating` | — (native `change`) |
 | `data-fdy-slider` | `freeday-slider.js` | `FreedaySlider` | — (native `input`) |
+| `data-fdy-number` | `freeday-number.js` | `FreedayNumber` | — (native `input`, `change`) |
 | `data-fdy-drawer="id"` | `freeday-drawer.js` | `FreedayDrawer` | — |
 | `data-fdy-chart="type"` | `freeday-chart.js` | `FreedayChart` | — (`.update(el)` to repaint) |
 | — (imperative) | `freeday-toast.js` | `Freeday.toast()` / `Freeday.dismiss()` | — |
@@ -307,6 +308,17 @@ native control, otherwise a `<div>` + explicitly associated label.
 </label>
 ```
 
+**Which `type` does `.fdy-input` cover?** Every text-like type — `text` `email` `password` `tel`
+`url` `search` `number` — themes identically. Two carry a native widget the kit does *not* override:
+
+| Type | What the UA still draws | What to do |
+|---|---|---|
+| `search` | WebKit's clear (×) button, in OS colours | **Left alone on purpose** — it is the only way to empty the field. Want it themed? Drop the type back to `text` and add a `.fdy-input-group__btn` that clears. |
+| `date` `time` `datetime-local` | the picker indicator glyph, and the whole native picker | Use `.fdy-datepicker` / `.fdy-timepicker` / `.fdy-datetimepicker` instead — the kit ships its own. |
+
+`number` used to be a third: the UA spin buttons are unthemeable, so `.fdy-input[type="number"]`
+now hides them and `[data-fdy-number]` below gives the affordance back.
+
 ## Input group — `.fdy-input-group`
 Prefix/suffix addons around an input: text (`Rp`, `%`), a decorative icon
 (`__addon--icon`), or an action button (`__btn`).
@@ -320,6 +332,31 @@ Prefix/suffix addons around an input: text (`Rp`, `%`), a decorative icon
 </div>
 ```
 
+## Number field — `[data-fdy-number]`
+A number input with its increment/decrement affordance back, after `.fdy-input` removed the
+browser's own. **Not a new block** — it is an `.fdy-input-group` with two `__btn`s, so it inherits
+the shared border, focus ring and error promotion. Needs `freeday-number.js`.
+
+```html
+<div class="fdy-input-group" data-fdy-number>
+  <button type="button" class="fdy-input-group__btn" data-fdy-number-step="-1"
+          tabindex="-1" aria-label="Kurangi">−</button>
+  <input class="fdy-input" type="number" min="0" max="10" step="1" value="1" aria-label="Konfirmasi">
+  <button type="button" class="fdy-input-group__btn" data-fdy-number-step="1"
+          tabindex="-1" aria-label="Tambah">+</button>
+</div>
+```
+
+- **No custom event.** Stepping fires native bubbling `input` + `change` on the input, so `v-model`,
+  `onChange` and `@bind` work with no adapter — the input stays the source of truth.
+- `min` / `max` / `step` live on the **input**; the buttons never do the arithmetic themselves
+  (`stepUp()`/`stepDown()` clamp for free) and go `disabled` at a bound, on a `disabled`/`readonly`
+  field, and when `step="any"` (a stepper cannot express "no defined increment").
+- The buttons are **not tab stops** (`tabindex="-1"`): the input is already focusable and ↑/↓
+  already step it, so extra stops would cost every keyboard user and buy nothing. Keep the
+  `aria-label` — pointer and browse-mode users still get a named control.
+- `type="button"` is required. Inside a `<form>`, a bare `<button>` submits it.
+
 ## Checkbox · radio · switch
 Native inputs, styled. `.fdy-check` · `.fdy-radio` · `.fdy-switch` on the wrapping `<label>`;
 `.fdy-checkbox` on a bare `<input type="checkbox">` used inside tables/trees.
@@ -848,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
@@ -858,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.26.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.26.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`.
@@ -130,6 +130,7 @@ Semua auto-init `[data-fdy-*]` saat `DOMContentLoaded` — idempotent, progressi
 | `freeday-datetime` | `[data-fdy-datetimepicker]` | `fdy-datetime-change` `{date,time,value}` · `window.FreedayDatetime` |
 | `freeday-cascade` | `[data-fdy-cascade]` (model `<ul>` bersarang) | `fdy-cascade-change` `{value,path,labels}` · `window.FreedayCascade` |
 | `freeday-mask` | `[data-fdy-mask]`, `[data-fdy-password]` | `fdy-mask` `{value,raw}` · `window.FreedayMask` |
+| `freeday-number` | `[data-fdy-number]` | — (native `input`/`change`) · `window.FreedayNumber` |
 | `freeday-form` | `[data-fdy-validate]` (form) | `fdy-form-invalid`/`-valid` · `window.FreedayForm` |
 | `freeday-chip` | `[data-fdy-chips]`, `.fdy-chip__remove` | `fdy-chip-change`/`fdy-chip-remove` · `window.FreedayChip` |
 | `freeday-upload` | `[data-fdy-dropzone]` | `fdy-upload-add`/`-remove` · `window.FreedayUpload` |

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.26.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.26.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`.
@@ -129,6 +129,7 @@ Each one auto-inits `[data-fdy-*]` on `DOMContentLoaded` — idempotent, progres
 | `freeday-datetime` | `[data-fdy-datetimepicker]` | `fdy-datetime-change` `{date,time,value}` · `window.FreedayDatetime` |
 | `freeday-cascade` | `[data-fdy-cascade]` (nested `<ul>` model) | `fdy-cascade-change` `{value,path,labels}` · `window.FreedayCascade` |
 | `freeday-mask` | `[data-fdy-mask]`, `[data-fdy-password]` | `fdy-mask` `{value,raw}` · `window.FreedayMask` |
+| `freeday-number` | `[data-fdy-number]` | — (native `input`/`change`) · `window.FreedayNumber` |
 | `freeday-form` | `[data-fdy-validate]` (form) | `fdy-form-invalid`/`-valid` · `window.FreedayForm` |
 | `freeday-chip` | `[data-fdy-chips]`, `.fdy-chip__remove` | `fdy-chip-change`/`fdy-chip-remove` · `window.FreedayChip` |
 | `freeday-upload` | `[data-fdy-dropzone]` | `fdy-upload-add`/`-remove` · `window.FreedayUpload` |

package/dist/freeday-number.js

@@ -0,0 +1,104 @@
+/* Freeday — number field enhancer (optional, zero-dependency).
+ * Gives a native <input type="number"> its increment/decrement affordance back, on the kit's terms:
+ * .fdy-input hides the user agent's own spin buttons (unthemeable OS widgets), so this puts two real
+ * buttons in an .fdy-input-group instead. No new block — the group already owns the shared border,
+ * :focus-within ring and error promotion.
+ *
+ * Markup contract:
+ *  <div class="fdy-input-group" data-fdy-number>
+ *    <button type="button" class="fdy-input-group__btn" data-fdy-number-step="-1"
+ *            tabindex="-1" aria-label="Kurangi">−</button>
+ *    <input class="fdy-input" type="number" min="0" max="10" step="1" value="1" aria-label="…">
+ *    <button type="button" class="fdy-input-group__btn" data-fdy-number-step="1"
+ *            tabindex="-1" aria-label="Tambah">+</button>
+ *  </div>
+ *
+ * No custom event: the input is the source of truth, so stepping dispatches native bubbling `input`
+ * and `change`. v-model / onChange / @bind bind to the input directly, exactly as they would without
+ * this enhancer.
+ *
+ * The buttons are deliberately OUT of the tab order (tabindex="-1"): the input is already focusable
+ * and ArrowUp/ArrowDown already step it, so two extra tab stops per field would cost every keyboard
+ * user something and buy nothing. They keep an aria-label, so pointer and browse-mode users still
+ * get a named control.
+ */
+(function () {
+  'use strict';
+
+  function initNumber(root) {
+    if (root.dataset.fdyNumberReady === '1') return;
+
+    var input = root.querySelector('input[type="number"]');
+    var buttons = Array.prototype.slice.call(root.querySelectorAll('[data-fdy-number-step]'));
+    if (!input || !buttons.length) return;
+    root.dataset.fdyNumberReady = '1';
+
+    /* step="any" means there is no defined increment, and stepUp()/stepDown() throw InvalidStateError
+       on such a field. A stepper cannot express it, so the buttons stay visibly disabled rather than
+       failing on click. Read live, not captured: `step` is one of the attributes watched below. */
+    function stepless() {
+      return (input.getAttribute('step') || '').toLowerCase() === 'any';
+    }
+
+    function frozen() {
+      return stepless() || input.disabled || input.readOnly;
+    }
+
+    /* Bounds are read from the input, never recomputed: stepUp()/stepDown() already clamp to
+       min/max/step, so these two only decide whether the button tells the truth about what it does. */
+    function atLimit(direction) {
+      var bound = direction > 0 ? input.max : input.min;
+      if (bound === '' || input.value === '') return false;
+      var value = Number(input.value);
+      var limit = Number(bound);
+      if (isNaN(value) || isNaN(limit)) return false;
+      return direction > 0 ? value >= limit : value <= limit;
+    }
+
+    function sync() {
+      buttons.forEach(function (btn) {
+        var direction = Number(btn.getAttribute('data-fdy-number-step')) < 0 ? -1 : 1;
+        btn.disabled = frozen() || atLimit(direction);
+      });
+    }
+
+    buttons.forEach(function (btn) {
+      btn.addEventListener('click', function () {
+        if (frozen()) return;
+        if (Number(btn.getAttribute('data-fdy-number-step')) < 0) input.stepDown();
+        else input.stepUp();
+        /* The value changed without the user typing, so say so the way the platform does — frameworks
+           listen to these, not to a kit-specific event. */
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+        sync();
+      });
+    });
+
+    input.addEventListener('input', sync);
+    input.addEventListener('change', sync);
+    /* Typing is not the only thing that moves a bound: a framework flips `disabled` or recomputes
+       `max` without any event firing, and a button that still looks enabled but no longer does
+       anything is the lie this state machine exists to avoid. */
+    new MutationObserver(sync).observe(input, {
+      attributes: true,
+      attributeFilter: ['disabled', 'readonly', 'min', 'max', 'step'],
+    });
+    sync();
+  }
+
+  function initAll(context) {
+    var root = context || document;
+    /* root included: querySelectorAll never matches its own root, and a framework ref often sits ON the widget. */
+    if (root.matches && root.matches('[data-fdy-number]')) initNumber(root);
+    Array.prototype.forEach.call(root.querySelectorAll('[data-fdy-number]'), initNumber);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayNumber = { init: initNumber, initAll: initAll };
+})();

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);}
@@ -1230,6 +1261,12 @@ a { color: var(--color-primary); }
 .fdy-input-group__btn:hover{background:var(--color-surface-3);color:var(--color-text);}
 .fdy-input-group__btn:focus-visible{outline:none;color:var(--color-text);box-shadow:inset 0 0 0 2px var(--color-primary);}
 .fdy-input-group__btn svg{display:block;width:1.1rem;height:1.1rem;}
+/* Leading action button (the "−" of a number stepper): the divider belongs on the other side. */
+.fdy-input-group__btn:first-child{border-left:0;border-right:var(--bw) solid var(--color-border);}
+/* At a bound, or on a disabled/read-only field, the button must look as inert as it acts — same dim
+   + not-allowed as .fdy-input:disabled. :hover still matches a disabled button, so it is withdrawn. */
+.fdy-input-group__btn:disabled{opacity:.5;cursor:not-allowed;}
+.fdy-input-group__btn:disabled:hover{background:var(--color-surface-2);color:var(--color-text-muted);}
 /* Error state must win over the neutralizing rules above — promote to the wrapper. */
 .fdy-input-group:has(.fdy-input--error),.fdy-input-group:has(.fdy-combo--error),.fdy-input-group:has([aria-invalid="true"]){border-color:var(--color-danger);}
 .fdy-input-group:has(.fdy-input--error):focus-within,.fdy-input-group:has(.fdy-combo--error):focus-within,.fdy-input-group:has([aria-invalid="true"]):focus-within{border-color:var(--color-danger);box-shadow:inset 0 1px 2px rgba(16,14,30,.04),0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
@@ -1254,6 +1291,14 @@ fieldset.fdy-field>legend{padding:0;float:none;}
 .fdy-input[readonly],.fdy-textarea[readonly]{background:var(--color-surface-2);border-color:var(--color-border);color:var(--color-text);cursor:default;}
 .fdy-input[readonly]:hover,.fdy-textarea[readonly]:hover{border-color:var(--color-border);}
 .fdy-input[readonly]:focus-visible,.fdy-textarea[readonly]:focus-visible{border-color:var(--color-border-strong);box-shadow:none;}
+/* Numbers (#44): the user agent draws its own spin buttons inside the field, in OS widget colours no
+   theme reaches — on a dark surface they read as a light-grey artefact glued to a themed field, and
+   it is the only unthemed control on the page. Removed so .fdy-input looks the same whatever its
+   type. `appearance:textfield` is the Firefox half, the pseudo-element the Blink/WebKit half; both
+   are needed. This trades away the mouse-only increment — arrow keys on a focused number input still
+   work, and [data-fdy-number] gives the affordance back on the kit's terms. */
+.fdy-input[type="number"]{appearance:textfield;-webkit-appearance:textfield;}
+.fdy-input[type="number"]::-webkit-outer-spin-button,.fdy-input[type="number"]::-webkit-inner-spin-button{appearance:none;-webkit-appearance:none;margin:0;}
 .fdy-input--error,.fdy-input[aria-invalid="true"],.fdy-textarea[aria-invalid="true"]{border-color:var(--color-danger);}
 .fdy-input--error:focus,.fdy-input[aria-invalid="true"]:focus,.fdy-textarea[aria-invalid="true"]:focus{border-color:var(--color-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
 .fdy-help{font-size:var(--text-xs);color:var(--color-text-muted);}

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);}
@@ -860,6 +891,12 @@ a { color: var(--color-primary); }
 .fdy-input-group__btn:hover{background:var(--color-surface-3);color:var(--color-text);}
 .fdy-input-group__btn:focus-visible{outline:none;color:var(--color-text);box-shadow:inset 0 0 0 2px var(--color-primary);}
 .fdy-input-group__btn svg{display:block;width:1.1rem;height:1.1rem;}
+/* Leading action button (the "−" of a number stepper): the divider belongs on the other side. */
+.fdy-input-group__btn:first-child{border-left:0;border-right:var(--bw) solid var(--color-border);}
+/* At a bound, or on a disabled/read-only field, the button must look as inert as it acts — same dim
+   + not-allowed as .fdy-input:disabled. :hover still matches a disabled button, so it is withdrawn. */
+.fdy-input-group__btn:disabled{opacity:.5;cursor:not-allowed;}
+.fdy-input-group__btn:disabled:hover{background:var(--color-surface-2);color:var(--color-text-muted);}
 /* Error state must win over the neutralizing rules above — promote to the wrapper. */
 .fdy-input-group:has(.fdy-input--error),.fdy-input-group:has(.fdy-combo--error),.fdy-input-group:has([aria-invalid="true"]){border-color:var(--color-danger);}
 .fdy-input-group:has(.fdy-input--error):focus-within,.fdy-input-group:has(.fdy-combo--error):focus-within,.fdy-input-group:has([aria-invalid="true"]):focus-within{border-color:var(--color-danger);box-shadow:inset 0 1px 2px rgba(16,14,30,.04),0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
@@ -884,6 +921,14 @@ fieldset.fdy-field>legend{padding:0;float:none;}
 .fdy-input[readonly],.fdy-textarea[readonly]{background:var(--color-surface-2);border-color:var(--color-border);color:var(--color-text);cursor:default;}
 .fdy-input[readonly]:hover,.fdy-textarea[readonly]:hover{border-color:var(--color-border);}
 .fdy-input[readonly]:focus-visible,.fdy-textarea[readonly]:focus-visible{border-color:var(--color-border-strong);box-shadow:none;}
+/* Numbers (#44): the user agent draws its own spin buttons inside the field, in OS widget colours no
+   theme reaches — on a dark surface they read as a light-grey artefact glued to a themed field, and
+   it is the only unthemed control on the page. Removed so .fdy-input looks the same whatever its
+   type. `appearance:textfield` is the Firefox half, the pseudo-element the Blink/WebKit half; both
+   are needed. This trades away the mouse-only increment — arrow keys on a focused number input still
+   work, and [data-fdy-number] gives the affordance back on the kit's terms. */
+.fdy-input[type="number"]{appearance:textfield;-webkit-appearance:textfield;}
+.fdy-input[type="number"]::-webkit-outer-spin-button,.fdy-input[type="number"]::-webkit-inner-spin-button{appearance:none;-webkit-appearance:none;margin:0;}
 .fdy-input--error,.fdy-input[aria-invalid="true"],.fdy-textarea[aria-invalid="true"]{border-color:var(--color-danger);}
 .fdy-input--error:focus,.fdy-input[aria-invalid="true"]:focus,.fdy-textarea[aria-invalid="true"]:focus{border-color:var(--color-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
 .fdy-help{font-size:var(--text-xs);color:var(--color-text-muted);}

package/dist/freeday.js

@@ -2166,6 +2166,111 @@
   window.FreedayMenu = { init: initMenu, initAll: initAll };
 })();
 
+/* Freeday — number field enhancer (optional, zero-dependency).
+ * Gives a native <input type="number"> its increment/decrement affordance back, on the kit's terms:
+ * .fdy-input hides the user agent's own spin buttons (unthemeable OS widgets), so this puts two real
+ * buttons in an .fdy-input-group instead. No new block — the group already owns the shared border,
+ * :focus-within ring and error promotion.
+ *
+ * Markup contract:
+ *  <div class="fdy-input-group" data-fdy-number>
+ *    <button type="button" class="fdy-input-group__btn" data-fdy-number-step="-1"
+ *            tabindex="-1" aria-label="Kurangi">−</button>
+ *    <input class="fdy-input" type="number" min="0" max="10" step="1" value="1" aria-label="…">
+ *    <button type="button" class="fdy-input-group__btn" data-fdy-number-step="1"
+ *            tabindex="-1" aria-label="Tambah">+</button>
+ *  </div>
+ *
+ * No custom event: the input is the source of truth, so stepping dispatches native bubbling `input`
+ * and `change`. v-model / onChange / @bind bind to the input directly, exactly as they would without
+ * this enhancer.
+ *
+ * The buttons are deliberately OUT of the tab order (tabindex="-1"): the input is already focusable
+ * and ArrowUp/ArrowDown already step it, so two extra tab stops per field would cost every keyboard
+ * user something and buy nothing. They keep an aria-label, so pointer and browse-mode users still
+ * get a named control.
+ */
+(function () {
+  'use strict';
+
+  function initNumber(root) {
+    if (root.dataset.fdyNumberReady === '1') return;
+
+    var input = root.querySelector('input[type="number"]');
+    var buttons = Array.prototype.slice.call(root.querySelectorAll('[data-fdy-number-step]'));
+    if (!input || !buttons.length) return;
+    root.dataset.fdyNumberReady = '1';
+
+    /* step="any" means there is no defined increment, and stepUp()/stepDown() throw InvalidStateError
+       on such a field. A stepper cannot express it, so the buttons stay visibly disabled rather than
+       failing on click. Read live, not captured: `step` is one of the attributes watched below. */
+    function stepless() {
+      return (input.getAttribute('step') || '').toLowerCase() === 'any';
+    }
+
+    function frozen() {
+      return stepless() || input.disabled || input.readOnly;
+    }
+
+    /* Bounds are read from the input, never recomputed: stepUp()/stepDown() already clamp to
+       min/max/step, so these two only decide whether the button tells the truth about what it does. */
+    function atLimit(direction) {
+      var bound = direction > 0 ? input.max : input.min;
+      if (bound === '' || input.value === '') return false;
+      var value = Number(input.value);
+      var limit = Number(bound);
+      if (isNaN(value) || isNaN(limit)) return false;
+      return direction > 0 ? value >= limit : value <= limit;
+    }
+
+    function sync() {
+      buttons.forEach(function (btn) {
+        var direction = Number(btn.getAttribute('data-fdy-number-step')) < 0 ? -1 : 1;
+        btn.disabled = frozen() || atLimit(direction);
+      });
+    }
+
+    buttons.forEach(function (btn) {
+      btn.addEventListener('click', function () {
+        if (frozen()) return;
+        if (Number(btn.getAttribute('data-fdy-number-step')) < 0) input.stepDown();
+        else input.stepUp();
+        /* The value changed without the user typing, so say so the way the platform does — frameworks
+           listen to these, not to a kit-specific event. */
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+        sync();
+      });
+    });
+
+    input.addEventListener('input', sync);
+    input.addEventListener('change', sync);
+    /* Typing is not the only thing that moves a bound: a framework flips `disabled` or recomputes
+       `max` without any event firing, and a button that still looks enabled but no longer does
+       anything is the lie this state machine exists to avoid. */
+    new MutationObserver(sync).observe(input, {
+      attributes: true,
+      attributeFilter: ['disabled', 'readonly', 'min', 'max', 'step'],
+    });
+    sync();
+  }
+
+  function initAll(context) {
+    var root = context || document;
+    /* root included: querySelectorAll never matches its own root, and a framework ref often sits ON the widget. */
+    if (root.matches && root.matches('[data-fdy-number]')) initNumber(root);
+    Array.prototype.forEach.call(root.querySelectorAll('[data-fdy-number]'), initNumber);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayNumber = { init: initNumber, initAll: initAll };
+})();
+
 /* Freeday — popover positioning helper (optional, zero-dependency).
  * Lifts a dropdown panel into the top layer via the native Popover API so it escapes ANY
  * ancestor overflow clip (a .fdy-card with overflow:hidden, an app-shell main with

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.26.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.26.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",
+    "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);}

package/src/components/input-group.css

@@ -17,6 +17,12 @@
 .fdy-input-group__btn:hover{background:var(--color-surface-3);color:var(--color-text);}
 .fdy-input-group__btn:focus-visible{outline:none;color:var(--color-text);box-shadow:inset 0 0 0 2px var(--color-primary);}
 .fdy-input-group__btn svg{display:block;width:1.1rem;height:1.1rem;}
+/* Leading action button (the "−" of a number stepper): the divider belongs on the other side. */
+.fdy-input-group__btn:first-child{border-left:0;border-right:var(--bw) solid var(--color-border);}
+/* At a bound, or on a disabled/read-only field, the button must look as inert as it acts — same dim
+   + not-allowed as .fdy-input:disabled. :hover still matches a disabled button, so it is withdrawn. */
+.fdy-input-group__btn:disabled{opacity:.5;cursor:not-allowed;}
+.fdy-input-group__btn:disabled:hover{background:var(--color-surface-2);color:var(--color-text-muted);}
 /* Error state must win over the neutralizing rules above — promote to the wrapper. */
 .fdy-input-group:has(.fdy-input--error),.fdy-input-group:has(.fdy-combo--error),.fdy-input-group:has([aria-invalid="true"]){border-color:var(--color-danger);}
 .fdy-input-group:has(.fdy-input--error):focus-within,.fdy-input-group:has(.fdy-combo--error):focus-within,.fdy-input-group:has([aria-invalid="true"]):focus-within{border-color:var(--color-danger);box-shadow:inset 0 1px 2px rgba(16,14,30,.04),0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}

package/src/components/input.css

@@ -18,6 +18,14 @@ fieldset.fdy-field>legend{padding:0;float:none;}
 .fdy-input[readonly],.fdy-textarea[readonly]{background:var(--color-surface-2);border-color:var(--color-border);color:var(--color-text);cursor:default;}
 .fdy-input[readonly]:hover,.fdy-textarea[readonly]:hover{border-color:var(--color-border);}
 .fdy-input[readonly]:focus-visible,.fdy-textarea[readonly]:focus-visible{border-color:var(--color-border-strong);box-shadow:none;}
+/* Numbers (#44): the user agent draws its own spin buttons inside the field, in OS widget colours no
+   theme reaches — on a dark surface they read as a light-grey artefact glued to a themed field, and
+   it is the only unthemed control on the page. Removed so .fdy-input looks the same whatever its
+   type. `appearance:textfield` is the Firefox half, the pseudo-element the Blink/WebKit half; both
+   are needed. This trades away the mouse-only increment — arrow keys on a focused number input still
+   work, and [data-fdy-number] gives the affordance back on the kit's terms. */
+.fdy-input[type="number"]{appearance:textfield;-webkit-appearance:textfield;}
+.fdy-input[type="number"]::-webkit-outer-spin-button,.fdy-input[type="number"]::-webkit-inner-spin-button{appearance:none;-webkit-appearance:none;margin:0;}
 .fdy-input--error,.fdy-input[aria-invalid="true"],.fdy-textarea[aria-invalid="true"]{border-color:var(--color-danger);}
 .fdy-input--error:focus,.fdy-input[aria-invalid="true"]:focus,.fdy-textarea[aria-invalid="true"]:focus{border-color:var(--color-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
 .fdy-help{font-size:var(--text-xs);color:var(--color-text-muted);}