@sovereignfs/ui 0.54.0 → 0.83.1

package/dist/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/dist/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/dist/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/dist/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/dist/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;

package/dist/BalanceChip.module.css

@@ -4,7 +4,7 @@
   max-width: 100%;
   min-height: 24px;
   padding: 2px var(--sv-space-2);
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   border-radius: var(--sv-radius-full);
   font-family: var(--sv-font-family);
   font-size: var(--sv-font-size-xs);

package/dist/Button.module.css

@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: center;
   gap: var(--sv-space-2);
-  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-weight: var(--sv-font-weight-medium);
@@ -12,10 +12,15 @@
   /* Removes the ~300ms double-tap-to-zoom delay on touch — this is a tap
      target, never a pinch-zoom surface. */
   touch-action: manipulation;
+  /* --sv-button-shadow defaults to `none` (semantic.css) — this box-shadow
+     line is a no-op for every theme that doesn't set it (RFC 0094). */
+  box-shadow: var(--sv-button-shadow);
   transition:
     background-color 0.15s ease,
     border-color 0.15s ease,
-    color 0.15s ease;
+    color 0.15s ease,
+    transform 0.1s ease,
+    box-shadow 0.1s ease;
 }
 
 .button:focus-visible {
@@ -28,6 +33,17 @@
   cursor: not-allowed;
 }
 
+/* --sv-button-press-x/-y default to 0 (semantic.css) — translate(0, 0) is a
+   no-op, so this rule only produces a visible "press into shadow" effect
+   for a theme preset that sets non-zero values (RFC 0094). Unguarded by
+   (hover: hover) deliberately: :active press feedback is wanted on every
+   input type, the same reasoning documented for Button's existing
+   color-mix() :active background changes below. */
+.button:active:not(:disabled) {
+  transform: translate(var(--sv-button-press-x), var(--sv-button-press-y));
+  box-shadow: none;
+}
+
 /* Touch target: gated to (pointer: coarse) — the *primary* pointer, not
    (any-pointer: coarse) — so a touchscreen laptop with mouse/trackpad as
    primary keeps desktop density (see mobile design-system plan, Part 4 #5). */

package/dist/Card.module.css

@@ -6,7 +6,7 @@
    exists. */
 .card {
   background: var(--sv-color-surface-raised);
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   border-radius: var(--sv-radius-lg);
   box-shadow: var(--sv-shadow-card);
 }

package/dist/CardTile.module.css

@@ -0,0 +1,181 @@
+.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/dist/CodeTextarea.module.css

@@ -13,7 +13,7 @@
   overflow: auto;
   resize: vertical;
   background: 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);
   transition:
     border-color 0.15s ease,

package/dist/Collapsible.module.css

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

package/dist/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/dist/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/dist/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/dist/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/dist/ConsentPrompt.module.css

@@ -0,0 +1,21 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sv-space-2);
+}
+
+.title {
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-primary);
+}
+
+.description {
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-muted);
+}
+
+.actions {
+  display: flex;
+  gap: var(--sv-space-2);
+  margin-top: var(--sv-space-1);
+}