@classic-homes/theme-svelte 1.25.1 → 1.26.0

package/dist/lib/components/DateTimePicker.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Popover, Calendar } from 'bits-ui';
+  import { Popover } from 'bits-ui';
   import { tick } from 'svelte';
   import { cn } from '../utils.js';
   import { parseDate, toISOString, parseDateInput } from '../utils/date.js';
@@ -194,6 +194,99 @@
     return days;
   });
 
+  // The days split into weeks, the rows of the day grid
+  const calendarWeeks = $derived.by(() => {
+    const weeks: (number | null)[][] = [];
+    for (let i = 0; i < calendarDays.length; i += 7) {
+      const week = calendarDays.slice(i, i + 7);
+      while (week.length < 7) week.push(null);
+      weeks.push(week);
+    }
+    return weeks;
+  });
+
+  const daysInViewMonth = $derived(new Date(viewYear, viewMonth + 1, 0).getDate());
+
+  // Roving focus within the day grid: the one day with tabindex=0. Falls back
+  // to the selected day, then today, then the 1st when unset or out of range.
+  let focusedDay = $state<number | null>(null);
+  const today = new Date();
+  const activeDay = $derived.by(() => {
+    if (focusedDay !== null && focusedDay <= daysInViewMonth) return focusedDay;
+    if (value && value.getMonth() === viewMonth && value.getFullYear() === viewYear) {
+      return value.getDate();
+    }
+    if (today.getMonth() === viewMonth && today.getFullYear() === viewYear) {
+      return today.getDate();
+    }
+    return 1;
+  });
+
+  let dayGrid = $state<HTMLElement | null>(null);
+
+  function dayLabel(day: number): string {
+    return new Date(viewYear, viewMonth, day).toLocaleDateString('en-US', {
+      weekday: 'long',
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  }
+
+  function isToday(day: number): boolean {
+    return (
+      today.getDate() === day && today.getMonth() === viewMonth && today.getFullYear() === viewYear
+    );
+  }
+
+  /** Move grid focus to a date (any month), switching the view to it */
+  async function focusDate(date: Date) {
+    viewMonth = date.getMonth();
+    viewYear = date.getFullYear();
+    focusedDay = date.getDate();
+    await tick();
+    dayGrid?.querySelector<HTMLElement>(`[data-day="${focusedDay}"]`)?.focus();
+  }
+
+  // Grid keyboard model (APG date picker dialog): arrows move a day / a week,
+  // Home/End to the week's start/end, PageUp/PageDown a month (Shift: a year).
+  function handleDayKeyDown(e: KeyboardEvent, day: number) {
+    const current = new Date(viewYear, viewMonth, day);
+    const next = new Date(current);
+    switch (e.key) {
+      case 'ArrowLeft':
+        next.setDate(day - 1);
+        break;
+      case 'ArrowRight':
+        next.setDate(day + 1);
+        break;
+      case 'ArrowUp':
+        next.setDate(day - 7);
+        break;
+      case 'ArrowDown':
+        next.setDate(day + 7);
+        break;
+      case 'Home':
+        next.setDate(day - current.getDay());
+        break;
+      case 'End':
+        next.setDate(day + (6 - current.getDay()));
+        break;
+      case 'PageUp':
+      case 'PageDown': {
+        const step = (e.key === 'PageUp' ? -1 : 1) * (e.shiftKey ? 12 : 1);
+        const target = new Date(viewYear, viewMonth + step, 1);
+        const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+        next.setFullYear(target.getFullYear(), target.getMonth(), Math.min(day, lastDay));
+        break;
+      }
+      default:
+        return;
+    }
+    e.preventDefault();
+    focusDate(next);
+  }
+
   // Generate time options
   const hourOptions = $derived(
     timeFormat === '12h'
@@ -285,6 +378,7 @@
   }
 
   function prevMonth() {
+    focusedDay = null;
     if (viewMonth === 0) {
       viewMonth = 11;
       viewYear--;
@@ -294,6 +388,7 @@
   }
 
   function nextMonth() {
+    focusedDay = null;
     if (viewMonth === 11) {
       viewMonth = 0;
       viewYear++;
@@ -414,6 +509,15 @@
   ];
 
   const dayNames = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+  const fullDayNames = [
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+  ];
 </script>
 
 {#snippet pickerContent()}
@@ -499,7 +603,7 @@
                 <path d="m15 18-6-6 6-6" />
               </svg>
             </button>
-            <span class="text-sm font-medium">
+            <span id="{componentId}-month" class="text-sm font-medium" aria-live="polite">
               {monthNames[viewMonth]}
               {viewYear}
             </span>
@@ -525,39 +629,60 @@
             </button>
           </div>
 
-          <!-- Day names -->
-          <div class="grid grid-cols-7 gap-1 mb-1">
-            {#each dayNames as dayName}
-              <div
-                class="h-8 w-8 flex items-center justify-center text-xs text-muted-foreground font-medium"
-              >
-                {dayName}
-              </div>
-            {/each}
-          </div>
-
-          <!-- Calendar days -->
-          <div class="grid grid-cols-7 gap-1">
-            {#each calendarDays as day}
-              {#if day === null}
-                <div class="h-8 w-8"></div>
-              {:else}
-                <button
-                  type="button"
-                  onclick={() => selectDate(day)}
-                  disabled={isDateDisabled(day)}
-                  class={cn(
-                    'h-8 w-8 inline-flex items-center justify-center rounded-md text-sm bg-transparent',
-                    'hover:bg-accent hover:text-accent-foreground',
-                    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                    'disabled:pointer-events-none disabled:opacity-50',
-                    isDateSelected(day) &&
-                      'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground'
-                  )}
+          <!-- Day grid: a grid of weeks with one roving tab stop; arrow keys move
+               between days (see handleDayKeyDown). -->
+          <div
+            bind:this={dayGrid}
+            role="grid"
+            aria-labelledby="{componentId}-month"
+            class="flex flex-col gap-1"
+          >
+            <div role="row" class="grid grid-cols-7 gap-1 mb-1">
+              {#each dayNames as dayName, i}
+                <div
+                  role="columnheader"
+                  aria-label={fullDayNames[i]}
+                  class="h-8 w-8 flex items-center justify-center text-xs text-muted-foreground font-medium"
                 >
-                  {day}
-                </button>
-              {/if}
+                  <span aria-hidden="true">{dayName}</span>
+                </div>
+              {/each}
+            </div>
+
+            {#each calendarWeeks as week}
+              <div role="row" class="grid grid-cols-7 gap-1">
+                {#each week as day}
+                  {#if day === null}
+                    <div role="gridcell" class="h-8 w-8"></div>
+                  {:else}
+                    {@const selected = isDateSelected(day)}
+                    {@const unavailable = isDateDisabled(day)}
+                    <div role="gridcell" aria-selected={selected}>
+                      <button
+                        type="button"
+                        data-day={day}
+                        tabindex={day === activeDay ? 0 : -1}
+                        aria-label={dayLabel(day)}
+                        aria-disabled={unavailable ? 'true' : undefined}
+                        aria-current={isToday(day) ? 'date' : undefined}
+                        onclick={() => selectDate(day)}
+                        onkeydown={(e) => handleDayKeyDown(e, day)}
+                        onfocus={() => (focusedDay = day)}
+                        class={cn(
+                          'h-8 w-8 inline-flex items-center justify-center rounded-md text-sm bg-transparent',
+                          'hover:bg-accent hover:text-accent-foreground',
+                          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                          'aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:bg-transparent aria-disabled:hover:text-current',
+                          selected &&
+                            'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground'
+                        )}
+                      >
+                        {day}
+                      </button>
+                    </div>
+                  {/if}
+                {/each}
+              </div>
             {/each}
           </div>
 

package/dist/lib/components/Dialog.svelte

@@ -2,6 +2,7 @@
   import { Dialog as DialogPrimitive } from 'bits-ui';
   import { cn } from '../utils.js';
   import type { Snippet } from 'svelte';
+  import TriggerChild, { type TriggerSnippetProps } from './internal/TriggerChild.svelte';
 
   interface Props {
     /** Whether the dialog is open */
@@ -18,8 +19,13 @@
     size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
     /** Content inside the dialog */
     children: Snippet;
-    /** Optional trigger element */
-    trigger?: Snippet;
+    /**
+     * Optional trigger element. It receives `{ props }`: spread them on your
+     * own button (`{#snippet trigger({ props })}<Button {...props}>Open</Button>{/snippet}`)
+     * so that button is the trigger and gets focus back on close. A snippet
+     * that ignores them still works, wrapped in a span trigger as before.
+     */
+    trigger?: Snippet<[TriggerSnippetProps]>;
     /** Optional footer element */
     footer?: Snippet;
     /** Optional custom header content (replaces title/description) */
@@ -62,6 +68,10 @@
     onCloseAutoFocus,
   }: Props = $props();
 
+  const uid = $props.id();
+  // Changes once if the trigger snippet ignores its props (see TriggerChild)
+  let triggerId = $state(`${uid}-trigger`);
+
   function handleOpenChange(newOpen: boolean) {
     open = newOpen;
     onOpenChange?.(newOpen);
@@ -75,11 +85,9 @@
 
 <DialogPrimitive.Root bind:open onOpenChange={handleOpenChange}>
   {#if trigger}
-    <DialogPrimitive.Trigger>
+    <DialogPrimitive.Trigger id={triggerId}>
       {#snippet child({ props })}
-        <span {...props}>
-          {@render trigger()}
-        </span>
+        <TriggerChild {props} {trigger} onfallback={() => (triggerId = `${uid}-trigger-wrap`)} />
       {/snippet}
     </DialogPrimitive.Trigger>
   {/if}

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import { type TriggerSnippetProps } from './internal/TriggerChild.svelte';
 interface Props {
     /** Whether the dialog is open */
     open?: boolean;
@@ -14,8 +15,13 @@ interface Props {
     size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
     /** Content inside the dialog */
     children: Snippet;
-    /** Optional trigger element */
-    trigger?: Snippet;
+    /**
+     * Optional trigger element. It receives `{ props }`: spread them on your
+     * own button (`{#snippet trigger({ props })}<Button {...props}>Open</Button>{/snippet}`)
+     * so that button is the trigger and gets focus back on close. A snippet
+     * that ignores them still works, wrapped in a span trigger as before.
+     */
+    trigger?: Snippet<[TriggerSnippetProps]>;
     /** Optional footer element */
     footer?: Snippet;
     /** Optional custom header content (replaces title/description) */

package/dist/lib/components/FileUpload.svelte

@@ -37,8 +37,11 @@
     error?: string;
     /** Callback when files are selected */
     onFilesChange?: (files: FileMetadata[]) => void;
-    /** Callback to handle file upload (optional - if not provided, files are stored locally) */
-    onUpload?: (file: File) => Promise<FileMetadata>;
+    /**
+     * Callback to handle file upload (optional - if not provided, files are stored locally).
+     * `signal` aborts when the file is removed mid-upload; pass it to `fetch`.
+     */
+    onUpload?: (file: File, options: { signal: AbortSignal }) => Promise<FileMetadata>;
     /** Label text */
     label?: string;
     /** Hint text shown below the drop zone */
@@ -92,6 +95,13 @@
   /** Map of file IDs to their AbortControllers for cancellation */
   const uploadControllers = new Map<string, AbortController>();
 
+  /**
+   * Slots held by batches still reading previews. `files` only grows once a
+   * preview is read, so without this two quick drops could both pass the
+   * `maxFiles` check.
+   */
+  let reservedSlots = 0;
+
   const displayError = $derived(externalError || internalError);
 
   /**
@@ -274,9 +284,12 @@
 
     // Generate preview for images
     if (file.type.startsWith('image/')) {
-      metadata.url = await new Promise<string>((resolve) => {
+      // An unreadable file falls back to the icon instead of hanging the batch
+      metadata.url = await new Promise<string | undefined>((resolve) => {
         const reader = new FileReader();
         reader.onload = () => resolve(reader.result as string);
+        reader.onerror = () => resolve(undefined);
+        reader.onabort = () => resolve(undefined);
         reader.readAsDataURL(file);
       });
     } else if (file.type.startsWith('video/')) {
@@ -310,23 +323,27 @@
     internalError = undefined;
     const fileArray = Array.from(selectedFiles);
 
-    // Check max files limit
-    if (files.length + fileArray.length > maxFiles) {
+    // Check max files limit, counting batches that are still being read
+    if (files.length + reservedSlots + fileArray.length > maxFiles) {
       internalError = `Maximum ${maxFiles} files allowed`;
       return;
     }
 
     // Track upload promises for waiting on completion
     const uploadPromises: Promise<void>[] = [];
+    reservedSlots += fileArray.length;
 
     for (const file of fileArray) {
       const validationError = validateFile(file);
       if (validationError) {
         internalError = validationError;
+        reservedSlots--;
         continue;
       }
 
       const metadata = await createFileMetadata(file);
+      // The slot passes from the reservation to `files`
+      reservedSlots--;
 
       // Add file to list immediately with uploading state
       files = [...files, metadata];
@@ -338,7 +355,7 @@
 
         const uploadPromise = (async () => {
           try {
-            const result = await onUpload(file);
+            const result = await onUpload(file, { signal: controller.signal });
 
             // Check if upload was cancelled (file removed during upload)
             if (controller.signal.aborted) return;

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

@@ -30,8 +30,13 @@ interface Props {
     error?: string;
     /** Callback when files are selected */
     onFilesChange?: (files: FileMetadata[]) => void;
-    /** Callback to handle file upload (optional - if not provided, files are stored locally) */
-    onUpload?: (file: File) => Promise<FileMetadata>;
+    /**
+     * Callback to handle file upload (optional - if not provided, files are stored locally).
+     * `signal` aborts when the file is removed mid-upload; pass it to `fetch`.
+     */
+    onUpload?: (file: File, options: {
+        signal: AbortSignal;
+    }) => Promise<FileMetadata>;
     /** Label text */
     label?: string;
     /** Hint text shown below the drop zone */

package/dist/lib/components/MultiSelect.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Combobox as ComboboxPrimitive } from 'bits-ui';
   import { cn } from '../utils.js';
-  import { generateId, computeDescribedBy } from '../utils/form.js';
+  import { computeDescribedBy } from '../utils/form.js';
   import Spinner from './Spinner.svelte';
   import Label from './Label.svelte';
   import LiveRegion from './LiveRegion.svelte';
@@ -69,9 +69,9 @@
     class: className,
   }: Props = $props();
 
-  // Generate unique IDs for accessibility
-  const randomSuffix = generateId('multiselect').split('-').pop();
-  const componentId = $derived(id || `multiselect-${randomSuffix}`);
+  // Generate unique IDs for accessibility ($props.id() is SSR-stable)
+  const uid = $props.id();
+  const componentId = $derived(id || `multiselect-${uid}`);
   const hintId = $derived(`${componentId}-hint`);
   const errorId = $derived(`${componentId}-error`);
 
@@ -137,9 +137,6 @@
     };
   });
 
-  // Determine if we need a container wrapper
-  const hasWrapper = $derived(!!label || !!hint || !!error);
-
   // Generate announcement message for screen readers
   const resultsAnnouncement = $derived.by(() => {
     if (loading) return 'Loading options...';
@@ -158,155 +155,19 @@
   });
 </script>
 
-{#if hasWrapper}
-  <div class="space-y-2">
-    {#if label}
-      <Label for={componentId} {disabled}>
-        {label}
-        {#if required}
-          <span class="text-destructive ml-0.5" aria-hidden="true">*</span>
-          <span class="sr-only">(required)</span>
-        {/if}
-      </Label>
-    {/if}
-
-    <div class={cn('w-full', className)}>
-      <!-- Selected tags -->
-      {#if selectedLabels.length > 0}
-        <div class="flex flex-wrap gap-1 mb-2">
-          {#each value as selectedValue}
-            {@const labelText = options.find((o) => o.value === selectedValue)?.label}
-            {#if labelText}
-              <span
-                class="inline-flex items-center gap-1 rounded-md bg-muted px-2 py-1 text-xs font-medium text-foreground"
-              >
-                {labelText}
-                <button
-                  type="button"
-                  onclick={() => removeValue(selectedValue)}
-                  class="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
-                  {disabled}
-                  aria-label={`Remove ${labelText}`}
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  >
-                    <path d="M18 6 6 18" />
-                    <path d="m6 6 12 12" />
-                  </svg>
-                </button>
-              </span>
-            {/if}
-          {/each}
-        </div>
+<!-- One structure whether or not there is a label, hint or error, so the
+     focused control is never remounted when an error appears. -->
+<div class="space-y-2">
+  {#if label}
+    <Label for={componentId} {disabled}>
+      {label}
+      {#if required}
+        <span class="text-destructive ml-0.5" aria-hidden="true">*</span>
+        <span class="sr-only">(required)</span>
       {/if}
+    </Label>
+  {/if}
 
-      <ComboboxPrimitive.Root
-        type="multiple"
-        {disabled}
-        {required}
-        {name}
-        bind:open
-        onOpenChange={handleOpenChange}
-        onValueChange={handleValueChange}
-        {value}
-      >
-        <div class="relative">
-          <ComboboxPrimitive.Input
-            id={componentId}
-            placeholder={value.length > 0 ? `${value.length} selected` : placeholder}
-            oninput={handleSearchInput}
-            onfocus={() => (open = true)}
-            onclick={() => (open = true)}
-            class={cn(
-              'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background text-foreground px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-              error && 'border-destructive focus:ring-destructive'
-            )}
-            aria-invalid={error ? 'true' : undefined}
-            aria-describedby={describedBy}
-          />
-        </div>
-
-        <!-- Portal to <body>: escapes transformed/overflow-hidden ancestors
-             (e.g. Dialog panels) that would clip the dropdown. -->
-        <ComboboxPrimitive.Portal>
-          <ComboboxPrimitive.Content
-            class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
-            sideOffset={4}
-            collisionPadding={8}
-            avoidCollisions={true}
-          >
-            <div class="p-1 max-h-72 overflow-y-auto">
-              {#if loading}
-                <div class="flex items-center justify-center py-6">
-                  <Spinner size="sm" />
-                  <span class="ml-2 text-sm text-muted-foreground">Loading...</span>
-                </div>
-              {:else if filteredOptions.length === 0}
-                <div class="py-6 text-center text-sm text-muted-foreground">
-                  {emptyMessage}
-                </div>
-              {:else}
-                {#each filteredOptions as option}
-                  {@const isSelected = value.includes(option.value)}
-                  {@const isDisabledByMax = maxReached && !isSelected}
-                  <ComboboxPrimitive.Item
-                    value={option.value}
-                    label={option.label}
-                    disabled={option.disabled || isDisabledByMax}
-                    class="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
-                  >
-                    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-                      {#if isSelected}
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="16"
-                          height="16"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          stroke-width="2"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          class="h-4 w-4"
-                        >
-                          <polyline points="20 6 9 17 4 12" />
-                        </svg>
-                      {:else}
-                        <span class="h-3.5 w-3.5 rounded-sm border border-primary"></span>
-                      {/if}
-                    </span>
-                    {option.label}
-                  </ComboboxPrimitive.Item>
-                {/each}
-              {/if}
-            </div>
-          </ComboboxPrimitive.Content>
-        </ComboboxPrimitive.Portal>
-      </ComboboxPrimitive.Root>
-    </div>
-
-    {#if hint && !error}
-      <p id={hintId} class="text-sm text-muted-foreground">
-        {hint}
-      </p>
-    {/if}
-
-    {#if error}
-      <p id={errorId} class="text-sm text-destructive" role="alert" aria-live="polite">
-        {error}
-      </p>
-    {/if}
-  </div>
-{:else}
   <div class={cn('w-full', className)}>
     <!-- Selected tags -->
     {#if selectedLabels.length > 0}
@@ -430,7 +291,19 @@
       </ComboboxPrimitive.Portal>
     </ComboboxPrimitive.Root>
   </div>
-{/if}
+
+  {#if hint && !error}
+    <p id={hintId} class="text-sm text-muted-foreground">
+      {hint}
+    </p>
+  {/if}
+
+  {#if error}
+    <p id={errorId} class="text-sm text-destructive" role="alert" aria-live="polite">
+      {error}
+    </p>
+  {/if}
+</div>
 
 <!-- Live region for screen reader announcements -->
 <LiveRegion message={resultsAnnouncement} politeness="polite" />