@happyvertical/smrt-ui 0.51.39 → 0.53.0

package/dist/components/data/ListSortSelect.svelte

@@ -0,0 +1,121 @@
+<!--
+  ListSortSelect — a "Sort by" picker for lists without column headers
+  (card lists, and tables that turn into cards on phones).
+
+  One option per column and direction, in plain words: dates read
+  "newest first / oldest first", numbers "highest first / lowest first",
+  text "A–Z / Z–A". Calls `onChange` with the chosen sort; server-sorted lists
+  navigate to `listSortHref(...)` there.
+-->
+<script lang="ts">
+import type {
+  ListSort,
+  ListSortDirection,
+  ListSortSelectColumn,
+} from './list-sort.js';
+import type { ListSortState } from './list-sort-state.svelte.js';
+
+interface Props {
+  /** Sortable columns; each gives two options, one per direction. */
+  columns: readonly ListSortSelectColumn[];
+  /** The list's sort state; supplies `sort` and `onChange`. */
+  list?: ListSortState;
+  /** Current sort of the list, when `list` is not given. */
+  sort?: ListSort;
+  /** Called with the chosen sort, when `list` is not given. */
+  onChange?: (sort: ListSort) => void;
+  /** Visible label for the picker (default "Sort by"). */
+  label?: string;
+  /** Id of the select element, tying the label to it. */
+  id?: string;
+  /** Extra class names. */
+  class?: string;
+}
+
+let {
+  columns,
+  list,
+  sort: sortProp,
+  onChange: onChangeProp,
+  label = 'Sort by',
+  id = `list-sort-${Math.random().toString(36).slice(2, 9)}`,
+  class: className = '',
+}: Props = $props();
+
+function directionWords(
+  kind: ListSortSelectColumn['kind'],
+  direction: ListSortDirection,
+): string {
+  if (kind === 'date')
+    return direction === 'desc' ? 'newest first' : 'oldest first';
+  if (kind === 'number')
+    return direction === 'desc' ? 'highest first' : 'lowest first';
+  return direction === 'asc' ? 'A–Z' : 'Z–A';
+}
+
+const sort = $derived<ListSort>(
+  list?.sort ??
+    sortProp ?? { columnId: columns[0]?.id ?? '', direction: 'desc' },
+);
+const onChange = (next: ListSort) => {
+  if (list) void list.set(next);
+  else onChangeProp?.(next);
+};
+
+const options = $derived(
+  columns.flatMap((column) => {
+    const order: ListSortDirection[] =
+      column.kind === 'date' || column.kind === 'number'
+        ? ['desc', 'asc']
+        : ['asc', 'desc'];
+    return order.map((direction) => ({
+      value: `${column.id}:${direction}`,
+      label: `${column.label}, ${directionWords(column.kind, direction)}`,
+    }));
+  }),
+);
+
+function handleChange(event: Event) {
+  const value = (event.currentTarget as HTMLSelectElement).value;
+  const separator = value.lastIndexOf(':');
+  const direction = value.slice(separator + 1);
+  if (direction !== 'asc' && direction !== 'desc') return;
+  onChange({ columnId: value.slice(0, separator), direction });
+}
+</script>
+
+<div class={`list-sort-select ${className}`}>
+  <label class="list-sort-select__label" for={id}>{label}</label>
+  <select
+    {id}
+    class="list-sort-select__control"
+    value={`${sort.columnId}:${sort.direction}`}
+    onchange={handleChange}
+  >
+    {#each options as option (option.value)}
+      <option value={option.value}>{option.label}</option>
+    {/each}
+  </select>
+</div>
+
+<style>
+  .list-sort-select {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .list-sort-select__label {
+    font-size: 0.875rem;
+    color: var(--color-text-secondary, inherit);
+    white-space: nowrap;
+  }
+  .list-sort-select__control {
+    min-height: 2.75rem;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid var(--color-border, currentColor);
+    border-radius: var(--radius-md, 0.375rem);
+    background: var(--color-surface, transparent);
+    color: inherit;
+    font: inherit;
+  }
+</style>

package/dist/components/data/ListSortSelect.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { ListSort, ListSortSelectColumn } from './list-sort.js';
+import type { ListSortState } from './list-sort-state.svelte.js';
+interface Props {
+    /** Sortable columns; each gives two options, one per direction. */
+    columns: readonly ListSortSelectColumn[];
+    /** The list's sort state; supplies `sort` and `onChange`. */
+    list?: ListSortState;
+    /** Current sort of the list, when `list` is not given. */
+    sort?: ListSort;
+    /** Called with the chosen sort, when `list` is not given. */
+    onChange?: (sort: ListSort) => void;
+    /** Visible label for the picker (default "Sort by"). */
+    label?: string;
+    /** Id of the select element, tying the label to it. */
+    id?: string;
+    /** Extra class names. */
+    class?: string;
+}
+declare const ListSortSelect: import("svelte").Component<Props, {}, "">;
+type ListSortSelect = ReturnType<typeof ListSortSelect>;
+export default ListSortSelect;
+//# sourceMappingURL=ListSortSelect.svelte.d.ts.map

package/dist/components/data/ListSortSelect.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListSortSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/data/ListSortSelect.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,QAAQ,EAER,oBAAoB,EACrB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAGjE,UAAU,KAAK;IACb,mEAAmE;IACnE,OAAO,EAAE,SAAS,oBAAoB,EAAE,CAAC;IACzC,6DAA6D;IAC7D,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwED,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/data/SortableHeader.svelte

@@ -0,0 +1,169 @@
+<!--
+  SortableHeader — a sortable column header for a hand-rolled table.
+
+  Renders the `<th>` itself so `aria-sort` sits on the column header. The
+  control inside is a link when `href` is given (server-sorted lists keep the
+  sort in the URL; build it with `listSortHref`) or a button calling `onSort`
+  (client-sorted lists; compute the next sort with `toggleListSort`) — or
+  pass a list's state (`createUrlListSort` / `createLocalListSort`) as `list`
+  and it supplies all three. Both are
+  reachable by Tab and activated with Enter (a button also with Space). The
+  indicator shows ↑/↓ on the sorted column and a faint ↕ on the others.
+
+  Use `as="div"` with `role="columnheader"` semantics for grid layouts that
+  are not a `<table>`.
+
+  Style hooks (set on the header or an ancestor): `--sortable-header-padding`
+  (the control's padding) and `--sortable-header-font-weight` (default 600;
+  `inherit` takes the surrounding head row's weight).
+-->
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import {
+  type ListSort,
+  type ListSortSpec,
+  listSortActionLabel,
+  listSortAria,
+} from './list-sort.js';
+import type { ListSortState } from './list-sort-state.svelte.js';
+
+interface Props {
+  /** Id of the column this header sorts by. */
+  columnId: string;
+  /** Column name shown in the header and used in the sort announcement. */
+  label: string;
+  /** The list's sort state; supplies `sort`, `spec`, `href`, and `onSort`. */
+  list?: ListSortState;
+  /** Current sort of the list. */
+  sort?: ListSort | null;
+  /** Link to the list sorted by this column (server-sorted lists). */
+  href?: string;
+  /** Called on activation (client-sorted lists). */
+  onSort?: (columnId: string) => void;
+  /** The list's sort spec; gives the column's first direction for the label. */
+  spec?: ListSortSpec;
+  /** Render a table `th` (default) or a `div` column header for grid layouts. */
+  as?: 'th' | 'div';
+  /** Horizontal alignment of the header content. */
+  align?: 'start' | 'center' | 'end';
+  /** Extra class names. */
+  class?: string;
+  children?: Snippet;
+}
+
+let {
+  columnId,
+  label,
+  list,
+  sort: sortProp,
+  href: hrefProp,
+  onSort: onSortProp,
+  spec: specProp,
+  as = 'th',
+  align = 'start',
+  class: className = '',
+  children,
+}: Props = $props();
+
+const sort = $derived(list ? list.sort : sortProp);
+const spec = $derived(list ? list.spec : specProp);
+const href = $derived(list ? list.href(columnId) : hrefProp);
+const onSort = $derived(
+  list ? (id: string) => void list.toggle(id) : onSortProp,
+);
+const aria = $derived(listSortAria(sort, columnId));
+const active = $derived(aria !== 'none');
+const actionLabel = $derived(listSortActionLabel(sort, columnId, label, spec));
+</script>
+
+{#snippet content()}
+  <span class="sortable-header__label">
+    {#if children}{@render children()}{:else}{label}{/if}
+  </span>
+  <span class="sortable-header__icon" class:is-active={active} aria-hidden="true">
+    {#if aria === 'ascending'}↑{:else if aria === 'descending'}↓{:else}↕{/if}
+  </span>
+{/snippet}
+
+<svelte:element
+  this={as}
+  class={`sortable-header sortable-header--${align} ${className}`}
+  class:is-sorted={active}
+  scope={as === 'th' ? 'col' : undefined}
+  role={as === 'div' ? 'columnheader' : undefined}
+  aria-sort={aria}
+  data-sort-column={columnId}
+>
+  {#if href}
+    <a
+      class="sortable-header__control"
+      {href}
+      aria-label={actionLabel}
+      data-sveltekit-noscroll
+      data-sveltekit-keepfocus
+      data-sveltekit-replacestate
+      onclick={() => onSort?.(columnId)}
+    >
+      {@render content()}
+    </a>
+  {:else}
+    <button
+      type="button"
+      class="sortable-header__control"
+      aria-label={actionLabel}
+      onclick={() => onSort?.(columnId)}
+    >
+      {@render content()}
+    </button>
+  {/if}
+</svelte:element>
+
+<style>
+  .sortable-header {
+    padding: 0;
+    font-weight: inherit;
+    text-align: start;
+  }
+  .sortable-header--center {
+    text-align: center;
+  }
+  .sortable-header--end {
+    text-align: end;
+  }
+  .sortable-header__control {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    min-height: 2.75rem;
+    width: 100%;
+    padding: var(--sortable-header-padding, 0.5rem 0.75rem);
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-weight: var(--sortable-header-font-weight, 600);
+    text-align: inherit;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .sortable-header--center .sortable-header__control {
+    justify-content: center;
+  }
+  .sortable-header--end .sortable-header__control {
+    justify-content: flex-end;
+  }
+  .sortable-header__control:hover .sortable-header__label {
+    text-decoration: underline;
+  }
+  .sortable-header__control:focus-visible {
+    outline: 2px solid var(--color-focus, var(--color-primary, currentColor));
+    outline-offset: -2px;
+  }
+  .sortable-header__icon {
+    opacity: 0.35;
+    font-size: 0.85em;
+  }
+  .sortable-header__icon.is-active {
+    opacity: 1;
+  }
+</style>

package/dist/components/data/SortableHeader.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+import { type ListSort, type ListSortSpec } from './list-sort.js';
+import type { ListSortState } from './list-sort-state.svelte.js';
+interface Props {
+    /** Id of the column this header sorts by. */
+    columnId: string;
+    /** Column name shown in the header and used in the sort announcement. */
+    label: string;
+    /** The list's sort state; supplies `sort`, `spec`, `href`, and `onSort`. */
+    list?: ListSortState;
+    /** Current sort of the list. */
+    sort?: ListSort | null;
+    /** Link to the list sorted by this column (server-sorted lists). */
+    href?: string;
+    /** Called on activation (client-sorted lists). */
+    onSort?: (columnId: string) => void;
+    /** The list's sort spec; gives the column's first direction for the label. */
+    spec?: ListSortSpec;
+    /** Render a table `th` (default) or a `div` column header for grid layouts. */
+    as?: 'th' | 'div';
+    /** Horizontal alignment of the header content. */
+    align?: 'start' | 'center' | 'end';
+    /** Extra class names. */
+    class?: string;
+    children?: Snippet;
+}
+declare const SortableHeader: import("svelte").Component<Props, {}, "">;
+type SortableHeader = ReturnType<typeof SortableHeader>;
+export default SortableHeader;
+//# sourceMappingURL=SortableHeader.svelte.d.ts.map

package/dist/components/data/SortableHeader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/data/SortableHeader.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,YAAY,EAGlB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAGjE,UAAU,KAAK;IACb,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,gCAAgC;IAChC,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,8EAA8E;IAC9E,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,+EAA+E;IAC/E,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAClB,kDAAkD;IAClD,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0DD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/data/__tests__/CollectionList.test.js

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import CollectionList from '../CollectionList.svelte';
+const items = [
+    { id: 'a', title: 'First' },
+    { id: 'b', title: 'Second' },
+];
+describe('CollectionList', () => {
+    it.each([
+        'list',
+        'divided',
+        'grid',
+        'gallery',
+    ])('renders the %s layout', (layout) => {
+        const { container } = render(CollectionList, {
+            props: { items, itemKey: 'id', title: 'title', layout },
+        });
+        expect(container.querySelector(`ul.collection--${layout}`)).not.toBeNull();
+        expect(screen.getByText('First')).toBeInTheDocument();
+    });
+    it('selects an item with its labelled checkbox', async () => {
+        const onselectionchange = vi.fn();
+        render(CollectionList, {
+            props: {
+                items,
+                itemKey: 'id',
+                title: 'title',
+                layout: 'gallery',
+                selectable: true,
+                onselectionchange,
+            },
+        });
+        await userEvent.click(screen.getByRole('checkbox', { name: 'Select Second' }));
+        expect(onselectionchange).toHaveBeenCalledWith(new Set(['b']));
+    });
+});

package/dist/components/data/__tests__/DataTable.test.js

@@ -53,6 +53,35 @@ describe('DataTable', () => {
         await userEvent.click(screen.getByRole('button', { name: 'Clear sorting for Name' }));
         expect(nameHeader).not.toHaveAttribute('aria-sort');
     });
+    it('starts a date/count column descending and toggles without clearing when not clearable', async () => {
+        render(DataTable, {
+            props: {
+                data,
+                columns: [
+                    columns[0],
+                    {
+                        id: 'age',
+                        label: 'Age',
+                        accessor: 'age',
+                        sortable: true,
+                        sortFirstDirection: 'desc',
+                    },
+                ],
+                sortable: true,
+                sortClearable: false,
+            },
+        });
+        const ageHeader = screen.getByRole('columnheader', { name: 'Age' });
+        await userEvent.click(screen.getByRole('button', { name: 'Sort Age descending' }));
+        expect(ageHeader).toHaveAttribute('aria-sort', 'descending');
+        const firstCell = () => screen.getAllByRole('row')[1]?.textContent ?? '';
+        expect(firstCell()).toContain('Linus');
+        await userEvent.click(screen.getByRole('button', { name: 'Sort Age ascending' }));
+        expect(ageHeader).toHaveAttribute('aria-sort', 'ascending');
+        expect(firstCell()).toContain('Ada');
+        await userEvent.click(screen.getByRole('button', { name: 'Sort Age descending' }));
+        expect(ageHeader).toHaveAttribute('aria-sort', 'descending');
+    });
     it('announces the next action for each rule in a multi-column sort', async () => {
         const multiSortColumns = [columns[0], { ...columns[1], sortable: true }];
         render(DataTable, {
@@ -729,3 +758,50 @@ describe('DataTable', () => {
         await expectNoA11yViolations(container);
     });
 });
+describe('DataTable phoneLayout', () => {
+    it('keeps the scrolling table unless asked for cards', () => {
+        const { container } = render(DataTable, {
+            props: { data, columns, caption: 'People' },
+        });
+        expect(container.querySelector('.data-table-container--phone-cards')).toBeNull();
+    });
+    it('marks the container for the phone card layout and keeps the table semantics', () => {
+        const { container } = render(DataTable, {
+            props: { data, columns, caption: 'People', phoneLayout: 'cards' },
+        });
+        expect(container.querySelector('.data-table-container.data-table-container--phone-cards')).not.toBeNull();
+        expect(screen.getByRole('table', { name: 'People' })).toBeInTheDocument();
+        expect(screen.getAllByRole('row')).toHaveLength(3);
+    });
+    it('gives cards explicit table roles and a visible column label per cell', async () => {
+        const { container } = render(DataTable, {
+            props: { data, columns, caption: 'People', phoneLayout: 'cards' },
+        });
+        // Explicit roles survive the block/grid restyle (WebKit drops implicit
+        // table roles once display changes).
+        expect(container.querySelector('table')).toHaveAttribute('role', 'table');
+        for (const row of container.querySelectorAll('tr')) {
+            expect(row).toHaveAttribute('role', 'row');
+        }
+        for (const header of container.querySelectorAll('thead th')) {
+            expect(header).toHaveAttribute('role', 'columnheader');
+        }
+        const cells = container.querySelectorAll('tbody td[data-column-id]');
+        expect(cells.length).toBeGreaterThan(0);
+        for (const cell of cells) {
+            expect(cell).toHaveAttribute('role', 'cell');
+            const column = columns.find((candidate) => candidate.id === cell.getAttribute('data-column-id'));
+            expect(cell).toHaveAttribute('data-label', column?.label);
+        }
+        // The header stays in the accessibility tree (visually hidden, not removed).
+        expect(screen.getAllByRole('columnheader').length).toBe(columns.length);
+        await expectNoA11yViolations(container);
+    });
+    it('adds no explicit roles or labels outside cards mode', () => {
+        const { container } = render(DataTable, {
+            props: { data, columns, caption: 'People' },
+        });
+        expect(container.querySelector('table')).not.toHaveAttribute('role');
+        expect(container.querySelector('[data-label]')).toBeNull();
+    });
+});

package/dist/components/data/__tests__/DataTableController.test.js

@@ -118,6 +118,41 @@ describe('DataTableController', () => {
             { columnId: 'age', direction: 'asc' },
         ]);
     });
+    it('starts a column at its first direction and toggles without clearing when not clearable', () => {
+        const controller = createDataTableController({ initialState: state });
+        const toggle = () => controller.dispatch({
+            type: 'toggleSorting',
+            columnId: 'age',
+            firstDirection: 'desc',
+            clearable: false,
+        });
+        toggle();
+        expect(controller.snapshot().state.sorting).toEqual([
+            { columnId: 'age', direction: 'desc' },
+        ]);
+        toggle();
+        expect(controller.snapshot().state.sorting).toEqual([
+            { columnId: 'age', direction: 'asc' },
+        ]);
+        toggle();
+        expect(controller.snapshot().state.sorting).toEqual([
+            { columnId: 'age', direction: 'desc' },
+        ]);
+        // Clearable (default) with a desc-first column: desc -> asc -> cleared.
+        const cycling = createDataTableController({ initialState: state });
+        const cycle = () => cycling.dispatch({
+            type: 'toggleSorting',
+            columnId: 'age',
+            firstDirection: 'desc',
+        });
+        cycle();
+        cycle();
+        expect(cycling.snapshot().state.sorting).toEqual([
+            { columnId: 'age', direction: 'asc' },
+        ]);
+        cycle();
+        expect(cycling.snapshot().state.sorting).toEqual([]);
+    });
     it('proposes controlled transitions without mutating until the host reconciles state', () => {
         const onStateChange = vi.fn();
         const controller = createDataTableController({ state, onStateChange });

package/dist/components/data/__tests__/DataTableResponsive.test.js

@@ -0,0 +1,80 @@
+import { render, screen, waitFor } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import DataTable from '../DataTable.svelte';
+import { createDataTableController } from '../DataTableController.js';
+import { responsiveColumns } from '../DataTableResponsive.js';
+const columns = Array.from({ length: 6 }, (_, index) => ({
+    id: `c${index}`,
+    label: `Column ${index}`,
+    responsive: { priority: index, keepVisible: index === 0 },
+    headerPath: [{ id: 'group', label: 'Group' }],
+}));
+const data = [
+    {
+        id: 'row',
+        ...Object.fromEntries(columns.map((column) => [column.id, column.label])),
+    },
+];
+async function resize(container, width) {
+    const root = container.querySelector('.data-table-container');
+    Object.defineProperty(root, 'clientWidth', {
+        configurable: true,
+        value: width,
+    });
+    window.dispatchEvent(new Event('resize'));
+    await waitFor(() => expect(root).toHaveClass(width <= 800 ? 'data-table-container--narrow' : 'data-table-container'));
+}
+describe('responsive column collapse', () => {
+    it('keeps mandatory columns and highest priorities in display order', () => {
+        expect(responsiveColumns(columns, 390, 160).map((column) => column.id)).toEqual(['c0', 'c5']);
+        expect(responsiveColumns(columns, 768, 160).map((column) => column.id)).toEqual(['c0', 'c3', 'c4', 'c5']);
+    });
+    it('handles missing metadata, equal priorities, invalid numbers, and oversized mandatory sets', () => {
+        const plain = columns.map((column) => ({
+            ...column,
+            responsive: undefined,
+        }));
+        expect(responsiveColumns(plain, 320, Number.NaN).map((column) => column.id)).toEqual(['c0', 'c1']);
+        expect(responsiveColumns([{ ...plain[0], responsive: { priority: Number.NaN } }, plain[1]], 160, 160).map((column) => column.id)).toEqual(['c0']);
+        expect(responsiveColumns(columns.map((column) => ({
+            ...column,
+            responsive: { keepVisible: true },
+        })), 100, 160)).toHaveLength(6);
+        expect(responsiveColumns([], 0, 160)).toEqual([]);
+    });
+    it('matches headers/cells/groups to container width and restores without mutating controller visibility', async () => {
+        const controller = createDataTableController({
+            initialState: { columnVisibility: [{ columnId: 'c5', visible: false }] },
+        });
+        const { container } = render(DataTable, {
+            props: {
+                data,
+                columns,
+                rowKey: 'id',
+                controller,
+                responsiveMode: 'hide-columns',
+            },
+        });
+        const visibility = controller.getState().columnVisibility;
+        await resize(container, 390);
+        await waitFor(() => expect(screen.getAllByRole('cell')).toHaveLength(2));
+        expect(screen.getByRole('columnheader', { name: 'Group' })).toHaveAttribute('colspan', '2');
+        expect(screen.queryByRole('columnheader', { name: 'Column 5' })).toBeNull();
+        expect(screen.getByRole('columnheader', { name: 'Column 4' })).toBeInTheDocument();
+        expect(controller.getState().columnVisibility).toEqual(visibility);
+        await resize(container, 1200);
+        await waitFor(() => expect(screen.getAllByRole('cell')).toHaveLength(5));
+        expect(screen.getByRole('columnheader', { name: 'Group' })).toHaveAttribute('colspan', '5');
+    });
+    it('preserves the scroll default regardless of narrow width', async () => {
+        const { container } = render(DataTable, { props: { data, columns } });
+        const root = container.querySelector('.data-table-container');
+        Object.defineProperty(root, 'clientWidth', {
+            configurable: true,
+            value: 390,
+        });
+        window.dispatchEvent(new Event('resize'));
+        await waitFor(() => expect(screen.getAllByRole('cell')).toHaveLength(6));
+        expect(root).not.toHaveClass('data-table-container--narrow');
+    });
+});