@sovereignfs/ui 0.41.0 → 0.45.0

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();
+  });
+});

package/src/components/Combobox/Combobox.module.css

@@ -0,0 +1,122 @@
+/* Trigger styled to match Input/DatePicker's height/border/radius/focus ring
+ * for visual consistency as a form field. */
+
+.trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sv-space-2);
+  width: 100%;
+  height: 36px;
+  box-sizing: border-box;
+  padding: 4px var(--sv-space-3);
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-sm);
+  line-height: 1.5;
+  color: var(--sv-color-text-primary);
+  background-color: var(--sv-color-surface);
+  border: 1px solid var(--sv-color-border-strong);
+  border-radius: var(--sv-radius-md);
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+@media (pointer: coarse) {
+  .trigger {
+    font-size: var(--sv-font-size-md);
+  }
+}
+
+.trigger:focus-visible {
+  outline: none;
+  border-color: var(--sv-color-accent);
+  box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
+}
+
+.trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.triggerValue {
+  overflow: hidden;
+  color: var(--sv-color-text-primary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.triggerPlaceholder {
+  color: var(--sv-color-text-muted);
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  max-height: min(60vh, 360px);
+}
+
+.search {
+  flex-shrink: 0;
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid var(--sv-color-border);
+  background: transparent;
+  color: var(--sv-color-text-primary);
+  font: inherit;
+  font-size: var(--sv-font-size-md);
+  padding: var(--sv-space-3);
+}
+
+.search:focus {
+  outline: none;
+}
+
+.search::placeholder {
+  color: var(--sv-color-text-muted);
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: var(--sv-space-1);
+  overflow-y: auto;
+}
+
+.option {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+  width: 100%;
+  min-height: var(--sv-touch-target-min, 44px);
+  padding: var(--sv-space-2) var(--sv-space-3);
+  border: none;
+  border-radius: var(--sv-radius-sm);
+  background: transparent;
+  color: var(--sv-color-text-primary);
+  font: inherit;
+  font-size: var(--sv-font-size-sm);
+  text-align: left;
+  cursor: pointer;
+}
+
+.optionHighlighted {
+  background: var(--sv-color-surface-sunken);
+}
+
+.check {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: var(--sv-icon-size-sm);
+  height: var(--sv-icon-size-sm);
+  align-items: center;
+  justify-content: center;
+}
+
+.empty {
+  padding: var(--sv-space-4) var(--sv-space-3);
+  color: var(--sv-color-text-muted);
+  font-size: var(--sv-font-size-sm);
+  text-align: center;
+}

package/src/components/Combobox/Combobox.stories.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Combobox } from './Combobox';
+
+const OPTIONS = [
+  { value: 'tasks', label: 'sovereign-tasks' },
+  { value: 'ledger', label: 'sovereign-ledger' },
+  { value: 'shopper', label: 'sovereign-shopper' },
+  { value: 'healthlog', label: 'sovereign-healthlog' },
+  { value: 'plainwrite', label: 'sovereign-plainwrite' },
+];
+
+const meta = {
+  title: 'Components/Combobox',
+  component: Combobox,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          "A searchable single-select: Popover on desktop, a bottom-sheet Drawer on mobile — the same adaptive pattern as Menu and DatePicker. For a short fixed list where search adds no value, use Select's native <select> instead.",
+      },
+    },
+  },
+  args: { options: OPTIONS, value: null, onChange: () => {}, 'aria-label': 'Plugin' },
+} satisfies Meta<typeof Combobox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+function ComboboxDemo() {
+  const [value, setValue] = useState<string | null>(null);
+  return (
+    <div style={{ width: 280 }}>
+      <Combobox
+        options={OPTIONS}
+        value={value}
+        onChange={setValue}
+        placeholder="Select a plugin"
+        aria-label="Plugin"
+      />
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: () => <ComboboxDemo />,
+};
+
+export const Preselected: Story = {
+  render: () => {
+    function Demo() {
+      const [value, setValue] = useState<string | null>('ledger');
+      return (
+        <div style={{ width: 280 }}>
+          <Combobox options={OPTIONS} value={value} onChange={setValue} aria-label="Plugin" />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div style={{ width: 280 }}>
+      <Combobox
+        options={OPTIONS}
+        value={null}
+        onChange={() => {}}
+        placeholder="Select a plugin"
+        aria-label="Plugin"
+        disabled
+      />
+    </div>
+  ),
+};