@sovereignfs/ui 0.41.0 → 0.54.0

package/src/components/Breadcrumb/__tests__/Breadcrumb.test.tsx

@@ -0,0 +1,52 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { Breadcrumb } from '../Breadcrumb';
+
+afterEach(cleanup);
+
+const items = [
+  { label: 'Console', href: '/console' },
+  { label: 'Plugins', href: '/console/plugins' },
+  { label: 'sovereign-tasks' },
+];
+
+describe('Breadcrumb', () => {
+  it('renders a link for every item with an href', () => {
+    render(<Breadcrumb items={items} />);
+    expect(screen.getByRole('link', { name: 'Console' })).toHaveProperty(
+      'href',
+      expect.stringContaining('/console'),
+    );
+    expect(screen.getByRole('link', { name: 'Plugins' })).toBeDefined();
+  });
+
+  it('renders the item without href as plain text with aria-current', () => {
+    render(<Breadcrumb items={items} />);
+    expect(screen.queryByRole('link', { name: 'sovereign-tasks' })).toBeNull();
+    expect(screen.getByText('sovereign-tasks').getAttribute('aria-current')).toBe('page');
+  });
+
+  it('uses a caller-supplied renderLink instead of a plain <a> when given', () => {
+    render(
+      <Breadcrumb
+        items={items}
+        renderLink={(item, children) => (
+          <button type="button" data-href={item.href}>
+            {children}
+          </button>
+        )}
+      />,
+    );
+    expect(screen.queryByRole('link', { name: 'Console' })).toBeNull();
+    expect(screen.getByRole('button', { name: 'Console' })).toHaveProperty(
+      'dataset.href',
+      '/console',
+    );
+  });
+
+  it('defaults to an accessible nav label', () => {
+    render(<Breadcrumb items={items} />);
+    expect(screen.getByRole('navigation', { name: 'Breadcrumb' })).toBeDefined();
+  });
+});

package/src/components/Button/Button.module.css

@@ -37,14 +37,23 @@
   }
 }
 
-/* Sizes */
+/* Sizes — 32px / 36px / 40px rendered height (font-size + padding*2 + border*2).
+   Vertical padding is hardcoded where the --sv-space-* scale can't hit the
+   exact target height; horizontal padding stays token-based, growing with
+   size for visual rhythm with the rest of this scale. */
 .sm {
-  padding: var(--sv-space-1) var(--sv-space-3);
+  padding: var(--sv-space-2) var(--sv-space-3);
   font-size: var(--sv-font-size-sm);
 }
 
 .md {
-  padding: 13px var(--sv-space-4);
+  padding: 10px var(--sv-space-4);
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-semibold);
+}
+
+.lg {
+  padding: var(--sv-space-3) var(--sv-space-5);
   font-size: var(--sv-font-size-sm);
   font-weight: var(--sv-font-weight-semibold);
 }

package/src/components/Button/Button.stories.tsx

@@ -16,7 +16,7 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'select', options: ['primary', 'secondary', 'ghost', 'destructive'] },
-    size: { control: 'select', options: ['sm', 'md'] },
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
     disabled: { control: 'boolean' },
     loading: { control: 'boolean' },
     children: { control: 'text' },
@@ -38,6 +38,7 @@ export const Destructive: Story = { args: { variant: 'destructive', children: 'D
 
 export const Small: Story = { args: { size: 'sm' } };
 export const Medium: Story = { args: { size: 'md' } };
+export const Large: Story = { args: { size: 'lg' } };
 
 export const Disabled: Story = { args: { disabled: true } };
 export const DisabledSecondary: Story = { args: { variant: 'secondary', disabled: true } };
@@ -71,7 +72,7 @@ export const AllVariants: Story = {
   render: (_args) => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'flex-start' }}>
       {(['primary', 'secondary', 'ghost', 'destructive'] as const).map((v) =>
-        (['md', 'sm'] as const).map((s) => (
+        (['lg', 'md', 'sm'] as const).map((s) => (
           <Button key={`${v}-${s}`} variant={v} size={s}>
             {v} / {s}
           </Button>

package/src/components/Button/Button.tsx

@@ -2,7 +2,7 @@ import type { ButtonHTMLAttributes, ReactNode } from 'react';
 import styles from './Button.module.css';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive';
-export type ButtonSize = 'sm' | 'md';
+export type ButtonSize = 'sm' | 'md' | 'lg';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: ButtonVariant;

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

@@ -20,6 +20,16 @@ describe('Button', () => {
     expect(button.className).toContain('sm');
   });
 
+  it('applies the lg size class', () => {
+    render(<Button size="lg">Upgrade</Button>);
+    expect(screen.getByRole('button', { name: 'Upgrade' }).className).toContain('lg');
+  });
+
+  it('defaults to the md size class', () => {
+    render(<Button>Confirm</Button>);
+    expect(screen.getByRole('button', { name: 'Confirm' }).className).toContain('md');
+  });
+
   it('defaults to type="button"', () => {
     render(<Button>Save</Button>);
     expect(screen.getByRole('button', { name: 'Save' }).getAttribute('type')).toBe('button');

package/src/components/ButtonGroup/ButtonGroup.module.css

@@ -0,0 +1,29 @@
+.root {
+  display: inline-flex;
+}
+
+.root > :global(button),
+.root > :global(a) {
+  border-radius: 0;
+  margin-left: -1px;
+}
+
+.root > :global(button):first-child,
+.root > :global(a):first-child {
+  margin-left: 0;
+  border-top-left-radius: var(--sv-radius-md);
+  border-bottom-left-radius: var(--sv-radius-md);
+}
+
+.root > :global(button):last-child,
+.root > :global(a):last-child {
+  border-top-right-radius: var(--sv-radius-md);
+  border-bottom-right-radius: var(--sv-radius-md);
+}
+
+/* Keep the focus ring above sibling borders instead of being clipped by them. */
+.root > :global(button):focus-visible,
+.root > :global(a):focus-visible {
+  position: relative;
+  z-index: 1;
+}

package/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ButtonGroup } from './ButtonGroup';
+import { Button } from '../Button/Button';
+
+const meta = {
+  title: 'Components/ButtonGroup',
+  component: ButtonGroup,
+  parameters: { layout: 'padded' },
+  args: { children: null },
+} satisfies Meta<typeof ButtonGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+export const Default: Story = {
+  render: () => (
+    <ButtonGroup aria-label="View">
+      <Button variant="secondary" size="sm">
+        Day
+      </Button>
+      <Button variant="secondary" size="sm">
+        Week
+      </Button>
+      <Button variant="secondary" size="sm">
+        Month
+      </Button>
+    </ButtonGroup>
+  ),
+};
+
+export const WithActiveSelection: Story = {
+  render: () => {
+    const [view, setView] = useState<'day' | 'week' | 'month'>('week');
+    const options: { value: typeof view; label: string }[] = [
+      { value: 'day', label: 'Day' },
+      { value: 'week', label: 'Week' },
+      { value: 'month', label: 'Month' },
+    ];
+    return (
+      <ButtonGroup aria-label="View">
+        {options.map((option) => (
+          <Button
+            key={option.value}
+            variant={option.value === view ? 'primary' : 'secondary'}
+            size="sm"
+            onClick={() => setView(option.value)}
+          >
+            {option.label}
+          </Button>
+        ))}
+      </ButtonGroup>
+    );
+  },
+};

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import styles from './ButtonGroup.module.css';
+
+export interface ButtonGroupProps {
+  /** Adjacent Button elements. */
+  children: ReactNode;
+  className?: string;
+  'aria-label'?: string;
+}
+
+/**
+ * ButtonGroup — visually joins adjacent `Button`s into one control (shared
+ * border, connected corners). Targets its children's rendered `<button>`/
+ * `<a>` elements directly rather than requiring a special child component,
+ * so it works with plain `Button`.
+ */
+export function ButtonGroup({ children, className, 'aria-label': ariaLabel }: ButtonGroupProps) {
+  return (
+    <div
+      role="group"
+      aria-label={ariaLabel}
+      className={[styles.root, className].filter(Boolean).join(' ')}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/ButtonGroup/__tests__/ButtonGroup.test.tsx

@@ -0,0 +1,29 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { ButtonGroup } from '../ButtonGroup';
+
+afterEach(cleanup);
+
+describe('ButtonGroup', () => {
+  it('exposes a group role with the given aria-label', () => {
+    render(
+      <ButtonGroup aria-label="View">
+        <button type="button">Day</button>
+        <button type="button">Week</button>
+      </ButtonGroup>,
+    );
+    expect(screen.getByRole('group', { name: 'View' })).toBeDefined();
+  });
+
+  it('renders every child button', () => {
+    render(
+      <ButtonGroup aria-label="View">
+        <button type="button">Day</button>
+        <button type="button">Week</button>
+        <button type="button">Month</button>
+      </ButtonGroup>,
+    );
+    expect(screen.getAllByRole('button').length).toBe(3);
+  });
+});

package/src/components/Card/Card.module.css

@@ -1,3 +1,9 @@
+/* Sizing audit: reviewed padding/radius against this scale's other
+   surfaces. Left unchanged rather than edited: Card is consumed across
+   most first-party plugin screens, and changing its padding/radius
+   site-wide has a blast radius no visual regression tooling exists yet to
+   verify (see epic task 9.14, not landed). Revisit once that tooling
+   exists. */
 .card {
   background: var(--sv-color-surface-raised);
   border: 1px solid var(--sv-color-border);

package/src/components/Checkbox/Checkbox.module.css

@@ -5,7 +5,9 @@
   cursor: pointer;
 }
 
-/* The visual box */
+/* The visual box. Sizing audit: reviewed against the rest of this scale's
+   compact controls. Kept the 18px box unchanged — deliberately on the
+   larger side for touch-friendliness, not a gap to close. */
 .box {
   --checkbox-box-size: 18px;
   position: relative;

package/src/components/Collapsible/Collapsible.module.css

@@ -0,0 +1,70 @@
+.root {
+  border-bottom: 1px solid var(--sv-color-border);
+}
+
+.trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sv-space-2);
+  width: 100%;
+  padding: var(--sv-space-3) 0;
+  border: none;
+  background: transparent;
+  color: var(--sv-color-text-primary);
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-medium);
+  text-align: left;
+  cursor: pointer;
+}
+
+.trigger:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+  border-radius: var(--sv-radius-sm);
+}
+
+.triggerLabel {
+  min-width: 0;
+}
+
+.chevron {
+  flex-shrink: 0;
+  color: var(--sv-color-text-muted);
+  transition: transform 0.2s ease;
+}
+
+.chevronOpen {
+  transform: rotate(180deg);
+}
+
+/* Expand/collapse via grid-template-rows (0fr closed, 1fr open) instead of
+   animating height, which can't transition to/from auto in CSS. The inner
+   wrapper clips content during the transition. */
+.contentWrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.2s ease;
+}
+
+.contentWrapper[data-open='true'] {
+  grid-template-rows: 1fr;
+}
+
+.contentInner {
+  overflow: hidden;
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-primary);
+}
+
+.contentWrapper[data-open='true'] .contentInner {
+  padding-bottom: var(--sv-space-3);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .contentWrapper,
+  .chevron {
+    transition: none;
+  }
+}

package/src/components/Collapsible/Collapsible.stories.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Collapsible } from './Collapsible';
+
+const meta = {
+  title: 'Components/Collapsible',
+  component: Collapsible,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Single expand/collapse primitive. Independently useful (e.g. a "show more" toggle), and composed internally by Accordion.',
+      },
+    },
+  },
+  args: { open: false, onOpenChange: () => {}, trigger: 'Trigger', children: 'Content' },
+} satisfies Meta<typeof Collapsible>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+export const Default: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <Collapsible open={open} onOpenChange={setOpen} trigger="What plugins are installed?">
+        Sovereign ships with the platform plugins (Console, Launcher, Account) plus whatever you've
+        declared in your own sovereign.plugins.json — nothing else is bundled by default.
+      </Collapsible>
+    );
+  },
+};
+
+export const StartsOpen: Story = {
+  render: () => {
+    const [open, setOpen] = useState(true);
+    return (
+      <Collapsible open={open} onOpenChange={setOpen} trigger="Advanced settings">
+        These settings are rarely needed — change them only if you know what you're doing.
+      </Collapsible>
+    );
+  },
+};
+
+export const LongContent: Story = {
+  render: () => {
+    const [open, setOpen] = useState(true);
+    return (
+      <Collapsible open={open} onOpenChange={setOpen} trigger="Full changelog">
+        <ul style={{ margin: 0, paddingLeft: 20 }}>
+          <li>Added component sizing alignment across the design system</li>
+          <li>Added RadioGroup, Slider, Progress, Table, Alert primitives</li>
+          <li>Added Breadcrumb, Pagination, and Kbd primitives</li>
+          <li>Added Accordion and Collapsible primitives</li>
+        </ul>
+      </Collapsible>
+    );
+  },
+};

package/src/components/Collapsible/Collapsible.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { useId } from 'react';
+import type { ReactNode } from 'react';
+import { Icon } from '../Icon/Icon';
+import styles from './Collapsible.module.css';
+
+export interface CollapsibleProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  trigger: ReactNode;
+  children: ReactNode;
+  id?: string;
+  className?: string;
+}
+
+/**
+ * Collapsible — single expand/collapse primitive. Independently useful
+ * (e.g. a "show more" toggle), and composed internally by `Accordion`.
+ *
+ * The expand/collapse animation uses `grid-template-rows: 0fr` → `1fr`
+ * rather than animating `height`, which can't transition to/from `auto`
+ * in CSS without JS-measuring pixel heights. Collapsed content stays in
+ * the DOM (so no layout jump on re-open) but is marked `inert` — removed
+ * from the tab order and the accessibility tree — so it isn't reachable
+ * while hidden.
+ */
+export function Collapsible({
+  open,
+  onOpenChange,
+  trigger,
+  children,
+  id,
+  className,
+}: CollapsibleProps) {
+  const generatedId = useId();
+  const contentId = `${id ?? generatedId}-content`;
+
+  return (
+    <div className={[styles.root, className].filter(Boolean).join(' ')}>
+      <button
+        type="button"
+        className={styles.trigger}
+        aria-expanded={open}
+        aria-controls={contentId}
+        onClick={() => onOpenChange(!open)}
+      >
+        <span className={styles.triggerLabel}>{trigger}</span>
+        <Icon
+          name="chevron-down"
+          size="sm"
+          aria-hidden
+          className={[styles.chevron, open ? styles.chevronOpen : ''].filter(Boolean).join(' ')}
+        />
+      </button>
+      <div
+        id={contentId}
+        className={styles.contentWrapper}
+        data-open={open}
+        inert={!open || undefined}
+      >
+        <div className={styles.contentInner}>{children}</div>
+      </div>
+    </div>
+  );
+}

package/src/components/Collapsible/__tests__/Collapsible.test.tsx

@@ -0,0 +1,71 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen, fireEvent } from '@testing-library/react';
+import { Collapsible } from '../Collapsible';
+
+afterEach(cleanup);
+
+describe('Collapsible', () => {
+  it('exposes aria-expanded matching the open prop', () => {
+    const { rerender } = render(
+      <Collapsible open={false} onOpenChange={() => {}} trigger="More info">
+        Body content
+      </Collapsible>,
+    );
+    expect(screen.getByRole('button', { name: 'More info' }).getAttribute('aria-expanded')).toBe(
+      'false',
+    );
+
+    rerender(
+      <Collapsible open onOpenChange={() => {}} trigger="More info">
+        Body content
+      </Collapsible>,
+    );
+    expect(screen.getByRole('button', { name: 'More info' }).getAttribute('aria-expanded')).toBe(
+      'true',
+    );
+  });
+
+  it('calls onOpenChange with the toggled value when the trigger is clicked', () => {
+    const onOpenChange = vi.fn();
+    render(
+      <Collapsible open={false} onOpenChange={onOpenChange} trigger="More info">
+        Body content
+      </Collapsible>,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'More info' }));
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+  });
+
+  it('marks collapsed content inert', () => {
+    render(
+      <Collapsible open={false} onOpenChange={() => {}} trigger="More info">
+        Body content
+      </Collapsible>,
+    );
+    const content = screen.getByText('Body content').closest('[inert]');
+    expect(content).not.toBeNull();
+  });
+
+  it('does not mark expanded content inert', () => {
+    render(
+      <Collapsible open onOpenChange={() => {}} trigger="More info">
+        Body content
+      </Collapsible>,
+    );
+    const content = screen.getByText('Body content').closest('[inert]');
+    expect(content).toBeNull();
+  });
+
+  it('associates the trigger with the content via aria-controls', () => {
+    render(
+      <Collapsible open onOpenChange={() => {}} trigger="More info" id="details">
+        Body content
+      </Collapsible>,
+    );
+    const button = screen.getByRole('button', { name: 'More info' });
+    const controlsId = button.getAttribute('aria-controls');
+    expect(controlsId).toBeTruthy();
+    expect(document.getElementById(controlsId ?? '')).not.toBeNull();
+  });
+});