@fragments-sdk/ui 0.7.3 → 0.7.5

package/src/components/Combobox/Combobox.test.tsx

@@ -0,0 +1,202 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
+import { Combobox } from './index';
+
+function renderCombobox(props: { onValueChange?: (v: string | string[] | null) => void; multiple?: boolean; placeholder?: string } = {}) {
+  return render(
+    <Combobox
+      placeholder={props.placeholder ?? 'Search...'}
+      onValueChange={props.onValueChange}
+      multiple={props.multiple}
+    >
+      <Combobox.Input />
+      <Combobox.Content>
+        <Combobox.Item value="react">React</Combobox.Item>
+        <Combobox.Item value="vue">Vue</Combobox.Item>
+        <Combobox.Item value="angular">Angular</Combobox.Item>
+        <Combobox.Empty>No results found</Combobox.Empty>
+      </Combobox.Content>
+    </Combobox>
+  );
+}
+
+describe('Combobox', () => {
+  it('renders an input and a trigger button', () => {
+    renderCombobox();
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  it('shows placeholder text', () => {
+    renderCombobox({ placeholder: 'Type to search' });
+    expect(screen.getByPlaceholderText('Type to search')).toBeInTheDocument();
+  });
+
+  it('opens dropdown and shows options when trigger is clicked', async () => {
+    const user = userEvent.setup();
+    renderCombobox();
+    // Click the combobox input to open
+    await user.click(screen.getByRole('combobox'));
+    expect(await screen.findByRole('option', { name: 'React' })).toBeInTheDocument();
+    expect(await screen.findByRole('option', { name: 'Vue' })).toBeInTheDocument();
+  });
+
+  it('selects an option on click', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderCombobox({ onValueChange: onChange });
+
+    await user.click(screen.getByRole('combobox'));
+    const option = await screen.findByRole('option', { name: 'React' });
+    await user.click(option);
+    expect(onChange).toHaveBeenCalledWith('react');
+  });
+
+  it('filters options based on input text', async () => {
+    const user = userEvent.setup();
+    renderCombobox();
+
+    const input = screen.getByRole('combobox');
+    await user.click(input);
+    await user.type(input, 'rea');
+    // React should be visible, Vue/Angular may be filtered out
+    expect(await screen.findByRole('option', { name: 'React' })).toBeInTheDocument();
+  });
+
+  it('renders groups and group labels', async () => {
+    const user = userEvent.setup();
+    render(
+      <Combobox placeholder="Search">
+        <Combobox.Input />
+        <Combobox.Content>
+          <Combobox.Group>
+            <Combobox.GroupLabel>Frameworks</Combobox.GroupLabel>
+            <Combobox.Item value="react">React</Combobox.Item>
+          </Combobox.Group>
+        </Combobox.Content>
+      </Combobox>
+    );
+    await user.click(screen.getByRole('combobox'));
+    expect(await screen.findByText('Frameworks')).toBeInTheDocument();
+  });
+
+  it('supports multiple selection mode', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderCombobox({ multiple: true, onValueChange: onChange });
+
+    await user.click(screen.getByRole('combobox'));
+    const option = await screen.findByRole('option', { name: 'React' });
+    await user.click(option);
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <Combobox placeholder="Search...">
+        <Combobox.Input aria-label="Search frameworks" />
+        <Combobox.Content>
+          <Combobox.Item value="react">React</Combobox.Item>
+        </Combobox.Content>
+      </Combobox>
+    );
+    // The internal Base UI trigger button lacks aria-label by design (it's a
+    // decorative chevron next to the labeled input). Disable button-name for
+    // this component-level test.
+    await expectNoA11yViolations(container, {
+      disabledRules: ['button-name'],
+    });
+  });
+
+  describe('keyboard & focus', () => {
+    it('ArrowDown opens the dropdown from input', async () => {
+      const user = userEvent.setup();
+      renderCombobox();
+
+      const input = screen.getByRole('combobox');
+      await user.click(input);
+      // Close it first, then reopen with keyboard
+      await user.keyboard('{Escape}');
+      await user.keyboard('{ArrowDown}');
+      expect(await screen.findByRole('option', { name: 'React' })).toBeInTheDocument();
+    });
+
+    it('options are rendered in listbox when open', async () => {
+      const user = userEvent.setup();
+      renderCombobox();
+
+      await user.click(screen.getByRole('combobox'));
+      expect(await screen.findByRole('option', { name: 'React' })).toBeInTheDocument();
+      expect(screen.getByRole('option', { name: 'Vue' })).toBeInTheDocument();
+      expect(screen.getByRole('option', { name: 'Angular' })).toBeInTheDocument();
+    });
+
+    it('input has aria-expanded when dropdown is open', async () => {
+      const user = userEvent.setup();
+      renderCombobox();
+
+      const input = screen.getByRole('combobox');
+      await user.click(input);
+      await screen.findByRole('option', { name: 'React' });
+      expect(input).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    it('clicking an option selects it', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      renderCombobox({ onValueChange: onChange });
+
+      await user.click(screen.getByRole('combobox'));
+      const option = await screen.findByRole('option', { name: 'Vue' });
+      await user.click(option);
+      expect(onChange).toHaveBeenCalledWith('vue');
+    });
+
+    it('Escape closes the dropdown', async () => {
+      const user = userEvent.setup();
+      renderCombobox();
+
+      await user.click(screen.getByRole('combobox'));
+      await screen.findByRole('option', { name: 'React' });
+
+      await user.keyboard('{Escape}');
+      expect(screen.queryByRole('option')).not.toBeInTheDocument();
+    });
+
+    it('focus stays on input after Escape', async () => {
+      const user = userEvent.setup();
+      renderCombobox();
+
+      const input = screen.getByRole('combobox');
+      await user.click(input);
+      await screen.findByRole('option', { name: 'React' });
+
+      await user.keyboard('{Escape}');
+      expect(input).toHaveFocus();
+    });
+
+    it('typing filters results to show matching option', async () => {
+      const user = userEvent.setup();
+      renderCombobox();
+
+      const input = screen.getByRole('combobox');
+      await user.click(input);
+      await user.type(input, 'rea');
+
+      // React should be visible after filtering
+      expect(await screen.findByRole('option', { name: 'React' })).toBeInTheDocument();
+    });
+
+    it('Escape after filtering closes the dropdown', async () => {
+      const user = userEvent.setup();
+      renderCombobox();
+
+      const input = screen.getByRole('combobox');
+      await user.click(input);
+      await user.type(input, 'vue');
+      await screen.findByRole('option', { name: 'Vue' });
+
+      await user.keyboard('{Escape}');
+      expect(screen.queryByRole('option')).not.toBeInTheDocument();
+    });
+  });
+});

package/src/components/ConversationList/ConversationList.module.scss

@@ -23,7 +23,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--fui-space-2, $fui-space-2);
-  padding: var(--fui-space-3, $fui-space-3);
+  padding: var(--fui-padding-container-sm);
   min-height: 100%;
 }
 
@@ -36,7 +36,7 @@
   align-items: center;
   justify-content: center;
   gap: var(--fui-space-2, $fui-space-2);
-  padding: var(--fui-space-3, $fui-space-3);
+  padding: var(--fui-padding-container-sm);
   color: var(--fui-text-secondary, $fui-text-secondary);
   font-size: var(--fui-font-size-xs, $fui-font-size-xs);
 }
@@ -92,7 +92,7 @@
   display: flex;
   align-items: center;
   gap: var(--fui-space-2, $fui-space-2);
-  padding: var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-padding-inline-sm);
 }
 
 .typingAvatar {
@@ -116,7 +116,7 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
+  padding: var(--fui-padding-inline-sm) var(--fui-padding-inline-md);
   background-color: var(--fui-bg-secondary, $fui-bg-secondary);
   border-radius: var(--fui-radius-lg, $fui-radius-lg);
 }

package/src/components/ConversationList/ConversationList.test.tsx

@@ -0,0 +1,79 @@
+import { describe, it, expect, vi, beforeAll } from 'vitest';
+import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import { ConversationList } from './index';
+
+// jsdom does not implement scrollTo
+beforeAll(() => {
+  Element.prototype.scrollTo = vi.fn();
+});
+
+describe('ConversationList', () => {
+  it('renders children as messages', () => {
+    render(
+      <ConversationList>
+        <div>Message 1</div>
+        <div>Message 2</div>
+      </ConversationList>
+    );
+    expect(screen.getByText('Message 1')).toBeInTheDocument();
+    expect(screen.getByText('Message 2')).toBeInTheDocument();
+  });
+
+  it('renders empty state when no children', () => {
+    render(
+      <ConversationList emptyState={<div>No messages yet</div>}>
+        {null}
+      </ConversationList>
+    );
+    expect(screen.getByText('No messages yet')).toBeInTheDocument();
+  });
+
+  it('renders DateSeparator with role="separator"', () => {
+    const date = new Date(2025, 0, 15);
+    render(
+      <ConversationList>
+        <ConversationList.DateSeparator date={date} />
+        <div>Message</div>
+      </ConversationList>
+    );
+    expect(screen.getByRole('separator')).toBeInTheDocument();
+  });
+
+  it('renders DateSeparator with custom format function', () => {
+    const date = new Date(2025, 0, 15);
+    render(
+      <ConversationList>
+        <ConversationList.DateSeparator date={date} format={() => 'Custom Date'} />
+      </ConversationList>
+    );
+    expect(screen.getByText('Custom Date')).toBeInTheDocument();
+  });
+
+  it('renders TypingIndicator with accessible label', () => {
+    render(
+      <ConversationList>
+        <ConversationList.TypingIndicator name="Claude" />
+      </ConversationList>
+    );
+    expect(screen.getByLabelText('Claude is typing')).toBeInTheDocument();
+  });
+
+  it('shows loading history spinner when loadingHistory is true', () => {
+    render(
+      <ConversationList loadingHistory>
+        <div>Message</div>
+      </ConversationList>
+    );
+    expect(screen.getByText('Loading history...')).toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <ConversationList>
+        <div>Message 1</div>
+        <div>Message 2</div>
+      </ConversationList>
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Dialog/Dialog.test.tsx

@@ -0,0 +1,277 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, userEvent, waitFor, expectNoA11yViolations } from '../../test/utils';
+import { Dialog } from './index';
+
+function renderDialog(props: Partial<React.ComponentProps<typeof Dialog>> = {}) {
+  return render(
+    <Dialog {...props}>
+      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+      <Dialog.Content>
+        <Dialog.Header>
+          <Dialog.Title>Dialog Title</Dialog.Title>
+          <Dialog.Close />
+        </Dialog.Header>
+        <Dialog.Body>
+          <Dialog.Description>Dialog description text</Dialog.Description>
+          <p>Body content</p>
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Dialog.Close asChild>
+            <button>Cancel</button>
+          </Dialog.Close>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
+
+describe('Dialog', () => {
+  it('opens when trigger is clicked', async () => {
+    const user = userEvent.setup();
+    renderDialog();
+
+    expect(screen.queryByText('Dialog Title')).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: /open dialog/i }));
+    await waitFor(() => {
+      expect(screen.getByText('Dialog Title')).toBeInTheDocument();
+    });
+  });
+
+  it('closes when close button is clicked', async () => {
+    const user = userEvent.setup();
+    renderDialog({ defaultOpen: true });
+
+    await waitFor(() => {
+      expect(screen.getByText('Dialog Title')).toBeInTheDocument();
+    });
+
+    const closeButton = screen.getByRole('button', { name: /close dialog/i });
+    await user.click(closeButton);
+
+    await waitFor(() => {
+      expect(screen.queryByText('Dialog Title')).not.toBeInTheDocument();
+    });
+  });
+
+  it('close button has aria-label', async () => {
+    renderDialog({ defaultOpen: true });
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /close dialog/i })).toBeInTheDocument();
+    });
+  });
+
+  it('renders title and description', async () => {
+    renderDialog({ defaultOpen: true });
+
+    await waitFor(() => {
+      expect(screen.getByText('Dialog Title')).toBeInTheDocument();
+      expect(screen.getByText('Dialog description text')).toBeInTheDocument();
+    });
+  });
+
+  it('renders compound sub-components (Header, Body, Footer)', async () => {
+    renderDialog({ defaultOpen: true });
+
+    await waitFor(() => {
+      expect(screen.getByText('Body content')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+    });
+  });
+
+  it('supports size variant prop', async () => {
+    render(
+      <Dialog defaultOpen>
+        <Dialog.Trigger>Open</Dialog.Trigger>
+        <Dialog.Content size="lg">
+          <Dialog.Title>Large Dialog</Dialog.Title>
+        </Dialog.Content>
+      </Dialog>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Large Dialog')).toBeInTheDocument();
+    });
+  });
+
+  it('renders as modal by default', async () => {
+    renderDialog({ defaultOpen: true });
+
+    await waitFor(() => {
+      expect(screen.getByText('Dialog Title')).toBeInTheDocument();
+    });
+  });
+
+  it('has no accessibility violations when open', async () => {
+    const { container } = renderDialog({ defaultOpen: true });
+
+    await waitFor(() => {
+      expect(screen.getByText('Dialog Title')).toBeInTheDocument();
+    });
+
+    await expectNoA11yViolations(container, {
+      // Base UI focus guard spans have role="button" without labels.
+      disabledRules: ['aria-command-name'],
+    });
+  });
+
+  describe('keyboard & focus', () => {
+    it('Escape closes dialog (WCAG 2.1.1)', async () => {
+      const user = userEvent.setup();
+      renderDialog({ defaultOpen: true });
+
+      await waitFor(() => {
+        expect(screen.getByText('Dialog Title')).toBeInTheDocument();
+      });
+
+      await user.keyboard('{Escape}');
+
+      await waitFor(() => {
+        expect(screen.queryByText('Dialog Title')).not.toBeInTheDocument();
+      });
+    });
+
+    it('focus moves into dialog on open (WCAG 2.4.3)', async () => {
+      const user = userEvent.setup();
+      renderDialog();
+
+      await user.click(screen.getByRole('button', { name: /open dialog/i }));
+
+      await waitFor(() => {
+        expect(screen.getByText('Dialog Title')).toBeInTheDocument();
+      });
+
+      await waitFor(() => {
+        const dialog = screen.getByRole('dialog');
+        expect(dialog.contains(document.activeElement)).toBe(true);
+      });
+    });
+
+    it('focus returns to trigger on Escape (WCAG 2.4.3)', async () => {
+      const user = userEvent.setup();
+      renderDialog();
+
+      const trigger = screen.getByRole('button', { name: /open dialog/i });
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByText('Dialog Title')).toBeInTheDocument();
+      });
+
+      await user.keyboard('{Escape}');
+
+      await waitFor(() => {
+        expect(screen.queryByText('Dialog Title')).not.toBeInTheDocument();
+      });
+
+      await waitFor(() => {
+        expect(trigger).toHaveFocus();
+      });
+    });
+
+    it('focus returns to trigger on Close button click (WCAG 2.4.3)', async () => {
+      const user = userEvent.setup();
+      renderDialog();
+
+      const trigger = screen.getByRole('button', { name: /open dialog/i });
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByText('Dialog Title')).toBeInTheDocument();
+      });
+
+      const closeButton = screen.getByRole('button', { name: /close dialog/i });
+      await user.click(closeButton);
+
+      await waitFor(() => {
+        expect(screen.queryByText('Dialog Title')).not.toBeInTheDocument();
+      });
+
+      await waitFor(() => {
+        expect(trigger).toHaveFocus();
+      });
+    });
+
+    it('Tab cycles within dialog (focus trap) (WCAG 2.1.2)', async () => {
+      const user = userEvent.setup();
+      renderDialog({ defaultOpen: true });
+
+      await waitFor(() => {
+        expect(screen.getByText('Dialog Title')).toBeInTheDocument();
+      });
+
+      const dialog = screen.getByRole('dialog');
+      const closeButton = screen.getByRole('button', { name: /close dialog/i });
+      const cancelButton = screen.getByRole('button', { name: /cancel/i });
+
+      // Tab through focusable elements — focus should stay inside dialog
+      await user.tab();
+      await user.tab();
+      await user.tab();
+
+      await waitFor(() => {
+        expect(dialog.contains(document.activeElement)).toBe(true);
+      });
+
+      // Verify that close and cancel buttons are reachable
+      // Focus one of them directly and confirm containment
+      closeButton.focus();
+      expect(dialog.contains(document.activeElement)).toBe(true);
+
+      cancelButton.focus();
+      expect(dialog.contains(document.activeElement)).toBe(true);
+    });
+
+    it('Shift+Tab cycles backward (WCAG 2.1.2)', async () => {
+      const user = userEvent.setup();
+      renderDialog({ defaultOpen: true });
+
+      await waitFor(() => {
+        expect(screen.getByText('Dialog Title')).toBeInTheDocument();
+      });
+
+      const dialog = screen.getByRole('dialog');
+
+      // Shift+Tab backward multiple times — focus should remain trapped
+      await user.keyboard('{Shift>}{Tab}{/Shift}');
+      await user.keyboard('{Shift>}{Tab}{/Shift}');
+      await user.keyboard('{Shift>}{Tab}{/Shift}');
+
+      await waitFor(() => {
+        expect(dialog.contains(document.activeElement)).toBe(true);
+      });
+    });
+
+    it('role="dialog" is present when open (WCAG 4.1.2)', async () => {
+      renderDialog({ defaultOpen: true });
+
+      await waitFor(() => {
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+      });
+    });
+
+    it('Cancel button closes dialog and returns focus (WCAG 2.4.3)', async () => {
+      const user = userEvent.setup();
+      renderDialog();
+
+      const trigger = screen.getByRole('button', { name: /open dialog/i });
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByText('Dialog Title')).toBeInTheDocument();
+      });
+
+      const cancelButton = screen.getByRole('button', { name: /cancel/i });
+      await user.click(cancelButton);
+
+      await waitFor(() => {
+        expect(screen.queryByText('Dialog Title')).not.toBeInTheDocument();
+      });
+
+      await waitFor(() => {
+        expect(trigger).toHaveFocus();
+      });
+    });
+  });
+});

package/src/components/Dialog/index.tsx

@@ -135,11 +135,11 @@ function DialogContent({
   return (
     <BaseDialog.Portal>
       <BaseDialog.Backdrop className={styles.backdrop} />
-      <div className={styles.positioner}>
-        <BaseDialog.Popup {...htmlProps} className={popupClasses}>
+      <BaseDialog.Viewport className={styles.positioner}>
+        <BaseDialog.Popup initialFocus {...htmlProps} className={popupClasses}>
           {children}
         </BaseDialog.Popup>
-      </div>
+      </BaseDialog.Viewport>
     </BaseDialog.Portal>
   );
 }
@@ -177,7 +177,11 @@ function DialogClose({ children, asChild, className }: DialogCloseProps) {
   // If no children, render the default X close button
   if (!children) {
     return (
-      <BaseDialog.Close className={[styles.close, className].filter(Boolean).join(' ')}>
+      <BaseDialog.Close
+        data-dialog-close
+        aria-label="Close dialog"
+        className={[styles.close, className].filter(Boolean).join(' ')}
+      >
         <CloseIcon />
       </BaseDialog.Close>
     );
@@ -185,14 +189,18 @@ function DialogClose({ children, asChild, className }: DialogCloseProps) {
 
   if (asChild) {
     return (
-      <BaseDialog.Close className={className} render={children as React.ReactElement}>
+      <BaseDialog.Close
+        data-dialog-close
+        className={className}
+        render={children as React.ReactElement}
+      >
         {null}
       </BaseDialog.Close>
     );
   }
 
   return (
-    <BaseDialog.Close className={className}>
+    <BaseDialog.Close data-dialog-close className={className}>
       {children}
     </BaseDialog.Close>
   );

package/src/components/EmptyState/EmptyState.module.scss

@@ -13,7 +13,7 @@
 
 // Size variants
 .sm {
-  padding: var(--fui-space-6, $fui-space-6) var(--fui-space-4, $fui-space-4);
+  padding: var(--fui-padding-container-lg) var(--fui-padding-container-md);
 
   .title {
     font-size: var(--fui-font-size-sm, $fui-font-size-sm);
@@ -34,7 +34,7 @@
 }
 
 .md {
-  padding: var(--fui-space-10, $fui-space-10) var(--fui-space-6, $fui-space-6);
+  padding: var(--fui-space-10, $fui-space-10) var(--fui-padding-container-lg);
 
   .title {
     font-size: var(--fui-font-size-base, $fui-font-size-base);
@@ -55,7 +55,7 @@
 }
 
 .lg {
-  padding: var(--fui-space-12, $fui-space-12) var(--fui-space-8, $fui-space-8);
+  padding: var(--fui-space-12, $fui-space-12) var(--fui-padding-container-xl);
 
   .title {
     font-size: var(--fui-font-size-lg, $fui-font-size-lg);