@cl-light-ds/ui 0.1.0 → 0.3.0

package/src/components/table/TableColumnMenu.astro

@@ -0,0 +1,50 @@
+---
+import { Columns3 } from "@lucide/astro";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "../dropdown-menu";
+
+interface ColumnOption {
+  column: string;
+  label: string;
+  /** Initially hidden. */
+  hidden?: boolean;
+  /** Always visible (e.g. the name column). */
+  disabled?: boolean;
+}
+
+interface Props {
+  columns: ColumnOption[];
+  label?: string;
+  class?: string;
+}
+
+const { columns, label = "Columns", class: className = "" } = Astro.props as Props;
+---
+
+<DropdownMenu
+  data-table-column-menu
+  data-columns={JSON.stringify(columns.map((c) => c.column))}
+  closeOnSelect={false}
+  defaultValues={columns.filter((c) => !c.hidden).map((c) => c.column)}
+  class={className}
+>
+  <DropdownMenuTrigger variant="outline" size="sm">
+    <Columns3 aria-hidden="true" />
+    {label}
+  </DropdownMenuTrigger>
+  <DropdownMenuContent align="end" class="w-auto min-w-44">
+    <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+    {
+      columns.map((c) => (
+        <DropdownMenuCheckboxItem value={c.column} defaultChecked={!c.hidden} disabled={c.disabled}>
+          {c.label}
+        </DropdownMenuCheckboxItem>
+      ))
+    }
+  </DropdownMenuContent>
+</DropdownMenu>

package/src/components/table/TableEditableCell.astro

@@ -0,0 +1,287 @@
+---
+import { Check, ChevronDown, Pencil, X } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+import { Badge } from "../badge";
+import { Button } from "../button";
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "../combobox";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "../dropdown-menu";
+import { Input } from "../input";
+import { Spinner } from "../spinner";
+import { cellAlign, cellBase, levelIndentStyle, type CellAlign } from "./table-cell-variants";
+
+type BadgeVariant =
+  | "default"
+  | "secondary"
+  | "destructive"
+  | "outline"
+  | "success"
+  | "warning"
+  | "accent"
+  | "ghost";
+
+export interface TableCellOption {
+  value: string;
+  label: string;
+  /** Badge variant used to render this option in select/multiselect cells. */
+  variant?: BadgeVariant;
+}
+
+interface Props extends Omit<HTMLAttributes<"td">, "value"> {
+  class?: string;
+  /** Column key reported in `table:edit`. */
+  column: string;
+  /** Current value. Use a string array for `multiselect`. */
+  value?: string | string[];
+  /**
+   * - `text`: click to edit, confirm with ✓ / Enter, cancel with ✕ / Esc.
+   * - `select`: badge dropdown, commits on pick.
+   * - `combobox`: searchable single select, commits on pick.
+   * - `multiselect`: badge tags with checkboxes, commits when the menu closes.
+   */
+  editor?: "text" | "select" | "combobox" | "multiselect";
+  options?: TableCellOption[];
+  /** Accessible column name, e.g. "Status". Defaults to `column`. */
+  label?: string;
+  /** Secondary line under a text value (not editable). */
+  subtitle?: string;
+  placeholder?: string;
+  /** Renders the value without edit affordances. */
+  readOnly?: boolean;
+  align?: CellAlign;
+  numeric?: boolean;
+  level?: 1 | 2 | 3;
+  /** Badges shown before collapsing the rest into "+N" (multiselect). */
+  maxVisible?: number;
+  /** Native validation for the text editor. */
+  required?: boolean;
+  pattern?: string;
+  minLength?: number;
+  maxLength?: number;
+  inputType?: "text" | "number" | "email" | "url";
+}
+
+const {
+  class: className = "",
+  column,
+  value = "",
+  editor = "text",
+  options = [],
+  label = column,
+  subtitle,
+  placeholder = "Empty",
+  readOnly = false,
+  numeric = false,
+  align = numeric ? "right" : "left",
+  level,
+  maxVisible = 2,
+  required = false,
+  pattern,
+  minLength,
+  maxLength,
+  inputType = "text",
+  ...rest
+} = Astro.props as Props;
+
+const values = Array.isArray(value) ? value : value ? [value] : [];
+const optionFor = (v: string): TableCellOption =>
+  options.find((o) => o.value === v) ?? { value: v, label: v };
+const selected = values.map(optionFor);
+const visible = selected.slice(0, maxVisible);
+const overflow = selected.length - visible.length;
+const textValue = editor === "text" ? String(values[0] ?? "") : selected.map((o) => o.label).join(", ");
+const usesBadges = editor === "select" || editor === "multiselect";
+const dataValue = editor === "multiselect" ? JSON.stringify(values) : String(values[0] ?? "");
+
+const affordance =
+  "group/editable -mx-2 flex min-h-8 max-w-full items-center gap-1.5 rounded-md px-2 text-left outline-none transition-[background-color,box-shadow] hover:bg-background hover:ring-1 hover:ring-border focus-visible:ring-2 focus-visible:ring-ring";
+const affordanceIcon =
+  "size-3.5 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/editable:opacity-100 group-focus-visible/editable:opacity-100 group-focus/cell:opacity-100";
+---
+
+<td
+  data-slot="table-cell"
+  data-column={column}
+  data-editable={readOnly ? undefined : ""}
+  data-readonly={readOnly ? "" : undefined}
+  data-editor={editor}
+  data-value={dataValue}
+  data-label={label}
+  data-max-visible={maxVisible}
+  data-placeholder={placeholder}
+  data-state="idle"
+  style={levelIndentStyle(level)}
+  class={cn(
+    cellBase,
+    cellAlign({ align }),
+    "group/cell h-12 py-2 font-medium",
+    numeric && "font-semibold tabular-nums",
+    className,
+  )}
+  {...rest}
+>
+  {
+    readOnly ? (
+      usesBadges ? (
+        <span class="inline-flex items-center gap-1">
+          {visible.map((o) => <Badge size="sm" variant={o.variant ?? "secondary"}>{o.label}</Badge>)}
+          {overflow > 0 && <Badge size="sm" variant="outline">+{overflow}</Badge>}
+        </span>
+      ) : (
+        <span class="block truncate">{textValue}</span>
+      )
+    ) : editor === "text" ? (
+      <>
+        <div
+          data-slot="table-cell-display"
+          role="button"
+          tabindex="-1"
+          aria-label={`Edit ${label}`}
+          class={cn(affordance, "cursor-text group-data-[state=editing]/cell:hidden group-data-[state=saving]/cell:hidden group-data-[state=error]/cell:hidden", align === "right" && "justify-end")}
+        >
+          <div class="min-w-0 flex-1">
+            <span data-slot="table-cell-value" class={cn("block truncate", !textValue && "text-muted-foreground font-normal")}>
+              {textValue || placeholder}
+            </span>
+            {subtitle && <span class="block truncate text-xs leading-4 font-normal text-muted-foreground">{subtitle}</span>}
+          </div>
+          <Pencil class={affordanceIcon} aria-hidden="true" />
+        </div>
+        <div
+          data-slot="table-cell-editor"
+          class="-mx-2 hidden items-center gap-1 group-data-[state=editing]/cell:flex group-data-[state=saving]/cell:flex group-data-[state=error]/cell:flex"
+        >
+          <Input
+            data-table-input
+            size="sm"
+            type={inputType}
+            value={textValue}
+            aria-label={label}
+            required={required}
+            pattern={pattern}
+            minlength={minLength}
+            maxlength={maxLength}
+            class={cn("min-w-24 flex-1", align === "right" && "text-right")}
+          />
+          <Button data-table-action="confirm" variant="ghost" size="icon-sm" aria-label="Save" class="text-primary">
+            <Check class="group-data-[state=saving]/cell:hidden" aria-hidden="true" />
+            <Spinner class="hidden group-data-[state=saving]/cell:block" aria-label="Saving" />
+          </Button>
+          <Button data-table-action="cancel" variant="ghost" size="icon-sm" aria-label="Cancel">
+            <X aria-hidden="true" />
+          </Button>
+        </div>
+      </>
+    ) : editor === "combobox" ? (
+      <>
+        <button
+          type="button"
+          data-slot="table-cell-display"
+          tabindex="-1"
+          aria-label={`Edit ${label}`}
+          class={cn(affordance, "cursor-pointer group-data-[state=editing]/cell:hidden")}
+        >
+          <span data-slot="table-cell-value" class={cn("truncate", !textValue && "text-muted-foreground font-normal")}>
+            {textValue || placeholder}
+          </span>
+          <ChevronDown class={affordanceIcon} aria-hidden="true" />
+        </button>
+        <div data-slot="table-cell-editor" class="-mx-2 hidden group-data-[state=editing]/cell:block">
+          <Combobox data-table-combobox defaultValue={values[0]} autoHighlight>
+            <ComboboxInput size="sm" placeholder={`Search ${label.toLowerCase()}…`} aria-label={label} class="w-full min-w-40" />
+            <ComboboxContent align="start">
+              <ComboboxList>
+                {options.map((o) => (
+                  <ComboboxItem value={o.value} label={o.label}>{o.label}</ComboboxItem>
+                ))}
+              </ComboboxList>
+              <ComboboxEmpty>No results</ComboboxEmpty>
+            </ComboboxContent>
+          </Combobox>
+        </div>
+      </>
+    ) : (
+      <DropdownMenu
+        data-table-menu
+        defaultValue={editor === "select" ? values[0] ?? null : undefined}
+        defaultValues={editor === "multiselect" ? values : undefined}
+        closeOnSelect={editor === "select"}
+        class="-mx-2 max-w-[calc(100%+1rem)]"
+      >
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            data-slot="table-cell-display"
+            tabindex="-1"
+            aria-label={`Edit ${label}`}
+            class={cn(affordance, "mx-0 cursor-pointer group-data-[state=saving]/cell:opacity-60")}
+          >
+            <span data-slot="table-cell-value" class="inline-flex min-w-0 items-center gap-1">
+              {visible.map((o) => <Badge size="sm" variant={o.variant ?? "secondary"}>{o.label}</Badge>)}
+              {overflow > 0 && <Badge size="sm" variant="outline">+{overflow}</Badge>}
+              {selected.length === 0 && <span class="text-muted-foreground font-normal">{placeholder}</span>}
+            </span>
+            <ChevronDown class={affordanceIcon} aria-hidden="true" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent class="w-auto min-w-44">
+          {
+            editor === "select" ? (
+              <DropdownMenuRadioGroup>
+                {options.map((o) => (
+                  <DropdownMenuRadioItem value={o.value}>
+                    <Badge size="sm" variant={o.variant ?? "secondary"}>{o.label}</Badge>
+                  </DropdownMenuRadioItem>
+                ))}
+              </DropdownMenuRadioGroup>
+            ) : (
+              options.map((o) => (
+                <DropdownMenuCheckboxItem value={o.value} defaultChecked={values.includes(o.value)}>
+                  <Badge size="sm" variant={o.variant ?? "secondary"}>{o.label}</Badge>
+                </DropdownMenuCheckboxItem>
+              ))
+            )
+          }
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+  }
+  {
+    !readOnly && editor !== "text" && (
+      <template data-slot="table-cell-templates">
+        {options.map((o) =>
+          usesBadges ? (
+            <Badge data-option={o.value} size="sm" variant={o.variant ?? "secondary"}>{o.label}</Badge>
+          ) : (
+            <span data-option={o.value}>{o.label}</span>
+          ),
+        )}
+        {usesBadges && <Badge data-option-overflow size="sm" variant="outline">+0</Badge>}
+      </template>
+    )
+  }
+  {
+    !readOnly && (
+      <div
+        data-slot="table-cell-error"
+        role="alert"
+        hidden
+        class="fixed z-50 max-w-64 rounded-md bg-destructive px-2 py-1 text-xs font-medium whitespace-normal text-destructive-foreground shadow-md"
+      />
+    )
+  }
+</td>

package/src/components/table/TableEmpty.astro

@@ -0,0 +1,17 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props {
+  /** Number of columns to span. */
+  colspan: number;
+  class?: string;
+}
+
+const { colspan, class: className = "" } = Astro.props as Props;
+---
+
+<tr data-slot="table-empty" class="bg-background">
+  <td colspan={colspan} class={cn("h-40 border-b border-border px-6 text-center text-sm text-muted-foreground", className)}>
+    <slot>No results.</slot>
+  </td>
+</tr>

package/src/components/table/TableFolderCell.astro

@@ -0,0 +1,38 @@
+---
+import { ChevronRight, Folder, FolderOpen } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+import { cellBase, levelIndentStyle } from "./table-cell-variants";
+
+interface Props extends HTMLAttributes<"td"> {
+  class?: string;
+  column?: string;
+  /** Nesting level (1–3). Match the parent `TableRow` `level`. */
+  level?: 1 | 2 | 3;
+}
+
+const { class: className = "", column, level, ...rest } = Astro.props as Props;
+---
+
+<td
+  data-slot="table-cell"
+  data-column={column}
+  data-folder-cell
+  style={levelIndentStyle(level)}
+  class={cn(cellBase, "h-12 py-2 font-medium", className)}
+  {...rest}
+>
+  <div class="flex items-center gap-1.5">
+    <button
+      type="button"
+      data-slot="table-row-toggle"
+      aria-label="Expand row"
+      class="-ml-1 inline-flex size-6 shrink-0 items-center justify-center rounded-md outline-none hover:bg-background-hover focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      <ChevronRight class="size-4 transition-transform group-data-[expanded]/row:rotate-90" aria-hidden="true" />
+    </button>
+    <Folder class="size-4 shrink-0 group-data-[expanded]/row:hidden" aria-hidden="true" />
+    <FolderOpen class="hidden size-4 shrink-0 group-data-[expanded]/row:block" aria-hidden="true" />
+    <span class="truncate"><slot /></span>
+  </div>
+</td>

package/src/components/table/TableFooter.astro

@@ -14,7 +14,7 @@ const {
 
 <tfoot
   data-slot="table-footer"
-  class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+  class={cn("font-medium [&_tr]:bg-muted [&_tr]:hover:bg-muted [&_td]:font-semibold", className)}
   {...rest}
 >
   <slot />

package/src/components/table/TableHead.astro

@@ -1,21 +1,90 @@
 ---
+import { ArrowDown, ArrowUp, ArrowUpDown } from "@lucide/astro";
 import { cn } from "@cl-light-ds/ui/lib/utils";
 import type { HTMLAttributes } from "astro/types";
+import { cellAlign, cellBase, type CellAlign } from "./table-cell-variants";
+
+type SortDirection = "asc" | "desc" | "none";
 
 interface Props extends HTMLAttributes<"th"> {
   class?: string;
+  /** Column key. Used by sorting, resize/hide and pinned columns, and matched against `TableCell` `column`. */
+  column?: string;
+  /** Renders the header label as a sort button (cycles asc → desc → none). */
+  sortable?: boolean;
+  /** Initial sort direction for this column. */
+  sort?: SortDirection;
+  align?: CellAlign;
+  /** Shows a drag handle to resize the column. */
+  resizable?: boolean;
+  /** Initial column width, e.g. "240px". */
+  width?: string;
 }
 
 const {
   class: className = "",
+  column,
+  sortable = false,
+  sort = "none",
+  align = "left",
+  resizable = false,
+  width,
   ...rest
 } = Astro.props as Props;
+
+const ariaSort =
+  sortable ? (sort === "asc" ? "ascending" : sort === "desc" ? "descending" : "none") : undefined;
 ---
 
 <th
   data-slot="table-head"
-  class={cn("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
+  data-column={column}
+  data-sortable={sortable ? "" : undefined}
+  data-sort={sortable ? sort : undefined}
+  data-align={align}
+  aria-sort={ariaSort}
+  scope="col"
+  style={width ? `width: ${width}; min-width: ${width}` : undefined}
+  class={cn(
+    cellBase,
+    cellAlign({ align }),
+    "group/th h-11 bg-muted text-xs font-semibold text-foreground uppercase",
+    "group-data-[sticky-header]/table:sticky group-data-[sticky-header]/table:top-0 group-data-[sticky-header]/table:z-10 data-[pinned]:z-20 data-[pinned]:bg-muted",
+    "[&:has([type=checkbox])]:w-15 [&:has([type=checkbox])]:text-center",
+    className,
+  )}
   {...rest}
 >
-  <slot />
+  {
+    sortable ? (
+      <button
+        type="button"
+        data-slot="table-sort-button"
+        class={cn(
+          "-mx-1.5 inline-flex w-[calc(100%+0.75rem)] items-center justify-between gap-2 rounded-md px-1.5 py-1 uppercase",
+          "cursor-pointer outline-none hover:bg-background-hover focus-visible:ring-2 focus-visible:ring-ring",
+          "disabled:cursor-default disabled:hover:bg-transparent",
+          align === "right" && "flex-row-reverse",
+        )}
+      >
+        <span class="truncate"><slot /></span>
+        <span class="shrink-0 [&_svg]:size-3.5 [button:disabled_&]:hidden" aria-hidden="true">
+          <ArrowUpDown class="text-muted-foreground group-data-[sort=asc]/th:hidden group-data-[sort=desc]/th:hidden group-has-[button:hover]/th:text-foreground" />
+          <ArrowUp class="hidden text-primary group-data-[sort=asc]/th:block" />
+          <ArrowDown class="hidden text-primary group-data-[sort=desc]/th:block" />
+        </span>
+      </button>
+    ) : (
+      <slot />
+    )
+  }
+  {
+    resizable && (
+      <span
+        data-slot="table-resize-handle"
+        aria-hidden="true"
+        class="absolute top-0 right-0 z-[1] h-full w-1.5 cursor-col-resize touch-none select-none after:absolute after:inset-y-2 after:right-0.5 after:w-px after:bg-border hover:after:w-0.5 hover:after:bg-primary"
+      />
+    )
+  }
 </th>

package/src/components/table/TableHeader.astro

@@ -12,6 +12,6 @@ const {
 } = Astro.props as Props;
 ---
 
-<thead data-slot="table-header" class={cn("[&_tr]:border-b", className)} {...rest}>
+<thead data-slot="table-header" class={cn("", className)} {...rest}>
   <slot />
 </thead>

package/src/components/table/TablePagination.astro

@@ -0,0 +1,57 @@
+---
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+import { Button } from "../button";
+import { ButtonGroup } from "../button-group";
+import { NativeSelect, NativeSelectOption } from "../native-select";
+
+interface Props extends HTMLAttributes<"nav"> {
+  class?: string;
+  /** Current page, 1-based. */
+  page?: number;
+  pageSize?: number;
+  totalCount: number;
+  pageSizes?: number[];
+}
+
+const {
+  class: className = "",
+  page = 1,
+  pageSize = 10,
+  totalCount,
+  pageSizes = [10, 25, 50],
+  ...rest
+} = Astro.props as Props;
+
+const pageCount = Math.max(1, Math.ceil(totalCount / pageSize));
+const from = totalCount === 0 ? 0 : (page - 1) * pageSize + 1;
+const to = Math.min(page * pageSize, totalCount);
+---
+
+<nav
+  data-slot="table-pagination"
+  aria-label="Pagination"
+  data-page={page}
+  data-page-size={pageSize}
+  data-total-count={totalCount}
+  class={cn("flex flex-wrap items-center justify-between gap-4 px-6 py-3 text-sm text-muted-foreground", className)}
+  {...rest}
+>
+  <p data-slot="table-pagination-summary">Showing {from}–{to} of {totalCount}</p>
+  <div class="flex flex-wrap items-center gap-4">
+    <label class="flex items-center gap-2">
+      <span>Rows per page</span>
+      <NativeSelect size="sm" data-table-page-size aria-label="Rows per page">
+        {pageSizes.map((s) => <NativeSelectOption value={String(s)} selected={s === pageSize}>{s}</NativeSelectOption>)}
+      </NativeSelect>
+    </label>
+    <span data-slot="table-pagination-status" class="text-foreground">Page {page} of {pageCount}</span>
+    <ButtonGroup>
+      <Button variant="outline" size="icon-sm" data-table-page="first" aria-label="First page" disabled={page <= 1}><ChevronsLeft /></Button>
+      <Button variant="outline" size="icon-sm" data-table-page="prev" aria-label="Previous page" disabled={page <= 1}><ChevronLeft /></Button>
+      <Button variant="outline" size="icon-sm" data-table-page="next" aria-label="Next page" disabled={page >= pageCount}><ChevronRight /></Button>
+      <Button variant="outline" size="icon-sm" data-table-page="last" aria-label="Last page" disabled={page >= pageCount}><ChevronsRight /></Button>
+    </ButtonGroup>
+  </div>
+</nav>

package/src/components/table/TableRow.astro

@@ -4,17 +4,48 @@ import type { HTMLAttributes } from "astro/types";
 
 interface Props extends HTMLAttributes<"tr"> {
   class?: string;
+  /** Stable id reported in `table:selection`, `table:edit` and `table:toggle-row` events. */
+  rowId?: string;
+  /** Row id of the parent folder row. Rows under a collapsed parent are hidden. */
+  parentId?: string;
+  /** Nesting level (1–3) for tree tables. */
+  level?: 1 | 2 | 3;
+  /** Marks a folder row that can expand/collapse its children. */
+  folder?: boolean;
+  /** Initial expanded state of a folder row. */
+  expanded?: boolean;
+  /** Initial selected state. Pair with a checked `TableSelectCell`. */
+  selected?: boolean;
 }
 
 const {
   class: className = "",
+  rowId,
+  parentId,
+  level,
+  folder = false,
+  expanded = false,
+  selected = false,
   ...rest
 } = Astro.props as Props;
 ---
 
 <tr
   data-slot="table-row"
-  class={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)}
+  data-row-id={rowId}
+  data-parent-id={parentId}
+  data-level={level}
+  data-folder={folder ? "" : undefined}
+  data-expanded={folder && expanded ? "" : undefined}
+  data-state={selected ? "selected" : undefined}
+  aria-level={level}
+  aria-expanded={folder ? String(expanded) : undefined}
+  aria-selected={selected ? "true" : undefined}
+  class={cn(
+    "group/row bg-background transition-colors",
+    "[tbody_&]:hover:bg-table-row-hover data-[state=selected]:bg-table-row-selected [tbody_&]:data-[state=selected]:hover:bg-table-row-selected",
+    className,
+  )}
   {...rest}
 >
   <slot />

package/src/components/table/TableSelectAllBanner.astro

@@ -0,0 +1,34 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  /** Plural noun for the rows, e.g. "invoices". */
+  noun?: string;
+}
+
+const { class: className = "", noun = "results", ...rest } = Astro.props as Props;
+const linkClass =
+  "cursor-pointer rounded-sm font-semibold text-primary outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring";
+---
+
+<div
+  data-slot="table-select-all-banner"
+  hidden
+  class={cn("items-center justify-center gap-2 border-b border-border bg-muted/60 px-4 py-2 text-sm [&:not([hidden])]:flex", className)}
+  {...rest}
+>
+  <span data-banner-page>
+    All <span data-slot="table-page-count">0</span> rows on this page are selected.
+  </span>
+  <button type="button" data-banner-page data-table-action="select-all-results" class={linkClass}>
+    Select all <span data-slot="table-total-count">0</span> {noun}
+  </button>
+  <span data-banner-all hidden>
+    All <span data-slot="table-total-count">0</span> {noun} are selected.
+  </span>
+  <button type="button" data-banner-all hidden data-table-action="clear-selection" class={linkClass}>
+    Clear selection
+  </button>
+</div>