@classic-homes/theme-svelte 0.1.53 → 0.1.55

package/dist/__tests__/FileUpload.test.js

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import FileUpload from '../lib/components/FileUpload.svelte';
+describe('FileUpload accepted-types label', () => {
+    it('derives a friendly label from MIME types instead of showing raw values', () => {
+        render(FileUpload, {
+            props: {
+                label: 'Upload files',
+                acceptedTypes: [
+                    'image/jpeg',
+                    'image/png',
+                    'application/pdf',
+                    'video/mp4',
+                    'video/quicktime',
+                ],
+            },
+        });
+        expect(screen.getByText(/Images, PDF, Videos \(max/)).toBeInTheDocument();
+        // Raw MIME types should not be shown
+        expect(screen.queryByText(/image\/jpeg/)).not.toBeInTheDocument();
+    });
+    it('uses the default accepted types (Images, PDF) when none are provided', () => {
+        render(FileUpload, { props: { label: 'Upload files' } });
+        expect(screen.getByText(/^Images, PDF \(max/)).toBeInTheDocument();
+    });
+    it('respects an explicit typesLabel override', () => {
+        render(FileUpload, {
+            props: {
+                label: 'Upload files',
+                acceptedTypes: ['image/png', 'video/mp4'],
+                typesLabel: 'Photos and clips',
+            },
+        });
+        expect(screen.getByText(/^Photos and clips \(max/)).toBeInTheDocument();
+    });
+    it('falls back to the uppercased subtype for unmapped types', () => {
+        render(FileUpload, {
+            props: {
+                label: 'Upload files',
+                acceptedTypes: ['application/zip'],
+            },
+        });
+        expect(screen.getByText(/^ZIP \(max/)).toBeInTheDocument();
+    });
+});

package/dist/lib/components/AlertDialog.svelte

@@ -5,7 +5,7 @@
   import { tv, type VariantProps } from 'tailwind-variants';
 
   const buttonVariants = tv({
-    base: 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+    base: 'inline-flex items-center justify-center rounded-md 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',
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground hover:bg-primary-hover',

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

@@ -21,7 +21,7 @@ declare const AlertDialog: import("svelte").Component<{
             outline: string;
             ghost: string;
         };
-    }, undefined, "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", import("tailwind-variants/dist/config.js").TVConfig<{
+    }, undefined, "inline-flex items-center justify-center rounded-md 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", import("tailwind-variants/dist/config.js").TVConfig<{
         variant: {
             default: string;
             destructive: string;
@@ -49,7 +49,7 @@ declare const AlertDialog: import("svelte").Component<{
             outline: string;
             ghost: string;
         };
-    }, undefined, "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", import("tailwind-variants/dist/config.js").TVConfig<{
+    }, undefined, "inline-flex items-center justify-center rounded-md 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", import("tailwind-variants/dist/config.js").TVConfig<{
         variant: {
             default: string;
             destructive: string;

package/dist/lib/components/Badge.svelte

@@ -4,16 +4,16 @@
   import { tv, type VariantProps } from 'tailwind-variants';
 
   const badgeVariants = tv({
-    base: 'inline-flex items-center justify-center rounded-md border font-medium w-fit whitespace-nowrap shrink-0 gap-1 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+    base: 'inline-flex items-center justify-center rounded-md border font-medium w-fit whitespace-nowrap shrink-0 gap-1',
     variants: {
       variant: {
         default: 'border-transparent bg-primary text-primary-foreground',
         secondary: 'border-transparent bg-secondary text-secondary-foreground',
-        destructive: 'border-transparent bg-destructive text-white',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground',
         outline: 'text-foreground',
-        success: 'border-transparent bg-green-500 text-white',
-        warning: 'border-transparent bg-yellow-500 text-white',
-        info: 'border-transparent bg-blue-500 text-white',
+        success: 'border-transparent bg-success text-success-foreground',
+        warning: 'border-transparent bg-warning text-warning-foreground',
+        info: 'border-transparent bg-info text-info-foreground',
       },
       size: {
         default: 'px-2 py-0.5 text-xs',
@@ -21,7 +21,7 @@
         dot: 'h-5 w-5 p-0 text-xs',
       },
       clickable: {
-        true: 'cursor-pointer',
+        true: 'cursor-pointer focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
         false: '',
       },
     },
@@ -34,9 +34,9 @@
         clickable: true,
         class: 'hover:bg-accent-hover hover:text-accent-foreground',
       },
-      { variant: 'success', clickable: true, class: 'hover:bg-green-600' },
-      { variant: 'warning', clickable: true, class: 'hover:bg-yellow-600' },
-      { variant: 'info', clickable: true, class: 'hover:bg-blue-600' },
+      { variant: 'success', clickable: true, class: 'hover:bg-success/80' },
+      { variant: 'warning', clickable: true, class: 'hover:bg-warning/80' },
+      { variant: 'info', clickable: true, class: 'hover:bg-info/80' },
     ],
     defaultVariants: {
       variant: 'default',
@@ -51,6 +51,8 @@
     variant?: BadgeVariants['variant'];
     size?: BadgeVariants['size'];
     clickable?: boolean;
+    /** When true, adds role="status" and aria-live="polite" for dynamic content announcements */
+    live?: boolean;
     class?: string;
     children: Snippet;
     onclick?: (e: MouseEvent) => void;
@@ -67,6 +69,7 @@
     variant = 'default',
     size = 'default',
     clickable = false,
+    live = false,
     class: className,
     children,
     onclick,
@@ -81,12 +84,26 @@
 </script>
 
 {#if isInteractive}
-  <button type="button" class={classes} {onclick} {...restProps}>
+  <button
+    type="button"
+    class={classes}
+    {onclick}
+    role={live ? 'status' : undefined}
+    aria-live={live ? 'polite' : undefined}
+    aria-atomic={live ? 'true' : undefined}
+    {...restProps}
+  >
     {@render children()}
     {#if label}<span class="sr-only">{label}</span>{/if}
   </button>
 {:else}
-  <span class={classes} {...restProps}>
+  <span
+    class={classes}
+    role={live ? 'status' : undefined}
+    aria-live={live ? 'polite' : undefined}
+    aria-atomic={live ? 'true' : undefined}
+    {...restProps}
+  >
     {@render children()}
     {#if label}<span class="sr-only">{label}</span>{/if}
   </span>

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

@@ -4,6 +4,8 @@ declare const Badge: import("svelte").Component<{
     variant?: "default" | "secondary" | "destructive" | "outline" | "info" | "warning" | "success" | undefined;
     size?: "default" | "sm" | "dot" | undefined;
     clickable?: boolean;
+    /** When true, adds role="status" and aria-live="polite" for dynamic content announcements */
+    live?: boolean;
     class?: string;
     children: Snippet;
     onclick?: (e: MouseEvent) => void;

package/dist/lib/components/Button.svelte

@@ -4,7 +4,7 @@
   import { tv, type VariantProps } from 'tailwind-variants';
 
   const buttonVariants = tv({
-    base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg 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 disabled:pointer-events-none disabled:opacity-50',
+    base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground shadow hover:bg-primary-hover',
@@ -63,6 +63,17 @@
   }: Props = $props();
 
   const classes = $derived(cn(buttonVariants({ variant, size }), className));
+
+  // Dev-mode a11y warning for icon buttons without accessible labels
+  if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
+    $effect(() => {
+      if (size === 'icon' && !restProps['aria-label'] && !restProps['aria-labelledby']) {
+        console.warn(
+          'Button: Icon-only buttons (size="icon") should have an aria-label or aria-labelledby for accessibility.'
+        );
+      }
+    });
+  }
 </script>
 
 {#snippet loadingSpinner()}

package/dist/lib/components/Combobox.svelte

@@ -199,7 +199,7 @@
                 value={option.value}
                 label={option.label}
                 disabled={option.disabled}
-                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"
               >
                 {#if option.value === value}
                   <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
@@ -291,7 +291,7 @@
               value={option.value}
               label={option.label}
               disabled={option.disabled}
-              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"
             >
               {#if option.value === value}
                 <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">

package/dist/lib/components/DataPanelHeader.svelte

@@ -89,7 +89,7 @@
       {#snippet trigger()}
         <button
           type="button"
-          class="flex h-8 w-8 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"
+          class="flex h-8 w-8 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"
           aria-label="Panel options"
         >
           <svg
@@ -141,7 +141,7 @@
       <!-- Collapse/Expand button -->
       <button
         type="button"
-        class="flex h-8 w-8 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"
+        class="flex h-8 w-8 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"
         onclick={() => onExpandedChange?.(!isExpanded)}
         aria-label={isExpanded ? 'Collapse panel' : 'Expand panel'}
         aria-expanded={isExpanded}
@@ -168,7 +168,7 @@
           {#snippet trigger()}
             <button
               type="button"
-              class="flex h-8 w-8 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"
+              class="flex h-8 w-8 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"
               aria-label="Panel options"
             >
               <svg
@@ -195,7 +195,7 @@
       {#if !disableClose}
         <button
           type="button"
-          class="flex h-8 w-8 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"
+          class="flex h-8 w-8 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"
           onclick={() => onClose?.()}
           aria-label="Close panel"
         >

package/dist/lib/components/DataPanelTab.svelte

@@ -32,7 +32,7 @@
 <button
   type="button"
   class={cn(
-    'fixed z-40 flex items-center justify-center gap-2 border border-border bg-background px-3 py-2 text-sm font-medium shadow-md transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+    'fixed z-40 flex items-center justify-center gap-2 border border-border bg-background px-3 py-2 text-sm font-medium shadow-md hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
     positionClasses,
     isVertical && 'writing-mode-vertical',
     className

package/dist/lib/components/DataTable.svelte

@@ -22,11 +22,11 @@
    * ## Basic Usage
    * ```svelte
    * <DataTable
-   *   data={users}
-   *   columns={[
-   *     { id: 'name', header: 'Name', accessor: 'name', sortable: true },
-   *     { id: 'email', header: 'Email', accessor: 'email' },
-   *   ]}
+   * data={users}
+   * columns={[
+   * { id: 'name', header: 'Name', accessor: 'name', sortable: true },
+   * { id: 'email', header: 'Email', accessor: 'email' },
+   * ]}
    * />
    * ```
    */
@@ -218,7 +218,7 @@
     }
     if (duplicates.length > 0) {
       throw new Error(
-        `[DataTable] Duplicate column IDs found: ${duplicates.join(', ')}. ` +
+        `[DataTable] Duplicate column IDs found: ${duplicates.join(',')}. ` +
           'Each column must have a unique ID.'
       );
     }
@@ -430,7 +430,7 @@
           {:else}
             <tr
               class={cn(
-                'bg-card transition-colors',
+                'bg-card',
                 onRowClick && 'cursor-pointer hover:bg-muted-hover',
                 row.isSelected && 'bg-primary/5'
               )}

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

@@ -21,11 +21,11 @@
    * ## Basic Usage
    * ```svelte
    * <DataTable
-   *   data={users}
-   *   columns={[
-   *     { id: 'name', header: 'Name', accessor: 'name', sortable: true },
-   *     { id: 'email', header: 'Email', accessor: 'email' },
-   *   ]}
+   * data={users}
+   * columns={[
+   * { id: 'name', header: 'Name', accessor: 'name', sortable: true },
+   * { id: 'email', header: 'Email', accessor: 'email' },
+   * ]}
    * />
    * ```
    */

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',

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
@@ -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

@@ -96,7 +96,7 @@
                   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}
@@ -123,7 +123,7 @@
             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}

package/dist/lib/components/FileUpload.svelte

@@ -38,6 +38,12 @@
     label?: string;
     /** Hint text shown below the drop zone */
     hint?: string;
+    /**
+     * Human-friendly label for the accepted file types shown in the drop zone.
+     * When omitted, a readable label is derived from `acceptedTypes`
+     * (e.g. "Images, PDF, Videos") instead of showing raw MIME types.
+     */
+    typesLabel?: string;
     /** Additional classes */
     class?: string;
   }
@@ -56,6 +62,7 @@
     onUpload,
     label,
     hint,
+    typesLabel,
     class: className,
   }: Props = $props();
 
@@ -68,6 +75,33 @@
 
   const displayError = $derived(externalError || internalError);
 
+  /**
+   * Readable label for the accepted types shown in the drop zone.
+   * Uses the explicit `typesLabel` when provided, otherwise groups the
+   * accepted MIME types into friendly names (Images, PDF, Videos, ...).
+   */
+  const acceptedTypesLabel = $derived.by(() => {
+    if (typesLabel) return typesLabel;
+
+    const groups: string[] = [];
+    const add = (name: string) => {
+      if (!groups.includes(name)) groups.push(name);
+    };
+
+    for (const type of acceptedTypes) {
+      if (type.startsWith('image/')) add('Images');
+      else if (type === 'application/pdf') add('PDF');
+      else if (type.startsWith('video/')) add('Videos');
+      else if (type.startsWith('audio/')) add('Audio');
+      else {
+        const subtype = type.split('/')[1];
+        add(subtype ? subtype.toUpperCase() : type);
+      }
+    }
+
+    return groups.join(', ');
+  });
+
   // Helper to generate unique ID
   function generateId(): string {
     return `file-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
@@ -337,7 +371,7 @@
       <span class="font-medium text-foreground">Click to upload</span> or drag and drop
     </p>
     <p class="mt-1 text-xs text-muted-foreground">
-      {acceptedTypes.join(', ')} (max {formatSize(maxSizeBytes)})
+      {acceptedTypesLabel} (max {formatSize(maxSizeBytes)})
     </p>
 
     <!-- Hidden file input -->

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

@@ -34,6 +34,12 @@ interface Props {
     label?: string;
     /** Hint text shown below the drop zone */
     hint?: string;
+    /**
+     * Human-friendly label for the accepted file types shown in the drop zone.
+     * When omitted, a readable label is derived from `acceptedTypes`
+     * (e.g. "Images, PDF, Videos") instead of showing raw MIME types.
+     */
+    typesLabel?: string;
     /** Additional classes */
     class?: string;
 }

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/Input.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { cn } from '../utils.js';
+  import { DEV } from 'esm-env';
 
   interface Props {
     type?: string;
@@ -46,6 +47,17 @@
     ...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;
@@ -68,6 +80,7 @@
   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'

package/dist/lib/components/MultiSelect.svelte

@@ -259,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}
@@ -392,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}

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/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>
 
@@ -77,4 +85,8 @@
   >
     <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/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/Tabs.svelte

@@ -114,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/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

@@ -69,7 +69,7 @@
 <!-- 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/utils.d.ts

@@ -6,9 +6,11 @@ import { type ClassValue } from 'clsx';
 export declare function cn(...inputs: ClassValue[]): string;
 /**
  * Generate a unique ID with an optional prefix.
- * IDs are sequential and stable, preventing SSR hydration mismatches.
+ * Uses crypto.randomUUID() to avoid SSR hydration mismatches caused by
+ * sequential counters (where server and client counts can diverge).
+ * The short suffix is derived from the UUID for compact, readable IDs.
  *
  * @param prefix - Optional prefix for the ID (e.g., 'checkbox', 'tabs')
- * @returns A unique ID string like 'checkbox-1' or 'ct-1' (ct = classic-theme)
+ * @returns A unique ID string like 'checkbox-a1b2c3d4' or 'ct-a1b2c3d4'
  */
 export declare function useId(prefix?: string): string;

package/dist/lib/utils.js

@@ -7,22 +7,16 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
-/**
- * Counter for generating unique sequential IDs.
- * Uses a sequential counter instead of Math.random() to ensure:
- * - Deterministic IDs that match between SSR and hydration
- * - Stable IDs across component re-renders
- * - Accessibility-friendly ID associations
- */
-let idCounter = 0;
 /**
  * Generate a unique ID with an optional prefix.
- * IDs are sequential and stable, preventing SSR hydration mismatches.
+ * Uses crypto.randomUUID() to avoid SSR hydration mismatches caused by
+ * sequential counters (where server and client counts can diverge).
+ * The short suffix is derived from the UUID for compact, readable IDs.
  *
  * @param prefix - Optional prefix for the ID (e.g., 'checkbox', 'tabs')
- * @returns A unique ID string like 'checkbox-1' or 'ct-1' (ct = classic-theme)
+ * @returns A unique ID string like 'checkbox-a1b2c3d4' or 'ct-a1b2c3d4'
  */
 export function useId(prefix) {
-    const id = ++idCounter;
+    const id = crypto.randomUUID().slice(0, 8);
     return prefix ? `${prefix}-${id}` : `ct-${id}`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "0.1.53",
+  "version": "0.1.55",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",
@@ -27,7 +27,7 @@
   "scripts": {
     "build": "svelte-package -i src",
     "dev": "svelte-package -i src --watch",
-    "clean": "rm -rf dist",
+    "clean": "node ../../scripts/rm.mjs dist",
     "typecheck": "svelte-check --tsconfig ./tsconfig.json",
     "test": "vitest run",
     "test:watch": "vitest",
@@ -69,7 +69,7 @@
   },
   "devDependencies": {
     "@sveltejs/package": "^2.3.0",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/svelte": "^5.0.0",
     "@testing-library/user-event": "^14.5.0",