for-humanity 0.4.2 → 0.4.3

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 0.4.3 — 2026-10-04
+
+- Use standard native navigation scrollbars in forced-color mode so browser color adjustment cannot hide custom thumbs against the background.
+
 ## 0.4.2 — 2026-10-04
 
 - Preserve sidebar and mobile drawer scroll positions across document navigation and reloads within a tab, independently of the main content.

package/README.md

@@ -33,7 +33,7 @@ Write Markdown. Keep the context. Share a static site.
 Node.js 22 or later and pnpm. Install the CLI in your document project:
 
 ```sh
-pnpm add -D --save-exact for-humanity@0.4.2
+pnpm add -D --save-exact for-humanity@0.4.3
 mkdir docs
 ```
 
@@ -52,7 +52,7 @@ pnpm exec for-humanity preview docs
 
 If your Markdown files are in the project root, use `.` instead of `docs`. The root `README.md` becomes the home page; root `AGENTS.md` and `CLAUDE.md` stay out of the site.
 
-Version `0.4.2` supports `dev`, `build` and `preview`. `init` is planned; see the [Roadmap](https://github.com/minu-ha/for-humanity/blob/main/templates/document/roadmap.md) and [Changelog](https://github.com/minu-ha/for-humanity/blob/main/CHANGELOG.md).
+Version `0.4.3` supports `dev`, `build` and `preview`. `init` is planned; see the [Roadmap](https://github.com/minu-ha/for-humanity/blob/main/templates/document/roadmap.md) and [Changelog](https://github.com/minu-ha/for-humanity/blob/main/CHANGELOG.md).
 Cloudflare Pages can host the generated site. See [Deployment](https://github.com/minu-ha/for-humanity/blob/main/templates/document/deployment.md) for the build settings.
 
 ### Develop the kit
@@ -74,7 +74,7 @@ pnpm preview    # Preview the static site
 pnpm build:pages # Add Cloudflare Pages headers and a 404 page
 ```
 
-Changes pushed to `main` update the documentation site. A stable version tag such as `v0.4.2` runs checks, publishes the package to npm, then creates a GitHub Release with the same package file.
+Changes pushed to `main` update the documentation site. A stable version tag such as `v0.4.3` runs checks, publishes the package to npm, then creates a GitHub Release with the same package file.
 The npm README updates with each package release. See [Maintenance](https://github.com/minu-ha/for-humanity/blob/main/templates/document/maintenance.md#packaging-and-release) for the release steps.
 
 ## Make it yours

package/dist/cli.css

@@ -1031,15 +1031,23 @@
 }
 @media (forced-colors: active) {
   .wg_shell__sidebar {
-    scrollbar-width: auto;
+    scrollbar-width: thin;
     scrollbar-color: auto;
-    &::-webkit-scrollbar-thumb {
-      background: CanvasText;
+    &:hover {
+      scrollbar-color: auto;
+    }
+    &:focus-within {
+      scrollbar-color: auto;
     }
   }
   .wg_shell__drawer {
-    &::-webkit-scrollbar-thumb {
-      background: CanvasText;
+    scrollbar-width: thin;
+    scrollbar-color: auto;
+    &:hover {
+      scrollbar-color: auto;
+    }
+    &:focus-within {
+      scrollbar-color: auto;
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "for-humanity",
-    "version": "0.4.2",
+    "version": "0.4.3",
     "description": "Documents written for humans to read: a docs kit with a sidebar, parts, sections and flowcharts, built on Hono and React",
     "keywords": [
         "docs",

package/src/component/widget/shell/wg-shell.css

@@ -294,17 +294,29 @@
 /* 색상 강제 환경은 시스템 손잡이 유지 · 대비 설정을 덮어쓰지 않음 */
 @media (forced-colors: active) {
     .wg_shell__sidebar {
-        scrollbar-width: auto;
+        /* non-auto 표준 폭은 WebKit 전용 스타일을 비활성화해 네이티브 색상 유지 */
+        scrollbar-width: thin;
         scrollbar-color: auto;
 
-        &::-webkit-scrollbar-thumb {
-            background: CanvasText;
+        &:hover {
+            scrollbar-color: auto;
+        }
+
+        &:focus-within {
+            scrollbar-color: auto;
         }
     }
 
     .wg_shell__drawer {
-        &::-webkit-scrollbar-thumb {
-            background: CanvasText;
+        scrollbar-width: thin;
+        scrollbar-color: auto;
+
+        &:hover {
+            scrollbar-color: auto;
+        }
+
+        &:focus-within {
+            scrollbar-color: auto;
         }
     }
 }