@cahyo-dimas/freeday 3.1.0 → 3.2.0

package/CHANGELOG.md

@@ -9,6 +9,76 @@ benar. Perubahan seperti itu ditulis di bawah `### Changed: BREAKING (types)`
 lama → tipe baru, dan cara menyempitkannya — bukan di bawah `### Added`, betapapun aditifnya dari
 sisi kit.
 
+## [3.2.0] - 2026-08-28
+
+**Dua cacat yang tak bisa di-screenshot, dan satu komponen yang akhirnya muat di panel 420px.**
+Ketiganya datang dari layar sungguhan. Yang menyatukannya: tak satu pun terlihat di DOM atau di
+stylesheet — yang satu hanya bergerak, yang satu hanya terbaca, yang satu hanya muat atau tidak.
+
+### Fixed
+- **Strip tab tak lagi menggulung vertikal, dan garis aktifnya kini benar-benar 2px** (`#052`, dari
+  `IDU_AI_DOC_SAPB1_CLIENT`). Dilaporkan pengguna yang bisa merasakannya tapi tak bisa memotretnya:
+  *"panel tab ini menggulung vertikal, susah di-screenshot."* Memang begitu — **1px**.
+  `overflow-x:auto` tak bisa meminta satu sumbu saja (CSS Overflow §3: sumbu lain yang `visible`
+  ikut jadi `auto`), jadi 1px yang digantungkan `margin-bottom:-1px` milik tab — yang ada justru
+  untuk mengangkat underline 2px-nya ke atas garis strip — berubah jadi scrollport sungguhan yang
+  memakan gestur trackpad. Yang tak dilaporkan siapa pun, dan hanya piksel yang bisa membedakannya:
+  scroll container **memotong** keturunannya di padding box, jadi separuh bawah underline itu ikut
+  terpotong. Underline aktif terkirim **1px** selama negative margin itu ada — CSS-nya bilang 2px,
+  DOM-nya bilang 2px, layarnya bilang 1. Garis strip kini `box-shadow` inset (dicat di kotaknya,
+  bukan di konten yang menggulung), dan tab tak lagi menggantung. **Bagi konsumen yang menyembunyikan
+  garis itu:** `border-bottom:0` tak lagi menjangkaunya, pakai `box-shadow:none`. Sapuan ke seluruh
+  scroller lain (`.fdy-table-scroll`, `.fdy-nav--horizontal`, `.fdy-carousel__viewport`) bersih —
+  `.fdy-tabs__list` satu-satunya.
+- **`--color-text-subtle` gelap naik ke `slate-450`** (`#053` §2, dari
+  `IDU_AI_DOC_SAPB1_ADDON_DESKTOP_APP`). 4.02:1 di `--color-surface` gelap, di bawah AA, dan yang
+  memakainya bukan cuma app: **placeholder kit sendiri** (`.fdy-datepicker__value--placeholder` dan
+  sebelas `.fdy-cal__day.is-outside` dalam satu kalender). Yang menarik, tokennya tak melanggar
+  kontraknya — gerbang kontras memang menguji tier ini di **3:1 sebagai non-teks**; yang salah
+  adalah kit memakai tier dekoratif untuk teks yang berutang AA. Sekarang **4.88:1** di
+  `--color-surface`, yaitu permukaan yang dicat setiap `.fdy-input`, jadi placeholder lolos di tempat
+  placeholder benar-benar duduk. Light tak disentuh (sudah 4.69). **AA di ketiga permukaan gelap
+  sengaja tidak dikejar**: mencapainya butuh nada sejengkal dari `slate-400`, yang *adalah*
+  `--color-text-muted`, dan subtle yang sama dengan muted bukan tier lagi.
+
+### Added
+- **`FdyCfl` punya layout sempit, tanpa satu pun prop baru** (`#053` §1). Di bawah **30rem**,
+  barisnya menata diri sebagai list item: kolom pertama jadi judul, sisanya satu baris detail di
+  bawahnya, `<thead>` dilepas. **Container query, bukan media query** — dialog bukan viewport, dan
+  komponen yang sama adalah tabel di halaman desktop sekaligus daftar di dalam panel 420px yang
+  ditambatkan di SAP Business One. Kontrak datanya tak berubah: `columns` sudah menyebut kolom mana
+  yang identitas. Keempat stack dapat sekaligus, karena yang bekerja CSS.
+- **`size="cfl"` di `FdyModal`** (`#053` §4), Vue · React · Blazor. `.fdy-modal--cfl` (46rem) sudah
+  ada di CSS sejak lama tapi tak terjangkau dari adapter mana pun; `FdyCfl` memasang kelasnya
+  sendiri, jadi celah ini hanya muncul bagi yang membangun dialog sendiri selebar itu. **Bukan
+  breaking** meski union publiknya melebar: kebijakan 2.1.0 menyasar tipe di posisi *keluaran*
+  (handler yang menerima nilai lebih lebar); ini masukan, dan pemanggil yang mengirim nilai lama
+  tetap valid.
+
+### Added: guards
+- `browser/tabs-strip.mjs` — nol overflow vertikal, underline 2px terbaca dari **piksel** yang
+  benar-benar dicat, dan gulir horizontal yang tetap hidup. Diverifikasi mutasi: dengan aturan 3.1.0
+  dikembalikan, 2 dari 3 merah.
+- `browser/cfl-narrow.mjs` — menjalankan `FdyCfl.vue` sungguhan di viewport **420px**, lebar
+  konsumen yang melaporkannya, karena container query menanyakan lebar *dialog* dan hanya dialog
+  sungguhan yang punya lebar.
+- `test/contrast.test.mjs` dapat pasangan baru khusus placeholder, terpisah dari tier dekoratifnya,
+  jadi kedua paruh keputusan itu dijaga: gagal di 4.02 kalau tokennya dikembalikan, dan tetap 3:1
+  untuk chevron/separator.
+
+### Docs
+- `COMPONENTS.md`: kontrak override garis strip tab, layout sempit `FdyCfl`, dan `size="cfl"`.
+- `USAGE.md`: `.fdy-text-subtle` akhirnya masuk tabel peran teks — tabel itu berhenti di "muted",
+  padahal kelasnya publik — beserta kontrak kontrasnya di kedua tema.
+
+### Tidak diperbaiki, dan alasannya
+- **`--color-text-muted` 3.94:1 di `--color-surface-raised`** (`#053` §3) **tidak reproduksi.** Di
+  `soft`, `--color-surface-raised` *identik* dengan `--color-surface` (7.28:1); di `glass`,
+  komposit terburuknya 6.70:1; dan muted tak pernah turun di bawah **5.46:1** di mana pun dalam ramp
+  gelap. Angka 3.94 itu sendiri nyata: ia persis `slate-400` di atas `slate-700`, yaitu
+  `--color-border-strong` — token border yang tak dipakai komponen mana pun sebagai latar. Item ini
+  dibiarkan **open** dengan pertanyaan balik ke pelapor, bukan ditutup sebagai withdrawn.
+
 ## [3.1.0] - 2026-08-27
 
 **Dua cacat lebar yang dilaporkan dari layar sungguhan, dan keduanya tak kelihatan di DOM.** Markup-nya

package/COMPONENTS.md

@@ -640,6 +640,15 @@ child `<ul>` is a branch, one without is a leaf. Needs `freeday-cascade.js`.
 ## Choose-from-list (CFL) — `data-fdy-cfl`
 > **Typed wrapper: `<FdyCfl>`**. Vue (`v-model`) · React (`value`/`onChange`) · Blazor (`@bind-Value`). In those stacks use the wrapper; the markup below is for stacks without an adapter (and is what the wrapper renders).
 
+> **Narrow: the results stack, and there is no prop for it** (`#053`). Under a `.fdy-cfl__results`
+> narrower than **30rem** — a docked add-on panel, a phone — the rows lay out as list items instead
+> of table cells: the first column becomes the title, the remaining columns become one detail line
+> under it, and `<thead>` is dropped. It is a **container** query, so what decides is the dialog's
+> width and not the viewport's; the same component is a table on a desktop page and a list inside a
+> 420px panel, with no flag to pass and nothing to keep in sync. Your data contract does not change:
+> `columns`, `display` and `rowKey` already say which column is the identity. If a screen genuinely
+> needs columns at that width, override the `@container` block — do not widen the dialog.
+
 ### Props — `<FdyCfl>`
 
 Four of these are required and carry the whole component: `fetchPage`, `columns`, `display`,
@@ -1496,6 +1505,16 @@ APG tabs: ←/→, Home/End, roving tabindex. Needs `freeday-tabs.js`.
 `.fdy-tabs__tab` marks its active state from **`aria-selected="true"` or `aria-current="page"`**,
 so the same look serves routed sub-navigation built from plain links. See the note under Nav.
 
+> **The strip's line is an inset `box-shadow`, not a `border-bottom`** (`#052`; through 3.1.0 it
+> was a border, so an app upgrading past that release changes the override with it). To
+> remove it — a strip inside a header that draws its own rule — override `box-shadow:none`;
+> `border-bottom:0` no longer reaches it. The swap is not cosmetic: `.fdy-tabs__list` scrolls
+> horizontally, a scroll container clips its descendants to the padding box, and the tab's
+> `margin-bottom:-1px` (which lifted its 2px underline onto that border) therefore pushed the
+> underline's lower half into the clip — the underline painted 1px, and the strip carried 1px of
+> vertical scroll that ate trackpad gestures. A shadow paints on the box, not on the scrolled
+> content, so the line needs no overhang to sit under. Guarded in `browser/tabs-strip.mjs`.
+
 ```html
 <div class="fdy-tabs" data-fdy-tabs>
   <div class="fdy-tabs__list" role="tablist" aria-label="Invoice detail">
@@ -1521,7 +1540,7 @@ so the same look serves routed sub-navigation built from plain links. See the no
 | `open` | `boolean` | Controlled: your state decides. The wrapper cancels the native `cancel` event so the DOM can never disagree with it. |
 | `title` | `string` (Vue) · `ReactNode` | Names the dialog through `aria-labelledby`. Vue also offers a `title` slot when the heading needs markup. |
 | `onClose` | `() => void` | React. Vue emits `close`. Fires from Escape, a backdrop click and the ×, all three of which exist only under `dismissible`. |
-| `size?` | `'sm' \| 'md' \| 'lg' \| 'wide'` | Dialog width. |
+| `size?` | `'sm' \| 'md' \| 'lg' \| 'wide' \| 'cfl'` | Dialog width. `cfl` is the 46rem choose-from-list width; `FdyCfl` applies it itself, so pass it only for a dialog you build at that width. |
 | `dismissible?` | `boolean` | Whether Escape, the backdrop and the × can close it. Off means the reader has to take a footer action, which is the point of a blocking confirm. |
 | `closeLabel?` | `string` | Accessible name for the × button. Default `Close`. |
 | `footer?` | `ReactNode` | React. Vue: the `footer` slot. |

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-v3.1.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.1.0)
+[![Release](https://img.shields.io/badge/release-v3.2.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.2.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-v3.1.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.1.0)
+[![Release](https://img.shields.io/badge/release-v3.2.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.2.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

@@ -23,10 +23,20 @@ the single biggest cause of "flat grey mush". Pick the role, not the size:
 | Card / row title | `.fdy-title-card` (or `.fdy-card__title`) | A title inside a card or list row (`<h3>`). |
 | Body | *(default)* | Running text. |
 | Muted / caption | `.fdy-text-muted`, `.fdy-text-caption` | Secondary text, timestamps, help. |
+| Subtle | `.fdy-text-subtle` | The faintest ink. Placeholders and decoration — chevrons, separators, out-of-month days. **Read the contract below before using it for a sentence.** |
 
 Everything else is body. If you reach for a fourth title size, you probably need a section, not a
 font size.
 
+**`--color-text-subtle` is not a third body-text tier, and dark is where that bites.** It clears AA
+on `--color-surface` in both themes (light 4.69:1, dark 4.88:1) — which is what `.fdy-input` and
+`.fdy-textarea` paint, so a placeholder is safe. It clears AA on **nothing else**, in either theme:
+`--color-surface-3` reads 4.11:1 in light and 3.66:1 in dark. Nor will it ever: reaching 4.5 there
+needs a tone within a hair of `--color-text-muted`, and a subtle that equals muted is not a tier. So a small uppercase
+label, a card's second line, or anything a reader must actually read on a raised or tinted surface
+takes `--color-text-muted`. `test/contrast.test.mjs` holds both halves of that split, which is why
+the ramp cannot quietly drift into either mistake.
+
 
 ## Borders: two roles, two contrast contracts
 

package/adapters/blazor/FdyModal.razor.cs

@@ -19,7 +19,7 @@ public partial class FdyModal
     /// <summary>Optional footer (action buttons). Omitted entirely when null.</summary>
     [Parameter] public RenderFragment? FooterContent { get; set; }
 
-    /// <summary>Size modifier: <c>sm</c> | <c>md</c> | <c>lg</c> | <c>wide</c>.</summary>
+    /// <summary>Size modifier: <c>sm</c> | <c>md</c> | <c>lg</c> | <c>wide</c> | <c>cfl</c> (the 46rem choose-from-list width).</summary>
     [Parameter] public string? Size { get; set; }
 
     /// <summary>When true (default), Esc and a backdrop click dismiss the dialog and a close

package/adapters/react/components/FdyModal.tsx

@@ -13,7 +13,8 @@ export interface FdyModalProps {
   open: boolean;
   title: ReactNode;
   onClose: () => void;
-  size?: 'sm' | 'md' | 'lg' | 'wide';
+  /* 'cfl' is the choose-from-list width (46rem); see the Vue wrapper for why it was missing. */
+  size?: 'sm' | 'md' | 'lg' | 'wide' | 'cfl';
   dismissible?: boolean;
   /** aria-label for the × button. Default 'Close'. */
   closeLabel?: string;

package/adapters/vue/components/FdyModal.vue

@@ -16,7 +16,10 @@ import { computed, onMounted, useId, watch, type ComputedRef, type Ref, ref } fr
 const props = withDefaults(defineProps<{
   open: boolean;
   title: string;
-  size?: 'sm' | 'md' | 'lg' | 'wide';
+  /* 'cfl' is the width the choose-from-list dialog uses (46rem). It was reachable from the CSS
+     and from nowhere else until #053: FdyCfl sets the class itself, so the gap only ever showed up
+     when an app built its own dialog at that width and had to hand-write the class. */
+  size?: 'sm' | 'md' | 'lg' | 'wide' | 'cfl';
   dismissible?: boolean;
   /** aria-label for the × button. Default 'Close'. Blazor has had `CloseLabel` since it
    *  shipped; these two hard-coded the string, so a non-English app could not rename it. */

package/dist/freeday.bundle.css

@@ -323,7 +323,7 @@
   --color-surface-raised: var(--color-surface);
   --color-text: var(--slate-100);
   --color-text-muted: var(--slate-400);
-  --color-text-subtle: var(--slate-500);
+  --color-text-subtle: var(--slate-450);
   --color-on-brand: var(--slate-0);
   --color-border: var(--slate-800);
   --color-border-strong: var(--slate-700);
@@ -387,7 +387,7 @@
   --color-surface-raised: var(--color-surface);
   --color-text: var(--slate-100);
   --color-text-muted: var(--slate-400);
-  --color-text-subtle: var(--slate-500);
+  --color-text-subtle: var(--slate-450);
   --color-on-brand: var(--slate-0);
   --color-border: var(--slate-800);
   --color-border-strong: var(--slate-700);
@@ -1470,9 +1470,16 @@ a { color: var(--color-primary); }
 /* Search bar, single leading-icon field; Enter/typing filters the results. */
 .fdy-cfl__search{flex:none;padding:var(--space-4) var(--space-5);border-bottom:var(--bw) solid var(--color-border-muted);}
 
-/* Results, dense rows, sticky header, its own scroll region. */
-.fdy-cfl__results{overflow:auto;max-height:min(24rem,50vh);}
+/* Results, dense rows, sticky header, its own scroll region.
+ *
+ * `container-type: inline-size` makes this box the query container for the stacked layout below.
+ * Safe here and nowhere near free in general: a size container stops contributing intrinsic inline
+ * size, which is what made `.fdy-stats--inline` collapse to three zero tracks in 3.1.0. This box
+ * takes its width from the dialog (`min(46rem, 100vw - …)`, an explicit width) and already scrolls
+ * its own content, so it never sized to the table to begin with. */
+.fdy-cfl__results{container:fdy-cfl / inline-size;overflow:auto;max-height:min(24rem,50vh);}
 .fdy-cfl__results .fdy-table th{position:sticky;top:0;z-index:1;}
+
 .fdy-cfl__row{cursor:pointer;}
 .fdy-cfl__row:hover{background:var(--color-surface-2);}
 .fdy-cfl__row:focus-visible{outline:none;background:var(--color-primary-soft);box-shadow:inset 2px 0 0 var(--color-primary);}
@@ -1490,6 +1497,54 @@ a { color: var(--color-primary); }
 .fdy-cfl__count{font-size:var(--text-sm);color:var(--color-text-muted);}
 .fdy-cfl__actions{display:flex;gap:var(--space-2);}
 
+/* Narrow: the same rows as list items, not table cells (#053).
+ *
+ * A 420px add-on panel gives this dialog ~372px. A three- or four-column master-data table in that
+ * space either squeezes every column below legibility or scrolls on both axes, in a dialog whose
+ * whole job is "search, look, click one". So the first cell becomes the title and the rest become
+ * one detail line under it — the shape a picker takes when it is narrow.
+ *
+ * A CONTAINER query, not a media query: the dialog is not the viewport. The same component is wide
+ * on a desktop page and narrow inside a docked panel, and only the container knows which.
+ *
+ * No ARIA roles come with this, and that is a MEASURED decision rather than an omission. The
+ * received wisdom from the responsive-table era is that `display:block` on a table box drops its
+ * implicit role; explicit `role="table"/"row"/"cell"` were written into all four stacks here on
+ * that belief and then taken out again, because Chrome's own accessibility tree says otherwise:
+ * with the rows at `display:flex`, stripping every `role` attribute leaves
+ * `table → row → cell` intact (Chromium 133; only `rowgroup`, which associates nothing, is lost).
+ * Redundant ARIA is what the kit's own rule calls worse than none, so the guard asserts the
+ * OUTCOME — that a stacked row is still a row in the a11y tree — and stays silent about how.
+ * `browser/cfl-narrow.mjs` is where a future engine that does dissolve them shows up as red.
+ *
+ * Column headers ARE a real loss here, and a deliberate one: `<thead>` is hidden, because a header
+ * row that costs a third of the width buys nothing when each row is labelled by its own title. */
+@container fdy-cfl (max-width: 30rem){
+  .fdy-cfl__results .fdy-table,
+  .fdy-cfl__results .fdy-table tbody{display:block;width:100%;}
+  .fdy-cfl__results .fdy-table thead{display:none;}
+  .fdy-cfl__row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--bw) solid var(--color-border-muted);}
+  .fdy-cfl__results .fdy-table tbody tr:last-child{border-bottom:0;}
+  .fdy-cfl__row > td{display:block;padding:0;border:0;}
+  /* The title takes the whole first line, which is what pushes every remaining cell onto the second
+     one — no selector has to know how many columns there are, or which of them is last. */
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check),
+  .fdy-cfl__row > .fdy-cfl__check + td{font-weight:var(--weight-semibold);color:var(--color-text);}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check){flex:0 0 100%;}
+  /* Multi-select: the checkbox shares line one with the title, so the title claims the rest of it. */
+  .fdy-cfl__row > .fdy-cfl__check + td{flex:1 0 calc(100% - var(--space-6));}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td,
+  .fdy-cfl__row > .fdy-cfl__check + td ~ td{font-size:var(--text-xs);color:var(--color-text-muted);}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td:empty,
+  .fdy-cfl__row > .fdy-cfl__check + td ~ td:empty{display:none;}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td::before,
+  .fdy-cfl__row > .fdy-cfl__check + td ~ td::before{content:"·";margin-right:var(--space-2);color:var(--color-text-subtle);}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) + td::before,
+  .fdy-cfl__row > .fdy-cfl__check + td + td::before{content:none;}
+  /* The checkbox keeps its own line position beside the title rather than above it. */
+  .fdy-cfl__row > .fdy-cfl__check{flex:none;width:auto;align-self:center;}
+}
+
 /* Freeday. Charts (zero-dependency CSS/SVG, rendered by freeday-chart.js).
  * Colour comes from --fdy-chart (a token, set inline by the renderer from data-fdy-color). */
 
@@ -2428,9 +2483,24 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-table td>.fdy-input,.fdy-table td>.fdy-textarea,.fdy-table td>.fdy-combo,.fdy-table td>.fdy-input-group,.fdy-table td>.fdy-datepicker,.fdy-table td>.fdy-timepicker{min-width:7rem;}
 
 /* Freeday. Tabs (WAI-ARIA APG) */
-/* position:relative, containing block for out-of-flow content in the tabs (see base.css). */
-.fdy-tabs__list{position:relative;display:flex;gap:var(--space-1);border-bottom:var(--bw) solid var(--color-border);overflow-x:auto;}
-.fdy-tabs__tab{appearance:none;border:0;background:transparent;cursor:pointer;white-space:nowrap;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);padding:var(--space-3) var(--space-4);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
+/* position:relative, containing block for out-of-flow content in the tabs (see base.css).
+ *
+ * The strip's own line is an INSET SHADOW, not a border, and the tab carries no negative margin
+ * (#052). The pair those two replace — `border-bottom` here plus `margin-bottom:-1px` on the tab,
+ * to lift the active tab's 2px underline onto the strip's 1px line so the two read as one — was
+ * broken by the `overflow-x:auto` beside it, in two ways at once:
+ *   1. CSS Overflow §3 gives no way to scroll one axis alone: `overflow-y` computes from `visible`
+ *      to `auto` because the other axis is not visible, so the 1px the tab hangs below the content
+ *      box became a real scrollport. Measured 47 client / 48 scroll, `scrollTop` settling at 1 —
+ *      invisible in a screenshot, and a trackpad gesture over the strip is eaten by it.
+ *   2. A scroll container clips its descendants to the padding box, so the pixel the negative
+ *      margin pushed out was clipped away and the strip's own line painted in its place: the
+ *      active underline rendered ONE pixel of primary, never the two it asks for.
+ * An inset shadow paints on the box, not on the scrolled content, so the line stays put while the
+ * tabs scroll sideways, and the tab's own border-bottom paints over it — same look, no overflow.
+ * To hide the line, override `box-shadow`, not `border-bottom` (guarded in browser/tabs-strip.mjs). */
+.fdy-tabs__list{position:relative;display:flex;gap:var(--space-1);box-shadow:inset 0 calc(var(--bw) * -1) 0 var(--color-border);overflow-x:auto;}
+.fdy-tabs__tab{appearance:none;border:0;background:transparent;cursor:pointer;white-space:nowrap;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);padding:var(--space-3) var(--space-4);border-bottom:2px solid transparent;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-tabs__tab:hover{color:var(--color-text);}
 .fdy-tabs__tab:disabled,.fdy-tabs__tab[aria-disabled="true"]{opacity:.5;cursor:not-allowed;color:var(--color-text-muted);}
 .fdy-tabs__tab:disabled:hover,.fdy-tabs__tab[aria-disabled="true"]:hover{color:var(--color-text-muted);}

package/dist/freeday.css

@@ -592,9 +592,16 @@ a { color: var(--color-primary); }
 /* Search bar, single leading-icon field; Enter/typing filters the results. */
 .fdy-cfl__search{flex:none;padding:var(--space-4) var(--space-5);border-bottom:var(--bw) solid var(--color-border-muted);}
 
-/* Results, dense rows, sticky header, its own scroll region. */
-.fdy-cfl__results{overflow:auto;max-height:min(24rem,50vh);}
+/* Results, dense rows, sticky header, its own scroll region.
+ *
+ * `container-type: inline-size` makes this box the query container for the stacked layout below.
+ * Safe here and nowhere near free in general: a size container stops contributing intrinsic inline
+ * size, which is what made `.fdy-stats--inline` collapse to three zero tracks in 3.1.0. This box
+ * takes its width from the dialog (`min(46rem, 100vw - …)`, an explicit width) and already scrolls
+ * its own content, so it never sized to the table to begin with. */
+.fdy-cfl__results{container:fdy-cfl / inline-size;overflow:auto;max-height:min(24rem,50vh);}
 .fdy-cfl__results .fdy-table th{position:sticky;top:0;z-index:1;}
+
 .fdy-cfl__row{cursor:pointer;}
 .fdy-cfl__row:hover{background:var(--color-surface-2);}
 .fdy-cfl__row:focus-visible{outline:none;background:var(--color-primary-soft);box-shadow:inset 2px 0 0 var(--color-primary);}
@@ -612,6 +619,54 @@ a { color: var(--color-primary); }
 .fdy-cfl__count{font-size:var(--text-sm);color:var(--color-text-muted);}
 .fdy-cfl__actions{display:flex;gap:var(--space-2);}
 
+/* Narrow: the same rows as list items, not table cells (#053).
+ *
+ * A 420px add-on panel gives this dialog ~372px. A three- or four-column master-data table in that
+ * space either squeezes every column below legibility or scrolls on both axes, in a dialog whose
+ * whole job is "search, look, click one". So the first cell becomes the title and the rest become
+ * one detail line under it — the shape a picker takes when it is narrow.
+ *
+ * A CONTAINER query, not a media query: the dialog is not the viewport. The same component is wide
+ * on a desktop page and narrow inside a docked panel, and only the container knows which.
+ *
+ * No ARIA roles come with this, and that is a MEASURED decision rather than an omission. The
+ * received wisdom from the responsive-table era is that `display:block` on a table box drops its
+ * implicit role; explicit `role="table"/"row"/"cell"` were written into all four stacks here on
+ * that belief and then taken out again, because Chrome's own accessibility tree says otherwise:
+ * with the rows at `display:flex`, stripping every `role` attribute leaves
+ * `table → row → cell` intact (Chromium 133; only `rowgroup`, which associates nothing, is lost).
+ * Redundant ARIA is what the kit's own rule calls worse than none, so the guard asserts the
+ * OUTCOME — that a stacked row is still a row in the a11y tree — and stays silent about how.
+ * `browser/cfl-narrow.mjs` is where a future engine that does dissolve them shows up as red.
+ *
+ * Column headers ARE a real loss here, and a deliberate one: `<thead>` is hidden, because a header
+ * row that costs a third of the width buys nothing when each row is labelled by its own title. */
+@container fdy-cfl (max-width: 30rem){
+  .fdy-cfl__results .fdy-table,
+  .fdy-cfl__results .fdy-table tbody{display:block;width:100%;}
+  .fdy-cfl__results .fdy-table thead{display:none;}
+  .fdy-cfl__row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--bw) solid var(--color-border-muted);}
+  .fdy-cfl__results .fdy-table tbody tr:last-child{border-bottom:0;}
+  .fdy-cfl__row > td{display:block;padding:0;border:0;}
+  /* The title takes the whole first line, which is what pushes every remaining cell onto the second
+     one — no selector has to know how many columns there are, or which of them is last. */
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check),
+  .fdy-cfl__row > .fdy-cfl__check + td{font-weight:var(--weight-semibold);color:var(--color-text);}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check){flex:0 0 100%;}
+  /* Multi-select: the checkbox shares line one with the title, so the title claims the rest of it. */
+  .fdy-cfl__row > .fdy-cfl__check + td{flex:1 0 calc(100% - var(--space-6));}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td,
+  .fdy-cfl__row > .fdy-cfl__check + td ~ td{font-size:var(--text-xs);color:var(--color-text-muted);}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td:empty,
+  .fdy-cfl__row > .fdy-cfl__check + td ~ td:empty{display:none;}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td::before,
+  .fdy-cfl__row > .fdy-cfl__check + td ~ td::before{content:"·";margin-right:var(--space-2);color:var(--color-text-subtle);}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) + td::before,
+  .fdy-cfl__row > .fdy-cfl__check + td + td::before{content:none;}
+  /* The checkbox keeps its own line position beside the title rather than above it. */
+  .fdy-cfl__row > .fdy-cfl__check{flex:none;width:auto;align-self:center;}
+}
+
 /* Freeday. Charts (zero-dependency CSS/SVG, rendered by freeday-chart.js).
  * Colour comes from --fdy-chart (a token, set inline by the renderer from data-fdy-color). */
 
@@ -1550,9 +1605,24 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-table td>.fdy-input,.fdy-table td>.fdy-textarea,.fdy-table td>.fdy-combo,.fdy-table td>.fdy-input-group,.fdy-table td>.fdy-datepicker,.fdy-table td>.fdy-timepicker{min-width:7rem;}
 
 /* Freeday. Tabs (WAI-ARIA APG) */
-/* position:relative, containing block for out-of-flow content in the tabs (see base.css). */
-.fdy-tabs__list{position:relative;display:flex;gap:var(--space-1);border-bottom:var(--bw) solid var(--color-border);overflow-x:auto;}
-.fdy-tabs__tab{appearance:none;border:0;background:transparent;cursor:pointer;white-space:nowrap;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);padding:var(--space-3) var(--space-4);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
+/* position:relative, containing block for out-of-flow content in the tabs (see base.css).
+ *
+ * The strip's own line is an INSET SHADOW, not a border, and the tab carries no negative margin
+ * (#052). The pair those two replace — `border-bottom` here plus `margin-bottom:-1px` on the tab,
+ * to lift the active tab's 2px underline onto the strip's 1px line so the two read as one — was
+ * broken by the `overflow-x:auto` beside it, in two ways at once:
+ *   1. CSS Overflow §3 gives no way to scroll one axis alone: `overflow-y` computes from `visible`
+ *      to `auto` because the other axis is not visible, so the 1px the tab hangs below the content
+ *      box became a real scrollport. Measured 47 client / 48 scroll, `scrollTop` settling at 1 —
+ *      invisible in a screenshot, and a trackpad gesture over the strip is eaten by it.
+ *   2. A scroll container clips its descendants to the padding box, so the pixel the negative
+ *      margin pushed out was clipped away and the strip's own line painted in its place: the
+ *      active underline rendered ONE pixel of primary, never the two it asks for.
+ * An inset shadow paints on the box, not on the scrolled content, so the line stays put while the
+ * tabs scroll sideways, and the tab's own border-bottom paints over it — same look, no overflow.
+ * To hide the line, override `box-shadow`, not `border-bottom` (guarded in browser/tabs-strip.mjs). */
+.fdy-tabs__list{position:relative;display:flex;gap:var(--space-1);box-shadow:inset 0 calc(var(--bw) * -1) 0 var(--color-border);overflow-x:auto;}
+.fdy-tabs__tab{appearance:none;border:0;background:transparent;cursor:pointer;white-space:nowrap;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);padding:var(--space-3) var(--space-4);border-bottom:2px solid transparent;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-tabs__tab:hover{color:var(--color-text);}
 .fdy-tabs__tab:disabled,.fdy-tabs__tab[aria-disabled="true"]{opacity:.5;cursor:not-allowed;color:var(--color-text-muted);}
 .fdy-tabs__tab:disabled:hover,.fdy-tabs__tab[aria-disabled="true"]:hover{color:var(--color-text-muted);}

package/dist/freeday.tokens.css

@@ -322,7 +322,7 @@
   --color-surface-raised: var(--color-surface);
   --color-text: var(--slate-100);
   --color-text-muted: var(--slate-400);
-  --color-text-subtle: var(--slate-500);
+  --color-text-subtle: var(--slate-450);
   --color-on-brand: var(--slate-0);
   --color-border: var(--slate-800);
   --color-border-strong: var(--slate-700);
@@ -386,7 +386,7 @@
   --color-surface-raised: var(--color-surface);
   --color-text: var(--slate-100);
   --color-text-muted: var(--slate-400);
-  --color-text-subtle: var(--slate-500);
+  --color-text-subtle: var(--slate-450);
   --color-on-brand: var(--slate-0);
   --color-border: var(--slate-800);
   --color-border-strong: var(--slate-700);

package/docs/getting-started.md

@@ -191,7 +191,7 @@ live docs also have a copy button per component.
 ```bash
 npm i @cahyo-dimas/freeday
 ```
-Lands in `package.json` as `"@cahyo-dimas/freeday": "^3.1.0"` (public npm package). `dist/` is
+Lands in `package.json` as `"@cahyo-dimas/freeday": "^3.2.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": "3.1.0",
+  "version": "3.2.0",
   "description": "Freeday: token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",
@@ -92,7 +92,7 @@
   "scripts": {
     "build": "node tokens/build.mjs",
     "test": "node --test",
-    "test:browser": "node --test --test-concurrency=3 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 browser/text-override.mjs browser/control-heights.mjs browser/field-width.mjs browser/cfl-multi.mjs browser/crowding.mjs browser/over-dialog.mjs browser/chart-scale.mjs browser/overlay-stack.mjs browser/chart-a11y.mjs browser/app-shell.mjs browser/picker-states.mjs browser/harness-contract.mjs",
+    "test:browser": "node --test --test-concurrency=3 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 browser/text-override.mjs browser/control-heights.mjs browser/field-width.mjs browser/cfl-multi.mjs browser/crowding.mjs browser/over-dialog.mjs browser/chart-scale.mjs browser/overlay-stack.mjs browser/chart-a11y.mjs browser/app-shell.mjs browser/picker-states.mjs browser/tabs-strip.mjs browser/cfl-narrow.mjs browser/harness-contract.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/cfl.css

@@ -7,9 +7,16 @@
 /* Search bar, single leading-icon field; Enter/typing filters the results. */
 .fdy-cfl__search{flex:none;padding:var(--space-4) var(--space-5);border-bottom:var(--bw) solid var(--color-border-muted);}
 
-/* Results, dense rows, sticky header, its own scroll region. */
-.fdy-cfl__results{overflow:auto;max-height:min(24rem,50vh);}
+/* Results, dense rows, sticky header, its own scroll region.
+ *
+ * `container-type: inline-size` makes this box the query container for the stacked layout below.
+ * Safe here and nowhere near free in general: a size container stops contributing intrinsic inline
+ * size, which is what made `.fdy-stats--inline` collapse to three zero tracks in 3.1.0. This box
+ * takes its width from the dialog (`min(46rem, 100vw - …)`, an explicit width) and already scrolls
+ * its own content, so it never sized to the table to begin with. */
+.fdy-cfl__results{container:fdy-cfl / inline-size;overflow:auto;max-height:min(24rem,50vh);}
 .fdy-cfl__results .fdy-table th{position:sticky;top:0;z-index:1;}
+
 .fdy-cfl__row{cursor:pointer;}
 .fdy-cfl__row:hover{background:var(--color-surface-2);}
 .fdy-cfl__row:focus-visible{outline:none;background:var(--color-primary-soft);box-shadow:inset 2px 0 0 var(--color-primary);}
@@ -26,3 +33,51 @@
 .fdy-modal--cfl .fdy-modal__footer{justify-content:space-between;}
 .fdy-cfl__count{font-size:var(--text-sm);color:var(--color-text-muted);}
 .fdy-cfl__actions{display:flex;gap:var(--space-2);}
+
+/* Narrow: the same rows as list items, not table cells (#053).
+ *
+ * A 420px add-on panel gives this dialog ~372px. A three- or four-column master-data table in that
+ * space either squeezes every column below legibility or scrolls on both axes, in a dialog whose
+ * whole job is "search, look, click one". So the first cell becomes the title and the rest become
+ * one detail line under it — the shape a picker takes when it is narrow.
+ *
+ * A CONTAINER query, not a media query: the dialog is not the viewport. The same component is wide
+ * on a desktop page and narrow inside a docked panel, and only the container knows which.
+ *
+ * No ARIA roles come with this, and that is a MEASURED decision rather than an omission. The
+ * received wisdom from the responsive-table era is that `display:block` on a table box drops its
+ * implicit role; explicit `role="table"/"row"/"cell"` were written into all four stacks here on
+ * that belief and then taken out again, because Chrome's own accessibility tree says otherwise:
+ * with the rows at `display:flex`, stripping every `role` attribute leaves
+ * `table → row → cell` intact (Chromium 133; only `rowgroup`, which associates nothing, is lost).
+ * Redundant ARIA is what the kit's own rule calls worse than none, so the guard asserts the
+ * OUTCOME — that a stacked row is still a row in the a11y tree — and stays silent about how.
+ * `browser/cfl-narrow.mjs` is where a future engine that does dissolve them shows up as red.
+ *
+ * Column headers ARE a real loss here, and a deliberate one: `<thead>` is hidden, because a header
+ * row that costs a third of the width buys nothing when each row is labelled by its own title. */
+@container fdy-cfl (max-width: 30rem){
+  .fdy-cfl__results .fdy-table,
+  .fdy-cfl__results .fdy-table tbody{display:block;width:100%;}
+  .fdy-cfl__results .fdy-table thead{display:none;}
+  .fdy-cfl__row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--bw) solid var(--color-border-muted);}
+  .fdy-cfl__results .fdy-table tbody tr:last-child{border-bottom:0;}
+  .fdy-cfl__row > td{display:block;padding:0;border:0;}
+  /* The title takes the whole first line, which is what pushes every remaining cell onto the second
+     one — no selector has to know how many columns there are, or which of them is last. */
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check),
+  .fdy-cfl__row > .fdy-cfl__check + td{font-weight:var(--weight-semibold);color:var(--color-text);}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check){flex:0 0 100%;}
+  /* Multi-select: the checkbox shares line one with the title, so the title claims the rest of it. */
+  .fdy-cfl__row > .fdy-cfl__check + td{flex:1 0 calc(100% - var(--space-6));}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td,
+  .fdy-cfl__row > .fdy-cfl__check + td ~ td{font-size:var(--text-xs);color:var(--color-text-muted);}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td:empty,
+  .fdy-cfl__row > .fdy-cfl__check + td ~ td:empty{display:none;}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td::before,
+  .fdy-cfl__row > .fdy-cfl__check + td ~ td::before{content:"·";margin-right:var(--space-2);color:var(--color-text-subtle);}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) + td::before,
+  .fdy-cfl__row > .fdy-cfl__check + td + td::before{content:none;}
+  /* The checkbox keeps its own line position beside the title rather than above it. */
+  .fdy-cfl__row > .fdy-cfl__check{flex:none;width:auto;align-self:center;}
+}

package/src/components/tabs.css

@@ -1,7 +1,22 @@
 /* Freeday. Tabs (WAI-ARIA APG) */
-/* position:relative, containing block for out-of-flow content in the tabs (see base.css). */
-.fdy-tabs__list{position:relative;display:flex;gap:var(--space-1);border-bottom:var(--bw) solid var(--color-border);overflow-x:auto;}
-.fdy-tabs__tab{appearance:none;border:0;background:transparent;cursor:pointer;white-space:nowrap;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);padding:var(--space-3) var(--space-4);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
+/* position:relative, containing block for out-of-flow content in the tabs (see base.css).
+ *
+ * The strip's own line is an INSET SHADOW, not a border, and the tab carries no negative margin
+ * (#052). The pair those two replace — `border-bottom` here plus `margin-bottom:-1px` on the tab,
+ * to lift the active tab's 2px underline onto the strip's 1px line so the two read as one — was
+ * broken by the `overflow-x:auto` beside it, in two ways at once:
+ *   1. CSS Overflow §3 gives no way to scroll one axis alone: `overflow-y` computes from `visible`
+ *      to `auto` because the other axis is not visible, so the 1px the tab hangs below the content
+ *      box became a real scrollport. Measured 47 client / 48 scroll, `scrollTop` settling at 1 —
+ *      invisible in a screenshot, and a trackpad gesture over the strip is eaten by it.
+ *   2. A scroll container clips its descendants to the padding box, so the pixel the negative
+ *      margin pushed out was clipped away and the strip's own line painted in its place: the
+ *      active underline rendered ONE pixel of primary, never the two it asks for.
+ * An inset shadow paints on the box, not on the scrolled content, so the line stays put while the
+ * tabs scroll sideways, and the tab's own border-bottom paints over it — same look, no overflow.
+ * To hide the line, override `box-shadow`, not `border-bottom` (guarded in browser/tabs-strip.mjs). */
+.fdy-tabs__list{position:relative;display:flex;gap:var(--space-1);box-shadow:inset 0 calc(var(--bw) * -1) 0 var(--color-border);overflow-x:auto;}
+.fdy-tabs__tab{appearance:none;border:0;background:transparent;cursor:pointer;white-space:nowrap;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);padding:var(--space-3) var(--space-4);border-bottom:2px solid transparent;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-tabs__tab:hover{color:var(--color-text);}
 .fdy-tabs__tab:disabled,.fdy-tabs__tab[aria-disabled="true"]{opacity:.5;cursor:not-allowed;color:var(--color-text-muted);}
 .fdy-tabs__tab:disabled:hover,.fdy-tabs__tab[aria-disabled="true"]:hover{color:var(--color-text-muted);}

package/tokens/tokens.json

@@ -122,7 +122,7 @@
 
     "text":        { "$value": "{slate.900}", "$dark": "{slate.100}" },
     "text-muted":  { "$value": "{slate.600}", "$dark": "{slate.400}" },
-    "text-subtle": { "$value": "{slate.500}", "$dark": "{slate.500}" },
+    "text-subtle": { "$comment": "The faintest ink, and the ONLY text tier whose dark value is not the light one's mirror (#053). Light slate-500 on white is 4.69:1 and clears AA on its own; the same primitive on the dark surface is 4.02:1, and the tier is exactly what a placeholder uses — the one line telling an operator what an empty field wants. Dark is slate-450 for that reason: 4.88:1 on --color-surface, which is what every .fdy-input paints itself, so the placeholder clears AA where placeholders actually sit. It is still NOT a body-text tier on the darker surfaces (3.66:1 on surface-3); reaching AA there needs slate-400, which is --color-text-muted, and a subtle that equals muted is not a tier. test/contrast.test.mjs asserts both halves of that split.", "$value": "{slate.500}", "$dark": "{slate.450}" },
     "on-brand":    { "$value": "{slate.0}",   "$dark": "{slate.0}" },
 
     "border":        { "$value": "{slate.200}", "$dark": "{slate.800}" },