@cahyo-dimas/freeday 2.1.0 → 3.0.0

package/CHANGELOG.md

@@ -9,6 +9,250 @@ 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.0.0] - 2026-08-26
+
+**Kenapa MAJOR padahal rilis ini seluruhnya aditif.** Tak ada satu pun perubahan di bawah yang
+mematahkan konsumen: prop-nya opsional, class-nya baru, dan `fdy-step-before-change` tanpa listener
+berperilaku persis seperti sebelumnya. Secara semver murni ini MINOR. Nomor mayor diambil sebagai
+keputusan pemilik untuk **membuka lini adopsi back-office** yang dispesifikasikan di
+[`docs/superpowers/specs/2026-08-26-back-office-adoption-design.md`](docs/superpowers/specs/2026-08-26-back-office-adoption-design.md):
+delapan item, empat di antaranya terkirim di sini, dan **paruh yang benar-benar breaking masih di
+depan** — sumbu `data-style` mengubah arti atribut yang sudah terdokumentasi, `FdyTableColumn`
+melebar untuk edit sel, `FdyAppShell` mendapat mode nav baru. Konsumen 2.x bisa naik ke 3.0.0 tanpa
+mengubah satu baris pun.
+
+### Added
+- **Row selection terkontrol di keempat stack** (`NEXT-UP.md` #3). Enhancer vanilla sudah punya
+  `.fdy-table-bulkbar` + kolom pilih sejak awal; adapter typed tidak, jadi tiap layar list yang
+  butuh aksi massal merakit kolom checkbox sendiri di samping tabel terkontrol. Kini `selectable` +
+  `selectedKeys` di Vue/React/Blazor, ber-key `rowKey` — identitas yang sudah dipakai
+  `expandedKeys`, karena sebuah key selamat dari re-fetch yang mengganti seluruh objek baris,
+  sedangkan identitas objek tidak. Select-all menyentuh **halaman yang terlihat**, bukan seluruh
+  hasil filter: checkbox header yang diam-diam memilih baris yang tak bisa dilihat pembaca adalah
+  cara bulk delete jadi bencana. Key dari halaman lain dipertahankan, jadi hitungan di bulk bar
+  bisa lebih besar dari jumlah baris di layar — didokumentasikan, karena kalau tidak terbaca
+  seperti bug.
+- **`.fdy-table--striped`** + prop `striped` di keempat adapter, plus token Tier-3
+  `--fdy-table-stripe`. Warnanya **setengah** langkah surface, bukan langkah penuh yang dipakai
+  hover: stripe dengan warna hover membuat hover tak terlihat di setiap baris genap. Kolom beku
+  ikut dicat ulang, karena sel beku membawa background opak sendiri.
+- **`Freeday.busy()` / `Freeday.idle()`** — overlay yang menghalangi layar selama operasi yang tak
+  boleh diinterupsi. Imperatif seperti `toast()`, dan alasannya lebih tajam: API komponen mengundang
+  dua instans, dan dua scrim dengan dua caption dari dua komponen yang sama-sama merasa memiliki
+  layar adalah kegagalan yang komponen ini cegah. Bukan dialog — tak ada yang ditanyakan dan tak ada
+  yang bisa ditutup, jadi interaksi dicabut dengan `inert`, bukan dengan focus trap. Jeda default
+  120 ms supaya operasi 80 ms tak mengedipkan scrim, dan `idle()` membatalkan tampilan yang masih
+  tertunda alih-alih menyembunyikannya setelah terlanjur terlihat.
+- **Token semantic `--color-scrim`**, sengaja identik di light dan dark: scrim menggelapkan apa pun
+  di belakangnya, jadi ia tak ikut membalik bersama palet.
+- **`.fdy-step__badge`** dan status `is-error` stepper yang **sudah ada di CSS tapi tak
+  terdokumentasi**, sehingga tak terjangkau siapa pun. Label kini ikut ke danger, dan badge memuat
+  jumlahnya — karena cincin merah bilang "ada sesuatu" dan tak mengatakan apa-apa kepada pembaca
+  yang tak bisa melihat merah. Badge adalah **saudara** marker, bukan anaknya: enhancer menulis
+  ulang `__marker.innerHTML` di tiap render.
+- **`fdy-step-before-change`**, event cancelable yang membuat Lanjut bisa ditolak. Event saja tak
+  cukup — validasi biasanya sejauh satu round-trip — jadi handler bisa `preventDefault()` **atau**
+  menitipkan promise ke `detail.waitFor`. Selama promise itu tertunda kedua tombol nav dinonaktifkan
+  dan header membawa `aria-busy`. Menjawab apa pun selain `false` meneruskan (handler yang lupa
+  `return` bukan penolakan), dan guard yang **melempar** tak meneruskan apa pun karena ia tak
+  memutuskan apa pun. Mundur tak pernah ditanya; lompat maju ke langkah yang sudah dicapai ditanya.
+  **Cara validitas diputuskan tetap milik aplikasi** — kit tak berpendapat soal library form, dan
+  event inilah batasnya.
+- **`FreedayBlazor.setIndeterminate`**, satu helper interop, karena `indeterminate` adalah properti
+  DOM tanpa atribut HTML: renderer Blazor tak bisa mengekspresikannya, dan halaman yang separuh
+  terpilih akan tampil polos "belum tercentang".
+- **Mode nav overlay di layar lebar** — `.fdy-app--nav-overlay`, dan `navMode` di keempat adapter
+  (Blazor: enum `FdyNavMode`). Nav mengambang di atas konten alih-alih menggesernya, yaitu pilihan
+  yang selama ini hanya bisa terjadi di layar sempit. **Modifier ini mengubah tata letak, bukan
+  perilaku**: backdrop, Escape, tutup-saat-link-diikuti, fokus masuk-dan-kembali, `inert`, dan Tab
+  trap semuanya jalur kode drawer yang sudah ada — shell kini bertanya pada sebuah class, bukan pada
+  media query, sehingga layar lebar tak lagi berarti "kolom". Konsekuensinya melintasi breakpoint
+  **tidak** menutup panel yang mengambang di kedua sisi. `FreedayAppShell.refresh(root)` ditambahkan
+  untuk jalur mentah yang mengubah class itu sendiri.
+
+- **Sumbu palet primary: `data-primary`, 18 pilihan.** `azure` (default) · `sky` `blue` `indigo`
+  `violet` `purple` `fuchsia` `pink` `rose` · `orange` `amber` `yellow` `lime` `green` `emerald`
+  `teal` `cyan` · `noir`. Dipasang di mana pun `data-theme` bisa, termasuk di wrapper untuk
+  me-rebrand satu region.
+
+  Yang di-redefinisi sebuah palet adalah **ramp alias delapan shade**, bukan token semantic-nya.
+  Pemetaan "shade mana yang jadi fill, mana hover, mana wash" ditulis **sekali** di `color.primary*`,
+  jadi palet yang salah memetakan salah satunya bukan bentuk yang bisa dihasilkan sistem ini — dan
+  `--color-primary`, `-hover`, `-active`, `-soft`, `-border`, `-strong` serta `--focus-ring`
+  semuanya ikut, di kedua tema, tanpa apa pun untuk disetel.
+
+  **Ke-18 dijaga gerbang kontras di kedua tema**: label di atas fill (AA 4.5), fill terhadap surface
+  dan cincin fokus (1.4.11, 3:1), dan `primary-strong` di atas wash-nya sendiri di atas ketiga
+  surface. 36 kombinasi, dan tiga hasilnya **dipaksa oleh pengukuran, bukan selera**: `yellow`
+  memakai fill lebih gelap di tema terang (di shade aslinya cuma 2.94:1 di atas putih, di bawah
+  ambang untuk sebuah fill UI) dan karena itu berlabel putih sementara semua palet hangat lain
+  berlabel gelap; `indigo` dan `violet` bergeser satu langkah lebih terang di tema gelap, karena di
+  shade tengahnya tak ada — putih maupun mendekati-hitam — yang mencapai 4.5:1. Ketiganya
+  didokumentasikan, karena tanpa penjelasan mereka terlihat seperti kekeliruan.
+
+  `noir` bukan hue: ia mengarahkan ramp alias ke ramp netral, jadi "primary" jadi mendekati hitam di
+  terang dan mendekati putih di gelap.
+
+- **Sumbu gaya visual: `data-style="soft | glass"`.** `soft` default dan tampilan kit selama ini;
+  `glass` memfrost **permukaan terangkat** — card, modal, drawer, menu, appbar, sidebar & topbar app
+  shell. Dipasang di mana pun `data-theme` bisa, dan `[data-style="soft"]` adalah **rule sungguhan**,
+  jadi satu region bisa keluar dari root yang kaca. Sumbu ini menyerap toggle glass yang selama ini
+  jadi fitur terpisah di app konsumen: satu sumbu dua nilai, bukan empat kombinasi yang dua di
+  antaranya tak punya definisi visual.
+
+  Yang difrost adalah `--color-surface-raised`, **bukan `--color-surface`**: token itu juga isian
+  input, chip, sel tabel dan **kolom beku**, dan kolom beku yang tembus pandang memperlihatkan baris
+  yang menggulung di bawahnya. Komponen tak membawa selector `[data-style]` sama sekali; mereka
+  membaca tiga knob yang no-op di `soft` — `--color-surface-raised`, `--surface-filter`,
+  `--surface-inset`.
+
+  **Seberapa tembus kaca boleh jadi ditentukan gerbang kontras, bukan selera.** Di bawah `.82`
+  (terang) / `.90` (gelap), tinta muted dan `primary-strong` berhenti lolos 4.5:1 begitu panel
+  dikomposit di atas latar sembarang. Gerbangnya sengaja diuji terhadap **dua ekstrem — di atas hitam
+  dan di atas putih** — bukan terhadap warna halaman kit sendiri: versi pertama memakai warna halaman,
+  dan panel empat kali lebih tembus pun lolos, jadi gerbangnya nyaris hampa. Konsekuensinya jujur:
+  kaca di sini **halus**, dan frost yang terlihat datang dari blur-nya, bukan dari alpha-nya.
+
+### Fixed
+- **`--color-surface-raised` tak ikut saat satu subtree di-gelapkan.** Custom property beralias
+  `var(--color-surface)` di-compute di tempat ia dideklarasikan, jadi tanpa nilai `$dark` sendiri ia
+  membeku pada permukaan terang dan sebuah `.fdy-card` di dalam panel `data-theme="dark"` tetap
+  mengecat terang. Ditangkap spec browser `theme.mjs` yang sudah ada, bukan oleh review.
+- **`resolveValue` melewatkan referensi token di dalam ekspresi.** Pola lamanya mengikat seluruh
+  string, jadi `{primary.600}` di dalam `color-mix(...)` lolos mentah ke stylesheet sebagai teks
+  literal. Ketahuan saat wash `-soft` gelap diturunkan dari alias alih-alih memaku warna azure.
+- **Gerbang kontras memipihkan alpha-nya sendiri.** Cabang `color-mix` mengembalikan `a: 1` apa pun
+  masukannya, jadi setiap wash `-soft` diuji seolah-olah opak — kekeliruan yang justru merupakan
+  hal yang pasangan `-soft` itu ada untuk menangkapnya, bersembunyi di dalam alatnya. Kini
+  premultiplied dan alpha-nya dibawa keluar.
+- **`--focus-ring` menunjuk ramp brand langsung**, jadi cincin fokus akan tetap biru di aplikasi
+  yang memilih palet hijau. Kini ikut alias primary.
+- **`CLAUDE.md` mengklaim `data-style` sudah ada.** Grep ke `src/`, `dist/` dan `tokens/`
+  mengembalikan nol: kit belum punya sumbu gaya sama sekali, dan `soft` adalah deskripsi tampilan,
+  bukan sebuah nilai. Spec `2026-07-21` §6 juga menyebut knob `--blur`/`--sat`/`--inset`
+  "dicadangkan, default no-op" — ketiganya tak pernah dibuat. Keduanya kini dikoreksi, karena klaim
+  palsu di dokumen menaikkan estimasi pekerjaan yang bergantung padanya.
+- **`.fdy-busy__panel` disamakan dengan doktrin elevasi** (`USAGE.md`): panel di atas scrim adalah
+  kerabat modal, jadi `--shadow-lift`, bukan `--shadow-3` yang dipakai benda melayang di atas
+  halaman.
+- **Backdrop app-shell menelan klik selama transisinya.** `visibility` adalah properti yang
+  di-transisi, jadi backdrop yang sedang menghilang tetap `visible` sepanjang durasinya dan terus
+  menangkap klik yang ditujukan ke topbar di bawahnya — dan masuk ke mode overlay lebih buruk lagi,
+  karena elemennya berpindah `display:none` → `display:block` dengan visibility beranimasi dari
+  `visible` bawaan, sehingga **sekadar mengganti mode memberi halaman ~200 ms klik mati**. Terukur:
+  `elementFromPoint` di atas tombol nav mengembalikan backdrop-nya. Kini `pointer-events:none`
+  selama tertutup, di jalur mobile maupun overlay. Spec app-shell yang lama sudah menyebut gejala
+  ini dan menyiasatinya dengan menunggu; ini menghapus sebabnya.
+- **Backdrop mobile berhenti memakai warna mentah** (`rgba(8,10,20,.45)`), nilai kasar terakhir yang
+  tersisa di stylesheet komponen. Kini `--color-scrim`, jadi ia menggelap persis seperti overlay lain.
+
+### Guarded
+- **Harness Blazor Server + prerender yang sungguhan** (`test/blazor-server/`, `npm run
+  test:blazor-server`) — host Blazor Server betulan, bukan double bUnit, digerakkan lewat CDP. bUnit
+  merender in-process dengan JS runtime tiruan, jadi setiap test Blazor selama ini **berangkat dari
+  dunia di mana interop sudah bekerja**; justru itu yang tak bisa menjawab `NEXT-UP` #2. **4/4
+  hijau**: prerender mengeluarkan markup penuh tanpa satu pun penanda hidrasi, enhancer hidrat begitu
+  circuit tersambung, `<dialog>` yang dibuka dari .NET benar-benar terbuka lalu tertutup Escape, dan
+  combo yang dipilih dengan mouse asli sampai ke binding .NET.
+
+  **Satu check sempat merah dan sempat dilaporkan sebagai cacat kit. Ia bukan cacat kit.** Enhancer
+  auto-init saat `DOMContentLoaded`, jadi mereka menstempel `data-fdy-*-ready` pada markup
+  **prerender yang sebentar lagi dibuang** Blazor ketika circuit tersambung. Test yang menunggu
+  penanda itu menunggu hal yang salah, dan klik-nya mendarat di node yang akan dilepas — persis
+  gejala "node dilepas, bukan fokus berpindah" yang terukur. Menunggu komponen benar-benar interaktif
+  membuatnya hijau, 3 dari 3 run. Pelajarannya tetap berlaku meski cacatnya tidak ada: **di bawah
+  prerendering, penanda hidrasi bisa benar tentang DOM yang tak punya masa depan.**
+- 4 test node baru (invariant urutan stripe + warnanya), 11 test Chrome baru (selection lintas
+  halaman & non-aktivasi baris, `inert` yang mendarat **dan dilepas**, operasi cepat yang tak
+  melukis apa pun, guard stepper yang menolak), 7 test bUnit baru. **Setiap invariant diverifikasi
+  dengan mutasi**, bukan hanya dijalankan sekali.
+- node 68 → 113 · browser 83 → 92 · bUnit 14 → 21 · **suite baru** blazor-server 4.
+
+### Fixed: the kit's own suite
+- **A coordinate click now reaches its target on a window that is not the author's.** CI went red
+  on a **docs-only** commit — five lines of `HANDOFF.md` — with three unrelated specs failing at
+  once: the stretched card target, the app shell's wide toggle, and the Vue combo's mouse select.
+  All three click at coordinates. The tree that failed differs from the tree that passed by nothing
+  a browser can see, so the cause was the runner's window, not the commit: a target below the fold
+  is clicked where nobody can see it, `elementFromPoint` there is `null`, the click reaches nothing,
+  and the run reports whatever assertion came three lines later. `clickCenter` scrolls the target
+  into view before measuring, and refuses an empty point with an error naming the viewport and the
+  element's rect. Demonstrated on the real failure mode: with the target pushed below a 420×240
+  window the point is provably empty, and the click lands anyway.
+- **`browser/harness-contract.mjs`** (2 tests) pins both halves, because a harness that quietly
+  stops clicking is the one bug the rest of the suite cannot report.
+- An earlier attempt at this also rejected *intercepted* clicks and was reverted: `.fdy-btn--stretch`
+  covers its card through an `::after` pseudo-element that `getBoundingClientRect` cannot see, so
+  the check fired on two tests that were asserting exactly that behaviour. A check with false
+  positives on a documented pattern is worse than no check.
+
+## [2.2.0] - 2026-08-26
+### Added
+- **The raw path can disable, lock and invalidate a picker** (`NEXT-UP.md` #12). `datepicker.css`
+  and `cascade.css` have styled `:disabled`, `[aria-readonly="true"]` and `[aria-invalid="true"]`
+  since they were written, and the enhancers never set any of them — so the states existed only in
+  the stacks that re-implement the control natively (Vue, React), and a **Blazor** app, whose
+  picker *is* the enhancer, could not disable a field at all. Now `data-disabled` /
+  `data-readonly` / `data-invalid` on the seed, plus `data-id` and `data-describedby` so the
+  trigger the enhancer builds can be labelled and described by a form's own markup.
+- **`setState` on four enhancers** — `FreedayDatepicker`, `FreedayCascade`, `FreedayCombo`,
+  `FreedayAutocomplete`: `setState(root, { disabled, readonly, invalid })`. Not decoration: every
+  Blazor wrapper stops rendering once hydrated (`ShouldRender => !Hydrated`), so a parameter that
+  is only *rendered* goes quiet the moment a real form toggles it. The wrappers push through this
+  instead.
+- **The Blazor pickers reach parity** with their Vue and React twins. `FdyDatepicker` goes from 6
+  parameters to 20 (the three states, `Id`, `Describedby`, and the nine calendar navigation
+  labels), `FdyAutocomplete` from 6 to 12, `FdyCascade` from 8 to 13, and `FdyCombo` finally has
+  `Describedby`. Four exemptions remain, each about the platform rather than effort, and each
+  named in `COMPONENTS.md`: `locale` (the enhancer formats through `Intl` from `<html lang>`),
+  `clearable`/`clearLabel` (this path builds no clear button), `ariaLabelledby` (the built trigger
+  is named by `Label`).
+- **`closeLabel` on `FdyModal` and `FdyDrawer`** in Vue and React. Blazor has had `CloseLabel`
+  since it shipped; the other two hard-coded `aria-label="Close"`, so the gap ran in both
+  directions and this is the half nobody had reported yet.
+- **The datepicker's ten labels are overridable**, as `data-fdy-text-prev-month`,
+  `-next-month`, `-prev-year`, `-next-year`, `-prev-years`, `-next-years`, `-choose-month`,
+  `-choose-year`, `-back-to-months`. Month and weekday NAMES still come from `Intl` via the page's
+  `lang`, which is the better hatch; these are the buttons around them.
+### Fixed
+- **A chart series with no label read `Seri 1`.** Indonesian, in a release train whose 2.0.0
+  exists precisely to stop the enhancers mixing languages. It is `Series {n}` now, and
+  overridable. The donut's centre caption (`Total`) was hard-coded in the same file and is
+  overridable too; it is also built as an element rather than assigned through `innerHTML`, since
+  an author-supplied string is not markup.
+- **The table's number-range filter offered `Min` and `Maks`.** Same leftover, same fix:
+  `filterMin` / `filterMax` in the strings table, English by default.
+- **The cascade's own `Select` / `Select…` defaults and the timepicker's `Choose a time`** were
+  literals no host could reach. Both tables now carry them.
+- **A `readonly` autocomplete opened its suggestion list.** The input carries `readonly` natively
+  and the enhancer never read it, so the list dropped over a field nobody could edit.
+### Changed
+- **The hard-coded-string guard (#016) is inverted.** It used to find the line that writes to the
+  DOM and read the literals on it, which cannot see a string passed to a helper —
+  `navButton('‹', 'Previous month', fn)` writes its label inside `navButton`, where the value is a
+  variable. Ten datepicker labels, the timepicker's, the cascade's two, the table's two and the
+  chart's `Seri 1` all hid there, some of them for the whole life of the file. It now reads every
+  literal in every enhancer and asks the opposite question — is this prose, and is it in the
+  `TEXT` table — dropping non-prose by shape (selectors, CSS custom properties, kebab keys,
+  camelCase identifiers, URLs, locale tags) and one short vocabulary of DOM tokens. Verified by
+  reintroducing both blind spots and watching it fail.
+### Added: guards
+- `test/blazor/FdyPickerStateTests.cs`: 7 bUnit tests covering what `dotnet build` cannot see —
+  each parameter reaching the markup the enhancer reads, an absent one leaving no empty attribute
+  behind, and a state change **after** the first render arriving through interop.
+- `browser/picker-states.mjs`: 7 tests in real Chrome with real mouse gestures — a disabled picker
+  that will not open, a readonly one that keeps focus and still refuses, both `aria-invalid` and
+  the `--error` class, `setState` unlocking a picker, and a nav label overridden per element.
+- `test/docs.test.mjs`: the Blazor picker parity guard, Vue's prop surface against the four
+  wrappers, with the four exemptions written out with their reasons rather than a bare list.
+### Notes on the shape of the fix
+- The regression this work caused, and what caught it: naming the new flag `isDisabled` shadowed
+  an **existing** `isDisabled(date)` in the datepicker that decides whether a day falls outside
+  `min`/`max`, so the day grid threw on every render — while the panel still opened and only its
+  cells went missing. Nothing in the node suite noticed; `browser/vanilla.mjs`, which clicks
+  through the calendar in a real browser, failed immediately. The flags are named `state*` now,
+  with the collision written above them.
+
 ## [2.1.0] - 2026-08-25
 ### Added
 - **`singleRow()`, exported from `@cahyo-dimas/freeday/vue` and `/react`** (#045). `FdyCfl` emits

package/COMPONENTS.md

@@ -126,6 +126,7 @@ which is why React's list is longer while offering the same thing.
 |---|---|---|
 | `navOpen?` | `boolean` | Whether the nav is visible. Optional because the default is the **viewport's**, and a caller cannot state that in one initial value. Vue binds `v-model:navOpen`. |
 | `onNavOpenChange?` | `(open: boolean) => void` | React. Visibility changed: the toggle, Escape, the backdrop, or a followed nav item. Vue emits `update:navOpen`. |
+| `navMode?` | `'push' \| 'overlay'` | How a **visible** nav sits on a **wide** viewport: `push` (default) is the column that displaces the content, `overlay` floats it over the page with a backdrop. Below the nav breakpoint it is ignored — the nav is off-canvas there by definition, so there is nothing to choose. Blazor takes the enum `FdyNavMode`. |
 | `title?` | `string` (Vue) · `ReactNode` | Topbar title. |
 | `toggleLabel?` | `string` | Accessible name for the nav toggle button. |
 | `toggleIcon?` | `ReactNode` | React. Replaces the default hamburger; Vue uses the slot of that name. |
@@ -141,8 +142,18 @@ 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`
-- Modifiers: `--nav-open` (mobile drawer open, ≤720px) · `--nav-collapsed` (collapse to zero width,
-  ≥721px) · `--static` (embed the shell in a page instead of filling the viewport)
+- 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)
+
+**`--nav-overlay` is a layout choice, not a second behaviour.** With it the nav floats at *every*
+width, so the drawer's whole code path — backdrop, Escape, close-on-follow, focus into the panel and
+back, `inert` on the content, the Tab trap — is reused rather than re-implemented; only the
+positioning rules differ, and only above the breakpoint. It also changes which state class means
+"visible": `--nav-open` instead of the absence of `--nav-collapsed`, exactly as on a narrow screen.
+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.
 - **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
@@ -278,6 +289,57 @@ sidebar from off-canvas drawer to static column at 721px, *not* at `md`. Any `ma
 utility variant that has to agree with the shell must use `nav`; using `md` leaves 721–959px broken
 (sidebar already static while your script still treats it as an overlay).
 
+**Visual style: `data-style="soft | glass"`.** `soft` is the default and the look the kit has always
+had; `glass` frosts the **raised** surfaces — card, modal, drawer, menu, appbar, the app shell's
+sidebar and topbar. Set it wherever `data-theme` goes, and `[data-style="soft"]` is a real rule, so a
+region can opt back **out** of a glass root.
+
+```html
+<html data-style="glass">
+<section data-style="soft"><!-- this region stays flat --></section>
+```
+
+It frosts `--color-surface-raised`, **never `--color-surface`** — that token is also the fill of
+inputs, chips, table cells and frozen columns, and a translucent frozen column shows the rows
+scrolling underneath it. Components carry no `[data-style]` selector of their own; they read three
+knobs that are no-ops under `soft`: `--color-surface-raised`, `--surface-filter` (the
+`backdrop-filter` value) and `--surface-inset` (a hairline top edge, chained onto the panel's
+shadow). A component that cannot follow the axis through those is reporting a **missing token**, not
+asking for a rule.
+
+**How transparent glass may be is decided by the contrast gate, not by taste.** Below `.82` in light
+and `.90` in dark, muted text and `primary-strong` stop clearing 4.5:1 once the panel is composited
+over an arbitrary ground — measured, and asserted against the two extremes (over black and over
+white) rather than against the kit's own page colour, which is close enough to the panel's own
+lightness that a panel four times more transparent still passed. So glass here is a **subtle** frost:
+the effect people actually see comes from the blur, not from the alpha. Put a photo or a gradient
+behind a panel and the promise still holds; that is what "over any ground" buys.
+
+**Primary palette: `data-primary`.** 18 options — `azure` (the default, and what you get with no
+attribute) · `sky` `blue` `indigo` `violet` `purple` `fuchsia` `pink` `rose` · `orange` `amber`
+`yellow` `lime` `green` `emerald` `teal` `cyan` · `noir`. Set it anywhere `data-theme` works,
+including on a wrapper to re-brand one region:
+
+```html
+<html data-primary="emerald" data-theme="dark">
+```
+
+A palette redefines an eight-shade **alias ramp**, never the semantic tokens. Which shade is the
+fill, which is hover, which is the soft wash is stated once in the token source, so a palette cannot
+disagree with the others about what "primary" means — and `--color-primary`, `--color-primary-hover`,
+`--color-primary-soft`, `--color-primary-border`, `--color-primary-strong` and `--focus-ring` all
+follow, in both themes, with nothing to wire.
+
+**Every palette is contrast-gated, and two carry an exception the gate forced.** All 18 are asserted
+in both themes for the label on a primary fill (AA 4.5), the fill against the surface and the focus
+ring (1.4.11, 3:1), and `primary-strong` on its soft wash over all three surfaces. Three results
+worth knowing, because they look like mistakes otherwise: `yellow` uses a **darker** fill in light
+than the other palettes (at its natural shade it is 2.94:1 on white — below the floor for a UI
+fill), and takes a **white** label there while every other warm palette takes a dark one; `indigo`
+and `violet` shift one step lighter in dark, because at their mid shade neither white nor near-black
+reaches 4.5:1. `noir` is not a hue at all — it re-points the alias ramp at the neutral ramp, so
+"primary" becomes near-black in light and near-white in dark.
+
 Density: `data-density="compact"` works on `<html>` **or any wrapper**, because the selector is a bare
 `[data-density="compact"]` over inheriting custom properties, so one screen can be dense while the
 rest of the app is not. `data-density="comfortable"` is a real rule too, so the reverse also works:
@@ -456,8 +518,9 @@ Native inputs, styled. `.fdy-check` · `.fdy-radio` · `.fdy-switch` on the wrap
 | `invalid?` | `boolean` | Sets `aria-invalid`; pair it with `describedby` pointing at the error text. |
 | `describedby?` | `string` | Id of the help or error text (`aria-describedby`). |
 
-Blazor: the same names in `PascalCase`, bound with `@bind-Value` (`Value` / `ValueChanged`),
-with one absence — there is no `Describedby`, so a Blazor combo cannot point at its own error text.
+Blazor: the same names in `PascalCase`, bound with `@bind-Value` (`Value` / `ValueChanged`).
+`FreedayCombo.setState(root, { disabled, readonly, invalid })` pushes a state change onto a combo
+whose host has stopped re-rendering.
 
 Fully styleable dropdown, APG combobox+listbox. Needs `freeday-select.js`.
 
@@ -501,9 +564,10 @@ keeps matching after selection. Do not put a glyph in that span.
 | `id?` · `ariaLabel?` · `ariaLabelledby?` · `describedby?` | `string` | Input id; its accessible name as text or as a reference; the help/error text it points at. |
 | `disabled?` · `readonly?` · `invalid?` | `boolean` | `readonly` keeps focus and tab order and shows its value, but the input is not editable and the list will not open. Unlike `disabled` it is not greyed. |
 
-Blazor takes six of these — `Value` / `ValueChanged`, `Options`, `Placeholder`, `AriaLabel`,
-`EmptyText` — and no state flags or ids. Its wrapper renders a fixed seed element and does not
-splat unmatched attributes, so those are not reachable from a Blazor page at all.
+Blazor carries all of these. The states live on the input natively, and
+`FreedayAutocomplete.setState(root, { disabled, readonly, invalid })` changes them after the first
+render. A `readonly` input no longer opens its suggestion list, which it used to do over a field
+nobody could edit.
 
 Editable combobox that filters as you type. Needs `freeday-autocomplete.js`.
 
@@ -528,7 +592,10 @@ Editable combobox that filters as you type. Needs `freeday-autocomplete.js`.
 | `id?` · `ariaLabelledby?` · `describedby?` | `string` | Trigger id; the element that labels it; the help/error text it points at. |
 | `disabled?` · `readonly?` · `invalid?` | `boolean` | As on `<FdyCombo>`. |
 
-Blazor calls the tree `Nodes`, adds `SubmenuLabel`, and takes neither the state flags nor the ids.
+Raw path: `data-disabled` / `data-readonly` / `data-invalid`, `data-id`, `data-describedby`, and
+`FreedayCascade.setState(root, { disabled, readonly, invalid })` for a host that rendered once.
+Blazor calls the tree `Nodes`, adds `SubmenuLabel`, and carries everything else except
+`ariaLabelledby` — the trigger it builds is named by `Label`.
 
 Hierarchical drill-down. The data model is a **nested `<ul>`** inside the wrapper: an `<li>` with a
 child `<ul>` is a branch, one without is a leaf. Needs `freeday-cascade.js`.
@@ -675,9 +742,15 @@ a new class.
 The ten label props exist because month and weekday names follow `locale` while the buttons around
 them do not: without these, a Spanish calendar would be navigated by English arrows.
 
-Blazor's picker is much thinner — `Value` / `ValueChanged`, `Label`, `Placeholder`, `Min`, `Max`
-— and its seed element takes no unmatched attributes, so state flags, ids, `clearable` and every
-label above are unreachable there.
+On the **raw path** these all have hooks now: `data-disabled` / `data-readonly` / `data-invalid`,
+`data-id`, `data-describedby`, and one `data-fdy-text-<key>` per label above
+(`data-fdy-text-prev-month`, …). A host that renders its markup once and cannot re-render it can
+change the three states afterwards with `FreedayDatepicker.setState(root, { disabled, readonly,
+invalid })`.
+
+Blazor carries the same surface bar four: `locale` (the enhancer formats through `Intl` from the
+page's `<html lang>`), `clearable` and `clearLabel` (this path builds no clear button), and
+`ariaLabelledby` (the trigger it builds is named by `Label`).
 
 ### Props — `<FdyDateRange>`
 
@@ -842,11 +915,42 @@ variant is `role="img"` + `aria-label`; each interactive star needs a `.fdy-visu
 Linear multi-step flow: marker → check, one panel at a time, back/next. Needs
 `freeday-stepper.js`.
 
-- `.fdy-stepper` (`<ol>`) of `.fdy-step` (`is-active` / `is-complete` set by JS) ·
-  `.fdy-step__btn` `__marker` `__label`
+- `.fdy-stepper` (`<ol>`) of `.fdy-step` (`is-active` / `is-complete` set by JS, `is-error` set by
+  **you**) · `.fdy-step__btn` `__marker` `__badge` `__label`
 - `.fdy-step-panels` wrapping one `.fdy-step-panel` per step (`hidden` on the inactive ones)
 - `.fdy-step-nav` with `data-fdy-step-prev` / `data-fdy-step-next` buttons
 
+**A step with problems: `is-error` + `__badge`.** The marker turns danger and the label with it,
+but colour is never the carrier — put the count in `.fdy-step__badge` and name it in text, because
+a red ring says "something" and a reader who cannot see red is told nothing at all. The badge is a
+**sibling** of the marker, not a child: the enhancer rewrites the marker's contents on every render,
+so a badge inside it would vanish the first time the reader moved a step.
+
+```html
+<li class="fdy-step is-error">
+  <span class="fdy-step__marker">2</span>
+  <span class="fdy-step__badge" aria-hidden="true">3</span>
+  <span class="fdy-step__label">Lines <span class="fdy-visually-hidden">— 3 problems</span></span>
+</li>
+```
+
+**Leaving a step is refusable.** Next, and a forward jump to an already-reached step, both fire a
+cancelable `fdy-step-before-change` (`detail: { from, to, waitFor }`). Going *back* never asks —
+nothing is being committed.
+
+```js
+el.addEventListener('fdy-step-before-change', (e) => {
+  e.preventDefault();                    // refuse now, when the answer is already known
+  e.detail.waitFor = validate(e.detail.from);  // …or defer: a promise resolving false refuses
+});
+```
+
+The enhancer disables both nav buttons and sets `aria-busy` on the `.fdy-stepper` while a promise is
+outstanding, so a second click has nothing to aim at. Resolving to anything but `false` advances —
+a handler that forgets to return is not read as a rejection — and a guard that **throws** advances
+nothing, since it decided nothing. **How validity is decided stays with you**: the kit takes no
+opinion on form libraries, and this event is the line that keeps it that way.
+
 ---
 
 # Data
@@ -868,6 +972,12 @@ Semantic static table. Wrap in `.fdy-table-wrap` (bordered surface) or `.fdy-tab
 (horizontal scroll). Always a `<caption>` (use `.fdy-visually-hidden` if it shouldn't show) and
 `<th scope="col">`. Numeric cells get `.fdy-table__num` (right-aligned, tabular).
 
+**`--striped`** zebras the even body rows. The tint is deliberately *half* a surface step, not the
+full one hover uses, so hover still reads on a striped row instead of matching it — and stripe,
+hover and selection are ordered so the later state always wins. Override the colour through the
+Tier-3 token **`--fdy-table-stripe`** (set it on any ancestor; the rule reads it as a `var()`
+fallback, so your value wins without a specificity fight). Frozen columns stay striped.
+
 ```html
 <div class="fdy-table-wrap">
   <table class="fdy-table">
@@ -980,6 +1090,12 @@ provide the state prop for a concern and you own that concern instead. React nam
 | `rowActivatable?` · `onRowActivate?` | `boolean` · `(row) => void` | Rows become focusable and activate on click, Enter or Space. |
 | `rowClass?` | `(row: Row) => string \| undefined` | Per-row class hook, e.g. marking the selected row. |
 | `expandedKeys?` · `renderRowDetail?` | `ReadonlyArray<string \| number>` · `(row) => ReactNode` | Controlled expansion: these keys get a full-width detail row. Vue uses the `row-detail` slot. |
+| `striped?` | `boolean` | Zebra-stripe the body rows (`.fdy-table--striped`). |
+| `selectable?` | `boolean` | Render the checkbox column and the bulk bar. |
+| `selectedKeys?` · `onSelectedKeysChange?` | `ReadonlyArray<string \| number>` · `(keys) => void` | Controlled selection, as `rowKey` values — the same identity `expandedKeys` uses, because a key survives the re-fetch that replaces every row object. Omit `selectedKeys` and the column still works, keeping the selection internally. The callback fires in **both** modes, so a screen can watch the selection without owning it. Vue emits `update:selectedKeys`; Blazor binds `@bind-SelectedKeys`. |
+| `bulkActions?` | `ReactNode` | React. Content in the bulk bar beside the count; Vue uses the `bulk-actions` slot (scoped: `keys`, `clear`), Blazor `BulkContent`. |
+| `selectedText?` · `clearSelectionText?` | `string` | Bulk-bar copy. Defaults `{n} selected` (with `{n}` substituted) and `Clear`. |
+| `selectAllLabel?` · `selectRowLabel?` · `bulkLabel?` | `string` | Accessible names for the header checkbox, each row checkbox, and the bulk-bar region. Defaults `Select all rows on this page`, `Select row`, `Bulk actions`. |
 | `renderCell?` | `(column, row, value) => ReactNode` | React. Custom cell rendering; Vue uses the `cell` slot. |
 | `toolbar?` | `ReactNode` | React. Content above the table; Vue uses the `toolbar` slot. |
 | `onProcess?` | `(result: { rows, total }) => void` | React. The processed page after filter/sort/paginate, in **both** modes. Vue emits `process`, Blazor calls it `Process`. Render the same set elsewhere — a card list, a summary, a CSV export — without re-deriving the pipeline. |
@@ -988,6 +1104,14 @@ Blazor matches this surface (`LoadingText` and `EmptyContent` in place of `empty
 `Toolbar` and `RowDetail` as `RenderFragment`s) and is the one adapter that also exposes
 `FiltersChanged`.
 
+**Select-all ticks the current page, not the whole result set.** A header checkbox that silently
+selects rows the reader cannot see is how a bulk delete goes wrong, so it acts on the rows on
+screen — and it is `indeterminate` while only some of them are ticked. Keys picked on *other* pages
+are kept rather than dropped, so paging away and back does not lose them; the bulk bar's count is
+the true total across pages, which is why it can read higher than the rows in view. `Clear` empties
+the whole selection. A row checkbox stops its own click, so ticking a row in a `rowActivatable`
+table selects it instead of navigating away from it.
+
 The interactive table: global search, sort, per-column filters, row selection + bulk bar,
 pagination. Needs `freeday-table.js`. Wrap the whole thing in `.fdy-datatable` + `data-fdy-table`
 (`data-page-size="N"`).
@@ -1038,7 +1162,11 @@ pagination. Needs `freeday-table.js`. Wrap the whole thing in `.fdy-datatable` +
   (`data-fdy-text-required`, `data-fdy-text-type`, …), narrower than the per-field
   `data-fdy-msg-<alias>` that still wins. `Freeday.toast()` takes `closeLabel` in its options
   object. `npm test` asserts no enhancer string is written outside its `TEXT` table, so a new one
-  arrives overridable or not at all.
+  arrives overridable or not at all — a claim that was only half true until **2.2.0**, when the
+  guard stopped looking for the line that writes to the DOM and started reading every literal in
+  the file. The old shape could not see a string handed to a helper, which is how ten datepicker
+  labels, the timepicker's, the cascade's two defaults, the table's `Min`/`Maks` filter
+  placeholders and the chart's `Seri 1` all sat outside it.
 
 **Testing note:** a column's filter button and the dialog it opens deliberately share one
 accessible name (`Filter <column>`), since a dialog named after its trigger is the normal pattern. In a
@@ -1132,6 +1260,10 @@ Pure SVG/CSS, no dependency, re-colours with the theme. Needs `freeday-chart.js`
 - Colour: `data-fdy-color="primary"` or `data-fdy-colors="success,warning,danger"` for semantic token
   names **or** `chart-1`…`chart-8` slots to pin a category's colour. Multi-series defaults to the
   validated categorical palette `--chart-1`…`--chart-8`.
+- **Its two strings are overridable**, and until 2.2.0 neither was: a series with no `label` fell
+  back to `Seri 1` — Indonesian, three months after 2.0.0 turned the enhancers English — and the
+  donut's centre caption was hard-coded. Both take the usual hook now:
+  `data-fdy-text-series="Series {n}"` and `data-fdy-text-total="Total"`.
 - Format: `data-fdy-format="number|percent|currency"`; legend `data-fdy-legend` (`none` to drop);
   axes `data-fdy-axes`
 - Sizing is already set by the kit. Override **these**, never a `height` on the chart root (a
@@ -1223,9 +1355,13 @@ Transient notification in a live region. Imperative only:
 ```js
 const node = Freeday.toast({ variant: 'success', title: 'Saved', message: 'INV-1042 saved.' })
 Freeday.toast({ variant: 'danger', title: 'Failed', message: '…', key: 'net-fail' }) // same key replaces
+Freeday.toast({ message: 'Still uploading…', timeout: 0 })   // 0 = stays until dismissed
 Freeday.dismiss('net-fail')  // or Freeday.dismiss(node)
 ```
-Every field is optional; it returns the toast element. Classes (rendered for you):
+Every field is optional; it returns the toast element. **`timeout`** is ms before it auto-dismisses,
+default `4000`, and `0` makes it stick — the enhancer has honoured it since it was written, but this
+line did not exist until 3.0.0, so every app that needed a sticky error toast hand-rolled one.
+Classes (rendered for you):
 `.fdy-toast-region`, `.fdy-toast` (+`--info` `--success` `--warning` `--danger`) · `__accent`
 `__body` `__title` `__text` `__close`.
 
@@ -1245,6 +1381,41 @@ gets `aria-describedby` → the `.fdy-tooltip[role="tooltip"]` `id`.
 duration. `role="progressbar"` with `aria-valuenow/min/max` (omit `valuenow` when indeterminate).
 `.fdy-spinner` (+`--sm` `--lg`) with `role="status"` + `aria-label`.
 
+## Busy overlay — `Freeday.busy()`
+Blocks the screen while an operation runs — a save that must not be double-submitted, a report the
+server is still building. Imperative only, and that is the design, not a shortcut:
+
+```js
+Freeday.busy({ caption: 'Posting invoice…' })   // returns the element
+Freeday.idle()                                  // releases it
+```
+
+- `caption?` — what is happening. Announced politely (`role="status"`). Omitted, it falls back to
+  the kit's default, overridable page-wide with `data-fdy-text-caption` on `<html>`.
+- `delay?` — ms before it appears, default `120`, `0` shows immediately. An operation that finishes
+  in 80ms should never flash a scrim; that reads as a glitch rather than as progress. `idle()`
+  cancels a still-pending show, so a fast operation leaves nothing behind.
+- `mark?` — an `Element` to use instead of the spinner. **Element only, never an HTML string** — a
+  string here would be an injection point in every app that passed user text through it. Brand marks
+  are yours; the kit ships the box and one spinner.
+
+Classes (rendered for you): `.fdy-busy` (+`.is-open`) · `__panel` `__mark` `__caption`.
+
+**One overlay, always.** A second `busy()` while one is up replaces the caption instead of stacking
+a second scrim. That is the whole reason there is no component API and no markup to hand-write: two
+of these on screen, with two captions, from two components that each thought they owned it, is the
+bug this prevents.
+
+**It is not a dialog.** Nothing asks a question and nothing can be dismissed, so there is no focus
+trap and no Escape. Interaction is removed with `inert` on every other child of `<body>` — and only
+on the ones the kit set it on, so an app's own `inert` is never cleared. Focus is parked on the panel
+and handed back to the element that had it once `idle()` runs, because by then that element's
+ancestor is inert and the browser would otherwise have dropped focus to `<body>`.
+
+**Above modals, and not by z-index.** Like the toast region it is a `popover`, so it enters the top
+layer over an open `<dialog>`. Where the Popover API is missing it falls back to a fixed layer at
+`z-index: 190`, which cannot clear an open modal — the same trade the toast region documents.
+
 ## Skeleton — `.fdy-skeleton`
 Size-matched placeholders so nothing shifts when data lands: `--title` `--text` `--circle`
 `--avatar` (+`--avatar-sm` `--avatar-lg`, exactly `.fdy-avatar`'s box).
@@ -1328,12 +1499,13 @@ so the same look serves routed sub-navigation built from plain links. See the no
 | `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. |
 | `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. |
 | `children?` | `ReactNode` | React. The body. Vue: the default slot. |
 
-Blazor binds `@bind-Open` and takes `TitleContent` / `ChildContent` / `FooterContent`, plus two
-things Vue and React do not have: `OnClose` and **`CloseLabel`**. The × in Vue and React is labelled
-`Close` and cannot be renamed.
+Blazor binds `@bind-Open` and takes `TitleContent` / `ChildContent` / `FooterContent`, plus
+`OnClose`. `CloseLabel` used to be Blazor-only, which left the × in Vue and React fixed at `Close`;
+all three stacks carry it now.
 
 Native `<dialog>`: focus trap, Esc and backdrop come from the browser. Sizes `--sm` `--md` `--lg`
 `--wide`; `--cfl` for the choose-from-list dialog.
@@ -1381,6 +1553,7 @@ The modal's props with `side` in place of `size`; the behaviour notes there appl
 | `onClose` | `() => void` | React. Vue emits `close`. |
 | `side?` | `'left' \| 'right'` | Which edge it slides from. |
 | `dismissible?` | `boolean` | Escape, backdrop and × on or off. |
+| `closeLabel?` | `string` | Accessible name for the × button. Default `Close`. |
 | `footer?` | `ReactNode` | React. Vue: the `footer` slot. |
 | `children?` | `ReactNode` | React. The body. Vue: the default 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-v2.1.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v2.1.0)
+[![Release](https://img.shields.io/badge/release-v3.0.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.0.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-v2.1.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v2.1.0)
+[![Release](https://img.shields.io/badge/release-v3.0.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.0.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

@@ -65,7 +65,7 @@ Shadow is a signal, not decoration. There are two families, and the difference m
 | Raised | `--shadow-2` | `.fdy-tooltip`, `.fdy-appbar--elevated` |
 | Floating | `--shadow-3` | Things that float over the page: `.fdy-menu`, `.fdy-filter`, `.fdy-toast`, `.fdy-fab` |
 | Overlay | `--shadow-4` | `.fdy-drawer` |
-| **Lift** | `--shadow-lift` / `--shadow-lift-hover` | **`.fdy-card`** (and `--elevated` / `--interactive:hover`), `.fdy-modal` |
+| **Lift** | `--shadow-lift` / `--shadow-lift-hover` | **`.fdy-card`** (and `--elevated` / `--interactive:hover`), `.fdy-modal`, `.fdy-busy__panel` |
 
 **`.fdy-card` is a lifted surface, not a hairline one.** `--shadow-lift` is a real 34px lift, ~6×
 heavier than `--shadow-1`. That is the whole point of a card, and it is also why a *stack* of them

package/adapters/blazor/FdyAppShell.razor

@@ -6,7 +6,7 @@
    `data-fdy-app` and binds to it: the enhancer announces changes as a bubbling `fdy-app-nav` event
    and accepts them through FreedayAppShell.setVisible. That is the bridge's own doctrine: the
    enhancers stay the source of truth, and it keeps the focus trap from existing a third time. *@
-<div @ref="Root" class="fdy-app" data-fdy-app>
+<div @ref="Root" class="@ShellClass" data-fdy-app>
     @SkipContent
 
     <aside class="fdy-app__sidebar">