npm - @cahyo-dimas/freeday - Versions diffs - 1.18.0 → 1.21.0 - Mend

@cahyo-dimas/freeday 1.18.0 → 1.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/CHANGELOG.md +227 -0
package/COMPONENTS.md +775 -0
package/README.id.md +11 -1
package/README.md +18 -2
package/USAGE.md +55 -11
package/adapters/blazor/FdyTable.razor.cs +66 -7
package/adapters/blazor/TableTypes.cs +6 -0
package/adapters/react/components/FdyTable.tsx +32 -8
package/adapters/vue/components/FdyTable.vue +30 -6
package/dist/freeday.bundle.css +91 -9
package/dist/freeday.css +75 -6
package/dist/freeday.tokens.css +16 -3
package/docs/agent-onboarding.md +153 -0
package/docs/getting-started.md +456 -0
package/docs/integrations.md +321 -0
package/docs/reference-screen.html +461 -0
package/package.json +10 -4
package/src/base.css +15 -0
package/src/components/accordion.css +5 -1
package/src/components/card.css +7 -1
package/src/components/carousel.css +4 -1
package/src/components/list.css +36 -0
package/src/components/table.css +5 -2
package/src/components/tabs.css +2 -1
package/tokens/breakpoints.d.ts +3 -0
package/tokens/breakpoints.mjs +8 -1
package/src/components/.gitkeep +0 -0
package/src/freeday-autocomplete.js +0 -135
package/src/freeday-breakpoint.js +0 -51
package/src/freeday-carousel.js +0 -111
package/src/freeday-cascade.js +0 -256
package/src/freeday-cfl.js +0 -213
package/src/freeday-chart.js +0 -429
package/src/freeday-chip.js +0 -83
package/src/freeday-datepicker.js +0 -321
package/src/freeday-datetime.js +0 -83
package/src/freeday-drawer.js +0 -43
package/src/freeday-form.js +0 -181
package/src/freeday-mask.js +0 -114
package/src/freeday-menu.js +0 -93
package/src/freeday-popover.js +0 -69
package/src/freeday-rating.js +0 -50
package/src/freeday-select.js +0 -218
package/src/freeday-slider.js +0 -34
package/src/freeday-stepper.js +0 -90
package/src/freeday-table.js +0 -475
package/src/freeday-tabs.js +0 -68
package/src/freeday-timepicker.js +0 -180
package/src/freeday-toast.js +0 -105
package/src/freeday-tree.js +0 -94
package/src/freeday-upload.js +0 -206

package/docs/reference-screen.html ADDED Viewed

@@ -0,0 +1,461 @@
+<!doctype html>
+<html lang="en" data-theme="light" data-density="comfortable">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<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
+     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">
+<!-- Fonts are NOT shipped by the package. Load them yourself (Fontsource, self-hosted, or a
+     <link> to a provider) or override --font-display / --font-body / --font-mono. Without them
+     the kit renders in the system fallback, which reads as an unfinished design. -->
+</head>
+<body>
+<!-- ══════════════════════════════════════════════════════════════════════════════════════════
+     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__header   eyebrow + page title + desc | ONE primary action
+             ├ .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
+     for "#" or "px" and you will find none outside the demo-only sizing on the chart wrappers.
+     Doctrine behind the choices: USAGE.md.
+     ══════════════════════════════════════════════════════════════════════════════════════════ -->
+<div class="fdy-app" id="app">
+  <a class="fdy-skip" href="#main">Skip to main content</a>
+  <!-- Sidebar comes FIRST: .fdy-app is a flex row of [sidebar | content]. The brand lives in the
+       sidebar (it is sized to match the topbar height), not in the topbar. -->
+  <aside class="fdy-app__sidebar" id="sidebar" aria-label="Main navigation">
+    <a class="fdy-app__brand" href="#app">
+      <span class="fdy-app__brand-mark">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h10M4 17h6"/></svg>
+      </span>
+      <span class="fdy-app__brand-text">
+        <span class="fdy-app__brand-title">Acme Books</span>
+        <span class="fdy-app__brand-subtitle">Finance</span>
+      </span>
+    </a>
+    <nav class="fdy-nav">
+      <a class="fdy-nav__item" href="#app">
+        <span class="fdy-nav__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg></span>
+        <span class="fdy-nav__label">Dashboard</span>
+      </a>
+      <a class="fdy-nav__item" href="#app" aria-current="page">
+        <span class="fdy-nav__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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h6"/></svg></span>
+        <span class="fdy-nav__label">Invoices</span>
+        <span class="fdy-nav__badge">12</span>
+      </a>
+      <a class="fdy-nav__item" href="#app">
+        <span class="fdy-nav__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="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/></svg></span>
+        <span class="fdy-nav__label">Customers</span>
+      </a>
+      <details class="fdy-nav__group" open>
+        <summary class="fdy-nav__grouplabel">Reports</summary>
+        <a class="fdy-nav__item" href="#app"><span class="fdy-nav__label">Aging</span></a>
+        <a class="fdy-nav__item" href="#app"><span class="fdy-nav__label">Collections</span></a>
+      </details>
+    </nav>
+  </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. -->
+  <div class="fdy-app__content">
+  <header class="fdy-app__topbar">
+    <button class="fdy-app__navtoggle" type="button" aria-label="Toggle navigation" aria-expanded="true" aria-controls="sidebar">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
+    </button>
+    <!-- .fdy-app__title carries an auto-spacer (margin-right:auto): everything after it sits at
+         the right edge. -->
+    <h1 class="fdy-app__title fdy-hide-below-md">Receivables</h1>
+    <div class="fdy-input-group fdy-hide-below-md" style="max-width:14rem">
+      <span class="fdy-input-group__addon fdy-input-group__addon--icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.35-4.35"/></svg>
+      </span>
+      <input class="fdy-input" type="search" placeholder="Search…" aria-label="Search the app">
+    </div>
+    <span class="fdy-badge-wrap">
+      <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>
+    </span>
+    <div class="fdy-menu-wrap" data-fdy-menu>
+      <button class="fdy-btn fdy-btn--ghost" type="button" aria-haspopup="menu" aria-expanded="false" aria-label="User menu">
+        <span class="fdy-avatar fdy-avatar--sm fdy-avatar--tone-3">AK</span>
+      </button>
+      <ul class="fdy-menu fdy-menu--end" role="menu" hidden>
+        <li role="none"><button class="fdy-menu__item" role="menuitem" type="button">Profile</button></li>
+        <li role="none"><button class="fdy-menu__item" role="menuitem" type="button" id="toggle-theme">Toggle theme</button></li>
+        <li role="none"><button class="fdy-menu__item" role="menuitem" type="button" id="toggle-density">Toggle density</button></li>
+        <li role="none"><hr class="fdy-menu__sep"></li>
+        <li role="none"><button class="fdy-menu__item fdy-menu__item--danger" role="menuitem" type="button">Sign out</button></li>
+      </ul>
+    </div>
+  </header>
+  <!-- __main is the padded content area (--space-8). The screen goes straight inside it. -->
+  <main class="fdy-app__main" id="main" tabindex="-1">
+      <!-- ═══ THE SCREEN ═══ -->
+      <div class="fdy-page">
+        <!-- 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>
+            <h2 class="fdy-title-page">Receivables</h2>
+            <p class="fdy-page__desc">Every open invoice, with the amount still outstanding per customer.</p>
+          </div>
+          <div class="fdy-page__actions">
+            <button class="fdy-btn fdy-btn--ghost" type="button" id="btn-export">Export</button>
+            <button class="fdy-btn" type="button" id="btn-new">New invoice</button>
+          </div>
+        </header>
+        <!-- KPI strip: .fdy-stat tiles, NOT cards — 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">
+            <div class="fdy-stat">
+              <span class="fdy-stat__label">Outstanding</span>
+              <span class="fdy-stat__value">8.42<small> M</small></span>
+              <span class="fdy-stat__meta">across 34 invoices</span>
+            </div>
+            <div class="fdy-stat">
+              <span class="fdy-stat__label">Overdue</span>
+              <span class="fdy-stat__value">1.19<small> M</small></span>
+              <span class="fdy-stat__meta"><span class="fdy-badge fdy-badge--warning">7 invoices</span></span>
+            </div>
+            <div class="fdy-stat">
+              <span class="fdy-stat__label">Collected (MTD)</span>
+              <span class="fdy-stat__value">5.60<small> M</small></span>
+              <span class="fdy-stat__meta">target 6.00 M</span>
+            </div>
+            <div class="fdy-stat">
+              <span class="fdy-stat__label">Avg. days to pay</span>
+              <span class="fdy-stat__value">27</span>
+              <span class="fdy-stat__meta">terms: 30 days</span>
+            </div>
+          </div>
+        </section>
+        <!-- A section with a chart. Flat section, one card holding the chart. -->
+        <section class="fdy-page-section" aria-labelledby="trend-h">
+          <div class="fdy-page-section__head">
+            <h3 class="fdy-title-section" id="trend-h">Collection trend</h3>
+            <p class="fdy-text-caption">Last six months</p>
+          </div>
+          <div class="fdy-card">
+            <div class="fdy-card__body">
+              <div data-fdy-chart="line"
+                   data-labels="Feb,Mar,Apr,May,Jun,Jul"
+                   data-series='[{"label":"Invoiced","values":[62,68,75,71,83,88]},{"label":"Collected","values":[54,60,66,69,74,81]}]'
+                   data-fdy-format="number"
+                   role="img"
+                   aria-label="Invoiced versus collected, in millions: invoiced rose from 62 to 88, collected from 54 to 81">
+                <table>
+                  <caption>Invoiced vs collected (millions)</caption>
+                  <tr><th scope="col">Month</th><th scope="col">Invoiced</th><th scope="col">Collected</th></tr>
+                  <tr><td>Jul</td><td>88</td><td>81</td></tr>
+                </table>
+              </div>
+            </div>
+          </div>
+        </section>
+        <!-- The data table, with its filter bar composed onto the toolbar baseline.
+             KNOWN GAP: the vanilla freeday-table.js writes its footer/bulk strings in Indonesian
+             ("Menampilkan 1–5 dari 7", "N dipilih") and offers no override, so they stay Indonesian
+             on this English page. The Vue/React/Blazor <FdyTable> components default to English.
+             If you need English in a static page, render those two nodes yourself from the
+             fdy-table-change event instead of using data-fdy-table-info / -bulk-count. -->
+        <section class="fdy-page-section" aria-labelledby="list-h">
+          <div class="fdy-page-section__head">
+            <h3 class="fdy-title-section" id="list-h">Open invoices</h3>
+          </div>
+          <!-- md and up: the table. Below md it is hidden and the flat list below takes over. -->
+          <div class="fdy-datatable fdy-hide-below-md" data-fdy-table data-page-size="5">
+            <div class="fdy-table-toolbar fdy-filterbar">
+              <div class="fdy-field fdy-field--w-grow">
+                <span class="fdy-label" id="f-q">Search</span>
+                <div class="fdy-input-group">
+                  <span class="fdy-input-group__addon fdy-input-group__addon--icon">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.35-4.35"/></svg>
+                  </span>
+                  <input class="fdy-input" type="search" placeholder="Invoice or customer…" data-fdy-table-search aria-labelledby="f-q">
+                </div>
+              </div>
+              <div class="fdy-field fdy-field--w-sm">
+                <span class="fdy-label" id="f-st">Status</span>
+                <div class="fdy-combo" data-fdy-combo data-value="all">
+                  <button type="button" class="fdy-combo__button" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-st f-st-v">
+                    <span class="fdy-combo__value" id="f-st-v">All</span>
+                  </button>
+                  <ul class="fdy-combo__listbox" role="listbox" aria-labelledby="f-st" hidden>
+                    <li class="fdy-combo__option" role="option" data-value="all" aria-selected="true"><span class="fdy-combo__check">✓</span>All</li>
+                    <li class="fdy-combo__option" role="option" data-value="open" aria-selected="false"><span class="fdy-combo__check"></span>Open</li>
+                    <li class="fdy-combo__option" role="option" data-value="overdue" aria-selected="false"><span class="fdy-combo__check"></span>Overdue</li>
+                  </ul>
+                </div>
+              </div>
+              <div class="fdy-field fdy-field--w-2xl">
+                <span class="fdy-label">Issued between</span>
+                <div class="fdy-daterange" data-fdy-daterange role="group" aria-label="Issued between">
+                  <div data-fdy-datepicker data-role="from" data-placeholder="From" data-label="Issued from"></div>
+                  <span class="fdy-daterange__sep" aria-hidden="true">–</span>
+                  <div data-fdy-datepicker data-role="to" data-placeholder="To" data-label="Issued to"></div>
+                </div>
+              </div>
+              <div class="fdy-filterbar__actions">
+                <button class="fdy-btn fdy-btn--ghost" type="button">Reset</button>
+              </div>
+            </div>
+            <div class="fdy-table-bulkbar" data-fdy-table-bulk hidden role="region" aria-label="Bulk actions">
+              <span class="fdy-table-bulkbar__count" data-fdy-table-bulk-count aria-live="polite">0 selected</span>
+              <span class="fdy-table-bulkbar__spacer"></span>
+              <div class="fdy-table-bulkbar__actions">
+                <button class="fdy-btn fdy-btn--ghost fdy-btn--sm" type="button">Send reminder</button>
+                <button class="fdy-btn fdy-btn--ghost fdy-btn--sm" type="button" data-fdy-table-bulk-clear>Clear</button>
+              </div>
+            </div>
+            <div class="fdy-table-scroll">
+              <table class="fdy-table">
+                <caption class="fdy-visually-hidden">Open invoices, sortable and filterable</caption>
+                <thead>
+                  <tr>
+                    <th class="fdy-table__selcol" scope="col"><input type="checkbox" class="fdy-checkbox" data-fdy-select-all aria-label="Select all rows"></th>
+                    <th scope="col"><button type="button" class="fdy-table__sortbtn" data-fdy-sort>Invoice</button></th>
+                    <th scope="col" data-fdy-filter="text"><button type="button" class="fdy-table__sortbtn" data-fdy-sort>Customer</button></th>
+                    <th scope="col" data-fdy-filter="enum"><button type="button" class="fdy-table__sortbtn" data-fdy-sort>Status</button></th>
+                    <th scope="col">Due</th>
+                    <th scope="col" class="fdy-table__num" data-fdy-filter="number"><button type="button" class="fdy-table__sortbtn" data-fdy-sort="number">Amount</button></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td class="fdy-table__selcol"><input type="checkbox" class="fdy-checkbox" data-fdy-row-select aria-label="Select INV-2041"></td>
+                    <td class="fdy-mono">INV-2041</td><td>Acme Ltd</td>
+                    <td><span class="fdy-badge fdy-badge--success">Paid</span></td>
+                    <td>30 Jul 2026</td><td class="fdy-table__num" data-sort-value="1240000">1,240,000</td>
+                  </tr>
+                  <tr>
+                    <td class="fdy-table__selcol"><input type="checkbox" class="fdy-checkbox" data-fdy-row-select aria-label="Select INV-2042"></td>
+                    <td class="fdy-mono">INV-2042</td><td>Northwind Trading</td>
+                    <td><span class="fdy-badge fdy-badge--warning">Overdue</span></td>
+                    <td>12 Jul 2026</td><td class="fdy-table__num" data-sort-value="290000">290,000</td>
+                  </tr>
+                  <tr>
+                    <td class="fdy-table__selcol"><input type="checkbox" class="fdy-checkbox" data-fdy-row-select aria-label="Select INV-2043"></td>
+                    <td class="fdy-mono">INV-2043</td><td>Globex Supply</td>
+                    <td><span class="fdy-badge fdy-badge--info">Draft</span></td>
+                    <td>—</td><td class="fdy-table__num" data-sort-value="0">0</td>
+                  </tr>
+                  <tr>
+                    <td class="fdy-table__selcol"><input type="checkbox" class="fdy-checkbox" data-fdy-row-select aria-label="Select INV-2044"></td>
+                    <td class="fdy-mono">INV-2044</td><td>Initech Partners</td>
+                    <td><span class="fdy-badge fdy-badge--success">Paid</span></td>
+                    <td>02 Aug 2026</td><td class="fdy-table__num" data-sort-value="4750000">4,750,000</td>
+                  </tr>
+                  <tr>
+                    <td class="fdy-table__selcol"><input type="checkbox" class="fdy-checkbox" data-fdy-row-select aria-label="Select INV-2045"></td>
+                    <td class="fdy-mono">INV-2045</td><td>Umbra Logistics</td>
+                    <td><span class="fdy-badge fdy-badge--warning">Overdue</span></td>
+                    <td>08 Jul 2026</td><td class="fdy-table__num" data-sort-value="820000">820,000</td>
+                  </tr>
+                  <tr>
+                    <td class="fdy-table__selcol"><input type="checkbox" class="fdy-checkbox" data-fdy-row-select aria-label="Select INV-2046"></td>
+                    <td class="fdy-mono">INV-2046</td><td>Stark Materials</td>
+                    <td><span class="fdy-badge fdy-badge--danger">Cancelled</span></td>
+                    <td>—</td><td class="fdy-table__num" data-sort-value="150000">150,000</td>
+                  </tr>
+                  <tr>
+                    <td class="fdy-table__selcol"><input type="checkbox" class="fdy-checkbox" data-fdy-row-select aria-label="Select INV-2047"></td>
+                    <td class="fdy-mono">INV-2047</td><td>Acme Ltd</td>
+                    <td><span class="fdy-badge fdy-badge--success">Paid</span></td>
+                    <td>21 Aug 2026</td><td class="fdy-table__num" data-sort-value="3120000">3,120,000</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div class="fdy-table-footer">
+              <span class="fdy-table-footer__info" data-fdy-table-info></span>
+              <nav class="fdy-pagination" aria-label="Table pages" data-fdy-table-pagination></nav>
+            </div>
+          </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.
+               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. -->
+          <ul class="fdy-list fdy-hide-above-md">
+            <li>
+              <button type="button" class="fdy-list__row fdy-list__row--button">
+                <span class="fdy-list__main">
+                  <span class="fdy-list__title">Acme Ltd</span>
+                  <span class="fdy-list__meta"><span class="fdy-mono">INV-2041</span> · due 30 Jul <span class="fdy-badge fdy-badge--success">Paid</span></span>
+                </span>
+                <span class="fdy-list__aside fdy-mono">1,240,000</span>
+              </button>
+            </li>
+            <li>
+              <button type="button" class="fdy-list__row fdy-list__row--button">
+                <span class="fdy-list__main">
+                  <span class="fdy-list__title">Northwind Trading</span>
+                  <span class="fdy-list__meta"><span class="fdy-mono">INV-2042</span> · due 12 Jul <span class="fdy-badge fdy-badge--warning">Overdue</span></span>
+                </span>
+                <span class="fdy-list__aside fdy-mono">290,000</span>
+              </button>
+            </li>
+            <li>
+              <button type="button" class="fdy-list__row fdy-list__row--button">
+                <span class="fdy-list__main">
+                  <span class="fdy-list__title">Globex Supply</span>
+                  <span class="fdy-list__meta"><span class="fdy-mono">INV-2043</span> · draft <span class="fdy-badge fdy-badge--info">Draft</span></span>
+                </span>
+                <span class="fdy-list__aside fdy-mono">0</span>
+              </button>
+            </li>
+          </ul>
+        </section>
+        <!-- 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>
+            <button class="fdy-btn fdy-btn--text" type="button">Open full record</button>
+          </div>
+          <div class="fdy-card">
+            <div class="fdy-card__body">
+              <h4 class="fdy-title-card">Northwind Trading</h4>
+              <dl class="fdy-dl">
+                <dt>Invoice</dt><dd class="fdy-mono">INV-2042</dd>
+                <dt>Status</dt><dd><span class="fdy-badge fdy-badge--warning">Overdue</span></dd>
+                <dt>Issued</dt><dd>12 Jun 2026</dd>
+                <dt>Due</dt><dd>12 Jul 2026</dd>
+                <dt>Amount</dt><dd>290,000</dd>
+              </dl>
+            </div>
+          </div>
+        </section>
+      </div>
+      <!-- ═══ /THE SCREEN ═══ -->
+  </main>
+  </div><!-- /.fdy-app__content -->
+  <div class="fdy-app__backdrop"></div>
+</div>
+<!-- Native <dialog>: focus trap, Esc and backdrop are the browser's job, not yours. -->
+<dialog class="fdy-modal" id="new-invoice" aria-labelledby="new-invoice-t">
+  <form method="dialog" data-fdy-validate>
+    <div class="fdy-modal__header">
+      <h2 class="fdy-modal__title" id="new-invoice-t">New invoice</h2>
+      <button class="fdy-modal__close" type="button" aria-label="Close" data-close>&times;</button>
+    </div>
+    <div class="fdy-modal__body">
+      <div class="fdy-form-grid">
+        <label class="fdy-field">
+          <span class="fdy-label">Customer</span>
+          <input class="fdy-input" name="customer" required data-fdy-msg-required="Customer is required.">
+        </label>
+        <label class="fdy-field">
+          <span class="fdy-label">Invoice no.</span>
+          <input class="fdy-input fdy-mono" name="no" value="INV-2048" readonly>
+        </label>
+        <div class="fdy-field">
+          <span class="fdy-label">Issue date</span>
+          <div data-fdy-datepicker data-value="2026-08-12" data-label="Issue date"></div>
+        </div>
+        <label class="fdy-field">
+          <span class="fdy-label">Amount</span>
+          <div class="fdy-input-group">
+            <span class="fdy-input-group__addon">Rp</span>
+            <input class="fdy-input" name="amount" inputmode="numeric" required data-fdy-msg-required="Amount is required.">
+          </div>
+        </label>
+        <label class="fdy-field fdy-field--full fdy-switch">
+          <input type="checkbox" checked> Email the invoice to the customer
+        </label>
+      </div>
+    </div>
+    <div class="fdy-modal__footer">
+      <button class="fdy-btn fdy-btn--ghost" type="button" data-close>Cancel</button>
+      <button class="fdy-btn" type="submit">Save invoice</button>
+    </div>
+  </form>
+</dialog>
+<!-- Enhancers: only the ones this screen actually uses. Zero dependencies, load order free. -->
+<script src="../dist/freeday-popover.js"></script>
+<script src="../dist/freeday-select.js"></script>
+<script src="../dist/freeday-datepicker.js"></script>
+<script src="../dist/freeday-menu.js"></script>
+<script src="../dist/freeday-table.js"></script>
+<script src="../dist/freeday-chart.js"></script>
+<script src="../dist/freeday-form.js"></script>
+<script src="../dist/freeday-toast.js"></script>
+<script>
+  // The shell's only wiring: the nav toggle. Two state classes, no library.
+  // Above 720px the sidebar collapses to zero width (--nav-collapsed); at or below it slides in as
+  // an off-canvas drawer (--nav-open). 720px is where app-shell.css switches — keep them in step.
+  const app = document.getElementById('app');
+  const toggle = app.querySelector('.fdy-app__navtoggle');
+  const wide = () => window.matchMedia('(min-width: 721px)').matches;
+  toggle.addEventListener('click', () => {
+    const cls = wide() ? 'fdy-app--nav-collapsed' : 'fdy-app--nav-open';
+    const open = app.classList.toggle(cls);
+    toggle.setAttribute('aria-expanded', String(wide() ? !open : open));
+  });
+  app.querySelector('.fdy-app__backdrop').addEventListener('click', () => {
+    app.classList.remove('fdy-app--nav-open');
+    toggle.setAttribute('aria-expanded', 'false');
+  });
+  // 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';
+  });
+  document.getElementById('toggle-density').addEventListener('click', () => {
+    root.dataset.density = root.dataset.density === 'compact' ? 'comfortable' : 'compact';
+  });
+  document.getElementById('btn-new').addEventListener('click', () => {
+    document.getElementById('new-invoice').showModal();
+  });
+  document.querySelectorAll('#new-invoice [data-close]').forEach(b => {
+    b.addEventListener('click', () => document.getElementById('new-invoice').close());
+  });
+  document.getElementById('btn-export').addEventListener('click', () => {
+    Freeday.toast({ variant: 'info', title: 'Export queued', message: 'The file will download shortly.', key: 'export' });
+  });
+</script>
+</body>
+</html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "1.18.0",
+  "version": "1.21.0",
   "description": "Freeday — token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",
@@ -21,7 +21,8 @@
   },
   "files": [
     "dist",
-    "src",
+    "src/base.css",
+    "src/components",
     "adapters",
     "tokens/tokens.json",
     "tokens/breakpoints.mjs",
@@ -29,7 +30,12 @@
     "README.md",
     "README.id.md",
     "USAGE.md",
-    "CHANGELOG.md"
+    "COMPONENTS.md",
+    "CHANGELOG.md",
+    "docs/getting-started.md",
+    "docs/integrations.md",
+    "docs/agent-onboarding.md",
+    "docs/reference-screen.html"
   ],
   "exports": {
     ".": { "types": "./dist/freeday.d.ts", "default": "./dist/freeday.js" },
@@ -65,7 +71,7 @@
   "scripts": {
     "build": "node tokens/build.mjs",
     "test": "node --test",
-    "test:browser": "node --test browser/vanilla.mjs browser/adapter.mjs",
+    "test:browser": "node --test browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs",
     "prepack": "node tokens/build.mjs",
     "version": "node tokens/build.mjs && git add dist",
     "typecheck:react": "tsc -p adapters/react/tsconfig.json --noEmit"

package/src/base.css CHANGED Viewed

@@ -14,6 +14,21 @@ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--weight-bol
 a { color: var(--color-primary); }
 :focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-width); border-radius: var(--radius-xs); }
 :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).
+ *
+ * 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 —
+ * 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
+ * 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 —
+ * 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
  * margins (see the kit's own list components, which each reset themselves). If you run a utility

package/src/components/accordion.css CHANGED Viewed

@@ -1,5 +1,9 @@
 /* Freeday — Accordion (native <details>/<summary>, zero-JS) */
-.fdy-accordion{border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);}
+/* 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
+   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);}
 .fdy-accordion__item > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);font-weight:var(--weight-medium);color:var(--color-text);}
 .fdy-accordion__item > summary::-webkit-details-marker{display:none;}

package/src/components/card.css CHANGED Viewed

@@ -1,5 +1,7 @@
 /* Freeday — Card */
-.fdy-card{background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lift);transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);}
+/* position:relative — containing block for out-of-flow card content (see base.css); it also gives
+   consumers the anchor a corner ribbon/badge needs. */
+.fdy-card{position:relative;background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lift);transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);}
 .fdy-card--elevated{box-shadow:var(--shadow-lift-hover);}
 .fdy-card--interactive{cursor:pointer;}
 .fdy-card--interactive:hover{box-shadow:var(--shadow-lift-hover);transform:translateY(-3px);}
@@ -10,6 +12,10 @@
  * announced — reset the UA button box. Note: it does NOT reset background/border, because
  * .fdy-card already sets its own surface + border (resetting them here would strip the card). */
 .fdy-card--button{display:block;width:100%;text-align:inherit;color:inherit;appearance:none;-webkit-appearance:none;}
+/* Disabled card-as-control — same contract as .fdy-list__row--button: dim + not-allowed, and the
+   --interactive lift is withdrawn so a refusing control stops answering the pointer. */
+.fdy-card--button:disabled,.fdy-card--button[aria-disabled="true"],.fdy-card--interactive[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
+.fdy-card--interactive:disabled:hover,.fdy-card--interactive[aria-disabled="true"]:hover{box-shadow:var(--shadow-lift);transform:none;}
 .fdy-card__body{padding:var(--space-5);}
 .fdy-card__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--color-text);margin:0 0 var(--space-1);}
 .fdy-card__desc{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;line-height:var(--leading-normal);}

package/src/components/carousel.css CHANGED Viewed

@@ -1,6 +1,9 @@
 /* Freeday — Carousel (scroll-snap track + arrows + dots). Enhanced by freeday-carousel.js. */
 .fdy-carousel{position:relative;}
-.fdy-carousel__viewport{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;border-radius:var(--radius-lg);scrollbar-width:none;-ms-overflow-style:none;}
+/* position:relative — the arrows are positioned against .fdy-carousel (the parent), so this only
+   catches out-of-flow content inside the SLIDES, which would otherwise escape the viewport
+   entirely and scroll the page by one slide-offset per slide (see base.css). */
+.fdy-carousel__viewport{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;border-radius:var(--radius-lg);scrollbar-width:none;-ms-overflow-style:none;}
 .fdy-carousel__viewport::-webkit-scrollbar{display:none;}
 .fdy-carousel__slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;}
 .fdy-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:0;border-radius:var(--radius-full);background:color-mix(in srgb,var(--color-surface) 86%,transparent);color:var(--color-text);box-shadow:var(--shadow-2);cursor:pointer;transition:background var(--dur-fast) var(--ease-standard);}

package/src/components/list.css ADDED Viewed

@@ -0,0 +1,36 @@
+/* Freeday — List: the FLAT row container.
+ *
+ * USAGE.md §3 puts list rows among the surfaces that should be flat, but until now the only
+ * container the kit shipped was .fdy-card — which carries --shadow-lift (a real 34px lift). A
+ * responsive table that becomes a list below `md` therefore had to choose between a stack of
+ * shadowed cards (against the doctrine) or a hand-built box, which needs a colour and so escapes
+ * the token system. This is that missing container: one flat surface, hairline dividers, no shadow.
+ *
+ * Not to be confused with .fdy-list-reset (base.css), which only strips UA bullets/indent.
+ * Works on <ul>/<ol> (list-style is reset here) or on plain <div>s. */
+/* position:relative — containing block for out-of-flow row content (see base.css). */
+.fdy-list{position:relative;list-style:none;margin:0;padding:0;background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;}
+.fdy-list__row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);min-width:0;}
+/* Divider between rows. Two shapes are supported and both are load-bearing: rows as direct children
+ * of the list, and rows wrapped in <li> (the semantic shape, where the ADJACENT siblings are the
+ * <li>s — a bare `.fdy-list__row + .fdy-list__row` silently matches nothing there). */
+.fdy-list__row + .fdy-list__row,
+.fdy-list > * + * > .fdy-list__row{border-top:var(--bw) solid var(--color-border-muted);}
+/* A row that is itself the control: render it as <button>/<a> and the UA box is reset without
+ * touching the list surface (same contract as .fdy-card--button). */
+.fdy-list__row--button{width:100%;text-align:inherit;color:inherit;font:inherit;background:none;border:0;appearance:none;-webkit-appearance:none;cursor:pointer;}
+.fdy-list__row--button:hover,.fdy-list__row--interactive:hover{background:var(--color-surface-2);}
+.fdy-list__row--button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-primary);}
+.fdy-list__row--interactive{cursor:pointer;}
+/* Disabled row. The reset above adopts the UA button box, but not its disabled state — so a row
+   disabled mid-flight (a redirect in progress, say) kept lighting up and kept a pointer cursor:
+   a control answering the pointer while refusing input. Same contract as every other disabled
+   control in the kit (dim + not-allowed), hover withdrawn, both the native and the aria- form. */
+.fdy-list__row--button:disabled,.fdy-list__row--button[aria-disabled="true"],.fdy-list__row--interactive[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
+.fdy-list__row--button:disabled:hover,.fdy-list__row--button[aria-disabled="true"]:hover,.fdy-list__row--interactive[aria-disabled="true"]:hover{background:none;}
+/* Row internals: a title/meta stack that truncates, and a trailing slot pinned right. */
+.fdy-list__main{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;flex:1;}
+.fdy-list__title{font-weight:var(--weight-medium);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.fdy-list__meta{font-size:var(--text-sm);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;}
+.fdy-list__aside{flex:none;display:flex;align-items:center;gap:var(--space-2);}
+/* Density: rows tighten with the rest of the kit (--space-* mid-range steps under compact). */