@cahyo-dimas/freeday 1.33.0 → 1.34.0

package/CHANGELOG.md

@@ -3,6 +3,123 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [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.
+### Added
+- **`pageSizes` on `FdyTable`** (Vue · React · Blazor) and `data-fdy-table-page-size` for the
+  enhancer. The footer stated the range and moved the page and stopped there — no control for **how
+  many rows a page holds**, which is the first thing anybody changes on a ninety-row list. The three
+  numbers are one object: the component already receives `index`, `size` and `total`, rendered two
+  of them, and left the third to the caller — so the caller withheld the whole footer with
+  `pager={false}` and rebuilt all three to add the one. Give it `pageSizes` and it grows the control
+  between the range and the pager. Server mode reports the pick through the existing
+  `update:page` / `onPageChange` / `PageChanged`, carrying a new `size`; client mode applies it
+  itself (so it works with nothing wired) and also emits `update:pageSize` / `onPageSizeChange` /
+  `PageSizeChanged` for a caller that wants to persist it.
+- **`FdyTableFooter`** (Vue · React · Blazor) — the footer as a component of its own. This is the
+  half of #005 that `pager={false}` could only get out of the way: a **responsive** list renders one
+  page of rows twice, a `.fdy-datatable` at `lg` and a `.fdy-list` below it, and a footer that lives
+  inside the table lives inside the half a phone hides. Those screens took the footer over and
+  re-implemented it. Now they render the kit's, once, outside both. `FdyTable` uses the same
+  component internally, so there is one footer in the kit and not two that drift.
+- **`pageIndexForSize(pageIndex, oldSize, newSize)`** in the shared table model. Resizing the page
+  has two obvious answers and both are wrong: back to page 1 throws away the reader's place, and
+  keeping the same index can land past the end (page 5 of 5 at twenty rows is page 2 of 2 at fifty).
+  Anchoring on the first visible row always resolves, and it is what the reader expects — the row
+  they were looking at is still on screen.
+### Notes on the shape of the fix
+- **A footer with a size control stays visible on a single page.** The old rule withheld the whole
+  band whenever `totalPages === 1`, which would have made "100 rows" on a ninety-row list a one-way
+  door: the control that got you there disappears with the pager. Visibility is now "there is a
+  pager **or** there is a size control", and it lives in `FdyTableFooter` — one decision, four
+  stacks.
+- **No wrapper element.** `.fdy-table-footer__size` takes `margin-left:auto`, so the size control and
+  the pager travel together on the right while the range stays left. The footer's DOM is byte-
+  identical for every table that does not offer one.
+- **`.fdy-combo`, not a native `<select>`.** The first cut of this shipped a native one, reasoning
+  that three one-word options do not need a custom listbox. They do: an OS menu is unthemeable, and
+  on macOS it drops a dark grey panel into a light page — which is the reason `FdyCombo` exists, and
+  its own source header says so. Caught by a consuming app in a screenshot within the hour, before
+  the release reached npm. The raw path still accepts either: the enhancer listens for `change` *and*
+  for the `fdy-change` a `.fdy-combo` emits.
+### Added — guards
+- `pageIndexForSize` is unit-tested at the boundaries (first page, both directions, same-size no-op,
+  a negative index, a zero size).
+- The control is measured in a real browser, on two tables sharing one page state, **driven by real
+  clicks on the popup** rather than a synthetic `change`: the server-mode pick must reach the caller
+  **with the right index** (page 3 of five-row pages → page 2 of ten), and the client-mode table —
+  deliberately wired to nothing — must still grow to 25 rows, because a control that only reports is
+  a control that lies. Opening the popup is the half that would have caught the native `<select>`.
+### Fixed
+- **The typed `FdyCfl` dialog was Indonesian end to end, in every stack but Blazor** (#009).
+  COMPONENTS.md promises the Vue/React/Blazor components are English throughout — that is the line an
+  English app adopts the wrappers on — and the CFL broke it in **twelve strings** (`Pilih data`,
+  `Tutup`, `Cari…`, `Memuat…`, `Coba lagi`, `Tidak ada hasil.`, `Hasil pencarian`, `Muat lebih
+  banyak`, `Klik baris untuk memilih`) with **not one prop reaching any of them**. Blazor already had
+  the whole set as English-defaulted parameters, so Vue and React now take the same props with the
+  same defaults: a parity gap closing, not a translation being chosen. `FdyCascade` (`Pilih` /
+  `Pilih…`) and `FdyAutocomplete` (`Tak ada hasil.`) get English defaults too; both were already
+  overridable. The enhancers keep their Indonesian — documented, deliberate, a separate decision
+  (NEXT-UP #6).
+
+- **A guard for each.** The paragraph margins are checked against the classes the DOCS show on a
+  `<p>`, so a new one is covered by documenting it — the step nobody skips. The grid ordering is
+  asserted as an ORDER, because a specificity bug is invisible in either rule and only their sequence
+  shows it. Both mutation-tested.
+- **A guard for it.** `npm test` scans every string literal in `adapters/{vue,react,blazor}` for
+  twenty unambiguous Indonesian words. One of the twelve was found by looking at a screen; the other
+  eleven by the sweep that one prompted — reading finds the instance, only a mechanical check finds
+  the class. Matched by word rather than by a list of components, so a new adapter is covered the day
+  it lands.
+
+- **`.fdy-eyebrow` and `.fdy-cfl__empty` never cleared the UA's `<p>` margin** (#010). Every other
+  class the kit documents on a paragraph sets `margin:0`; these two did not, so a browser's 1em
+  landed as spacing nobody wrote — 12px above the eyebrow and 12px below it. A consuming app reported
+  it as two complaints ("the gap from the category to the top bar is too big" and "the gap between
+  the title and the record value is too loose"); they were one missing declaration, and it made the
+  top of every page 44px against 32px at the sides.
+- **The footer's rows control was 4px taller than every other control** (#010). It carried
+  `height:2.25rem` to match the pager links beside it, which made the one combobox in a compact app
+  disagree with every input and combo on the page. A pager link is a nav button; the thing a
+  combobox has to agree with is the form controls, so the height goes back to `--control-h`.
+- **`.fdy-list__title` did not set its own type** (#010). The class carries weight, colour and
+  truncation but inherited font-size and family, so on the `<span>` the docs show it is 16px body
+  text and on an `<h3>` — a legitimate element for a row that names a record — the UA's 1.17em and
+  base.css's display-font rule made it 18.7px Sora. A phone row's name then shouted over its meta,
+  and a long one wrapped to two lines instead of ellipsising. A class that names a role owns the type
+  for that role.
+- **Seven more title classes let the element decide their type** (#011). The fix above was written
+  for one class; asserting it as an invariant found the rest. `.fdy-alert__title`,
+  `.fdy-dropzone__title` and `.fdy-toast__title` stated no `font-size` and no `margin`;
+  `.fdy-state__title`, `.fdy-cal__title`, `.fdy-app__brand-title` and `.fdy-app__brand-subtitle`
+  stated no `margin`. On the elements the docs show, all eight rendered correctly and always had —
+  a `<span>` brings no margin and no size of its own. On a heading, which is the honest markup for
+  an empty state's title or a row that names a record, the UA supplied `1.17em`, `bold` and `1em 0`
+  and the kit's type scale simply did not apply. `font-size:inherit` is the fix where the class had
+  no size of its own: it is what the documented span already did, and on a heading it declines the
+  UA's `em` instead of inheriting it. **No rendering changes for markup that follows the docs.**
+### Added — guards
+- **A title class must render the same whatever element carries it** (#011). `npm test` asserts
+  `margin`, `font-size` and `font-weight` on every `.fdy-*title` rule that sets type and is not a
+  flex/grid box. This is #010's guard with the right invariant: that one checks the classes the docs
+  show on a `<p>`, so it could only ever see the documented element, and the kit does not own that
+  choice — heading level is the consuming app's semantics. Scoped to title roles deliberately:
+  asserted over every class that sets type it fails 53 times on `.fdy-btn--sm`, `.fdy-avatar--xs`
+  and friends, and a guard that loud is one somebody silences. It found the eighth class after the
+  fix list had been written by eye. Mutation-tested.
+- **The month grid rendered seven months across** (#010). `.fdy-cal__grid--months` sets three
+  columns and `.fdy-cal__grid` sets seven; both sit on the same element and weigh the same, so
+  source order decides — and the modifier was declared *before* the base it modifies, with a comment
+  directly above it describing the 3×4 layout it was failing to produce. Moved after. Neither rule is
+  wrong on its own, which is why reading them found nothing.
+
+### Fixed — the kit's own suite
+- `browser/fixtures/theme-subtree.html` had no explicit theme on `<html>`, so its "light app" probe
+  fell to `prefers-color-scheme`. On a machine in dark mode both probes read the dark ink and the
+  test failed claiming `data-theme` had gone back to being root-scoped. Pinned; the subtree
+  behaviour under test is unchanged.
+
 ## [1.33.0] — 2026-08-18
 Three notes from the back-office app, four findings, all four executed.
 ### Added

package/COMPONENTS.md

@@ -705,8 +705,12 @@ pagination. Needs `freeday-table.js`. Wrap the whole thing in `.fdy-datatable` +
 - Selection: `.fdy-table__selcol` cells with `data-fdy-select-all` / `data-fdy-row-select`
 - Rows: `.fdy-table__row--activatable` (clickable rows), `.fdy-table__detailrow` (expandable
   detail), `.fdy-table__state` (in-table empty/loading row)
-- Footer: `.fdy-table-footer` · `__info` (`data-fdy-table-info`) + `<nav class="fdy-pagination"
-  data-fdy-table-pagination>`
+- Footer: `.fdy-table-footer` · `__info` (`data-fdy-table-info`) + optional `__size` (a label and a
+  rows-per-page control) + `<nav class="fdy-pagination" data-fdy-table-pagination>`. The typed
+  wrappers render `FdyCombo` there — **never a native `<select>`**, whose open list is an OS menu no
+  stylesheet reaches. In the raw path the control is app-authored markup (its options *are* the
+  offer) carrying `data-fdy-table-page-size`; the enhancer only wires it, and listens for both
+  `change` and the `fdy-change` a `.fdy-combo` emits, so either kind works.
 - Sort values: put the raw value in `data-sort-value` when the cell text is formatted.
 - **Language caveat:** every user-visible string the **vanilla enhancers** write is Indonesian —
   the table's footer and bulk count (`Menampilkan 1–5 dari 7`, `N dipilih`), its pager and filter
@@ -722,6 +726,26 @@ accessible name (`Filter <column>`) — a dialog named after its trigger is the
 Playwright/Testing-Library suite that means `getByLabel('Filter Name')` resolves to two elements;
 reach for `getByRole('button', { name: 'Filter Name' })` instead.
 
+**Rows per page.** Pass `pageSizes` (Vue/React `:page-sizes="[10, 20, 50]"`, Blazor
+`PageSizes="…"`) and the footer grows a rows-per-page control between the range and the pager.
+Omit it for none — unchanged default. Picking a size keeps the reader on the row they were looking
+at rather than dropping them on page 1.
+
+- **server mode** — reported through `update:page` / `onPageChange` / `PageChanged`, the same event
+  as a page click, carrying the new `size`. Read `size` to tell the two apart.
+- **client mode** — the table applies it itself, so the control works with nothing wired, and also
+  emits `update:pageSize` / `onPageSizeChange` / `PageSizeChanged` for a caller that wants to
+  persist the choice. Changing the `pageSize` prop wins back.
+
+A footer with a size control stays visible on a single page — otherwise picking "100" on a
+ninety-row list would remove the only way back to twenty.
+
+**Typed wrapper: `<FdyTableFooter>`** — the footer alone (`page` in, `update:page` /
+`onPageChange` / `PageChanged` out), for the one shape that cannot use the table's own: a
+**responsive** list, where a `.fdy-datatable` at `lg` and a `.fdy-list` below it are two renderings
+of one page of rows. A footer inside the table is inside the half a phone hides, so those screens
+render it once, outside both, with `pager={false}` on the table.
+
 **Who draws the pager.** The table renders its own footer (range + pager) whenever there is more
 than one page. Two ways to take it over:
 

package/README.id.md

@@ -5,7 +5,7 @@
 > **Lebih banyak _free day_ buat dev — UI kit-nya sudah siap pakai.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v1.33.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.33.0)
+[![Release](https://img.shields.io/badge/release-v1.34.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.34.0)
 
 UI KIT yang token-driven & framework-agnostic — satu sumber kebenaran untuk warna, tipografi,
 spasi, dan komponen. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/README.md

@@ -5,7 +5,7 @@
 > **More free days for devs — the UI kit is ready to use.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v1.33.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.33.0)
+[![Release](https://img.shields.io/badge/release-v1.34.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.34.0)
 
 A token-driven, framework-agnostic UI kit — one source of truth for color, typography,
 spacing, and components. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/adapters/blazor/FdyTable.razor

@@ -100,41 +100,8 @@
         </table>
     </div>
 
-    @if (HasPager)
+    @if (Pager)
     {
-        <div class="fdy-table-footer">
-            <span class="fdy-table-footer__info">Showing @RangeFrom–@RangeTo of @TotalCount</span>
-            <nav aria-label="Pagination">
-                <ul class="fdy-pagination__list">
-                    <li>
-                        <button type="button" class="fdy-pagination__link" aria-label="Previous page"
-                                disabled="@(CurrentPage1 == 1)" @onclick="() => GoTo(CurrentPage1 - 1)">‹</button>
-                    </li>
-                    @foreach (int? p in Pages)
-                    {
-                        <li>
-                            @if (p is null)
-                            {
-                                <span class="fdy-pagination__ellipsis">…</span>
-                            }
-                            else if (p == CurrentPage1)
-                            {
-                                <span class="fdy-pagination__link" aria-current="page">@p</span>
-                            }
-                            else
-                            {
-                                int page = p.Value;
-                                <button type="button" class="fdy-pagination__link" aria-label="@($"Go to page {page}")"
-                                        @onclick="() => GoTo(page)">@(page)</button>
-                            }
-                        </li>
-                    }
-                    <li>
-                        <button type="button" class="fdy-pagination__link" aria-label="Next page"
-                                disabled="@(CurrentPage1 == TotalPages)" @onclick="() => GoTo(CurrentPage1 + 1)">›</button>
-                    </li>
-                </ul>
-            </nav>
-        </div>
+        <FdyTableFooter Page="FooterPage" PageSizes="PageSizes" PageChanged="OnFooterPage" />
     }
 </div>

package/adapters/blazor/FdyTable.razor.cs

@@ -41,6 +41,20 @@ public partial class FdyTable<TRow>
     /// second control. Client mode's counterpart is <see cref="PageIndex"/>. Default true.</summary>
     [Parameter] public bool Pager { get; set; } = true;
 
+    /// <summary>
+    /// Offer a rows-per-page control in the footer, beside the range and the pager. Leave null for
+    /// none (unchanged default). Every back office has one, and a table that renders two thirds of
+    /// its own footer forces the app to rebuild all three to add the last (#008).
+    /// Server mode reports the pick through <see cref="PageChanged"/> — same callback as a page
+    /// click, with a new size. Client mode applies it internally and also raises
+    /// <see cref="PageSizeChanged"/>, so the control works with nothing wired.
+    /// </summary>
+    [Parameter] public IReadOnlyList<int>? PageSizes { get; set; }
+
+    /// <summary>Raised in client mode when the reader picks a new rows-per-page. The table has
+    /// already applied it — this is for a caller that wants to persist the choice.</summary>
+    [Parameter] public EventCallback<int> PageSizeChanged { get; set; }
+
     [Parameter] public int? PageIndex { get; set; }
 
     /// <summary>Raised in client mode with <see cref="PageIndex"/> set: the table asks for a new
@@ -98,16 +112,29 @@ public partial class FdyTable<TRow>
     private IReadOnlyDictionary<string, FdyColumnFilter> EffectiveFilters =>
         FiltersControlled ? (Filters ?? EmptyFilters) : _internalFilters;
 
-    private int PageSizeEff => ServerPaged ? Page!.Size : PageSize;
+    /* Client-mode rows-per-page. PageSize is a plain parameter with no callback, so a footer control
+     * that only reported would do nothing in the app that wired nothing — the table applies the pick
+     * itself and reports it. An explicit change to the parameter wins back (see OnParametersSet). */
+    private int? _internalPageSize;
+    private int _prevPageSize;
+
+    private int PageSizeEff => ServerPaged ? Page!.Size : (_internalPageSize ?? PageSize);
     private int CurrentPage1 => (ServerPaged ? Page!.Index : ClientPageIndex) + 1;
     private int TotalCount => _totalCount;
     private int TotalPages => PageSizeEff > 0 ? Math.Max(1, (int)Math.Ceiling((double)TotalCount / PageSizeEff)) : 1;
-    private bool HasPager => Pager && PageSizeEff > 0 && TotalPages > 1;
-    private List<int?> Pages => TableModel.PageWindow(CurrentPage1, TotalPages);
-    private int RangeFrom => TotalCount == 0 ? 0 : (CurrentPage1 - 1) * PageSizeEff + 1;
-    private int RangeTo => TotalCount == 0 ? 0 : RangeFrom - 1 + _displayRows.Count;
+    /// What the footer needs, in both modes: the range, the pager and the size control are all
+    /// derived from these three numbers, so the table hands them over rather than restating them.
+    private FdyPageState FooterPage => new(CurrentPage1 - 1, PageSizeEff, TotalCount);
 
-    protected override void OnParametersSet() => Recompute();
+    protected override void OnParametersSet()
+    {
+        if (_prevPageSize != PageSize)
+        {
+            _prevPageSize = PageSize;
+            _internalPageSize = null;
+        }
+        Recompute();
+    }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -133,16 +160,16 @@ public partial class FdyTable<TRow>
 
         _totalCount = ServerPaged ? Page!.Total : filteredSorted.Count;
 
-        if (!ServerPaged && PageSize > 0)
+        if (!ServerPaged && PageSizeEff > 0)
         {
             // Keep the page in range when a filter shrank the row set.
-            int tp = Math.Max(1, (int)Math.Ceiling((double)_totalCount / PageSize));
+            int tp = Math.Max(1, (int)Math.Ceiling((double)_totalCount / PageSizeEff));
             if (ClientPageIndex > tp - 1)
             {
                 if (PageIndexControlled) _pendingClamp = Math.Max(0, tp - 1);
                 else _internalPageIndex = Math.Max(0, tp - 1);
             }
-            _displayRows = TableModel.Paginate(filteredSorted, Math.Min(ClientPageIndex, tp - 1), PageSize);
+            _displayRows = TableModel.Paginate(filteredSorted, Math.Min(ClientPageIndex, tp - 1), PageSizeEff);
         }
         else
         {
@@ -212,6 +239,26 @@ public partial class FdyTable<TRow>
         }
     }
 
+    // One callback carries both intents, so which one it was is read off Size.
+    private async Task OnFooterPage(FdyPageState next)
+    {
+        if (next.Size != PageSizeEff)
+        {
+            if (ServerPaged)
+            {
+                await PageChanged.InvokeAsync(next);
+            }
+            else
+            {
+                _internalPageSize = next.Size;
+                await PageSizeChanged.InvokeAsync(next.Size);
+                await SetClientPageAsync(next.Index);
+            }
+            return;
+        }
+        await GoTo(next.Index + 1);
+    }
+
     // One write path for the client index: ask the parent when controlled, mutate the field when not.
     private async Task SetClientPageAsync(int index0)
     {

package/adapters/blazor/FdyTableFooter.razor

@@ -0,0 +1,60 @@
+@* The band under a table: what you are looking at, how much of it you see, where you are.
+
+   FdyTable renders this itself, so most screens never use it directly. It is public for the one
+   shape that cannot use the table's own — a RESPONSIVE list, where a .fdy-datatable at lg and a
+   .fdy-list below it are two renderings of ONE page of rows. A footer inside the table is inside the
+   half that is hidden on a phone, so those screens render it once, outside both (improvement notes
+   #005 and #008, from IDU_EMATE_APPL_WEB). *@
+
+@if (Visible)
+{
+    <div class="fdy-table-footer">
+        <span class="fdy-table-footer__info">Showing @RangeFrom–@RangeTo of @Page.Total</span>
+
+        @if (Sizes.Count > 0)
+        {
+            <div class="fdy-table-footer__size">
+                <span id="@SizeLabelId">Rows</span>
+                @* The kit's own listbox, not a native <select>: an OS menu is unthemeable, and on
+                   macOS it drops a dark panel into a light page. FdyCombo's own header says so. *@
+                <FdyCombo TValue="string" Value="@Page.Size.ToString()" Options="SizeOptions"
+                          AriaLabelledby="@SizeLabelId" ValueChanged="OnSize" />
+            </div>
+        }
+
+        @if (HasPager)
+        {
+            <nav aria-label="Pagination">
+                <ul class="fdy-pagination__list">
+                    <li>
+                        <button type="button" class="fdy-pagination__link" aria-label="Previous page"
+                                disabled="@(CurrentPage1 == 1)" @onclick="() => GoTo(CurrentPage1 - 1)">‹</button>
+                    </li>
+                    @foreach (int? p in Pages)
+                    {
+                        <li>
+                            @if (p is null)
+                            {
+                                <span class="fdy-pagination__ellipsis">…</span>
+                            }
+                            else if (p == CurrentPage1)
+                            {
+                                <span class="fdy-pagination__link" aria-current="page">@p</span>
+                            }
+                            else
+                            {
+                                int page = p.Value;
+                                <button type="button" class="fdy-pagination__link" aria-label="@($"Go to page {page}")"
+                                        @onclick="() => GoTo(page)">@(page)</button>
+                            }
+                        </li>
+                    }
+                    <li>
+                        <button type="button" class="fdy-pagination__link" aria-label="Next page"
+                                disabled="@(CurrentPage1 == TotalPages)" @onclick="() => GoTo(CurrentPage1 + 1)">›</button>
+                    </li>
+                </ul>
+            </nav>
+        }
+    </div>
+}

package/adapters/blazor/FdyTableFooter.razor.cs

@@ -0,0 +1,59 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Freeday.Blazor;
+
+/// <summary>
+/// The table footer — range, optional rows-per-page, pager — as a component of its own.
+/// It owns nothing: <see cref="Page"/> in, <see cref="PageChanged"/> out, the same contract as
+/// <c>FdyTable</c>'s server mode.
+/// </summary>
+public partial class FdyTableFooter
+{
+    /// <summary>The page being shown. <c>Size</c> drives the range AND the rows-per-page value.</summary>
+    [Parameter, EditorRequired] public FdyPageState Page { get; set; } = new(0, 0, 0);
+
+    [Parameter] public EventCallback<FdyPageState> PageChanged { get; set; }
+
+    /// <summary>
+    /// Offer a rows-per-page control. Leave null for none — the footer is then range + pager,
+    /// exactly as before. Picking a size raises <see cref="PageChanged"/> with the new size and the
+    /// index that still holds the row the reader was looking at.
+    /// </summary>
+    [Parameter] public IReadOnlyList<int>? PageSizes { get; set; }
+
+    private IReadOnlyList<int> Sizes => PageSizes ?? Array.Empty<int>();
+
+    // Just the number: the control sits beside a label reading "Rows", so "20 per page" states the
+    // same fact twice and truncates doing it.
+    private IReadOnlyList<FdyComboOption<string>> SizeOptions =>
+        Sizes.Select(size => new FdyComboOption<string>(size.ToString(), size.ToString())).ToList();
+
+    // The combo is labelled by the visible word beside it — a <label for> cannot reach inside a
+    // component, and an aria-label would leave that word attached to nothing.
+    private readonly string SizeLabelId = $"fdy-rows-{Guid.NewGuid():N}";
+
+    private int TotalPages => Page.Size > 0 ? Math.Max(1, (int)Math.Ceiling((double)Page.Total / Page.Size)) : 1;
+    private int CurrentPage1 => Page.Index + 1;
+    private int RangeFrom => Page.Total == 0 ? 0 : Page.Index * Page.Size + 1;
+    private int RangeTo => Math.Min(Page.Total, (Page.Index + 1) * Page.Size);
+    private List<int?> Pages => TableModel.PageWindow(CurrentPage1, TotalPages);
+
+    private bool HasPager => Page.Size > 0 && TotalPages > 1;
+
+    // One page and no size control means there is nothing here to say — the table has always
+    // withheld the whole band in that case, and this is where that decision now lives.
+    private bool Visible => HasPager || Sizes.Count > 0;
+
+    private async Task GoTo(int page1)
+    {
+        int clamped = Math.Min(Math.Max(1, page1), TotalPages);
+        await PageChanged.InvokeAsync(new FdyPageState(clamped - 1, Page.Size, Page.Total));
+    }
+
+    private async Task OnSize(string value)
+    {
+        if (!int.TryParse(value, out int size) || size <= 0 || size == Page.Size) return;
+        await PageChanged.InvokeAsync(
+            new FdyPageState(TableModel.PageIndexForSize(Page.Index, Page.Size, size), size, Page.Total));
+    }
+}

package/adapters/blazor/TableModel.cs

@@ -183,6 +183,18 @@ public static class TableModel
 
     /// <summary>Page-number window: first and last page always shown, current ±1, null for the
     /// "ellipsis" gaps between. <paramref name="current"/> and returned page numbers are 1-based.</summary>
+    /// <summary>
+    /// The page to land on when the page SIZE changes: whichever page still holds the first row the
+    /// reader was already looking at. Jumping to page 1 loses their place; keeping the same index can
+    /// land past the end (page 5 of 5 at twenty rows is page 2 of 2 at fifty).
+    /// </summary>
+    public static int PageIndexForSize(int pageIndex, int oldSize, int newSize)
+    {
+        if (newSize <= 0) return 0;
+        int firstRow = Math.Max(0, pageIndex) * Math.Max(0, oldSize);
+        return firstRow / newSize;
+    }
+
     public static List<int?> PageWindow(int current, int totalPages)
     {
         List<int?> outList = new();

package/adapters/core/table-model.d.ts

@@ -76,3 +76,5 @@ export function sortRows<T>(
 export function paginate<T>(rows: readonly T[], pageIndex: number, pageSize: number): T[];
 export function distinctValues<T>(rows: readonly T[], column: FdyTableColumn<T>): string[];
 export function pageWindow(current: number, totalPages: number): Array<number | 'ellipsis'>;
+/** The 0-based page still holding the old first row after a page-size change. */
+export function pageIndexForSize(pageIndex: number, oldSize: number, newSize: number): number;

package/adapters/core/table-model.js

@@ -142,6 +142,27 @@ export function distinctValues(rows, column) {
   return out.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
 }
 
+/**
+ * The page to land on when the page SIZE changes: whichever page still holds the first row you were
+ * already looking at.
+ *
+ * The two obvious answers are both wrong. Jumping to page 1 throws away your place on a long list —
+ * you asked to see more rows, not to start over. Keeping the same INDEX can land past the end: page
+ * 5 of 5 at twenty rows is page 2 of 2 at fifty, and index 4 is nowhere. Anchoring on the first
+ * visible row is the only one that always resolves, and it is what the reader expects: the row they
+ * were looking at is still on screen.
+ *
+ * @param {number} pageIndex current 0-based page index
+ * @param {number} oldSize rows per page now
+ * @param {number} newSize rows per page wanted
+ * @returns {number} 0-based page index that still contains the old first row
+ */
+export function pageIndexForSize(pageIndex, oldSize, newSize) {
+  if (!newSize || newSize <= 0) return 0;
+  const firstRow = Math.max(0, pageIndex) * Math.max(0, oldSize);
+  return Math.floor(firstRow / newSize);
+}
+
 /**
  * Page-number window for a pager: first and last page always shown, current ±1, "ellipsis"
  * gaps between. `current` and the returned page numbers are 1-based.

package/adapters/react/components/FdyAutocomplete.tsx

@@ -156,7 +156,7 @@ export function FdyAutocomplete(props: FdyAutocompleteProps): JSX.Element {
             onClick={(): void => choose(opt)}
           >{opt}</li>
         ))}
-        {filtered.length === 0 ? <li className="fdy-autocomplete__empty">{props.emptyText ?? 'Tak ada hasil.'}</li> : null}
+        {filtered.length === 0 ? <li className="fdy-autocomplete__empty">{props.emptyText ?? 'No results'}</li> : null}
       </ul>
     </div>
   );

package/adapters/react/components/FdyCascade.tsx

@@ -54,7 +54,7 @@ export function FdyCascade(props: FdyCascadeProps): JSX.Element {
   const listId: string = `${baseId}-list`;
   const optionId = (index: number): string => `${baseId}-opt-${index}`;
   const sep: string = props.separator ?? ' / ';
-  const name: string = props.label ?? 'Pilih';
+  const name: string = props.label ?? 'Select';
 
   const rootRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
@@ -85,7 +85,7 @@ export function FdyCascade(props: FdyCascadeProps): JSX.Element {
   const isPlaceholder: boolean = selectedTrail === null;
   const displayValue: string = selectedTrail !== null
     ? selectedTrail.map((n: CascadeNode): string => n.label).join(sep)
-    : (props.placeholder ?? 'Pilih…');
+    : (props.placeholder ?? 'Select…');
   const crumb: string = stack.length > 0 ? stack.map((n: CascadeNode): string => n.label).join(sep) : name;
 
   const openPanel = (): void => {

package/adapters/react/components/FdyCfl.tsx

@@ -29,6 +29,20 @@ export interface FdyCflProps<Row extends Record<string, unknown>> {
   rowKey: (row: Row) => string;
   /** Advisory only — the caller's `fetchPage` owns paging; kept for API documentation. */
   pageSize?: number;
+  /** The dialog's heading. Default 'Choose data', matching the Blazor adapter's `Title`. */
+  title?: string;
+  /** Placeholder AND accessible name of the dialog's search box. Default 'Search…'. */
+  searchPlaceholder?: string;
+  /** Default 'Loading…'. */
+  loadingText?: string;
+  /** Default 'No results.'. */
+  emptyText?: string;
+  /** Default 'Try again'. */
+  retryText?: string;
+  /** Default 'Load more'. */
+  moreText?: string;
+  /** aria-label for the dialog's close button. Default 'Close'. */
+  closeLabel?: 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. */
@@ -298,8 +312,8 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
 
       <dialog ref={dialogRef} className="fdy-modal fdy-modal--cfl" aria-labelledby={titleId} onClose={onClose} onKeyDown={onKeydown}>
         <div className="fdy-modal__header">
-          <h3 id={titleId} className="fdy-modal__title">Pilih data</h3>
-          <button className="fdy-modal__close" type="button" aria-label="Tutup" onClick={closeDialog}>&times;</button>
+          <h3 id={titleId} className="fdy-modal__title">{props.title ?? 'Choose data'}</h3>
+          <button className="fdy-modal__close" type="button" aria-label={props.closeLabel ?? 'Close'} onClick={closeDialog}>&times;</button>
         </div>
 
         <div className="fdy-modal__body">
@@ -316,8 +330,8 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
                 className="fdy-input"
                 type="search"
                 value={query}
-                placeholder="Cari…"
-                aria-label="Cari data"
+                placeholder={props.searchPlaceholder ?? 'Search…'}
+                aria-label={props.searchPlaceholder ?? 'Search…'}
                 aria-controls={controlsId}
                 aria-activedescendant={activeDescendant}
                 onChange={onSearchInput}
@@ -327,17 +341,17 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
 
           <div className="fdy-cfl__results">
             {isInitialLoading ? (
-              <p className="fdy-cfl__empty" role="status">Memuat…</p>
+              <p className="fdy-cfl__empty" role="status">{props.loadingText ?? 'Loading…'}</p>
             ) : isBlockingError ? (
               <div className="fdy-cfl__empty" role="alert">
                 <p style={{ margin: '0 0 var(--space-3)' }}>{error?.message}</p>
-                <button className="fdy-btn fdy-btn--sm" type="button" onClick={retry}>Coba lagi</button>
+                <button className="fdy-btn fdy-btn--sm" type="button" onClick={retry}>{props.retryText ?? 'Try again'}</button>
               </div>
             ) : isEmpty ? (
-              <p className="fdy-cfl__empty">Tidak ada hasil.</p>
+              <p className="fdy-cfl__empty">{props.emptyText ?? 'No results.'}</p>
             ) : (
               <>
-                <table id={resultsId} className="fdy-table" aria-label="Hasil pencarian">
+                <table id={resultsId} className="fdy-table" aria-label="Search results">
                   <thead>
                     <tr>
                       {props.columns.map((col: CflColumn<Row>): JSX.Element => (
@@ -371,7 +385,7 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
                 ) : hasMore ? (
                   <div style={{ padding: 'var(--space-3) var(--space-4)', textAlign: 'center' }}>
                     <button className="fdy-btn fdy-btn--ghost fdy-btn--sm" type="button" disabled={loading} onClick={loadMore}>
-                      {loading ? 'Memuat…' : 'Muat lebih banyak'}
+                      {loading ? (props.loadingText ?? 'Loading…') : (props.moreText ?? 'Load more')}
                     </button>
                   </div>
                 ) : null}
@@ -381,9 +395,9 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
         </div>
 
         <div className="fdy-modal__footer">
-          <span className="fdy-cfl__count">Klik baris untuk memilih</span>
+          <span className="fdy-cfl__count">Click a row to choose it</span>
           <div className="fdy-cfl__actions">
-            <button className="fdy-btn fdy-btn--ghost" type="button" onClick={closeDialog}>Tutup</button>
+            <button className="fdy-btn fdy-btn--ghost" type="button" onClick={closeDialog}>{props.closeLabel ?? 'Close'}</button>
           </div>
         </div>
       </dialog>