@sovereignfs/ui 0.54.0 → 0.83.1

package/dist/tokens/primitives.css

@@ -64,6 +64,7 @@
     sans-serif;
   --sv-font-family-mono:
     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  --sv-font-size-2xs: 0.625rem; /* 10px — smallest badge size (Badge size="xs") */
   --sv-font-size-label: 0.6875rem; /* 11px — all-caps section labels */
   --sv-font-size-xs: 0.75rem; /* 12px — mono identifiers */
   --sv-font-size-caption: 0.8125rem; /* 13px — secondary / supporting copy */
@@ -72,6 +73,10 @@
   --sv-font-size-lg: 1.125rem; /* 18px */
   --sv-font-size-xl: 1.25rem; /* 20px */
   --sv-font-size-2xl: 1.5rem; /* 24px */
+  --sv-font-size-3xl: 2rem; /* 32px — document title style (RichTextEditor "Title" paragraph style). A
+     modest step above 2xl reads too close to Heading 1 at a glance (both
+     bold, only 4px apart) — this keeps roughly the same ~1.3x jump Google
+     Docs itself uses between its own Title and Heading 1 sizes. */
   --sv-font-weight-regular: 400;
   --sv-font-weight-medium: 500;
   --sv-font-weight-semibold: 600;
@@ -116,6 +121,12 @@
   ); /* 20px @ scale 1 — bottom sheet (Drawer top corners) */
   --sv-radius-full: 9999px; /* pill / avatar — unaffected by --sv-radius-scale */
 
+  /* Border width (RFC 0094). Theme-stable like the other scale tokens above —
+     a theme preset can override it (e.g. neobrutalism's thicker outline), but
+     it has no separate semantic tier. Every component references this by
+     name instead of a literal `1px`, the way --sv-radius-* etc. do. */
+  --sv-border-width-hairline: 1px;
+
   /* Touch targets — minimum hit-area dimension for interactive controls.
      44px follows the WCAG 2.5.5 / Apple HIG / Material guideline for reliable
      touch without a pointing device. Applied to icon-only controls on mobile

package/dist/tokens/semantic.css

@@ -19,6 +19,17 @@
   --sv-color-text-muted: var(--sv-grey-500);
   --sv-color-text-subtle: var(--sv-grey-400);
   --sv-color-text-on-accent: var(--sv-white);
+  /* Guaranteed-contrast text pair for content painted directly on a
+     plugin-supplied literal background colour (data, not a design-system
+     token — e.g. a kanban board's own canvas colour). A consumer picks
+     whichever member actually contrasts with its own literal background;
+     neither can be theme-reactive the way --sv-color-text-primary is,
+     since the background itself doesn't react to the app's theme either.
+     Intentionally NOT overridden under [data-theme='dark'] below — same
+     "reads the same regardless of overall page theme" reasoning as
+     --sv-color-text-on-error/-success. */
+  --sv-color-text-on-light-fill: var(--sv-grey-950);
+  --sv-color-text-on-dark-fill: var(--sv-grey-50);
 
   --sv-color-border: var(--sv-grey-200);
   --sv-color-border-strong: var(--sv-grey-300);
@@ -68,6 +79,14 @@
      elevation shadow. Composed rgba layers, like --sv-shadow-card. */
   --sv-color-scrim: rgba(0, 0, 0, 0.5);
 
+  /* High-contrast shadow colour (RFC 0094). Distinct from --sv-color-border-strong
+     even though they resolve to the same monochrome scale — a theme preset's
+     hard offset shadows (e.g. neobrutalism) need a bolder, more saturated value
+     than a border does to read as "authentic," so this is its own token rather
+     than reusing border-strong. Unused by the default theme's soft rgba()
+     shadows above; only a preset that opts in (theme-presets.ts) references it. */
+  --sv-color-shadow-strong: var(--sv-grey-950);
+
   --sv-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1);
   --sv-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.08); /* e1 — card hover lift */
   --sv-shadow-popover:
@@ -75,6 +94,17 @@
   --sv-shadow-overlay: 0 10px 38px rgba(0, 0, 0, 0.18), 0 6px 12px rgba(0, 0, 0, 0.12);
   --sv-shadow-control: 0 1px 3px rgba(0, 0, 0, 0.2); /* small interactive-control shadows, e.g. Toggle thumb */
 
+  /* Button press-interaction tokens (RFC 0094). Consumed unconditionally by
+     Button.module.css's :active rule — these defaults (none/0/0) make that
+     rule a no-op for today's default look. A theme preset (e.g.
+     neobrutalism) sets non-zero values to get a tactile "press into shadow"
+     effect. Not overridden under [data-theme='dark'] below — like the
+     shadow tokens above, a theme preset's own light/dark variants set these
+     directly rather than this file deriving a dark-mode default for them. */
+  --sv-button-shadow: none;
+  --sv-button-press-x: 0;
+  --sv-button-press-y: 0;
+
   /*
    * Instance identity tokens (RFC 0027 / RFC 0032 rename). Distinct namespace from --sv-color-*:
    * these hold URLs (not colours) and are set once by the operator, not swapped
@@ -122,6 +152,8 @@
 
   --sv-color-scrim: rgba(0, 0, 0, 0.65);
 
+  --sv-color-shadow-strong: var(--sv-grey-50);
+
   --sv-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
   --sv-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.3);
   --sv-shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);

package/dist/tokens/theme-presets.css

@@ -0,0 +1,33 @@
+/*
+ * Generated by scripts/generate-theme-presets-css.ts — do not edit.
+ * Source of truth: packages/ui/src/tokens/theme-presets.ts
+ *
+ * For Storybook / standalone (non-runtime) use only — set data-theme-preset
+ * on the document root element (<html>), never a nested wrapper. See the
+ * generator script's doc comment for why.
+ */
+[data-theme-preset='neobrutalism'] {
+  --sv-radius-scale: 0;
+  --sv-border-width-hairline: 2px;
+  --sv-shadow-card: 4px 4px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-hover: 6px 6px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-popover: 4px 4px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-overlay: 8px 8px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-control: 2px 2px 0 0 var(--sv-color-shadow-strong);
+  --sv-button-shadow: 4px 4px 0 0 var(--sv-color-shadow-strong);
+  --sv-button-press-x: 4px;
+  --sv-button-press-y: 4px;
+}
+
+[data-theme-preset='neobrutalism'][data-theme='dark'] {
+  --sv-radius-scale: 0;
+  --sv-border-width-hairline: 2px;
+  --sv-shadow-card: 4px 4px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-hover: 6px 6px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-popover: 4px 4px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-overlay: 8px 8px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-control: 2px 2px 0 0 var(--sv-color-shadow-strong);
+  --sv-button-shadow: 4px 4px 0 0 var(--sv-color-shadow-strong);
+  --sv-button-press-x: 4px;
+  --sv-button-press-y: 4px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sovereignfs/ui",
-  "version": "0.54.0",
+  "version": "0.83.1",
   "type": "module",
   "description": "Sovereign Design System — design tokens and React components.",
   "keywords": [
@@ -14,6 +14,9 @@
     "self-hosted"
   ],
   "license": "AGPL-3.0-or-later",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -24,7 +27,8 @@
     },
     "./tokens.css": "./dist/tokens.css",
     "./tokens/primitives.css": "./dist/tokens/primitives.css",
-    "./tokens/semantic.css": "./dist/tokens/semantic.css"
+    "./tokens/semantic.css": "./dist/tokens/semantic.css",
+    "./tokens/theme-presets.css": "./dist/tokens/theme-presets.css"
   },
   "files": [
     "dist",
@@ -32,23 +36,35 @@
     "NOTICE"
   ],
   "peerDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
+  "peerDependenciesMeta": {
+    "@dnd-kit/core": {
+      "optional": true
+    },
+    "@dnd-kit/sortable": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@playwright/test": "^1.62.1",
-    "@storybook/addon-a11y": "^10.5.5",
-    "@storybook/addon-themes": "^10.5.5",
-    "@storybook/react-vite": "^10.5.5",
+    "@storybook/addon-a11y": "^10.6.0",
+    "@storybook/addon-themes": "^10.6.0",
+    "@storybook/react-vite": "^10.6.0",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/react": "^16.3.2",
+    "@testing-library/react": "^16.3.3",
     "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
+    "@types/react-dom": "^19.2.5",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "storybook": "^10.5.5",
+    "storybook": "^10.6.0",
     "tsup": "^8.5.1",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.3",
     "@sovereignfs/tsconfig": "0.0.0"
   },
   "scripts": {

package/src/__tests__/package-json.test.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'vitest';
+import packageJson from '../../package.json';
+
+describe('packages/ui/package.json — sideEffects', () => {
+  it('declares sideEffects as exactly ["**/*.css"]', () => {
+    expect(packageJson.sideEffects).toEqual(['**/*.css']);
+  });
+});

package/src/components/Accordion/Accordion.module.css

@@ -1,3 +1,3 @@
 .root {
-  border-top: 1px solid var(--sv-color-border);
+  border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
 }

package/src/components/Alert/Alert.module.css

@@ -3,7 +3,7 @@
   align-items: flex-start;
   gap: var(--sv-space-2);
   padding: var(--sv-space-3) var(--sv-space-4);
-  border: 1px solid transparent;
+  border: var(--sv-border-width-hairline) solid transparent;
   border-radius: var(--sv-radius-md);
   font-size: var(--sv-font-size-sm);
 }

package/src/components/AppsLauncher/AppsLauncher.module.css

@@ -0,0 +1,96 @@
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: var(--sv-radius-md);
+  background: transparent;
+  color: var(--sv-color-text-primary);
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .trigger:hover {
+    background: var(--sv-color-surface-sunken);
+  }
+}
+
+.header {
+  padding: var(--sv-space-4) var(--sv-space-3) var(--sv-space-1);
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+}
+
+.loading {
+  display: flex;
+  justify-content: center;
+  padding: var(--sv-space-6);
+}
+
+.error {
+  margin: 0;
+  padding: 0 var(--sv-space-3) var(--sv-space-3);
+  color: var(--sv-color-error-text);
+  font-size: var(--sv-font-size-sm);
+}
+
+.grid {
+  display: grid;
+  /* minmax(0, 1fr), not a plain 1fr — a plain 1fr track can grow past the
+     grid's own available width to fit a tile name's min-content size
+     (nowrap), blowing the grid out past the popover's own width instead of
+     letting the name truncate with ellipsis as intended. */
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--sv-space-1);
+  padding: var(--sv-space-2);
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.tile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sv-space-2);
+  padding: var(--sv-space-2);
+  border: none;
+  border-radius: var(--sv-radius-md);
+  background: transparent;
+  text-decoration: none;
+  color: var(--sv-color-text-primary);
+  text-align: center;
+  font: inherit;
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .tile:hover {
+    background: var(--sv-color-surface-sunken);
+  }
+}
+
+.tileIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--sv-radius-md);
+  background: var(--sv-color-surface-sunken);
+  font-size: var(--sv-font-size-xs);
+  font-weight: var(--sv-font-weight-semibold);
+  overflow: hidden;
+}
+
+.tileName {
+  font-size: var(--sv-font-size-caption);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}

package/src/components/AppsLauncher/AppsLauncher.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { AppsLauncher } from './AppsLauncher';
+import { Icon } from '../Icon/Icon';
+
+const items = [
+  {
+    key: 'home',
+    icon: <Icon name="house" size="md" aria-hidden />,
+    label: 'Home',
+    href: '/launcher',
+  },
+  {
+    key: 'console',
+    icon: <Icon name="layout-dashboard" size="md" aria-hidden />,
+    label: 'Console',
+    href: '/console',
+  },
+  {
+    key: 'notes',
+    icon: <Icon name="file" size="md" aria-hidden />,
+    label: 'Notes',
+    href: '/notes',
+  },
+];
+
+const meta = {
+  title: 'Components/AppsLauncher',
+  component: AppsLauncher,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          "The desktop 'Apps' switcher — a 28px grid trigger opening a Popover tile grid. The desktop counterpart to MobileAppsDrawer: same items shape, different chrome. Presentational only — items are supplied already resolved.",
+      },
+    },
+  },
+  args: {
+    items,
+  },
+} satisfies Meta<typeof AppsLauncher>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    error: true,
+  },
+};

package/src/components/AppsLauncher/AppsLauncher.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+import { useState, type ReactNode } from 'react';
+import { Icon } from '../Icon/Icon';
+import { Popover } from '../Popover/Popover';
+import { Spinner } from '../Spinner/Spinner';
+import styles from './AppsLauncher.module.css';
+
+export interface AppsLauncherItem {
+  /** Stable identity for this tile — used as the React key. */
+  key: string;
+  icon: ReactNode;
+  label: string;
+  /** Renders an `<a>` when set; otherwise a `<button>` calling `onClick` —
+   *  same dual-mode convention as `MobileAppsDrawer`'s items. */
+  href?: string;
+  onClick?: () => void;
+}
+
+export interface AppsLauncherProps {
+  items: AppsLauncherItem[];
+  /** Shows a spinner in place of the grid — e.g. while the tile list is
+   *  still being fetched. */
+  loading?: boolean;
+  /** Shows an error message in place of the grid. */
+  error?: boolean;
+  errorMessage?: string;
+  /** Trigger button's icon. Defaults to a generic grid glyph — pass the
+   *  real Launcher plugin's own icon for pixel parity with the platform. */
+  triggerIcon?: ReactNode;
+  /** Trigger button's accessible label, and the popover's own. Defaults to "Apps". */
+  'aria-label'?: string;
+  align?: 'left' | 'right';
+}
+
+function AppsLauncherTile({ icon, label, href, onClick }: Omit<AppsLauncherItem, 'key'>) {
+  const content = (
+    <>
+      <span className={styles.tileIcon} aria-hidden="true">
+        {icon}
+      </span>
+      <span className={styles.tileName}>{label}</span>
+    </>
+  );
+  if (href) {
+    return (
+      <a href={href} className={styles.tile} onClick={onClick}>
+        {content}
+      </a>
+    );
+  }
+  return (
+    <button type="button" className={styles.tile} onClick={onClick}>
+      {content}
+    </button>
+  );
+}
+
+/**
+ * AppsLauncher — the desktop "Apps" switcher: a 28px grid-icon trigger that
+ * opens a `Popover` with a 3-column tile grid. The desktop counterpart to
+ * `MobileAppsDrawer` — same `items` shape (`key`/`icon`/`label`/`href`/
+ * `onClick`), different chrome (floating panel vs. bottom sheet), matching
+ * how `Header`/`MobileHeader` already split the same way.
+ *
+ * Presentational only — no plugin-list fetching of its own. The consumer
+ * supplies `items` already resolved (and `loading`/`error` while it isn't
+ * yet), matching `MobileAppsDrawer`'s own boundary.
+ */
+export function AppsLauncher({
+  items,
+  loading,
+  error,
+  errorMessage = "Couldn't load apps. Try again.",
+  triggerIcon,
+  'aria-label': ariaLabel = 'Apps',
+  align = 'right',
+}: AppsLauncherProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover
+      align={align}
+      width={320}
+      aria-label={ariaLabel}
+      open={open}
+      onClose={() => setOpen(false)}
+      trigger={
+        <button
+          type="button"
+          aria-label={ariaLabel}
+          aria-haspopup="true"
+          aria-expanded={open}
+          onClick={() => setOpen((v) => !v)}
+          className={styles.trigger}
+        >
+          {triggerIcon ?? <Icon name="layout-grid" size="md" aria-hidden />}
+        </button>
+      }
+    >
+      <div className={styles.header}>{ariaLabel}</div>
+      {loading ? (
+        <div className={styles.loading}>
+          <Spinner size="md" label="Loading apps…" />
+        </div>
+      ) : error ? (
+        <p className={styles.error}>{errorMessage}</p>
+      ) : (
+        <div className={styles.grid}>
+          {items.map(({ key, ...item }) => (
+            <AppsLauncherTile key={key} {...item} />
+          ))}
+        </div>
+      )}
+    </Popover>
+  );
+}

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

@@ -0,0 +1,52 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { AppsLauncher } from '../AppsLauncher';
+
+afterEach(() => {
+  cleanup();
+});
+
+const items = [
+  { key: 'home', icon: <span>home-icon</span>, label: 'Home', href: '/launcher' },
+  { key: 'notes', icon: <span>notes-icon</span>, label: 'Notes', onClick: vi.fn() },
+];
+
+describe('AppsLauncher', () => {
+  it('renders a closed trigger by default', () => {
+    render(<AppsLauncher items={items} />);
+    expect(screen.getByRole('button', { name: 'Apps' })).toBeTruthy();
+    expect(screen.queryByText('Home')).toBeNull();
+  });
+
+  it('opens the tile grid on trigger click', () => {
+    render(<AppsLauncher items={items} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Apps' }));
+    expect(screen.getByText('Home')).toBeTruthy();
+    expect(screen.getByText('Notes')).toBeTruthy();
+  });
+
+  it('renders an href item as a link and an onClick item as a button', () => {
+    render(<AppsLauncher items={items} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Apps' }));
+    expect(screen.getByText('Home').closest('a')).toHaveProperty(
+      'href',
+      expect.stringContaining('/launcher'),
+    );
+    expect(screen.getByText('Notes').closest('button')).toBeTruthy();
+  });
+
+  it('shows a loading state instead of the grid', () => {
+    render(<AppsLauncher items={items} loading />);
+    fireEvent.click(screen.getByRole('button', { name: 'Apps' }));
+    expect(screen.queryByText('Home')).toBeNull();
+    expect(screen.getByRole('status', { name: /Loading apps/ })).toBeTruthy();
+  });
+
+  it('shows an error state instead of the grid', () => {
+    render(<AppsLauncher items={items} error errorMessage="Nope" />);
+    fireEvent.click(screen.getByRole('button', { name: 'Apps' }));
+    expect(screen.queryByText('Home')).toBeNull();
+    expect(screen.getByText('Nope')).toBeTruthy();
+  });
+});

package/src/components/Avatar/Avatar.module.css

@@ -4,7 +4,7 @@
   justify-content: center;
   border-radius: 50%;
   background: var(--sv-color-surface-raised);
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   overflow: hidden;
   flex-shrink: 0;
   font-weight: var(--sv-font-weight-medium);

package/src/components/Badge/Badge.module.css

@@ -19,7 +19,7 @@
 /* role — neutral fill, border */
 .role {
   background: var(--sv-color-surface-sunken);
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   color: var(--sv-color-text-primary);
   font-weight: var(--sv-font-weight-semibold);
 }
@@ -31,32 +31,32 @@
 
 .chipGreen {
   background: var(--sv-color-success-surface);
-  border: 1px solid var(--sv-color-success-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-success-border);
   color: var(--sv-color-success-text);
 }
 
 .chipAmber {
   background: var(--sv-color-warning-surface);
-  border: 1px solid var(--sv-color-warning-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-warning-border);
   color: var(--sv-color-warning-text);
 }
 
 .chipRed {
   background: var(--sv-color-error-surface);
-  border: 1px solid var(--sv-color-error-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-error-border);
   color: var(--sv-color-error-text);
 }
 
 .chipNeutral {
   background: var(--sv-color-surface-sunken);
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   color: var(--sv-color-text-muted);
 }
 
 /* mono — monospace font, neutral surface, for type tags / versions */
 .mono {
   background: var(--sv-color-surface-sunken);
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   color: var(--sv-color-text-muted);
   font-family: var(--sv-font-family-mono);
 }
@@ -66,7 +66,15 @@
    composed partials fighting over the same properties. `.role.md`,
    `.status.md`, and `.mono.md` reproduce the badge's original (and, until
    now, only) sizing exactly, so the default (no `size` prop) renders
-   pixel-identical to before this scale existed. */
+   pixel-identical to before this scale existed. `xs` was added later, for a
+   badge sitting inline next to larger text where `sm` (already the smallest
+   type-scale token, `--sv-font-size-label`) still read oversized — it needed
+   a new, smaller primitive (`--sv-font-size-2xs`) rather than reusing one. */
+.role.xs {
+  padding: 1px 3px;
+  font-size: var(--sv-font-size-2xs);
+}
+
 .role.sm {
   padding: 1px var(--sv-space-1);
   font-size: var(--sv-font-size-label);
@@ -82,6 +90,11 @@
   font-size: var(--sv-font-size-sm);
 }
 
+.mono.xs {
+  padding: 1px 3px;
+  font-size: var(--sv-font-size-2xs);
+}
+
 .mono.sm {
   padding: 1px var(--sv-space-1);
   font-size: var(--sv-font-size-label);
@@ -100,6 +113,11 @@
 /* status keeps a tighter left edge than right at every size — the dot +
    gap already read as space before the text, so a full padding-inline-start
    would double it up. */
+.status.xs {
+  padding: 1px 3px 1px 2px;
+  font-size: var(--sv-font-size-2xs);
+}
+
 .status.sm {
   padding: 1px var(--sv-space-1) 1px 3px;
   font-size: var(--sv-font-size-label);
@@ -122,6 +140,11 @@
   flex-shrink: 0;
 }
 
+.xs .dot {
+  width: 4px;
+  height: 4px;
+}
+
 .sm .dot {
   width: 5px;
   height: 5px;