@cahyo-dimas/freeday 3.2.0 → 3.3.1

package/CHANGELOG.md

@@ -9,6 +9,115 @@ 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.3.1] - 2026-09-07
+
+**Tautan lewati yang tak punya tujuan, di tiga stack sekaligus.** `#056` (dari `keamanan-cluster`)
+menunjuk satu kalimat di COMPONENTS.md — *"the markup below is for stacks without an adapter (and is
+what the wrapper renders)"* — lalu menunjukkan bahwa untuk `.fdy-app__main` kalimat itu tidak benar.
+Markup mentahnya membawa `id="main"`; ketiga wrapper typed tidak membawa apa pun. Jadi `.fdy-skip`
+yang didokumentasikan dengan `href="#main"` merender tautan yang menerima fokus lalu tidak
+memindahkan siapa pun. Ini bentuk kegagalan yang paling sulit terlihat: tak ada galat, tak ada yang
+tampak salah, dan pemeriksaan visual tak akan pernah menangkapnya — app yang melaporkannya memilih
+**tidak memasang tautan lewati sama sekali**, karena tak ada yang bisa dituju.
+
+### Fixed
+- **`FdyAppShell` merender `<main id="main" tabindex="-1">` di Vue, React dan Blazor** (`#056` §1).
+  `id` menyamakan wrapper dengan markup mentah yang sudah didokumentasikan; `tabindex="-1"` diambil
+  dari `docs/reference-screen.html`, yang selama ini lebih benar daripada skeleton di COMPONENTS.md —
+  tanpa itu tautan fragmen menggulung halaman tanpa memindahkan fokus, sehingga Tab berikutnya
+  melanjutkan dari tempat pembaca tadi, bukan dari tempat ia dikirim. Skeleton COMPONENTS.md ikut
+  disamakan. Dijaga uji paritas baru di `browser/adapter.mjs` (Vue, React) dan
+  `test/blazor/FdyAppShellTests.cs` (Blazor).
+
+### Docs
+- **`.fdy-title-page` menyebut level headingnya di dalam shell** (`#056` §2). Tabel tipografi
+  menuliskan `<h1>`, "One per screen", sementara `docs/reference-screen.html` memakai
+  `<h2 class="fdy-title-page">` karena `.fdy-app__title` di topbar sudah menjadi `<h1>` layar itu.
+  Menyusun keduanya persis seperti dokumentasi menghasilkan dua `<h1>` — yang justru dilarang
+  kalimat di sebelahnya. Tabelnya kini menyebut kedua kasus; keputusan yang dipakai adalah keputusan
+  yang sudah diambil reference screen, bukan keputusan baru.
+
+## [3.3.0] - 2026-08-28
+
+**Tiga kemampuan yang sebenarnya sudah ada di kit ini, dan tak satu pun bisa diminta.** `#054` dan
+`#055` datang dari tiga app berbeda dan bermuara pada satu bentuk kegagalan yang sama: kemampuannya
+ada — di jalur mentah, di satu container, di satu varian — tapi **kosakata untuk memintanya tidak**.
+Itu jenis gap yang paling mahal, karena tak terlihat seperti gap: yang membacanya menyimpulkan kit
+tak bisa, lalu membangun ulang. Satu di antaranya membuat dua console menulis 23 override yang sama,
+satu lagi membuat sebuah panel menyimpan dialog 420 baris di sebelah komponen yang melakukan hal itu
+persis, dan yang ketiga bertahan empat bulan hanya karena satu kalimat dokumentasi salah.
+
+### Added
+- **`FdyCfl` bisa dibuka oleh sesuatu yang bukan field-nya sendiri** (`#054`, dari
+  `IDU_AI_DOC_SAPB1_ADDON_DESKTOP_APP`). Enhancer punya `[data-fdy-cfl-open]` — *"opens the dialog
+  with no bound field"* — sejak ia terbit, dan COMPONENTS.md mendaftarnya. Ketiga wrapper typed
+  adalah **field plus dialog** dengan `openDialog` terkunci di dalam: tak ada ref, tak ada prop, tak
+  ada pintu. Jadi jalur mentah bisa melakukan hal yang jalur typed tidak — satu-satunya asimetri yang
+  dilarang klaim paritas kit ini. Panel 420px yang melaporkannya memicu picker dari **chip 12px**,
+  dua per baris dokumen; ia tak bisa membelanjakan satu readonly input 22rem per pemicu, jadi ia
+  menyimpan `CflGridDialog.vue` 420 baris. Sekarang: prop **`dialogOnly`** merender dialog tanpa
+  field, dan **`open()`/`close()`** terjangkau — Vue lewat `defineExpose`, React lewat
+  `FdyCflHandle` di `ref`, Blazor lewat `OpenAsync()`/`CloseAsync()` yang kini `public`. Host-nya
+  `display:contents` (`.fdy-cfl__host`), jadi ia **tak menghasilkan box sama sekali**: div berukuran
+  nol pun tetap jadi flex item atau sel grid di tempat pemicunya diletakkan, dan itu persis yang
+  akan merusak barisan chip. Blazor tak butuh host — ia memang sudah merender field dan dialog
+  sebagai sibling. `disabled`/`readonly` tetap menolak membuka, karena tanpa field tak ada tombol
+  disabled yang menahan klik: penjaganya harus ada di `open()` sendiri, dan itu yang diuji.
+- **`.fdy-field--full` melepas cap 22rem di mana pun field itu berada** (`#055` §1, dari
+  `IDU_AI_DOC_SAPB1_CLIENT` **dan** `IDU_AI_DOC_SAAS` — dua consumer independen yang meraih override
+  yang sama adalah buktinya, jumlahnya adalah argumennya). Kit sudah mengirim idenya:
+  `.fdy-form-grid > .fdy-field { max-width: none }`. Tapi setiap form nyata adalah **flex column**,
+  bukan grid itu — `.fdy-form-grid` adalah `repeat(auto-fit,minmax(14rem,1fr))`, yang memasangkan
+  field berdua begitu ada ruang. Benar untuk header dokumen, salah untuk settings pane, kartu login,
+  atau dialog 420px. Dan di luar grid, modifier-nya bukan sekadar "tak melepas cap": **ia tak
+  melakukan apa-apa**, satu-satunya rule-nya ber-scope grid. Jadi form kolom tunggal tak punya cara
+  mengatakan maksudnya, dan keduanya mengatakannya di container — 23 blok. Kit ini pun menulisnya
+  **empat kali di halaman referensinya sendiri** sebagai `style="max-width:none"`; keempatnya kini
+  `fdy-field--full`. Di dalam grid tak ada yang berubah (rule grid sudah mengatakannya), dan
+  `grid-column` tetap urusan grid.
+- **`--fdy-app-sidebar-w`** (default `15.5rem`) di `.fdy-app__sidebar`. Kedua console meng-override
+  `width`-nya ke `16.5rem` — yaitu meng-override rule yang juga menganimasikan collapse.
+
+### Fixed
+- **Shell bisa memuat anak yang menggulung** (`#055` §2). `.fdy-app__content` punya `min-width:0`
+  dan **tidak** `min-height:0`. Di flex column, sumbu **block**-lah yang menjebak overflow: automatic
+  minimum size sebuah flex item adalah kontennya, jadi consumer yang memaku shell ke viewport lalu
+  menggulung `.fdy-app__main` mendorong shell-nya terbuka, bukan menggulung. Topbar cerita yang sama
+  satu baris di bawah: flex item tanpa `flex`, jadi topbar yang kontennya membungkus melewati
+  `min-height` bisa terperas. Kedua console menulis kedua rule itu sendiri-sendiri, di `app.css`,
+  sebelum layar kelima mereka. Keduanya kini di kit; tak ada layout yang hari ini benar yang berubah.
+- **Kotak pencarian `.fdy-cfl__search` tak lagi ter-cap 22rem.** Empat berkas menulis ini sebagai
+  `style="max-width:none"` — kedua adapter typed dan kedua contoh docs — yaitu kosakata yang hilang
+  dari `#055` §1, satu class di sebelahnya. Sekarang satu rule, nol inline style.
+
+### Docs
+- **`.fdy-nav--flat` akhirnya dijelaskan sebagai dirinya sendiri** (`#055` §3, dan ini temuan yang
+  lebih berharga daripada item aslinya). Catatan itu meminta "bentuk resmi untuk nav grup statis".
+  Bentuk itu **sudah ada sejak 1.1.0** dan melakukan persis tiga hal yang kedua console tulis
+  tangan: caret hilang, `cursor:default`, pemisah antar-grup hilang — plus dukungan markup
+  non-`<details>`, yang persis kasus `<p class="fdy-nav__grouplabel">` mereka. Yang menyembunyikannya
+  adalah satu kalimat di COMPONENTS.md: *"`--flat` drops the surface"*, yang **tidak benar** —
+  `.fdy-nav` tak mengecat surface apa pun untuk dibuang. Deskripsi yang akurat hanya hidup di entri
+  CHANGELOG 1.1.0. Dua consumer membaca satu kalimat yang salah, menyimpulkan varian itu bukan
+  untuk mereka, lalu membangun ulang sesuatu yang sudah mereka punya, selama empat bulan.
+  **Pelajarannya bukan tentang nav:** deskripsi varian yang salah lebih mahal daripada varian yang
+  hilang, karena yang hilang menghasilkan laporan dan yang salah menghasilkan pekerjaan diam-diam.
+- `COMPONENTS.md`: `.fdy-field--full` kini dijelaskan sebagai pelepas cap (bukan hanya span kolom),
+  plus paragraf "single-column form is not a grid"; tabel props `<FdyCfl>` dapat `dialogOnly` dan
+  satu bagian tentang membuka picker lewat ref; `--fdy-app-sidebar-w` didaftar di App shell.
+
+### Guarded
+- **Empat gerbang baru, semuanya diverifikasi dengan mutasi.** `test/css.test.mjs`: `--full` melepas
+  cap **dan** berada setelah `.fdy-field` (spesifisitas sama, jadi urutan sumber adalah seluruh
+  mekanismenya); shell punya kedua `min-*` dan topbar punya `flex:none`. `test/docs.test.mjs`:
+  paritas `#054` di tiga stack **plus** hook `[data-fdy-cfl-open]` di enhancer — kalau hook itu
+  hilang, gerbangnya membandingkan dengan ketiadaan. `browser/cfl-dialog-only.mjs`: 4 test Chrome
+  nyata (Vue + React), dibuka lewat **klik sungguhan** pada chip milik app, bukan dengan memanggil
+  method — plus satu asersi yang mengukur **akibat** dan bukan CSS: fixture-nya flex row bergap 8px
+  dengan komponen di antara dua chip, jadi host yang punya box terbaca sebagai 16px. Asersi itu juga
+  yang menangkap kesalahan pertama penulisnya: hitungan `.fdy-input-group` yang naif menghitung
+  **kotak pencarian di dalam dialog**, bukan field.
+
 ## [3.2.0] - 2026-08-28
 
 **Dua cacat yang tak bisa di-screenshot, dan satu komponen yang akhirnya muat di panel 420px.**

package/COMPONENTS.md

@@ -142,6 +142,8 @@ off-canvas drawer and backdrop are built in.
 
 - Parts: `__sidebar` `__brand` (`__brand-mark` `__brand-text` `__brand-title` `__brand-subtitle`)
   `__content` `__topbar` `__navtoggle` `__title` `__main` `__backdrop`
+- Sidebar width: `--fdy-app-sidebar-w` on `.fdy-app` (default `15.5rem`). Set it rather than
+  overriding `width` on `.fdy-app__sidebar`, whose value also feeds the collapse transition.
 - Modifiers: `--nav-open` (drawer open) · `--nav-collapsed` (collapse to zero width, ≥721px) ·
   `--nav-overlay` (≥721px: float the nav over the content instead of displacing it) · `--static`
   (embed the shell in a page instead of filling the viewport)
@@ -154,7 +156,10 @@ positioning rules differ, and only above the breakpoint. It also changes which s
 On the raw path, if you add or remove the class yourself, call
 **`FreedayAppShell.refresh(root)`** afterwards — the shell has to re-read the DOM, or `inert` and
 `aria-expanded` keep describing the arrangement you just left.
-- Also: `.fdy-skip`, the skip-to-content link, first child of the shell.
+- Also: `.fdy-skip`, the skip-to-content link, first child of the shell. Its target is
+  `__main`, which carries `id="main"` **and `tabindex="-1"`** — without the latter a fragment
+  link scrolls the page without moving focus, so the next Tab resumes from where the reader
+  was, not from where they were sent. The typed wrappers render both.
 - **Behaviour: `freeday-app-shell.js`.** Opt in with `data-fdy-app` on the root. The markup below
   is unchanged. It owns the toggle in both modes plus everything an overlay needs that hand-rolling
   reliably forgets: Escape, backdrop click, closing when a `.fdy-nav__item` is followed, focus moved
@@ -207,7 +212,7 @@ tall containing block. The brand goes in the **sidebar** (sized to match the top
       <h1 class="fdy-app__title">Invoices</h1><!-- auto-spacer: pushes what follows right -->
       <!-- topbar actions -->
     </header>
-    <main class="fdy-app__main" id="main"><!-- .fdy-page goes here --></main>
+    <main class="fdy-app__main" id="main" tabindex="-1"><!-- .fdy-page goes here --></main>
   </div>
 
   <div class="fdy-app__backdrop"></div>
@@ -281,7 +286,7 @@ One role per level of hierarchy. Never re-use a card title for a page title.
 | Class | Element | Use |
 |---|---|---|
 | `.fdy-eyebrow` | `<p>` | Small uppercase label above a title. Optional. |
-| `.fdy-title-page` | `<h1>` | One per screen. |
+| `.fdy-title-page` | `<h1>` · `<h2>` in a shell | One `<h1>` per screen. Standalone page: `<h1>`. Inside `.fdy-app`, the topbar's `.fdy-app__title` is already that `<h1>`, so the page title steps down to `<h2>` — as `docs/reference-screen.html` does. |
 | `.fdy-title-section` | `<h2>` | A region inside the page. |
 | `.fdy-title-card` | `<h3>` | A title inside a card or row (`.fdy-card__title` is equivalent). |
 | `.fdy-text-muted` · `.fdy-text-subtle` | any | Secondary / tertiary text colour. |
@@ -422,15 +427,22 @@ WAI-ARIA APG menu-button. Keyboard ↑/↓/Home/End/Esc handled by the enhancer.
 The field wrapper owns the vertical rhythm; `<label class="fdy-field">` when it wraps a single
 native control, otherwise a `<div>` + explicitly associated label.
 
-- `.fdy-field` (+ `--full` inside `.fdy-form-grid`; widths `--w-sm` `--w-lg` `--w-xl` `--w-2xl`
-  `--w-grow` inside `.fdy-filterbar`)
+- `.fdy-field` (+ `--full`, which releases the width cap **wherever the field is**, and inside
+  `.fdy-form-grid` also spans the row; widths `--w-sm` `--w-lg` `--w-xl` `--w-2xl` `--w-grow`
+  inside `.fdy-filterbar`)
 - **The field owns the width; the control in it follows.** `.fdy-field` caps at `22rem` so a lone
-  field does not run the width of the page. `.fdy-form-grid` and `.fdy-filterbar` lift that cap, and
-  so does any width you state yourself — and in every one of those cases the control (`.fdy-input`,
+  field does not run the width of the page. `.fdy-form-grid` and `.fdy-filterbar` lift that cap,
+  `.fdy-field--full` lifts it on one field anywhere, and so does any width you state yourself — and in every one of those cases the control (`.fdy-input`,
   `.fdy-input-group`, `.fdy-combo`, `.fdy-autocomplete`, `.fdy-cascade`, and the pickers) spans the
   field. So **size the field, never the control**: styling the control instead leaves the field
   wider than what is in it, and that dead space is invisible in the DOM — it reads on screen as a
   gap you did not write.
+- **A single-column form is not a grid.** `.fdy-form-grid` pairs fields up the moment there is room,
+  which is right for a document header and wrong for a settings pane, a login card, or a dialog at
+  420px. Those are a plain flex column, and the way one says *"these fields fill me"* is
+  `.fdy-field--full` on the fields — **not** a `max-width` override on the container. Both of this
+  kit's own consoles wrote that override, once per form, before this modifier reached outside the
+  grid.
 - `.fdy-label` (+`--required`) · `.fdy-input` (+`--error`) · `.fdy-textarea` · `.fdy-help` (+`--error`)
 
 **Grouped controls are a `<fieldset>`, not a new block.** Put `.fdy-field` on the fieldset and
@@ -674,6 +686,31 @@ Four of these are required and carry the whole component: `fetchPage`, `columns`
 | `clearLabel?` | `string` | Accessible name for that button. Default `Clear selection`. |
 | `disabled?` · `readonly?` · `invalid?` | `boolean` | `readonly` keeps the picked value visible, focusable and copyable, but the dialog cannot be opened. |
 | `id?` · `ariaLabelledby?` · `describedby?` | `string` | Field id; the element that labels it; the help/error text it points at. |
+| `dialogOnly?` | `boolean` | Render the **dialog and no field**, for a caller whose trigger is already its own. See below. |
+
+**Opening it yourself.** The field is one way in, not the only one. A ref gives you `open()` and
+`close()` — Vue `defineExpose`, React a `FdyCflHandle` through `ref`, Blazor `OpenAsync()` /
+`CloseAsync()` on the `@ref` — and `dialogOnly` drops the field entirely so the picker can be
+triggered by a chip, a table cell, a menu item, or anything else that is not a 22rem readonly input.
+This is what the raw path has always had in `[data-fdy-cfl-open]`; before 3.3.0 the typed wrappers
+were a field *plus* a dialog with no door, and a screen that could not spend a field per trigger had
+to hand-roll the whole picker. With `dialogOnly` the component's host generates no box
+(`.fdy-cfl__host` is `display:contents`), so it can be rendered anywhere — Blazor renders only the
+`<dialog>` and needs no host. `placeholder`, `clearable`, `id` and the field's aria props have
+nothing to name in that mode and are ignored; `disabled` and `readonly` still refuse to open, so a
+programmatic `open()` cannot bypass them.
+
+```vue
+<script setup lang="ts">
+const picker = ref<InstanceType<typeof FdyCfl> | null>(null);
+</script>
+
+<template>
+  <button class="fdy-chip" type="button" @click="picker?.open()">Cost centre</button>
+  <FdyCfl ref="picker" dialog-only v-model="costCentre" :fetch-page="fetchPage"
+          :columns="columns" :display="d" :row-key="k" />
+</template>
+```
 
 Blazor carries the same surface in `PascalCase` with three differences: multi-select is a second
 pair (`Values` / `ValuesChanged`) rather than a widened single binding, the fetch delegate is
@@ -920,7 +957,9 @@ button chrome). `data-fdy-mask="####-####"` formats while typing: `#` digit, `A`
 alphanumeric, anything else is a literal. Needs `freeday-mask.js`.
 
 ## Form grid — `.fdy-form-grid`
-Responsive two-column document header. Children are `.fdy-field`; `.fdy-field--full` spans both.
+Responsive two-column document header. Children are `.fdy-field`; `.fdy-field--full` spans both
+columns. For a form that must stay **one** column, do not reach for this grid — it pairs fields up
+as soon as the container is wide enough. Use a flex column and mark the fields `--full`.
 
 ## Filter bar — `.fdy-filterbar`
 A consistent filter row of `.fdy-field`s with a width rhythm (`--w-sm` · default · `--w-lg` ·
@@ -1460,11 +1499,17 @@ Size-matched placeholders so nothing shifts when data lands: `--title` `--text`
 ## Nav (menu) — `.fdy-nav`
 Navigation links, **vertical by default** (the app shell sidebar), horizontal with `--horizontal`. Items are `<a class="fdy-nav__item">` with
 `__icon` / `__label` / `__badge`; the current one gets `aria-current="page"`.
-`--flat` drops the surface. Nested groups are native `<details>`:
+Nested groups are native `<details>`:
 
 - `.fdy-nav__tree` + `<summary class="fdy-nav__item">` + `.fdy-nav__caret` → children in
   `.fdy-nav__sub`
 - `.fdy-nav__group` + `<summary class="fdy-nav__grouplabel">` → a collapsible section
+- **`--flat` on the `<nav>` is the static variant**: group labels that never collapse. It drops the
+  disclosure caret, returns the label to `cursor: default`, and removes the divider between groups,
+  so `.fdy-nav__grouplabel` can be a plain `<p>`/`<div>` heading ("OVERVIEW", "ADMINISTRATION")
+  outside any `<details>`. Reach for it instead of undoing those three rules per app — which is what
+  two consoles did for four months, because this line used to claim `--flat` "drops the surface",
+  and it never did: `.fdy-nav` paints no surface to drop.
 - **`--horizontal`** lays the same links out as a row, for a **top-nav application** (primary
   navigation in `.fdy-appbar` or `.fdy-app__topbar`, no sidebar). Same item, same states, same
   `aria-current="page"`; the row scrolls if it runs out of width. On `.fdy-appbar--primary` the

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

@@ -41,7 +41,7 @@
             @TopbarContent
         </header>
 
-        <main class="fdy-app__main">
+        <main class="fdy-app__main" id="main" tabindex="-1">
             @ChildContent
         </main>
     </div>

package/adapters/blazor/FdyCfl.razor

@@ -7,27 +7,33 @@
    dialog are rendered and re-rendered by Blazor, rows come from an async LoadPage callback, and
    the <dialog> is opened/closed through the same freeday-blazor.js interop FdyModal uses. *@
 
-<div class="@FieldGroupClass">
-    <input class="fdy-input" type="text" readonly value="@DisplayValue"
-           placeholder="@Placeholder" aria-labelledby="@AriaLabelledby"
-           aria-invalid="@(Invalid ? "true" : null)" aria-readonly="@(Readonly ? "true" : null)" />
-    @if (Clearable && Value is not null && !Disabled && !Readonly)
-    {
-        <button class="fdy-input-group__btn" type="button" @onclick="ClearAsync" aria-label="@ClearLabel">
+@* The field is optional (#054): with DialogOnly the component renders the dialog alone, for a
+   caller whose trigger is already its own — a chip, a table cell, a menu item — and opens it
+   through @ref: `await picker.OpenAsync()`. The host generates no box. *@
+@if (!DialogOnly)
+{
+    <div class="@FieldGroupClass">
+        <input class="fdy-input" type="text" readonly value="@DisplayValue"
+               placeholder="@Placeholder" aria-labelledby="@AriaLabelledby"
+               aria-invalid="@(Invalid ? "true" : null)" aria-readonly="@(Readonly ? "true" : null)" />
+        @if (Clearable && Value is not null && !Disabled && !Readonly)
+        {
+            <button class="fdy-input-group__btn" type="button" @onclick="ClearAsync" aria-label="@ClearLabel">
+                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"
+                     stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                    <path d="M6 6l12 12M18 6L6 18"></path>
+                </svg>
+            </button>
+        }
+        <button class="fdy-input-group__btn" type="button" @onclick="OpenAsync"
+                disabled="@(Disabled || Readonly)" aria-label="@OpenLabel">
             <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"
-                 stroke-width="2" stroke-linecap="round" aria-hidden="true">
-                <path d="M6 6l12 12M18 6L6 18"></path>
+                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <circle cx="11" cy="11" r="7"></circle><path d="m21 21-4.3-4.3"></path>
             </svg>
         </button>
-    }
-    <button class="fdy-input-group__btn" type="button" @onclick="OpenAsync"
-            disabled="@(Disabled || Readonly)" aria-label="@OpenLabel">
-        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"
-             stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <circle cx="11" cy="11" r="7"></circle><path d="m21 21-4.3-4.3"></path>
-        </svg>
-    </button>
-</div>
+    </div>
+}
 
 <dialog @ref="Root" class="fdy-modal fdy-modal--cfl" aria-labelledby="@_titleId">
     <div class="fdy-modal__header">

package/adapters/blazor/FdyCfl.razor.cs

@@ -70,6 +70,13 @@ public partial class FdyCfl<TRow>
     /// <summary>Debounce (ms) between a keystroke and the search request.</summary>
     [Parameter] public int SearchDebounceMs { get; set; } = 250;
 
+    /// <summary>Render the dialog and NO field, for a caller whose trigger is already its own — a chip,
+    /// a table cell, a menu item — opened through <c>@ref</c>: <c>await picker.OpenAsync()</c>. The raw
+    /// path has had exactly this since the enhancer's <c>[data-fdy-cfl-open]</c>. <c>Placeholder</c>,
+    /// <c>Clearable</c> and the field's aria parameters have nothing to name here and are ignored;
+    /// <c>Disabled</c> and <c>Readonly</c> still refuse to open.</summary>
+    [Parameter] public bool DialogOnly { get; set; }
+
     private readonly string _titleId = $"fdy-cfl-{Guid.NewGuid():N}-title";
     private int _dialogToken;
     private bool _open;
@@ -93,7 +100,10 @@ public partial class FdyCfl<TRow>
     protected override async ValueTask HydrateAsync()
         => _dialogToken = await JS.InvokeAsync<int>("FreedayBlazor.dialogInit", Root, Self, nameof(OnDismiss), true);
 
-    private async Task OpenAsync()
+    /// <summary>Open the picker. Public because with <see cref="DialogOnly"/> there is no field to
+    /// open it, and because a caller with its own trigger is the case that made #054: it guards
+    /// exactly as the built trigger does, so this cannot bypass Disabled/Readonly.</summary>
+    public async Task OpenAsync()
     {
         if (Disabled || Readonly || _open) return;
         _open = true;
@@ -105,7 +115,8 @@ public partial class FdyCfl<TRow>
         await LoadAsync(reset: true);
     }
 
-    private async Task CloseAsync()
+    /// <summary>Close the picker without committing, the same path Esc and the footer button take.</summary>
+    public async Task CloseAsync()
     {
         if (!_open) return;
         _open = false;

package/adapters/react/components/FdyAppShell.tsx

@@ -186,7 +186,7 @@ export function FdyAppShell(props: FdyAppShellProps): JSX.Element {
           {props.topbar}
         </header>
 
-        <main className="fdy-app__main">{props.children}</main>
+        <main className="fdy-app__main" id="main" tabIndex={-1}>{props.children}</main>
       </div>
 
       <div

package/adapters/react/components/FdyCfl.tsx

@@ -1,5 +1,5 @@
-import type { JSX } from 'react';
-import { useEffect, useId, useRef, useState } from 'react';
+import type { JSX, Ref } from 'react';
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
 
 // React port of adapters/vue/components/FdyCfl.vue over freeday's `.fdy-cfl*` +
 // `.fdy-input-group` classes (see src/components/cfl.css, input-group.css). A controlled
@@ -71,9 +71,27 @@ export interface FdyCflProps<Row extends Record<string, unknown>> {
   describedby?: string;
   id?: string;
   ariaLabelledby?: string;
+  /** Render the dialog and NO field, for a caller whose trigger is already its own — a chip, a table
+   *  cell, a menu item — opened through the ref: `picker.current?.open()`. The raw path has had
+   *  exactly this since the enhancer's `[data-fdy-cfl-open]`; the typed wrappers were a field *plus*
+   *  a dialog with no way in, so a screen that could not spend a 22rem readonly input per trigger had
+   *  to hand-roll the picker (#054). The host generates no box, so it can sit anywhere.
+   *  `placeholder`, `clearable`, `id` and the field's aria props have nothing to name here and are
+   *  ignored; `disabled` and `readonly` still refuse to open. */
+  dialogOnly?: boolean;
 }
 
-export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<Row>): JSX.Element {
+/** What a `ref` on `<FdyCfl>` gives you. Both guard exactly as the trigger does, so a programmatic
+ *  open cannot bypass `disabled`/`readonly`. */
+export interface FdyCflHandle {
+  open: () => void;
+  close: () => void;
+}
+
+function FdyCflInner<Row extends Record<string, unknown>>(
+  props: FdyCflProps<Row>,
+  ref: Ref<FdyCflHandle>,
+): JSX.Element {
   const baseId: string = useId();
   const fieldId: string = props.id ?? `${baseId}-field`;
   const titleId: string = `${baseId}-title`;
@@ -301,6 +319,10 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
     dialogRef.current?.close();
   }
 
+  /* No dependency array on purpose: both close over state (the ticks to seed, whether the field is
+     disabled), so a handle frozen at first render would open a picker with last week's props. */
+  useImperativeHandle(ref, (): FdyCflHandle => ({ open: openDialog, close: closeDialog }));
+
   // Fires for every close path (button, Esc, commit); centralise cleanup here.
   function onClose(): void {
     reqIdRef.current++; // invalidate any in-flight fetch so it can't apply after close
@@ -330,46 +352,50 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
   }, []);
 
   return (
-    <div className="fdy-input-group">
-      <input
-        id={fieldId}
-        className="fdy-input"
-        type="text"
-        readOnly
-        value={displayValue}
-        placeholder={props.placeholder}
-        aria-labelledby={props.ariaLabelledby}
-        aria-invalid={isInvalid ? 'true' : undefined}
-        aria-describedby={props.describedby}
-        disabled={isDisabled}
-      />
-      {showClear ? (
-        <button
-          type="button"
-          className="fdy-input-group__btn"
-          aria-label={clearLabelText}
-          onClick={clearValue}
-        >
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
-            <path d="M6 6l12 12M18 6L6 18" />
-          </svg>
-        </button>
-      ) : null}
-      <button
-        ref={triggerRef}
-        type="button"
-        className="fdy-input-group__btn"
-        aria-haspopup="dialog"
-        aria-labelledby={props.ariaLabelledby}
-        aria-label={props.ariaLabelledby ? undefined : (props.openLabel ?? 'Open search')}
-        disabled={isDisabled || isReadonly}
-        onClick={openDialog}
-      >
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-          <circle cx={11} cy={11} r={7}></circle>
-          <path d="m21 21-4.35-4.35"></path>
-        </svg>
-      </button>
+    <div className={props.dialogOnly === true ? 'fdy-cfl__host' : 'fdy-input-group'}>
+      {props.dialogOnly === true ? null : (
+        <>
+          <input
+            id={fieldId}
+            className="fdy-input"
+            type="text"
+            readOnly
+            value={displayValue}
+            placeholder={props.placeholder}
+            aria-labelledby={props.ariaLabelledby}
+            aria-invalid={isInvalid ? 'true' : undefined}
+            aria-describedby={props.describedby}
+            disabled={isDisabled}
+          />
+          {showClear ? (
+            <button
+              type="button"
+              className="fdy-input-group__btn"
+              aria-label={clearLabelText}
+              onClick={clearValue}
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+                <path d="M6 6l12 12M18 6L6 18" />
+              </svg>
+            </button>
+          ) : null}
+          <button
+            ref={triggerRef}
+            type="button"
+            className="fdy-input-group__btn"
+            aria-haspopup="dialog"
+            aria-labelledby={props.ariaLabelledby}
+            aria-label={props.ariaLabelledby ? undefined : (props.openLabel ?? 'Open search')}
+            disabled={isDisabled || isReadonly}
+            onClick={openDialog}
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <circle cx={11} cy={11} r={7}></circle>
+              <path d="m21 21-4.35-4.35"></path>
+            </svg>
+          </button>
+        </>
+      )}
 
       <dialog ref={dialogRef} className="fdy-modal fdy-modal--cfl" aria-labelledby={titleId} onClose={onClose} onKeyDown={onKeydown}>
         <div className="fdy-modal__header">
@@ -379,7 +405,7 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
 
         <div className="fdy-modal__body">
           <div className="fdy-cfl__search">
-            <div className="fdy-input-group" style={{ maxWidth: 'none' }}>
+            <div className="fdy-input-group">
               <span className="fdy-input-group__addon fdy-input-group__addon--icon">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                   <circle cx={11} cy={11} r={7}></circle>
@@ -478,3 +504,12 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
     </div>
   );
 }
+
+/* `forwardRef` types its argument as a plain function, which erases `Row`: every consumer would get
+   `FdyCflProps<Record<string, unknown>>` and lose the row type the whole component exists to carry.
+   The cast restores the generic call signature, and it is the standard shape for a generic component
+   with a ref while `react` is `>=18` (React 19's ref-as-prop would not need it, and the peer range
+   still admits 18). */
+export const FdyCfl = forwardRef(FdyCflInner) as <Row extends Record<string, unknown>>(
+  props: FdyCflProps<Row> & { ref?: Ref<FdyCflHandle> },
+) => JSX.Element;

package/adapters/react/index.d.ts

@@ -33,7 +33,7 @@ export { FdyDatepicker, type FdyDatepickerProps } from './components/FdyDatepick
 export { FdyDateRange, type FdyDateRangeProps, type DateRangeValue } from './components/FdyDateRange';
 export { FdyAutocomplete, type FdyAutocompleteProps } from './components/FdyAutocomplete';
 export { FdyCascade, type FdyCascadeProps, type CascadeNode } from './components/FdyCascade';
-export { FdyCfl, type FdyCflProps, type CflColumn, type CflPage } from './components/FdyCfl';
+export { FdyCfl, type FdyCflProps, type FdyCflHandle, type CflColumn, type CflPage } from './components/FdyCfl';
 /** Narrow `FdyCfl`'s `Row | Row[] | null` to the `Row | null` a single-select can produce; throws
  *  on the array only a `multiple` field emits. */
 export { singleRow } from '../core/cfl-value';

package/adapters/vue/components/FdyAppShell.vue

@@ -180,7 +180,7 @@ onBeforeUnmount((): void => {
         <slot name="topbar" />
       </header>
 
-      <main class="fdy-app__main">
+      <main class="fdy-app__main" id="main" tabindex="-1">
         <slot />
       </main>
     </div>

package/adapters/vue/components/FdyCfl.vue

@@ -72,6 +72,14 @@ const props = defineProps<{
   describedby?: string;
   id?: string;
   ariaLabelledby?: string;
+  /** Render the dialog and NO field, for a caller whose trigger is already its own — a chip, a table
+   *  cell, a menu item — opened by ref: `picker.value?.open()`. The raw path has had exactly this
+   *  since the enhancer's `[data-fdy-cfl-open]`; the typed wrappers were a field *plus* a dialog
+   *  with no way in, so a screen that could not spend a 22rem readonly input per trigger had to
+   *  hand-roll the picker (#054). The host generates no box, so it can sit anywhere. `placeholder`,
+   *  `clearable`, `id` and the field's aria props have nothing to name here and are ignored;
+   *  `disabled` and `readonly` still refuse to open. */
+  dialogOnly?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -99,6 +107,7 @@ const loading: Ref<boolean> = ref(false);
 const error: Ref<Error | null> = ref(null);
 const activeIndex: Ref<number> = ref(-1);
 
+const isDialogOnly: ComputedRef<boolean> = computed((): boolean => props.dialogOnly === true);
 const isDisabled: ComputedRef<boolean> = computed((): boolean => props.disabled === true);
 const isReadonly: ComputedRef<boolean> = computed((): boolean => props.readonly === true);
 
@@ -321,6 +330,11 @@ function onClose(): void {
   triggerEl.value?.focus();
 }
 
+/* The dialog is reachable from outside, which is what makes `dialogOnly` usable at all: with no
+   field there is no trigger, and `open()` is the only door. Both guard exactly as the trigger did,
+   so a programmatic open cannot bypass `disabled`/`readonly`. */
+defineExpose({ open: openDialog, close: closeDialog });
+
 function cellText(row: Row, key: keyof Row & string): string {
   const value: unknown = row[key];
   return value === null || value === undefined ? '' : String(value);
@@ -332,45 +346,47 @@ onBeforeUnmount((): void => {
 </script>
 
 <template>
-  <div class="fdy-input-group">
-    <input
-      :id="fieldId"
-      class="fdy-input"
-      type="text"
-      readonly
-      :value="displayValue"
-      :placeholder="placeholder"
-      :aria-labelledby="ariaLabelledby"
-      :aria-invalid="isInvalid ? 'true' : undefined"
-      :aria-describedby="describedby"
-      :disabled="isDisabled"
-    />
-    <button
-      v-if="showClear"
-      type="button"
-      class="fdy-input-group__btn"
-      :aria-label="clearLabelText"
-      @click="clearValue"
-    >
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
-        <path d="M6 6l12 12M18 6L6 18"></path>
-      </svg>
-    </button>
-    <button
-      ref="triggerEl"
-      type="button"
-      class="fdy-input-group__btn"
-      aria-haspopup="dialog"
-      :aria-labelledby="ariaLabelledby"
-      :aria-label="ariaLabelledby ? undefined : (openLabel ?? 'Open search')"
-      :disabled="isDisabled || isReadonly"
-      @click="openDialog"
-    >
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <circle cx="11" cy="11" r="7"></circle>
-        <path d="m21 21-4.35-4.35"></path>
-      </svg>
-    </button>
+  <div :class="isDialogOnly ? 'fdy-cfl__host' : 'fdy-input-group'">
+    <template v-if="!isDialogOnly">
+      <input
+        :id="fieldId"
+        class="fdy-input"
+        type="text"
+        readonly
+        :value="displayValue"
+        :placeholder="placeholder"
+        :aria-labelledby="ariaLabelledby"
+        :aria-invalid="isInvalid ? 'true' : undefined"
+        :aria-describedby="describedby"
+        :disabled="isDisabled"
+      />
+      <button
+        v-if="showClear"
+        type="button"
+        class="fdy-input-group__btn"
+        :aria-label="clearLabelText"
+        @click="clearValue"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+          <path d="M6 6l12 12M18 6L6 18"></path>
+        </svg>
+      </button>
+      <button
+        ref="triggerEl"
+        type="button"
+        class="fdy-input-group__btn"
+        aria-haspopup="dialog"
+        :aria-labelledby="ariaLabelledby"
+        :aria-label="ariaLabelledby ? undefined : (openLabel ?? 'Open search')"
+        :disabled="isDisabled || isReadonly"
+        @click="openDialog"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <circle cx="11" cy="11" r="7"></circle>
+          <path d="m21 21-4.35-4.35"></path>
+        </svg>
+      </button>
+    </template>
 
     <dialog ref="dialogEl" class="fdy-modal fdy-modal--cfl" :aria-labelledby="titleId" @close="onClose" @keydown="onKeydown">
       <div class="fdy-modal__header">
@@ -380,7 +396,7 @@ onBeforeUnmount((): void => {
 
       <div class="fdy-modal__body">
         <div class="fdy-cfl__search">
-          <div class="fdy-input-group" style="max-width:none">
+          <div class="fdy-input-group">
             <span class="fdy-input-group__addon fdy-input-group__addon--icon">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                 <circle cx="11" cy="11" r="7"></circle>

package/dist/freeday.bundle.css

@@ -963,8 +963,15 @@ a { color: var(--color-primary); }
  * > (.fdy-app__topbar, .fdy-app__main)). The __content wrapper gives the sticky
  * topbar a tall containing block so it can travel, a bare grid cell can't. */
 .fdy-app{display:flex;align-items:stretch;min-height:100vh;background:var(--color-surface-2);}
-.fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden;flex:none;width:15.5rem;box-sizing:border-box;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
-.fdy-app__content{flex:1;min-width:0;display:flex;flex-direction:column;}
+.fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden;flex:none;width:var(--fdy-app-sidebar-w,15.5rem);box-sizing:border-box;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
+/* `min-height:0` is the height-axis twin of `min-width:0`, and its absence was invisible for as long
+ * as the shell scrolled the PAGE (#055 §2). A consumer that pins the shell to the viewport and
+ * scrolls .fdy-app__main instead hits it immediately: a column flex item's automatic minimum size is
+ * its content, so the scrolling child pushes this box — and the shell — open instead of scrolling.
+ * `flex:none` on the topbar is the same story one line down: it is a flex item in this column, and
+ * a topbar whose content wraps past `min-height` is a topbar that can be squeezed. Both consoles
+ * wrote these two rules independently, in app.css, before the fifth screen. */
+.fdy-app__content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;}
 /* Brand is a fixed header, same height as the topbar so they align, and only
  * the nav below it scrolls. Bare text (no children) renders as one bold
  * display line via the rules on .fdy-app__brand itself. For a mark + two-line
@@ -1052,7 +1059,7 @@ a { color: var(--color-primary); }
      also apply — it would fight the transform for the same panel. */
   .fdy-app--nav-overlay.fdy-app--nav-collapsed .fdy-app__sidebar{width:16rem;border-right-width:var(--bw);}
 }
-.fdy-app__topbar{position:sticky;top:0;z-index:20;min-height:var(--space-16);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-8);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-bottom:var(--bw) solid var(--color-border);}
+.fdy-app__topbar{position:sticky;top:0;z-index:20;flex:none;min-height:var(--space-16);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-8);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-bottom:var(--bw) solid var(--color-border);}
 .fdy-app__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--color-text);margin:0 auto 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-app__main{flex:1;padding:var(--space-8);}
 .fdy-skip{position:absolute;left:var(--space-2);top:var(--space-2);background:var(--color-primary);color:var(--color-on-primary);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);z-index:100;transform:translateY(-250%);transition:transform var(--dur-fast) var(--ease-standard);}
@@ -1469,6 +1476,15 @@ 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);}
+/* The search group spans the bar. Four files wrote this as `style="max-width:none"` — both typed
+   adapters and both docs examples — which is the same missing vocabulary as #055 §1, one class over. */
+.fdy-cfl__search .fdy-input-group{max-width:none;}
+
+/* Field-less host (#054). With `dialogOnly` the typed wrappers render the dialog and no field, for a
+   caller whose trigger is its own — a chip, a table cell, a menu item — which is what the raw path
+   has always had in `[data-fdy-cfl-open]`. `display:contents` so the host generates no box at all:
+   a zero-size div would still be a flex item or a grid cell in whatever laid the trigger out. */
+.fdy-cfl__host{display:contents;}
 
 /* Results, dense rows, sticky header, its own scroll region.
  *
@@ -2034,6 +2050,16 @@ a { color: var(--color-primary); }
 
 /* Freeday. Field & Input */
 .fdy-field{display:flex;flex-direction:column;gap:var(--space-2);max-width:22rem;}
+/* A field marked --full fills whatever contains it (#055 §1). The cap above is for a field standing
+   on its own in a row — a filter bar, a toolbar — and it is right there. But every real form is a
+   single-column flex stack (a settings pane, a login card, a dialog at 420px), and the only release
+   the kit shipped was `.fdy-form-grid > .fdy-field`, which a flex column can never reach:
+   .fdy-form-grid is `repeat(auto-fit,minmax(14rem,1fr))`, which pairs fields up the moment there is
+   room. So a stack had no vocabulary at all and said it on the container instead — 23 times across
+   two consoles, and four times in this kit's OWN reference page as `style="max-width:none"`.
+   Inside .fdy-form-grid this changes nothing (that rule already says it); outside one the modifier
+   finally means what its name says, and the grid keeps `grid-column` as its own concern. */
+.fdy-field--full{max-width:none;}
 /* Inside a labelled field, a control fills the field (#051). The 22rem cap those controls carry is
    for one standing on its own, with no field to take a width from; #017 already released the date
    and time pickers here for exactly this reason, and its comment claims a picker then fills its

package/dist/freeday.css

@@ -85,8 +85,15 @@ a { color: var(--color-primary); }
  * > (.fdy-app__topbar, .fdy-app__main)). The __content wrapper gives the sticky
  * topbar a tall containing block so it can travel, a bare grid cell can't. */
 .fdy-app{display:flex;align-items:stretch;min-height:100vh;background:var(--color-surface-2);}
-.fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden;flex:none;width:15.5rem;box-sizing:border-box;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
-.fdy-app__content{flex:1;min-width:0;display:flex;flex-direction:column;}
+.fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden;flex:none;width:var(--fdy-app-sidebar-w,15.5rem);box-sizing:border-box;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
+/* `min-height:0` is the height-axis twin of `min-width:0`, and its absence was invisible for as long
+ * as the shell scrolled the PAGE (#055 §2). A consumer that pins the shell to the viewport and
+ * scrolls .fdy-app__main instead hits it immediately: a column flex item's automatic minimum size is
+ * its content, so the scrolling child pushes this box — and the shell — open instead of scrolling.
+ * `flex:none` on the topbar is the same story one line down: it is a flex item in this column, and
+ * a topbar whose content wraps past `min-height` is a topbar that can be squeezed. Both consoles
+ * wrote these two rules independently, in app.css, before the fifth screen. */
+.fdy-app__content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;}
 /* Brand is a fixed header, same height as the topbar so they align, and only
  * the nav below it scrolls. Bare text (no children) renders as one bold
  * display line via the rules on .fdy-app__brand itself. For a mark + two-line
@@ -174,7 +181,7 @@ a { color: var(--color-primary); }
      also apply — it would fight the transform for the same panel. */
   .fdy-app--nav-overlay.fdy-app--nav-collapsed .fdy-app__sidebar{width:16rem;border-right-width:var(--bw);}
 }
-.fdy-app__topbar{position:sticky;top:0;z-index:20;min-height:var(--space-16);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-8);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-bottom:var(--bw) solid var(--color-border);}
+.fdy-app__topbar{position:sticky;top:0;z-index:20;flex:none;min-height:var(--space-16);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-8);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-bottom:var(--bw) solid var(--color-border);}
 .fdy-app__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--color-text);margin:0 auto 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-app__main{flex:1;padding:var(--space-8);}
 .fdy-skip{position:absolute;left:var(--space-2);top:var(--space-2);background:var(--color-primary);color:var(--color-on-primary);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);z-index:100;transform:translateY(-250%);transition:transform var(--dur-fast) var(--ease-standard);}
@@ -591,6 +598,15 @@ 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);}
+/* The search group spans the bar. Four files wrote this as `style="max-width:none"` — both typed
+   adapters and both docs examples — which is the same missing vocabulary as #055 §1, one class over. */
+.fdy-cfl__search .fdy-input-group{max-width:none;}
+
+/* Field-less host (#054). With `dialogOnly` the typed wrappers render the dialog and no field, for a
+   caller whose trigger is its own — a chip, a table cell, a menu item — which is what the raw path
+   has always had in `[data-fdy-cfl-open]`. `display:contents` so the host generates no box at all:
+   a zero-size div would still be a flex item or a grid cell in whatever laid the trigger out. */
+.fdy-cfl__host{display:contents;}
 
 /* Results, dense rows, sticky header, its own scroll region.
  *
@@ -1156,6 +1172,16 @@ a { color: var(--color-primary); }
 
 /* Freeday. Field & Input */
 .fdy-field{display:flex;flex-direction:column;gap:var(--space-2);max-width:22rem;}
+/* A field marked --full fills whatever contains it (#055 §1). The cap above is for a field standing
+   on its own in a row — a filter bar, a toolbar — and it is right there. But every real form is a
+   single-column flex stack (a settings pane, a login card, a dialog at 420px), and the only release
+   the kit shipped was `.fdy-form-grid > .fdy-field`, which a flex column can never reach:
+   .fdy-form-grid is `repeat(auto-fit,minmax(14rem,1fr))`, which pairs fields up the moment there is
+   room. So a stack had no vocabulary at all and said it on the container instead — 23 times across
+   two consoles, and four times in this kit's OWN reference page as `style="max-width:none"`.
+   Inside .fdy-form-grid this changes nothing (that rule already says it); outside one the modifier
+   finally means what its name says, and the grid keeps `grid-column` as its own concern. */
+.fdy-field--full{max-width:none;}
 /* Inside a labelled field, a control fills the field (#051). The 22rem cap those controls carry is
    for one standing on its own, with no field to take a width from; #017 already released the date
    and time pickers here for exactly this reason, and its comment claims a picker then fills its

package/docs/agent-onboarding.md

@@ -132,6 +132,12 @@ Recent additions most likely to replace something an app hand-rolled (all detail
 | `selectable` + `selectedKeys` on `FdyTable` | a checkbox column bolted beside a controlled table, with its own bulk bar |
 | `fdy-step-before-change` | a wizard whose Next cannot be stopped while the server is still deciding |
 | `.fdy-table--striped` | a `:nth-child` rule of your own that turns out to be the same colour as hover |
+| `FdyCfl` in a narrow surface | a hand-rolled card picker, because the kit's was a table — it stacks itself under a 30rem container, no prop to pass |
+| `size="cfl"` on `FdyModal` | writing `.fdy-modal--cfl` by hand to reach the 46rem width |
+| `dialogOnly` + `open()` on `FdyCfl` | a hand-rolled picker, because the trigger is a chip or a table cell and not a 22rem field |
+| `.fdy-field--full` | `max-width: none` on the form container, once per form, because the fields are a flex column and not a `.fdy-form-grid` |
+| `.fdy-nav--flat` | undoing the caret, the pointer cursor and the group divider yourself, on a sidebar whose group labels never collapse |
+| `--fdy-app-sidebar-w` | overriding `width` on `.fdy-app__sidebar`, which is also the rule that animates the collapse |
 
 ## 3. Starting a new screen
 

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.2.0"` (public npm package). `dist/` is
+Lands in `package.json` as `"@cahyo-dimas/freeday": "^3.3.1"` (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.2.0",
+  "version": "3.3.1",
   "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/tabs-strip.mjs browser/cfl-narrow.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/cfl-dialog-only.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/app-shell.css

@@ -6,8 +6,15 @@
  * > (.fdy-app__topbar, .fdy-app__main)). The __content wrapper gives the sticky
  * topbar a tall containing block so it can travel, a bare grid cell can't. */
 .fdy-app{display:flex;align-items:stretch;min-height:100vh;background:var(--color-surface-2);}
-.fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden;flex:none;width:15.5rem;box-sizing:border-box;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
-.fdy-app__content{flex:1;min-width:0;display:flex;flex-direction:column;}
+.fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden;flex:none;width:var(--fdy-app-sidebar-w,15.5rem);box-sizing:border-box;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
+/* `min-height:0` is the height-axis twin of `min-width:0`, and its absence was invisible for as long
+ * as the shell scrolled the PAGE (#055 §2). A consumer that pins the shell to the viewport and
+ * scrolls .fdy-app__main instead hits it immediately: a column flex item's automatic minimum size is
+ * its content, so the scrolling child pushes this box — and the shell — open instead of scrolling.
+ * `flex:none` on the topbar is the same story one line down: it is a flex item in this column, and
+ * a topbar whose content wraps past `min-height` is a topbar that can be squeezed. Both consoles
+ * wrote these two rules independently, in app.css, before the fifth screen. */
+.fdy-app__content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;}
 /* Brand is a fixed header, same height as the topbar so they align, and only
  * the nav below it scrolls. Bare text (no children) renders as one bold
  * display line via the rules on .fdy-app__brand itself. For a mark + two-line
@@ -95,7 +102,7 @@
      also apply — it would fight the transform for the same panel. */
   .fdy-app--nav-overlay.fdy-app--nav-collapsed .fdy-app__sidebar{width:16rem;border-right-width:var(--bw);}
 }
-.fdy-app__topbar{position:sticky;top:0;z-index:20;min-height:var(--space-16);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-8);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-bottom:var(--bw) solid var(--color-border);}
+.fdy-app__topbar{position:sticky;top:0;z-index:20;flex:none;min-height:var(--space-16);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-8);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-bottom:var(--bw) solid var(--color-border);}
 .fdy-app__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--color-text);margin:0 auto 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-app__main{flex:1;padding:var(--space-8);}
 .fdy-skip{position:absolute;left:var(--space-2);top:var(--space-2);background:var(--color-primary);color:var(--color-on-primary);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);z-index:100;transform:translateY(-250%);transition:transform var(--dur-fast) var(--ease-standard);}

package/src/components/cfl.css

@@ -6,6 +6,15 @@
 
 /* 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);}
+/* The search group spans the bar. Four files wrote this as `style="max-width:none"` — both typed
+   adapters and both docs examples — which is the same missing vocabulary as #055 §1, one class over. */
+.fdy-cfl__search .fdy-input-group{max-width:none;}
+
+/* Field-less host (#054). With `dialogOnly` the typed wrappers render the dialog and no field, for a
+   caller whose trigger is its own — a chip, a table cell, a menu item — which is what the raw path
+   has always had in `[data-fdy-cfl-open]`. `display:contents` so the host generates no box at all:
+   a zero-size div would still be a flex item or a grid cell in whatever laid the trigger out. */
+.fdy-cfl__host{display:contents;}
 
 /* Results, dense rows, sticky header, its own scroll region.
  *

package/src/components/input.css

@@ -1,5 +1,15 @@
 /* Freeday. Field & Input */
 .fdy-field{display:flex;flex-direction:column;gap:var(--space-2);max-width:22rem;}
+/* A field marked --full fills whatever contains it (#055 §1). The cap above is for a field standing
+   on its own in a row — a filter bar, a toolbar — and it is right there. But every real form is a
+   single-column flex stack (a settings pane, a login card, a dialog at 420px), and the only release
+   the kit shipped was `.fdy-form-grid > .fdy-field`, which a flex column can never reach:
+   .fdy-form-grid is `repeat(auto-fit,minmax(14rem,1fr))`, which pairs fields up the moment there is
+   room. So a stack had no vocabulary at all and said it on the container instead — 23 times across
+   two consoles, and four times in this kit's OWN reference page as `style="max-width:none"`.
+   Inside .fdy-form-grid this changes nothing (that rule already says it); outside one the modifier
+   finally means what its name says, and the grid keeps `grid-column` as its own concern. */
+.fdy-field--full{max-width:none;}
 /* Inside a labelled field, a control fills the field (#051). The 22rem cap those controls carry is
    for one standing on its own, with no field to take a width from; #017 already released the date
    and time pickers here for exactly this reason, and its comment claims a picker then fills its