@cahyo-dimas/freeday 1.41.0 → 1.46.0

package/CHANGELOG.md

@@ -3,6 +3,137 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [1.46.0] — 2026-08-19
+The docs site catches up with the components, and writing it out as a consumer found a defect in
+#016's own contract.
+### Fixed
+- **`data-fdy-text-*` could not be written the way HTML allows** (#023). The keys in each enhancer's
+  `TEXT` table are camelCase, and `textOf` looked up `'data-fdy-text-' + key` — but **HTML lowercases
+  attribute names**, so `data-fdy-text-filterText` becomes `...filtertext` while
+  `data-fdy-text-filter-text`, the spelling anybody would actually reach for, is a DIFFERENT
+  attribute the enhancer never read. It failed silently, which is the only way an override can fail.
+  The key is kebab-cased for the lookup now; the run-together spelling still resolves, so markup
+  written against 1.39.0 keeps working. Nine enhancers.
+  It survived #016's own guard because all seven overrides that guard asserts use **single-word**
+  keys, which have no case to lose — the guard was not wrong, it was unrepresentative. The spec now
+  overrides `filterText`, reached by clicking a column filter open. Mutation-tested.
+### Docs
+- **`docs/index.html` was nine releases behind** — it stated v1.34.0 and demoed none of what landed
+  after it. Brought level with the components, as live demos rather than a feature list, because
+  that is what the rest of the page is:
+  - **New section — Tabel beku.** `.fdy-table--sticky` / `--sticky-head`, `.fdy-table__freeze` +
+    `--fdy-freeze-left`, `.fdy-table-scroll--frozen` + `--fdy-table-frozen-h` (1.35.0, 1.37.0), with
+    a rate matrix you can actually scroll on both axes, and the reason the two axes are separate
+    modifiers.
+  - **New section — Teks enhancer (i18n).** The `data-fdy-text-*` contract (1.39.0), demoed as the
+    same data table rendered entirely in English — the demo that found #023.
+  - **Badge tone scale** `--tone-1`…`--tone-8` (1.44.0), with the distinction the note drew: semantic
+    variants state a judgement, tones distinguish without implying one.
+  - **Date picker** now states the days → months → years drill (1.36.0); **Choose-from-list** states
+    `multiple` for the typed wrappers, not only the enhancer's `data-fdy-cfl-multiple` (1.42.0).
+- Verified in a browser rather than by reading the markup: the i18n demo renders `Showing 1–3 of 5`
+  and a `Previous` pager, and the frozen table computes `border-collapse:separate` with
+  `position:sticky` cells.
+
+## [1.45.0] — 2026-08-19
+Two defects in 1.42.0's multi-select CFL, found by the app that asked for it (IDU_EMATE_APPL_WEB, #022).
+### Fixed
+- **The row tick rendered as the browser's checkbox, not the kit's** (#022), in all three adapters.
+  They shipped `class="fdy-check"` on a bare `<input>`; that class styles a wrapping `<label>` and
+  its `input` DESCENDANT, so on the input itself it applied `inline-flex` and a cursor and nothing
+  else — a raw UA control in the middle of a styled dialog. `COMPONENTS.md` already said which class
+  a bare input in a table takes: `.fdy-checkbox`. Every behavioural assertion in `browser/cfl-multi`
+  passed while it was wrong, because none of them looked at the rendering.
+- **`aria-selected` broke `vue-tsc` in consuming apps** (#022). `String(isPicked(row))` widens to
+  `string`, and Vue types the attribute as `Booleanish` — so a strict app type-checking the kit's own
+  `.vue` source failed on a file it does not own. Now `'true' : 'false'`.
+### Added — guards
+- `browser/cfl-multi.mjs` asserts the tick's computed `appearance` is `none`, which is the tell that
+  the kit painted the box rather than the UA. Mutation-tested.
+
+## [1.44.0] — 2026-08-19
+One note from the back-office app (IDU_EMATE_APPL_WEB, #021).
+### Added
+- **`--tone-1`…`--tone-8` on `.fdy-badge`** — a status vocabulary larger than the semantic palette.
+  `.fdy-avatar--tone-*` and `.fdy-chip--tone-*` already carried the categorical scale; the badge,
+  which is the component that actually renders status, did not. The reporting app's document lists
+  carry **ten distinct statuses in one column** — Draft, Submitted, Approved, Completed, Settled,
+  Closed, Transferred, InDeclaration, Open, Rejected — against five modifiers, so Approved, Closed
+  and Completed came out the same green and Draft, InDeclaration and Transferred the same grey.
+  Semantics still come first: a state that IS good, bad or waiting takes `--success` / `--danger` /
+  `--warning`, and these are for the rest. Same `--tone-*` tokens and the same 18%/50% mix as the
+  other two, so the existing contrast test already measures them.
+### Added — guards
+- `test/css.test.mjs` asserts all eight bind their own token (a gap silently reuses a colour) and
+  that the mix stays identical to the avatar's and the chip's — one contrast test covers the three,
+  so a badge that drifted to its own ratio would be gated by a test measuring something else.
+  `test/contrast.test.mjs` renamed from "avatar tones" to "categorical tones" to say so.
+
+## [1.43.0] — 2026-08-19
+Three crowding reports from one settlement screen (IDU_EMATE_APPL_WEB, #020). All three measured in
+Chromium rather than read off the CSS — each is a layout outcome, invisible in the stylesheet.
+### Fixed
+- **A control in a table column collapsed** (#020). `.fdy-input` is `width:100%`, which in an
+  auto-layout table contributes **no intrinsic width**: the column shrank to its header text and took
+  the control with it. A NOTE box measured **36px** — too narrow to read what you typed into it.
+  Controls that are direct children of a `td` now keep a `7rem` floor (112px measured). Per-control
+  rather than per-column, because the table cannot know which columns hold controls. `width:100%` was
+  never wrong; it is only in a table that 100% of nothing is nothing.
+- **A stat value wrapped between the currency and the number** (#020). `.fdy-stat__value` is
+  `--text-3xl`; `IDR 300,000.00` needs **224px** at that size and `.fdy-stats` tracks are
+  `minmax(11rem,1fr)`, so a three-across row at 660px gave it ~205px and it broke onto two lines.
+  It now shrinks **only when its own column cannot hold it** — a 205px track renders 22.7px on one
+  line, a 420px track still renders exactly 31px. Shrinking the token instead would have taken 31px
+  from every consumer to fix a column that was 19px short. Scoped to a stat inside `.fdy-stats`,
+  where the width comes from the grid track: `container-type:inline-size` on a standalone
+  `.fdy-stat` would stop it sizing to its own content, and the unconditional rule stays as the
+  fallback where `@container` is missing.
+- **`.fdy-filelist` claimed space above itself and none below** (#020), so the "Add files" button
+  every upload UI puts after it sat flush against the last row — a measured **0px**. Symmetric now,
+  with `:last-child` dropping the bottom margin so nothing pays for room it does not need.
+### Added — guards
+- `browser/crowding.mjs` measures all three. The stat case asserts **both** directions — one line
+  when narrow, still exactly `31px` when wide — because a fix that quietly shrank every dashboard
+  would pass a "does it wrap?" test.
+
+## [1.42.0] — 2026-08-19
+One note from the back-office app (IDU_EMATE_APPL_WEB, #019), and a string the #009 guard could not see.
+### Added
+- **`multiple` on the typed `FdyCfl`** (Vue · React · Blazor). The enhancer has offered
+  `data-fdy-cfl-multiple` since it shipped and `COMPONENTS.md` documented it; all three wrappers were
+  single-valued **at the type level**, so there was nothing to widen from the outside. An app that
+  started on the enhancer and later adopted the wrapper silently lost a capability — which is the
+  actual defect, more than the missing feature. The settlement screen that reported it gathers six or
+  eight approved claims onto one document and was doing six open→search→click cycles.
+  Rows tick instead of committing, the footer counts them, and **Confirm** commits the set. Vue and
+  React widen their model to `Row[] | null`; Blazor takes `Values` / `ValuesChanged` instead, because
+  a nullable union is not a C# shape. New strings: `selectedText` (`{n} selected`), `confirmText`,
+  `hintText` — the last one making the single-mode footer overridable too, which it never was.
+### Notes on the shape of the fix
+- **The ticks are component state, not the model.** Closing without Confirm has to leave the caller's
+  value exactly as it was, so the dialog seeds its ticks from the bound value on every open. Binding
+  them straight to the model would make Cancel a lie.
+- **The field states `{n} selected`.** `display()` takes ONE row: naming one of six would be wrong and
+  naming all six does not fit a 22rem control.
+- **Blazor gained a modal footer**, which it never had — Vue and React both commit from one.
+- The tick checkbox is `aria-hidden` and inert. `.fdy-cfl__check input` is already
+  `pointer-events:none` in the kit's CSS, so the row owns the click and a handler on the box would
+  have been unreachable code; `aria-selected` on the row is what carries the state.
+### Fixed
+- **`FdyCfl`'s second retry button said `Coba lagi`** (Vue · React). The error state inside the
+  results branch had a hard-coded Indonesian literal while the button two states above it correctly
+  read `retryText ?? 'Try again'` — so the component both had the prop and ignored it. #009's guard
+  missed it because **neither `coba` nor `lagi` is in its word list**, which is #015's lesson landing
+  a third time: a word list is a floor, not a ceiling. Both now read `retryText`.
+### Added — guards
+- **The multi flow is driven by real clicks, in both adapters** (#019). `browser/cfl-multi.mjs`
+  asserts that a click ticks rather than commits, that the dialog stays open, that `aria-selected`
+  and the footer count follow, that a second click unticks, that Confirm hands back an **array** in
+  order, and that closing without Confirm discards the ticks *and* does not remember them on re-open.
+  Vue and React run the same script, so a divergence between the two fails here instead of in an app.
+  A typecheck cannot tell you whether a mode ever renders. Mutation-tested — committing
+  `picked[0]` instead of the array fails it by name.
+
 ## [1.41.0] — 2026-08-19
 One note from the account app (IDU_EMATE_ACCT_WEB, #018) — the first raised from that repo.
 ### Fixed

package/COMPONENTS.md

@@ -463,6 +463,12 @@ the field. The value is always **chosen, never typed**. Needs `freeday-cfl.js`.
 - Hooks: `data-fdy-cfl-search` (the search input), `data-fdy-cfl-empty`, `data-fdy-cfl-count`,
   `data-fdy-cfl-confirm` (multi only), `data-fdy-cfl-trigger`, `data-fdy-cfl-open`
 - Rows are server state — in a real app drive them from a controlled fetch, not a global store.
+- **Multi-select in the typed wrappers** (Vue · React · Blazor): `multiple` ticks rows and commits
+  them together on **Confirm** instead of committing the row that was clicked. Vue and React widen
+  their model to an array (`Row[] | null`); Blazor takes a second pair, `Values` /
+  `ValuesChanged`, because a nullable union is not a C# shape. Closing without Confirm leaves the
+  bound value untouched, and re-opening seeds the ticks from it. The field states `{n} selected`
+  rather than one row's `display()`. Strings: `selectedText`, `confirmText`, `hintText`.
 
 ```html
 <div class="fdy-field">
@@ -767,7 +773,9 @@ pagination. Needs `freeday-table.js`. Wrap the whole thing in `.fdy-datatable` +
   wrapper**.
 - **Overriding an enhancer's strings.** Each enhancer keeps its strings in one `TEXT` table and
   reads them through `textOf()`, so any of them can be replaced per element with
-  **`data-fdy-text-<key>`** — no forking, and no rendering the nodes yourself:
+  **`data-fdy-text-<key>`**, the key kebab-cased — no forking, and no rendering the nodes yourself.
+  (HTML lowercases attribute names, so a camelCase key like `filterText` is written
+  `data-fdy-text-filter-text`; the run-together spelling still resolves.):
 
   ```html
   <div data-fdy-table
@@ -1100,6 +1108,12 @@ while it stays a real `<button>`/`<a>` with real keyboard semantics.
 Inline status pill: `--success` `--warning` `--danger` `--info` `--outline`. Never colour-only —
 the text carries the meaning.
 
+`--tone-1`…`--tone-8` for a status vocabulary larger than the semantic palette. Semantics first —
+a state that IS good, bad or waiting takes `--success` / `--danger` / `--warning`; these are for
+the rest, so two states a workflow distinguishes never share a look. Map each status to a FIXED
+tone, never to a hash of the string: a status is a closed set, and a hash reassigns colours the
+moment the set grows.
+
 **Notification badge is the overlay variant**, not a separate component: wrap anything in
 `.fdy-badge-wrap` and add `.fdy-badge-ov` (`--primary` `--danger` `--accent` `--info` `--success`
 `--warning`, `--dot` for a bare dot, `--top-left` / `--bottom-right` / `--bottom-left` to move it).

package/adapters/blazor/FdyCfl.razor

@@ -63,6 +63,10 @@
                 <table class="fdy-table" aria-label="@Title">
                     <thead>
                         <tr>
+                            @if (Multiple)
+                            {
+                                <th scope="col"><span class="fdy-visually-hidden">@SelectedLabel</span></th>
+                            }
                             @foreach (CflColumn<TRow> col in Columns)
                             {
                                 <th scope="col">@col.Header</th>
@@ -72,7 +76,15 @@
                     <tbody>
                         @foreach (TRow row in _rows)
                         {
-                            <tr class="fdy-cfl__row" tabindex="0" @key="RowKey(row)" @onclick="() => ChooseAsync(row)">
+                            <tr class="fdy-cfl__row" tabindex="0" @key="RowKey(row)"
+                                aria-selected="@(Multiple ? IsPicked(row).ToString().ToLowerInvariant() : null)"
+                                @onclick="() => RowClickAsync(row)">
+                                @if (Multiple)
+                                {
+                                    <td class="fdy-cfl__check">
+                                        <input class="fdy-checkbox" type="checkbox" tabindex="-1" checked="@IsPicked(row)" aria-hidden="true" />
+                                    </td>
+                                }
                                 @foreach (CflColumn<TRow> col in Columns)
                                 {
                                     <td>@col.Cell(row)</td>
@@ -99,4 +111,15 @@
             }
         </div>
     </div>
+
+    <div class="fdy-modal__footer">
+        <span class="fdy-cfl__count" aria-live="polite">@(Multiple ? SelectedLabel : HintText)</span>
+        <div class="fdy-cfl__actions">
+            <button class="fdy-btn fdy-btn--ghost" type="button" @onclick="CloseAsync">@CloseLabel</button>
+            @if (Multiple)
+            {
+                <button class="fdy-btn" type="button" @onclick="ConfirmAsync">@ConfirmText</button>
+            }
+        </div>
+    </div>
 </dialog>

package/adapters/blazor/FdyCfl.razor.cs

@@ -35,6 +35,26 @@ public partial class FdyCfl<TRow>
     /// <summary>aria-label for the button that opens the picker.</summary>
     [Parameter] public string OpenLabel { get; set; } = "Open search";
 
+    /// <summary>Tick rows and commit them together, instead of committing the row that was clicked.
+    /// The kit's own enhancer offers this (<c>data-fdy-cfl-multiple</c>); a screen that gathers six
+    /// expense claims onto one document wants one dialog, not six. Binds <see cref="Values"/>.</summary>
+    [Parameter] public bool Multiple { get; set; }
+
+    /// <summary>The committed rows when <see cref="Multiple"/> is set. Vue and React widen their
+    /// single model to an array; C# takes a second pair instead, so neither is nullable-of-union.</summary>
+    [Parameter] public IReadOnlyList<TRow>? Values { get; set; }
+
+    [Parameter] public EventCallback<IReadOnlyList<TRow>?> ValuesChanged { get; set; }
+
+    /// <summary>Footer label while picking; <c>{n}</c> is replaced by the tick count.</summary>
+    [Parameter] public string SelectedText { get; set; } = "{n} selected";
+
+    /// <summary>The multi-select commit button.</summary>
+    [Parameter] public string ConfirmText { get; set; } = "Confirm";
+
+    /// <summary>Footer hint in single mode.</summary>
+    [Parameter] public string HintText { get; set; } = "Click a row to choose it";
+
     [Parameter] public bool Disabled { get; set; }
 
     /// <summary>Locked/view mode: shows the value but the search dialog can't be opened.</summary>
@@ -78,6 +98,9 @@ public partial class FdyCfl<TRow>
         if (Disabled || Readonly || _open) return;
         _open = true;
         _query = string.Empty;
+        /* Re-seeded per open, so Cancel really is a cancel: the ticks start as whatever the caller holds. */
+        _picked.Clear();
+        if (Multiple && Values is not null) _picked.AddRange(Values);
         await JS.InvokeVoidAsync("FreedayBlazor.dialogShow", Root);
         await LoadAsync(reset: true);
     }
@@ -141,10 +164,52 @@ public partial class FdyCfl<TRow>
     /// opens nor closes it.</summary>
     private async Task ClearAsync()
     {
+        _picked.Clear();
+        if (Multiple)
+        {
+            Values = null;
+            await ValuesChanged.InvokeAsync(null);
+            return;
+        }
         Value = default;
         await ValueChanged.InvokeAsync(default);
     }
 
+    /* The ticks live here, not in Values, because a multi dialog is only committed at Confirm:
+       closing it must leave the caller's value exactly as it was. Seeded from Values on open. */
+    private readonly List<TRow> _picked = new();
+
+    private string SelectedLabel => SelectedText.Replace("{n}", _picked.Count.ToString());
+
+    private bool IsPicked(TRow row)
+    {
+        string key = RowKey(row);
+        return _picked.Exists(r => RowKey(r) == key);
+    }
+
+    private void TogglePick(TRow row)
+    {
+        string key = RowKey(row);
+        int at = _picked.FindIndex(r => RowKey(r) == key);
+        if (at == -1) _picked.Add(row);
+        else _picked.RemoveAt(at);
+    }
+
+    /* A click means "tick this" in multi and "this is my answer" in single — the whole difference. */
+    private async Task RowClickAsync(TRow row)
+    {
+        if (Multiple) TogglePick(row);
+        else await ChooseAsync(row);
+    }
+
+    private async Task ConfirmAsync()
+    {
+        IReadOnlyList<TRow> picks = _picked.ToArray();
+        Values = picks;
+        await ValuesChanged.InvokeAsync(picks);
+        await CloseAsync();
+    }
+
     private async Task ChooseAsync(TRow row)
     {
         Value = row;

package/adapters/react/components/FdyCfl.tsx

@@ -21,8 +21,11 @@ export interface CflPage<Row> {
 }
 
 export interface FdyCflProps<Row extends Record<string, unknown>> {
-  value: Row | null;
-  onChange: (value: Row | null) => void;
+  /** Single: `Row | null`. With `multiple`, an array — `Row[] | null`, where null and [] both mean
+   *  nothing picked. The enhancer has had `data-fdy-cfl-multiple` all along; this is the typed
+   *  wrappers catching up (#019). */
+  value: Row | Row[] | null;
+  onChange: (value: Row | Row[] | null) => void;
   fetchPage: (query: string, page: number) => Promise<CflPage<Row>>;
   columns: ReadonlyArray<CflColumn<Row>>;
   display: (row: Row) => string;
@@ -45,6 +48,16 @@ export interface FdyCflProps<Row extends Record<string, unknown>> {
   closeLabel?: string;
   /** aria-label for the button that opens the picker. Default 'Open search'. */
   openLabel?: string;
+  /** Tick rows and commit them together, instead of committing the row that was clicked. The kit's
+   *  own enhancer offers this (`data-fdy-cfl-multiple`); a screen that gathers six expense claims
+   *  onto one document wants one dialog, not six. */
+  multiple?: boolean;
+  /** Footer label while picking, `{n}` replaced by the tick count. Default '{n} selected'. */
+  selectedText?: string;
+  /** The multi-select commit button. Default 'Confirm'. */
+  confirmText?: string;
+  /** Footer hint in single mode. Default 'Click a row to choose it'. */
+  hintText?: 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. */
@@ -71,6 +84,7 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
      control that still exists — the trigger beside it, since this button disappears with the value. */
   const clearLabelText: string = props.clearLabel ?? 'Clear selection';
   const clearValue = (): void => {
+    setPicked([]);
     props.onChange(null);
     triggerRef.current?.focus();
   };
@@ -86,6 +100,9 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<Error | null>(null);
   const [activeIndex, setActiveIndex] = useState<number>(-1);
+  /* The ticks live here, not in `value`, because a multi dialog is only committed at Confirm:
+     closing it must leave the caller's value exactly as it was. Seeded from `value` on open. */
+  const [picked, setPicked] = useState<Row[]>([]);
 
   // Out-of-order guard: every fetch takes a monotonically increasing token; a resolved or
   // rejected page is applied only if it still owns the latest token. A newer search, a
@@ -100,10 +117,25 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
 
   const isDisabled: boolean = props.disabled === true;
   const isReadonly: boolean = props.readonly === true;
+  /* `display()` takes one row, so in multi the field states HOW MANY — naming one of six would be a
+     lie, and naming all six does not fit a control that is 22rem wide. */
+  const currentRows: Row[] = Array.isArray(props.value)
+    ? props.value
+    : props.value !== null
+      ? [props.value as Row]
+      : [];
+  const selectedTextFor = (n: number): string => (props.selectedText ?? '{n} selected').replace('{n}', String(n));
+  const isMultiple: boolean = props.multiple === true;
   const showClear: boolean =
-    props.clearable === true && props.value !== null && isDisabled === false && isReadonly === false;
+    props.clearable === true && currentRows.length > 0 && isDisabled === false && isReadonly === false;
   const isInvalid: boolean = props.invalid === true;
-  const displayValue: string = props.value !== null ? props.display(props.value) : '';
+  const displayValue: string = isMultiple
+    ? currentRows.length === 0
+      ? ''
+      : selectedTextFor(currentRows.length)
+    : props.value !== null
+      ? props.display(props.value as Row)
+      : '';
   // The results <table> (owner of `resultsId`) only renders in the rows branch, so gate the
   // search input's aria refs on rows existing — otherwise they'd dangle during loading/empty/error.
   const hasRows: boolean = rows.length > 0;
@@ -179,6 +211,31 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
     document.getElementById(rowId(activeIndex))?.scrollIntoView({ block: 'nearest' });
   }, [activeIndex]);
 
+  function isPicked(row: Row): boolean {
+    const key: string = props.rowKey(row);
+    return picked.some((r: Row): boolean => props.rowKey(r) === key);
+  }
+
+  function togglePick(row: Row): void {
+    const key: string = props.rowKey(row);
+    setPicked((prev: Row[]): Row[] =>
+      prev.some((r: Row): boolean => props.rowKey(r) === key)
+        ? prev.filter((r: Row): boolean => props.rowKey(r) !== key)
+        : [...prev, row],
+    );
+  }
+
+  /* A click means "tick this" in multi and "this is my answer" in single — the whole difference. */
+  function onRowClick(row: Row): void {
+    if (isMultiple) togglePick(row);
+    else commit(row);
+  }
+
+  function confirmPicks(): void {
+    props.onChange(picked);
+    closeDialog();
+  }
+
   function commit(row: Row): void {
     props.onChange(row);
     closeDialog();
@@ -210,7 +267,7 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
         const row: Row | undefined = activeIndex >= 0 ? rows[activeIndex] : undefined;
         if (row !== undefined) {
           e.preventDefault();
-          commit(row);
+          onRowClick(row);
         }
         break;
       }
@@ -233,6 +290,8 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
     setHasMore(false);
     setError(null);
     setActiveIndex(-1);
+    /* Re-seeded per open, so Cancel really is a cancel: the ticks start as whatever the caller holds. */
+    setPicked(isMultiple ? [...currentRows] : []);
     dialogRef.current?.showModal();
     searchRef.current?.focus();
     void load('', 0, false);
@@ -356,6 +415,9 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
                 <table id={resultsId} className="fdy-table" aria-label="Search results">
                   <thead>
                     <tr>
+                      {isMultiple ? (
+                        <th scope="col"><span className="fdy-visually-hidden">{selectedTextFor(picked.length)}</span></th>
+                      ) : null}
                       {props.columns.map((col: CflColumn<Row>): JSX.Element => (
                         <th key={col.key} scope="col">{col.label}</th>
                       ))}
@@ -366,11 +428,16 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
                       <tr
                         id={rowId(i)}
                         key={props.rowKey(row)}
-                        className="fdy-cfl__row"
-                        aria-selected={i === activeIndex ? 'true' : undefined}
-                        onClick={(): void => commit(row)}
+                        className={i === activeIndex ? 'fdy-cfl__row is-active' : 'fdy-cfl__row'}
+                        aria-selected={isMultiple ? isPicked(row) : i === activeIndex ? true : undefined}
+                        onClick={(): void => onRowClick(row)}
                         onMouseMove={(): void => setActive(i)}
                       >
+                        {isMultiple ? (
+                          <td className="fdy-cfl__check">
+                            <input className="fdy-checkbox" type="checkbox" tabIndex={-1} checked={isPicked(row)} readOnly aria-hidden="true" />
+                          </td>
+                        ) : null}
                         {props.columns.map((col: CflColumn<Row>): JSX.Element => (
                           <td key={col.key}>{cellText(row, col.key)}</td>
                         ))}
@@ -382,7 +449,7 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
                 {error !== null ? (
                   <div className="fdy-cfl__empty" role="alert" style={{ padding: 'var(--space-4) var(--space-5)' }}>
                     <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>
                 ) : hasMore ? (
                   <div style={{ padding: 'var(--space-3) var(--space-4)', textAlign: 'center' }}>
@@ -397,9 +464,14 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
         </div>
 
         <div className="fdy-modal__footer">
-          <span className="fdy-cfl__count">Click a row to choose it</span>
+          <span className="fdy-cfl__count" aria-live="polite">
+            {isMultiple ? selectedTextFor(picked.length) : (props.hintText ?? 'Click a row to choose it')}
+          </span>
           <div className="fdy-cfl__actions">
             <button className="fdy-btn fdy-btn--ghost" type="button" onClick={closeDialog}>{props.closeLabel ?? 'Close'}</button>
+            {isMultiple ? (
+              <button className="fdy-btn" type="button" onClick={confirmPicks}>{props.confirmText ?? 'Confirm'}</button>
+            ) : null}
           </div>
         </div>
       </dialog>