@cahyo-dimas/freeday 1.36.0 → 1.38.0

package/CHANGELOG.md

@@ -3,6 +3,54 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [1.38.0] — 2026-08-19
+One note from the back-office app (IDU_EMATE_APPL_WEB, #015).
+### Fixed
+- **`FdyCfl`'s trigger said `"Buka pencarian"`** (Vue · React) — the accessible name of the button
+  that opens the picker, and so the first thing a screen-reader user meets on every
+  choose-from-list. #009 replaced twelve strings around it and missed this one. It takes an
+  `openLabel` prop defaulting to `'Open search'` now. Blazor was not Indonesian but was using
+  `SearchPlaceholder` as that button's `aria-label` — a placeholder doing a label's job — and now
+  takes the same `OpenLabel`, so all four stacks name the control identically.
+- **`FdyCascade`'s up-one-level button said `"Kembali satu tingkat"`** (Vue · React) — new
+  `backLabel`, default `'Back one level'`.
+### Changed
+- **The language guard now lists derived forms, not just roots.** `\bcari\b` cannot match
+  *pen·cari·an*, and `kembali` was never listed — Indonesian derives by affix, so a whole-word list
+  misses most of the UI vocabulary. Widening it is what surfaced the `FdyCascade` string nobody had
+  reported.
+
+### Fixed — the test suite
+- **`rules()` read only the last line of a selector**, so a rule written across several lines was
+  reported under a fragment of its own name and every guard in `test/css.test.mjs` was blind to it
+  (#014). A guard that matches nothing PASSES, which is the worst way for a test to fail — it
+  surfaced only because the first draft of the filter-bar rule happened to be wrapped. The helper
+  now strips comments from the whole source first (a comment quoting CSS carries braces, and those
+  would split a rule in half) and reads the selector whole. Asserted directly rather than left to
+  the CSS staying one-rule-per-line: that is a convention, and this is the thing that would quietly
+  stop enforcing it. Mutation-tested — restoring the last-line read fails the new test by name.
+
+## [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/adapters/blazor/FdyCfl.razor

@@ -21,7 +21,7 @@
         </button>
     }
     <button class="fdy-input-group__btn" type="button" @onclick="OpenAsync"
-            disabled="@(Disabled || Readonly)" aria-label="@SearchPlaceholder">
+            disabled="@(Disabled || Readonly)" aria-label="@OpenLabel">
         <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"
              stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <circle cx="11" cy="11" r="7"></circle><path d="m21 21-4.3-4.3"></path>

package/adapters/blazor/FdyCfl.razor.cs

@@ -32,6 +32,9 @@ public partial class FdyCfl<TRow>
     [Parameter] public string MoreText { get; set; } = "Load more";
     [Parameter] public string CloseLabel { get; set; } = "Close";
 
+    /// <summary>aria-label for the button that opens the picker.</summary>
+    [Parameter] public string OpenLabel { get; set; } = "Open search";
+
     [Parameter] public bool Disabled { get; set; }
 
     /// <summary>Locked/view mode: shows the value but the search dialog can't be opened.</summary>

package/adapters/react/components/FdyCascade.tsx

@@ -23,6 +23,8 @@ export interface FdyCascadeProps {
   options: ReadonlyArray<CascadeNode>;
   /** Path separator in the display, default " / " (matches the enhancer). */
   separator?: string;
+  /** aria-label for the button that goes up one level. Default 'Back one level'. */
+  backLabel?: string;
   placeholder?: string;
   /** Accessible name for the trigger + listbox (the enhancer's data-label). */
   label?: string;
@@ -191,7 +193,7 @@ export function FdyCascade(props: FdyCascadeProps): JSX.Element {
           <button
             type="button"
             className="fdy-cascade__back"
-            aria-label="Kembali satu tingkat"
+            aria-label={props.backLabel ?? 'Back one level'}
             hidden={stack.length === 0}
             onClick={(): void => { ascend(); listRef.current?.focus(); }}
           >

package/adapters/react/components/FdyCfl.tsx

@@ -43,6 +43,8 @@ export interface FdyCflProps<Row extends Record<string, unknown>> {
   moreText?: string;
   /** aria-label for the dialog's close button. Default 'Close'. */
   closeLabel?: string;
+  /** aria-label for the button that opens the picker. Default 'Open search'. */
+  openLabel?: string;
   placeholder?: string;
   disabled?: boolean;
   /** Locked/view mode: shows the picked value (focusable, copyable), but the search dialog can't be opened. Unlike `disabled`, it keeps tab order and isn't greyed. */
@@ -300,7 +302,7 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
         className="fdy-input-group__btn"
         aria-haspopup="dialog"
         aria-labelledby={props.ariaLabelledby}
-        aria-label={props.ariaLabelledby ? undefined : 'Buka pencarian'}
+        aria-label={props.ariaLabelledby ? undefined : (props.openLabel ?? 'Open search')}
         disabled={isDisabled || isReadonly}
         onClick={openDialog}
       >

package/adapters/vue/components/FdyCascade.vue

@@ -36,6 +36,8 @@ const props = defineProps<{
   options: ReadonlyArray<CascadeNode>;
   /** Path separator in the display, default " / " (matches the enhancer). */
   separator?: string;
+  /** aria-label for the button that goes up one level. Default 'Back one level'. */
+  backLabel?: string;
   placeholder?: string;
   /** Accessible name for the trigger + listbox (the enhancer's data-label). */
   label?: string;
@@ -207,7 +209,7 @@ onBeforeUnmount((): void => {
         <button
           type="button"
           class="fdy-cascade__back"
-          aria-label="Kembali satu tingkat"
+          :aria-label="backLabel ?? 'Back one level'"
           :hidden="stack.length === 0"
           @click="ascend(); listEl?.focus()"
         >

package/adapters/vue/components/FdyCfl.vue

@@ -44,6 +44,8 @@ const props = defineProps<{
   moreText?: string;
   /** aria-label for the dialog's close button. Default 'Close'. */
   closeLabel?: string;
+  /** aria-label for the button that opens the picker. Default 'Open search'. */
+  openLabel?: string;
   placeholder?: string;
   disabled?: boolean;
   /** Locked/view mode: shows the picked value (focusable, copyable), but the search dialog can't be opened. Unlike `disabled`, it keeps tab order and isn't greyed. */
@@ -306,7 +308,7 @@ onBeforeUnmount((): void => {
       class="fdy-input-group__btn"
       aria-haspopup="dialog"
       :aria-labelledby="ariaLabelledby"
-      :aria-label="ariaLabelledby ? undefined : 'Buka pencarian'"
+      :aria-label="ariaLabelledby ? undefined : (openLabel ?? 'Open search')"
       :disabled="isDisabled || isReadonly"
       @click="openDialog"
     >

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.38.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. */