@cahyo-dimas/freeday 3.9.0 → 3.9.1

package/CHANGELOG.md

@@ -9,6 +9,28 @@ 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.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.1-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.9.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.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.1-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.9.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/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,14 +1389,22 @@ 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);}
 }

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,14 +212,22 @@ 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);}
 }

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.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.9.0",
+  "version": "3.9.1",
   "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,14 +133,22 @@
  * 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);}
 }