@classic-homes/theme-svelte 0.1.52 → 0.1.54

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

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Whether loading is active */
+    loading?: boolean;
+    /** Which indicator to show */
+    variant?: 'spinner' | 'logo' | 'progress' | 'skeleton';
+    /** Positioning mode */
+    mode?: 'fullscreen' | 'overlay' | 'inline';
+    /** Indicator size */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Loading message text */
+    message?: string;
+    /** Progress value for progress variant */
+    progress?: number;
+    /** Backdrop blur (overlay/fullscreen) */
+    blur?: boolean;
+    /** Fully opaque background */
+    opaque?: boolean;
+    /** Delay in ms before showing */
+    delay?: number;
+    /** Additional CSS classes */
+    class?: string;
+    /** Content behind overlay */
+    children?: Snippet;
+    [key: string]: unknown;
+}
+declare const LoadingOverlay: import("svelte").Component<Props, {}, "">;
+type LoadingOverlay = ReturnType<typeof LoadingOverlay>;
+export default LoadingOverlay;

package/dist/lib/components/LoadingPage.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import LoadingLogo from './LoadingLogo.svelte';
+  import Spinner from './Spinner.svelte';
+  import ProgressBar from './ProgressBar.svelte';
+
+  interface Props {
+    /** Whether loading is active */
+    loading?: boolean;
+    /** Loading message text */
+    message?: string;
+    /** Determinate progress value */
+    progress?: number;
+    /** Show branded LoadingLogo */
+    showLogo?: boolean;
+    /** Logo color variant */
+    logoVariant?: 'light' | 'dark';
+    /** Delay before showing (prevents flash) */
+    delay?: number;
+    /** Additional CSS classes */
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    loading = true,
+    message,
+    progress,
+    showLogo = true,
+    logoVariant = 'dark',
+    delay = 200,
+    class: className,
+    ...restProps
+  }: Props = $props();
+
+  let visible = $state(false);
+
+  $effect(() => {
+    if (!loading) {
+      visible = false;
+      return;
+    }
+
+    if (delay === 0) {
+      visible = true;
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      visible = true;
+    }, delay);
+
+    return () => clearTimeout(timer);
+  });
+</script>
+
+{#if visible}
+  <div
+    role="status"
+    aria-live="polite"
+    class={cn(
+      'fixed inset-0 z-50 flex flex-col items-center justify-center bg-background',
+      className
+    )}
+    {...restProps}
+  >
+    {#if showLogo}
+      <LoadingLogo loading width={64} height={64} variant={logoVariant} />
+    {:else}
+      <Spinner size="xl" />
+    {/if}
+
+    {#if progress !== undefined}
+      <ProgressBar value={progress} class="mt-6 w-48 max-w-full" />
+    {/if}
+
+    {#if message}
+      <p class="mt-4 text-sm text-muted-foreground animate-pulse-subtle">{message}</p>
+    {/if}
+
+    <span class="sr-only">
+      {message || 'Loading'}
+      {#if progress !== undefined}, {Math.round(progress)}% complete{/if}
+    </span>
+  </div>
+{/if}

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

@@ -0,0 +1,20 @@
+interface Props {
+    /** Whether loading is active */
+    loading?: boolean;
+    /** Loading message text */
+    message?: string;
+    /** Determinate progress value */
+    progress?: number;
+    /** Show branded LoadingLogo */
+    showLogo?: boolean;
+    /** Logo color variant */
+    logoVariant?: 'light' | 'dark';
+    /** Delay before showing (prevents flash) */
+    delay?: number;
+    /** Additional CSS classes */
+    class?: string;
+    [key: string]: unknown;
+}
+declare const LoadingPage: import("svelte").Component<Props, {}, "">;
+type LoadingPage = ReturnType<typeof LoadingPage>;
+export default LoadingPage;

package/dist/lib/components/LoadingSection.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import LoadingOverlay from './LoadingOverlay.svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Whether loading is active */
+    loading?: boolean;
+    /** Indicator type */
+    variant?: 'spinner' | 'skeleton' | 'logo' | 'progress';
+    /** Loading message */
+    message?: string;
+    /** Progress value */
+    progress?: number;
+    /** Minimum height to preserve layout */
+    minHeight?: string;
+    /** Backdrop blur */
+    blur?: boolean;
+    /** Delay before showing */
+    delay?: number;
+    /** Additional CSS classes */
+    class?: string;
+    /** Content being loaded */
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    loading = false,
+    variant = 'spinner',
+    message,
+    progress,
+    minHeight = '12rem',
+    blur = true,
+    delay = 0,
+    class: className,
+    children,
+    ...restProps
+  }: Props = $props();
+</script>
+
+<div
+  class={cn('relative', className)}
+  style="min-height: {minHeight}"
+  aria-busy={loading}
+  {...restProps}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+  {#if loading}
+    <LoadingOverlay mode="overlay" {variant} {message} {progress} {blur} {delay} />
+  {/if}
+</div>

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

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Whether loading is active */
+    loading?: boolean;
+    /** Indicator type */
+    variant?: 'spinner' | 'skeleton' | 'logo' | 'progress';
+    /** Loading message */
+    message?: string;
+    /** Progress value */
+    progress?: number;
+    /** Minimum height to preserve layout */
+    minHeight?: string;
+    /** Backdrop blur */
+    blur?: boolean;
+    /** Delay before showing */
+    delay?: number;
+    /** Additional CSS classes */
+    class?: string;
+    /** Content being loaded */
+    children?: Snippet;
+    [key: string]: unknown;
+}
+declare const LoadingSection: import("svelte").Component<Props, {}, "">;
+type LoadingSection = ReturnType<typeof LoadingSection>;
+export default LoadingSection;

package/dist/lib/components/MultiSelect.svelte

@@ -4,6 +4,7 @@
   import { generateId, computeDescribedBy } from '../utils/form.js';
   import Spinner from './Spinner.svelte';
   import Label from './Label.svelte';
+  import LiveRegion from './LiveRegion.svelte';
 
   export interface MultiSelectOption {
     value: string;
@@ -138,6 +139,23 @@
 
   // 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...';
+    if (!open) return '';
+    if (filteredOptions.length === 0) return emptyMessage;
+    const count = filteredOptions.length;
+    const selectedCount = value.length;
+    let message = `${count} ${count === 1 ? 'option' : 'options'} available`;
+    if (selectedCount > 0) {
+      message += `, ${selectedCount} selected`;
+    }
+    if (maxReached) {
+      message += `, maximum selections reached`;
+    }
+    return message;
+  });
 </script>
 
 {#if hasWrapper}
@@ -241,7 +259,7 @@
                   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 transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
+                  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}
@@ -374,7 +392,7 @@
                 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 transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
+                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}
@@ -405,3 +423,6 @@
     </ComboboxPrimitive.Root>
   </div>
 {/if}
+
+<!-- Live region for screen reader announcements -->
+<LiveRegion message={resultsAnnouncement} politeness="polite" />

package/dist/lib/components/NumberInput.svelte

@@ -159,7 +159,7 @@
           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-sm font-medium transition-colors 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',
+            'flex h-10 w-10 items-center justify-center rounded-l-md border border-r-0 border-input bg-background 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"
@@ -208,7 +208,7 @@
           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-sm font-medium transition-colors 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',
+            'flex h-10 w-10 items-center justify-center rounded-r-md border border-l-0 border-input bg-background 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"
@@ -251,7 +251,7 @@
         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-sm font-medium transition-colors 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',
+          'flex h-10 w-10 items-center justify-center rounded-l-md border border-r-0 border-input bg-background 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"
@@ -300,7 +300,7 @@
         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-sm font-medium transition-colors 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',
+          'flex h-10 w-10 items-center justify-center rounded-r-md border border-l-0 border-input bg-background 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"

package/dist/lib/components/OTPInput.svelte

@@ -2,6 +2,7 @@
   import { cn } from '../utils.js';
   import { generateId, computeDescribedBy } from '../utils/form.js';
   import Label from './Label.svelte';
+  import LiveRegion from './LiveRegion.svelte';
 
   interface Props {
     /** Current OTP value */
@@ -83,6 +84,9 @@
   // Track if we've already fired onComplete for the current complete value
   let lastCompletedValue = $state<string | null>(null);
 
+  // Screen reader announcement for paste feedback
+  let announcement = $state('');
+
   function updateValue(newDigits: string[]) {
     // Filter out empty strings and join to get actual value
     const newValue = newDigits
@@ -188,6 +192,13 @@
       // Focus the input after the last pasted character
       const focusIndex = Math.min(chars.length, length - 1);
       inputs[focusIndex]?.focus();
+
+      // Announce paste result to screen readers
+      if (chars.length === length) {
+        announcement = `Pasted ${chars.length} digits. Code complete.`;
+      } else {
+        announcement = `Pasted ${chars.length} of ${length} digits.`;
+      }
     }
   }
 
@@ -301,3 +312,6 @@
     <input type="hidden" {name} {value} />
   {/if}
 {/if}
+
+<!-- Live region for screen reader announcements -->
+<LiveRegion message={announcement} politeness="polite" />

package/dist/lib/components/PasswordInput.svelte

@@ -17,6 +17,10 @@
     showLabel?: string;
     /** Label for the toggle button when password is visible */
     hideLabel?: string;
+    /** Screen reader announcement when password becomes visible */
+    visibleAnnouncement?: string;
+    /** Screen reader announcement when password becomes hidden */
+    hiddenAnnouncement?: string;
     [key: string]: unknown;
   }
 
@@ -33,10 +37,13 @@
     onValueChange,
     showLabel = 'Show password',
     hideLabel = 'Hide password',
+    visibleAnnouncement = 'Password is now visible',
+    hiddenAnnouncement = 'Password is now hidden',
     ...restProps
   }: Props = $props();
 
   let showPassword = $state(false);
+  let announcement = $state('');
 
   function handleInput(e: Event) {
     const target = e.target as HTMLInputElement;
@@ -46,6 +53,7 @@
 
   function toggleVisibility() {
     showPassword = !showPassword;
+    announcement = showPassword ? visibleAnnouncement : hiddenAnnouncement;
   }
 </script>
 
@@ -69,11 +77,16 @@
   />
   <button
     type="button"
-    class="absolute right-0 top-0 h-10 w-10 flex items-center justify-center text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-r-md disabled:pointer-events-none disabled:opacity-50"
+    class="absolute right-0 top-0 h-11 w-11 -mr-0.5 -mt-0.5 flex items-center justify-center text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-r-md disabled:pointer-events-none disabled:opacity-50"
     onclick={toggleVisibility}
     {disabled}
     aria-label={showPassword ? hideLabel : showLabel}
+    aria-pressed={showPassword}
   >
     <Icon name={showPassword ? 'eye-off' : 'eye'} size={18} />
   </button>
+  <!-- Screen reader live region for announcing visibility changes -->
+  <div role="status" aria-live="polite" aria-atomic="true" class="sr-only">
+    {announcement}
+  </div>
 </div>

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

@@ -13,6 +13,10 @@ interface Props {
     showLabel?: string;
     /** Label for the toggle button when password is visible */
     hideLabel?: string;
+    /** Screen reader announcement when password becomes visible */
+    visibleAnnouncement?: string;
+    /** Screen reader announcement when password becomes hidden */
+    hiddenAnnouncement?: string;
     [key: string]: unknown;
 }
 declare const PasswordInput: import("svelte").Component<Props, {}, "value">;

package/dist/lib/components/ProgressBar.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import { tv, type VariantProps } from 'tailwind-variants';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  const progressBarVariants = tv({
+    base: 'w-full overflow-hidden rounded-full bg-muted',
+    variants: {
+      size: {
+        sm: 'h-1',
+        md: 'h-2',
+        lg: 'h-3',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  });
+
+  const progressFillVariants = tv({
+    base: 'h-full rounded-full transition-all duration-300',
+    variants: {
+      variant: {
+        default: 'bg-primary',
+        success: 'bg-success',
+        warning: 'bg-warning',
+        destructive: 'bg-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  });
+
+  type ProgressBarSizeVariants = VariantProps<typeof progressBarVariants>;
+  type ProgressBarFillVariants = VariantProps<typeof progressFillVariants>;
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Progress value 0-100. Omit for indeterminate */
+    value?: number;
+    /** Maximum value */
+    max?: number;
+    /** Bar height */
+    size?: ProgressBarSizeVariants['size'];
+    /** Fill color variant */
+    variant?: ProgressBarFillVariants['variant'];
+    /** Accessible label */
+    label?: string;
+    /** Show percentage text */
+    showValue?: boolean;
+    class?: string;
+  }
+
+  let {
+    value,
+    max = 100,
+    size = 'md',
+    variant = 'default',
+    label = 'Progress',
+    showValue = false,
+    class: className,
+    ...restProps
+  }: Props = $props();
+
+  const isIndeterminate = $derived(value === undefined);
+  const clampedValue = $derived(isIndeterminate ? 0 : Math.min(Math.max(0, value!), max));
+  const percentage = $derived(isIndeterminate ? 0 : Math.round((clampedValue / max) * 100));
+</script>
+
+<div
+  role="progressbar"
+  aria-label={label}
+  aria-valuenow={isIndeterminate ? undefined : clampedValue}
+  aria-valuemin={0}
+  aria-valuemax={max}
+  class={cn('flex items-center gap-2', className)}
+  {...restProps}
+>
+  <div class={cn(progressBarVariants({ size }))}>
+    <div
+      class={cn(
+        progressFillVariants({ variant }),
+        isIndeterminate && 'w-1/4 animate-progress-indeterminate'
+      )}
+      style={isIndeterminate ? undefined : `width: ${percentage}%`}
+    ></div>
+  </div>
+  {#if showValue && !isIndeterminate}
+    <span class="text-sm tabular-nums text-muted-foreground">{percentage}%</span>
+  {/if}
+</div>

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

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const ProgressBar: import("svelte").Component<HTMLAttributes<HTMLDivElement> & {
+    /** Progress value 0-100. Omit for indeterminate */
+    value?: number;
+    /** Maximum value */
+    max?: number;
+    /** Bar height */
+    size?: "sm" | "md" | "lg" | undefined;
+    /** Fill color variant */
+    variant?: "default" | "destructive" | "warning" | "success" | undefined;
+    /** Accessible label */
+    label?: string;
+    /** Show percentage text */
+    showValue?: boolean;
+    class?: string;
+}, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/lib/components/RadioGroup.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
-  import { cn } from '../utils.js';
-  import { generateId, computeDescribedBy } from '../utils/form.js';
+  import { cn, useId } from '../utils.js';
+  import { computeDescribedBy } from '../utils/form.js';
   import { validateNonEmptyArray } from '../validation.js';
   import Label from './Label.svelte';
 
@@ -51,9 +51,9 @@
     class: className,
   }: Props = $props();
 
-  // Generate unique IDs for accessibility
-  const randomSuffix = generateId('radio-group').split('-').pop();
-  const componentName = $derived(name || `radio-group-${randomSuffix}`);
+  // Generate unique IDs for accessibility (sequential counter, SSR-safe)
+  const generatedId = useId('radio-group');
+  const componentName = $derived(name || generatedId);
   const labelId = $derived(`${componentName}-label`);
   const hintId = $derived(`${componentName}-hint`);
   const errorId = $derived(`${componentName}-error`);

package/dist/lib/components/Select.svelte

@@ -2,6 +2,7 @@
   import { Select as SelectPrimitive } from 'bits-ui';
   import { cn, useId } from '../utils.js';
   import { validateNonEmptyArray } from '../validation.js';
+  import { DEV } from 'esm-env';
   import Label from './Label.svelte';
 
   export interface SelectOption {
@@ -76,6 +77,17 @@
     validateNonEmptyArray(options, 'options', 'Select');
   });
 
+  // Accessibility: warn if no label is associated in dev mode
+  if (DEV) {
+    $effect(() => {
+      if (!label && !id) {
+        console.warn(
+          '[Select] Missing accessible label. Provide a label prop or an id with a matching <label for="...">.'
+        );
+      }
+    });
+  }
+
   function isGroup(item: SelectOption | SelectGroup): item is SelectGroup {
     return 'options' in item;
   }
@@ -131,7 +143,7 @@
 
   // Common item classes
   const itemClasses =
-    'relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default';
+    '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';
 </script>
 
 {#snippet chevronIcon()}

package/dist/lib/components/Signature.svelte

@@ -28,14 +28,14 @@
       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 transition-colors',
+        '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',
       canvas: 'block w-full cursor-crosshair touch-none',
       toolbar: 'flex flex-wrap items-center gap-2',
       toolButton:
-        'inline-flex h-9 w-9 items-center justify-center rounded-md border border-input bg-background text-sm font-medium ring-offset-background transition-colors 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',
+        'inline-flex h-9 w-9 items-center justify-center rounded-md border border-input bg-background text-sm font-medium ring-offset-background 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',
       toolGroup: 'flex items-center gap-1.5',
       toolLabel: 'text-xs text-muted-foreground',
       colorPicker:
@@ -44,7 +44,7 @@
         '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 transition-colors hover:border-primary',
+      fontButton: 'rounded-lg border-2 px-3 py-2 text-lg hover:border-primary',
       fontButtonSelected: 'border-primary bg-primary/5',
       fontButtonUnselected: 'border-input',
       consent: 'flex items-start gap-2',
@@ -384,8 +384,8 @@
 
     return `<?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
-  ${backgroundColor === 'white' ? `<rect width="${width}" height="${height}" fill="white"/>` : ''}
-  ${paths}
+ ${backgroundColor === 'white' ? `<rect width="${width}" height="${height}" fill="white"/>` : ''}
+ ${paths}
 </svg>`;
   }
 

package/dist/lib/components/Skeleton.svelte

@@ -4,7 +4,7 @@
   import type { HTMLAttributes } from 'svelte/elements';
 
   const skeletonVariants = tv({
-    base: 'animate-pulse rounded-md bg-muted',
+    base: 'rounded-md bg-muted',
     variants: {
       variant: {
         default: '',
@@ -24,12 +24,22 @@
 
   interface Props extends HTMLAttributes<HTMLDivElement> {
     variant?: SkeletonVariants['variant'];
+    /** Animation style for the skeleton */
+    animation?: 'pulse' | 'shimmer' | 'none';
     class?: string;
   }
 
-  let { variant = 'default', class: className, ...restProps }: Props = $props();
+  let {
+    variant = 'default',
+    animation = 'pulse',
+    class: className,
+    ...restProps
+  }: Props = $props();
 
-  const classes = $derived(cn(skeletonVariants({ variant }), className));
+  const animationClass = $derived(
+    animation === 'pulse' ? 'animate-pulse' : animation === 'shimmer' ? 'animate-shimmer' : ''
+  );
+  const classes = $derived(cn(skeletonVariants({ variant }), animationClass, className));
 </script>
 
 <div class={classes} {...restProps}></div>

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

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