@cahyo-dimas/freeday 3.9.0 → 3.9.2

package/CHANGELOG.md

@@ -9,6 +9,57 @@ 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.9.2] - 2026-10-26
+
+**Satu setelan aksesibilitas, dan sebuah scrim yang tak terlihat tetapi tetap menangkap tap.**
+Pemilik app ronda melaporkan dua gejala di iPhone 7 yang tampak terpisah: layar tinggal redup
+sesudah drawer ditutup, dan setiap navigasi butuh dua ketukan. Keduanya satu sebab, dan yang
+memecahkannya dua foto dari perangkat yang sama, identik kecuali Reduce Motion.
+
+Dengan setelan itu menyala, transisi terhitung melaporkan `opacity 0.000001s` dan backdrop diam di
+`opacity 0` serta `visibility hidden` selama tiga detik, dengan kelas `--nav-open` hadir di setiap
+sampel. Dengan setelan itu mati, deret yang sama berjalan 0.87 lalu 1.00. WebKit memaksa durasi
+transisi ke satu mikrodetik di bawah Reduce Motion, dan pada durasi itu transisinya tidak pernah
+berjalan: propertinya tersangkut di nilai awal. Bukan lambat, tidak pernah mulai.
+
+### Fixed
+- **`.fdy-app__backdrop` dinetralkan di bawah `prefers-reduced-motion`** (`#088`). Aturan yang sama
+  mengatur `pointer-events` bersama `opacity`, jadi yang tersangkut bukan sekadar tampilan: foto
+  perangkat merekam `pointer-events: auto` berdampingan dengan `visibility: hidden`, yaitu scrim
+  tak terlihat yang tetap menangkap tap. Ketukan pertama pengguna hilang di sana dan ketukan kedua
+  yang bekerja. Sidebar sudah dinetralkan sejak lama; backdrop terlewat, dan backdrop yang
+  menggerbangi interaksi.
+- **`.fdy-chart__tip` ikut dinetralkan.** Bentuk cacat yang sama persis, ditemukan oleh audit yang
+  sama: transisi yang juga mengatur `pointer-events`, tanpa pagar reduced-motion. `.fdy-tooltip`
+  sudah aman sejak lama.
+- **Penjaga yang mengunci pelajarannya, bukan kasusnya.** Setiap aturan yang mentransisikan
+  properti sambil mengatur `pointer-events` wajib punya pasangannya di dalam blok
+  `prefers-reduced-motion: reduce`. Statis, seperti penjaga `visibility` di 3.9.1, dan karena
+  alasan yang sama: mesin yang bisa melihat cacat ini bukan mesin yang menjalankan uji kit, dan di
+  sini bahkan bukan mesin mana pun tanpa setelan aksesibilitas itu menyala.
+
+## [3.9.1] - 2026-10-26
+
+**Satu properti yang tidak boleh ditransisikan, dan sebuah HP yang membuktikannya.** Sesudah drawer
+ditutup di iPhone 7, scrim-nya tinggal tercat di atas halaman sampai halaman dimuat ulang. Yang
+membuat ini terbaca bukan tebakan melainkan halaman diagnostik yang mencetak gaya terhitung di
+perangkat itu sendiri: `--nav-open` sudah lepas, sidebar sudah kembali ke luar layar,
+`pointer-events` sudah `none`, dan backdrop tetap melaporkan `opacity=1 visibility=visible`. Empat
+dari lima nilai berubah dengan benar, dan yang tertinggal hanya dua.
+
+### Fixed
+- **`visibility` dijeda, tidak ditransisikan, di `.fdy-app__backdrop`** (`#087`). Mentransisikannya
+  sebagai properti beranimasi berdampingan dengan `opacity` membuat Safari kadang tidak pernah
+  menjalankan fade yang menyertainya pada arah visible ke hidden, dan elemennya tinggal tercat.
+  Tidak selalu, dan ketidakkonsistenan itu yang menunjuk transisi alih-alih keadaan yang salah.
+  Polanya kini `visibility 0s linear <durasi>`, yang mengganti nilainya secara diskret: seketika
+  saat membuka, sesudah fade selesai saat menutup. Empat aturan, dua di jalur mobile dan dua di
+  mode overlay lebar.
+- **Penjaga yang menolak `visibility` berdurasi di mana pun di CSS yang dikirim.** Statis dan bukan
+  uji peramban, sebab mesin yang bisa melihat cacat ini bukan mesin yang menjalankan uji kit.
+  Chromium menjalankan transisi itu dengan benar, jadi keduaratus enam uji peramban kit tidak akan
+  pernah menangkapnya. Bentuk cacat yang sama dengan `#057`, dan ia masuk lewat pintu yang sama.
+
 ## [3.9.0] - 2026-10-23
 
 **Rilis ini dimulai sebagai tiga penambahan dan berakhir dengan lima cacat, dan yang menemukan

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.9.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.9.0)
+[![Release](https://img.shields.io/badge/release-v3.9.2-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.9.2)
 
 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.9.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.9.0)
+[![Release](https://img.shields.io/badge/release-v3.9.2-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.9.2)
 
 A token-driven, framework-agnostic UI kit. One source of truth for color, typography,
 spacing, and components. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/dist/freeday.bundle.css

@@ -1359,8 +1359,8 @@ a { color: var(--color-primary-strong); }
 @media (min-width:721px){
   .fdy-app--nav-overlay .fdy-app__sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;width:16rem;z-index:60;transform:translateX(-100%);box-shadow:var(--shadow-4);transition:transform var(--dur-base) var(--ease-standard);}
   .fdy-app--nav-overlay.fdy-app--nav-open .fdy-app__sidebar{transform:translateX(0);}
-  .fdy-app--nav-overlay .fdy-app__backdrop{display:block;position:fixed;inset:0;z-index:55;background:var(--color-scrim);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard),visibility var(--dur-base) var(--ease-standard);}
-  .fdy-app--nav-overlay.fdy-app--nav-open .fdy-app__backdrop{opacity:1;visibility:visible;pointer-events:auto;}
+  .fdy-app--nav-overlay .fdy-app__backdrop{display:block;position:fixed;inset:0;z-index:55;background:var(--color-scrim);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard),visibility 0s linear var(--dur-base);}
+  .fdy-app--nav-overlay.fdy-app--nav-open .fdy-app__backdrop{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--dur-base) var(--ease-standard),visibility 0s linear 0s;}
   /* In overlay mode the sidebar is out of flow, so the collapse-to-zero-width rule above must not
      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);}
@@ -1389,18 +1389,34 @@ a { color: var(--color-primary-strong); }
  * out is reloading the page. Reported from a real iPhone X; not reproducible in Chromium
  * with either mouse click or `touchscreen.tap()`, which is why no test in this kit or in
  * the consuming app had ever caught it. */
+/* `visibility` DITUNDA, tidak ditransisikan. Mentransisikannya sebagai properti beranimasi membuat
+ * Safari kadang tidak pernah menjalankan fade `opacity` yang menyertainya saat visible -> hidden:
+ * kelas sudah lepas, `pointer-events` sudah `none`, sidebar sudah kembali ke luar layar, dan scrim
+ * itu TINGGAL TERCAT di atas halaman sampai halaman dimuat ulang. Diukur di iPhone 7 lewat halaman
+ * diagnostik yang mencetak gaya terhitungnya: `opacity=1 visibility=visible pointer-events=none`
+ * dengan `--nav-open` sudah false. Chromium menjalankannya dengan benar, jadi tak ada uji peramban
+ * di kit ini yang bisa melihatnya; yang menjaganya penjaga bentuk CSS di test/css.test.mjs.
+ * Dengan jeda, `visibility` berganti diskret: seketika saat membuka, sesudah fade saat menutup. */
 .fdy-app__backdrop{display:none;cursor:pointer;}
 @media (max-width:720px){
   .fdy-app__sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;width:16rem;z-index:60;transform:translateX(-100%);transition:transform var(--dur-base) var(--ease-standard);box-shadow:var(--shadow-4);}
   .fdy-app--nav-open .fdy-app__sidebar{transform:translateX(0);}
   /* --color-scrim, not a literal: this was the last raw colour left in a component stylesheet, and
      it also means the drawer behind the nav dims exactly like every other overlay in the kit. */
-  .fdy-app__backdrop{display:block;position:fixed;inset:0;z-index:55;background:var(--color-scrim);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard),visibility var(--dur-base) var(--ease-standard);}
-  .fdy-app--nav-open .fdy-app__backdrop{opacity:1;visibility:visible;pointer-events:auto;}
+  .fdy-app__backdrop{display:block;position:fixed;inset:0;z-index:55;background:var(--color-scrim);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard),visibility 0s linear var(--dur-base);}
+  .fdy-app--nav-open .fdy-app__backdrop{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--dur-base) var(--ease-standard),visibility 0s linear 0s;}
   .fdy-app__main{padding:var(--space-5);}
   .fdy-app__topbar{padding:0 var(--space-4);}
 }
-@media (prefers-reduced-motion:reduce){.fdy-app__sidebar{transition:none;}}
+/* Backdrop ikut dinetralkan, dan ini BUKAN soal selera gerak. WebKit memaksa durasi transisi ke
+ * 0.000001s saat Reduce Motion menyala, dan pada durasi itu transisinya tidak pernah berjalan:
+ * propertinya tersangkut di nilai AWAL selamanya. Diukur di iPhone 7 dengan setelan itu menyala,
+ * tiga detik sesudah drawer terbuka, dengan kelas `--nav-open` SUDAH terpasang di setiap sampel:
+ * `opacity` diam di 0 dan `visibility` diam di `hidden`, sementara `pointer-events` sudah `auto`.
+ * Scrim yang tak terlihat tetapi menangkap tap, jadi ketukan pertama pengguna hilang dan ketukan
+ * kedua yang bekerja. Setelan yang sama dimatikan, deret yang sama berjalan 0.87 lalu 1.00.
+ * Sidebar sudah dinetralkan sejak lama; backdrop terlewat, dan ia yang menggerbangi interaksi. */
+@media (prefers-reduced-motion:reduce){.fdy-app__sidebar{transition:none;}.fdy-app__backdrop{transition:none;}}
 
 /* Freeday. App bar (standalone top bar: brand · actions · spacer).
  * Distinct from .fdy-app__topbar (which is bound to the shell grid). Use anywhere;
@@ -2027,6 +2043,12 @@ a { color: var(--color-primary-strong); }
 .fdy-chart-xy__bar{transition:opacity var(--dur-fast) var(--ease-standard);}
 .fdy-chart-xy__band{fill:transparent;cursor:pointer;}
 
+/* Sama sebabnya dengan `.fdy-app__backdrop`: transisi yang juga menggerbangi `pointer-events` dapat
+ * tersangkut di nilai awal ketika WebKit memaksa durasinya ke nol di bawah Reduce Motion, dan yang
+ * tersisa adalah elemen tak terlihat yang tetap menangkap tap. Tooltip sudah dinetralkan sejak lama
+ * untuk alasan yang sama; tip chart terlewat. */
+@media (prefers-reduced-motion:reduce){.fdy-chart__tip{transition:none;}}
+
 /* Freeday. Chip (tag / removable filter) */
 .fdy-chip{display:inline-flex;align-items:center;gap:var(--space-2);height:1.75rem;padding:0 var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text);background:var(--color-surface-3);border:var(--bw) solid var(--color-border);}
 .fdy-chip--primary{color:var(--color-primary-strong);background:var(--color-primary-soft);border-color:rgba(var(--color-primary-rgb),.22);}

package/dist/freeday.css

@@ -182,8 +182,8 @@ a { color: var(--color-primary-strong); }
 @media (min-width:721px){
   .fdy-app--nav-overlay .fdy-app__sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;width:16rem;z-index:60;transform:translateX(-100%);box-shadow:var(--shadow-4);transition:transform var(--dur-base) var(--ease-standard);}
   .fdy-app--nav-overlay.fdy-app--nav-open .fdy-app__sidebar{transform:translateX(0);}
-  .fdy-app--nav-overlay .fdy-app__backdrop{display:block;position:fixed;inset:0;z-index:55;background:var(--color-scrim);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard),visibility var(--dur-base) var(--ease-standard);}
-  .fdy-app--nav-overlay.fdy-app--nav-open .fdy-app__backdrop{opacity:1;visibility:visible;pointer-events:auto;}
+  .fdy-app--nav-overlay .fdy-app__backdrop{display:block;position:fixed;inset:0;z-index:55;background:var(--color-scrim);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard),visibility 0s linear var(--dur-base);}
+  .fdy-app--nav-overlay.fdy-app--nav-open .fdy-app__backdrop{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--dur-base) var(--ease-standard),visibility 0s linear 0s;}
   /* In overlay mode the sidebar is out of flow, so the collapse-to-zero-width rule above must not
      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);}
@@ -212,18 +212,34 @@ a { color: var(--color-primary-strong); }
  * out is reloading the page. Reported from a real iPhone X; not reproducible in Chromium
  * with either mouse click or `touchscreen.tap()`, which is why no test in this kit or in
  * the consuming app had ever caught it. */
+/* `visibility` DITUNDA, tidak ditransisikan. Mentransisikannya sebagai properti beranimasi membuat
+ * Safari kadang tidak pernah menjalankan fade `opacity` yang menyertainya saat visible -> hidden:
+ * kelas sudah lepas, `pointer-events` sudah `none`, sidebar sudah kembali ke luar layar, dan scrim
+ * itu TINGGAL TERCAT di atas halaman sampai halaman dimuat ulang. Diukur di iPhone 7 lewat halaman
+ * diagnostik yang mencetak gaya terhitungnya: `opacity=1 visibility=visible pointer-events=none`
+ * dengan `--nav-open` sudah false. Chromium menjalankannya dengan benar, jadi tak ada uji peramban
+ * di kit ini yang bisa melihatnya; yang menjaganya penjaga bentuk CSS di test/css.test.mjs.
+ * Dengan jeda, `visibility` berganti diskret: seketika saat membuka, sesudah fade saat menutup. */
 .fdy-app__backdrop{display:none;cursor:pointer;}
 @media (max-width:720px){
   .fdy-app__sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;width:16rem;z-index:60;transform:translateX(-100%);transition:transform var(--dur-base) var(--ease-standard);box-shadow:var(--shadow-4);}
   .fdy-app--nav-open .fdy-app__sidebar{transform:translateX(0);}
   /* --color-scrim, not a literal: this was the last raw colour left in a component stylesheet, and
      it also means the drawer behind the nav dims exactly like every other overlay in the kit. */
-  .fdy-app__backdrop{display:block;position:fixed;inset:0;z-index:55;background:var(--color-scrim);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard),visibility var(--dur-base) var(--ease-standard);}
-  .fdy-app--nav-open .fdy-app__backdrop{opacity:1;visibility:visible;pointer-events:auto;}
+  .fdy-app__backdrop{display:block;position:fixed;inset:0;z-index:55;background:var(--color-scrim);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard),visibility 0s linear var(--dur-base);}
+  .fdy-app--nav-open .fdy-app__backdrop{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--dur-base) var(--ease-standard),visibility 0s linear 0s;}
   .fdy-app__main{padding:var(--space-5);}
   .fdy-app__topbar{padding:0 var(--space-4);}
 }
-@media (prefers-reduced-motion:reduce){.fdy-app__sidebar{transition:none;}}
+/* Backdrop ikut dinetralkan, dan ini BUKAN soal selera gerak. WebKit memaksa durasi transisi ke
+ * 0.000001s saat Reduce Motion menyala, dan pada durasi itu transisinya tidak pernah berjalan:
+ * propertinya tersangkut di nilai AWAL selamanya. Diukur di iPhone 7 dengan setelan itu menyala,
+ * tiga detik sesudah drawer terbuka, dengan kelas `--nav-open` SUDAH terpasang di setiap sampel:
+ * `opacity` diam di 0 dan `visibility` diam di `hidden`, sementara `pointer-events` sudah `auto`.
+ * Scrim yang tak terlihat tetapi menangkap tap, jadi ketukan pertama pengguna hilang dan ketukan
+ * kedua yang bekerja. Setelan yang sama dimatikan, deret yang sama berjalan 0.87 lalu 1.00.
+ * Sidebar sudah dinetralkan sejak lama; backdrop terlewat, dan ia yang menggerbangi interaksi. */
+@media (prefers-reduced-motion:reduce){.fdy-app__sidebar{transition:none;}.fdy-app__backdrop{transition:none;}}
 
 /* Freeday. App bar (standalone top bar: brand · actions · spacer).
  * Distinct from .fdy-app__topbar (which is bound to the shell grid). Use anywhere;
@@ -850,6 +866,12 @@ a { color: var(--color-primary-strong); }
 .fdy-chart-xy__bar{transition:opacity var(--dur-fast) var(--ease-standard);}
 .fdy-chart-xy__band{fill:transparent;cursor:pointer;}
 
+/* Sama sebabnya dengan `.fdy-app__backdrop`: transisi yang juga menggerbangi `pointer-events` dapat
+ * tersangkut di nilai awal ketika WebKit memaksa durasinya ke nol di bawah Reduce Motion, dan yang
+ * tersisa adalah elemen tak terlihat yang tetap menangkap tap. Tooltip sudah dinetralkan sejak lama
+ * untuk alasan yang sama; tip chart terlewat. */
+@media (prefers-reduced-motion:reduce){.fdy-chart__tip{transition:none;}}
+
 /* Freeday. Chip (tag / removable filter) */
 .fdy-chip{display:inline-flex;align-items:center;gap:var(--space-2);height:1.75rem;padding:0 var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text);background:var(--color-surface-3);border:var(--bw) solid var(--color-border);}
 .fdy-chip--primary{color:var(--color-primary-strong);background:var(--color-primary-soft);border-color:rgba(var(--color-primary-rgb),.22);}

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.9.0"` (public npm package). `dist/` is
+Lands in `package.json` as `"@cahyo-dimas/freeday": "^3.9.2"` (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.9.0",
+  "version": "3.9.2",
   "description": "Freeday: token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",

package/src/components/app-shell.css

@@ -103,8 +103,8 @@
 @media (min-width:721px){
   .fdy-app--nav-overlay .fdy-app__sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;width:16rem;z-index:60;transform:translateX(-100%);box-shadow:var(--shadow-4);transition:transform var(--dur-base) var(--ease-standard);}
   .fdy-app--nav-overlay.fdy-app--nav-open .fdy-app__sidebar{transform:translateX(0);}
-  .fdy-app--nav-overlay .fdy-app__backdrop{display:block;position:fixed;inset:0;z-index:55;background:var(--color-scrim);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard),visibility var(--dur-base) var(--ease-standard);}
-  .fdy-app--nav-overlay.fdy-app--nav-open .fdy-app__backdrop{opacity:1;visibility:visible;pointer-events:auto;}
+  .fdy-app--nav-overlay .fdy-app__backdrop{display:block;position:fixed;inset:0;z-index:55;background:var(--color-scrim);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard),visibility 0s linear var(--dur-base);}
+  .fdy-app--nav-overlay.fdy-app--nav-open .fdy-app__backdrop{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--dur-base) var(--ease-standard),visibility 0s linear 0s;}
   /* In overlay mode the sidebar is out of flow, so the collapse-to-zero-width rule above must not
      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);}
@@ -133,15 +133,31 @@
  * out is reloading the page. Reported from a real iPhone X; not reproducible in Chromium
  * with either mouse click or `touchscreen.tap()`, which is why no test in this kit or in
  * the consuming app had ever caught it. */
+/* `visibility` DITUNDA, tidak ditransisikan. Mentransisikannya sebagai properti beranimasi membuat
+ * Safari kadang tidak pernah menjalankan fade `opacity` yang menyertainya saat visible -> hidden:
+ * kelas sudah lepas, `pointer-events` sudah `none`, sidebar sudah kembali ke luar layar, dan scrim
+ * itu TINGGAL TERCAT di atas halaman sampai halaman dimuat ulang. Diukur di iPhone 7 lewat halaman
+ * diagnostik yang mencetak gaya terhitungnya: `opacity=1 visibility=visible pointer-events=none`
+ * dengan `--nav-open` sudah false. Chromium menjalankannya dengan benar, jadi tak ada uji peramban
+ * di kit ini yang bisa melihatnya; yang menjaganya penjaga bentuk CSS di test/css.test.mjs.
+ * Dengan jeda, `visibility` berganti diskret: seketika saat membuka, sesudah fade saat menutup. */
 .fdy-app__backdrop{display:none;cursor:pointer;}
 @media (max-width:720px){
   .fdy-app__sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;width:16rem;z-index:60;transform:translateX(-100%);transition:transform var(--dur-base) var(--ease-standard);box-shadow:var(--shadow-4);}
   .fdy-app--nav-open .fdy-app__sidebar{transform:translateX(0);}
   /* --color-scrim, not a literal: this was the last raw colour left in a component stylesheet, and
      it also means the drawer behind the nav dims exactly like every other overlay in the kit. */
-  .fdy-app__backdrop{display:block;position:fixed;inset:0;z-index:55;background:var(--color-scrim);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard),visibility var(--dur-base) var(--ease-standard);}
-  .fdy-app--nav-open .fdy-app__backdrop{opacity:1;visibility:visible;pointer-events:auto;}
+  .fdy-app__backdrop{display:block;position:fixed;inset:0;z-index:55;background:var(--color-scrim);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard),visibility 0s linear var(--dur-base);}
+  .fdy-app--nav-open .fdy-app__backdrop{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--dur-base) var(--ease-standard),visibility 0s linear 0s;}
   .fdy-app__main{padding:var(--space-5);}
   .fdy-app__topbar{padding:0 var(--space-4);}
 }
-@media (prefers-reduced-motion:reduce){.fdy-app__sidebar{transition:none;}}
+/* Backdrop ikut dinetralkan, dan ini BUKAN soal selera gerak. WebKit memaksa durasi transisi ke
+ * 0.000001s saat Reduce Motion menyala, dan pada durasi itu transisinya tidak pernah berjalan:
+ * propertinya tersangkut di nilai AWAL selamanya. Diukur di iPhone 7 dengan setelan itu menyala,
+ * tiga detik sesudah drawer terbuka, dengan kelas `--nav-open` SUDAH terpasang di setiap sampel:
+ * `opacity` diam di 0 dan `visibility` diam di `hidden`, sementara `pointer-events` sudah `auto`.
+ * Scrim yang tak terlihat tetapi menangkap tap, jadi ketukan pertama pengguna hilang dan ketukan
+ * kedua yang bekerja. Setelan yang sama dimatikan, deret yang sama berjalan 0.87 lalu 1.00.
+ * Sidebar sudah dinetralkan sejak lama; backdrop terlewat, dan ia yang menggerbangi interaksi. */
+@media (prefers-reduced-motion:reduce){.fdy-app__sidebar{transition:none;}.fdy-app__backdrop{transition:none;}}

package/src/components/chart.css

@@ -53,3 +53,9 @@
 .fdy-chart-xy__dot{stroke:var(--color-surface);stroke-width:1;}
 .fdy-chart-xy__bar{transition:opacity var(--dur-fast) var(--ease-standard);}
 .fdy-chart-xy__band{fill:transparent;cursor:pointer;}
+
+/* Sama sebabnya dengan `.fdy-app__backdrop`: transisi yang juga menggerbangi `pointer-events` dapat
+ * tersangkut di nilai awal ketika WebKit memaksa durasinya ke nol di bawah Reduce Motion, dan yang
+ * tersisa adalah elemen tak terlihat yang tetap menangkap tap. Tooltip sudah dinetralkan sejak lama
+ * untuk alasan yang sama; tip chart terlewat. */
+@media (prefers-reduced-motion:reduce){.fdy-chart__tip{transition:none;}}