@classic-homes/theme-svelte 0.1.52 → 0.1.54

package/dist/lib/components/DateTimePicker.svelte

@@ -482,7 +482,7 @@
             <button
               type="button"
               onclick={prevMonth}
-              class="h-7 w-7 inline-flex items-center justify-center rounded-md bg-transparent transition-colors duration-150 hover:bg-accent hover:text-accent-foreground"
+              class="h-7 w-7 inline-flex items-center justify-center rounded-md bg-transparent hover:bg-accent hover:text-accent-foreground"
               aria-label="Previous month"
             >
               <svg
@@ -506,7 +506,7 @@
             <button
               type="button"
               onclick={nextMonth}
-              class="h-7 w-7 inline-flex items-center justify-center rounded-md bg-transparent transition-colors duration-150 hover:bg-accent hover:text-accent-foreground"
+              class="h-7 w-7 inline-flex items-center justify-center rounded-md bg-transparent hover:bg-accent hover:text-accent-foreground"
               aria-label="Next month"
             >
               <svg
@@ -547,7 +547,7 @@
                   onclick={() => selectDate(day)}
                   disabled={isDateDisabled(day)}
                   class={cn(
-                    'h-8 w-8 inline-flex items-center justify-center rounded-md text-sm bg-transparent transition-colors duration-150',
+                    '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',
@@ -569,6 +569,7 @@
                 <select
                   bind:value={hour}
                   onchange={updateTime}
+                  aria-label="Hour"
                   class="h-8 rounded-md border border-input bg-background px-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
                 >
                   {#each hourOptions as h}
@@ -577,10 +578,11 @@
                     </option>
                   {/each}
                 </select>
-                <span class="text-muted-foreground">:</span>
+                <span class="text-muted-foreground" aria-hidden="true">:</span>
                 <select
                   bind:value={minute}
                   onchange={updateTime}
+                  aria-label="Minute"
                   class="h-8 rounded-md border border-input bg-background px-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
                 >
                   {#each minuteOptions as m}
@@ -591,6 +593,7 @@
                   <select
                     bind:value={period}
                     onchange={updateTime}
+                    aria-label="AM or PM"
                     class="h-8 rounded-md border border-input bg-background px-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
                   >
                     <option value="AM">AM</option>

package/dist/lib/components/Dialog.svelte

@@ -78,11 +78,11 @@
 
   <DialogPrimitive.Portal>
     <DialogPrimitive.Overlay
-      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="fixed inset-0 z-50 bg-foreground/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />
     <DialogPrimitive.Content
       class={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border border-black bg-background shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg overflow-hidden',
+        'fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg overflow-hidden',
         sizeClasses[size],
         className
       )}
@@ -90,7 +90,7 @@
       <!-- Header section with title and actions -->
       {#if header || title || description || headerActions || showClose}
         <div
-          class="flex items-start justify-between gap-4 border-b border-black bg-muted/30 px-6 py-4"
+          class="flex items-start justify-between gap-4 border-b border-border bg-muted/30 px-6 py-4"
         >
           <!-- Title section -->
           <div class="flex flex-col space-y-1.5 min-w-0 flex-1 overflow-hidden">
@@ -117,7 +117,7 @@
             {/if}
             {#if showClose}
               <DialogPrimitive.Close
-                class="flex h-9 w-9 items-center justify-center rounded-md bg-transparent text-muted-foreground 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"
+                class="flex h-9 w-9 items-center justify-center rounded-md bg-transparent text-muted-foreground 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"
                 aria-label="Close dialog"
               >
                 <svg
@@ -131,11 +131,11 @@
                   stroke-linecap="round"
                   stroke-linejoin="round"
                   class="h-5 w-5"
+                  aria-hidden="true"
                 >
                   <path d="M18 6 6 18" />
                   <path d="m6 6 12 12" />
                 </svg>
-                <span class="sr-only">Close</span>
               </DialogPrimitive.Close>
             {/if}
           </div>
@@ -150,7 +150,7 @@
       <!-- Footer section -->
       {#if footer}
         <div
-          class="flex flex-col-reverse border-t border-black bg-muted/30 px-6 py-4 sm:flex-row sm:justify-end sm:space-x-2"
+          class="flex flex-col-reverse border-t border-border bg-muted/30 px-6 py-4 sm:flex-row sm:justify-end sm:space-x-2"
         >
           {@render footer()}
         </div>

package/dist/lib/components/DropdownMenu.svelte

@@ -58,9 +58,9 @@
 <DropdownMenuPrimitive.Root bind:open onOpenChange={handleOpenChange}>
   <DropdownMenuPrimitive.Trigger>
     {#snippet child({ props })}
-      <span {...props}>
+      <button type="button" {...props}>
         {@render trigger()}
-      </span>
+      </button>
     {/snippet}
   </DropdownMenuPrimitive.Trigger>
 
@@ -80,15 +80,15 @@
         {#if isGroup(item)}
           <DropdownMenuPrimitive.Group>
             {#if item.label}
-              <div class="px-2 py-1.5 text-sm font-semibold">
+              <DropdownMenuPrimitive.GroupHeading class="px-2 py-1.5 text-sm font-semibold">
                 {item.label}
-              </div>
+              </DropdownMenuPrimitive.GroupHeading>
             {/if}
             {#each item.items as subItem}
               {#if subItem.type === 'separator'}
                 <DropdownMenuPrimitive.Separator class="-mx-1 my-1 h-px bg-muted" />
               {:else if subItem.type === 'label'}
-                <div class="px-2 py-1.5 text-sm font-semibold">
+                <div role="presentation" class="px-2 py-1.5 text-sm font-semibold">
                   {subItem.label}
                 </div>
               {:else}
@@ -96,15 +96,17 @@
                   disabled={subItem.disabled}
                   onSelect={() => subItem.onSelect?.()}
                   class={cn(
-                    'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 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 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none bg-popover data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default',
                     subItem.destructive && 'text-destructive data-[highlighted]:text-destructive'
                   )}
+                  aria-keyshortcuts={subItem.shortcut || undefined}
                 >
                   {subItem.label}
                   {#if subItem.shortcut}
-                    <span class="ml-auto text-xs tracking-widest opacity-60">
+                    <span class="ml-auto text-xs tracking-widest opacity-60" aria-hidden="true">
                       {subItem.shortcut}
                     </span>
+                    <span class="sr-only">, keyboard shortcut {subItem.shortcut}</span>
                   {/if}
                 </DropdownMenuPrimitive.Item>
               {/if}
@@ -113,7 +115,7 @@
         {:else if item.type === 'separator'}
           <DropdownMenuPrimitive.Separator class="-mx-1 my-1 h-px bg-muted" />
         {:else if item.type === 'label'}
-          <div class="px-2 py-1.5 text-sm font-semibold">
+          <div role="presentation" class="px-2 py-1.5 text-sm font-semibold">
             {item.label}
           </div>
         {:else}
@@ -121,15 +123,17 @@
             disabled={item.disabled}
             onSelect={() => item.onSelect?.()}
             class={cn(
-              'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 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 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none bg-popover data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default',
               item.destructive && 'text-destructive data-[highlighted]:text-destructive'
             )}
+            aria-keyshortcuts={item.shortcut || undefined}
           >
             {item.label}
             {#if item.shortcut}
-              <span class="ml-auto text-xs tracking-widest opacity-60">
+              <span class="ml-auto text-xs tracking-widest opacity-60" aria-hidden="true">
                 {item.shortcut}
               </span>
+              <span class="sr-only">, keyboard shortcut {item.shortcut}</span>
             {/if}
           </DropdownMenuPrimitive.Item>
         {/if}

package/dist/lib/components/FileUpload.svelte

@@ -297,15 +297,13 @@
     </label>
   {/if}
 
-  <!-- Drop Zone -->
-  <div
-    role="button"
-    tabindex={disabled ? -1 : 0}
-    aria-disabled={disabled}
+  <!-- Drop Zone - using label to wrap the hidden input for better accessibility -->
+  <label
+    for={id}
     aria-describedby={displayError ? `${id}-error` : undefined}
     class={cn(
       'relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 transition-colors',
-      'cursor-pointer focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+      'cursor-pointer focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2',
       isDragging && !disabled && 'border-primary bg-primary/5',
       disabled && 'cursor-not-allowed opacity-50',
       displayError && 'border-destructive',
@@ -318,8 +316,6 @@
     ondragleave={handleDragLeave}
     ondragover={handleDragOver}
     ondrop={handleDrop}
-    onclick={handleClick}
-    onkeydown={handleKeyDown}
   >
     <!-- Cloud Upload Icon -->
     <svg
@@ -354,9 +350,8 @@
       {disabled}
       class="sr-only"
       onchange={handleInputChange}
-      aria-label="File upload"
     />
-  </div>
+  </label>
 
   <!-- Hint text -->
   {#if hint && !displayError}

package/dist/lib/components/FormField.svelte

@@ -122,7 +122,13 @@
 
   <!-- Error message (takes precedence over hint) -->
   {#if error}
-    <p id={errorId} class="text-sm text-destructive" role="alert" aria-live="polite">
+    <p
+      id={errorId}
+      class="text-sm text-destructive"
+      role="alert"
+      aria-live="polite"
+      aria-atomic="true"
+    >
       {error}
     </p>
   {:else if hint}

package/dist/lib/components/HeaderSearch.svelte

@@ -15,12 +15,12 @@
    * @example Basic usage:
    * ```svelte
    * <HeaderSearch
-   *   enabled={true}
-   *   placeholder="Search..."
-   *   onSearch={(query) => handleSearch(query)}
-   *   onSelect={(item) => goto(item.href)}
-   *   results={searchResults}
-   *   loading={isSearching}
+   * enabled={true}
+   * placeholder="Search..."
+   * onSearch={(query) => handleSearch(query)}
+   * onSelect={(item) => goto(item.href)}
+   * results={searchResults}
+   * loading={isSearching}
    * />
    * ```
    */
@@ -175,7 +175,7 @@
       type="button"
       onclick={() => (open = true)}
       class={cn(
-        'inline-flex items-center justify-center rounded-md border border-input bg-background text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        'inline-flex items-center justify-center rounded-md border border-input bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
         size === 'sm' ? 'h-8 w-8' : 'h-9 w-9',
         className
       )}
@@ -197,7 +197,7 @@
       type="button"
       onclick={() => (open = true)}
       class={cn(
-        'flex items-center gap-2 rounded-md border border-input bg-background px-3 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        'flex items-center gap-2 rounded-md border border-input bg-background px-3 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
         size === 'sm' ? 'h-8' : 'h-9',
         className
       )}
@@ -287,7 +287,7 @@
                 type="button"
                 onclick={() => handleSelect(item)}
                 class={cn(
-                  'flex w-full cursor-pointer items-start gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors',
+                  'flex w-full cursor-pointer items-start gap-3 rounded-md px-3 py-2 text-left text-sm',
                   index === selectedIndex
                     ? 'bg-accent text-accent-foreground'
                     : 'hover:bg-accent-hover'

package/dist/lib/components/Icon.svelte

@@ -895,7 +895,7 @@
 {#if name === 'loading'}
   <!-- Loading spinner with animation -->
   <svg
-    aria-hidden={!label}
+    aria-hidden="true"
     width={size}
     height={size}
     viewBox="0 0 24 24"
@@ -911,7 +911,7 @@
 {:else if name === 'more'}
   <!-- Vertical dots -->
   <svg
-    aria-hidden={!label}
+    aria-hidden="true"
     width={size}
     height={size}
     viewBox="0 0 24 24"
@@ -926,7 +926,7 @@
 {:else if name === 'more-horizontal'}
   <!-- Horizontal dots -->
   <svg
-    aria-hidden={!label}
+    aria-hidden="true"
     width={size}
     height={size}
     viewBox="0 0 24 24"
@@ -941,7 +941,7 @@
 {:else if name === 'grip'}
   <!-- Grip handle (6 dots for drag) -->
   <svg
-    aria-hidden={!label}
+    aria-hidden="true"
     width={size}
     height={size}
     viewBox="0 0 24 24"
@@ -959,7 +959,7 @@
 {:else if iconDef}
   <!-- Standard path-based icons -->
   <svg
-    aria-hidden={!label}
+    aria-hidden="true"
     width={size}
     height={size}
     viewBox="0 0 24 24"

package/dist/lib/components/Input.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { cn } from '../utils.js';
+  import { DEV } from 'esm-env';
 
   interface Props {
     type?: string;
@@ -14,6 +15,14 @@
     /** Input mode hint for mobile keyboards */
     inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
     class?: string;
+    /** Accessible label for screen readers (alternative to visible label) */
+    'aria-label'?: string;
+    /** ID of element that labels this input */
+    'aria-labelledby'?: string;
+    /** ID of element that describes this input (e.g., hint or error message) */
+    'aria-describedby'?: string;
+    /** Whether the input has an error */
+    'aria-invalid'?: boolean | 'true' | 'false';
     onValueChange?: (value: string) => void;
     [key: string]: unknown;
   }
@@ -30,10 +39,25 @@
     autocomplete,
     inputmode,
     class: className,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    'aria-describedby': ariaDescribedby,
+    'aria-invalid': ariaInvalid,
     onValueChange,
     ...restProps
   }: Props = $props();
 
+  // Accessibility: warn if no label is associated in dev mode
+  if (DEV) {
+    $effect(() => {
+      if (!ariaLabel && !ariaLabelledby && !id) {
+        console.warn(
+          '[Input] Missing accessible label. Provide aria-label, aria-labelledby, or an id with a matching <label for="...">.'
+        );
+      }
+    });
+  }
+
   function handleInput(e: Event) {
     const target = e.target as HTMLInputElement;
     value = target.value;
@@ -52,8 +76,16 @@
   {id}
   {autocomplete}
   {inputmode}
+  aria-label={ariaLabel}
+  aria-labelledby={ariaLabelledby}
+  aria-describedby={ariaDescribedby}
+  aria-invalid={ariaInvalid}
+  aria-required={required}
   class={cn(
     'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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',
+    ariaInvalid === true || ariaInvalid === 'true'
+      ? 'border-destructive focus-visible:ring-destructive'
+      : '',
     className
   )}
   oninput={handleInput}

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

@@ -11,6 +11,14 @@ interface Props {
     /** Input mode hint for mobile keyboards */
     inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
     class?: string;
+    /** Accessible label for screen readers (alternative to visible label) */
+    'aria-label'?: string;
+    /** ID of element that labels this input */
+    'aria-labelledby'?: string;
+    /** ID of element that describes this input (e.g., hint or error message) */
+    'aria-describedby'?: string;
+    /** Whether the input has an error */
+    'aria-invalid'?: boolean | 'true' | 'false';
     onValueChange?: (value: string) => void;
     [key: string]: unknown;
 }

package/dist/lib/components/LiveRegion.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Text to announce to screen readers */
+    message?: string;
+    /** Interruption level - 'polite' waits for idle, 'assertive' interrupts immediately */
+    politeness?: 'polite' | 'assertive';
+    /** Whether to announce the entire region on updates (default: true) */
+    atomic?: boolean;
+    /** Whether to hide the region visually (default: true) */
+    visuallyHidden?: boolean;
+    /** Additional class names */
+    class?: string;
+    /** Child content to render in the live region */
+    children?: Snippet;
+  }
+
+  let {
+    message,
+    politeness = 'polite',
+    atomic = true,
+    visuallyHidden = true,
+    class: className,
+    children,
+  }: Props = $props();
+</script>
+
+<!--
+  LiveRegion announces dynamic content changes to screen readers.
+
+  Use this component when content updates need to be communicated to assistive technology users,
+  such as form validation messages, status updates, or notifications.
+
+  @example
+  <LiveRegion message={errorMessage} politeness="assertive" />
+
+  @example with children
+  <LiveRegion politeness="polite">
+    <span>Status: {status}</span>
+  </LiveRegion>
+
+  @example visible
+  <LiveRegion visuallyHidden={false} message="Loading..." />
+-->
+<div
+  role="status"
+  aria-live={politeness}
+  aria-atomic={atomic}
+  class={cn(
+    visuallyHidden && 'sr-only absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0',
+    className
+  )}
+>
+  {#if message}
+    {message}
+  {:else if children}
+    {@render children()}
+  {/if}
+</div>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Text to announce to screen readers */
+    message?: string;
+    /** Interruption level - 'polite' waits for idle, 'assertive' interrupts immediately */
+    politeness?: 'polite' | 'assertive';
+    /** Whether to announce the entire region on updates (default: true) */
+    atomic?: boolean;
+    /** Whether to hide the region visually (default: true) */
+    visuallyHidden?: boolean;
+    /** Additional class names */
+    class?: string;
+    /** Child content to render in the live region */
+    children?: Snippet;
+}
+declare const LiveRegion: import("svelte").Component<Props, {}, "">;
+type LiveRegion = ReturnType<typeof LiveRegion>;
+export default LiveRegion;

package/dist/lib/components/LoadingOverlay.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import Spinner from './Spinner.svelte';
+  import LoadingLogo from './LoadingLogo.svelte';
+  import ProgressBar from './ProgressBar.svelte';
+  import Skeleton from './Skeleton.svelte';
+  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;
+  }
+
+  const logoSizeMap = { sm: 32, md: 40, lg: 56, xl: 80 } as const;
+
+  let {
+    loading = true,
+    variant = 'spinner',
+    mode = 'overlay',
+    size = 'md',
+    message,
+    progress,
+    blur = true,
+    opaque = false,
+    delay = 0,
+    class: className,
+    children,
+    ...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);
+  });
+
+  const bgClass = $derived(
+    opaque ? 'bg-background' : mode === 'fullscreen' ? 'bg-background/80' : 'bg-background/60'
+  );
+
+  const positionClass = $derived(
+    mode === 'fullscreen' ? 'fixed inset-0 z-50' : 'absolute inset-0 z-10'
+  );
+</script>
+
+{#if mode === 'inline'}
+  {#if visible}
+    <div
+      role="status"
+      aria-live="polite"
+      class={cn('inline-flex items-center gap-2', className)}
+      {...restProps}
+    >
+      {#if variant === 'spinner'}
+        <Spinner {size} />
+      {:else if variant === 'logo'}
+        <LoadingLogo loading width={logoSizeMap[size]} height={logoSizeMap[size]} />
+      {:else if variant === 'progress'}
+        <ProgressBar value={progress} class="w-48 max-w-full" />
+      {:else if variant === 'skeleton'}
+        <div class="w-full space-y-3">
+          <Skeleton variant="title" />
+          <Skeleton variant="text" />
+          <Skeleton variant="text" />
+          <Skeleton variant="text" class="w-2/3" />
+        </div>
+      {/if}
+      {#if message}
+        <p class="mt-2 text-sm text-muted-foreground animate-pulse-subtle">{message}</p>
+      {:else}
+        <span class="sr-only">Loading</span>
+      {/if}
+    </div>
+  {/if}
+{:else}
+  {#if children}
+    {@render children()}
+  {/if}
+  {#if visible}
+    <div
+      role="status"
+      aria-live="polite"
+      class={cn(
+        positionClass,
+        bgClass,
+        blur && 'backdrop-blur-sm',
+        'flex flex-col items-center justify-center',
+        className
+      )}
+      {...restProps}
+    >
+      {#if variant === 'spinner'}
+        <Spinner {size} />
+      {:else if variant === 'logo'}
+        <LoadingLogo loading width={logoSizeMap[size]} height={logoSizeMap[size]} />
+      {:else if variant === 'progress'}
+        <ProgressBar value={progress} class="w-48 max-w-full" />
+      {:else if variant === 'skeleton'}
+        <div class="w-full space-y-3">
+          <Skeleton variant="title" />
+          <Skeleton variant="text" />
+          <Skeleton variant="text" />
+          <Skeleton variant="text" class="w-2/3" />
+        </div>
+      {/if}
+      {#if message}
+        <p class="mt-2 text-sm text-muted-foreground animate-pulse-subtle">{message}</p>
+      {:else}
+        <span class="sr-only">Loading</span>
+      {/if}
+    </div>
+  {/if}
+{/if}