@jmruthers/pace-core 0.5.136 → 0.5.139

package/examples/public-pages/PublicPageUsageExample.tsx

@@ -0,0 +1,216 @@
+/**
+ * @file Public Page Usage Example
+ * @package @jmruthers/pace-core
+ * @module Examples/PublicPages
+ * @since 1.0.0
+ *
+ * A complete example showing the correct usage pattern for public pages.
+ * This example demonstrates how to properly implement public pages without
+ * authentication context conflicts.
+ *
+ * @example
+ * ```tsx
+ * import { PublicPageUsageExample } from '@jmruthers/pace-core/examples';
+ * 
+ * function App() {
+ *   return (
+ *     <BrowserRouter>
+ *       <Routes>
+ *         <Route path="/events/:eventCode/recipe-grid-report" element={<PublicPageUsageExample />} />
+ *       </Routes>
+ *     </BrowserRouter>
+ *   );
+ * }
+ * ```
+ */
+
+import React from 'react';
+import { 
+  PublicPageLayout, 
+  PublicPageHeader, 
+  PublicPageFooter,
+  EventLogo,
+  usePublicEvent,
+  usePublicRouteParams,
+  PublicLoadingSpinner,
+  PublicErrorBoundary
+} from '../../src';
+
+/**
+ * Correct usage pattern for public pages
+ * 
+ * This component demonstrates the proper way to implement public pages:
+ * 1. Use usePublicRouteParams to get the eventCode from URL
+ * 2. Use usePublicEvent to fetch event data
+ * 3. Pass event data to PublicPageLayout
+ * 4. No authentication context is triggered
+ */
+export function PublicPageUsageExample() {
+  // Step 1: Extract event code from URL parameters
+  const { eventCode } = usePublicRouteParams({ fetchEventData: false });
+  
+  // Step 2: Fetch event data using the event code
+  const { event, isLoading, error, refetch } = usePublicEvent(eventCode || '');
+
+  // Step 3: Handle loading state
+  if (isLoading) {
+    return (
+      <PublicLoadingSpinner 
+        message="Loading event details..."
+      />
+    );
+  }
+
+  // Step 4: Handle error state
+  if (error) {
+    return (
+      <div className="min-h-screen bg-main-50 flex items-center justify-center">
+        <div className="max-w-md mx-auto text-center px-4">
+          <div className="mb-6">
+            <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-acc-100 mb-4">
+              <svg className="h-6 w-6 text-acc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
+              </svg>
+            </div>
+            <h1 className="text-2xl font-bold text-sec-900 mb-2">
+              Event Not Found
+            </h1>
+            <p className="text-sec-600 mb-6">
+              The event code "{eventCode}" is invalid or the event is not available for public viewing.
+            </p>
+            <button
+              onClick={refetch}
+              className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
+            >
+              Try Again
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Step 5: Handle missing event
+  if (!event) {
+    return (
+      <div className="min-h-screen bg-main-50 flex items-center justify-center">
+        <div className="max-w-md mx-auto text-center px-4">
+          <h1 className="text-2xl font-bold text-sec-900 mb-4">
+            Event Not Available
+          </h1>
+          <p className="text-sec-600 mb-6">
+            This event is not available for public viewing.
+          </p>
+          <button
+            onClick={refetch}
+            className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
+          >
+            Try Again
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // Step 6: Render the public page with event data
+  return (
+    <PublicErrorBoundary>
+      <PublicPageLayout eventCode={eventCode || ''} event={event}>
+        <PublicPageHeader 
+          event={event}
+          eventCode={eventCode || ''}
+          title="Recipe Grid Report"
+          description="Public recipe grid report for this event"
+        />
+        
+        <main className="max-w-6xl mx-auto px-4 py-8">
+          {/* Event Overview */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
+            {/* Event Information */}
+            <div className="lg:col-span-2 space-y-6">
+              <div>
+                <h2 className="text-2xl font-bold text-sec-900 mb-4">Event Information</h2>
+                <div className="bg-sec-50 rounded-lg p-6 space-y-4">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                      <h3 className="font-semibold text-sec-700">Date</h3>
+                      <p className="text-sec-900">
+                        {event.event_date ? new Date(event.event_date).toLocaleDateString('en-AU', {
+                          weekday: 'long',
+                          year: 'numeric',
+                          month: 'long',
+                          day: 'numeric'
+                        }) : 'TBA'}
+                      </p>
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-sec-700">Venue</h3>
+                      <p className="text-sec-900">{event.event_venue || 'TBA'}</p>
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-sec-700">Participants</h3>
+                      <p className="text-sec-900">{event.event_participants || 'TBA'}</p>
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-sec-700">Event Code</h3>
+                      <p className="text-sec-900 font-mono">{event.event_code}</p>
+                    </div>
+                  </div>
+                  
+                  {event.event_news && (
+                    <div>
+                      <h3 className="font-semibold text-sec-700 mb-2">Event News</h3>
+                      <p className="text-sec-900">{event.event_news}</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Event Logo */}
+            <div className="flex justify-center lg:justify-start">
+              <div className="text-center">
+                <EventLogo
+                  eventId={event.event_id}
+                  eventName={event.event_name}
+                  organisationId={event.organisation_id}
+                  size="2xl"
+                  className="rounded-lg shadow-lg"
+                />
+                <p className="mt-4 text-sm text-sec-600">Event Logo</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Recipe Grid Report Content */}
+          <div className="mb-12">
+            <div className="bg-main-50 border border-main-200 rounded-lg p-6">
+              <h3 className="font-semibold text-main-900 mb-2">Recipe Grid Report</h3>
+              <p className="text-main-800">
+                This is where your recipe grid report content would go. 
+                The public page is now working correctly without authentication context conflicts.
+              </p>
+              <div className="mt-4 text-sm text-main-700">
+                <p><strong>Event Code:</strong> {eventCode}</p>
+                <p><strong>Event ID:</strong> {event.event_id}</p>
+                <p><strong>Event Name:</strong> {event.event_name}</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Event Footer Information */}
+          {event.event_footer && (
+            <div className="bg-sec-50 rounded-lg p-6">
+              <h3 className="font-semibold text-sec-900 mb-2">Additional Information</h3>
+              <p className="text-sec-700">{event.event_footer}</p>
+            </div>
+          )}
+        </main>
+
+        <PublicPageFooter event={event} />
+      </PublicPageLayout>
+    </PublicErrorBoundary>
+  );
+}
+
+export default PublicPageUsageExample;

package/examples/public-pages/index.ts

@@ -0,0 +1,14 @@
+/**
+ * @file Public Pages Examples
+ * @package @jmruthers/pace-core
+ * @module Examples/PublicPages
+ * @since 1.0.0
+ *
+ * Public page workflow examples
+ */
+
+export { PublicPageUsageExample } from './PublicPageUsageExample';
+export { PublicEventPage, PublicEventPageCompact } from './PublicEventPage';
+export { PublicPageApp } from './PublicPageApp';
+export { RootApp as CorrectPublicPageImplementation } from './CorrectPublicPageImplementation';
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jmruthers/pace-core",
-  "version": "0.5.136",
+  "version": "0.5.139",
   "description": "Clean, modern React component library with Tailwind v4 styling and native utilities",
   "private": false,
   "publishConfig": {
@@ -27,11 +27,6 @@
       "import": "./dist/providers.js",
       "default": "./dist/providers.js"
     },
-    "./validation": {
-      "types": "./dist/validation.d.ts",
-      "import": "./dist/validation.js",
-      "default": "./dist/validation.js"
-    },
     "./hooks": {
       "types": "./dist/hooks.d.ts",
       "import": "./dist/hooks.js",
@@ -93,10 +88,6 @@
       "import": "./src/types/index.ts",
       "default": "./src/types/index.ts"
     },
-    "./source/validation": {
-      "import": "./src/validation/index.ts",
-      "default": "./src/validation/index.ts"
-    },
     "./source/rbac": {
       "import": "./src/rbac/index.ts",
       "default": "./src/rbac/index.ts"

package/src/__tests__/TEST_STANDARD.md

@@ -289,6 +289,50 @@ mockSupabase.rpc.mockImplementation((functionName, params) => {
 });
 ```
 
+### Mock Isolation Best Practices
+
+**Problem**: Mocks can leak between test files, causing flaky tests.
+
+**Solutions**:
+
+```typescript
+// ✅ Good: Use vi.hoisted() for module mocks
+const { mockGetSignedUrl } = vi.hoisted(() => {
+  return {
+    mockGetSignedUrl: vi.fn(() => Promise.resolve({ url: 'test' }))
+  };
+});
+
+vi.mock('../utils/storage/helpers', () => ({
+  getSignedUrl: mockGetSignedUrl
+}));
+
+// ✅ Good: Reset mocks in beforeEach
+beforeEach(() => {
+  mockGetSignedUrl.mockClear();
+  mockGetSignedUrl.mockReset();
+  mockGetSignedUrl.mockImplementation(() => Promise.resolve({ url: 'test' }));
+});
+
+// ✅ Good: Use vi.spyOn for better isolation (when possible)
+const getSignedUrlSpy = vi.spyOn(storageHelpers, 'getSignedUrl');
+getSignedUrlSpy.mockResolvedValue({ url: 'test' });
+
+// ✅ Good: Use vi.stubGlobal for global mocks
+vi.stubGlobal('window', undefined);
+// Automatically restored after test
+
+// ❌ Bad: Directly modifying global objects
+delete global.window; // Can break other tests
+```
+
+**Mock Isolation Checklist**:
+- [ ] Use `vi.hoisted()` for module mocks
+- [ ] Reset mocks in `beforeEach`/`afterEach`
+- [ ] Use `vi.stubGlobal` for global mocks
+- [ ] Prefer `vi.spyOn` over `vi.mock` when possible
+- [ ] Test files in isolation to verify no leakage
+
 ### Cleanup Best Practices
 
 ```typescript
@@ -821,6 +865,54 @@ it.skip('should navigate between headers with arrow keys', async () => {
 3. Use `findBy` queries instead of `waitFor` + `getBy`
 4. Reduce timeout values for fast operations
 
+### Performance Testing Best Practices
+
+**When to Test Performance**:
+- ✅ Critical user-facing operations (rendering, navigation)
+- ✅ Operations that must complete within SLA
+- ✅ Memory-intensive operations
+- ❌ Avoid testing performance of mocked operations
+- ❌ Avoid absolute timing thresholds in CI environments
+
+**Performance Test Patterns**:
+
+```typescript
+// ❌ Bad: Absolute thresholds (brittle in CI/coverage)
+const startTime = performance.now();
+render(<Component />);
+const endTime = performance.now();
+expect(endTime - startTime).toBeLessThan(200); // Fails under coverage
+
+// ✅ Good: Behavioral assertions (focus on outcomes)
+await waitFor(() => {
+  expect(screen.getByRole('navigation')).toBeInTheDocument();
+}, { timeout: 2000 });
+
+// ✅ Good: Relative comparisons (more tolerant)
+const baseline = measureBaseline();
+const actual = measureActual();
+expect(actual).toBeLessThan(baseline * 1.5); // 50% tolerance
+
+// ✅ Good: Smoke tests (verify no regressions)
+it('renders without performance degradation', async () => {
+  const startTime = performance.now();
+  render(<Component />);
+  await waitFor(() => {
+    expect(screen.getByRole('main')).toBeInTheDocument();
+  });
+  const endTime = performance.now();
+  // Only fail if significantly slower (e.g., > 5s)
+  expect(endTime - startTime).toBeLessThan(5000);
+});
+```
+
+**Performance Test Guidelines**:
+1. **Prefer Behavioral Tests**: Focus on what users see, not raw timing
+2. **Use Relative Thresholds**: Compare against baseline, not absolute values
+3. **Skip in Coverage Mode**: Use `if (process.env.COVERAGE) return;` for timing tests
+4. **Document Thresholds**: Explain why specific timing is critical
+5. **Separate Performance Suite**: Consider separate test suite for performance tests
+
 ### Memory Management
 
 ```typescript

package/src/components/Badge/Badge.test.tsx

@@ -0,0 +1,314 @@
+/**
+ * @file Badge Component Tests
+ * @description Comprehensive test suite for Badge component
+ */
+
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Badge } from './Badge';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+import type { BadgeVariant } from './Badge';
+
+describe('Badge Component', () => {
+  describe('Rendering', () => {
+    it('renders with text content', () => {
+      renderWithProviders(<Badge>New</Badge>);
+      expect(screen.getByText('New')).toBeInTheDocument();
+    });
+
+    it('renders as span element', () => {
+      const { container } = renderWithProviders(<Badge>Test</Badge>);
+      const badge = container.querySelector('span');
+      expect(badge).toBeInTheDocument();
+    });
+
+    it('renders with custom className', () => {
+      renderWithProviders(<Badge className="custom-class">Styled badge</Badge>);
+      const badge = screen.getByText('Styled badge');
+      expect(badge).toHaveClass('custom-class');
+    });
+
+    it('renders with data-testid', () => {
+      renderWithProviders(<Badge data-testid="test-badge">Test</Badge>);
+      expect(screen.getByTestId('test-badge')).toBeInTheDocument();
+    });
+
+    it('renders with children elements', () => {
+      renderWithProviders(
+        <Badge>
+          <span>Icon</span> Text
+        </Badge>
+      );
+      expect(screen.getByText('Icon')).toBeInTheDocument();
+      expect(screen.getByText('Text')).toBeInTheDocument();
+    });
+  });
+
+  describe('Variants', () => {
+    const allVariants: BadgeVariant[] = [
+      // Solid variants
+      'solid-main-muted',
+      'solid-main-normal',
+      'solid-main-strong',
+      'solid-sec-muted',
+      'solid-sec-normal',
+      'solid-sec-strong',
+      'solid-acc-muted',
+      'solid-acc-normal',
+      'solid-acc-strong',
+      // Outline variants
+      'outline-main-muted',
+      'outline-main-normal',
+      'outline-main-strong',
+      'outline-sec-muted',
+      'outline-sec-normal',
+      'outline-sec-strong',
+      'outline-acc-muted',
+      'outline-acc-normal',
+      'outline-acc-strong',
+      // Soft variants
+      'soft-main-muted',
+      'soft-main-normal',
+      'soft-main-strong',
+      'soft-sec-muted',
+      'soft-sec-normal',
+      'soft-sec-strong',
+      'soft-acc-muted',
+      'soft-acc-normal',
+      'soft-acc-strong',
+    ];
+
+    allVariants.forEach((variant) => {
+      it(`renders ${variant} variant correctly`, () => {
+        renderWithProviders(<Badge variant={variant}>Test {variant}</Badge>);
+        const badge = screen.getByText(`Test ${variant}`);
+        expect(badge).toBeInTheDocument();
+        expect(badge).toHaveClass('inline-flex', 'items-center', 'rounded-2xl');
+      });
+    });
+
+    it('uses default variant when not specified', () => {
+      renderWithProviders(<Badge>Default</Badge>);
+      const badge = screen.getByText('Default');
+      expect(badge).toHaveClass('bg-main-500', 'text-main-50');
+    });
+
+    it('applies solid variant classes correctly', () => {
+      renderWithProviders(<Badge variant="solid-main-normal">Solid</Badge>);
+      const badge = screen.getByText('Solid');
+      expect(badge).toHaveClass('bg-main-500', 'text-main-50');
+    });
+
+    it('applies outline variant classes correctly', () => {
+      renderWithProviders(<Badge variant="outline-sec-muted">Outline</Badge>);
+      const badge = screen.getByText('Outline');
+      expect(badge).toHaveClass('outline', 'outline-1');
+    });
+
+    it('applies soft variant classes correctly', () => {
+      renderWithProviders(<Badge variant="soft-acc-strong">Soft</Badge>);
+      const badge = screen.getByText('Soft');
+      expect(badge).toHaveClass('shadow-badge-soft');
+    });
+  });
+
+  describe('Color System', () => {
+    it('uses main color palette for main variants', () => {
+      renderWithProviders(<Badge variant="solid-main-normal">Main</Badge>);
+      const badge = screen.getByText('Main');
+      expect(badge).toHaveClass('bg-main-500', 'text-main-50');
+    });
+
+    it('uses sec color palette for sec variants', () => {
+      renderWithProviders(<Badge variant="solid-sec-normal">Sec</Badge>);
+      const badge = screen.getByText('Sec');
+      expect(badge).toHaveClass('bg-sec-500', 'text-sec-50');
+    });
+
+    it('uses acc color palette for acc variants', () => {
+      renderWithProviders(<Badge variant="solid-acc-normal">Acc</Badge>);
+      const badge = screen.getByText('Acc');
+      expect(badge).toHaveClass('bg-acc-500', 'text-acc-50');
+    });
+
+    it('does not use standard Tailwind colors', () => {
+      renderWithProviders(<Badge variant="solid-main-normal">Test</Badge>);
+      const badge = screen.getByText('Test');
+      // Should not have standard Tailwind color classes
+      expect(badge).not.toHaveClass('bg-blue-', 'text-red-', 'bg-gray-', 'bg-white', 'bg-black');
+    });
+  });
+
+  describe('Shade Variants', () => {
+    it('applies muted shade correctly (dark text on light)', () => {
+      renderWithProviders(<Badge variant="solid-main-muted">Muted</Badge>);
+      const badge = screen.getByText('Muted');
+      expect(badge).toHaveClass('bg-main-200', 'text-main-600');
+    });
+
+    it('applies normal shade correctly (light text on medium)', () => {
+      renderWithProviders(<Badge variant="solid-main-normal">Normal</Badge>);
+      const badge = screen.getByText('Normal');
+      expect(badge).toHaveClass('bg-main-500', 'text-main-50');
+    });
+
+    it('applies strong shade correctly (light text on dark)', () => {
+      renderWithProviders(<Badge variant="solid-main-strong">Strong</Badge>);
+      const badge = screen.getByText('Strong');
+      expect(badge).toHaveClass('bg-main-700', 'text-main-50');
+    });
+  });
+
+  describe('Props Forwarding', () => {
+    it('forwards HTML attributes', () => {
+      renderWithProviders(
+        <Badge id="test-id" data-custom="value" aria-label="Test badge">
+          Test
+        </Badge>
+      );
+      const badge = screen.getByText('Test');
+      expect(badge).toHaveAttribute('id', 'test-id');
+      expect(badge).toHaveAttribute('data-custom', 'value');
+      expect(badge).toHaveAttribute('aria-label', 'Test badge');
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLSpanElement>();
+      renderWithProviders(<Badge ref={ref}>Ref badge</Badge>);
+      expect(ref.current).toBeInstanceOf(HTMLSpanElement);
+      expect(ref.current).toHaveTextContent('Ref badge');
+    });
+
+    it('merges custom className with variant classes', () => {
+      renderWithProviders(
+        <Badge variant="solid-main-normal" className="custom-class px-4">
+          Custom
+        </Badge>
+      );
+      const badge = screen.getByText('Custom');
+      expect(badge).toHaveClass('custom-class', 'px-4', 'bg-main-500');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('renders as non-interactive span element', () => {
+      const { container } = renderWithProviders(<Badge>Test</Badge>);
+      const badge = container.querySelector('span');
+      expect(badge).toBeInTheDocument();
+      // Should not be a button or have button role
+      expect(badge).not.toHaveAttribute('role', 'button');
+    });
+
+    it('does not have focus styles by default', () => {
+      renderWithProviders(<Badge>Test</Badge>);
+      const badge = screen.getByText('Test');
+      // Badge should not have focus-visible classes since it's non-interactive
+      expect(badge).not.toHaveClass('focus-visible:outline-none');
+    });
+
+    it('supports aria-label for screen readers', () => {
+      renderWithProviders(<Badge aria-label="Status: Active">Active</Badge>);
+      const badge = screen.getByText('Active');
+      expect(badge).toHaveAttribute('aria-label', 'Status: Active');
+    });
+
+    it('supports aria-describedby', () => {
+      renderWithProviders(
+        <Badge aria-describedby="badge-description">Test</Badge>
+      );
+      const badge = screen.getByText('Test');
+      expect(badge).toHaveAttribute('aria-describedby', 'badge-description');
+    });
+  });
+
+  describe('Integration', () => {
+    it('works with React.forwardRef', () => {
+      const ref = React.createRef<HTMLSpanElement>();
+      renderWithProviders(<Badge ref={ref}>Ref badge</Badge>);
+      expect(ref.current).toBeInstanceOf(HTMLSpanElement);
+    });
+
+    it('can be wrapped in interactive elements', () => {
+      const handleClick = vi.fn();
+      renderWithProviders(
+        <button onClick={handleClick}>
+          <Badge>Clickable badge</Badge>
+        </button>
+      );
+      const button = screen.getByRole('button');
+      expect(button).toBeInTheDocument();
+      expect(button).toHaveTextContent('Clickable badge');
+    });
+
+    it('works in complex layouts', () => {
+      renderWithProviders(
+        <div>
+          <h2>Status</h2>
+          <Badge variant="solid-main-normal">Active</Badge>
+          <Badge variant="outline-sec-muted">Pending</Badge>
+          <Badge variant="soft-acc-strong">Featured</Badge>
+        </div>
+      );
+      expect(screen.getByText('Active')).toBeInTheDocument();
+      expect(screen.getByText('Pending')).toBeInTheDocument();
+      expect(screen.getByText('Featured')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty children gracefully', () => {
+      const { container } = renderWithProviders(<Badge></Badge>);
+      const badge = container.querySelector('span');
+      expect(badge).toBeInTheDocument();
+    });
+
+    it('handles very long text content', () => {
+      const longText = 'This is a very long badge text that might cause layout issues but should be handled gracefully';
+      renderWithProviders(<Badge>{longText}</Badge>);
+      expect(screen.getByText(longText)).toBeInTheDocument();
+    });
+
+    it('handles special characters in text', () => {
+      const specialText = 'Badge with special chars: !@#$%^&*()_+-=[]{}|;:,.<>?';
+      renderWithProviders(<Badge>{specialText}</Badge>);
+      expect(screen.getByText(specialText)).toBeInTheDocument();
+    });
+
+    it('handles numeric content', () => {
+      renderWithProviders(<Badge>123</Badge>);
+      expect(screen.getByText('123')).toBeInTheDocument();
+    });
+
+    it('handles multiple className overrides', () => {
+      renderWithProviders(
+        <Badge variant="solid-main-normal" className="px-8 py-2 text-sm">
+          Override
+        </Badge>
+      );
+      const badge = screen.getByText('Override');
+      expect(badge).toHaveClass('px-8', 'py-2', 'text-sm');
+    });
+  });
+
+  describe('Style Variants', () => {
+    it('solid variant has no border or blur', () => {
+      renderWithProviders(<Badge variant="solid-main-normal">Solid</Badge>);
+      const badge = screen.getByText('Solid');
+      expect(badge).not.toHaveClass('border', 'backdrop-blur');
+    });
+
+    it('outline variant has outline', () => {
+      renderWithProviders(<Badge variant="outline-main-muted">Outline</Badge>);
+      const badge = screen.getByText('Outline');
+      expect(badge).toHaveClass('outline', 'outline-1');
+    });
+
+    it('soft variant has shadow', () => {
+      renderWithProviders(<Badge variant="soft-main-normal">Soft</Badge>);
+      const badge = screen.getByText('Soft');
+      expect(badge).toHaveClass('shadow-badge-soft');
+    });
+  });
+});
+