@jmruthers/pace-core 0.5.189 → 0.5.190

package/src/components/Alert/Alert.test.tsx

@@ -11,6 +11,19 @@ import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 
 describe('Alert Component', () => {
     describe('Rendering', () => {
+    it('renders as semantic aside element', () => {
+      renderWithProviders(
+        <Alert>
+          <AlertTitle>Test Title</AlertTitle>
+          <AlertDescription>Test description</AlertDescription>
+        </Alert>
+      );
+      
+      const alert = screen.getByRole('alert');
+      expect(alert.tagName).toBe('ASIDE');
+      expect(alert).toBeInTheDocument();
+    });
+
     it('renders with default variant', () => {
       renderWithProviders(
         <Alert>
@@ -21,6 +34,7 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
       expect(alert).toHaveClass('relative', 'w-full', 'rounded-lg', 'border', 'p-4');
     });
 
@@ -34,6 +48,7 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
       expect(alert).toHaveClass('border-destructive', 'text-destructive');
     });
 
@@ -58,6 +73,7 @@ describe('Alert Component', () => {
       );
       
       const alert = screen.getByRole('alert');
+      expect(alert.tagName).toBe('ASIDE');
       expect(alert).toHaveClass('custom-alert-class');
     });
 
@@ -72,7 +88,7 @@ describe('Alert Component', () => {
     });
 
     it('forwards ref correctly', () => {
-      const ref = React.createRef<HTMLDivElement>();
+      const ref = React.createRef<HTMLElement>();
       
       renderWithProviders(
         <Alert ref={ref}>
@@ -80,7 +96,8 @@ describe('Alert Component', () => {
         </Alert>
       );
       
-      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+      expect(ref.current).toBeInstanceOf(HTMLElement);
+      expect(ref.current?.tagName).toBe('ASIDE');
       expect(ref.current).toHaveAttribute('role', 'alert');
     });
   });
@@ -258,6 +275,7 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
     });
 
     it('does not have role="alert" for inline variant', () => {
@@ -283,6 +301,7 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
       
       // Screen readers will announce the content within the alert
       expect(screen.getByText('Important Notice')).toBeInTheDocument();
@@ -297,9 +316,11 @@ describe('Alert Component', () => {
         </Alert>
       );
       
+      const alert = screen.getByRole('alert');
       const title = screen.getByRole('heading', { level: 5 });
       const description = screen.getByText('Semantic description with proper heading structure');
       
+      expect(alert.tagName).toBe('ASIDE');
       expect(title).toBeInTheDocument();
       expect(description.tagName).toBe('P');
     });
@@ -320,7 +341,9 @@ describe('Alert Component', () => {
         </Alert>
       );
       
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
       expect(screen.getByText('⚠️')).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Dismiss' })).toBeInTheDocument();
     });
@@ -334,7 +357,9 @@ describe('Alert Component', () => {
         </Alert>
       );
       
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
       expect(screen.getByText('First description')).toBeInTheDocument();
       expect(screen.getByText('Second description')).toBeInTheDocument();
     });
@@ -346,7 +371,9 @@ describe('Alert Component', () => {
         </Alert>
       );
       
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
       expect(screen.getByText('Description without title')).toBeInTheDocument();
     });
 
@@ -357,7 +384,9 @@ describe('Alert Component', () => {
         </Alert>
       );
       
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
       expect(screen.getByRole('heading', { level: 5 })).toHaveTextContent('Title without description');
     });
   });
@@ -368,6 +397,7 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
       expect(alert).toBeEmptyDOMElement();
     });
 
@@ -395,7 +425,9 @@ describe('Alert Component', () => {
       );
       
       // Should fallback to default behavior
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
     });
 
     it('handles rapid variant changes', () => {
@@ -424,7 +456,9 @@ describe('Alert Component', () => {
         </Alert>
       );
       
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
     });
   });
 
@@ -441,7 +475,9 @@ describe('Alert Component', () => {
         </form>
       );
       
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
       expect(screen.getByRole('textbox')).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
     });
@@ -462,6 +498,8 @@ describe('Alert Component', () => {
       
       const alerts = screen.getAllByRole('alert');
       expect(alerts).toHaveLength(2);
+      expect(alerts[0].tagName).toBe('ASIDE');
+      expect(alerts[1].tagName).toBe('ASIDE');
       expect(alerts[0]).toHaveClass('bg-background', 'text-foreground');
       expect(alerts[1]).toHaveClass('border-destructive', 'text-destructive');
     });
@@ -482,7 +520,9 @@ describe('Alert Component', () => {
         </Alert>
       );
       
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
       expect(screen.getByText('Complex Alert')).toBeInTheDocument();
       expect(screen.getByText('This is a complex description with')).toBeInTheDocument();
       expect(screen.getByText('Multiple elements')).toBeInTheDocument();

package/src/components/Alert/Alert.tsx

@@ -10,6 +10,7 @@
  * Features:
  * - Multiple visual variants (default, destructive, inline)
  * - Title and description support
+ * - Semantic HTML: renders as `<aside>` element
  * - ARIA role="alert" for accessibility
  * - Keyboard and screen reader accessible
  * - Composable with icons and actions
@@ -40,6 +41,7 @@
  * ```
  *
  * @accessibility
+ * - Uses semantic HTML: `<aside>` element for better semantic meaning
  * - Uses role="alert" for screen reader announcement
  * - Title and description are semantically structured
  * - Supports keyboard navigation and focus
@@ -65,8 +67,8 @@ const getAlertClasses = (variant: "default" | "destructive" | "inline" = "defaul
 };
 
 const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & { variant?: "default" | "destructive" | "inline" }
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement> & { variant?: "default" | "destructive" | "inline" }
 >(({ className, variant = "default", ...props }, ref) => {
   const contextValue = React.useMemo(() => ({ variant }), [variant])
   
@@ -80,7 +82,7 @@ const Alert = React.forwardRef<
   
   return (
     <AlertContext.Provider value={contextValue}>
-      <div
+      <aside
         ref={ref}
         className={cn(getAlertClasses(variant), className)}
         role="alert"

package/src/components/Avatar/Avatar.test.tsx

@@ -10,24 +10,70 @@ import { Avatar } from './Avatar';
 import { FileCategory } from '../../types/file-reference';
 import { renderWithProviders, userEvent } from '../../__tests__/helpers/test-utils';
 
+const mockUseUnifiedAuthValue = {
+  supabase: null as Record<string, unknown> | null,
+  user: { id: 'test-user' },
+  signOut: vi.fn(),
+  updatePassword: vi.fn(),
+  isAuthenticated: true,
+  isLoading: false,
+  error: null
+};
+
+const mockUseFileReferenceById = vi.fn(() => ({
+  fileReference: null,
+  fileUrl: null,
+  isLoading: false
+}));
+
+vi.mock('../../providers/services/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: () => mockUseUnifiedAuthValue,
+  UnifiedAuthProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>
+}));
+
+vi.mock('../../hooks/useFileReference', () => ({
+  useFileReferenceById: (...args: unknown[]) => mockUseFileReferenceById(...args)
+}));
+
+// Mock FileDisplay component
+vi.mock('../FileDisplay/FileDisplay', () => ({
+  FileDisplay: ({ fallbackText, className }: any) => (
+    <div data-testid="file-display" className={className}>
+      <p>{fallbackText}</p>
+    </div>
+  )
+}));
+
 // Size classes for testing
 const sizeClasses = {
-  xs: 'h-4 w-4 text-xs',
-  sm: 'h-6 w-6 text-sm',
-  md: 'h-10 w-10 text-base',
-  lg: 'h-12 w-12 text-lg',
-  xl: 'h-16 w-16 text-xl',
-  '2xl': 'h-20 w-20 text-2xl'
+  xs: 'size-4 text-xs',
+  sm: 'size-6 text-sm',
+  md: 'size-10 text-base',
+  lg: 'size-12 text-lg',
+  xl: 'size-16 text-xl',
+  '2xl': 'size-20 text-2xl'
 };
 
-// Helper function to get the avatar container element
+// Helper function to get the avatar container element (outer container, not inner fallback)
 const getAvatarContainer = (fallbackText: string) => {
-  return screen.getByText(fallbackText).closest('div');
+  const fallbackNode = screen.getByText(fallbackText);
+  const container = fallbackNode.parentElement as HTMLElement | null;
+  if (!container) {
+    throw new Error('Avatar container not found');
+  }
+  return container;
 };
 
 describe('Avatar Component', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    mockUseUnifiedAuthValue.supabase = null;
+    mockUseFileReferenceById.mockReset();
+    mockUseFileReferenceById.mockReturnValue({
+      fileReference: null,
+      fileUrl: null,
+      isLoading: false
+    });
   });
 
   describe('Rendering', () => {
@@ -38,7 +84,8 @@ describe('Avatar Component', () => {
       
       const avatar = getAvatarContainer('AB');
       expect(avatar).toBeInTheDocument();
-      expect(avatar).toHaveClass('relative', 'flex', 'h-10', 'w-10', 'shrink-0', 'overflow-hidden', 'rounded-full');
+      // Avatar uses Tailwind v4 size-* utility instead of h-* w-*
+      expect(avatar).toHaveClass('size-10', 'overflow-hidden', 'rounded-full');
       expect(screen.getByText('AB')).toBeInTheDocument();
     });
 
@@ -53,11 +100,11 @@ describe('Avatar Component', () => {
 
     it('renders with custom size via className', () => {
       renderWithProviders(
-        <Avatar fallback="LG" className="h-16 w-16" />
+        <Avatar fallback="LG" className="size-16" />
       );
       
       const avatar = getAvatarContainer('LG');
-      expect(avatar).toHaveClass('h-16', 'w-16');
+      expect(avatar).toHaveClass('size-16');
     });
 
     it('renders with size prop', () => {
@@ -66,7 +113,7 @@ describe('Avatar Component', () => {
       );
       
       const avatar = getAvatarContainer('SM');
-      expect(avatar).toHaveClass('h-6', 'w-6', 'text-sm');
+      expect(avatar).toHaveClass('size-6', 'text-sm');
     });
 
     it('forwards ref correctly', () => {
@@ -76,7 +123,8 @@ describe('Avatar Component', () => {
         <Avatar ref={ref} fallback="RF" />
       );
       
-      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+      // Avatar uses figure element, not div
+      expect(ref.current).toBeInstanceOf(HTMLElement);
     });
 
     it('accepts HTML attributes', () => {
@@ -128,13 +176,17 @@ describe('Avatar Component', () => {
       expect(image).toBeInTheDocument();
     });
 
-    it('applies image classes correctly', () => {
+    it('applies container and image classes correctly', () => {
       renderWithProviders(
         <Avatar src="/user.jpg" alt="User" fallback="IC" className="custom-img-class" />
       );
       
       const image = screen.getByAltText('User');
-      expect(image).toHaveClass('object-cover', 'h-full', 'w-full', 'custom-img-class');
+      // className is applied to container, not image. Image only gets base image classes
+      expect(image).toHaveClass('object-cover', 'size-full');
+      // Container should have the custom className
+      const container = image.parentElement;
+      expect(container).toHaveClass('custom-img-class');
     });
   });
 
@@ -195,12 +247,10 @@ describe('Avatar Component', () => {
       const fallback = screen.getByText('AB');
       expect(fallback).toBeInTheDocument();
       expect(fallback).toHaveClass(
-        'flex',
-        'h-full',
-        'w-full',
-        'items-center',
-        'justify-center',
-        'rounded-full',
+        'size-full',
+        'grid',
+        'place-items-center',
+        'text-center',
         'text-sec-50',
         'bg-sec-500'
       );
@@ -301,8 +351,10 @@ describe('Avatar Component', () => {
       );
       
       // Avatar container should exist even with empty fallback
-      const avatar = document.querySelector('.relative.flex.h-10.w-10');
-      expect(avatar).toBeInTheDocument();
+      // Avatar uses figure element, not div
+      const fallback = document.querySelector('[aria-label=""]') as HTMLElement | null;
+      expect(fallback).not.toBeNull();
+      expect(fallback?.parentElement).toBeInstanceOf(HTMLElement);
     });
 
     it('handles very long fallback text', () => {
@@ -329,7 +381,10 @@ describe('Avatar Component', () => {
       expect(screen.getByText('123')).toBeInTheDocument();
     });
 
-    it('prioritizes direct URL over file props', () => {
+    it('prioritizes file props over direct URL', () => {
+      // Provide mock supabase so file props can be used
+      mockUseUnifiedAuthValue.supabase = {} as any;
+      
       renderWithProviders(
         <Avatar
           src="/user.jpg"
@@ -342,10 +397,12 @@ describe('Avatar Component', () => {
         />
       );
       
-      // Should show image, not FileDisplay
-      const image = screen.getByAltText('User');
-      expect(image).toBeInTheDocument();
-      expect(image).toHaveAttribute('src', '/user.jpg');
+      // File props take priority over direct URL, so should show FileDisplay
+      // FileDisplay will render fallback when file doesn't exist in test
+      // The fallback text "PR" should be visible
+      expect(screen.getByText('PR')).toBeInTheDocument();
+      // Since file props take priority, direct URL image should not be rendered
+      expect(screen.queryByAltText('User')).not.toBeInTheDocument();
     });
   });
 
@@ -405,12 +462,9 @@ describe('Avatar Component', () => {
       );
       
       const avatar = getAvatarContainer('ST');
+      // Avatar uses Tailwind v4 size-* utility instead of h-* w-*
       expect(avatar).toHaveClass(
-        'relative',
-        'flex',
-        'h-10',
-        'w-10',
-        'shrink-0',
+        'size-10',
         'overflow-hidden',
         'rounded-full'
       );
@@ -423,12 +477,10 @@ describe('Avatar Component', () => {
       
       const fallback = screen.getByText('FS');
       expect(fallback).toHaveClass(
-        'flex',
-        'h-full',
-        'w-full',
-        'items-center',
-        'justify-center',
-        'rounded-full',
+        'size-full',
+        'grid',
+        'place-items-center',
+        'text-center',
         'text-sec-50',
         'bg-sec-500'
       );
@@ -436,11 +488,11 @@ describe('Avatar Component', () => {
 
     it('handles custom size overrides', () => {
       renderWithProviders(
-        <Avatar className="h-20 w-20" fallback="CS" />
+        <Avatar className="size-20" fallback="CS" />
       );
       
       const avatar = getAvatarContainer('CS');
-      expect(avatar).toHaveClass('h-20', 'w-20');
+      expect(avatar).toHaveClass('size-20');
     });
 
     it('applies size variants correctly', () => {
@@ -453,9 +505,9 @@ describe('Avatar Component', () => {
         
         const avatar = getAvatarContainer(size.toUpperCase());
         if (size === 'md') {
-          expect(avatar).toHaveClass('h-10', 'w-10');
+          expect(avatar).toHaveClass('size-10');
         } else {
-          expect(avatar).toHaveClass(sizeClasses[size].split(' ')[0], sizeClasses[size].split(' ')[1]);
+          expect(avatar).toHaveClass(sizeClasses[size].split(' ')[0]);
         }
         
         unmount();

package/src/components/Avatar/Avatar.tsx

@@ -63,12 +63,12 @@ import { cn } from "../../utils/core/cn"
  * Size variants for avatar
  */
 const sizeClasses = {
-  xs: 'h-4 w-4 text-xs',
-  sm: 'h-6 w-6 text-sm',
-  md: 'h-10 w-10 text-base',
-  lg: 'h-12 w-12 text-lg',
-  xl: 'h-16 w-16 text-xl',
-  '2xl': 'h-20 w-20 text-2xl'
+  xs: 'size-4 text-xs',
+  sm: 'size-6 text-sm',
+  md: 'size-10 text-base',
+  lg: 'size-12 text-lg',
+  xl: 'size-16 text-xl',
+  '2xl': 'size-20 text-2xl'
 }
 
 interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -132,14 +132,14 @@ const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
     
     // Base classes for avatar container
     const baseClasses = size === 'md' 
-      ? "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"
-      : `relative flex ${sizeClasses[size]} shrink-0 overflow-hidden rounded-full`
+      ? " size-10 overflow-hidden rounded-full"
+      : ` ${sizeClasses[size]} overflow-hidden rounded-full`
     
     // Fallback classes (don't include className to avoid conflicts)
-    const fallbackClasses = "flex h-full w-full items-center justify-center rounded-full text-sec-50 bg-sec-500"
+    const fallbackClasses = "size-full grid place-items-center text-center text-sec-50 bg-sec-500"
     
     // Image classes for direct URL and fileId approaches
-    const imageClasses = "object-cover h-full w-full"
+    const imageClasses = "object-cover size-full"
     
     // Container classes (include className here for container styling)
     const containerClasses = cn(baseClasses, className)
@@ -157,15 +157,15 @@ const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
     }, [src])
     
     return (
-      <div
+      <figure
         ref={ref}
         className={containerClasses}
         {...props}
       >
         {showFallback ? (
-          <div className={fallbackClasses} aria-label={alt || fallback}>
+          <figcaption className={fallbackClasses} aria-label={alt || fallback}>
             {fallback}
-          </div>
+          </figcaption>
         ) : hasFileProps ? (
           // File reference props approach - use FileDisplay
           <FileDisplay
@@ -196,11 +196,11 @@ const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
           />
         ) : (
           // Fallback if nothing else works
-          <div className={fallbackClasses} aria-label={alt || fallback}>
+          <figcaption className={fallbackClasses} aria-label={alt || fallback}>
             {fallback}
-          </div>
+          </figcaption>
         )}
-      </div>
+      </figure>
     )
   }
 )

package/src/components/Button/Button.test.tsx

@@ -410,7 +410,8 @@ describe('IconButton Component', () => {
       );
       
       const button = screen.getByRole('button');
-      expect(button).toHaveClass('h-8', 'w-8');
+      // IconButton uses Tailwind v4 size-* utility instead of h-* w-*
+      expect(button).toHaveClass('size-8');
     });
   });
 

package/src/components/Button/Button.tsx

@@ -81,7 +81,7 @@ function getButtonClasses(variant: ButtonProps['variant'] = 'default', size: But
     default: 'h-9 px-4 py-2',
     sm: 'h-8 rounded-md px-3 text-xs',
     lg: 'h-10 rounded-md px-8',
-    icon: 'h-8 w-8',
+    icon: 'size-8',
   };
   
   return `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]}`;
@@ -183,7 +183,7 @@ export function ButtonGroup({
   };
 
   return (
-    <div
+    <fieldset
       className={cn(
         'flex',
         orientation === 'horizontal' ? 'flex-row items-center' : 'flex-col',
@@ -207,7 +207,7 @@ export function ButtonGroup({
         }
         return child;
       })}
-    </div>
+    </fieldset>
   );
 }