@cahyo-dimas/freeday 1.54.0 → 2.1.0

package/docs/integrations.md

@@ -3,7 +3,7 @@
 Freeday is a **dependency-free foundation**: tokens + accessible markup + vanilla enhancers. This
 document maps each area to the ecosystem library you'd normally install in a real project, **when**
 Freeday's built-ins are enough, and **how to bridge**. The goal: when you start a new project, open
-this one file — no more hunting around.
+this one file, so there's no hunting around.
 
 > Golden rule: **Freeday owns the look (tokens + markup + a11y); the library owns the engine
 > (heavy logic).** Don't duplicate. Connect through the 3 mechanisms below.
@@ -14,11 +14,11 @@ this one file — no more hunting around.
 
 Every integration comes down to one of these:
 
-1. **`fdy-*` events** — listen to enhancer output, forward it to framework/library state.
+1. **`fdy-*` events:** listen to enhancer output, forward it to framework/library state.
    All events are bubbling `CustomEvent`s; the data is in `event.detail`.
-2. **Init hook `window.Freeday<X>.initAll(el)`** — call it again after DOM is rendered
+2. **Init hook `window.Freeday<X>.initAll(el)`:** call it again after DOM is rendered
    dynamically (Vue `onMounted`, React `useEffect`, Blazor `OnAfterRenderAsync`). Idempotent.
-3. **Color tokens** — match a library's colors to the active theme:
+3. **Color tokens:** match a library's colors to the active theme:
    ```js
    // Read a live semantic token so a 3rd-party lib matches the current theme
    const token = (name) =>
@@ -79,7 +79,7 @@ library only.
 | Virtual scroll | 🔌 | — | **TanStack Virtual** · Vue: **vue-virtual-scroller** | — |
 
 > **Monospace data cells:** add `.fdy-mono` to any identifier / code / IP / timestamp cell (or an
-> inline `<span>`) to render it in the data font with tabular figures. It is alignment-neutral —
+> inline `<span>`) to render it in the data font with tabular figures. It is alignment-neutral,
 > unlike `.fdy-table__num`, which is also right-aligned. `FdyTable` applies it automatically to any
 > column with `mono: true`.
 
@@ -115,7 +115,7 @@ library only.
 
 | Area | Freeday enough? | When the built-in is enough | If you need more | Bridge |
 |---|---|---|---|---|
-| Icons | ➕ (inline SVG) | A small built-in set | A full set: **Lucide** (best fit — Freeday uses this stroke style), **Heroicons**, **Tabler**, **Phosphor** | Drop the SVG into a slot: `[data-fdy-icon]`, `.fdy-input-group__addon--icon`, `.fdy-combo__icon`. |
+| Icons | ➕ (inline SVG) | A small built-in set | A full set: **Lucide** (best fit, since Freeday uses this stroke style), **Heroicons**, **Tabler**, **Phosphor** | Drop the SVG into a slot: `[data-fdy-icon]`, `.fdy-input-group__addon--icon`, `.fdy-combo__icon`. |
 | Drag & drop / sortable | 🔌 | — | **SortableJS** (vanilla) · React: **dnd-kit** · Vue: **vuedraggable** | Lay it out with Freeday markup, DnD from the library. |
 | Command palette | 🔌 | — | **cmdk** (React) · **kbar** | Style with tokens + `.fdy-kbd`. |
 | Routing | 🔌 | — | Vue Router · React Router · Blazor Router | After a route change → `window.FreedayTable.initAll()`, etc. |
@@ -124,8 +124,8 @@ library only.
 
 ## Per-framework binding
 
-> **Recommended path:** use the ready-made adapters — the `useFreeday` composable (Vue), the
-> `useFreeday` hook (React), or `window.FreedayBlazor` (Blazor) — which wrap hydration + event
+> **Recommended path:** use the ready-made adapters: the `useFreeday` composable (Vue), the
+> `useFreeday` hook (React), or `window.FreedayBlazor` (Blazor). They wrap hydration + event
 > bridging. Full steps per stack are in **[`getting-started.md`](getting-started.md)**. The raw
 > `initAll()` pattern below is the underlying mechanism (and a fallback if you don't use an adapter).
 
@@ -154,7 +154,7 @@ function Panel(): JSX.Element {
 ```
 > **Controlled alternative (parity with Vue's `v-model`):** `@cahyo-dimas/freeday/react` also exports
 > the typed components `FdyCombo` / `FdyDatepicker` / `FdyDateRange` / `FdyAutocomplete` /
-> `FdyCascade` / `FdyCfl` / `FdyChart` / `FdyTable` / `FdyModal` / `FdyDrawer` — plain
+> `FdyCascade` / `FdyCfl` / `FdyChart` / `FdyTable` / `FdyModal` / `FdyDrawer` / `FdyAppShell`, with plain
 > `value`/`onChange` (props in, events out), no `data-fdy-*` + manual event listener:
 > ```tsx
 > import { FdyCombo } from '@cahyo-dimas/freeday/react';
@@ -168,22 +168,22 @@ function Panel(): JSX.Element {
 > `row-detail`/`renderRowDetail` + controlled `expandedKeys`); `FdyModal`/`FdyDrawer` take `open` +
 > `onClose`.
 >
-> **Responsive list screens — drive the page from outside the table.** `FdyTable`'s pager renders
+> **Responsive list screens: drive the page from outside the table.** `FdyTable`'s pager renders
 > inside `.fdy-datatable`, so a screen that hides the table below `md` and shows a card list loses it.
 > Pass **`pageIndex`** (+ `update:pageIndex` / `onPageIndexChange` / `PageIndexChanged`) to own the
 > client-side index while the table still does filter/sort/paginate: render **one** pager outside for
 > both breakpoints, feed the card list from the **`process`** event (`{ rows, total }`), and build the
 > pager's page window with `pageWindow` from `@cahyo-dimas/freeday/table-model` so it is literally the
-> same computation the table uses. One page index can then span several tables — which is what a
+> same computation the table uses. One page index can then span several tables, which is what a
 > grouped list needs. The same set is available
-> in `@cahyo-dimas/freeday/vue` via `v-model` / props — both adapters are fully symmetric. See
+> in `@cahyo-dimas/freeday/vue` via `v-model` / props, and both adapters are fully symmetric. See
 > [`getting-started.md` §React](getting-started.md#react-vite) and
 > `examples/react-faktur/src/App.tsx`. **Vite** transpiles the `.tsx` source with no extra config;
 > **Next.js** may need `transpilePackages: ['@cahyo-dimas/freeday']`.
 
 **Blazor**
 ```csharp
-// Component.razor.cs — call the enhancer after Blazor renders the markup.
+// Component.razor.cs: call the enhancer after Blazor renders the markup.
 protected override async Task OnAfterRenderAsync(bool firstRender)
 {
     if (firstRender)
@@ -200,7 +200,7 @@ document.addEventListener('fdy-form-invalid', (e) =>
 > **Native components (parity with Vue's `v-model` / React's `value`/`onChange`):** the
 > **`Freeday.Blazor`** RCL (net8.0, `adapters/blazor/`) ships the typed components `FdyCombo<TValue>` /
 > `FdyDatepicker` / `FdyDateRange` / `FdyAutocomplete` / `FdyCascade` / `FdyCfl<TRow>` / `FdyChart` /
-> `FdyTable<TRow>` / `FdyModal` / `FdyDrawer` — `@bind`, no `@ref` / manual `initAll` / `[JSInvokable]`:
+> `FdyTable<TRow>` / `FdyModal` / `FdyDrawer` / `FdyAppShell` with `@bind`, no `@ref` / manual `initAll` / `[JSInvokable]`:
 > ```razor
 > @using Freeday.Blazor
 > <FdyCombo TValue="string" @bind-Value="_status" Options="_statusOptions" AriaLabelledby="lbl-status" />
@@ -297,7 +297,7 @@ computePosition(trigger, tip, { placement: 'top', middleware: [offset(8), flip()
 ```
 
 ### 6. Large async select → `freeday-cfl`
-For thousands of server-side rows, don't force a `<select>` — use choose-from-list:
+For thousands of server-side rows, don't force a `<select>`. Use choose-from-list:
 ```js
 window.FreedayCfl.init(el, {
   // Server owns paging/search; Freeday owns the accessible dialog UI.
@@ -311,13 +311,13 @@ el.addEventListener('fdy-cfl-select', (e) => store.setCustomer(e.detail.row));
 ## SAP B1 note
 
 Freeday is purely for the **web** (companion apps, .NET web add-ons, portals). A **UI API
-(SAPBouiCOM)** add-on is WinForms/COM — a different world where Freeday doesn't apply. For
+(SAPBouiCOM)** add-on is WinForms/COM, a different world where Freeday doesn't apply. For
 web-based add-ons (Service Layer + .NET), Freeday + enhancers over JS interop work normally.
 
 ---
 
 *Library recommendations reflect what's common and stable as of 2026; choose based on your
-project's license and bundle-size budget. Freeday locks you into none of them — everything is
+project's license and bundle-size budget. Freeday locks you into none of them. Everything is
 optional and replaceable.*
 
 ## Building a control the kit does not ship
@@ -329,7 +329,7 @@ import { usePopover } from '@cahyo-dimas/freeday/vue';   // or '/react'
 usePopover(panelRef, triggerRef, open);                  // panel needs popover="manual"
 ```
 
-This is what every kit dropdown uses to escape an ancestor's overflow clip — `.fdy-card` is
+This is what every kit dropdown uses to escape an ancestor's overflow clip, because `.fdy-card` is
 `overflow:hidden`, so a panel positioned inside one is otherwise cut at the card's edge. It is
 exported so a control you build behaves like one the kit ships, and improves when the kit's
 positioning does.

package/docs/reference-screen.html

@@ -6,7 +6,7 @@
 <title>Freeday — reference screen</title>
 
 <!-- The kit in one file: tokens + components (this is what @cahyo-dimas/freeday/css resolves to).
-     Note the file name: dist/freeday.css is components ONLY — link that alone and every
+     Note the file name: dist/freeday.css is components ONLY. Link that alone and every
      var(--color-*) / var(--space-*) silently falls back, which looks like a broken stylesheet.
      Paths are relative, so this works both in the repo and in node_modules/@cahyo-dimas/freeday/docs/. -->
 <link rel="stylesheet" href="../dist/freeday.bundle.css">
@@ -18,17 +18,17 @@
 <body>
 
 <!-- ══════════════════════════════════════════════════════════════════════════════════════════
-     REFERENCE SCREEN — one business screen, assembled the intended way.
+     REFERENCE SCREEN: one business screen, assembled the intended way.
 
      Structure, outermost to innermost:
        .fdy-app                 the shell (topbar · sidebar · main)
-         └ .fdy-page            the screen body — vertical section rhythm
+         └ .fdy-page            the screen body, vertical section rhythm
              ├ .fdy-page__header   eyebrow + page title + desc | ONE primary action
-             ├ .fdy-page-section   KPI strip (.fdy-stats — deliberately not cards)
+             ├ .fdy-page-section   KPI strip (.fdy-stats, deliberately not cards)
              ├ .fdy-page-section   chart
              └ .fdy-page-section   the data table
 
-     Every class here exists in COMPONENTS.md. Every value comes from a token — search this file
+     Every class here exists in COMPONENTS.md. Every value comes from a token. Search this file
      for "#" or "px" and you will find none outside the demo-only sizing on the chart wrappers.
      Doctrine behind the choices: USAGE.md.
      ══════════════════════════════════════════════════════════════════════════════════════════ -->
@@ -71,7 +71,7 @@
   </aside>
 
   <!-- __content is the column wrapper holding the topbar + main. It exists so the sticky topbar
-       has a tall containing block to travel in — a bare flex cell cannot do that. -->
+       has a tall containing block to travel in, which a bare flex cell cannot give it. -->
   <div class="fdy-app__content">
 
   <header class="fdy-app__topbar">
@@ -91,7 +91,7 @@
     </div>
 
     <span class="fdy-badge-wrap">
-      <button class="fdy-btn fdy-btn--ghost fdy-btn--icon" type="button" aria-label="Notifications — 3 new">
+      <button class="fdy-btn fdy-btn--ghost fdy-btn--icon" type="button" aria-label="Notifications, 3 new">
         <span class="fdy-btn__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg></span>
       </button>
       <span class="fdy-badge-ov fdy-badge-ov--danger" aria-hidden="true">3</span>
@@ -117,7 +117,7 @@
       <!-- ═══ THE SCREEN ═══ -->
       <div class="fdy-page">
 
-        <!-- One page header. One primary action — everything else is ghost. -->
+        <!-- One page header. One primary action; everything else is ghost. -->
         <header class="fdy-page__header">
           <div class="fdy-page__heading">
             <p class="fdy-eyebrow">Sales</p>
@@ -130,7 +130,7 @@
           </div>
         </header>
 
-        <!-- KPI strip: .fdy-stat tiles, NOT cards — a metric row must not read as a card grid. -->
+        <!-- KPI strip: .fdy-stat tiles, NOT cards, because a metric row must not read as a card grid. -->
         <section class="fdy-page-section" aria-labelledby="kpi-h">
           <h3 class="fdy-title-section fdy-visually-hidden" id="kpi-h">Key figures</h3>
           <div class="fdy-stats fdy-stats--boxed">
@@ -301,7 +301,7 @@
           </div>
 
           <!-- Below md: the SAME rows as a flat list. .fdy-list is the flat container the doctrine
-               asks for — a stack of .fdy-card would put a 34px lift under every row.
+               asks for. A stack of .fdy-card would put a 34px lift under every row.
                In a framework app you would not duplicate the markup: hide <FdyTable> below md, feed
                this list from its `process` event, and drive both from a controlled `pageIndex` with
                ONE pager rendered outside the table. See COMPONENTS.md §Data table. -->
@@ -339,7 +339,7 @@
         <!-- A detail region: key-value pairs + a timeline. Flat section, one card each. -->
         <section class="fdy-page-section" aria-labelledby="detail-h">
           <div class="fdy-page-section__head">
-            <h3 class="fdy-title-section" id="detail-h">INV-2042 — detail</h3>
+            <h3 class="fdy-title-section" id="detail-h">INV-2042 detail</h3>
             <button class="fdy-btn fdy-btn--text" type="button">Open full record</button>
           </div>
           <div class="fdy-card">
@@ -419,10 +419,10 @@
 
 <script>
   // The nav toggle is the kit's now: `data-fdy-app` on the shell is the whole wiring. What used to
-  // live here handled the two state classes and nothing else — no Escape, no focus trap, no inert
-  // background, no focus restore — which is exactly why the behaviour moved into the kit.
+  // live here handled the two state classes and nothing else: no Escape, no focus trap, no inert
+  // background, no focus restore. That is why the behaviour moved into the kit.
 
-  // Theme + density live on <html>, set once — never per component.
+  // Theme + density live on <html>, set once, never per component.
   const root = document.documentElement;
   document.getElementById('toggle-theme').addEventListener('click', () => {
     root.dataset.theme = root.dataset.theme === 'dark' ? 'light' : 'dark';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "1.54.0",
-  "description": "Freeday — token-driven, framework-agnostic UI KIT (design source-of-truth).",
+  "version": "2.1.0",
+  "description": "Freeday: token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",
   "sideEffects": true,
@@ -95,7 +95,8 @@
     "test:browser": "node --test --test-concurrency=3 browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs browser/card-stretch.mjs browser/text-override.mjs browser/control-heights.mjs browser/cfl-multi.mjs browser/crowding.mjs browser/over-dialog.mjs browser/chart-scale.mjs browser/overlay-stack.mjs browser/chart-a11y.mjs browser/app-shell.mjs",
     "prepack": "node tokens/build.mjs",
     "version": "node tokens/build.mjs && git add dist",
-    "typecheck:react": "tsc -p adapters/react/tsconfig.json --noEmit"
+    "typecheck:react": "tsc -p adapters/react/tsconfig.json --noEmit",
+    "test:blazor": "dotnet test test/blazor -v quiet --nologo"
   },
   "devDependencies": {
     "@types/react": "^19.2.17",

package/src/base.css

@@ -1,4 +1,4 @@
-/* Freeday base layer — reset ringan + default via token */
+/* Freeday base layer: reset ringan + default via token */
 *, *::before, *::after { box-sizing: border-box; }
 html { -webkit-text-size-adjust: 100%; }
 body {
@@ -16,21 +16,21 @@ a { color: var(--color-primary); }
 :where(button, input, select, textarea) { font: inherit; }
 /* Hidden from sight, kept for assistive tech. `clip` hides PAINTING, not LAYOUT: the box still
  * has a position, and because it is position:absolute its containing block is the nearest
- * POSITIONED ancestor — with none, the initial containing block (the document itself).
+ * POSITIONED ancestor, and with none, the initial containing block (the document itself).
  *
  * That matters, because `overflow` only clips a descendant whose containing block is inside the
  * overflow box. So a hidden span in a horizontally scrolling table (the kit's own recommended way
- * to name an icon button) parks at its static position — possibly thousands of px to the right —
+ * to name an icon button) parks at its static position, possibly thousands of px to the right —
  * and drags the whole DOCUMENT sideways: invisible, and immune to `overflow-x:hidden` on every
  * wrapper. Measured before the fix: 1351px of phantom page scroll from 11 spans.
  *
- * The fix is not here — it is on the containers: every clipping/scrolling container in the kit
+ * The fix is not here but on the containers: every clipping/scrolling container in the kit
  * that holds consumer markup declares `position:relative` so it becomes the containing block for
  * its own out-of-flow content (see test/css.test.mjs, which will not let a new one skip it).
- * Note the measurement trap: documentElement.scrollWidth sees it, body.scrollWidth does not —
+ * Note the measurement trap: documentElement.scrollWidth sees it, body.scrollWidth does not,
  * the honest check is `window.scrollTo(9999, 0)` then reading `window.scrollX`. */
 .fdy-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
-/* Opt-in list reset. base.css is intentionally a *light* reset — it does NOT strip list/paragraph
+/* Opt-in list reset. base.css is intentionally a *light* reset: it does NOT strip list/paragraph
  * margins (see the kit's own list components, which each reset themselves). If you run a utility
  * framework with its preflight OFF (the recommended pairing), a semantic <ul>/<ol> keeps native
  * bullets + a 40px indent; add this class (or a Freeday list component) to normalise it. */

package/src/components/accordion.css

@@ -1,7 +1,7 @@
-/* Freeday — Accordion (native <details>/<summary>, zero-JS) */
-/* position:relative — containing block for out-of-flow panel content (see base.css). NOT redundant
+/* Freeday. Accordion (native <details>/<summary>, zero-JS) */
+/* position:relative, containing block for out-of-flow panel content (see base.css). NOT redundant
    with the panel's reveal animation: that animation gives the panel a transform (which happens to
-   make it a containing block too), but it lives behind prefers-reduced-motion:no-preference — so
+   make it a containing block too), but it lives behind prefers-reduced-motion:no-preference, so
    without this line the escape bug appears ONLY for readers who asked for reduced motion. */
 .fdy-accordion{position:relative;border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);}
 .fdy-accordion__item + .fdy-accordion__item{border-top:var(--bw) solid var(--color-border);}
@@ -13,5 +13,5 @@
 .fdy-accordion__item > summary:focus-visible{outline:none;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--color-primary) 45%,transparent);}
 .fdy-accordion__panel{padding:0 var(--space-4) var(--space-4);color:var(--color-text-muted);font-size:var(--text-sm);line-height:var(--leading-normal);}
 /* Content reveal on open (fade + rise). Native <details> can't animate its own height cross-
- * browser without JS, so we animate the revealed panel instead — cheap, safe, reduced-motion gated. */
+ * browser without JS, so we animate the revealed panel instead, cheap, safe, reduced-motion gated. */
 @media (prefers-reduced-motion:no-preference){.fdy-accordion__item[open] > .fdy-accordion__panel{animation:fdy-combo-in var(--dur-base) var(--ease-standard);}}

package/src/components/alert.css

@@ -1,4 +1,4 @@
-/* Freeday — Alert (inline) */
+/* Freeday. Alert (inline) */
 .fdy-alert{display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:var(--bw) solid var(--color-border);font-size:var(--text-sm);color:var(--color-text);background:var(--color-surface-2);}
 .fdy-alert__icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;margin-top:.05rem;}
 .fdy-alert__icon svg{width:100%;height:100%;}

package/src/components/app-shell.css

@@ -1,14 +1,14 @@
-/* Freeday — App Shell.
+/* Freeday. App Shell.
  * Natural document scroll: the shell grows with content and the PAGE scrolls,
  * while the sidebar and topbar are position:sticky so they stay in view. No
  * fixed-height / internal-scroll trickery (that leaves a white gap if the host
  * page can still scroll). Structure: .fdy-app > (.fdy-app__sidebar, .fdy-app__content
  * > (.fdy-app__topbar, .fdy-app__main)). The __content wrapper gives the sticky
- * topbar a tall containing block so it can travel — a bare grid cell can't. */
+ * topbar a tall containing block so it can travel, a bare grid cell can't. */
 .fdy-app{display:flex;align-items:stretch;min-height:100vh;background:var(--color-surface-2);}
 .fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden;flex:none;width:15.5rem;box-sizing:border-box;background:var(--color-surface);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
 .fdy-app__content{flex:1;min-width:0;display:flex;flex-direction:column;}
-/* Brand is a fixed header — same height as the topbar so they align, and only
+/* Brand is a fixed header, same height as the topbar so they align, and only
  * the nav below it scrolls. Bare text (no children) renders as one bold
  * display line via the rules on .fdy-app__brand itself. For a mark + two-line
  * title/subtitle, add structured children mirroring .fdy-appbar__brand:
@@ -24,10 +24,10 @@
 .fdy-app__brand-title{display:block;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);color:var(--color-text);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-app__brand-subtitle{display:block;font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-muted);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-nav{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:2px;padding:var(--space-3) var(--space-3) var(--space-6);}
-/* Horizontal variant — the SAME nav links laid out as a row, for a top-nav application (one that
+/* Horizontal variant, the SAME nav links laid out as a row, for a top-nav application (one that
  * puts its primary navigation in `.fdy-appbar` / `.fdy-app__topbar` and has no sidebar). Deliberately
  * a modifier and not a new block: the item, its states and `aria-current="page"` are unchanged. That
- * is the point — a navigation link is a link marked `aria-current`, never `aria-selected` (invalid
+ * is the point, a navigation link is a link marked `aria-current`, never `aria-selected` (invalid
  * ARIA on an anchor) and never a tab role, so borrowing `.fdy-tabs` for routes half-adopts a contract
  * (roving tabindex, a panel per tab) that route links do not honour. position:relative because the
  * row scrolls; see base.css on why a scroller must be a containing block. */
@@ -39,7 +39,7 @@
 .fdy-nav__item[aria-current="page"]{background:var(--color-primary-soft);color:var(--color-primary-strong);font-weight:var(--weight-semibold);}
 .fdy-nav__item:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 45%,transparent);}
 /* Sidebar-menu extras: per-node icon (leading), count badge (trailing), and a
- * text label that truncates. Any of these are optional — a bare text item works. */
+ * text label that truncates. Any of these are optional, a bare text item works. */
 .fdy-nav__icon{flex:none;display:inline-flex;width:1.15rem;height:1.15rem;}
 .fdy-nav__icon svg{display:block;width:100%;height:100%;}
 .fdy-nav__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@@ -49,7 +49,7 @@
 .fdy-nav__group{margin:0;}
 .fdy-nav__group + .fdy-nav__group,.fdy-nav__item + .fdy-nav__group{border-top:var(--bw) solid var(--color-border-muted);margin-top:var(--space-1);padding-top:var(--space-1);}
 /* Prose, and a control name: this is the <summary> of a nav group, at --text-xs uppercase. It is
-   the second class found spending the decorative ink on type (after .fdy-eyebrow) — and it was
+   the second class found spending the decorative ink on type (after .fdy-eyebrow), and it was
    already brightening to --color-text-muted on hover, which is the rule admitting its resting
    state was too faint to read. */
 .fdy-nav__grouplabel{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) var(--space-3) var(--space-1);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);font-weight:var(--weight-semibold);color:var(--color-text-muted);}
@@ -58,7 +58,7 @@
 .fdy-nav__grouplabel:focus-visible{outline:none;border-radius:var(--radius-sm);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 45%,transparent);}
 .fdy-nav__grouplabel::after{content:"";flex:none;width:.45rem;height:.45rem;margin-right:var(--space-1);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform var(--dur-fast) var(--ease-standard);opacity:.7;}
 .fdy-nav__group[open] > .fdy-nav__grouplabel::after{transform:rotate(45deg);}
-/* --flat: calmer, non-collapsible grouped nav — hide the caret, drop the
+/* --flat: calmer, non-collapsible grouped nav, hide the caret, drop the
  * inter-group divider and the collapse cursor. Works on native <details> groups
  * (caret just hidden) and on static <div>/<p> groups (never collapsible). */
 .fdy-nav--flat .fdy-nav__grouplabel::after{display:none;}
@@ -71,7 +71,7 @@
 .fdy-nav__tree > summary .fdy-nav__caret{flex:none;margin-left:auto;width:.4rem;height:.4rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform var(--dur-fast) var(--ease-standard);opacity:.6;}
 .fdy-nav__tree[open] > summary .fdy-nav__caret{transform:rotate(45deg);}
 .fdy-nav__sub{display:flex;flex-direction:column;gap:2px;padding-left:calc(var(--space-3) + 1.15rem);margin-top:2px;}
-/* Collapse toggle (hamburger) — sits in the topbar; collapses the sidebar. */
+/* Collapse toggle (hamburger), sits in the topbar; collapses the sidebar. */
 .fdy-app__navtoggle{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;flex:none;padding:0;border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-text-muted);cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);}
 .fdy-app__navtoggle:hover{background:var(--color-surface-2);color:var(--color-text);}
 .fdy-app__navtoggle:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-primary);}
@@ -84,7 +84,7 @@
 .fdy-app__main{flex:1;padding:var(--space-8);}
 .fdy-skip{position:absolute;left:var(--space-2);top:var(--space-2);background:var(--color-primary);color:var(--color-on-primary);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);z-index:100;transform:translateY(-250%);transition:transform var(--dur-fast) var(--ease-standard);}
 .fdy-skip:focus{transform:translateY(0);}
-/* --static: for a bounded/embedded shell (a demo box, not the whole page) —
+/* --static: for a bounded/embedded shell (a demo box, not the whole page),
  * drop sticky so nothing escapes the box; sidebar stretches to fill it. */
 .fdy-app--static .fdy-app__sidebar{position:static;height:auto;align-self:stretch;}
 .fdy-app--static .fdy-app__topbar{position:static;}

package/src/components/appbar.css

@@ -1,4 +1,4 @@
-/* Freeday — App bar (standalone top bar: brand · actions · spacer).
+/* Freeday. App bar (standalone top bar: brand · actions · spacer).
  * Distinct from .fdy-app__topbar (which is bound to the shell grid). Use anywhere;
  * sticky / elevated / dense / coloured via modifiers. Pure CSS. */
 .fdy-appbar{display:flex;align-items:center;gap:var(--space-3);height:var(--space-16);padding:0 var(--space-4);background:var(--color-surface);color:var(--color-text);border-bottom:var(--bw) solid var(--color-border);}
@@ -11,14 +11,14 @@
 .fdy-appbar__spacer{flex:1;}
 .fdy-appbar__actions{display:inline-flex;align-items:center;gap:var(--space-1);}
 /* Primary navigation inside the bar: `<nav class="fdy-nav fdy-nav--horizontal">` with
-   `.fdy-nav__item` links (see app-shell.css). The bar ships no link class of its own — a nav link
+   `.fdy-nav__item` links (see app-shell.css). The bar ships no link class of its own, a nav link
    is the same component whether the nav is a sidebar column or a top row. */
 /* Controls on a coloured app bar go on-colour (icons stay legible, hover is a light wash) */
 .fdy-appbar--primary .fdy-btn--ghost{background:transparent;border-color:transparent;color:var(--color-on-primary);box-shadow:none;}
 .fdy-appbar--primary .fdy-btn--ghost:hover{background:color-mix(in srgb,var(--color-on-primary) 16%,transparent);color:var(--color-on-primary);transform:none;}
 /* Nav links on a coloured bar: full on-colour ink in every state (a dimmed variant would trade away
    the contrast the bar's own token pair guarantees). The current page is carried by the background
-   wash plus the semibold weight the base rule already applies — and by `aria-current` itself. */
+   wash plus the semibold weight the base rule already applies, and by `aria-current` itself. */
 .fdy-appbar--primary .fdy-nav__item{color:var(--color-on-primary);}
 .fdy-appbar--primary .fdy-nav__item:hover{background:color-mix(in srgb,var(--color-on-primary) 16%,transparent);color:var(--color-on-primary);}
 .fdy-appbar--primary .fdy-nav__item[aria-current="page"]{background:color-mix(in srgb,var(--color-on-primary) 24%,transparent);color:var(--color-on-primary);}

package/src/components/autocomplete.css

@@ -1,4 +1,4 @@
-/* Freeday — Autocomplete (text input + filtered suggestion listbox, APG editable combobox).
+/* Freeday. Autocomplete (text input + filtered suggestion listbox, APG editable combobox).
  * Enhanced by freeday-autocomplete.js. */
 .fdy-autocomplete{position:relative;display:block;max-width:22rem;}
 .fdy-autocomplete__listbox{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:120;min-width:100%;max-height:16rem;overflow-y:auto;margin:0;padding:var(--space-1);list-style:none;background:var(--color-surface);color:var(--color-text);border:var(--bw) solid var(--color-border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-3);}

package/src/components/avatar.css

@@ -1,17 +1,17 @@
-/* Freeday — Avatar */
+/* Freeday. Avatar */
 .fdy-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.5rem;height:2.5rem;border-radius:var(--radius-full);background:var(--color-primary-soft);color:var(--color-primary-strong);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-sm);line-height:1;overflow:hidden;user-select:none;}
 .fdy-avatar img{width:100%;height:100%;object-fit:cover;}
 /* --xs exists for an avatar INSIDE a control: `.fdy-btn--sm` is exactly 2rem tall, which is also
    `--sm`'s size, so a small avatar in a small button fills it edge to edge and the ghost border
    crosses the circle. 1.5rem leaves the same ~4px breathing room the kit's controls give their
-   icons. Uses `--text-xs` (the smallest type token the kit has — there is no `2xs`). */
+   icons. Uses `--text-xs` (the smallest type token the kit has, there is no `2xs`). */
 .fdy-avatar--xs{width:1.5rem;height:1.5rem;font-size:var(--text-xs);}
 .fdy-avatar--sm{width:2rem;height:2rem;font-size:var(--text-xs);}
 .fdy-avatar--lg{width:3.5rem;height:3.5rem;font-size:var(--text-lg);}
 .fdy-avatar-group{display:inline-flex;}
 .fdy-avatar-group .fdy-avatar{border:2px solid var(--color-surface);margin-left:calc(var(--space-2)*-1);}
 .fdy-avatar-group .fdy-avatar:first-child{margin-left:0;}
-/* Decorative identity tones — a soft tint of a categorical chart colour with a theme-aware,
+/* Decorative identity tones, a soft tint of a categorical chart colour with a theme-aware,
  * text-leaning foreground so initials keep WCAG AA (verified >=4.5:1 in light & dark by
  * test/contrast.test.mjs). Use to disambiguate same-initial avatars (e.g. many "PT …" names):
  * hash a stable 1..8 index off the FULL name in your app, then apply .fdy-avatar--tone-<n>. */

package/src/components/badge.css

@@ -1,4 +1,4 @@
-/* Freeday — Badge */
+/* Freeday. Badge */
 .fdy-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);line-height:1;white-space:nowrap;padding:.35em .7em;border-radius:var(--radius-full);color:var(--color-primary-strong);background:var(--color-primary-soft);border:var(--bw) solid color-mix(in srgb,var(--color-primary) 22%,transparent);box-shadow:0 1px 1.5px rgba(16,14,30,.05);}
 .fdy-badge--success{color:var(--color-success-strong);background:var(--color-success-soft);border-color:color-mix(in srgb,var(--color-success) 26%,transparent);}
 .fdy-badge--warning{color:var(--color-warning-strong);background:var(--color-warning-soft);border-color:color-mix(in srgb,var(--color-warning) 26%,transparent);}
@@ -6,12 +6,12 @@
 .fdy-badge--info{color:var(--color-info-strong);background:var(--color-info-soft);border-color:color-mix(in srgb,var(--color-info) 26%,transparent);}
 .fdy-badge--outline{background:transparent;border-color:var(--color-border-strong);color:var(--color-text-muted);box-shadow:none;}
 
-/* Categorical tone badges — a status vocabulary larger than the semantic palette, from the
+/* Categorical tone badges, a status vocabulary larger than the semantic palette, from the
  * general --tone-1..8 tokens. Same validated AA formula as .fdy-avatar--tone-* and
  * .fdy-chip--tone-* (text >=4.5:1 both themes, gated by test/contrast.test.mjs).
  *
  * Semantics come first: a state that IS good, bad or waiting takes --success / --danger /
- * --warning. These are for the rest — the states a workflow distinguishes but a palette of five
+ * --warning. These are for the rest, the states a workflow distinguishes but a palette of five
  * cannot. A back-office document list carrying Draft, Submitted, Approved, Completed, Settled,
  * Closed, Transferred, InDeclaration, Open and Rejected in ONE column collapsed to three colours,
  * which is the report this shipped for. */
@@ -25,7 +25,7 @@
 .fdy-badge--tone-7{--_fdy-badge-tone:var(--tone-7);}
 .fdy-badge--tone-8{--_fdy-badge-tone:var(--tone-8);}
 
-/* Overlay badge — anchors a small count/dot/icon badge to a corner of any element
+/* Overlay badge, anchors a small count/dot/icon badge to a corner of any element
  * (icon, button, text). Wrap the content in .fdy-badge-wrap; add .fdy-badge-ov as a
  * sibling. Default is a solid neutral pill; colour + dot + position via modifiers. */
 .fdy-badge-wrap{position:relative;display:inline-flex;vertical-align:middle;}
@@ -35,7 +35,7 @@
 /* Solid colours safe for count/text (on-* tokens, AA in light & dark) */
 .fdy-badge-ov--primary{background:var(--color-primary);color:var(--color-on-primary);}
 .fdy-badge-ov--danger{background:var(--color-danger-btn);color:var(--color-on-danger);}
-/* Dot-oriented accents (for dots — plain text on these is not guaranteed AA) */
+/* Dot-oriented accents (for dots, plain text on these is not guaranteed AA) */
 .fdy-badge-ov--accent{background:var(--color-accent);}
 .fdy-badge-ov--info{background:var(--color-info);}
 .fdy-badge-ov--success{background:var(--color-success);}

package/src/components/breadcrumb.css

@@ -1,4 +1,4 @@
-/* Freeday — Breadcrumb */
+/* Freeday. Breadcrumb */
 .fdy-breadcrumb{font-size:var(--text-sm);}
 .fdy-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);list-style:none;margin:0;padding:0;}
 .fdy-breadcrumb__item{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-text-muted);}

package/src/components/breakpoints.css

@@ -1,15 +1,15 @@
-/* Freeday — Responsive display utilities (pairs with freeday-breakpoint.js).
+/* Freeday. Responsive display utilities (pairs with freeday-breakpoint.js).
  * Breakpoint scale (min-width, px): sm 600 · md 960 · lg 1280 · xl 1920.
- * NOTE: media-query breakpoints must be literal — CSS can't read custom properties
+ * NOTE: media-query breakpoints must be literal. CSS can't read custom properties
  * inside @media, so these px are structural, not stray magic numbers. */
 .fdy-hidden{display:none !important;}
 
-/* hide-below-X — hidden when the viewport is narrower than X (content shows at X and up) */
+/* hide-below-X, hidden when the viewport is narrower than X (content shows at X and up) */
 @media (max-width:599.98px){.fdy-hide-below-sm{display:none !important;}}
 @media (max-width:959.98px){.fdy-hide-below-md{display:none !important;}}
 @media (max-width:1279.98px){.fdy-hide-below-lg{display:none !important;}}
 
-/* hide-above-X — hidden when the viewport is X and wider (content shows below X) */
+/* hide-above-X, hidden when the viewport is X and wider (content shows below X) */
 @media (min-width:600px){.fdy-hide-above-sm{display:none !important;}}
 @media (min-width:960px){.fdy-hide-above-md{display:none !important;}}
 @media (min-width:1280px){.fdy-hide-above-lg{display:none !important;}}

package/src/components/button.css

@@ -1,4 +1,4 @@
-/* Freeday — Button */
+/* Freeday. Button */
 .fdy-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
   height:var(--control-h);padding:0 var(--space-4);
   font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-semibold);
@@ -11,7 +11,7 @@
 .fdy-btn:active{transform:translateY(1px);box-shadow:0 1px 4px -1px color-mix(in srgb,var(--color-primary) 46%,transparent);}
 .fdy-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
 /* Pressed / toggle. `aria-pressed` is already the right attribute for a toggle button, so this adds
-   no class and no new markup contract — and it is what makes .fdy-btn-group a complete segmented
+   no class and no new markup contract, and it is what makes .fdy-btn-group a complete segmented
    control: the group joins the borders, this says which segment you are on. Each fill variant
    defines its OWN pressed look below; a single shared rule cannot work, because a gradient is a
    background-IMAGE and would blank the ghost variant's background-color. Solid: invert the gradient
@@ -23,12 +23,12 @@
 .fdy-btn--ghost:hover{transform:none;background:var(--color-primary-soft);border-color:var(--color-primary-border);box-shadow:var(--shadow-1);}
 .fdy-btn--ghost:active{transform:translateY(1px);}
 
-/* --danger used to be the SOLID treatment and nothing else, so `fdy-btn--ghost fdy-btn--danger` —
-   which every reader parses as "quiet destructive" — rendered a second SOLID button beside Save.
+/* --danger used to be the SOLID treatment and nothing else, so `fdy-btn--ghost fdy-btn--danger`,
+   which every reader parses as "quiet destructive", rendered a second SOLID button beside Save.
    That is a hierarchy defect, not a cosmetic one: the base class is already the one primary per
    screen. `.fdy-menu__item--danger` has always modelled the quiet form (red text, not a red block);
    the pairing rules below bring it to the button. They are more specific than this one and come
-   after it, so this rule needs no :not() guard of its own — one mechanism, not two. */
+   after it, so this rule needs no :not() guard of its own, one mechanism, not two. */
 .fdy-btn--danger{background:linear-gradient(180deg,var(--color-danger-btn),color-mix(in srgb,#000 12%,var(--color-danger-btn)));color:var(--color-on-danger);box-shadow:0 2px 9px -1px color-mix(in srgb,var(--color-danger-btn) 46%,transparent),inset 0 1px 0 rgba(255,255,255,.22);}
 .fdy-btn--danger:hover{transform:translateY(-1px);box-shadow:0 6px 18px -2px color-mix(in srgb,var(--color-danger-btn) 54%,transparent),inset 0 1px 0 rgba(255,255,255,.22);}
 .fdy-btn--danger:active{transform:translateY(1px);}
@@ -42,21 +42,21 @@
 .fdy-btn--sm{height:calc(var(--control-h) - var(--space-2));padding:0 var(--space-3);font-size:var(--text-xs);border-radius:var(--radius-sm);}
 .fdy-btn--lg{height:calc(var(--control-h) + var(--space-2));padding:0 var(--space-6);font-size:var(--text-base);border-radius:var(--radius-lg);}
 
-/* Icon inside a button — scales with the button's font size (works for text+icon & icon-only) */
+/* Icon inside a button, scales with the button's font size (works for text+icon & icon-only) */
 .fdy-btn__icon{display:inline-flex;flex:none;}
 .fdy-btn__icon svg{display:block;width:1.15em;height:1.15em;}
 
-/* Text button — lowest emphasis (no fill/border), colored label, subtle hover tint */
+/* Text button, lowest emphasis (no fill/border), colored label, subtle hover tint */
 .fdy-btn--text{background:none;color:var(--color-primary-strong);border-color:transparent;box-shadow:none;}
 .fdy-btn--text:hover{transform:none;background:var(--color-primary-soft);box-shadow:none;}
 .fdy-btn--text:active{transform:translateY(1px);box-shadow:none;}
-/* Ghost/text pressed: the kit's selected-surface pair (soft fill + strong ink) — the same pairing
+/* Ghost/text pressed: the kit's selected-surface pair (soft fill + strong ink), the same pairing
    .fdy-nav__item uses for the current page, and one the AA contrast gate already covers. This is
    the realistic segmented control: a row of --ghost buttons with exactly one aria-pressed. */
 .fdy-btn--ghost[aria-pressed="true"],.fdy-btn--text[aria-pressed="true"]{background:var(--color-primary-soft);color:var(--color-primary-strong);border-color:var(--color-primary-border);box-shadow:none;}
 .fdy-btn--ghost[aria-pressed="true"]:hover,.fdy-btn--text[aria-pressed="true"]:hover{background:var(--color-primary-soft);transform:none;box-shadow:none;}
 
-/* Stretched hit area (#007) — spread this button's click target over its nearest positioned
+/* Stretched hit area (#007), spread this button's click target over its nearest positioned
  * ancestor, so "one card, one primary action, one escape hatch" needs no click handler on the
  * <article>: the real control stays a real <button>/<a> and keeps its keyboard semantics.
  * `.fdy-card` is already position:relative, so it is the anchor.
@@ -65,19 +65,19 @@
  * a transformed element becomes the containing block for its own absolutely-positioned descendants,
  * so `inset:0` re-anchors from the card to the button's own box the moment the button is hovered or
  * pressed. Measured: mousedown lands on the button, the overlay collapses under the pointer, mouseup
- * lands on some other element, and the browser fires `click` on their common ancestor — the button
+ * lands on some other element, and the browser fires `click` on their common ancestor, the button
  * never gets one. It demos fine on hover for --text/--ghost (their hover is already transform:none)
  * and only a real press reveals it; the default and --danger fills break one step earlier, on hover.
  * Press feedback moves to the card, which is the object actually being pressed (see card.css). */
 .fdy-btn--stretch::after{content:'';position:absolute;inset:0;}
 .fdy-btn--stretch:hover,.fdy-btn--stretch:active{transform:none;}
 
-/* Icon-only — square; combine with --ghost/--text/--sm/--lg. Requires aria-label. */
+/* Icon-only, square; combine with --ghost/--text/--sm/--lg. Requires aria-label. */
 .fdy-btn--icon{width:var(--control-h);padding:0;}
 .fdy-btn--icon.fdy-btn--sm{width:calc(var(--control-h) - var(--space-2));}
 .fdy-btn--icon.fdy-btn--lg{width:calc(var(--control-h) + var(--space-2));}
 
-/* Button group — segmented, joined borders, rounded only at the ends */
+/* Button group, segmented, joined borders, rounded only at the ends */
 .fdy-btn-group{display:inline-flex;}
 .fdy-btn-group .fdy-btn{border-radius:0;}
 .fdy-btn-group .fdy-btn:not(:first-child){margin-left:calc(var(--bw) * -1);}
@@ -85,7 +85,7 @@
 .fdy-btn-group .fdy-btn:first-child{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md);}
 .fdy-btn-group .fdy-btn:last-child{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md);}
 
-/* FAB — circular elevated action button (icon), optional extended pill with label */
+/* FAB, circular elevated action button (icon), optional extended pill with label */
 .fdy-fab{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);width:3.5rem;height:3.5rem;padding:0;border:var(--bw) solid transparent;border-radius:var(--radius-full);cursor:pointer;color:var(--color-on-primary);background:linear-gradient(180deg,var(--color-primary),color-mix(in srgb,#000 10%,var(--color-primary)));box-shadow:var(--shadow-3);transition:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
 .fdy-fab:hover{transform:translateY(-1px);box-shadow:var(--shadow-4);}
 .fdy-fab:active{transform:translateY(1px);}