@cahyo-dimas/freeday 1.36.0 → 1.37.0

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [1.37.0] — 2026-08-19
+One note from the back-office app (IDU_EMATE_APPL_WEB, #014).
+### Added
+- **`.fdy-table__freeze` + `--fdy-freeze-left`** — freeze **any number** of columns, not just the
+  first. 1.35.0 froze `tbody th` at a hard-coded `left:0`, which suits a rate matrix's single row
+  header and cannot express a wide table with two identity columns: they all landed on 0 and
+  stacked. Mark every cell of a frozen column and give that column its offset; the offsets belong
+  to the caller because they are sums of *rendered* widths, which CSS cannot compute.
+  `.fdy-table__freeze--edge` marks where the frozen block ends.
+- **A bare control in a `.fdy-filterbar` gets `--control-h`.** The bar aligns `flex-end` so
+  labelled fields line up on their inputs; a `.fdy-check` / `.fdy-switch` / `.fdy-radio` / lone
+  `.fdy-btn` has no label row, so flex-end left it sitting below the input's centre line. Now its
+  box ends where an input's box ends and the control centres on that line.
+### Changed
+- **BREAKING (from 1.35.0): the header freeze moved to `.fdy-table--sticky-head`.** Freezing a row
+  needs a vertical scrollport; a table that only freezes columns scrolls with the **page**, where
+  `top:0` sticks the header under the viewport edge — over the consuming app's own top bar.
+  `.fdy-table--sticky` is now the enabler (separate borders) and each axis is asked for
+  explicitly. `tbody th` no longer freezes implicitly; use `.fdy-table__freeze`. 1.35.0 and 1.36.0
+  are unpublished, so no released version carried the old contract.
+
 ## [1.36.0] — 2026-08-19
 One note from the back-office app (IDU_EMATE_APPL_WEB, #013).
 ### Added

package/COMPONENTS.md

@@ -639,7 +639,11 @@ Responsive two-column document header. Children are `.fdy-field`; `.fdy-field--f
 ## Filter bar — `.fdy-filterbar`
 A consistent filter row of `.fdy-field`s with a width rhythm (`--w-sm` · default · `--w-lg` ·
 `--w-xl` · `--w-2xl`), one `--w-grow` field (usually search) absorbing the slack, and
-`.fdy-filterbar__actions` pinned at the end. `--actions-inline` keeps the actions on the control
+`.fdy-filterbar__actions` pinned at the end. A control with **no label of its own** (a
+`.fdy-check`, `.fdy-switch`, `.fdy-radio`, or a lone `.fdy-btn`) is given `--control-h` so it
+centres on the input line instead of hanging below it — the bar aligns `flex-end` to line up
+labelled fields, which would otherwise drop a 20px checkbox below a 32px input's centre.
+`--actions-inline` keeps the actions on the control
 line. Zero JS. Composes with `.fdy-table-toolbar` on a shared baseline.
 
 ## Slider — `.fdy-slider`
@@ -695,20 +699,36 @@ Semantic static table. Wrap in `.fdy-table-wrap` (bordered surface) or `.fdy-tab
 ```
 
 **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.
+matrix, a timetable) or a wide one whose identity columns must stay visible. `.fdy-table--sticky`
+is the enabler: it separates the borders, because a collapsed border belongs to the table rather
+than the cell and scrolls out from under whatever you froze. Then ask for the axes you have:
+
+- **Header row** — add `.fdy-table--sticky-head`, and put `.fdy-table-scroll--frozen` on the
+  wrapper (it scrolls both ways and is the scrollport the freeze resolves against; size it with
+  `--fdy-table-frozen-h`, default `30rem`). It is a separate modifier because a table that only
+  freezes columns scrolls with the **page**, and `top:0` against the page sticks the header under
+  the viewport edge — over the app's own top bar.
+- **Columns** — put `.fdy-table__freeze` on **every cell of the column, header included**, and give
+  each frozen column its own `--fdy-freeze-left`: `0` for the first, then the summed widths of the
+  frozen columns to its left. Mark the last one `.fdy-table__freeze--edge` so the reader can see
+  where the frozen block ends. One frozen column needs no variable at all.
+
+The offsets are the caller's job because they depend on rendered column widths, which CSS cannot
+sum — measure them once after render (and on resize) and set the variable.
 
 ```html
 <div class="fdy-table-scroll fdy-table-scroll--frozen" style="--fdy-table-frozen-h:26rem">
-  <table class="fdy-table fdy-table--sticky">
+  <table class="fdy-table fdy-table--sticky fdy-table--sticky-head">
     <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>
+    <thead><tr>
+      <th scope="col" class="fdy-table__freeze fdy-table__freeze--edge">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>
+      <tr>
+        <th scope="row" class="fdy-table__freeze fdy-table__freeze--edge">1 Aug</th>
+        <td class="fdy-table__num">16,240</td>
+      </tr>
     </tbody>
   </table>
 </div>

package/dist/freeday.bundle.css

@@ -1298,6 +1298,14 @@ a { color: var(--color-primary); }
  * `flex:1 1 16rem` reserves 16rem for line-breaking), NOT its rendered width — so the grow basis,
  * not the visible width, decides the wrap point. Margins can't keep the actions off a lonely wrapped
  * row; to avoid stranded actions, tune the --w-grow basis or drop a field so the bar fits one row. */
+/* A control that carries NO label of its own — a checkbox, a switch, a lone
+   button — in a bar whose `align-items:flex-end` exists to line up LABELLED
+   fields. Flex-end puts such a control's bottom on the inputs' bottom, so a
+   20px checkbox sits well below the 32px input's centre line and reads as
+   dropped. Giving it the height of a control lands its box exactly where an
+   input's box ends, and its own centring then puts it on the input's centre
+   line. Raised from IDU_EMATE_APPL_WEB (#014). */
+.fdy-filterbar>.fdy-check,.fdy-filterbar>.fdy-radio,.fdy-filterbar>.fdy-switch,.fdy-filterbar>.fdy-btn{min-height:var(--control-h);}
 .fdy-filterbar__actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto;}
 /* Opt-in: sit the actions inline right after the last field instead of at the far edge — so when the
  * bar wraps they read as attached to the filters rather than shoved to the right of a lonely row. */
@@ -1667,15 +1675,37 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
    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);}
+
+/* Freezing the HEADER ROW is its own modifier because it needs a vertical
+   scrollport (`.fdy-table-scroll--frozen`). A table that only freezes columns
+   scrolls with the PAGE, and `top:0` against the page sticks the header under
+   the viewport edge — over the app's own top bar — which is worse than not
+   freezing it. Ask for the axis you actually have. */
+.fdy-table--sticky-head thead th{position:sticky;top:0;z-index:2;border-bottom:var(--bw) solid var(--color-border);}
+
+/* Freezing a COLUMN: put `.fdy-table__freeze` on every cell of it, header
+   included, and give each frozen column its own `--fdy-freeze-left` — 0 for the
+   first, the summed widths of the frozen columns left of it after that. One
+   frozen column needs no variable at all. Mark the last one `--edge` so the
+   reader can see where the frozen block ends.
+
+   The offsets are the caller's job on purpose: they depend on rendered column
+   widths, which CSS cannot sum, and hard-coding them here would only work for
+   tables whose columns are all the same width. */
+.fdy-table--sticky .fdy-table__freeze{position:sticky;left:var(--fdy-freeze-left,0);}
+/* A frozen body cell slides OVER the data, so it must be OPAQUE — otherwise the
+   cells beneath show through it. A `th` already carries the header tint from the
+   base rule, and that tint is usually the whole point: it is what marks a column
+   as identity rather than data. So only a `td` is given a surface here. A table
+   that wants its frozen `th` to read as a body row instead — a rate matrix, where
+   a hovered row should band unbroken across the freeze line — says so itself. */
+.fdy-table--sticky tbody .fdy-table__freeze{z-index:1;}
+.fdy-table--sticky tbody td.fdy-table__freeze{background:var(--color-surface);}
+.fdy-table--sticky tbody tr:hover td.fdy-table__freeze{background:var(--color-surface-2);}
+/* A frozen header cell is stuck on both axes wherever the head is frozen too, so
+   it has to outrank both. */
+.fdy-table--sticky thead .fdy-table__freeze{z-index:3;}
+.fdy-table--sticky .fdy-table__freeze--edge{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. */

package/dist/freeday.css

@@ -915,6 +915,14 @@ a { color: var(--color-primary); }
  * `flex:1 1 16rem` reserves 16rem for line-breaking), NOT its rendered width — so the grow basis,
  * not the visible width, decides the wrap point. Margins can't keep the actions off a lonely wrapped
  * row; to avoid stranded actions, tune the --w-grow basis or drop a field so the bar fits one row. */
+/* A control that carries NO label of its own — a checkbox, a switch, a lone
+   button — in a bar whose `align-items:flex-end` exists to line up LABELLED
+   fields. Flex-end puts such a control's bottom on the inputs' bottom, so a
+   20px checkbox sits well below the 32px input's centre line and reads as
+   dropped. Giving it the height of a control lands its box exactly where an
+   input's box ends, and its own centring then puts it on the input's centre
+   line. Raised from IDU_EMATE_APPL_WEB (#014). */
+.fdy-filterbar>.fdy-check,.fdy-filterbar>.fdy-radio,.fdy-filterbar>.fdy-switch,.fdy-filterbar>.fdy-btn{min-height:var(--control-h);}
 .fdy-filterbar__actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto;}
 /* Opt-in: sit the actions inline right after the last field instead of at the far edge — so when the
  * bar wraps they read as attached to the filters rather than shoved to the right of a lonely row. */
@@ -1284,15 +1292,37 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
    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);}
+
+/* Freezing the HEADER ROW is its own modifier because it needs a vertical
+   scrollport (`.fdy-table-scroll--frozen`). A table that only freezes columns
+   scrolls with the PAGE, and `top:0` against the page sticks the header under
+   the viewport edge — over the app's own top bar — which is worse than not
+   freezing it. Ask for the axis you actually have. */
+.fdy-table--sticky-head thead th{position:sticky;top:0;z-index:2;border-bottom:var(--bw) solid var(--color-border);}
+
+/* Freezing a COLUMN: put `.fdy-table__freeze` on every cell of it, header
+   included, and give each frozen column its own `--fdy-freeze-left` — 0 for the
+   first, the summed widths of the frozen columns left of it after that. One
+   frozen column needs no variable at all. Mark the last one `--edge` so the
+   reader can see where the frozen block ends.
+
+   The offsets are the caller's job on purpose: they depend on rendered column
+   widths, which CSS cannot sum, and hard-coding them here would only work for
+   tables whose columns are all the same width. */
+.fdy-table--sticky .fdy-table__freeze{position:sticky;left:var(--fdy-freeze-left,0);}
+/* A frozen body cell slides OVER the data, so it must be OPAQUE — otherwise the
+   cells beneath show through it. A `th` already carries the header tint from the
+   base rule, and that tint is usually the whole point: it is what marks a column
+   as identity rather than data. So only a `td` is given a surface here. A table
+   that wants its frozen `th` to read as a body row instead — a rate matrix, where
+   a hovered row should band unbroken across the freeze line — says so itself. */
+.fdy-table--sticky tbody .fdy-table__freeze{z-index:1;}
+.fdy-table--sticky tbody td.fdy-table__freeze{background:var(--color-surface);}
+.fdy-table--sticky tbody tr:hover td.fdy-table__freeze{background:var(--color-surface-2);}
+/* A frozen header cell is stuck on both axes wherever the head is frozen too, so
+   it has to outrank both. */
+.fdy-table--sticky thead .fdy-table__freeze{z-index:3;}
+.fdy-table--sticky .fdy-table__freeze--edge{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. */

package/package.json

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

package/src/components/filterbar.css

@@ -28,6 +28,14 @@
  * `flex:1 1 16rem` reserves 16rem for line-breaking), NOT its rendered width — so the grow basis,
  * not the visible width, decides the wrap point. Margins can't keep the actions off a lonely wrapped
  * row; to avoid stranded actions, tune the --w-grow basis or drop a field so the bar fits one row. */
+/* A control that carries NO label of its own — a checkbox, a switch, a lone
+   button — in a bar whose `align-items:flex-end` exists to line up LABELLED
+   fields. Flex-end puts such a control's bottom on the inputs' bottom, so a
+   20px checkbox sits well below the 32px input's centre line and reads as
+   dropped. Giving it the height of a control lands its box exactly where an
+   input's box ends, and its own centring then puts it on the input's centre
+   line. Raised from IDU_EMATE_APPL_WEB (#014). */
+.fdy-filterbar>.fdy-check,.fdy-filterbar>.fdy-radio,.fdy-filterbar>.fdy-switch,.fdy-filterbar>.fdy-btn{min-height:var(--control-h);}
 .fdy-filterbar__actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto;}
 /* Opt-in: sit the actions inline right after the last field instead of at the far edge — so when the
  * bar wraps they read as attached to the filters rather than shoved to the right of a lonely row. */

package/src/components/table.css

@@ -47,15 +47,37 @@
    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);}
+
+/* Freezing the HEADER ROW is its own modifier because it needs a vertical
+   scrollport (`.fdy-table-scroll--frozen`). A table that only freezes columns
+   scrolls with the PAGE, and `top:0` against the page sticks the header under
+   the viewport edge — over the app's own top bar — which is worse than not
+   freezing it. Ask for the axis you actually have. */
+.fdy-table--sticky-head thead th{position:sticky;top:0;z-index:2;border-bottom:var(--bw) solid var(--color-border);}
+
+/* Freezing a COLUMN: put `.fdy-table__freeze` on every cell of it, header
+   included, and give each frozen column its own `--fdy-freeze-left` — 0 for the
+   first, the summed widths of the frozen columns left of it after that. One
+   frozen column needs no variable at all. Mark the last one `--edge` so the
+   reader can see where the frozen block ends.
+
+   The offsets are the caller's job on purpose: they depend on rendered column
+   widths, which CSS cannot sum, and hard-coding them here would only work for
+   tables whose columns are all the same width. */
+.fdy-table--sticky .fdy-table__freeze{position:sticky;left:var(--fdy-freeze-left,0);}
+/* A frozen body cell slides OVER the data, so it must be OPAQUE — otherwise the
+   cells beneath show through it. A `th` already carries the header tint from the
+   base rule, and that tint is usually the whole point: it is what marks a column
+   as identity rather than data. So only a `td` is given a surface here. A table
+   that wants its frozen `th` to read as a body row instead — a rate matrix, where
+   a hovered row should band unbroken across the freeze line — says so itself. */
+.fdy-table--sticky tbody .fdy-table__freeze{z-index:1;}
+.fdy-table--sticky tbody td.fdy-table__freeze{background:var(--color-surface);}
+.fdy-table--sticky tbody tr:hover td.fdy-table__freeze{background:var(--color-surface-2);}
+/* A frozen header cell is stuck on both axes wherever the head is frozen too, so
+   it has to outrank both. */
+.fdy-table--sticky thead .fdy-table__freeze{z-index:3;}
+.fdy-table--sticky .fdy-table__freeze--edge{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. */