@cahyo-dimas/freeday 1.34.0 → 1.35.0

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [1.35.0] — 2026-08-19
+One note from the back-office app (IDU_EMATE_APPL_WEB, #012).
+### Added
+- **`.fdy-table--sticky` + `.fdy-table-scroll--frozen`** — a table frozen on one axis or both, for
+  a grid read against two axes at once (a rate matrix, a timetable). This is a kit class rather
+  than four lines in an app because `position:sticky` on its own produces a **visibly broken**
+  table: `.fdy-table` collapses its borders, a collapsed border is painted by the table rather than
+  by either cell, and so a frozen cell scrolls out from under its own rule — the frozen column
+  arrives with nothing separating it from the data. The modifier separates the borders and puts
+  each one back on the cell that sticks. `<thead>` freezes at the top, `<th scope="row">` at the
+  left, the first header cell is the corner, and the row header paints the **body** surface so a
+  hovered row stays one band across the freeze line. `.fdy-table-scroll--frozen` is the scrollport
+  the freeze resolves against (the base `.fdy-table-scroll` scrolls one axis, so `top:0` never
+  engages); size it with `--fdy-table-frozen-h`, default `30rem`.
+
 ## [1.34.0] — 2026-08-19
 One note from the back-office app (IDU_EMATE_APPL_WEB, #008), and the second half of #005 it
 finally makes answerable.

package/COMPONENTS.md

@@ -687,6 +687,26 @@ Semantic static table. Wrap in `.fdy-table-wrap` (bordered surface) or `.fdy-tab
 </div>
 ```
 
+**Frozen axes — `.fdy-table--sticky`.** For a grid read against two axes at once (a rate
+matrix, a timetable). Put `.fdy-table-scroll--frozen` on the wrapper — it scrolls both ways
+and is the scrollport the frozen cells stick to — and size it with `--fdy-table-frozen-h`
+(default `30rem`). `<thead>` freezes at the top, `<th scope="row">` freezes at the left, and
+the first header cell is the corner. Do not reach for `position:sticky` directly: the base
+table collapses its borders, and a collapsed border belongs to the table rather than the
+cell, so it scrolls out from under whatever you froze.
+
+```html
+<div class="fdy-table-scroll fdy-table-scroll--frozen" style="--fdy-table-frozen-h:26rem">
+  <table class="fdy-table fdy-table--sticky">
+    <caption class="fdy-visually-hidden">Exchange rates, August 2026</caption>
+    <thead><tr><th scope="col">Date</th><th scope="col" class="fdy-table__num">USD</th></tr></thead>
+    <tbody>
+      <tr><th scope="row">1 Aug</th><td class="fdy-table__num">16,240</td></tr>
+    </tbody>
+  </table>
+</div>
+```
+
 ## Data table — `.fdy-datatable`
 > **Typed wrapper: `<FdyTable>`** — controlled: `columns` + `rows`, with sort/filter/page events (`update:pageIndex` · `onPageIndexChange` · `PageIndexChanged`) and `process` for driving a card list off the same processed set. The markup below is the raw enhancer path.
 

package/dist/freeday.bundle.css

@@ -1657,6 +1657,30 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-table__selcol{width:1px;white-space:nowrap;}
 .fdy-table tbody tr[aria-selected="true"],.fdy-table tbody tr[aria-selected="true"]:hover{background:var(--color-primary-soft);}
 
+/* Frozen header row and/or first column — a rate matrix, a timetable, any grid read
+   against two axes at once.
+
+   This modifier exists because `position:sticky` alone is NOT enough. With
+   `border-collapse:collapse` the shared border belongs to the TABLE, not to either
+   cell, so a frozen cell scrolls out from under its own rule and the frozen column
+   loses the line that separates it from the data. Separate borders put each border
+   back on the cell that sticks. */
+.fdy-table--sticky{border-collapse:separate;border-spacing:0;}
+.fdy-table--sticky th,.fdy-table--sticky td{border-bottom:var(--bw) solid var(--color-border-muted);}
+.fdy-table--sticky thead th{position:sticky;top:0;z-index:2;border-bottom:var(--bw) solid var(--color-border);}
+/* The row header freezes sideways over the data cells, so it needs an opaque
+   background of its own — and it takes the BODY surface, not the header one, so a
+   hovered row stays one continuous band across the freeze line. Losing that is
+   losing the only way to track a row across a wide grid. */
+.fdy-table--sticky tbody th{position:sticky;left:0;z-index:1;background:var(--color-surface);border-right:var(--bw) solid var(--color-border);}
+.fdy-table--sticky tbody tr:hover th{background:var(--color-surface-2);}
+/* The corner cell is frozen on both axes, so it has to outrank both. */
+.fdy-table--sticky thead th:first-child{left:0;z-index:3;border-right:var(--bw) solid var(--color-border);}
+
+/* The scrollport a sticky cell sticks to. Both axes scroll here, and the height is a
+   custom property so a page can size it without out-specifying this rule. */
+.fdy-table-scroll--frozen{position:relative;overflow:auto;max-height:var(--fdy-table-frozen-h,30rem);}
+
 /* Data-table shell (toolbar + scroll + footer stay put while the table scrolls) */
 .fdy-datatable{border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);background:var(--color-surface);overflow:hidden;}
 .fdy-table-scroll{position:relative;overflow-x:auto;}

package/dist/freeday.css

@@ -1274,6 +1274,30 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-table__selcol{width:1px;white-space:nowrap;}
 .fdy-table tbody tr[aria-selected="true"],.fdy-table tbody tr[aria-selected="true"]:hover{background:var(--color-primary-soft);}
 
+/* Frozen header row and/or first column — a rate matrix, a timetable, any grid read
+   against two axes at once.
+
+   This modifier exists because `position:sticky` alone is NOT enough. With
+   `border-collapse:collapse` the shared border belongs to the TABLE, not to either
+   cell, so a frozen cell scrolls out from under its own rule and the frozen column
+   loses the line that separates it from the data. Separate borders put each border
+   back on the cell that sticks. */
+.fdy-table--sticky{border-collapse:separate;border-spacing:0;}
+.fdy-table--sticky th,.fdy-table--sticky td{border-bottom:var(--bw) solid var(--color-border-muted);}
+.fdy-table--sticky thead th{position:sticky;top:0;z-index:2;border-bottom:var(--bw) solid var(--color-border);}
+/* The row header freezes sideways over the data cells, so it needs an opaque
+   background of its own — and it takes the BODY surface, not the header one, so a
+   hovered row stays one continuous band across the freeze line. Losing that is
+   losing the only way to track a row across a wide grid. */
+.fdy-table--sticky tbody th{position:sticky;left:0;z-index:1;background:var(--color-surface);border-right:var(--bw) solid var(--color-border);}
+.fdy-table--sticky tbody tr:hover th{background:var(--color-surface-2);}
+/* The corner cell is frozen on both axes, so it has to outrank both. */
+.fdy-table--sticky thead th:first-child{left:0;z-index:3;border-right:var(--bw) solid var(--color-border);}
+
+/* The scrollport a sticky cell sticks to. Both axes scroll here, and the height is a
+   custom property so a page can size it without out-specifying this rule. */
+.fdy-table-scroll--frozen{position:relative;overflow:auto;max-height:var(--fdy-table-frozen-h,30rem);}
+
 /* Data-table shell (toolbar + scroll + footer stay put while the table scrolls) */
 .fdy-datatable{border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);background:var(--color-surface);overflow:hidden;}
 .fdy-table-scroll{position:relative;overflow-x:auto;}

package/package.json

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

package/src/components/table.css

@@ -37,6 +37,30 @@
 .fdy-table__selcol{width:1px;white-space:nowrap;}
 .fdy-table tbody tr[aria-selected="true"],.fdy-table tbody tr[aria-selected="true"]:hover{background:var(--color-primary-soft);}
 
+/* Frozen header row and/or first column — a rate matrix, a timetable, any grid read
+   against two axes at once.
+
+   This modifier exists because `position:sticky` alone is NOT enough. With
+   `border-collapse:collapse` the shared border belongs to the TABLE, not to either
+   cell, so a frozen cell scrolls out from under its own rule and the frozen column
+   loses the line that separates it from the data. Separate borders put each border
+   back on the cell that sticks. */
+.fdy-table--sticky{border-collapse:separate;border-spacing:0;}
+.fdy-table--sticky th,.fdy-table--sticky td{border-bottom:var(--bw) solid var(--color-border-muted);}
+.fdy-table--sticky thead th{position:sticky;top:0;z-index:2;border-bottom:var(--bw) solid var(--color-border);}
+/* The row header freezes sideways over the data cells, so it needs an opaque
+   background of its own — and it takes the BODY surface, not the header one, so a
+   hovered row stays one continuous band across the freeze line. Losing that is
+   losing the only way to track a row across a wide grid. */
+.fdy-table--sticky tbody th{position:sticky;left:0;z-index:1;background:var(--color-surface);border-right:var(--bw) solid var(--color-border);}
+.fdy-table--sticky tbody tr:hover th{background:var(--color-surface-2);}
+/* The corner cell is frozen on both axes, so it has to outrank both. */
+.fdy-table--sticky thead th:first-child{left:0;z-index:3;border-right:var(--bw) solid var(--color-border);}
+
+/* The scrollport a sticky cell sticks to. Both axes scroll here, and the height is a
+   custom property so a page can size it without out-specifying this rule. */
+.fdy-table-scroll--frozen{position:relative;overflow:auto;max-height:var(--fdy-table-frozen-h,30rem);}
+
 /* Data-table shell (toolbar + scroll + footer stay put while the table scrolls) */
 .fdy-datatable{border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);background:var(--color-surface);overflow:hidden;}
 .fdy-table-scroll{position:relative;overflow-x:auto;}