@cahyo-dimas/freeday 2.2.0 → 3.1.0

package/adapters/blazor/FdyTable.razor

@@ -17,10 +17,34 @@
         </div>
     }
 
+    @if (Selectable)
+    {
+        <div class="fdy-table-bulkbar" hidden="@(SelectedCount == 0)" role="region" aria-label="@BulkLabel">
+            <span class="fdy-table-bulkbar__count" aria-live="polite">@SelectedLabel()</span>
+            <span class="fdy-table-bulkbar__spacer"></span>
+            <div class="fdy-table-bulkbar__actions">
+                @BulkContent
+                <button type="button" class="fdy-btn fdy-btn--ghost fdy-btn--sm" @onclick="ClearSelection">@ClearSelectionText</button>
+            </div>
+        </div>
+    }
+
     <div class="fdy-table-scroll">
-        <table class="fdy-table" aria-label="@AriaLabel">
+        <table class="fdy-table @(Striped ? "fdy-table--striped" : null)" aria-label="@AriaLabel">
             <thead>
                 <tr>
+                    @if (Selectable)
+                    {
+                        <th class="fdy-table__selcol" scope="col">
+                            <input type="checkbox"
+                                   class="fdy-checkbox"
+                                   data-fdy-select-all
+                                   @ref="_selectAllRef"
+                                   checked="@AllPageSelected"
+                                   aria-label="@SelectAllLabel"
+                                   @onchange="e => ToggleAllOnPage((bool)(e.Value ?? false))" />
+                        </th>
+                    }
                     @foreach (FdyTableColumn<TRow> col in Columns)
                     {
                         <th scope="col" style="@AlignStyle(col)" aria-sort="@AriaSortOf(col)">
@@ -47,12 +71,12 @@
             <tbody>
                 @if (Loading)
                 {
-                    <tr><td colspan="@Columns.Count" class="fdy-table__state" role="status">@LoadingText</td></tr>
+                    <tr><td colspan="@ColSpan" class="fdy-table__state" role="status">@LoadingText</td></tr>
                 }
                 else if (_displayRows.Count == 0)
                 {
                     <tr>
-                        <td colspan="@Columns.Count" class="fdy-table__state">
+                        <td colspan="@ColSpan" class="fdy-table__state">
                             @if (EmptyContent is not null)
                             {
                                 @EmptyContent
@@ -72,8 +96,24 @@
                         <tr class="@RowClasses(r)"
                             tabindex="@(RowActivatable ? 0 : (int?)null)"
                             aria-expanded="@ExpandedAttr(r)"
+                            aria-selected="@SelectedAttr(r)"
                             @onclick="() => OnRowClick(r)"
                             @onkeydown="e => OnRowKeydown(e, r)">
+                            @if (Selectable)
+                            {
+                                @* @onclick:stopPropagation: without it, ticking a checkbox in an
+                                   activatable row also raises RowActivate, so selecting a row
+                                   would navigate away from it. *@
+                                <td class="fdy-table__selcol">
+                                    <input type="checkbox"
+                                           class="fdy-checkbox"
+                                           data-fdy-row-select
+                                           checked="@IsSelected(r)"
+                                           aria-label="@SelectRowLabel"
+                                           @onclick:stopPropagation="true"
+                                           @onchange="e => ToggleRow(r, (bool)(e.Value ?? false))" />
+                                </td>
+                            }
                             @foreach (FdyTableColumn<TRow> col in Columns)
                             {
                                 <td class="@CellClass(col)" style="@AlignStyle(col)">
@@ -91,7 +131,7 @@
                         @if (RowDetail is not null && IsExpanded(r))
                         {
                             <tr class="fdy-table__detailrow">
-                                <td colspan="@Columns.Count">@RowDetail(r)</td>
+                                <td colspan="@ColSpan">@RowDetail(r)</td>
                             </tr>
                         }
                     }

package/adapters/blazor/FdyTable.razor.cs

@@ -1,5 +1,6 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
+using Microsoft.JSInterop;
 
 namespace Freeday.Blazor;
 
@@ -86,6 +87,29 @@ public partial class FdyTable<TRow>
     /// <summary>Optional toolbar (search box, actions) above the table.</summary>
     [Parameter] public RenderFragment? Toolbar { get; set; }
 
+    /// <summary>Zebra-stripe the body rows.</summary>
+    [Parameter] public bool Striped { get; set; }
+
+    /// <summary>Render the checkbox column and the bulk bar.</summary>
+    [Parameter] public bool Selectable { get; set; }
+
+    /// <summary>
+    /// Controlled selection, as <see cref="RowKey"/> values. Wire <c>@bind-SelectedKeys</c> to own
+    /// it; omit for internal (the column still works with nothing wired).
+    /// </summary>
+    [Parameter] public IReadOnlyList<object>? SelectedKeys { get; set; }
+    [Parameter] public EventCallback<IReadOnlyList<object>> SelectedKeysChanged { get; set; }
+
+    /// <summary>Bulk-bar count, <c>{n}</c> substituted.</summary>
+    [Parameter] public string SelectedText { get; set; } = "{n} selected";
+    [Parameter] public string ClearSelectionText { get; set; } = "Clear";
+    [Parameter] public string SelectAllLabel { get; set; } = "Select all rows on this page";
+    [Parameter] public string SelectRowLabel { get; set; } = "Select row";
+    [Parameter] public string BulkLabel { get; set; } = "Bulk actions";
+
+    /// <summary>Bulk-bar actions (Blazor equivalent of Vue's <c>bulk-actions</c> slot).</summary>
+    [Parameter] public RenderFragment? BulkContent { get; set; }
+
     private FdySortState? _internalSort;
     private Dictionary<string, FdyColumnFilter> _internalFilters = new();
     private int _internalPageIndex;
@@ -148,6 +172,7 @@ public partial class FdyTable<TRow>
             _processDirty = false;
             if (Process.HasDelegate) await Process.InvokeAsync(new FdyTableProcess<TRow>(_displayRows, _totalCount));
         }
+        await SyncSelectAllIndeterminateAsync();
     }
 
     // Recompute the visible rows from the current effective sort/filter/page. Called on every
@@ -306,6 +331,91 @@ public partial class FdyTable<TRow>
         await RowActivate.InvokeAsync(row);
     }
 
+    // Selection is keyed by RowKey, exactly as ExpandedKeys is, and for the same reason: a key
+    // survives the re-fetch that replaces every row object, an object identity does not.
+    private List<object> _internalSelectedKeys = new();
+    private bool SelectionControlled => SelectedKeysChanged.HasDelegate;
+    private IReadOnlyList<object> EffectiveSelectedKeys =>
+        SelectionControlled ? (SelectedKeys ?? Array.Empty<object>()) : _internalSelectedKeys;
+    private int SelectedCount => EffectiveSelectedKeys.Count;
+
+    // The select-all box acts on the CURRENT PAGE, not on every filtered row: a header checkbox that
+    // silently selects rows the reader cannot see is how bulk deletes go wrong. Keys picked on other
+    // pages are preserved rather than dropped, so paging away and back does not lose them.
+    private List<object> PageKeys => _displayRows.Select(RowKey).ToList();
+    private bool AllPageSelected
+    {
+        get
+        {
+            List<object> keys = PageKeys;
+            return keys.Count > 0 && keys.All(EffectiveSelectedKeys.Contains);
+        }
+    }
+    private bool SomePageSelected => !AllPageSelected && PageKeys.Any(EffectiveSelectedKeys.Contains);
+
+    private async Task SetSelection(List<object> keys)
+    {
+        if (!SelectionControlled) _internalSelectedKeys = keys;
+        if (SelectedKeysChanged.HasDelegate) await SelectedKeysChanged.InvokeAsync(keys);
+    }
+
+    private bool IsSelected(TRow row) => EffectiveSelectedKeys.Contains(RowKey(row));
+
+    private async Task ToggleRow(TRow row, bool selected)
+    {
+        object key = RowKey(row);
+        List<object> next = EffectiveSelectedKeys.Where(k => !Equals(k, key)).ToList();
+        if (selected) next.Add(key);
+        await SetSelection(next);
+    }
+
+    private async Task ToggleAllOnPage(bool selected)
+    {
+        HashSet<object> onPage = PageKeys.ToHashSet();
+        List<object> offPage = EffectiveSelectedKeys.Where(k => !onPage.Contains(k)).ToList();
+        if (selected) offPage.AddRange(PageKeys);
+        await SetSelection(offPage);
+    }
+
+    private Task ClearSelection() => SetSelection(new List<object>());
+
+    [Inject] private IJSRuntime JS { get; set; } = default!;
+    private ElementReference _selectAllRef;
+    private bool? _pushedIndeterminate;
+
+    /// <summary>
+    /// <c>indeterminate</c> is a DOM property with no HTML attribute, so Blazor's renderer cannot
+    /// express it — without this the tri-state select-all box would render as a plain unchecked one
+    /// whenever only some rows on the page are selected. Pushed only when it actually changed, and
+    /// only while <see cref="Selectable"/>, so a table without a checkbox column makes no JS call at
+    /// all. The table's subtree already depends on the JS bridge (FdyTableFilter), so this adds no
+    /// new dependency, and running in OnAfterRender keeps it out of the prerender pass where there
+    /// is no element to touch yet.
+    /// </summary>
+    private async Task SyncSelectAllIndeterminateAsync()
+    {
+        if (!Selectable) return;
+        bool mixed = SomePageSelected;
+        if (_pushedIndeterminate == mixed) return;
+        _pushedIndeterminate = mixed;
+        try
+        {
+            await JS.InvokeVoidAsync("FreedayBlazor.setIndeterminate", _selectAllRef, mixed);
+        }
+        catch (JSDisconnectedException)
+        {
+            // circuit/runtime already gone
+        }
+    }
+
+    private string SelectedLabel() => SelectedText.Replace("{n}", SelectedCount.ToString());
+
+    private string? SelectedAttr(TRow row) => Selectable ? (IsSelected(row) ? "true" : "false") : null;
+
+    // The checkbox column widens every full-width row (loading, empty, row detail) by one. Deriving
+    // it once is what keeps a later column change from leaving one of the three behind.
+    private int ColSpan => Columns.Count + (Selectable ? 1 : 0);
+
     private bool IsExpanded(TRow row) => ExpandedKeys?.Contains(RowKey(row)) == true;
     private string? ExpandedAttr(TRow row) => RowDetail is null ? null : (IsExpanded(row) ? "true" : "false");
 }

package/adapters/blazor/FdyTableFooter.razor

@@ -24,7 +24,7 @@
 
         @if (HasPager)
         {
-            <nav aria-label="Pagination">
+            <nav class="fdy-pagination" aria-label="Pagination">
                 <ul class="fdy-pagination__list">
                     <li>
                         <button type="button" class="fdy-pagination__link" aria-label="Previous page"

package/adapters/blazor/freeday-blazor.js

@@ -168,6 +168,13 @@
     }
   }
 
+  // `indeterminate` is a DOM PROPERTY with no matching HTML attribute, so Blazor's renderer cannot
+  // express it and a tri-state select-all box would silently render as a plain unchecked one. Vue
+  // and React set the property directly; this is Blazor's way to the same place.
+  function setIndeterminate(element, value) {
+    if (element) element.indeterminate = !!value;
+  }
+
   // Flip the document theme (data-theme on <html>), for the demo toggle.
   function toggleTheme() {
     var e = document.documentElement;
@@ -177,6 +184,7 @@
   window.FreedayBlazor = {
     initAll: initAll, on: on, off: off, onOutside: onOutside, toast: toast, toggleTheme: toggleTheme,
     comboSetValue: comboSetValue, dateRangeOn: dateRangeOn, chartUpdate: chartUpdate,
+    setIndeterminate: setIndeterminate,
     dialogInit: dialogInit, dialogShow: dialogShow, dialogClose: dialogClose, dialogDispose: dialogDispose,
   };
 })();

package/adapters/react/components/FdyAppShell.tsx

@@ -31,6 +31,12 @@ export interface FdyAppShellProps {
   nav?: ReactNode;
   topbar?: ReactNode;
   children?: ReactNode;
+  /**
+   * How a VISIBLE nav sits on a wide viewport: `push` (default) makes it a column that displaces
+   * the content, `overlay` floats it over the page with a backdrop. Below the nav breakpoint it is
+   * ignored — the nav is off-canvas there by definition, so there is nothing to choose.
+   */
+  navMode?: 'push' | 'overlay';
 }
 
 export function FdyAppShell(props: FdyAppShellProps): JSX.Element {
@@ -39,9 +45,19 @@ export function FdyAppShell(props: FdyAppShellProps): JSX.Element {
   /* Set while a viewport change is driving the state, so the effect below reconciles `inert` and
      the classes but leaves FOCUS alone: a resize is not a reader asking to go somewhere. */
   const fromResizeRef = useRef<boolean>(false);
-  const [overlay, setOverlay] = useState<boolean>(false);
+  /* The viewport half of the answer, kept separate from `overlay` now that a prop can also decide
+     it: a mode switch and a resize both change whether the nav floats, and only one of them is a
+     viewport event. The ref shadows the state because the media listener subscribes once and must
+     read the CURRENT value without resubscribing. */
+  const [wide, setWide] = useState<boolean>(true);
+  const wideRef = useRef<boolean>(true);
   const [uncontrolled, setUncontrolled] = useState<boolean>(true);
 
+  const navMode: 'push' | 'overlay' = props.navMode ?? 'push';
+  const navModeRef = useRef<'push' | 'overlay'>(navMode);
+  navModeRef.current = navMode;
+
+  const overlay: boolean = !wide || navMode === 'overlay';
   const controlled: boolean = props.navOpen !== undefined;
   const navVisible: boolean = controlled ? props.navOpen === true : uncontrolled;
 
@@ -65,20 +81,41 @@ export function FdyAppShell(props: FdyAppShellProps): JSX.Element {
   useEffect((): (() => void) => {
     const media: MediaQueryList = window.matchMedia(NAV_QUERY);
     const onChange = (): void => {
-      const nowOverlay: boolean = !media.matches;
-      setOverlay((was: boolean): boolean => {
-        if (was !== nowOverlay) fromResizeRef.current = true;
-        return nowOverlay;
-      });
-      if (nowOverlay && navVisibleRef.current) setVisibleRef.current(false);
+      const nowWide: boolean = media.matches;
+      if (nowWide === wideRef.current) return;
+      const mode: 'push' | 'overlay' = navModeRef.current;
+      const wasOverlay: boolean = !wideRef.current || mode === 'overlay';
+      const nextOverlay: boolean = !nowWide || mode === 'overlay';
+      /* Only when the effect below will actually re-run. In overlay MODE, crossing the breakpoint
+         changes neither `overlay` nor `navVisible`, and a flag left standing here would silently
+         swallow the focus move of the next real toggle. */
+      if (wasOverlay !== nextOverlay) fromResizeRef.current = true;
+      wideRef.current = nowWide;
+      setWide(nowWide);
+      if (nextOverlay && !wasOverlay && navVisibleRef.current) setVisibleRef.current(false);
     };
     // Mount: adopt the viewport without the hide-on-narrow side effect, nothing is open yet.
-    setOverlay(!media.matches);
-    if (!controlled) setUncontrolled(media.matches);
+    wideRef.current = media.matches;
+    setWide(media.matches);
+    /* An overlay nav starts CLOSED even on a wide screen: it covers the page, so opening it unasked
+       is the same intrusion it would be on a phone. A pushing column starts open. */
+    if (!controlled) setUncontrolled(media.matches && navModeRef.current !== 'overlay');
     media.addEventListener('change', onChange);
     return (): void => media.removeEventListener('change', onChange);
   }, [controlled]);
 
+  /* Switching mode is not a reader asking to go somewhere either, so focus stays put. Turning
+     overlay ON over a visible column would drop a panel across a page nobody asked to leave, so it
+     closes; turning it OFF leaves visibility alone, because `navOpen` is the reader's answer and a
+     mode change is not a reason to overrule it. */
+  const prevModeRef = useRef<'push' | 'overlay'>(navMode);
+  useEffect((): void => {
+    if (prevModeRef.current === navMode) return;
+    prevModeRef.current = navMode;
+    fromResizeRef.current = true;
+    if (navMode === 'overlay' && wideRef.current && navVisibleRef.current) setVisibleRef.current(false);
+  }, [navMode]);
+
   // Focus moves only after the class change has been painted, or the panel is still off-canvas and
   // the browser refuses to focus what it cannot lay out.
   useEffect((): void => {
@@ -109,9 +146,13 @@ export function FdyAppShell(props: FdyAppShellProps): JSX.Element {
     return (): void => document.removeEventListener('keydown', onKeydown);
   }, [overlay, navVisible, setVisible]);
 
+  /* `--nav-overlay` rides on the MODE, not on the viewport: below the breakpoint the stylesheet's
+     own media query already makes the nav off-canvas, so the class would be redundant there, and
+     carrying it anyway is what lets one class answer "is this shell in overlay mode?" at any width. */
+  const modeClass: string = navMode === 'overlay' ? ' fdy-app--nav-overlay' : '';
   const shellClass: string = overlay
-    ? (navVisible ? 'fdy-app fdy-app--nav-open' : 'fdy-app')
-    : (navVisible ? 'fdy-app' : 'fdy-app fdy-app--nav-collapsed');
+    ? `fdy-app${modeClass}${navVisible ? ' fdy-app--nav-open' : ''}`
+    : `fdy-app${modeClass}${navVisible ? '' : ' fdy-app--nav-collapsed'}`;
 
   return (
     <div ref={rootRef} className={shellClass}>

package/adapters/react/components/FdyTable.tsx

@@ -94,6 +94,27 @@ export interface FdyTableProps<Row extends object> {
   expandedKeys?: ReadonlyArray<string | number>;
   /** Renders the expandable detail row for an expanded row (React equivalent of Vue's `row-detail` slot). */
   renderRowDetail?: (row: Row) => ReactNode;
+  /** Zebra-stripe the body rows. */
+  striped?: boolean;
+  /** Render the checkbox column and the bulk bar. */
+  selectable?: boolean;
+  /** Controlled selection, as `rowKey` values. Provide to own it; omit for internal (the column
+   *  still works with nothing wired). */
+  selectedKeys?: ReadonlyArray<string | number>;
+  /** Selection changed, as `rowKey` values. Vue emits `update:selectedKeys`. */
+  onSelectedKeysChange?: (keys: Array<string | number>) => void;
+  /** Bulk-bar count, `{n}` substituted. Default `{n} selected`. */
+  selectedText?: string;
+  /** Bulk-bar clear button. Default `Clear`. */
+  clearSelectionText?: string;
+  /** Accessible name of the header checkbox. Default `Select all rows on this page`. */
+  selectAllLabel?: string;
+  /** Accessible name of each row checkbox. Default `Select row`. */
+  selectRowLabel?: string;
+  /** Accessible name of the bulk bar region. Default `Bulk actions`. */
+  bulkLabel?: string;
+  /** Bulk-bar actions (React equivalent of Vue's `bulk-actions` slot). */
+  bulkActions?: ReactNode;
 }
 
 export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Element {
@@ -103,6 +124,7 @@ export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Ele
 
   const [internalSort, setInternalSort] = useState<FdySortState | null>(null);
   const [internalFilters, setInternalFilters] = useState<FdyFilterMap>({});
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState<Array<string | number>>([]);
   const [internalPageIndex, setInternalPageIndex] = useState<number>(0);
   /* Client-mode rows-per-page. `pageSize` is a plain prop 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
@@ -258,16 +280,99 @@ export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Ele
     return cellText(row, col);
   }
 
-  const colCount: number = props.columns.length;
+  /* Selection is keyed by `rowKey`, exactly as `expandedKeys` is, and for the same reason: a key
+   * survives the re-fetch that replaces every row object, an object identity does not. Controlled
+   * when `selectedKeys` is provided, internal otherwise, so the column works with nothing wired. */
+  const selectionControlled: boolean = props.selectedKeys !== undefined;
+  const effectiveSelectedKeys: ReadonlyArray<string | number> = selectionControlled
+    ? (props.selectedKeys as ReadonlyArray<string | number>)
+    : internalSelectedKeys;
+  const selectedCount: number = effectiveSelectedKeys.length;
+  /* The select-all box acts on the CURRENT PAGE, not on every filtered row: a header checkbox that
+   * silently selects rows the reader cannot see is how bulk deletes go wrong. Keys picked on other
+   * pages are preserved rather than dropped, so paging away and back does not lose them. */
+  const pageKeys: Array<string | number> = displayRows.map((row: Row): string | number => props.rowKey(row));
+  const allPageSelected: boolean =
+    pageKeys.length > 0 && pageKeys.every((k: string | number): boolean => effectiveSelectedKeys.includes(k));
+  const somePageSelected: boolean =
+    !allPageSelected && pageKeys.some((k: string | number): boolean => effectiveSelectedKeys.includes(k));
+
+  function setSelection(keys: Array<string | number>): void {
+    if (!selectionControlled) setInternalSelectedKeys(keys);
+    props.onSelectedKeysChange?.(keys);
+  }
+  function isSelected(row: Row): boolean {
+    return effectiveSelectedKeys.includes(props.rowKey(row));
+  }
+  function toggleRow(row: Row, checked: boolean): void {
+    const key: string | number = props.rowKey(row);
+    const next: Array<string | number> = effectiveSelectedKeys.filter((k: string | number): boolean => k !== key);
+    if (checked) next.push(key);
+    setSelection(next);
+  }
+  function toggleAllOnPage(checked: boolean): void {
+    const onPage: Set<string | number> = new Set(pageKeys);
+    const offPage: Array<string | number> = effectiveSelectedKeys.filter(
+      (k: string | number): boolean => !onPage.has(k),
+    );
+    setSelection(checked ? offPage.concat(pageKeys) : offPage);
+  }
+  function clearSelection(): void {
+    setSelection([]);
+  }
+  function selectedLabel(n: number): string {
+    return (props.selectedText ?? '{n} selected').replace('{n}', String(n));
+  }
+
+  /* The checkbox column widens every full-width row (loading, empty, row detail) by one. Deriving it
+   * once is what keeps a later column change from leaving one of the three behind. */
+  const colCount: number = props.columns.length + (props.selectable === true ? 1 : 0);
 
   return (
     <div className="fdy-datatable">
       {props.toolbar !== undefined && <div className="fdy-table-toolbar">{props.toolbar}</div>}
 
+      {props.selectable === true && (
+        <div
+          className="fdy-table-bulkbar"
+          hidden={selectedCount === 0}
+          role="region"
+          aria-label={props.bulkLabel ?? 'Bulk actions'}
+        >
+          <span className="fdy-table-bulkbar__count" aria-live="polite">{selectedLabel(selectedCount)}</span>
+          <span className="fdy-table-bulkbar__spacer" />
+          <div className="fdy-table-bulkbar__actions">
+            {props.bulkActions}
+            <button type="button" className="fdy-btn fdy-btn--ghost fdy-btn--sm" onClick={clearSelection}>
+              {props.clearSelectionText ?? 'Clear'}
+            </button>
+          </div>
+        </div>
+      )}
+
       <div className="fdy-table-scroll">
-        <table className="fdy-table" aria-label={props.ariaLabel}>
+        <table
+          className={props.striped === true ? 'fdy-table fdy-table--striped' : 'fdy-table'}
+          aria-label={props.ariaLabel}
+        >
           <thead>
             <tr>
+              {props.selectable === true && (
+                <th className="fdy-table__selcol" scope="col">
+                  <input
+                    type="checkbox"
+                    className="fdy-checkbox"
+                    data-fdy-select-all
+                    checked={allPageSelected}
+                    ref={(el: HTMLInputElement | null): void => {
+                      // `indeterminate` is a DOM property with no attribute, so JSX cannot set it.
+                      if (el !== null) el.indeterminate = somePageSelected;
+                    }}
+                    aria-label={props.selectAllLabel ?? 'Select all rows on this page'}
+                    onChange={(e): void => toggleAllOnPage(e.target.checked)}
+                  />
+                </th>
+              )}
               {props.columns.map((col: FdyTableColumn<Row>): JSX.Element => (
                 <th key={col.key} scope="col" style={alignStyle(col)} aria-sort={ariaSortOf(col)}>
                   {col.sortable ? (
@@ -306,11 +411,27 @@ export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Ele
                     className={rowClassName(row)}
                     tabIndex={props.rowActivatable ? 0 : undefined}
                     aria-expanded={props.renderRowDetail !== undefined ? (isExpanded(row) ? 'true' : 'false') : undefined}
+                    aria-selected={props.selectable === true ? (isSelected(row) ? 'true' : 'false') : undefined}
                     onClick={(): void => {
                       if (props.rowActivatable === true) props.onRowActivate?.(row);
                     }}
                     onKeyDown={(e): void => onRowKeydown(e, row)}
                   >
+                    {props.selectable === true && (
+                      <td className="fdy-table__selcol">
+                        {/* stopPropagation: without it, ticking a checkbox in an activatable row also
+                            fires onRowActivate, so selecting a row would navigate away from it. */}
+                        <input
+                          type="checkbox"
+                          className="fdy-checkbox"
+                          data-fdy-row-select
+                          checked={isSelected(row)}
+                          aria-label={props.selectRowLabel ?? 'Select row'}
+                          onClick={(e): void => e.stopPropagation()}
+                          onChange={(e): void => toggleRow(row, e.target.checked)}
+                        />
+                      </td>
+                    )}
                     {props.columns.map((col: FdyTableColumn<Row>): JSX.Element => (
                       <td key={col.key} className={cellClass(col)} style={alignStyle(col)}>{renderCellContent(col, row)}</td>
                     ))}

package/adapters/react/components/FdyTableFooter.tsx

@@ -75,7 +75,7 @@ export function FdyTableFooter(props: FdyTableFooterProps): JSX.Element | null {
       )}
 
       {hasPager && (
-        <nav aria-label="Pagination">
+        <nav className="fdy-pagination" aria-label="Pagination">
           <ul className="fdy-pagination__list">
             <li>
               <button type="button" className="fdy-pagination__link" aria-label="Previous page" disabled={currentPage1 === 1} onClick={(): void => goTo(currentPage1 - 1)}>‹</button>

package/adapters/vue/components/FdyAppShell.vue

@@ -26,14 +26,24 @@ const props = withDefaults(defineProps<{
   navOpen?: boolean;
   title?: string;
   toggleLabel?: string;
-}>(), { navOpen: undefined, title: '', toggleLabel: 'Toggle navigation' });
+  /**
+   * How a VISIBLE nav sits on a wide viewport: `push` (default) makes it a column that displaces
+   * the content, `overlay` floats it over the page with a backdrop. Below the nav breakpoint it is
+   * ignored — the nav is off-canvas there by definition, so there is nothing to choose.
+   */
+  navMode?: 'push' | 'overlay';
+}>(), { navOpen: undefined, title: '', toggleLabel: 'Toggle navigation', navMode: 'push' });
 
 const emit = defineEmits<{
   'update:navOpen': [boolean];
 }>();
 
 const root: Ref<HTMLElement | null> = ref(null);
-const overlay: Ref<boolean> = ref(false);
+/* The viewport half of the answer, kept separate from `overlay` now that a prop can also decide it:
+   a mode switch and a resize both change whether the nav floats, and only one of them is a viewport
+   event. */
+const wide: Ref<boolean> = ref(true);
+const overlay: ComputedRef<boolean> = computed((): boolean => !wide.value || props.navMode === 'overlay');
 const uncontrolled: Ref<boolean> = ref(true);
 const restoreTo: Ref<Element | null> = ref(null);
 let media: MediaQueryList | null = null;
@@ -46,8 +56,12 @@ const navVisible: ComputedRef<boolean> = computed((): boolean =>
 );
 
 const shellClass: ComputedRef<string> = computed((): string => {
-  if (overlay.value) return navVisible.value ? 'fdy-app fdy-app--nav-open' : 'fdy-app';
-  return navVisible.value ? 'fdy-app' : 'fdy-app fdy-app--nav-collapsed';
+  /* `--nav-overlay` rides on the MODE, not on the viewport: below the breakpoint the stylesheet's
+     own media query already makes the nav off-canvas, so the class would be redundant there, and
+     carrying it anyway is what lets one class answer "is this shell in overlay mode?" at any width. */
+  const mode: string = props.navMode === 'overlay' ? ' fdy-app--nav-overlay' : '';
+  if (overlay.value) return `fdy-app${mode}${navVisible.value ? ' fdy-app--nav-open' : ''}`;
+  return `fdy-app${mode}${navVisible.value ? '' : ' fdy-app--nav-collapsed'}`;
 });
 
 function setVisible(next: boolean): void {
@@ -102,17 +116,33 @@ function onKeydown(e: KeyboardEvent): void {
    the nav is hidden. Widening is harmless, a visible nav simply becomes the column again, and the
    watcher clears the `inert` the overlay had put on the content. */
 function onMediaChange(): void {
-  const nowOverlay: boolean = media !== null && !media.matches;
-  if (nowOverlay === overlay.value) return;
-  fromResize = true;
-  overlay.value = nowOverlay;
-  if (nowOverlay && navVisible.value) setVisible(false);
+  const nowWide: boolean = media !== null && media.matches;
+  if (nowWide === wide.value) return;
+  const wasOverlay: boolean = overlay.value;
+  const nextOverlay: boolean = !nowWide || props.navMode === 'overlay';
+  /* Only when the watcher will actually fire. In overlay MODE, crossing the breakpoint changes
+     neither `overlay` nor `navVisible`, so nothing re-runs — and a flag left standing here would
+     silently swallow the focus move of the next real toggle. */
+  if (nextOverlay !== wasOverlay) fromResize = true;
+  wide.value = nowWide;
+  if (nextOverlay && !wasOverlay && navVisible.value) setVisible(false);
 }
 
+/* Switching mode is not a reader asking to go somewhere either, so focus stays put. Turning overlay
+   ON over a visible column would drop a panel across a page nobody asked to leave, so it closes;
+   turning it OFF leaves visibility alone, because `navOpen` is the reader's answer and a mode change
+   is not a reason to overrule it. */
+watch((): 'push' | 'overlay' => props.navMode, (mode: 'push' | 'overlay'): void => {
+  fromResize = true;
+  if (mode === 'overlay' && wide.value && navVisible.value) setVisible(false);
+});
+
 onMounted((): void => {
   media = window.matchMedia(NAV_QUERY);
-  overlay.value = !media.matches;
-  uncontrolled.value = media.matches;
+  wide.value = media.matches;
+  /* An overlay nav starts CLOSED even on a wide screen: it covers the page, so opening it unasked
+     is the same intrusion it would be on a phone. A pushing column starts open. */
+  uncontrolled.value = media.matches && props.navMode !== 'overlay';
   media.addEventListener('change', onMediaChange);
   document.addEventListener('keydown', onKeydown);
   const el: HTMLElement | null = root.value;