@sovereignfs/ui 0.54.0 → 0.83.1

package/src/components/ColorPicker/ColorPicker.module.css

@@ -0,0 +1,132 @@
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sv-space-2);
+}
+
+.swatch {
+  width: var(--sv-space-8);
+  height: var(--sv-space-8);
+  border-radius: var(--sv-radius-md);
+  border: 2px solid transparent;
+  padding: 0;
+  cursor: pointer;
+}
+
+.swatch:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.swatchSelected {
+  border-color: var(--sv-color-accent);
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 1px;
+}
+
+/* Dashed/outlined rather than filled — there's no real color value to paint
+   for "no color". */
+.swatchNone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--sv-color-surface-sunken);
+  border: 2px dashed var(--sv-color-border-strong);
+  color: var(--sv-color-text-muted);
+}
+
+.swatchNone.swatchSelected {
+  border-style: solid;
+}
+
+/* Wraps the native color input so a decorative "+" glyph can sit on top of
+   it while it's empty (a native `<input type="color">` can't have DOM
+   children of its own) and so the same `.swatchSelected` ring used above can
+   be applied to the wrapper without fighting the input's own default
+   focus/border rendering. */
+.customWrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sv-space-8);
+  height: var(--sv-space-8);
+  border-radius: var(--sv-radius-md);
+  border: 2px solid transparent;
+}
+
+.customWrapper.swatchSelected {
+  /* Same visual treatment as .swatchSelected, but scoped to the wrapper —
+     the input itself is styled borderless below, so this is the only
+     border/outline actually rendered for the custom trigger. */
+  border-color: var(--sv-color-accent);
+}
+
+/* Before a custom color is actually chosen — same dashed/outlined treatment
+   as .swatchNone, since there's equally no real color value to paint yet. */
+.customWrapperEmpty {
+  background-color: var(--sv-color-surface-sunken);
+  border-style: dashed;
+  border-color: var(--sv-color-border-strong);
+}
+
+/* Reset the native control to a plain color swatch matching the curated
+   ones above — browsers default `<input type="color">` to its own chrome
+   (a bordered box with visible padding around the swatch). */
+.customInput {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: none;
+  border-radius: var(--sv-radius-md);
+  cursor: pointer;
+  background: none;
+}
+
+/* Invisible but still clickable/focusable while empty — the input always
+   holds *some* real hex internally (no true empty state), but that value
+   was never actually chosen by the user, so it must never render as this
+   trigger's own swatch color. Becomes visible again the moment a real
+   choice makes it into `value` (`.customWrapperEmpty` stops applying). */
+.customWrapperEmpty .customInput {
+  opacity: 0;
+}
+
+.customInput:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.customWrapperEmpty .customInput:disabled {
+  opacity: 0;
+}
+
+.customInput::-webkit-color-swatch-wrapper {
+  padding: 0;
+  border-radius: var(--sv-radius-md);
+}
+
+.customInput::-webkit-color-swatch {
+  border: none;
+  border-radius: var(--sv-radius-md);
+}
+
+.customInput::-moz-color-swatch {
+  border: none;
+  border-radius: var(--sv-radius-md);
+}
+
+/* `inset: 0` alone doesn't center this — the icon already has an explicit
+   width/height (its own size class), so an absolutely positioned box with
+   all four insets pinned to 0 resolves against top/left rather than
+   stretching to let flex centering do anything, landing the glyph in the
+   corner instead of the middle. `top/left: 50%` + `translate(-50%, -50%)`
+   centers a fixed-size element regardless of its own dimensions. */
+.customPlusIcon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--sv-color-text-muted);
+  pointer-events: none;
+}

package/src/components/ColorPicker/ColorPicker.stories.tsx

@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ColorPicker } from './ColorPicker';
+
+const meta = {
+  title: 'Components/ColorPicker',
+  component: ColorPicker,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'A row of curated swatch suggestions plus a native `<input type="color">` trigger for picking any color, not just the curated set — every browser\'s own full-spectrum picker, guaranteed valid hex output, no bespoke a11y work.',
+      },
+    },
+  },
+  args: {
+    swatches: [],
+    value: null,
+    onChange: () => {},
+    onSelectionComplete: () => {},
+    'aria-label': 'Color',
+  },
+} satisfies Meta<typeof ColorPicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const SWATCHES = [
+  { label: 'Sky', value: '#b5c9e8' },
+  { label: 'Sage', value: '#c9e0c4' },
+  { label: 'Sand', value: '#e8d3b5' },
+  { label: 'Clay', value: '#e0c4c4' },
+  { label: 'Lilac', value: '#d8c4e0' },
+  { label: 'Ink', value: '#3b5166' },
+  { label: 'Forest', value: '#3f5c4c' },
+];
+
+function ControlledColorPicker({
+  initial = null,
+  allowNone = false,
+}: {
+  initial?: string | null;
+  allowNone?: boolean;
+}) {
+  const [value, setValue] = useState<string | null>(initial);
+  return (
+    <ColorPicker
+      swatches={SWATCHES}
+      value={value}
+      onChange={setValue}
+      allowNone={allowNone}
+      aria-label="Board color"
+    />
+  );
+}
+
+export const Default: Story = {
+  render: () => <ControlledColorPicker initial="#c9e0c4" />,
+};
+
+export const WithNoColorOption: Story = {
+  render: () => <ControlledColorPicker allowNone />,
+};
+
+export const CustomColorSelected: Story = {
+  render: () => <ControlledColorPicker initial="#7a3fd6" />,
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <ColorPicker
+      swatches={SWATCHES}
+      value="#b5c9e8"
+      onChange={() => {}}
+      aria-label="Board color"
+      disabled
+    />
+  ),
+};

package/src/components/ColorPicker/ColorPicker.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import { Icon } from '../Icon/Icon';
+import styles from './ColorPicker.module.css';
+
+export interface ColorPickerSwatch {
+  /** Accessible name and tooltip, e.g. "Sky". */
+  label: string;
+  /** 6-digit hex, e.g. "#b5c9e8". */
+  value: string;
+}
+
+export interface ColorPickerProps {
+  /** Curated quick-pick suggestions, in display order. */
+  swatches: readonly ColorPickerSwatch[];
+  /** Current hex value, or `null` for no color. Compared case-insensitively
+   *  against `swatches` — a value that doesn't match any swatch renders as
+   *  the active "custom" selection instead. */
+  value: string | null;
+  onChange: (value: string | null) => void;
+  /**
+   * Fires once after a discrete, complete pick — a swatch click or the "no
+   * color" click. Optional; most callers don't need it. Deliberately NOT
+   * fired from the native custom-color `<input type="color">`'s `onChange`
+   * — that can fire repeatedly while the user is still dragging inside the
+   * browser's own color dialog, so a caller using this to auto-close a
+   * wrapping `Popover` would otherwise slam it shut mid-adjustment.
+   */
+  onSelectionComplete?: () => void;
+  /** Shows a leading "no color" option. Off by default — most consumers
+   *  (anything painting a fixed-size chip) always need a real color; only
+   *  a board canvas-style consumer typically wants "none" as a real choice. */
+  allowNone?: boolean;
+  noneLabel?: string;
+  /** Accessible name for the native color-input trigger that lets a user
+   *  pick any color, not just a curated swatch. */
+  customLabel?: string;
+  disabled?: boolean;
+  'aria-label': string;
+  className?: string;
+}
+
+function normalize(hex: string): string {
+  return hex.toLowerCase();
+}
+
+/**
+ * ColorPicker — a row of curated swatch suggestions plus a native
+ * `<input type="color">` trigger for picking any color, not just the
+ * curated set. The native color input is deliberately not a custom-built
+ * hue/saturation picker: it already gives every browser's own full-spectrum
+ * picker (with an eyedropper tool in most), guarantees valid hex output, and
+ * needs no bespoke a11y work of its own.
+ *
+ * `value` drives which affordance reads as selected: a hex matching a
+ * swatch highlights that swatch; a hex matching none of them highlights the
+ * custom trigger instead (its own dial shows that color); `null` (only
+ * meaningful with `allowNone`) highlights the "no color" option.
+ *
+ * The custom trigger shows a plain "+" on a neutral dashed box until a
+ * genuinely custom color is active — it never previews an arbitrary dial
+ * color the user hasn't actually chosen. The underlying native color input
+ * still needs *some* real hex to hold internally at all times (it has no
+ * true empty state), so that starting value stays invisible (`opacity: 0`
+ * on the input itself) rather than painted as this trigger's own swatch.
+ */
+export function ColorPicker({
+  swatches,
+  value,
+  onChange,
+  onSelectionComplete,
+  allowNone = false,
+  noneLabel = 'No color',
+  customLabel = 'Custom color',
+  disabled = false,
+  'aria-label': ariaLabel,
+  className,
+}: ColorPickerProps) {
+  const normalizedValue = value ? normalize(value) : null;
+  const matchedSwatch = swatches.find((s) => normalize(s.value) === normalizedValue);
+  const isCustomActive = normalizedValue !== null && !matchedSwatch;
+  // The native input always needs a real hex to display (it has no "empty"
+  // state) — the active custom color when there is one, otherwise a neutral
+  // starting point for whenever it's next opened.
+  const customDialValue = isCustomActive && value ? value : (swatches[0]?.value ?? '#000000');
+
+  return (
+    <div
+      className={[styles.row, className].filter(Boolean).join(' ')}
+      role="group"
+      aria-label={ariaLabel}
+    >
+      {allowNone && (
+        <button
+          type="button"
+          role="radio"
+          aria-checked={value === null}
+          aria-label={noneLabel}
+          title={noneLabel}
+          disabled={disabled}
+          className={[styles.swatch, styles.swatchNone, value === null ? styles.swatchSelected : '']
+            .filter(Boolean)
+            .join(' ')}
+          onClick={() => {
+            onChange(null);
+            onSelectionComplete?.();
+          }}
+        >
+          <Icon name="x" size="sm" aria-hidden={true} />
+        </button>
+      )}
+      {swatches.map((s) => (
+        <button
+          key={s.value}
+          type="button"
+          role="radio"
+          aria-checked={normalize(s.value) === normalizedValue}
+          aria-label={s.label}
+          title={s.label}
+          disabled={disabled}
+          className={[
+            styles.swatch,
+            normalize(s.value) === normalizedValue ? styles.swatchSelected : '',
+          ]
+            .filter(Boolean)
+            .join(' ')}
+          style={{ backgroundColor: s.value }}
+          onClick={() => {
+            onChange(s.value);
+            onSelectionComplete?.();
+          }}
+        />
+      ))}
+      <span
+        className={[
+          styles.customWrapper,
+          isCustomActive ? styles.swatchSelected : styles.customWrapperEmpty,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        <input
+          type="color"
+          className={styles.customInput}
+          aria-label={customLabel}
+          title={customLabel}
+          disabled={disabled}
+          value={customDialValue}
+          onChange={(e) => onChange(e.target.value)}
+        />
+        {!isCustomActive && (
+          <Icon name="plus" size="sm" aria-hidden={true} className={styles.customPlusIcon} />
+        )}
+      </span>
+    </div>
+  );
+}

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

@@ -0,0 +1,117 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { ColorPicker } from '../ColorPicker';
+
+afterEach(cleanup);
+
+const SWATCHES = [
+  { label: 'Sky', value: '#b5c9e8' },
+  { label: 'Sage', value: '#c9e0c4' },
+];
+
+describe('ColorPicker', () => {
+  it('renders a swatch button per entry', () => {
+    render(<ColorPicker swatches={SWATCHES} value={null} onChange={() => {}} aria-label="Color" />);
+    expect(screen.getByRole('radio', { name: 'Sky' })).toBeTruthy();
+    expect(screen.getByRole('radio', { name: 'Sage' })).toBeTruthy();
+  });
+
+  it('marks the swatch matching value as checked', () => {
+    render(
+      <ColorPicker swatches={SWATCHES} value="#c9e0c4" onChange={() => {}} aria-label="Color" />,
+    );
+    expect(screen.getByRole('radio', { name: 'Sage' }).getAttribute('aria-checked')).toBe('true');
+    expect(screen.getByRole('radio', { name: 'Sky' }).getAttribute('aria-checked')).toBe('false');
+  });
+
+  it('matches swatches case-insensitively', () => {
+    render(
+      <ColorPicker swatches={SWATCHES} value="#C9E0C4" onChange={() => {}} aria-label="Color" />,
+    );
+    expect(screen.getByRole('radio', { name: 'Sage' }).getAttribute('aria-checked')).toBe('true');
+  });
+
+  it('calls onChange with the swatch value when clicked', () => {
+    const onChange = vi.fn();
+    render(<ColorPicker swatches={SWATCHES} value={null} onChange={onChange} aria-label="Color" />);
+    fireEvent.click(screen.getByRole('radio', { name: 'Sky' }));
+    expect(onChange).toHaveBeenCalledWith('#b5c9e8');
+  });
+
+  it('does not render a "no color" option by default', () => {
+    render(<ColorPicker swatches={SWATCHES} value={null} onChange={() => {}} aria-label="Color" />);
+    expect(screen.queryByRole('radio', { name: 'No color' })).toBeNull();
+  });
+
+  it('renders and wires up the "no color" option when allowNone is set', () => {
+    const onChange = vi.fn();
+    render(
+      <ColorPicker
+        swatches={SWATCHES}
+        value="#b5c9e8"
+        onChange={onChange}
+        allowNone
+        aria-label="Color"
+      />,
+    );
+    const noneOption = screen.getByRole('radio', { name: 'No color' });
+    expect(noneOption.getAttribute('aria-checked')).toBe('false');
+    fireEvent.click(noneOption);
+    expect(onChange).toHaveBeenCalledWith(null);
+  });
+
+  it('marks "no color" as checked when value is null', () => {
+    render(
+      <ColorPicker
+        swatches={SWATCHES}
+        value={null}
+        onChange={() => {}}
+        allowNone
+        aria-label="Color"
+      />,
+    );
+    expect(screen.getByRole('radio', { name: 'No color' }).getAttribute('aria-checked')).toBe(
+      'true',
+    );
+  });
+
+  it('renders the native color input trigger for custom colors', () => {
+    render(<ColorPicker swatches={SWATCHES} value={null} onChange={() => {}} aria-label="Color" />);
+    const custom = screen.getByLabelText('Custom color') as HTMLInputElement;
+    expect(custom.type).toBe('color');
+  });
+
+  it('shows the custom value on the native input when it matches no swatch', () => {
+    render(
+      <ColorPicker swatches={SWATCHES} value="#7a3fd6" onChange={() => {}} aria-label="Color" />,
+    );
+    const custom = screen.getByLabelText('Custom color') as HTMLInputElement;
+    expect(custom.value).toBe('#7a3fd6');
+    // Neither curated swatch should read as checked once a custom color is active.
+    expect(screen.getByRole('radio', { name: 'Sky' }).getAttribute('aria-checked')).toBe('false');
+    expect(screen.getByRole('radio', { name: 'Sage' }).getAttribute('aria-checked')).toBe('false');
+  });
+
+  it('calls onChange with the picked value when the custom input changes', () => {
+    const onChange = vi.fn();
+    render(<ColorPicker swatches={SWATCHES} value={null} onChange={onChange} aria-label="Color" />);
+    const custom = screen.getByLabelText('Custom color') as HTMLInputElement;
+    fireEvent.change(custom, { target: { value: '#123456' } });
+    expect(onChange).toHaveBeenCalledWith('#123456');
+  });
+
+  it('disables every swatch and the custom input when disabled', () => {
+    render(
+      <ColorPicker
+        swatches={SWATCHES}
+        value={null}
+        onChange={() => {}}
+        disabled
+        aria-label="Color"
+      />,
+    );
+    expect((screen.getByRole('radio', { name: 'Sky' }) as HTMLButtonElement).disabled).toBe(true);
+    expect((screen.getByLabelText('Custom color') as HTMLInputElement).disabled).toBe(true);
+  });
+});

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

@@ -15,7 +15,7 @@
   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: var(--sv-border-width-hairline) solid var(--sv-color-border-strong);
   border-radius: var(--sv-radius-md);
   cursor: pointer;
   transition:
@@ -61,7 +61,7 @@
   flex-shrink: 0;
   width: 100%;
   border: none;
-  border-bottom: 1px solid var(--sv-color-border);
+  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
   background: transparent;
   color: var(--sv-color-text-primary);
   font: inherit;

package/src/components/Command/Command.module.css

@@ -13,7 +13,7 @@
   flex-shrink: 0;
   width: 100%;
   border: none;
-  border-bottom: 1px solid var(--sv-color-border);
+  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
   background: transparent;
   color: var(--sv-color-text-primary);
   font: inherit;

package/src/components/ConfirmDialog/ConfirmDialog.module.css

@@ -41,7 +41,7 @@
   font-size: var(--sv-font-size-xs);
   color: var(--sv-color-error-text);
   padding: var(--sv-space-2) var(--sv-space-3);
-  border: 1px solid var(--sv-color-error-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-error-border);
   border-radius: var(--sv-radius-sm);
   background-color: var(--sv-color-error-surface);
 }
@@ -70,7 +70,7 @@
      Button). Matches Button's md padding, updated alongside it (10px,
      36px rendered height). */
   padding: 10px var(--sv-space-4);
-  border: 1px solid transparent;
+  border: var(--sv-border-width-hairline) solid transparent;
   border-radius: var(--sv-radius-md);
   font-family: var(--sv-font-family);
   font-size: var(--sv-font-size-sm);

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { type ReactNode, useEffect, useRef } from 'react';
+import { registerOpenOverlay, unregisterOpenOverlay } from '../../overlay-shell';
 import { Button } from '../Button/Button';
 import styles from './ConfirmDialog.module.css';
 
@@ -59,6 +60,19 @@ export function ConfirmDialog({
 }: ConfirmDialogProps) {
   const dialogRef = useRef<HTMLDialogElement>(null);
 
+  // Registers into the same open-overlay stack Dialog/Drawer/Sheet use
+  // (overlay-shell.ts) purely so a Dialog this ConfirmDialog was opened
+  // from inside of knows it is no longer the topmost overlay, and defers
+  // Escape to this one instead of closing itself. ConfirmDialog does not
+  // otherwise adopt useOverlayFocusCapture/useOverlayScrollLock/
+  // useOverlayKeyboardTrap — see this component's own doc comment for why
+  // it stays on the native <dialog> element for everything else.
+  useEffect(() => {
+    if (!open) return;
+    const id = registerOpenOverlay();
+    return () => unregisterOpenOverlay(id);
+  }, [open]);
+
   useEffect(() => {
     const el = dialogRef.current;
     if (!el) return;
@@ -70,6 +84,13 @@ export function ConfirmDialog({
   // listener needed for that) and whenever .close() runs — including the
   // effect above reacting to `open` going false. Listening for it here is
   // what makes Esc call the caller's onClose without a manual keydown handler.
+  // It is also the SINGLE call site for onClose: Cancel and backdrop-click
+  // below call dialogRef.current?.close() rather than onClose directly, so
+  // every dismissal path funnels through this one 'close' listener. Calling
+  // onClose directly from those handlers used to double-fire it — the
+  // consumer's onClose sets `open` to false as documented, which re-runs the
+  // effect above, which calls el.close() again, firing this same 'close'
+  // listener a second time for what the user experienced as one click.
   useEffect(() => {
     const el = dialogRef.current;
     if (!el) return;
@@ -85,7 +106,7 @@ export function ConfirmDialog({
       className={styles.dialog}
       aria-label={title}
       onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
+        if (e.target === e.currentTarget) dialogRef.current?.close();
       }}
     >
       <div className={styles.body}>
@@ -93,7 +114,12 @@ export function ConfirmDialog({
         <div className={styles.message}>{message}</div>
         {error && <p className={styles.error}>{error}</p>}
         <div className={styles.actions}>
-          <Button type="button" variant="secondary" onClick={onClose} disabled={pending}>
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => dialogRef.current?.close()}
+            disabled={pending}
+          >
             {cancelLabel}
           </Button>
           {destructive ? (