@classic-homes/theme-svelte 1.25.1 → 1.26.0

package/dist/lib/components/NumberInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { cn } from '../utils.js';
-  import { generateId, computeDescribedBy } from '../utils/form.js';
+  import { computeDescribedBy } from '../utils/form.js';
   import Label from './Label.svelte';
 
   interface Props {
@@ -57,9 +57,9 @@
     class: className,
   }: Props = $props();
 
-  // Generate unique IDs for accessibility
-  const randomSuffix = generateId('number-input').split('-').pop();
-  const componentId = $derived(id || `number-input-${randomSuffix}`);
+  // Generate unique IDs for accessibility ($props.id() is SSR-stable)
+  const uid = $props.id();
+  const componentId = $derived(id || `number-input-${uid}`);
   const hintId = $derived(`${componentId}-hint`);
   const errorId = $derived(`${componentId}-error`);
 
@@ -148,115 +148,21 @@
   );
 
   const displayValue = $derived(value !== null ? String(value) : '');
-
-  // Determine if we need a container wrapper
-  const hasWrapper = $derived(!!label || !!hint || !!error);
 </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('relative flex items-center', className)}>
-      {#if showStepper}
-        <button
-          type="button"
-          onclick={decrement}
-          disabled={disabled || !canDecrement}
-          class={cn(
-            'flex h-10 w-10 items-center justify-center rounded-l-md border border-r-0 border-input bg-background text-foreground text-sm font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
-            error && 'border-destructive'
-          )}
-          aria-label="Decrease value"
-        >
-          <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"
-          >
-            <path d="M5 12h14" />
-          </svg>
-        </button>
-      {/if}
-
-      <input
-        type="text"
-        inputmode="decimal"
-        value={displayValue}
-        {placeholder}
-        {disabled}
-        {readonly}
-        {required}
-        {name}
-        id={componentId}
-        class={cn(
-          'flex h-10 w-full bg-background px-3 py-2 text-base sm:text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-          showStepper ? 'border-y border-input' : 'border border-input rounded-md',
-          error && 'border-destructive focus-visible:ring-destructive'
-        )}
-        oninput={handleInput}
-        onblur={handleBlur}
-        onkeydown={handleKeyDown}
-        aria-invalid={error ? 'true' : undefined}
-        aria-describedby={describedBy}
-      />
-
-      {#if showStepper}
-        <button
-          type="button"
-          onclick={increment}
-          disabled={disabled || !canIncrement}
-          class={cn(
-            'flex h-10 w-10 items-center justify-center rounded-r-md border border-l-0 border-input bg-background text-foreground text-sm font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
-            error && 'border-destructive'
-          )}
-          aria-label="Increase value"
-        >
-          <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"
-          >
-            <path d="M5 12h14" />
-            <path d="M12 5v14" />
-          </svg>
-        </button>
+<!-- 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}
-    </div>
-
-    {#if hint && !error}
-      <p id={hintId} class="text-sm text-muted-foreground">
-        {hint}
-      </p>
-    {/if}
+    </Label>
+  {/if}
 
-    {#if error}
-      <p id={errorId} class="text-sm text-destructive" role="alert" aria-live="polite">
-        {error}
-      </p>
-    {/if}
-  </div>
-{:else}
   <div class={cn('relative flex items-center', className)}>
     {#if showStepper}
       <button
@@ -335,4 +241,16 @@
       </button>
     {/if}
   </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>

package/dist/lib/components/OTPInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { cn } from '../utils.js';
-  import { generateId, computeDescribedBy } from '../utils/form.js';
+  import { untrack } from 'svelte';
+  import { computeDescribedBy } from '../utils/form.js';
   import Label from './Label.svelte';
   import LiveRegion from './LiveRegion.svelte';
 
@@ -49,9 +50,9 @@
     class: className,
   }: Props = $props();
 
-  // Generate unique IDs for accessibility
-  const randomSuffix = generateId('otp').split('-').pop();
-  const componentId = $derived(id || `otp-${randomSuffix}`);
+  // Generate unique IDs for accessibility ($props.id() is SSR-stable)
+  const uid = $props.id();
+  const componentId = $derived(id || `otp-${uid}`);
   const hintId = $derived(`${componentId}-hint`);
   const errorId = $derived(`${componentId}-error`);
 
@@ -60,14 +61,32 @@
 
   let inputs: HTMLInputElement[] = $state([]);
 
-  // Split value into individual digits, ensuring we always have `length` elements
-  const digits = $derived.by(() => {
-    const arr = value.split('').slice(0, length);
-    // Pad array to always have `length` elements
-    while (arr.length < length) {
-      arr.push('');
-    }
+  // One entry per cell. The cells, not `value`, are the source of truth for
+  // what is shown, so clearing a middle cell leaves a gap instead of shifting
+  // the later digits left, and a digit typed into a later cell stays there.
+  // `value` is the filled cells joined in order.
+  let digits = $state<string[]>(untrack(() => toCells(value, length)));
+
+  function toCells(str: string, len: number): string[] {
+    const arr = str.split('').slice(0, len);
+    while (arr.length < len) arr.push('');
     return arr;
+  }
+
+  function compact(cells: string[]): string {
+    return cells.join('').slice(0, length);
+  }
+
+  // Re-seed the cells when `value` or `length` changes from outside (a reset,
+  // a programmatic fill). Our own writes keep compact(digits) === value, so
+  // they leave the cells, gaps included, alone.
+  $effect(() => {
+    const next = value;
+    const len = length;
+    untrack(() => {
+      if (digits.length === len && compact(digits) === next) return;
+      digits = toCells(next, len);
+    });
   });
 
   // Pattern for input validation
@@ -88,11 +107,13 @@
   let announcement = $state('');
 
   function updateValue(newDigits: string[]) {
-    // Filter out empty strings and join to get actual value
-    const newValue = newDigits
-      .filter((d) => d !== '')
-      .join('')
-      .slice(0, length);
+    digits = newDigits;
+    const newValue = compact(newDigits);
+    // The DOM `value` of a cell isn't reset when its digit doesn't change
+    // (e.g. a rejected key), so write every cell back explicitly.
+    newDigits.forEach((d, i) => {
+      if (inputs[i] && inputs[i].value !== d) inputs[i].value = d;
+    });
     value = newValue;
     onValueChange?.(newValue);
 
@@ -110,7 +131,15 @@
     const target = e.target as HTMLInputElement;
     const inputValue = target.value;
 
-    if (!inputValue) return;
+    if (!inputValue) {
+      // The browser cleared the cell (e.g. cut, or IME); mirror it
+      if (digits[index]) {
+        const newDigits = [...digits];
+        newDigits[index] = '';
+        updateValue(newDigits);
+      }
+      return;
+    }
 
     // Handle paste of multiple characters
     if (inputValue.length > 1) {
@@ -206,78 +235,25 @@
     const target = e.target as HTMLInputElement;
     target.select();
   }
-
-  // Determine if we need a container wrapper
-  const hasWrapper = $derived(!!label || !!hint || !!error);
 </script>
 
-{#if hasWrapper}
-  <div class="space-y-2">
-    {#if label}
-      <Label for={`${componentId}-0`} {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('flex gap-1.5 sm:gap-2', className)}
-      role="group"
-      aria-label={label || 'One-time password input'}
-      aria-describedby={describedBy}
-    >
-      {#each { length } as _, index}
-        <input
-          bind:this={inputs[index]}
-          type="text"
-          inputmode={inputMode}
-          maxlength="1"
-          {pattern}
-          {disabled}
-          value={digits[index] || ''}
-          id={`${componentId}-${index}`}
-          oninput={(e) => handleInput(index, e)}
-          onkeydown={(e) => handleKeyDown(index, e)}
-          onpaste={handlePaste}
-          onfocus={handleFocus}
-          class={cn(
-            'h-10 w-10 text-base sm:h-12 sm:w-12 sm:text-lg text-center font-semibold rounded-md border border-input bg-background text-foreground ring-offset-background transition-colors',
-            '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-label={`Digit ${index + 1} of ${length}`}
-          aria-invalid={error ? 'true' : undefined}
-          autocomplete="one-time-code"
-        />
-      {/each}
-    </div>
-
-    <!-- Hidden input for form submission -->
-    {#if name}
-      <input type="hidden" {name} {value} />
-    {/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>
-{:else}
+<!-- One structure regardless of label/hint/error, so a cell holding focus is
+     never remounted when an error appears. -->
+<div class="space-y-2">
+  {#if label}
+    <Label for={`${componentId}-0`} {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('flex gap-1.5 sm:gap-2', className)}
     role="group"
-    aria-label="One-time password input"
+    aria-label={label || 'One-time password input'}
     aria-describedby={describedBy}
   >
     {#each { length } as _, index}
@@ -311,7 +287,19 @@
   {#if name}
     <input type="hidden" {name} {value} />
   {/if}
-{/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={announcement} politeness="polite" />

package/dist/lib/components/Select.svelte

@@ -137,9 +137,6 @@
     onValueChange?.(newValue);
   }
 
-  // Determine if we need a container wrapper
-  const hasWrapper = $derived(!!label || !!hint || !!error);
-
   // Common trigger classes
   const triggerClasses = $derived(
     cn(
@@ -270,32 +267,30 @@
   </SelectPrimitive.Root>
 {/snippet}
 
-{#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}
+<!-- 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}
 
-    {@render selectRoot(fallbackAriaLabel)}
+  {@render selectRoot(fallbackAriaLabel)}
 
-    {#if hint && !error}
-      <p id={hintId} class="text-sm text-muted-foreground">
-        {hint}
-      </p>
-    {/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>
-{:else}
-  {@render selectRoot(fallbackAriaLabel)}
-{/if}
+  {#if error}
+    <p id={errorId} class="text-sm text-destructive" role="alert" aria-live="polite">
+      {error}
+    </p>
+  {/if}
+</div>

package/dist/lib/components/Signature.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { untrack } from 'svelte';
+  import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
   import { cn } from '../utils.js';
   import { tv, type VariantProps } from 'tailwind-variants';
   import type {
@@ -28,7 +29,7 @@
       labelText: 'text-sm font-medium leading-none',
       modeToggle: 'inline-flex items-center rounded-lg bg-muted p-1',
       modeButton:
-        'inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium',
+        'inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
       modeButtonActive: 'bg-background text-foreground shadow-sm',
       modeButtonInactive: 'text-muted-foreground hover:text-foreground',
       // A white pad, like the exported image, so the default black ink stays
@@ -46,7 +47,8 @@
         'h-2 w-20 cursor-pointer appearance-none rounded-full bg-muted accent-primary',
       typeInput: 'w-full',
       fontPicker: 'flex flex-wrap gap-2',
-      fontButton: 'rounded-lg border-2 px-3 py-2 text-lg hover:border-primary',
+      fontButton:
+        'rounded-lg border-2 px-3 py-2 text-lg hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
       fontButtonSelected: 'border-primary bg-primary/5',
       fontButtonUnselected: 'border-input',
       consent: 'flex items-start gap-2',
@@ -119,7 +121,12 @@
     minStrokeLength?: number;
     /** Minimum characters for typed signature */
     minTypedLength?: number;
-    /** Custom validation function */
+    /**
+     * Extra validation, run on each new signature value once the built-in
+     * checks (strokes / typed length) pass. Return `{ valid: false, error }`
+     * to reject it: the error shows under the pad like the built-in ones and
+     * onComplete does not fire. onValueChange still receives the value.
+     */
     validate?: (data: SignatureData) => SignatureValidationResult;
 
     /** Whether to show consent checkbox */
@@ -443,17 +450,26 @@
   }
 
   // Load Google Font
+  // Families already requested, so a font is fetched once however many times
+  // loadFont runs before its first load resolves (plain Set: not reactive)
+  const fontsRequested = new Set<string>();
+
   async function loadFont(font: SignatureFont): Promise<void> {
-    if (fontsLoaded.has(font.family)) return;
+    if (fontsLoaded.has(font.family) || fontsRequested.has(font.family)) return;
+    fontsRequested.add(font.family);
     if (!font.googleFont) {
       fontsLoaded = new Set([...fontsLoaded, font.family]);
       return;
     }
 
-    const link = document.createElement('link');
-    link.href = `https://fonts.googleapis.com/css2?family=${font.family.replace(/\s+/g, '+')}&display=swap`;
-    link.rel = 'stylesheet';
-    document.head.appendChild(link);
+    const href = `https://fonts.googleapis.com/css2?family=${font.family.replace(/\s+/g, '+')}&display=swap`;
+    // Another Signature on the page may have added it already
+    if (![...document.head.querySelectorAll('link')].some((l) => l.href === href)) {
+      const link = document.createElement('link');
+      link.href = href;
+      link.rel = 'stylesheet';
+      document.head.appendChild(link);
+    }
 
     // Wait for font to load
     await document.fonts.load(`48px "${font.family}"`);
@@ -725,10 +741,22 @@
       return;
     }
 
+    // Built-in checks first (an initial typedName never went through an
+    // input handler), then the consumer's check on the generated value
+    runValidation();
     const data = await generateSignatureData();
     value = data;
     onValueChange?.(data);
 
+    if (customValidate && validationResult.valid) {
+      const result = customValidate(data);
+      if (!result.valid) {
+        validationResult = { valid: false, error: result.error };
+        completeFired = false;
+        return;
+      }
+    }
+
     // Only fire onComplete once per valid signature
     if (isValid && hasSignature && !completeFired) {
       completeFired = true;
@@ -804,8 +832,11 @@
 
   // Effects
   $effect(() => {
-    // Load all fonts on mount
-    fonts.forEach((font) => loadFont(font));
+    // Load all fonts on mount (and when the list changes). untrack: loadFont
+    // reads and writes fontsLoaded, which would otherwise re-run this effect
+    // once per loaded font and request every font again.
+    const list = fonts;
+    untrack(() => list.forEach((font) => loadFont(font)));
   });
 
   $effect(() => {
@@ -880,34 +911,26 @@
     {/if}
 
     {#if showModeToggle}
-      <div class={styles.modeToggle()} role="radiogroup" aria-label="Signature input method">
-        <button
-          type="button"
-          role="radio"
-          aria-checked={mode === 'draw'}
-          class={cn(
-            styles.modeButton(),
-            mode === 'draw' ? styles.modeButtonActive() : styles.modeButtonInactive()
-          )}
-          onclick={() => setMode('draw')}
-          {disabled}
-        >
-          Draw
-        </button>
-        <button
-          type="button"
-          role="radio"
-          aria-checked={mode === 'type'}
-          class={cn(
-            styles.modeButton(),
-            mode === 'type' ? styles.modeButtonActive() : styles.modeButtonInactive()
-          )}
-          onclick={() => setMode('type')}
-          {disabled}
-        >
-          Type
-        </button>
-      </div>
+      <RadioGroupPrimitive.Root
+        value={mode}
+        onValueChange={(v) => setMode(v as 'draw' | 'type')}
+        {disabled}
+        orientation="horizontal"
+        aria-label="Signature input method"
+        class={styles.modeToggle()}
+      >
+        {#each [{ value: 'draw', label: 'Draw' }, { value: 'type', label: 'Type' }] as option (option.value)}
+          <RadioGroupPrimitive.Item
+            value={option.value}
+            class={cn(
+              styles.modeButton(),
+              mode === option.value ? styles.modeButtonActive() : styles.modeButtonInactive()
+            )}
+          >
+            {option.label}
+          </RadioGroupPrimitive.Item>
+        {/each}
+      </RadioGroupPrimitive.Root>
     {/if}
   </div>
 
@@ -1009,12 +1032,23 @@
         aria-invalid={error ? 'true' : undefined}
       />
 
-      <div class={styles.fontPicker()} role="listbox" aria-label="Select signature font">
-        {#each fonts as font}
-          <button
-            type="button"
-            role="option"
-            aria-selected={selectedFont === font.family}
+      <!-- Single choice: a radio group (arrow keys move and select). Each
+           option is named by its font, not the preview text it shows. -->
+      <RadioGroupPrimitive.Root
+        value={selectedFont}
+        onValueChange={(family) => {
+          const font = fonts.find((f) => f.family === family);
+          if (font && family !== selectedFont) selectFont(font);
+        }}
+        {disabled}
+        orientation="horizontal"
+        aria-label="Signature font"
+        class={styles.fontPicker()}
+      >
+        {#each fonts as font (font.family)}
+          <RadioGroupPrimitive.Item
+            value={font.family}
+            aria-label={font.label}
             class={cn(
               styles.fontButton(),
               selectedFont === font.family
@@ -1022,13 +1056,11 @@
                 : styles.fontButtonUnselected()
             )}
             style="font-family: '{font.family}', cursive;"
-            onclick={() => selectFont(font)}
-            {disabled}
           >
             {typedName || 'Preview'}
-          </button>
+          </RadioGroupPrimitive.Item>
         {/each}
-      </div>
+      </RadioGroupPrimitive.Root>
     </div>
   {/if}
 

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

@@ -40,7 +40,12 @@ interface Props {
     minStrokeLength?: number;
     /** Minimum characters for typed signature */
     minTypedLength?: number;
-    /** Custom validation function */
+    /**
+     * Extra validation, run on each new signature value once the built-in
+     * checks (strokes / typed length) pass. Return `{ valid: false, error }`
+     * to reject it: the error shows under the pad like the built-in ones and
+     * onComplete does not fire. onValueChange still receives the value.
+     */
     validate?: (data: SignatureData) => SignatureValidationResult;
     /** Whether to show consent checkbox */
     showConsent?: boolean;