@cahyo-dimas/freeday 1.41.0 → 1.43.0

package/CHANGELOG.md

@@ -3,6 +3,71 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [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">

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-check" 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-check" 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>

package/adapters/vue/components/FdyCfl.vue

@@ -23,7 +23,10 @@ interface CflPage {
 }
 
 const props = defineProps<{
-  modelValue: Row | null;
+  /** 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). */
+  modelValue: Row | Row[] | null;
   fetchPage: (query: string, page: number) => Promise<CflPage>;
   columns: ReadonlyArray<CflColumn>;
   display: (row: Row) => string;
@@ -46,6 +49,16 @@ const props = defineProps<{
   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. */
@@ -62,8 +75,8 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  'update:modelValue': [value: Row | null];
-  change: [value: Row | null];
+  'update:modelValue': [value: Row | Row[] | null];
+  change: [value: Row | Row[] | null];
 }>();
 
 const baseId: string = useId();
@@ -91,13 +104,20 @@ const isReadonly: ComputedRef<boolean> = computed((): boolean => props.readonly
 
 const showClear: ComputedRef<boolean> = computed(
   (): boolean =>
-    props.clearable === true && props.modelValue != null && isDisabled.value === false && isReadonly.value === false,
+    props.clearable === true && currentRows.value.length > 0 && isDisabled.value === false && isReadonly.value === false,
 );
 const clearLabelText: ComputedRef<string> = computed((): string => props.clearLabel ?? 'Clear selection');
 const isInvalid: ComputedRef<boolean> = computed((): boolean => props.invalid === true);
-const displayValue: ComputedRef<string> = computed((): string =>
-  props.modelValue !== null ? props.display(props.modelValue) : '',
+/* `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: ComputedRef<Row[]> = computed((): Row[] =>
+  Array.isArray(props.modelValue) ? props.modelValue : props.modelValue !== null ? [props.modelValue as Row] : [],
 );
+const selectedTextFor = (n: number): string => (props.selectedText ?? '{n} selected').replace('{n}', String(n));
+const displayValue: ComputedRef<string> = computed((): string => {
+  if (props.multiple === true) return currentRows.value.length === 0 ? '' : selectedTextFor(currentRows.value.length);
+  return props.modelValue !== null ? props.display(props.modelValue 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: ComputedRef<boolean> = computed((): boolean => rows.value.length > 0);
@@ -181,6 +201,37 @@ function setActive(index: number): void {
   });
 }
 
+/* The ticks live here, not in `modelValue`, because a multi dialog is only committed at Confirm:
+   closing it must leave the caller's value exactly as it was. Seeded from `modelValue` on open. */
+const picked: Ref<Row[]> = ref([]) as Ref<Row[]>;
+
+const pickedKeys: ComputedRef<Set<string>> = computed(
+  (): Set<string> => new Set(picked.value.map((r: Row): string => props.rowKey(r)))
+);
+
+function isPicked(row: Row): boolean {
+  return pickedKeys.value.has(props.rowKey(row));
+}
+
+function togglePick(row: Row): void {
+  const key: string = props.rowKey(row);
+  const at: number = picked.value.findIndex((r: Row): boolean => props.rowKey(r) === key);
+  if (at === -1) picked.value = [...picked.value, row];
+  else picked.value = picked.value.filter((_: Row, i: number): boolean => i !== at);
+}
+
+/* A click means "tick this" in multi and "this is my answer" in single — the whole difference. */
+function onRowClick(row: Row): void {
+  if (props.multiple === true) togglePick(row);
+  else commit(row);
+}
+
+function confirmPicks(): void {
+  emit('update:modelValue', picked.value);
+  emit('change', picked.value);
+  closeDialog();
+}
+
 function commit(row: Row | null): void {
   emit('update:modelValue', row);
   emit('change', row);
@@ -190,6 +241,7 @@ function commit(row: Row | null): void {
 /* Unsetting is not "picking nothing" — it must not open or close the dialog, and it must leave focus
    on a control that still exists, so focus returns to the trigger beside it. */
 function clearValue(): void {
+  picked.value = [];
   emit('update:modelValue', null);
   emit('change', null);
   triggerEl.value?.focus();
@@ -221,7 +273,7 @@ function onKeydown(e: KeyboardEvent): void {
       const row: Row | undefined = activeIndex.value >= 0 ? rows.value[activeIndex.value] : undefined;
       if (row !== undefined) {
         e.preventDefault();
-        commit(row);
+        onRowClick(row);
       }
       break;
     }
@@ -244,6 +296,8 @@ function openDialog(): void {
   hasMore.value = false;
   error.value = null;
   activeIndex.value = -1;
+  /* Re-seeded per open, so Cancel really is a cancel: the ticks start as whatever the caller holds. */
+  picked.value = props.multiple === true ? [...currentRows.value] : [];
   dialogEl.value?.showModal();
   void nextTick((): void => searchEl.value?.focus());
   void loadPage(0, false);
@@ -361,6 +415,7 @@ onBeforeUnmount((): void => {
             <table :id="resultsId" class="fdy-table" aria-label="Search results">
               <thead>
                 <tr>
+                  <th v-if="multiple === true" scope="col"><span class="fdy-visually-hidden">{{ selectedTextFor(picked.length) }}</span></th>
                   <th v-for="col in columns" :key="col.key" scope="col">{{ col.label }}</th>
                 </tr>
               </thead>
@@ -370,10 +425,14 @@ onBeforeUnmount((): void => {
                   :id="rowId(i)"
                   :key="rowKey(row)"
                   class="fdy-cfl__row"
-                  :aria-selected="i === activeIndex ? 'true' : undefined"
-                  @click="commit(row)"
+                  :class="{ 'is-active': i === activeIndex }"
+                  :aria-selected="multiple === true ? String(isPicked(row)) : i === activeIndex ? 'true' : undefined"
+                  @click="onRowClick(row)"
                   @mousemove="setActive(i)"
                 >
+                  <td v-if="multiple === true" class="fdy-cfl__check">
+                    <input class="fdy-check" type="checkbox" tabindex="-1" :checked="isPicked(row)" aria-hidden="true" />
+                  </td>
                   <td v-for="col in columns" :key="col.key">{{ cellText(row, col.key) }}</td>
                 </tr>
               </tbody>
@@ -381,7 +440,7 @@ onBeforeUnmount((): void => {
 
             <div v-if="error !== null" class="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 class="fdy-btn fdy-btn--sm" type="button" @click="retry">Coba lagi</button>
+              <button class="fdy-btn fdy-btn--sm" type="button" @click="retry">{{ retryText ?? 'Try again' }}</button>
             </div>
             <div v-else-if="hasMore" style="padding:var(--space-3) var(--space-4);text-align:center">
               <button class="fdy-btn fdy-btn--ghost fdy-btn--sm" type="button" :disabled="loading" @click="loadMore">
@@ -393,9 +452,12 @@ onBeforeUnmount((): void => {
       </div>
 
       <div class="fdy-modal__footer">
-        <span class="fdy-cfl__count">Click a row to choose it</span>
+        <span class="fdy-cfl__count" aria-live="polite">
+          {{ multiple === true ? selectedTextFor(picked.length) : (hintText ?? 'Click a row to choose it') }}
+        </span>
         <div class="fdy-cfl__actions">
           <button class="fdy-btn fdy-btn--ghost" type="button" @click="closeDialog">{{ closeLabel ?? 'Close' }}</button>
+          <button v-if="multiple === true" class="fdy-btn" type="button" @click="confirmPicks">{{ confirmText ?? 'Confirm' }}</button>
         </div>
       </div>
     </dialog>

package/dist/freeday.bundle.css

@@ -1089,6 +1089,18 @@ a { color: var(--color-primary); }
 .fdy-stat__value{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tighter);line-height:1;color:var(--color-text);font-variant-numeric:tabular-nums;}
 .fdy-stat__value small{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-muted);}
 .fdy-stat__meta{font-size:var(--text-sm);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-2);}
+/* A stat value is display type sized for a COUNT — "1,284" — and a back office puts money in it.
+   "IDR 300,000.00" needs 224px at --text-3xl and the grid's own track is 11rem, so it wrapped
+   between the currency and the number: two lines of 31px where the design says one. Measured, not
+   guessed (#020).
+   The value shrinks only when its own column is too narrow to hold it, so a wide dashboard keeps
+   exactly the type it has today. 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. The unconditional rule above stays as the fallback wherever @container is missing. */
+@supports (container-type:inline-size){
+  .fdy-stats>.fdy-stat{container-type:inline-size;}
+  .fdy-stats>.fdy-stat .fdy-stat__value{font-size:clamp(var(--text-xl),11cqw,var(--text-3xl));}
+}
 .fdy-stats--boxed{background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);gap:0;}
 .fdy-stats--boxed .fdy-stat{padding:var(--space-5);border-right:var(--bw) solid var(--color-border-muted);}
 .fdy-stats--boxed .fdy-stat:last-child{border-right:0;}
@@ -1256,7 +1268,12 @@ a { color: var(--color-primary); }
 .fdy-dropzone__text{display:flex;flex-direction:column;gap:var(--space-1);}
 
 /* File rows (list of added/uploaded/rejected files) */
-.fdy-filelist{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3);}
+/* Symmetric on purpose. The list carried margin-top and nothing below, so whatever follows it —
+   an "Add files" button, in every upload UI there is — sat flush against the last row: measured
+   0px. A block that claims space on one side only is not spacing, it is a lean. */
+.fdy-filelist{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3);margin-bottom:var(--space-3);}
+/* Nothing after it, nothing to separate from — so the room is not spent. */
+.fdy-filelist:last-child{margin-bottom:0;}
 /* Side-by-side rows on wide screens (reflow to one column when narrow). */
 .fdy-filelist--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));}
 .fdy-file{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:var(--bw) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);}
@@ -1768,6 +1785,13 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-table-bulkbar__spacer{flex:1;}
 .fdy-table-bulkbar__actions{display:flex;gap:var(--space-2);}
 
+/* Controls inside a data row. `.fdy-input` and friends are width:100%, which in an auto-layout
+   table means they contribute NO intrinsic width — the column shrinks to whatever the header text
+   needs and the control collapses with it. A NOTE column ends up a box too narrow to read what you
+   typed into it. The floor is per-control rather than on the column, because the table does not
+   know which of its columns hold controls. */
+.fdy-table td>.fdy-input,.fdy-table td>.fdy-textarea,.fdy-table td>.fdy-combo,.fdy-table td>.fdy-input-group,.fdy-table td>.fdy-datepicker,.fdy-table td>.fdy-timepicker{min-width:7rem;}
+
 /* Freeday — Tabs (WAI-ARIA APG) */
 /* position:relative — containing block for out-of-flow content in the tabs (see base.css). */
 .fdy-tabs__list{position:relative;display:flex;gap:var(--space-1);border-bottom:var(--bw) solid var(--color-border);overflow-x:auto;}

package/dist/freeday.css

@@ -706,6 +706,18 @@ a { color: var(--color-primary); }
 .fdy-stat__value{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tighter);line-height:1;color:var(--color-text);font-variant-numeric:tabular-nums;}
 .fdy-stat__value small{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-muted);}
 .fdy-stat__meta{font-size:var(--text-sm);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-2);}
+/* A stat value is display type sized for a COUNT — "1,284" — and a back office puts money in it.
+   "IDR 300,000.00" needs 224px at --text-3xl and the grid's own track is 11rem, so it wrapped
+   between the currency and the number: two lines of 31px where the design says one. Measured, not
+   guessed (#020).
+   The value shrinks only when its own column is too narrow to hold it, so a wide dashboard keeps
+   exactly the type it has today. 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. The unconditional rule above stays as the fallback wherever @container is missing. */
+@supports (container-type:inline-size){
+  .fdy-stats>.fdy-stat{container-type:inline-size;}
+  .fdy-stats>.fdy-stat .fdy-stat__value{font-size:clamp(var(--text-xl),11cqw,var(--text-3xl));}
+}
 .fdy-stats--boxed{background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);gap:0;}
 .fdy-stats--boxed .fdy-stat{padding:var(--space-5);border-right:var(--bw) solid var(--color-border-muted);}
 .fdy-stats--boxed .fdy-stat:last-child{border-right:0;}
@@ -873,7 +885,12 @@ a { color: var(--color-primary); }
 .fdy-dropzone__text{display:flex;flex-direction:column;gap:var(--space-1);}
 
 /* File rows (list of added/uploaded/rejected files) */
-.fdy-filelist{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3);}
+/* Symmetric on purpose. The list carried margin-top and nothing below, so whatever follows it —
+   an "Add files" button, in every upload UI there is — sat flush against the last row: measured
+   0px. A block that claims space on one side only is not spacing, it is a lean. */
+.fdy-filelist{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3);margin-bottom:var(--space-3);}
+/* Nothing after it, nothing to separate from — so the room is not spent. */
+.fdy-filelist:last-child{margin-bottom:0;}
 /* Side-by-side rows on wide screens (reflow to one column when narrow). */
 .fdy-filelist--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));}
 .fdy-file{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:var(--bw) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);}
@@ -1385,6 +1402,13 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-table-bulkbar__spacer{flex:1;}
 .fdy-table-bulkbar__actions{display:flex;gap:var(--space-2);}
 
+/* Controls inside a data row. `.fdy-input` and friends are width:100%, which in an auto-layout
+   table means they contribute NO intrinsic width — the column shrinks to whatever the header text
+   needs and the control collapses with it. A NOTE column ends up a box too narrow to read what you
+   typed into it. The floor is per-control rather than on the column, because the table does not
+   know which of its columns hold controls. */
+.fdy-table td>.fdy-input,.fdy-table td>.fdy-textarea,.fdy-table td>.fdy-combo,.fdy-table td>.fdy-input-group,.fdy-table td>.fdy-datepicker,.fdy-table td>.fdy-timepicker{min-width:7rem;}
+
 /* Freeday — Tabs (WAI-ARIA APG) */
 /* position:relative — containing block for out-of-flow content in the tabs (see base.css). */
 .fdy-tabs__list{position:relative;display:flex;gap:var(--space-1);border-bottom:var(--bw) solid var(--color-border);overflow-x:auto;}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "1.41.0",
+  "version": "1.43.0",
   "description": "Freeday — token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",
@@ -92,7 +92,7 @@
   "scripts": {
     "build": "node tokens/build.mjs",
     "test": "node --test",
-    "test:browser": "node --test browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs browser/card-stretch.mjs browser/text-override.mjs browser/control-heights.mjs",
+    "test:browser": "node --test browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs browser/card-stretch.mjs browser/text-override.mjs browser/control-heights.mjs browser/cfl-multi.mjs browser/crowding.mjs",
     "prepack": "node tokens/build.mjs",
     "version": "node tokens/build.mjs && git add dist",
     "typecheck:react": "tsc -p adapters/react/tsconfig.json --noEmit"

package/src/components/composition.css

@@ -51,6 +51,18 @@
 .fdy-stat__value{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tighter);line-height:1;color:var(--color-text);font-variant-numeric:tabular-nums;}
 .fdy-stat__value small{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-muted);}
 .fdy-stat__meta{font-size:var(--text-sm);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-2);}
+/* A stat value is display type sized for a COUNT — "1,284" — and a back office puts money in it.
+   "IDR 300,000.00" needs 224px at --text-3xl and the grid's own track is 11rem, so it wrapped
+   between the currency and the number: two lines of 31px where the design says one. Measured, not
+   guessed (#020).
+   The value shrinks only when its own column is too narrow to hold it, so a wide dashboard keeps
+   exactly the type it has today. 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. The unconditional rule above stays as the fallback wherever @container is missing. */
+@supports (container-type:inline-size){
+  .fdy-stats>.fdy-stat{container-type:inline-size;}
+  .fdy-stats>.fdy-stat .fdy-stat__value{font-size:clamp(var(--text-xl),11cqw,var(--text-3xl));}
+}
 .fdy-stats--boxed{background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);gap:0;}
 .fdy-stats--boxed .fdy-stat{padding:var(--space-5);border-right:var(--bw) solid var(--color-border-muted);}
 .fdy-stats--boxed .fdy-stat:last-child{border-right:0;}

package/src/components/file-upload.css

@@ -16,7 +16,12 @@
 .fdy-dropzone__text{display:flex;flex-direction:column;gap:var(--space-1);}
 
 /* File rows (list of added/uploaded/rejected files) */
-.fdy-filelist{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3);}
+/* Symmetric on purpose. The list carried margin-top and nothing below, so whatever follows it —
+   an "Add files" button, in every upload UI there is — sat flush against the last row: measured
+   0px. A block that claims space on one side only is not spacing, it is a lean. */
+.fdy-filelist{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3);margin-bottom:var(--space-3);}
+/* Nothing after it, nothing to separate from — so the room is not spent. */
+.fdy-filelist:last-child{margin-bottom:0;}
 /* Side-by-side rows on wide screens (reflow to one column when narrow). */
 .fdy-filelist--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));}
 .fdy-file{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:var(--bw) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);}

package/src/components/table.css

@@ -128,3 +128,10 @@
 .fdy-table-bulkbar__count{font-weight:var(--weight-semibold);white-space:nowrap;}
 .fdy-table-bulkbar__spacer{flex:1;}
 .fdy-table-bulkbar__actions{display:flex;gap:var(--space-2);}
+
+/* Controls inside a data row. `.fdy-input` and friends are width:100%, which in an auto-layout
+   table means they contribute NO intrinsic width — the column shrinks to whatever the header text
+   needs and the control collapses with it. A NOTE column ends up a box too narrow to read what you
+   typed into it. The floor is per-control rather than on the column, because the table does not
+   know which of its columns hold controls. */
+.fdy-table td>.fdy-input,.fdy-table td>.fdy-textarea,.fdy-table td>.fdy-combo,.fdy-table td>.fdy-input-group,.fdy-table td>.fdy-datepicker,.fdy-table td>.fdy-timepicker{min-width:7rem;}