@sovereignfs/ui 0.41.0 → 0.54.0

package/dist/Accordion.module.css

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

package/dist/Alert.module.css

@@ -0,0 +1,62 @@
+.alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sv-space-2);
+  padding: var(--sv-space-3) var(--sv-space-4);
+  border: 1px solid transparent;
+  border-radius: var(--sv-radius-md);
+  font-size: var(--sv-font-size-sm);
+}
+
+.icon {
+  flex-shrink: 0;
+  /* Optically align to the first line of text rather than the box's
+     vertical center — matches how the heading/body cap-height sits. */
+  margin-top: 2px;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sv-space-1);
+  min-width: 0;
+}
+
+.heading {
+  margin: 0;
+  font-weight: var(--sv-font-weight-semibold);
+}
+
+.body {
+  margin: 0;
+}
+
+.info {
+  background: var(--sv-color-info-surface);
+  border-color: var(--sv-color-info-border);
+  color: var(--sv-color-info-text);
+}
+
+.success {
+  background: var(--sv-color-success-surface);
+  border-color: var(--sv-color-success-border);
+  color: var(--sv-color-success-text);
+}
+
+.warning {
+  background: var(--sv-color-warning-surface);
+  border-color: var(--sv-color-warning-border);
+  color: var(--sv-color-warning-text);
+}
+
+.error {
+  background: var(--sv-color-error-surface);
+  border-color: var(--sv-color-error-border);
+  color: var(--sv-color-error-text);
+}
+
+.neutral {
+  background: var(--sv-color-surface-sunken);
+  border-color: var(--sv-color-border);
+  color: var(--sv-color-text-primary);
+}

package/dist/AspectRatio.module.css

@@ -0,0 +1,15 @@
+.root {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--sv-radius-md);
+}
+
+/* A single direct child (img/video/iframe) fills the ratio box. */
+.root > :global(*) {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

package/dist/Badge.module.css

@@ -4,27 +4,28 @@
   gap: var(--sv-space-1);
   border-radius: var(--sv-radius-sm);
   font-family: var(--sv-font-family);
-  font-size: var(--sv-font-size-xs);
   line-height: 1;
   white-space: nowrap;
   user-select: none;
+}
+
+/* Applied by default (uppercase=true) — opt out for a title-case badge that
+   renders children exactly as passed in. */
+.uppercase {
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
 
-/* role — neutral fill, border, title case */
+/* role — neutral fill, border */
 .role {
-  padding: 2px var(--sv-space-2);
   background: var(--sv-color-surface-sunken);
   border: 1px solid var(--sv-color-border);
   color: var(--sv-color-text-primary);
-  font-size: var(--sv-font-size-label);
   font-weight: var(--sv-font-weight-semibold);
 }
 
 /* status — tinted chip with leading colour dot; colour set by chip* classes below */
 .status {
-  padding: 2px var(--sv-space-2) 2px var(--sv-space-1);
   font-weight: var(--sv-font-weight-medium);
 }
 
@@ -54,23 +55,88 @@
 
 /* mono — monospace font, neutral surface, for type tags / versions */
 .mono {
-  padding: 2px var(--sv-space-2);
   background: var(--sv-color-surface-sunken);
   border: 1px solid var(--sv-color-border);
   color: var(--sv-color-text-muted);
   font-family: var(--sv-font-family-mono);
+}
+
+/* Size × variant — font-size and padding are the two axes that change
+   together, so each combination is one compound rule rather than two
+   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. */
+.role.sm {
+  padding: 1px var(--sv-space-1);
+  font-size: var(--sv-font-size-label);
+}
+
+.role.md {
+  padding: 2px var(--sv-space-2);
+  font-size: var(--sv-font-size-label);
+}
+
+.role.lg {
+  padding: 3px var(--sv-space-3);
+  font-size: var(--sv-font-size-sm);
+}
+
+.mono.sm {
+  padding: 1px var(--sv-space-1);
+  font-size: var(--sv-font-size-label);
+}
+
+.mono.md {
+  padding: 2px var(--sv-space-2);
   font-size: var(--sv-font-size-xs);
 }
 
-/* Status dot */
+.mono.lg {
+  padding: 3px var(--sv-space-3);
+  font-size: var(--sv-font-size-sm);
+}
+
+/* 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.sm {
+  padding: 1px var(--sv-space-1) 1px 3px;
+  font-size: var(--sv-font-size-label);
+}
+
+.status.md {
+  padding: 2px var(--sv-space-2) 2px var(--sv-space-1);
+  font-size: var(--sv-font-size-xs);
+}
+
+.status.lg {
+  padding: 3px var(--sv-space-3) 3px var(--sv-space-2);
+  font-size: var(--sv-font-size-sm);
+}
+
+/* Status dot — scales with size */
 .dot {
   display: inline-block;
-  width: 6px;
-  height: 6px;
   border-radius: var(--sv-radius-full);
   flex-shrink: 0;
 }
 
+.sm .dot {
+  width: 5px;
+  height: 5px;
+}
+
+.md .dot {
+  width: 6px;
+  height: 6px;
+}
+
+.lg .dot {
+  width: 8px;
+  height: 8px;
+}
+
 .dotGreen {
   background: var(--sv-color-success-text);
 }

package/dist/Breadcrumb.module.css

@@ -0,0 +1,49 @@
+.nav {
+  min-width: 0;
+}
+
+.list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sv-space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sv-space-1);
+}
+
+.link {
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-muted);
+  text-decoration: none;
+}
+
+@media (hover: hover) {
+  .link:hover {
+    color: var(--sv-color-text-primary);
+    text-decoration: underline;
+  }
+}
+
+.link:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+  border-radius: var(--sv-radius-sm);
+}
+
+.current {
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-medium);
+  color: var(--sv-color-text-primary);
+}
+
+.separator {
+  color: var(--sv-color-text-muted);
+  flex-shrink: 0;
+}

package/dist/Button.module.css

@@ -37,14 +37,23 @@
   }
 }
 
-/* Sizes */
+/* Sizes — 32px / 36px / 40px rendered height (font-size + padding*2 + border*2).
+   Vertical padding is hardcoded where the --sv-space-* scale can't hit the
+   exact target height; horizontal padding stays token-based, growing with
+   size for visual rhythm with the rest of this scale. */
 .sm {
-  padding: var(--sv-space-1) var(--sv-space-3);
+  padding: var(--sv-space-2) var(--sv-space-3);
   font-size: var(--sv-font-size-sm);
 }
 
 .md {
-  padding: 13px var(--sv-space-4);
+  padding: 10px var(--sv-space-4);
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-semibold);
+}
+
+.lg {
+  padding: var(--sv-space-3) var(--sv-space-5);
   font-size: var(--sv-font-size-sm);
   font-weight: var(--sv-font-weight-semibold);
 }

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

@@ -0,0 +1,80 @@
+/* Command — rendered inside Dialog's own panel/scroll chrome; this file only
+ * owns the search input and the filtered result list beneath it. */
+
+.root {
+  display: flex;
+  flex-direction: column;
+  /* Panel content area is otherwise unbounded; cap so a long result list
+     scrolls internally instead of growing the dialog indefinitely. */
+  max-height: min(60vh, 420px);
+}
+
+.input {
+  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);
+}
+
+.input:focus {
+  outline: none;
+}
+
+.input::placeholder {
+  color: var(--sv-color-text-muted);
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: var(--sv-space-1);
+  overflow-y: auto;
+}
+
+.groupList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.groupLabel {
+  padding: var(--sv-space-2) var(--sv-space-3) var(--sv-space-1);
+  font-size: var(--sv-font-size-label);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.item {
+  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;
+}
+
+.itemHighlighted {
+  background: var(--sv-color-surface-sunken);
+}
+
+.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/dist/ConfirmDialog.module.css

@@ -65,7 +65,11 @@
   align-items: center;
   justify-content: center;
   gap: var(--sv-space-2);
-  padding: 13px var(--sv-space-4);
+  /* Kept in sync with Button's .md rule by hand (see design-system.md
+     "Button and Checkbox touch ergonomics" — not a literal reuse of
+     Button). Matches Button's md padding, updated alongside it (10px,
+     36px rendered height). */
+  padding: 10px var(--sv-space-4);
   border: 1px solid transparent;
   border-radius: var(--sv-radius-md);
   font-family: var(--sv-font-family);

package/dist/DataTable.module.css

@@ -0,0 +1,28 @@
+.sortButton {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sv-space-1);
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  color: inherit;
+  font: inherit;
+  font-weight: inherit;
+  cursor: pointer;
+}
+
+.sortButton:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+  border-radius: var(--sv-radius-sm);
+}
+
+.sortIcon {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: var(--sv-icon-size-sm);
+  height: var(--sv-icon-size-sm);
+  align-items: center;
+  justify-content: center;
+}

package/dist/DatePicker.module.css

@@ -1,5 +1,7 @@
 /* DatePicker — trigger styled to match Input's height/border/radius/focus
- * ring for visual consistency as a form field. */
+ * ring for visual consistency as a form field. Kept in sync with Input's
+ * own sizing by hand (36px rendered height via explicit height +
+ * border-box, not a literal reuse of Input). */
 
 .trigger {
   display: flex;
@@ -7,7 +9,9 @@
   justify-content: space-between;
   gap: var(--sv-space-2);
   width: 100%;
-  padding: var(--sv-space-2) var(--sv-space-3);
+  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;

package/dist/Dialog.module.css

@@ -79,6 +79,9 @@
   }
 }
 
+/* Sizing audit: reviewed padding/radius against this scale's other
+   surfaces. --sv-radius-lg (shared with Card via .panel below) left
+   unchanged for the same blast-radius reason as Card.module.css. */
 .content {
   flex: 1 1 auto;
   overflow-y: auto;

package/dist/HoverCard.module.css

@@ -0,0 +1,3 @@
+.root {
+  display: inline-flex;
+}

package/dist/Input.module.css

@@ -1,7 +1,12 @@
 .input {
   display: block;
   width: 100%;
-  padding: var(--sv-space-2) var(--sv-space-3);
+  /* 36px rendered height. Explicit height + border-box (rather than
+     deriving height from padding and line-height) gives an exact,
+     browser-independent target instead of an approximation. */
+  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;