@classic-homes/theme-svelte 1.22.0 → 1.22.2

package/dist/lib/components/Select.svelte

@@ -41,6 +41,10 @@
     error?: string;
     /** Hint text displayed below the select */
     hint?: string;
+    /** Accessible name for the trigger, when there is no visible label */
+    'aria-label'?: string;
+    /** ID of an element that labels the trigger */
+    'aria-labelledby'?: string;
   }
 
   let {
@@ -56,6 +60,8 @@
     id,
     error,
     hint,
+    'aria-label': ariaLabelProp,
+    'aria-labelledby': ariaLabelledby,
   }: Props = $props();
 
   // Generate unique IDs for accessibility using sequential counter
@@ -68,11 +74,16 @@
   // Compute aria-describedby based on hint and error
   const describedBy = $derived.by(() => {
     const ids: string[] = [];
-    if (hint) ids.push(hintId);
+    // The hint is not rendered while an error shows
+    if (hint && !error) ids.push(hintId);
     if (error) ids.push(errorId);
     return ids.length > 0 ? ids.join(' ') : undefined;
   });
 
+  const fallbackAriaLabel = $derived(
+    ariaLabelProp ?? (!label && !id && !ariaLabelledby ? placeholder : undefined)
+  );
+
   // Validate props in development
   $effect(() => {
     validateNonEmptyArray(options, 'options', 'Select');
@@ -81,7 +92,7 @@
   // Accessibility: warn if no label is associated in dev mode
   if (DEV) {
     $effect(() => {
-      if (!label && !id) {
+      if (!label && !id && !ariaLabelProp && !ariaLabelledby) {
         console.warn(
           '[Select] Missing accessible label. Provide a label prop or an id with a matching <label for="...">.'
         );
@@ -209,7 +220,7 @@
       collisionPadding={8}
       avoidCollisions={true}
     >
-      <div class="p-1 max-h-[300px] overflow-y-auto">
+      <div class="p-1 max-h-72 overflow-y-auto">
         {#each options as item}
           {#if isGroup(item)}
             <SelectPrimitive.Group>
@@ -229,6 +240,8 @@
   </SelectPrimitive.Portal>
 {/snippet}
 
+<!-- The placeholder is only a last-resort name: an aria-label would override
+     an external <label for={id}> or aria-labelledby. -->
 {#snippet selectRoot(ariaLabel: string | undefined)}
   <SelectPrimitive.Root
     type="single"
@@ -243,6 +256,7 @@
       id={componentId}
       class={triggerClasses}
       aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
       aria-invalid={error ? 'true' : undefined}
       aria-describedby={describedBy}
     >
@@ -268,7 +282,7 @@
       </Label>
     {/if}
 
-    {@render selectRoot(!label ? placeholder : undefined)}
+    {@render selectRoot(fallbackAriaLabel)}
 
     {#if hint && !error}
       <p id={hintId} class="text-sm text-muted-foreground">
@@ -283,5 +297,5 @@
     {/if}
   </div>
 {:else}
-  {@render selectRoot(placeholder)}
+  {@render selectRoot(fallbackAriaLabel)}
 {/if}

package/dist/lib/components/Select.svelte.d.ts

@@ -32,6 +32,10 @@ interface Props {
     error?: string;
     /** Hint text displayed below the select */
     hint?: string;
+    /** Accessible name for the trigger, when there is no visible label */
+    'aria-label'?: string;
+    /** ID of an element that labels the trigger */
+    'aria-labelledby'?: string;
 }
 declare const Select: import("svelte").Component<Props, {}, "value">;
 type Select = ReturnType<typeof Select>;

package/dist/lib/components/Signature.svelte

@@ -31,7 +31,9 @@
         'inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium',
       modeButtonActive: 'bg-background text-foreground shadow-sm',
       modeButtonInactive: 'text-muted-foreground hover:text-foreground',
-      canvasContainer: 'relative w-full overflow-hidden rounded-lg border bg-background',
+      // A white pad, like the exported image, so the default black ink stays
+      // visible in dark mode.
+      canvasContainer: 'relative w-full overflow-hidden rounded-lg border bg-white',
       canvas: 'block w-full cursor-crosshair touch-none',
       toolbar: 'flex flex-wrap items-center gap-2',
       toolButton:
@@ -88,7 +90,7 @@
     /** Default typed name for type mode */
     typedName?: string;
 
-    /** Stroke color (default: currentColor) */
+    /** Stroke color (default: #000000, drawn on a white pad to match the export) */
     strokeColor?: string;
     /** Stroke width in pixels */
     strokeWidth?: number;
@@ -222,8 +224,11 @@
   );
   let fontsLoaded = $state<Set<string>>(new Set());
 
-  // Consent state (untrack to intentionally capture initial value only)
+  // Consent state, kept in step with the bindable prop both ways
   let consented = $state(untrack(() => initialConsented));
+  $effect(() => {
+    consented = initialConsented;
+  });
 
   // Validation state
   let validationResult = $state<SignatureValidationResult>({ valid: false });
@@ -661,7 +666,10 @@
   function handlePointerUp(e: PointerEvent): void {
     if (!isDrawing || !currentStroke || disabled) return;
 
-    canvas.releasePointerCapture(e.pointerId);
+    // After pointercancel the capture is already gone and release would throw
+    if (canvas.hasPointerCapture?.(e.pointerId)) {
+      canvas.releasePointerCapture(e.pointerId);
+    }
     isDrawing = false;
     currentStroke.endTime = Date.now();
 
@@ -732,6 +740,8 @@
   function handleConsentChange(e: Event): void {
     const target = e.target as HTMLInputElement;
     consented = target.checked;
+    // Write back so bind:consented reflects the checkbox
+    initialConsented = consented;
     onConsentChange?.(consented);
     updateValue();
   }
@@ -915,6 +925,7 @@
       onpointerdown={handlePointerDown}
       onpointermove={handlePointerMove}
       onpointerup={handlePointerUp}
+      onpointercancel={handlePointerUp}
       onpointerleave={handlePointerLeave}
       onkeydown={handleKeyDown}
     ></canvas>

package/dist/lib/components/Signature.svelte.d.ts

@@ -14,7 +14,7 @@ interface Props {
     showModeToggle?: boolean;
     /** Default typed name for type mode */
     typedName?: string;
-    /** Stroke color (default: currentColor) */
+    /** Stroke color (default: #000000, drawn on a white pad to match the export) */
     strokeColor?: string;
     /** Stroke width in pixels */
     strokeWidth?: number;

package/dist/lib/components/Skeleton.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
 declare const Skeleton: import("svelte").Component<HTMLAttributes<HTMLDivElement> & {
-    variant?: "default" | "button" | "text" | "title" | "avatar" | "card" | undefined;
+    variant?: "text" | "default" | "button" | "title" | "avatar" | "card" | undefined;
     /** Animation style for the skeleton */
     animation?: "pulse" | "shimmer" | "none";
     class?: string;

package/dist/lib/components/Slider.svelte

@@ -7,23 +7,25 @@
 
   const sliderVariants = tv({
     slots: {
-      root: 'relative flex w-full touch-none select-none items-center',
-      range: 'absolute h-full bg-primary rounded-full',
+      root: 'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:flex-col',
+      // Vertical: bits-ui positions the range by top/bottom, so drop h-full
+      range:
+        'absolute h-full bg-primary rounded-full data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-full',
       thumb:
         "block rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 relative after:absolute after:left-1/2 after:top-1/2 after:h-11 after:w-11 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:content-['']",
     },
     variants: {
       size: {
         sm: {
-          root: 'h-1.5',
+          root: 'h-1.5 data-[orientation=vertical]:w-1.5',
           thumb: 'h-4 w-4',
         },
         md: {
-          root: 'h-2',
+          root: 'h-2 data-[orientation=vertical]:w-2',
           thumb: 'h-5 w-5',
         },
         lg: {
-          root: 'h-3',
+          root: 'h-3 data-[orientation=vertical]:w-3',
           thumb: 'h-6 w-6',
         },
       },
@@ -140,7 +142,6 @@
     onValueChange={handleValueChange}
     onValueCommit={handleValueCommit}
     class={cn(styles.root(), 'rounded-full bg-muted')}
-    aria-describedby={describedBy}
   >
     <SliderPrimitive.Range class={styles.range()} />
     {#each value as thumbValue, i}
@@ -152,6 +153,7 @@
         aria-valuemin={min}
         aria-valuemax={max}
         aria-valuetext={formatValue(thumbValue)}
+        aria-describedby={describedBy}
       />
     {/each}
   </SliderPrimitive.Root>

package/dist/lib/components/Tabs.svelte

@@ -79,23 +79,21 @@
     updateScrollShadows();
   });
 
-  // Create a reactive object for context
-  // Initialize with empty values - the effect will set them immediately
-  const tabsState = $state({ activeTab: '', tabsId: '' });
-
-  // Keep context state in sync with props (runs immediately and on changes)
-  $effect(() => {
-    tabsState.activeTab = value;
-    tabsState.tabsId = id;
+  // Context for TabPanel children. Getters read the props directly, so the
+  // active panel is right on the first render and during SSR (an $effect
+  // would only fill it in after hydration).
+  setContext('tabs', {
+    get activeTab() {
+      return value;
+    },
+    get tabsId() {
+      return id;
+    },
   });
 
-  // Set up context for TabPanel children (done once at component init)
-  setContext('tabs', tabsState);
-
   function selectTab(tabId: string) {
     if (tabs.find((t) => t.id === tabId && t.disabled)) return;
     value = tabId;
-    tabsState.activeTab = tabId;
     onValueChange?.(tabId);
   }
 

package/dist/lib/components/Toast.svelte

@@ -6,17 +6,17 @@
 
   type ToastType = 'success' | 'error' | 'warning' | 'info';
 
+  // Status tokens (light/dark aware) over an opaque card surface: the tint is a
+  // ::before layer so the toast never shows the page through it, and text stays
+  // foreground-on-card for contrast in both modes.
   const toastVariants = tv({
-    base: 'group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-lg border p-4 shadow-lg transition-all',
+    base: "group pointer-events-auto relative isolate flex w-full items-start gap-3 overflow-hidden rounded-lg border bg-card p-4 text-card-foreground shadow-lg transition-all before:absolute before:inset-0 before:-z-10 before:content-['']",
     variants: {
       type: {
-        success:
-          'bg-green-50 text-green-800 border-green-200 dark:bg-green-900/20 dark:text-green-400 dark:border-green-800',
-        error:
-          'bg-red-50 text-red-800 border-red-200 dark:bg-red-900/20 dark:text-red-400 dark:border-red-800',
-        warning:
-          'bg-yellow-50 text-yellow-800 border-yellow-200 dark:bg-yellow-900/20 dark:text-yellow-400 dark:border-yellow-800',
-        info: 'bg-blue-50 text-blue-800 border-blue-200 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-800',
+        success: 'border-success/40 before:bg-success/10',
+        error: 'border-destructive/40 before:bg-destructive/10',
+        warning: 'border-warning/40 before:bg-warning/10',
+        info: 'border-info/40 before:bg-info/10',
       },
     },
     defaultVariants: {
@@ -36,10 +36,10 @@
   };
 
   const iconColors: Record<ToastType, string> = {
-    success: 'text-green-500 dark:text-green-400',
-    error: 'text-red-500 dark:text-red-400',
-    warning: 'text-yellow-500 dark:text-yellow-400',
-    info: 'text-blue-500 dark:text-blue-400',
+    success: 'text-success',
+    error: 'text-destructive',
+    warning: 'text-warning',
+    info: 'text-info',
   };
 
   interface Props {

package/dist/lib/components/data-table/DataTableColumnVisibility.svelte

@@ -7,7 +7,6 @@
    */
   import type { DataTableInstance } from './createDataTable.svelte.js';
   import DropdownMenu from '../DropdownMenu.svelte';
-  import Button from '../Button.svelte';
   import { cn } from '../../utils.js';
 
   interface Props {
@@ -19,13 +18,13 @@
 
   let { table, class: className }: Props = $props();
 
-  // Build menu items with checkmarks for visible columns
+  // One checkbox item per column, checked while the column is visible
   const menuItems = $derived.by(() => {
     return table.allColumns.map((column) => {
-      const isVisible = !table.hiddenColumns.has(column.id);
       return {
         type: 'item' as const,
-        label: `${isVisible ? '✓ ' : '   '}${column.header}`,
+        label: column.header,
+        checked: !table.hiddenColumns.has(column.id),
         onSelect: () => {
           table.toggleColumnVisibility(column.id);
         },
@@ -35,32 +34,31 @@
 </script>
 
 <div class={cn('relative', className)}>
+  <!-- DropdownMenu renders the trigger <button>; style it via triggerVariant
+       rather than nesting a Button inside it. -->
   <DropdownMenu
     items={[{ type: 'label', label: 'Toggle columns' }, { type: 'separator' }, ...menuItems]}
+    triggerVariant="outline"
+    triggerSize="sm"
+    triggerClass="ml-auto"
   >
     {#snippet trigger()}
-      <Button variant="outline" size="sm" class="ml-auto" aria-label="Toggle column visibility">
-        <svg
-          class="mr-2 h-4 w-4"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          stroke-width="2"
-          aria-hidden="true"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-          />
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-          />
-        </svg>
-        Columns
-      </Button>
+      <svg
+        class="mr-2 h-4 w-4"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-width="2"
+        aria-hidden="true"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+        />
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+      </svg>
+      Columns
     {/snippet}
   </DropdownMenu>
 </div>

package/dist/lib/components/data-table/DataTableEditableCell.svelte

@@ -6,6 +6,7 @@
    * Supports text, number, and select inputs.
    * Works with the native Svelte 5 DataTable implementation.
    */
+  import { tick } from 'svelte';
   import type { DataTableColumn } from './types.js';
   import type { DataTableRow } from './createDataTable.svelte.js';
   import { cn } from '../../utils.js';
@@ -29,6 +30,7 @@
 
   let isEditing = $state(false);
   let editValue = $state<string>('');
+  let buttonEl = $state<HTMLButtonElement | null>(null);
 
   // Get the current display value
   const displayValue = $derived.by(() => {
@@ -70,13 +72,21 @@
     editValue = '';
   }
 
+  // After a keyboard save/cancel the input is gone; return focus to the cell.
+  async function refocusCell() {
+    await tick();
+    buttonEl?.focus();
+  }
+
   function handleKeydown(e: KeyboardEvent) {
     if (e.key === 'Enter') {
       e.preventDefault();
       saveEdit();
+      refocusCell();
     } else if (e.key === 'Escape') {
       e.preventDefault();
       cancelEdit();
+      refocusCell();
     } else if (e.key === 'Tab') {
       saveEdit();
     }
@@ -91,29 +101,32 @@
   }
 </script>
 
-{#if isEditable}
+{#if isEditable && isEditing}
+  <!-- The input sits beside, not inside, the button: an input in a button is
+       invalid, and its Enter would bubble to the button and reopen the editor. -->
+  <div class={cn('relative w-full', className)}>
+    <input
+      use:autofocus
+      type="text"
+      value={editValue}
+      oninput={(e: Event) => (editValue = (e.target as HTMLInputElement).value)}
+      onkeydown={handleKeydown}
+      onblur={handleBlur}
+      class="h-7 w-full rounded border border-input bg-background px-2 text-base sm:text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+    />
+  </div>
+{:else if isEditable}
   <button
+    bind:this={buttonEl}
     type="button"
     class={cn('relative w-full text-left hover:bg-muted-hover', className)}
     ondblclick={handleDoubleClick}
-    onkeydown={(e: KeyboardEvent) => !isEditing && e.key === 'Enter' && startEditing()}
+    onkeydown={(e: KeyboardEvent) => e.key === 'Enter' && startEditing()}
   >
-    {#if isEditing}
-      <input
-        use:autofocus
-        type="text"
-        value={editValue}
-        oninput={(e: Event) => (editValue = (e.target as HTMLInputElement).value)}
-        onkeydown={handleKeydown}
-        onblur={handleBlur}
-        class="h-7 w-full rounded border border-input bg-background px-2 text-base sm:text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-      />
-    {:else}
-      <span class="border-b border-dashed border-transparent hover:border-primary">
-        {displayValue}
-      </span>
-      <span class="sr-only">(double-click to edit)</span>
-    {/if}
+    <span class="border-b border-dashed border-transparent hover:border-primary">
+      {displayValue}
+    </span>
+    <span class="sr-only">(double-click to edit)</span>
   </button>
 {:else}
   <span class={cn('relative', className)}>

package/dist/lib/components/data-table/DataTableEditableCell.svelte.d.ts

@@ -1,10 +1,3 @@
-/**
-   * DataTableEditableCell - Inline editable cell component
-   *
-   * Allows users to edit cell values in place.
-   * Supports text, number, and select inputs.
-   * Works with the native Svelte 5 DataTable implementation.
-   */
 import type { DataTableColumn } from './types.js';
 import type { DataTableRow } from './createDataTable.svelte.js';
 declare function $$render<T extends object>(): {

package/dist/lib/components/data-table/DataTablePagination.svelte

@@ -28,6 +28,9 @@
     class: className,
   }: Props = $props();
 
+  const uid = $props.id();
+  const pageSizeLabelId = `datatable-page-size-${uid}`;
+
   function handlePageSizeChange(value: string) {
     table.setPageSize(Number(value));
   }
@@ -45,8 +48,9 @@
   <div class="flex flex-wrap items-center gap-x-4 gap-y-2 sm:gap-x-6 lg:gap-x-8">
     <!-- Page size selector -->
     <div class="flex items-center gap-2">
-      <span class="text-sm text-muted-foreground">Rows per page</span>
+      <span id={pageSizeLabelId} class="text-sm text-muted-foreground">Rows per page</span>
       <Select
+        aria-labelledby={pageSizeLabelId}
         value={String(table.pageSize)}
         options={pageSizeOptions.map((size) => ({
           value: String(size),

package/dist/lib/components/data-table/DataTableVirtual.svelte

@@ -14,6 +14,9 @@
    * ```svelte
    * <DataTableVirtual {table} height="600px" rowHeight={48} />
    * ```
+   *
+   * Create the table with `enablePagination: false` so `table.rows` holds every
+   * row rather than one page.
    */
   import type { DataTableInstance, DataTableRow } from './createDataTable.svelte.js';
   import type { DataTableColumn } from './types.js';
@@ -96,12 +99,6 @@
     }
   }
 
-  // Handle row selection
-  function handleSelectRow(rowId: string, e: MouseEvent) {
-    e.stopPropagation();
-    table.toggleRowSelection(rowId);
-  }
-
   // Handle header click for sorting
   function handleHeaderClick(columnId: string, sortable: boolean | undefined) {
     if (!sortable) return;
@@ -184,7 +181,7 @@
                 checked={row.isSelected}
                 onCheckedChange={() => table.toggleRowSelection(row.id)}
                 aria-label={`Select row ${index + 1}`}
-                onclick={(e: MouseEvent) => handleSelectRow(row.id, e)}
+                onclick={(e: MouseEvent) => e.stopPropagation()}
               />
             </div>
           {/if}

package/dist/lib/components/data-table/DataTableVirtual.svelte.d.ts

@@ -13,6 +13,9 @@
    * ```svelte
    * <DataTableVirtual {table} height="600px" rowHeight={48} />
    * ```
+   *
+   * Create the table with `enablePagination: false` so `table.rows` holds every
+   * row rather than one page.
    */
 import type { DataTableInstance } from './createDataTable.svelte.js';
 declare function $$render<T extends object>(): {

package/dist/lib/components/data-table/createDataTable.svelte.d.ts

@@ -32,7 +32,7 @@ export interface DataTableOptions<T> {
     data: T[];
     /** Column definitions */
     columns: DataTableColumn<T>[];
-    /** Get unique row ID (defaults to index) */
+    /** Get unique row ID (defaults to the row's index in `data`) */
     getRowId?: (row: T, index: number) => string;
     /** Initial sort column ID */
     initialSortColumn?: string;
@@ -54,6 +54,11 @@ export interface DataTableOptions<T> {
     manualFiltering?: boolean;
     /** Use server-side pagination (skip client-side pagination) */
     manualPagination?: boolean;
+    /**
+     * Slice rows into pages (default true). Set false to get every row in
+     * `rows`, e.g. for a DataTable without a pager or for DataTableVirtual.
+     */
+    enablePagination?: boolean;
     /** Total page count (required for manual pagination) */
     pageCount?: number;
     /** Callback when sort changes */

package/dist/lib/components/data-table/createDataTable.svelte.js

@@ -162,16 +162,26 @@ export function createDataTable(optionsFn) {
         : Math.ceil(totalRows / pageSize) || 1);
     // Clamp pageIndex when data changes
     const clampedPageIndex = $derived(Math.min(Math.max(0, pageIndex), Math.max(0, totalPages - 1)));
-    const paginatedData = $derived(options.manualPagination
+    const paginatedData = $derived(options.manualPagination || options.enablePagination === false
         ? sortedData // In manual mode, data is already paginated from server
         : sortedData.slice(clampedPageIndex * pageSize, (clampedPageIndex + 1) * pageSize));
     // === ROW HELPERS ===
-    const rows = $derived(paginatedData.map((row, index) => {
-        const globalIndex = options.manualPagination ? index : clampedPageIndex * pageSize + index;
-        const id = getRowId(row, globalIndex);
+    // Index of each row in the source data, so row ids (and with them the
+    // selection) follow the row rather than its position after sort/filter/page.
+    const sourceIndex = $derived.by(() => {
+        const map = new Map();
+        data.forEach((row, i) => {
+            if (!map.has(row))
+                map.set(row, i);
+        });
+        return map;
+    });
+    const rows = $derived(paginatedData.map((row) => {
+        const index = sourceIndex.get(row) ?? -1;
+        const id = getRowId(row, index);
         return {
             id,
-            index: globalIndex,
+            index,
             original: row,
             isSelected: selectedRows.has(id),
         };
@@ -248,14 +258,17 @@ export function createDataTable(optionsFn) {
     }
     function nextPage() {
         if (clampedPageIndex < totalPages - 1) {
-            pageIndex = clampedPageIndex + 1;
-            options.onPaginationChange?.({ pageIndex: clampedPageIndex + 1, pageSize });
+            // Read before assigning: clampedPageIndex recomputes from pageIndex.
+            const next = clampedPageIndex + 1;
+            pageIndex = next;
+            options.onPaginationChange?.({ pageIndex: next, pageSize });
         }
     }
     function previousPage() {
         if (clampedPageIndex > 0) {
-            pageIndex = clampedPageIndex - 1;
-            options.onPaginationChange?.({ pageIndex: clampedPageIndex - 1, pageSize });
+            const previous = clampedPageIndex - 1;
+            pageIndex = previous;
+            options.onPaginationChange?.({ pageIndex: previous, pageSize });
         }
     }
     function firstPage() {

package/dist/lib/components/layout/AppShell.svelte

@@ -64,7 +64,7 @@
   <!-- Skip Link for Accessibility -->
   <a
     href="#{skipToId}"
-    class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[100] focus:rounded-md focus:bg-primary focus:px-4 focus:py-2 focus:text-primary-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+    class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-80 focus:rounded-md focus:bg-primary focus:px-4 focus:py-2 focus:text-primary-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
   >
     {skipToText}
   </a>