@sovereignfs/ui 0.83.1 → 0.89.1

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

@@ -1,42 +0,0 @@
-/* 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: var(--sv-border-width-hairline) solid var(--sv-color-border);
-  border-radius: var(--sv-radius-lg);
-  box-shadow: var(--sv-shadow-card);
-}
-
-.paddingSm {
-  padding: var(--sv-space-3);
-}
-
-.paddingMd {
-  padding: var(--sv-space-5);
-}
-
-.paddingLg {
-  padding: var(--sv-space-8);
-}
-
-.interactive {
-  cursor: pointer;
-  text-decoration: none;
-  display: block;
-  transition: border-color 0.15s ease;
-}
-
-@media (hover: hover) {
-  .interactive:hover {
-    border-color: var(--sv-color-border-strong);
-  }
-}
-
-.interactive:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-}

package/src/components/Card/Card.tsx

@@ -1,34 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-import styles from './Card.module.css';
-
-export interface CardProps extends HTMLAttributes<HTMLElement> {
-  as?: 'div' | 'article' | 'li';
-  interactive?: boolean;
-  padding?: 'sm' | 'md' | 'lg';
-  children: ReactNode;
-}
-
-const paddingClass: Record<NonNullable<CardProps['padding']>, string> = {
-  sm: styles.paddingSm as string,
-  md: styles.paddingMd as string,
-  lg: styles.paddingLg as string,
-};
-
-export function Card({
-  as: Tag = 'div',
-  interactive = false,
-  padding = 'md',
-  className,
-  children,
-  ...rest
-}: CardProps) {
-  const cls = [styles.card, paddingClass[padding], interactive && styles.interactive, className]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <Tag className={cls} {...rest}>
-      {children}
-    </Tag>
-  );
-}

package/src/components/CardTile/CardTile.module.css

@@ -1,181 +0,0 @@
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--sv-card-tile-min-width, 200px), 1fr));
-  gap: var(--sv-space-4);
-}
-
-/* A fixed column width (not `1fr`, and — as important — not `max-content`
-   either) — every real consumer of `dense` mode (Docs' folder/document
-   tiles, this file's own Storybook gallery) pairs it with `variant="icon"`
-   tiles carrying a name of unpredictable length that must ellipsis-truncate
-   past a point. `max-content` was tried first, on the reasoning that "a
-   tile keeps its own natural width instead of stretching to fill leftover
-   row space, so the empty area around a small icon tile stays roughly
-   square" — but `max-content` track sizing through this grid's nested
-   grid → flex → block(/inline-block) → text chain did not reliably account
-   for a descendant label's true content width in practice: measured live,
-   a 110px-wide label landed in a track that resolved to 97px, silently
-   overflowing with no ellipsis ever triggering (not the intended "grows to
-   fit," and not truncated either — just broken). A uniform fixed width
-   sidesteps that whole class of bug: every tile in a `dense` grid is
-   exactly `--sv-card-tile-min-width` wide, full stop, and the descendant
-   label (an `overflow: hidden; text-overflow: ellipsis` `inline-block` with
-   `max-width: 100%`) truncates reliably against that always-known width —
-   short names still read as compact/square, long ones truncate cleanly
-   instead of bleeding past their tile. Tighter gap to match. */
-.gridDense {
-  grid-template-columns: repeat(auto-fill, var(--sv-card-tile-min-width, 200px));
-  gap: var(--sv-space-2);
-}
-
-/* Chrome (border/radius/shadow/background) lives on this outer box, same
-   tokens `Card` itself uses — but padding-free, so `.banner` below can
-   bleed all the way to the edges, which `Card`'s single padded box can't
-   do. */
-.tile {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-  border: 1px solid var(--sv-color-border);
-  border-radius: var(--sv-radius-lg);
-  background: var(--sv-color-surface-raised);
-  box-shadow: var(--sv-shadow-card);
-}
-
-.banner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 40px;
-  color: var(--sv-color-text-subtle);
-  /* Neutral default when no `bannerColor` is supplied — an inline style
-     on the element overrides this. */
-  background-color: var(--sv-color-surface-sunken);
-}
-
-.footer {
-  padding: var(--sv-space-3) var(--sv-space-4);
-}
-
-/* `variant="icon"` modifier — a plain "Finder icon" tile: no card chrome,
-   just a large centered icon with a label beneath it. `.banner`/`.footer`
-   are the same two elements the card variant uses, restyled here rather
-   than duplicated, so both variants stay structurally identical. */
-.tileIcon {
-  align-items: center;
-  border: none;
-  border-radius: var(--sv-radius-md);
-  background: none;
-  box-shadow: none;
-  padding: var(--sv-space-3) var(--sv-space-2);
-}
-
-@media (hover: hover) {
-  .tileIcon:hover {
-    background: var(--sv-color-surface-sunken);
-  }
-}
-
-.tileIcon .banner {
-  height: auto;
-  background: none;
-  color: var(--sv-color-text-muted);
-}
-
-.tileIcon .banner svg {
-  width: 48px;
-  height: 48px;
-}
-
-/* `width: 100%` is load-bearing, not decorative — `.tile` sets
-   `align-items: center` (so the icon banner centers itself horizontally),
-   and cross-axis `center` alignment sizes a flex item to its own preferred
-   (content-based) width and centers *that* within the container, rather
-   than clamping it to the container's width the way `stretch` would.
-   Without an explicit width here, a `nowrap` + `text-overflow: ellipsis`
-   label inside (a consumer's own truncation CSS) keeps its full
-   content-driven preferred width and gets centered straddling both edges of
-   `.tile` — `overflow: hidden` on `.tile` doesn't help, since this child's
-   box is genuinely laid out wider than its own container, not merely
-   painting past an already-settled one. `min-width: 0` alone (the more
-   common flex-truncation fix) does NOT fix this specific case: that only
-   lifts the auto-min-size floor that blocks *shrinking under stretch*, and
-   this axis was never being stretched to begin with. Confirmed live at a
-   viewport narrow enough that `.tile`'s own resolved width is well under
-   the label's preferred width — only `width: 100%` actually constrains it;
-   a wider test viewport had accidentally masked the bug by giving `.tile`
-   enough natural room that the oversized `.footer` fit anyway. */
-.tileIcon .footer {
-  width: 100%;
-  min-width: 0;
-  padding: var(--sv-space-2) 0 0;
-  color: var(--sv-color-text-primary);
-  text-align: center;
-  text-decoration: none;
-}
-
-/* Plain centered placeholder — no banner strip, so a ghost "add new" tile
-   reads as an empty slot rather than mimicking a real tile's anatomy.
-   `min-height` matches a real `.tile`'s own natural height (banner +
-   single-line footer) so the two read as the same size. */
-.newTile {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sv-space-2);
-  min-height: 87px;
-  width: 100%;
-  height: 100%;
-  color: var(--sv-color-text-muted);
-  border: 1px dashed var(--sv-color-border-strong);
-  border-radius: var(--sv-radius-lg);
-  background: none;
-  cursor: pointer;
-  transition:
-    border-color 0.15s ease,
-    color 0.15s ease;
-}
-
-@media (hover: hover) {
-  .newTile:hover {
-    border-color: var(--sv-color-text-muted);
-    color: var(--sv-color-text-primary);
-  }
-}
-
-.newTile:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-}
-
-/* `variant="icon"` modifier — matches a `variant="icon"` `CardTile`'s own
-   footprint. Icon-only, no visible label (see `NewCardTile`'s own doc
-   comment) — a plain "+" at the DS's own `size="md"` (unlike
-   `.tileIcon .banner svg`'s real-content 48px override, deliberately not
-   repeated here) reads as self-explanatory once every sibling tile in the
-   grid is already an unlabeled icon.
-   `width`/`height: 100%` (not `auto`, despite this being a "shrink to
-   content" variant conceptually) — a real `CardTile` sibling in the same
-   `dense` grid fills its grid cell via the grid's own item-stretch, which
-   only reaches an `auto`-sized *direct* grid child; wrapping this trigger
-   in a `Menu`/`Popover` (`HomeWorkbooksList.tsx`'s "add workbook" tile)
-   inserts an intermediate `display: inline-flex` container between this
-   button and the grid, and a flex container's default cross/main-axis
-   sizing does not itself relay grid-stretch through to a `width: auto`
-   flex child — confirmed live: the button rendered full-height but only
-   as wide as its own icon+padding (~38px) inside a 160px cell. Explicit
-   100% percentages resolve against whichever immediate parent box is
-   sized to the grid cell — the grid track directly, or the intermediate
-   flex container once IT has already been stretched to that width — so
-   this works correctly either way, unlike relying on stretch alone. */
-.newTileIcon {
-  flex-direction: column;
-  justify-content: center;
-  gap: 0;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  padding: var(--sv-space-3) var(--sv-space-2);
-  border-radius: var(--sv-radius-md);
-}

package/src/components/CardTile/CardTile.stories.tsx

@@ -1,86 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Icon } from '../Icon/Icon';
-import { CardTile, CardTileGrid, NewCardTile } from './CardTile';
-
-const meta = {
-  title: 'Components/CardTile',
-  component: CardTile,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'A colored/iconed banner over a footer label, used as a grid of navigable tiles (projects, boards, and similar top-level entities). Pair with `CardTileGrid` for layout and `NewCardTile` for the grid\'s "add new" affordance. Not link-aware — wrap a tile in the host framework\'s own link component to make it navigable.',
-      },
-    },
-  },
-  args: {
-    children: 'Q4 Planning',
-  },
-} satisfies Meta<typeof CardTile>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const WithBannerIcon: Story = {
-  args: {
-    banner: <Icon name="folder" size="lg" aria-hidden={true} />,
-    children: 'Q4 Planning',
-  },
-};
-
-export const WithBannerColor: Story = {
-  args: {
-    bannerColor: '#c7d8ff',
-    children: 'Marketing site',
-  },
-};
-
-export const Grid: Story = {
-  render: () => (
-    <CardTileGrid>
-      <CardTile banner={<Icon name="folder" size="lg" aria-hidden={true} />}>Q4 Planning</CardTile>
-      <CardTile bannerColor="#ffd8c7">Design reviews</CardTile>
-      <CardTile bannerColor="#c7ffd9">Onboarding</CardTile>
-      <NewCardTile label="New project" />
-    </CardTileGrid>
-  ),
-};
-
-/** `variant="icon"` — a plain "Finder icon" tile: no card chrome, just a large centered icon with a label beneath it. */
-export const IconVariant: Story = {
-  args: {
-    variant: 'icon',
-    banner: <Icon name="folder-closed" size="lg" aria-hidden={true} />,
-    children: 'Handbook',
-  },
-};
-
-/** `dense` — natural-width tiles (no stretch-to-fill) with a tighter gap, the pairing `variant="icon"` tiles normally want. `NewCardTile`'s own `variant="icon"` matches the same footprint, so the "add new" tile sits naturally alongside the rest instead of stretching into a wide pill. */
-export const IconVariantGrid: Story = {
-  render: () => (
-    <CardTileGrid dense minTileWidth={100}>
-      <CardTile variant="icon" banner={<Icon name="folder-closed" size="lg" aria-hidden={true} />}>
-        Handbook
-      </CardTile>
-      <CardTile variant="icon" banner={<Icon name="folder-closed" size="lg" aria-hidden={true} />}>
-        Q4 Planning
-      </CardTile>
-      <CardTile variant="icon" banner={<Icon name="folder-closed" size="lg" aria-hidden={true} />}>
-        Design reviews
-      </CardTile>
-      <NewCardTile variant="icon" label="New" />
-    </CardTileGrid>
-  ),
-};
-
-export const NewTile: StoryObj<typeof NewCardTile> = {
-  render: () => <NewCardTile label="New document" />,
-};
-
-/** `variant="icon"` — matches a `variant="icon"` `CardTile`'s footprint (icon above a short label) instead of the default horizontal pill. */
-export const NewTileIconVariant: StoryObj<typeof NewCardTile> = {
-  render: () => <NewCardTile variant="icon" label="New" />,
-};

package/src/components/CardTile/CardTile.tsx

@@ -1,128 +0,0 @@
-import type { ButtonHTMLAttributes, CSSProperties, HTMLAttributes, ReactNode } from 'react';
-import { Icon } from '../Icon/Icon';
-import type { IconName } from '../Icon/Icon';
-import styles from './CardTile.module.css';
-
-export interface CardTileGridProps {
-  children: ReactNode;
-  /** Minimum tile width (px) before the grid wraps to fewer columns. */
-  minTileWidth?: number;
-  className?: string;
-  /**
-   * Tight spacing with tiles that keep their natural width instead of
-   * stretching to fill the row — for small `variant="icon"` tiles (e.g. a
-   * folder grid), where the default grid's spacious gap and `1fr`-stretched
-   * columns leave a lot of empty space around a tile that's really just an
-   * icon + short label.
-   */
-  dense?: boolean;
-}
-
-/** Responsive grid of `CardTile`/`NewCardTile` children — `repeat(auto-fill, minmax(minTileWidth, 1fr))`, or `minmax(minTileWidth, max-content)` with a tighter gap when `dense`. */
-export function CardTileGrid({
-  children,
-  minTileWidth = 200,
-  className,
-  dense = false,
-}: CardTileGridProps) {
-  const style = { '--sv-card-tile-min-width': `${minTileWidth}px` } as CSSProperties;
-  return (
-    <div
-      className={[styles.grid, dense && styles.gridDense, className].filter(Boolean).join(' ')}
-      style={style}
-    >
-      {children}
-    </div>
-  );
-}
-
-export interface CardTileProps extends HTMLAttributes<HTMLDivElement> {
-  /** Content centered in the tile's full-bleed top banner — typically an `<Icon>`. Omit for a plain strip. */
-  banner?: ReactNode;
-  /** Banner background color (applied inline). Falls back to a neutral sunken-surface strip when omitted. Ignored by `variant="icon"`, which has no banner box. */
-  bannerColor?: string;
-  /** Tile footer content — typically the item's name. */
-  children: ReactNode;
-  /**
-   * `"card"` (default): a bordered card with a colored/iconed banner strip
-   * over a footer label. `"icon"`: a plain "Finder icon" tile — no card
-   * chrome at all, just a large centered icon with a label beneath it. Use
-   * `"icon"` for entities that read as a single glyph + name (e.g. a
-   * folder), where a bordered card reads as heavier than the content needs.
-   */
-  variant?: 'card' | 'icon';
-}
-
-/**
- * A colored/iconed banner over a footer label — a card shape `Card` can't
- * express, since `Card`'s `padding` prop always pads its single box with no
- * way for a top region to bleed to the edges. Not link-aware: wrap it in the
- * host framework's own link component (e.g. Next's `<Link>`) to make it
- * navigable, same as every existing consumer of this pattern does.
- */
-export function CardTile({
-  banner,
-  bannerColor,
-  children,
-  className,
-  variant = 'card',
-  ...rest
-}: CardTileProps) {
-  const isIcon = variant === 'icon';
-  return (
-    <div
-      className={[styles.tile, isIcon && styles.tileIcon, className].filter(Boolean).join(' ')}
-      {...rest}
-    >
-      <div
-        className={styles.banner}
-        aria-hidden="true"
-        style={!isIcon && bannerColor ? { backgroundColor: bannerColor } : undefined}
-      >
-        {banner}
-      </div>
-      <div className={styles.footer}>{children}</div>
-    </div>
-  );
-}
-
-export interface NewCardTileProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  /** Icon shown beside the label (`"card"`) or alone (`"icon"`). Defaults to `"plus"`. */
-  icon?: IconName;
-  /** Visible next to the icon for `"card"`. For `"icon"`, not rendered as text — used as the button's `aria-label` instead, since the tile is icon-only. */
-  label: string;
-  /**
-   * `"card"` (default): a dashed box matching a `variant="card"` `CardTile`'s
-   * footprint — icon beside a visible label. `"icon"`: matches a
-   * `variant="icon"` `CardTile`'s footprint instead, but icon-only, no
-   * visible label — a plain "+" reads as self-explanatory once every
-   * sibling tile in the same `dense` grid is already an unlabeled icon
-   * (the dashed border alone marks it as the "add new" affordance).
-   */
-  variant?: 'card' | 'icon';
-}
-
-/** Dashed ghost tile matching a real `CardTile`'s footprint — the grid's own "add new" affordance. */
-export function NewCardTile({
-  icon = 'plus',
-  label,
-  type = 'button',
-  variant = 'card',
-  className,
-  ...rest
-}: NewCardTileProps) {
-  const isIcon = variant === 'icon';
-  return (
-    <button
-      type={type}
-      className={[styles.newTile, isIcon && styles.newTileIcon, className]
-        .filter(Boolean)
-        .join(' ')}
-      {...rest}
-      aria-label={isIcon ? label : undefined}
-    >
-      <Icon name={icon} size={isIcon ? 'md' : 'sm'} aria-hidden={true} />
-      {!isIcon && label}
-    </button>
-  );
-}

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

@@ -1,56 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, screen, fireEvent } from '@testing-library/react';
-
-afterEach(cleanup);
-import { CardTile, CardTileGrid, NewCardTile } from '../CardTile';
-
-describe('CardTile', () => {
-  it('renders the footer content', () => {
-    render(<CardTile>Q4 Planning</CardTile>);
-    expect(screen.getByText('Q4 Planning')).toBeDefined();
-  });
-
-  it('renders optional banner content', () => {
-    render(<CardTile banner={<span>icon</span>}>Q4 Planning</CardTile>);
-    expect(screen.getByText('icon')).toBeDefined();
-  });
-
-  it('applies bannerColor as an inline background-color', () => {
-    const { container } = render(<CardTile bannerColor="#c7d8ff">Q4 Planning</CardTile>);
-    const banner = container.querySelector('[aria-hidden="true"]') as HTMLElement;
-    expect(banner.style.backgroundColor).toBe('rgb(199, 216, 255)');
-  });
-
-  it('hides the banner from assistive tech', () => {
-    const { container } = render(<CardTile>Q4 Planning</CardTile>);
-    expect(container.querySelector('[aria-hidden="true"]')).not.toBeNull();
-  });
-});
-
-describe('CardTileGrid', () => {
-  it('renders its children', () => {
-    render(
-      <CardTileGrid>
-        <CardTile>One</CardTile>
-        <CardTile>Two</CardTile>
-      </CardTileGrid>,
-    );
-    expect(screen.getByText('One')).toBeDefined();
-    expect(screen.getByText('Two')).toBeDefined();
-  });
-});
-
-describe('NewCardTile', () => {
-  it('renders the given label', () => {
-    render(<NewCardTile label="New project" />);
-    expect(screen.getByRole('button', { name: /New project/ })).toBeDefined();
-  });
-
-  it('calls onClick when clicked', () => {
-    const onClick = vi.fn();
-    render(<NewCardTile label="New project" onClick={onClick} />);
-    fireEvent.click(screen.getByRole('button', { name: /New project/ }));
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-});

package/src/components/CheckableListRow/CheckableListRow.module.css

@@ -1,95 +0,0 @@
-.row {
-  display: flex;
-  align-items: center;
-  gap: var(--sv-space-3);
-  width: 100%;
-}
-
-.tapTarget {
-  display: flex;
-  align-items: center;
-  gap: var(--sv-space-2);
-  flex: 1;
-  min-width: 0;
-  min-height: var(--sv-touch-target-min);
-  cursor: pointer;
-}
-
-.tapTarget:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-  border-radius: var(--sv-radius-sm);
-}
-
-/* Visual box — matches Checkbox.module.css's .box/.checked/.tick. */
-.box {
-  --checkbox-box-size: 18px;
-  flex-shrink: 0;
-  width: var(--checkbox-box-size);
-  height: var(--checkbox-box-size);
-  border-radius: var(--sv-radius-sm);
-  border: 1.5px solid var(--sv-color-border-strong);
-  background: var(--sv-color-surface);
-  transition:
-    background-color 0.15s ease,
-    border-color 0.15s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.checked {
-  background-color: var(--sv-color-accent);
-  border-color: var(--sv-color-accent);
-  color: var(--sv-white);
-}
-
-.tick {
-  width: 10px;
-  height: 8px;
-  pointer-events: none;
-}
-
-.icon {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  color: var(--sv-color-text-muted);
-}
-
-.label {
-  flex: 1;
-  min-width: 0;
-  font-size: var(--sv-font-size-sm);
-  color: var(--sv-color-text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  transition: color 0.15s ease;
-  position: relative;
-}
-
-.label::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  width: 100%;
-  height: 1.5px;
-  background: var(--sv-color-text-muted);
-  transform: scaleX(0);
-  transform-origin: left center;
-  transition: transform 0.2s ease;
-}
-
-.struck {
-  color: var(--sv-color-text-muted);
-}
-
-.struck::after {
-  transform: scaleX(1);
-}
-
-.trailing {
-  flex-shrink: 0;
-}