@classic-homes/theme-svelte 0.1.52 → 0.1.54

package/dist/lib/components/SkipLink.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /**
+     * ID of the target element to skip to (without the # prefix).
+     * @example targetId="main-content"
+     */
+    targetId: string;
+    /**
+     * Custom class name for the skip link.
+     * Note: The component uses the `.skip-link` class from @classic-homes/theme-styles
+     * which handles the visually hidden to visible transition on focus.
+     */
+    class?: string;
+    /**
+     * Content of the skip link. Defaults to "Skip to main content".
+     */
+    children?: Snippet;
+    /**
+     * Additional attributes
+     */
+    [key: string]: unknown;
+  }
+
+  let { targetId, class: className, children, ...restProps }: Props = $props();
+
+  function handleClick(e: MouseEvent) {
+    e.preventDefault();
+    const target = document.getElementById(targetId);
+    if (target) {
+      // Set tabIndex to make the target focusable if it isn't already
+      if (target.tabIndex === -1) {
+        target.setAttribute('tabindex', '-1');
+      }
+      target.focus();
+      // Scroll into view
+      target.scrollIntoView();
+    }
+  }
+</script>
+
+<!--
+  SkipLink - Accessible skip navigation link
+
+  Provides keyboard users a way to skip repetitive navigation and jump directly
+  to the main content. The link is visually hidden until focused.
+
+  @see https://www.w3.org/WAI/WCAG21/Techniques/general/G1
+
+  @example
+  // Basic usage - place at the very beginning of your page/layout
+  <SkipLink targetId="main-content">Skip to main content</SkipLink>
+
+  // Then add the target ID to your main content
+  <main id="main-content" tabindex="-1">
+    ...
+  </main>
+-->
+<a href={`#${targetId}`} class={cn('skip-link', className)} onclick={handleClick} {...restProps}>
+  {#if children}
+    {@render children()}
+  {:else}
+    Skip to main content
+  {/if}
+</a>

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

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /**
+     * ID of the target element to skip to (without the # prefix).
+     * @example targetId="main-content"
+     */
+    targetId: string;
+    /**
+     * Custom class name for the skip link.
+     * Note: The component uses the `.skip-link` class from @classic-homes/theme-styles
+     * which handles the visually hidden to visible transition on focus.
+     */
+    class?: string;
+    /**
+     * Content of the skip link. Defaults to "Skip to main content".
+     */
+    children?: Snippet;
+    /**
+     * Additional attributes
+     */
+    [key: string]: unknown;
+}
+declare const SkipLink: import("svelte").Component<Props, {}, "">;
+type SkipLink = ReturnType<typeof SkipLink>;
+export default SkipLink;

package/dist/lib/components/Slider.svelte

@@ -143,11 +143,15 @@
     aria-describedby={describedBy}
   >
     <SliderPrimitive.Range class={styles.range()} />
-    {#each value as _, i}
+    {#each value as thumbValue, i}
       <SliderPrimitive.Thumb
         index={i}
         class={styles.thumb()}
-        aria-label={value.length > 1 ? `Thumb ${i + 1}` : label || 'Slider'}
+        aria-label={value.length > 1 ? `${label || 'Slider'} thumb ${i + 1}` : label || 'Slider'}
+        aria-valuenow={thumbValue}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuetext={formatValue(thumbValue)}
       />
     {/each}
   </SliderPrimitive.Root>

package/dist/lib/components/Switch.svelte

@@ -10,6 +10,10 @@
     value?: string;
     id?: string;
     class?: string;
+    /** Accessible label for screen readers */
+    'aria-label'?: string;
+    /** ID of element that labels this switch */
+    'aria-labelledby'?: string;
     onchange?: (checked: boolean) => void;
   }
 
@@ -21,6 +25,8 @@
     value,
     id,
     class: className,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
     onchange,
     ...restProps
   }: Props = $props();
@@ -43,6 +49,8 @@
   {name}
   {value}
   {id}
+  aria-label={ariaLabel}
+  aria-labelledby={ariaLabelledby}
   onCheckedChange={handleCheckedChange}
   class={cn(
     'peer relative inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',

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

@@ -6,6 +6,10 @@ interface Props {
     value?: string;
     id?: string;
     class?: string;
+    /** Accessible label for screen readers */
+    'aria-label'?: string;
+    /** ID of element that labels this switch */
+    'aria-labelledby'?: string;
     onchange?: (checked: boolean) => void;
 }
 declare const Switch: import("svelte").Component<Props, {}, "checked">;

package/dist/lib/components/Tabs.svelte

@@ -11,6 +11,12 @@
     value?: string;
     /** Unique ID for ARIA relationships */
     id?: string;
+    /**
+     * Accessible label for the tab list.
+     * Describes the purpose of the tabs to screen reader users.
+     * @example label="Account settings"
+     */
+    label: string;
     /** Additional classes for container */
     class?: string;
     /** Tab panel content */
@@ -25,11 +31,15 @@
     tabs,
     value = $bindable(tabs[0]?.id ?? ''),
     id = generatedId,
+    label,
     class: className,
     children,
     onValueChange,
   }: Props = $props();
 
+  // Store references to tab button elements for direct focus management
+  let tabRefs: Record<string, HTMLButtonElement | undefined> = $state({});
+
   // Create a reactive object for context
   // Initialize with empty values - the effect will set them immediately
   const tabsState = $state({ activeTab: '', tabsId: '' });
@@ -80,9 +90,8 @@
     const newTab = enabledTabs[newIndex];
     if (newTab) {
       selectTab(newTab.id);
-      // Focus the new tab
-      const tabElement = document.getElementById(`${id}-tab-${newTab.id}`);
-      tabElement?.focus();
+      // Focus the new tab using direct element reference
+      tabRefs[newTab.id]?.focus();
     }
   }
 </script>
@@ -91,11 +100,12 @@
   <!-- Tab List -->
   <div
     role="tablist"
-    aria-label="Tabs"
+    aria-label={label}
     class="inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground"
   >
     {#each tabs as tab, index (tab.id)}
       <button
+        bind:this={tabRefs[tab.id]}
         id={`${id}-tab-${tab.id}`}
         role="tab"
         type="button"
@@ -104,7 +114,7 @@
         tabindex={value === tab.id ? 0 : -1}
         disabled={tab.disabled}
         class={cn(
-          'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
           value === tab.id
             ? 'bg-background text-foreground shadow-sm'
             : 'hover:bg-background-hover hover:text-foreground',

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

@@ -7,6 +7,12 @@ interface Props {
     value?: string;
     /** Unique ID for ARIA relationships */
     id?: string;
+    /**
+     * Accessible label for the tab list.
+     * Describes the purpose of the tabs to screen reader users.
+     * @example label="Account settings"
+     */
+    label: string;
     /** Additional classes for container */
     class?: string;
     /** Tab panel content */

package/dist/lib/components/Textarea.svelte

@@ -11,6 +11,14 @@
     id?: string;
     rows?: number;
     class?: string;
+    /** Accessible label for screen readers (alternative to visible label) */
+    'aria-label'?: string;
+    /** ID of element that labels this textarea */
+    'aria-labelledby'?: string;
+    /** ID of element that describes this textarea (e.g., hint or error message) */
+    'aria-describedby'?: string;
+    /** Whether the textarea has an error */
+    'aria-invalid'?: boolean | 'true' | 'false';
     onValueChange?: (value: string) => void;
     [key: string]: unknown;
   }
@@ -25,6 +33,10 @@
     id,
     rows = 3,
     class: className,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    'aria-describedby': ariaDescribedby,
+    'aria-invalid': ariaInvalid,
     onValueChange,
     ...restProps
   }: Props = $props();
@@ -45,8 +57,15 @@
   {name}
   {id}
   {rows}
+  aria-label={ariaLabel}
+  aria-labelledby={ariaLabelledby}
+  aria-describedby={ariaDescribedby}
+  aria-invalid={ariaInvalid}
   class={cn(
     'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-gray-500 dark:placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-y',
+    ariaInvalid === true || ariaInvalid === 'true'
+      ? 'border-destructive focus-visible:ring-destructive'
+      : '',
     className
   )}
   oninput={handleInput}

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

@@ -8,6 +8,14 @@ interface Props {
     id?: string;
     rows?: number;
     class?: string;
+    /** Accessible label for screen readers (alternative to visible label) */
+    'aria-label'?: string;
+    /** ID of element that labels this textarea */
+    'aria-labelledby'?: string;
+    /** ID of element that describes this textarea (e.g., hint or error message) */
+    'aria-describedby'?: string;
+    /** Whether the textarea has an error */
+    'aria-invalid'?: boolean | 'true' | 'false';
     onValueChange?: (value: string) => void;
     [key: string]: unknown;
 }

package/dist/lib/components/Toast.svelte

@@ -92,7 +92,7 @@
   {#if onclose}
     <button
       type="button"
-      class="flex-shrink-0 rounded-md p-1 hover:bg-muted-hover transition-colors"
+      class="flex-shrink-0 rounded-md p-1 hover:bg-muted-hover"
       onclick={onclose}
       aria-label="Close"
     >

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

@@ -119,7 +119,7 @@
           {#each footerLinks as link}
             <a
               href={link.href}
-              class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+              class="text-sm text-muted-foreground hover:text-foreground"
               target={link.external ? '_blank' : undefined}
               rel={link.external ? 'noopener noreferrer' : undefined}
             >

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

@@ -255,7 +255,7 @@
 
   <!-- Main Content Area -->
   <div
-    class="flex flex-1 flex-col transition-all duration-300 motion-reduce:transition-none"
+    class="flex flex-1 flex-col transition-[margin] duration-300 motion-reduce:transition-none"
     style="margin-left: {sidebarWidth}px;"
   >
     {#if showHeader}

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

@@ -75,7 +75,7 @@
                     <a
                       href={item.href}
                       class={cn(
-                        'text-sm transition-colors',
+                        'text-sm',
                         isDark
                           ? 'text-white hover:text-primary'
                           : 'text-muted-foreground hover:text-foreground'

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

@@ -97,7 +97,7 @@
         <a
           href={item.href}
           class={cn(
-            'text-sm font-bold uppercase transition-colors hover:text-primary',
+            'text-sm font-bold uppercase hover:text-primary',
             item.active ? 'text-primary' : 'text-muted-foreground'
           )}
           target={item.external ? '_blank' : undefined}
@@ -122,7 +122,7 @@
             <a
               href={item.href}
               class={cn(
-                'block rounded-md px-3 py-2 text-sm font-bold uppercase transition-colors',
+                'block rounded-md px-3 py-2 text-sm font-bold uppercase',
                 item.active
                   ? 'bg-primary/10 text-primary'
                   : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'

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

@@ -50,7 +50,7 @@
       <a
         href={link.href}
         class={cn(
-          'flex items-center transition-all duration-300 motion-reduce:transition-none overflow-hidden',
+          'flex items-center overflow-hidden',
           // List mode styles
           display === 'list' && 'gap-3 rounded-md px-3 py-2 text-sm',
           display === 'list' &&
@@ -93,7 +93,7 @@
 
         <span
           class={cn(
-            'truncate whitespace-nowrap transition-all duration-300 motion-reduce:transition-none',
+            'truncate whitespace-nowrap transition-[width,opacity] duration-300 motion-reduce:transition-none',
             display === 'icons' ? 'w-0 opacity-0 flex-none' : 'flex-1 opacity-100'
           )}
         >
@@ -111,7 +111,7 @@
         {#if link.external}
           <svg
             class={cn(
-              'h-4 w-4 shrink-0 transition-all duration-300',
+              'h-4 w-4 shrink-0 transition-opacity duration-300',
               display === 'icons' ? 'hidden' : 'opacity-50'
             )}
             fill="none"

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

@@ -437,7 +437,7 @@
 <!-- Sidebar: z-50 positions above overlay and content, below modals (z-100+) -->
 <aside
   class={cn(
-    'fixed left-0 top-0 z-[var(--z-sidebar,50)] flex h-full flex-col transition-all duration-300 touch-pan-y',
+    'fixed left-0 top-0 z-[var(--z-sidebar,50)] flex h-full flex-col transition-[width,transform] duration-300 motion-reduce:transition-none touch-pan-y',
     // Variant-based background and text colors
     isLight ? 'bg-background text-foreground' : 'bg-sidebar text-sidebar-foreground',
     strongBorder ? 'border-r-2 border-black' : 'border-r border-black',

package/dist/lib/components/layout/sidebar/SidebarFlyout.svelte

@@ -110,7 +110,6 @@
   bind:this={flyoutElement}
   class={cn(
     'fixed min-w-48 rounded-md border shadow-lg z-[calc(var(--z-sidebar,50)+10)]',
-    'motion-reduce:transition-none',
     isLight ? 'bg-background border-border' : 'bg-sidebar border-sidebar-foreground/20'
   )}
   style="top: {top}px; left: {left}px;"
@@ -174,7 +173,7 @@
           <a
             href={child.disabled ? undefined : child.href}
             class={cn(
-              'flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors ml-2',
+              'flex items-center gap-2 rounded-md px-3 py-2 text-sm ml-2',
               'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
               isLight
                 ? 'text-foreground hover:bg-accent hover:text-accent-foreground'

package/dist/lib/components/layout/sidebar/SidebarNavItem.svelte

@@ -84,11 +84,13 @@
 
   function getItemStateClasses(active?: boolean, disabled?: boolean): string {
     return cn(
-      isLight && !active && 'text-foreground hover:bg-accent hover:text-accent-foreground',
+      isLight &&
+        !active &&
+        'text-foreground bg-background hover:bg-accent hover:text-accent-foreground',
       isLight && active && 'bg-primary/10 text-primary',
       !isLight &&
         !active &&
-        'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        'text-sidebar-foreground bg-sidebar hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
       !isLight && active && 'bg-sidebar-primary text-sidebar-primary-foreground',
       disabled && 'opacity-50 pointer-events-none cursor-not-allowed'
     );
@@ -172,13 +174,13 @@
   highlight: { before: string; match: string; after: string } | null
 )}
   {#if highlight}
-    <span class="flex-1 truncate">
+    <span class="flex-1 min-w-0 truncate">
       {highlight.before}<mark class="bg-yellow-200 dark:bg-yellow-900 text-inherit rounded px-0.5"
         >{highlight.match}</mark
       >{highlight.after}
     </span>
   {:else}
-    <span class="flex-1 truncate">{name}</span>
+    <span class="flex-1 min-w-0 truncate">{name}</span>
   {/if}
 {/snippet}
 
@@ -186,7 +188,7 @@
   <button
     type="button"
     class={cn(
-      'flex items-center justify-center p-1 rounded transition-all shrink-0',
+      'flex items-center justify-center p-1 rounded shrink-0',
       'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
       // Show on hover for regular items, always show in pinned section
       isUnpin ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
@@ -247,10 +249,10 @@
   <div>
     <div
       class={cn(
-        'group flex w-full items-center rounded-md transition-colors overflow-hidden',
-        isLight && !item.active && 'hover:bg-accent',
+        'group flex w-full items-center rounded-md',
+        isLight && !item.active && 'bg-background hover:bg-accent',
         isLight && item.active && 'bg-primary/10',
-        !isLight && !item.active && 'hover:bg-sidebar-accent',
+        !isLight && !item.active && 'bg-sidebar hover:bg-sidebar-accent',
         !isLight && item.active && 'bg-sidebar-primary'
       )}
     >
@@ -259,7 +261,7 @@
         <a
           href={item.disabled ? undefined : item.href}
           class={cn(
-            'flex flex-1 items-center gap-3 px-3 py-2 text-sm font-medium transition-colors overflow-hidden',
+            'flex flex-1 items-center gap-3 px-3 py-2 text-sm font-medium',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
             'group-hover:underline underline-offset-2',
             isLight && !item.active && 'text-foreground group-hover:text-accent-foreground',
@@ -287,7 +289,7 @@
         <button
           type="button"
           class={cn(
-            'flex flex-1 items-center gap-3 px-3 py-2 text-sm font-medium transition-colors overflow-hidden text-left',
+            'flex flex-1 items-center gap-3 px-3 py-2 text-sm font-medium text-left',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
             isLight && !item.active && 'text-foreground group-hover:text-accent-foreground',
             isLight && item.active && 'text-primary',
@@ -312,7 +314,7 @@
       <button
         type="button"
         class={cn(
-          'flex items-center justify-center p-2 transition-colors rounded-md',
+          'flex items-center justify-center p-2 rounded-md',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
           isLight
             ? 'hover:bg-accent-hover group-hover:text-accent-foreground'
@@ -353,16 +355,13 @@
     </div>
 
     {#if isExpanded}
-      <ul
-        class="mt-1 space-y-1 pl-4 motion-reduce:transition-none overflow-hidden"
-        transition:slide={{ duration: 200 }}
-      >
+      <ul class="mt-1 space-y-1 pl-4 overflow-hidden" transition:slide={{ duration: 200 }}>
         {#each item.children as child}
           <li>
             <a
               href={child.disabled ? undefined : child.href}
               class={cn(
-                'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors overflow-hidden',
+                'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium',
                 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
                 getItemStateClasses(child.active, child.disabled)
               )}
@@ -394,10 +393,10 @@
   <!-- Wrap in group div for pin button hover behavior -->
   <div
     class={cn(
-      'group flex w-full items-center rounded-md transition-colors overflow-hidden',
-      isLight && !item.active && 'hover:bg-accent',
+      'group flex w-full items-center rounded-md',
+      isLight && !item.active && 'bg-background hover:bg-accent',
       isLight && item.active && 'bg-primary/10',
-      !isLight && !item.active && 'hover:bg-sidebar-accent',
+      !isLight && !item.active && 'bg-sidebar hover:bg-sidebar-accent',
       !isLight && item.active && 'bg-sidebar-primary'
     )}
   >
@@ -406,7 +405,7 @@
       <a
         href={item.disabled ? undefined : item.href}
         class={cn(
-          'flex flex-1 items-center gap-3 px-3 py-2 text-sm font-medium transition-colors overflow-hidden relative',
+          'flex flex-1 items-center gap-3 px-3 py-2 text-sm font-medium relative',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
           isLight && !item.active && 'text-foreground group-hover:text-accent-foreground',
           isLight && item.active && 'text-primary',
@@ -453,7 +452,7 @@
       <button
         type="button"
         class={cn(
-          'flex flex-1 items-center gap-3 px-3 py-2 text-sm font-medium transition-colors overflow-hidden text-left relative',
+          'flex flex-1 items-center gap-3 px-3 py-2 text-sm font-medium text-left relative',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
           isLight && !item.active && 'text-foreground group-hover:text-accent-foreground',
           isLight && item.active && 'text-primary',

package/dist/lib/components/layout/sidebar/SidebarSection.svelte

@@ -67,7 +67,7 @@
       <button
         onclick={toggleSection}
         class={cn(
-          'flex w-full items-center justify-between mb-2 px-4 text-xs font-semibold uppercase tracking-wider transition-colors rounded-md overflow-hidden',
+          'flex w-full items-center justify-between mb-2 px-4 text-xs font-semibold uppercase tracking-wider rounded-md overflow-hidden',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
           isLight
             ? 'text-muted-foreground hover:text-foreground'
@@ -132,7 +132,7 @@
   {:else if isExpanded}
     <!-- Collapsible and expanded: animate -->
     <ul
-      class="space-y-1 px-2 motion-reduce:transition-none overflow-hidden"
+      class="space-y-1 px-2 overflow-hidden"
       id={`sidebar-section-${section.id}`}
       transition:slide={{ duration: 200 }}
     >

package/dist/lib/components/notifications/NotificationFilters.svelte

@@ -81,7 +81,7 @@
       aria-selected={filter === filterItem.id}
       tabindex={filter === filterItem.id ? 0 : -1}
       class={cn(
-        'inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
         filter === filterItem.id
           ? 'bg-background text-foreground shadow-sm'
           : 'hover:bg-background-hover hover:text-foreground'

package/dist/lib/components/notifications/NotificationItem.svelte

@@ -66,9 +66,10 @@
   }
 </script>
 
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
   class={cn(
-    'group relative flex gap-3 rounded-lg border p-4 transition-colors',
+    'group relative flex gap-3 rounded-lg border p-4',
     !notification.read && 'bg-blue-50/50 border-blue-200',
     notification.read && 'bg-card border-border',
     onClick && 'cursor-pointer hover:bg-muted/50',

package/dist/lib/composables/index.d.ts

@@ -24,3 +24,11 @@ export { useAsync, runAsync, type UseAsyncOptions, type UseAsyncReturn, } from '
  * ```
  */
 export { usePersistedForm, type UsePersistedFormOptions, type UsePersistedFormReturn, type InferPersistedFormData, } from './usePersistedForm.svelte.js';
+export { useFocusTrap, type UseFocusTrapOptions } from './useFocusTrap.svelte.js';
+export { useFocusRef, type UseFocusRefOptions } from './useFocusRef.svelte.js';
+export { useReducedMotion } from './useReducedMotion.svelte.js';
+export { useArrowNavigation, type UseArrowNavigationOptions, type ArrowNavigationOrientation, } from './useArrowNavigation.svelte.js';
+export { useRovingTabindex, type UseRovingTabindexOptions } from './useRovingTabindex.svelte.js';
+export { useAnnounce, type UseAnnounceOptions, type UseAnnounceReturn, } from './useAnnounce.svelte.js';
+export { useEscapeKey, type UseEscapeKeyOptions } from './useEscapeKey.svelte.js';
+export { useClickOutside, clickOutsideAction, type UseClickOutsideOptions, } from './useClickOutside.svelte.js';

package/dist/lib/composables/index.js

@@ -26,3 +26,12 @@ export { useAsync, runAsync, } from './useAsync.svelte.js';
  * ```
  */
 export { usePersistedForm, } from './usePersistedForm.svelte.js';
+// Accessibility composables
+export { useFocusTrap } from './useFocusTrap.svelte.js';
+export { useFocusRef } from './useFocusRef.svelte.js';
+export { useReducedMotion } from './useReducedMotion.svelte.js';
+export { useArrowNavigation, } from './useArrowNavigation.svelte.js';
+export { useRovingTabindex } from './useRovingTabindex.svelte.js';
+export { useAnnounce, } from './useAnnounce.svelte.js';
+export { useEscapeKey } from './useEscapeKey.svelte.js';
+export { useClickOutside, clickOutsideAction, } from './useClickOutside.svelte.js';