@classic-homes/theme-svelte 0.1.52 → 0.1.54

package/dist/__tests__/a11y/Tabs.a11y.test.js

@@ -0,0 +1,97 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'vitest-axe';
+import Tabs from '../../lib/components/Tabs.svelte';
+describe('Tabs accessibility', () => {
+    const defaultTabs = [
+        { id: 'tab1', label: 'Tab 1' },
+        { id: 'tab2', label: 'Tab 2' },
+        { id: 'tab3', label: 'Tab 3' },
+    ];
+    it('should have no axe violations', async () => {
+        const { container } = render(Tabs, {
+            props: { tabs: defaultTabs, label: 'Test tabs', id: 'test-tabs' },
+        });
+        // Add tab panels so aria-controls references are valid
+        defaultTabs.forEach((tab, i) => {
+            const panel = document.createElement('div');
+            panel.id = `test-tabs-panel-${tab.id}`;
+            panel.setAttribute('role', 'tabpanel');
+            panel.setAttribute('aria-labelledby', `test-tabs-tab-${tab.id}`);
+            panel.textContent = `Panel ${i + 1}`;
+            if (i > 0)
+                panel.hidden = true;
+            container.appendChild(panel);
+        });
+        const results = await axe(container);
+        expect(results).toHaveNoViolations();
+    });
+    it('should have proper tablist role', () => {
+        render(Tabs, {
+            props: { tabs: defaultTabs, label: 'Test tabs' },
+        });
+        const tablist = screen.getByRole('tablist');
+        expect(tablist).toBeInTheDocument();
+    });
+    it('should have proper tab roles', () => {
+        render(Tabs, {
+            props: { tabs: defaultTabs, label: 'Test tabs' },
+        });
+        const tabs = screen.getAllByRole('tab');
+        expect(tabs).toHaveLength(3);
+    });
+    it('should have accessible label on tablist', () => {
+        render(Tabs, {
+            props: { tabs: defaultTabs, label: 'Account settings' },
+        });
+        const tablist = screen.getByRole('tablist');
+        expect(tablist).toHaveAttribute('aria-label', 'Account settings');
+    });
+    it('should indicate selected tab with aria-selected', () => {
+        render(Tabs, {
+            props: { tabs: defaultTabs, value: 'tab1', label: 'Test tabs' },
+        });
+        const tabs = screen.getAllByRole('tab');
+        expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
+        expect(tabs[1]).toHaveAttribute('aria-selected', 'false');
+        expect(tabs[2]).toHaveAttribute('aria-selected', 'false');
+    });
+    it('should navigate with arrow keys', async () => {
+        render(Tabs, {
+            props: { tabs: defaultTabs, label: 'Test tabs' },
+        });
+        const tabs = screen.getAllByRole('tab');
+        // Focus first tab
+        tabs[0].focus();
+        expect(tabs[0]).toHaveFocus();
+        // Navigate right
+        await userEvent.keyboard('{ArrowRight}');
+        expect(tabs[1]).toHaveFocus();
+        // Navigate right again
+        await userEvent.keyboard('{ArrowRight}');
+        expect(tabs[2]).toHaveFocus();
+        // Navigate left
+        await userEvent.keyboard('{ArrowLeft}');
+        expect(tabs[1]).toHaveFocus();
+    });
+    it('should activate tab with click', async () => {
+        const user = userEvent.setup();
+        render(Tabs, {
+            props: { tabs: defaultTabs, value: 'tab1', label: 'Test tabs' },
+        });
+        const tabs = screen.getAllByRole('tab');
+        // Click second tab
+        await user.click(tabs[1]);
+        expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
+    });
+    it('should have aria-controls linking tab to panel', () => {
+        render(Tabs, {
+            props: { tabs: defaultTabs, label: 'Test tabs' },
+        });
+        const tabs = screen.getAllByRole('tab');
+        // Selected tab should have aria-controls
+        const selectedTab = tabs.find((tab) => tab.getAttribute('aria-selected') === 'true');
+        expect(selectedTab).toHaveAttribute('aria-controls');
+    });
+});

package/dist/__tests__/a11y/Textarea.a11y.test.js

@@ -0,0 +1,111 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'vitest-axe';
+import Textarea from '../../lib/components/Textarea.svelte';
+describe('Textarea accessibility', () => {
+    it('should have no axe violations with aria-label', async () => {
+        const { container } = render(Textarea, {
+            props: { 'aria-label': 'Description' },
+        });
+        const results = await axe(container);
+        expect(results).toHaveNoViolations();
+    });
+    it('should have no axe violations with aria-invalid', async () => {
+        const { container } = render(Textarea, {
+            props: {
+                'aria-label': 'Description',
+                'aria-invalid': true,
+                'aria-describedby': 'error',
+            },
+        });
+        const errorSpan = document.createElement('span');
+        errorSpan.id = 'error';
+        errorSpan.textContent = 'Description is required';
+        container.appendChild(errorSpan);
+        const results = await axe(container);
+        expect(results).toHaveNoViolations();
+    });
+    it('should be focusable', async () => {
+        render(Textarea, {
+            props: { 'aria-label': 'Test textarea' },
+        });
+        const textarea = screen.getByRole('textbox');
+        await userEvent.tab();
+        expect(textarea).toHaveFocus();
+    });
+    it('should support aria-describedby for help text', () => {
+        const { container } = render(Textarea, {
+            props: { 'aria-label': 'Comments', 'aria-describedby': 'help' },
+        });
+        const helpSpan = document.createElement('span');
+        helpSpan.id = 'help';
+        helpSpan.textContent = 'Enter your comments here';
+        container.appendChild(helpSpan);
+        const textarea = screen.getByRole('textbox');
+        expect(textarea).toHaveAttribute('aria-describedby', 'help');
+    });
+    it('should support aria-labelledby', () => {
+        const { container } = render(Textarea, {
+            props: { 'aria-labelledby': 'label' },
+        });
+        const labelSpan = document.createElement('span');
+        labelSpan.id = 'label';
+        labelSpan.textContent = 'Custom Label';
+        container.insertBefore(labelSpan, container.firstChild);
+        const textarea = screen.getByRole('textbox');
+        expect(textarea).toHaveAttribute('aria-labelledby', 'label');
+    });
+    it('should apply error styling when aria-invalid is true', () => {
+        render(Textarea, {
+            props: { 'aria-label': 'Description', 'aria-invalid': true },
+        });
+        const textarea = screen.getByRole('textbox');
+        expect(textarea).toHaveAttribute('aria-invalid', 'true');
+        expect(textarea.className).toContain('border-destructive');
+    });
+    it('should apply error styling when aria-invalid is "true" string', () => {
+        render(Textarea, {
+            props: { 'aria-label': 'Description', 'aria-invalid': 'true' },
+        });
+        const textarea = screen.getByRole('textbox');
+        expect(textarea.className).toContain('border-destructive');
+    });
+    it('should not apply error styling when aria-invalid is false', () => {
+        render(Textarea, {
+            props: { 'aria-label': 'Description', 'aria-invalid': false },
+        });
+        const textarea = screen.getByRole('textbox');
+        expect(textarea.className).not.toContain('border-destructive');
+    });
+    it('should be disabled when disabled prop is true', () => {
+        render(Textarea, {
+            props: { 'aria-label': 'Disabled textarea', disabled: true },
+        });
+        const textarea = screen.getByRole('textbox');
+        expect(textarea).toBeDisabled();
+    });
+    it('should support required attribute', () => {
+        render(Textarea, {
+            props: { 'aria-label': 'Required field', required: true },
+        });
+        const textarea = screen.getByRole('textbox');
+        expect(textarea).toBeRequired();
+    });
+    it('should support readonly attribute', () => {
+        render(Textarea, {
+            props: { 'aria-label': 'Readonly field', readonly: true },
+        });
+        const textarea = screen.getByRole('textbox');
+        expect(textarea).toHaveAttribute('readonly');
+    });
+    it('should have visible focus indicator', async () => {
+        render(Textarea, {
+            props: { 'aria-label': 'Test textarea' },
+        });
+        const textarea = screen.getByRole('textbox');
+        await userEvent.tab();
+        expect(textarea).toHaveFocus();
+        // Focus styles are applied via focus-visible classes
+    });
+});

package/dist/__tests__/setup.js

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom/vitest';
+import { expect, vi } from 'vitest';
+import * as matchers from 'vitest-axe/matchers';
+expect.extend(matchers);
+// Mock scrollIntoView since jsdom doesn't support it
+Element.prototype.scrollIntoView = vi.fn();

package/dist/lib/components/Alert.svelte

@@ -46,6 +46,6 @@
   );
 </script>
 
-<div role="alert" aria-live={ariaLive} class={classes} {...restProps}>
+<div role="alert" aria-live={ariaLive} aria-atomic="true" class={classes} {...restProps}>
   {@render children()}
 </div>

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,8 +51,17 @@
     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;
+    /**
+     * Screen reader-only label providing context for the badge content.
+     * Useful for count badges (e.g., "unread messages" for a badge showing "5").
+     * @example label="unread notifications"
+     */
+    label?: string;
     [key: string]: unknown;
   }
 
@@ -60,14 +69,42 @@
     variant = 'default',
     size = 'default',
     clickable = false,
+    live = false,
     class: className,
     children,
+    onclick,
+    label,
     ...restProps
   }: Props = $props();
 
   const classes = $derived(cn(badgeVariants({ variant, size, clickable }), className));
+
+  // Determine if badge is interactive (has click handler or clickable prop)
+  const isInteractive = $derived(clickable || !!onclick);
 </script>
 
-<span class={classes} {...restProps}>
-  {@render children()}
-</span>
+{#if isInteractive}
+  <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}
+    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>
+{/if}

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

@@ -4,8 +4,17 @@ 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;
+    /**
+     * Screen reader-only label providing context for the badge content.
+     * Useful for count badges (e.g., "unread messages" for a badge showing "5").
+     * @example label="unread notifications"
+     */
+    label?: string;
 }, {}, "">;
 type Badge = ReturnType<typeof Badge>;
 export default Badge;

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()}
@@ -88,10 +99,11 @@
     {@render loadingSpinner()}
     {#if loadingText}
       <span>{loadingText}</span>
-      <span class="sr-only">Loading</span>
     {:else}
       {@render children()}
     {/if}
+    <!-- Always announce loading state for screen readers -->
+    <span class="sr-only" role="status">Loading</span>
   {:else}
     {@render children()}
   {/if}

package/dist/lib/components/CardTitle.svelte

@@ -3,14 +3,20 @@
   import { cn } from '../utils.js';
 
   interface Props {
+    /** Heading level (h2 for page sections, h3 for nested, etc.) */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     class?: string;
     children: Snippet;
     [key: string]: unknown;
   }
 
-  let { class: className, children, ...restProps }: Props = $props();
+  let { as = 'h3', class: className, children, ...restProps }: Props = $props();
 </script>
 
-<h3 class={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...restProps}>
+<svelte:element
+  this={as}
+  class={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+  {...restProps}
+>
   {@render children()}
-</h3>
+</svelte:element>

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

@@ -1,5 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
+    /** Heading level (h2 for page sections, h3 for nested, etc.) */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     class?: string;
     children: Snippet;
     [key: string]: unknown;

package/dist/lib/components/Combobox.svelte

@@ -4,6 +4,7 @@
   import { generateId, computeDescribedBy } from '../utils/form.js';
   import Spinner from './Spinner.svelte';
   import Label from './Label.svelte';
+  import LiveRegion from './LiveRegion.svelte';
 
   export interface ComboboxOption {
     value: string;
@@ -124,6 +125,15 @@
 
   // Determine if we need a container wrapper
   const hasWrapper = $derived(!!label || !!hint || !!error);
+
+  // Generate announcement message for screen readers
+  const resultsAnnouncement = $derived.by(() => {
+    if (loading) return 'Loading options...';
+    if (!open) return '';
+    if (filteredOptions.length === 0) return emptyMessage;
+    const count = filteredOptions.length;
+    return `${count} ${count === 1 ? 'option' : 'options'} available`;
+  });
 </script>
 
 {#if hasWrapper}
@@ -160,6 +170,8 @@
             error && 'border-destructive focus:ring-destructive',
             className
           )}
+          role="combobox"
+          aria-expanded={open}
           aria-invalid={error ? 'true' : undefined}
           aria-describedby={describedBy}
         />
@@ -187,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">
@@ -250,6 +262,8 @@
           error && 'border-destructive focus:ring-destructive',
           className
         )}
+        role="combobox"
+        aria-expanded={open}
         aria-invalid={error ? 'true' : undefined}
         aria-describedby={describedBy}
       />
@@ -277,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">
@@ -305,3 +319,6 @@
     </ComboboxPrimitive.Content>
   </ComboboxPrimitive.Root>
 {/if}
+
+<!-- Live region for screen reader announcements -->
+<LiveRegion message={resultsAnnouncement} politeness="polite" />

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' },
+   * ]}
    * />
    * ```
    */