@cahyo-dimas/freeday 3.3.0 → 3.3.1

package/CHANGELOG.md

@@ -9,6 +9,34 @@ benar. Perubahan seperti itu ditulis di bawah `### Changed: BREAKING (types)`
 lama → tipe baru, dan cara menyempitkannya — bukan di bawah `### Added`, betapapun aditifnya dari
 sisi kit.
 
+## [3.3.1] - 2026-09-07
+
+**Tautan lewati yang tak punya tujuan, di tiga stack sekaligus.** `#056` (dari `keamanan-cluster`)
+menunjuk satu kalimat di COMPONENTS.md — *"the markup below is for stacks without an adapter (and is
+what the wrapper renders)"* — lalu menunjukkan bahwa untuk `.fdy-app__main` kalimat itu tidak benar.
+Markup mentahnya membawa `id="main"`; ketiga wrapper typed tidak membawa apa pun. Jadi `.fdy-skip`
+yang didokumentasikan dengan `href="#main"` merender tautan yang menerima fokus lalu tidak
+memindahkan siapa pun. Ini bentuk kegagalan yang paling sulit terlihat: tak ada galat, tak ada yang
+tampak salah, dan pemeriksaan visual tak akan pernah menangkapnya — app yang melaporkannya memilih
+**tidak memasang tautan lewati sama sekali**, karena tak ada yang bisa dituju.
+
+### Fixed
+- **`FdyAppShell` merender `<main id="main" tabindex="-1">` di Vue, React dan Blazor** (`#056` §1).
+  `id` menyamakan wrapper dengan markup mentah yang sudah didokumentasikan; `tabindex="-1"` diambil
+  dari `docs/reference-screen.html`, yang selama ini lebih benar daripada skeleton di COMPONENTS.md —
+  tanpa itu tautan fragmen menggulung halaman tanpa memindahkan fokus, sehingga Tab berikutnya
+  melanjutkan dari tempat pembaca tadi, bukan dari tempat ia dikirim. Skeleton COMPONENTS.md ikut
+  disamakan. Dijaga uji paritas baru di `browser/adapter.mjs` (Vue, React) dan
+  `test/blazor/FdyAppShellTests.cs` (Blazor).
+
+### Docs
+- **`.fdy-title-page` menyebut level headingnya di dalam shell** (`#056` §2). Tabel tipografi
+  menuliskan `<h1>`, "One per screen", sementara `docs/reference-screen.html` memakai
+  `<h2 class="fdy-title-page">` karena `.fdy-app__title` di topbar sudah menjadi `<h1>` layar itu.
+  Menyusun keduanya persis seperti dokumentasi menghasilkan dua `<h1>` — yang justru dilarang
+  kalimat di sebelahnya. Tabelnya kini menyebut kedua kasus; keputusan yang dipakai adalah keputusan
+  yang sudah diambil reference screen, bukan keputusan baru.
+
 ## [3.3.0] - 2026-08-28
 
 **Tiga kemampuan yang sebenarnya sudah ada di kit ini, dan tak satu pun bisa diminta.** `#054` dan

package/COMPONENTS.md

@@ -156,7 +156,10 @@ positioning rules differ, and only above the breakpoint. It also changes which s
 On the raw path, if you add or remove the class yourself, call
 **`FreedayAppShell.refresh(root)`** afterwards — the shell has to re-read the DOM, or `inert` and
 `aria-expanded` keep describing the arrangement you just left.
-- Also: `.fdy-skip`, the skip-to-content link, first child of the shell.
+- Also: `.fdy-skip`, the skip-to-content link, first child of the shell. Its target is
+  `__main`, which carries `id="main"` **and `tabindex="-1"`** — without the latter a fragment
+  link scrolls the page without moving focus, so the next Tab resumes from where the reader
+  was, not from where they were sent. The typed wrappers render both.
 - **Behaviour: `freeday-app-shell.js`.** Opt in with `data-fdy-app` on the root. The markup below
   is unchanged. It owns the toggle in both modes plus everything an overlay needs that hand-rolling
   reliably forgets: Escape, backdrop click, closing when a `.fdy-nav__item` is followed, focus moved
@@ -209,7 +212,7 @@ tall containing block. The brand goes in the **sidebar** (sized to match the top
       <h1 class="fdy-app__title">Invoices</h1><!-- auto-spacer: pushes what follows right -->
       <!-- topbar actions -->
     </header>
-    <main class="fdy-app__main" id="main"><!-- .fdy-page goes here --></main>
+    <main class="fdy-app__main" id="main" tabindex="-1"><!-- .fdy-page goes here --></main>
   </div>
 
   <div class="fdy-app__backdrop"></div>
@@ -283,7 +286,7 @@ One role per level of hierarchy. Never re-use a card title for a page title.
 | Class | Element | Use |
 |---|---|---|
 | `.fdy-eyebrow` | `<p>` | Small uppercase label above a title. Optional. |
-| `.fdy-title-page` | `<h1>` | One per screen. |
+| `.fdy-title-page` | `<h1>` · `<h2>` in a shell | One `<h1>` per screen. Standalone page: `<h1>`. Inside `.fdy-app`, the topbar's `.fdy-app__title` is already that `<h1>`, so the page title steps down to `<h2>` — as `docs/reference-screen.html` does. |
 | `.fdy-title-section` | `<h2>` | A region inside the page. |
 | `.fdy-title-card` | `<h3>` | A title inside a card or row (`.fdy-card__title` is equivalent). |
 | `.fdy-text-muted` · `.fdy-text-subtle` | any | Secondary / tertiary text colour. |

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.3.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.3.0)
+[![Release](https://img.shields.io/badge/release-v3.3.1-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.3.1)
 
 UI KIT yang token-driven & framework-agnostic. Satu sumber kebenaran untuk warna, tipografi,
 spasi, dan komponen. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/README.md

@@ -5,7 +5,7 @@
 > **More free days for devs. The UI kit is ready to use.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v3.3.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.3.0)
+[![Release](https://img.shields.io/badge/release-v3.3.1-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.3.1)
 
 A token-driven, framework-agnostic UI kit. One source of truth for color, typography,
 spacing, and components. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/adapters/blazor/FdyAppShell.razor

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

package/adapters/react/components/FdyAppShell.tsx

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

package/adapters/vue/components/FdyAppShell.vue

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

package/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.3.0"` (public npm package). `dist/` is
+Lands in `package.json` as `"@cahyo-dimas/freeday": "^3.3.1"` (public npm package). `dist/` is
 committed and published → no build step; `npm ci` runs without auth.
 
 ### 2. Import the CSS + enhancers **once** in your entry (`src/main.ts`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "description": "Freeday: token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",