@sovereignfs/ui 0.21.0

package/dist/Popover.module.css

@@ -0,0 +1,44 @@
+.container {
+  position: relative;
+  display: inline-flex;
+}
+
+.panel {
+  position: absolute;
+  top: calc(100% + var(--sv-space-2));
+  z-index: 60;
+  background: var(--sv-color-surface);
+  border: 1px solid var(--sv-color-border);
+  border-radius: var(--sv-radius-2xl);
+  box-shadow: var(--sv-shadow-popover);
+  overflow: hidden;
+  /* Slide in from slightly above */
+  animation: sv-popover-in 0.12s ease;
+}
+
+@keyframes sv-popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .panel {
+    animation: none;
+  }
+}
+
+/* Alignment: right edge of panel aligns to right edge of trigger */
+.right {
+  right: 0;
+}
+
+/* Alignment: left edge of panel aligns to left edge of trigger */
+.left {
+  left: 0;
+}

package/dist/SegmentedControl.module.css

@@ -0,0 +1,53 @@
+.track {
+  display: inline-flex;
+  background: var(--sv-color-surface-sunken);
+  border-radius: var(--sv-radius-full);
+  border: 1px solid var(--sv-color-border);
+  padding: 2px;
+  gap: 2px;
+}
+
+/* Size variants */
+.md .segment {
+  padding: var(--sv-space-1) var(--sv-space-3);
+  font-size: var(--sv-font-size-sm);
+}
+
+.sm .segment {
+  padding: 2px var(--sv-space-2);
+  font-size: var(--sv-font-size-caption);
+}
+
+.segment {
+  border: none;
+  border-radius: var(--sv-radius-full);
+  font-family: var(--sv-font-family);
+  font-weight: var(--sv-font-weight-medium);
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background-color 0.12s ease,
+    color 0.12s ease,
+    box-shadow 0.12s ease;
+  white-space: nowrap;
+}
+
+.segment:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 1px;
+}
+
+.active {
+  background: var(--sv-color-surface);
+  color: var(--sv-color-text-primary);
+  box-shadow: var(--sv-shadow-card);
+}
+
+.inactive {
+  background: transparent;
+  color: var(--sv-color-text-muted);
+}
+
+.inactive:hover {
+  color: var(--sv-color-text-primary);
+}

package/dist/Select.module.css

@@ -0,0 +1,69 @@
+/* Wrapper provides the positioning context for the custom chevron */
+.wrapper {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+.select {
+  display: block;
+  width: 100%;
+  /* Right-pad to clear the custom chevron */
+  padding: var(--sv-space-2) var(--sv-space-8) var(--sv-space-2) 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;
+  /* Remove native OS chevron */
+  appearance: none;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+/* sm — compact for table cells and inline controls */
+.sm .select {
+  padding: 2px var(--sv-space-6) 2px var(--sv-space-2);
+  font-size: var(--sv-font-size-sm);
+  line-height: 1.4;
+  border-radius: var(--sv-radius-sm);
+}
+
+.select:focus-visible {
+  outline: none;
+  border-color: var(--sv-color-accent);
+  box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
+}
+
+.select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Compact size variant — reduced padding for table-cell usage */
+.sm .select {
+  padding-top: var(--sv-space-1);
+  padding-bottom: var(--sv-space-1);
+  font-size: var(--sv-font-size-sm);
+}
+
+/* SVG chevron — matches the icon stroke style used across the UI */
+.chevron {
+  pointer-events: none;
+  position: absolute;
+  right: var(--sv-space-3);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--sv-color-text-muted);
+  flex-shrink: 0;
+}
+
+.sm .chevron {
+  right: var(--sv-space-2);
+  width: 10px;
+  height: 10px;
+}

package/dist/Spinner.module.css

@@ -0,0 +1,39 @@
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  display: inline-block;
+  border-radius: 50%;
+  border-style: solid;
+  border-color: var(--sv-color-border);
+  border-top-color: var(--sv-color-accent);
+  animation: spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    animation-play-state: paused;
+  }
+}
+
+.sm {
+  width: var(--sv-icon-size-sm);
+  height: var(--sv-icon-size-sm);
+  border-width: 2px;
+}
+
+.md {
+  width: var(--sv-icon-size-md);
+  height: var(--sv-icon-size-md);
+  border-width: 2px;
+}
+
+.lg {
+  width: var(--sv-icon-size-lg);
+  height: var(--sv-icon-size-lg);
+  border-width: 3px;
+}

package/dist/SystemBanner.module.css

@@ -0,0 +1,67 @@
+.banner {
+  position: sticky;
+  top: 0;
+  /* Sits above sidebar rail (z-index ~10) but below dialogs/overlays (z-index 100) */
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sv-space-3);
+  padding: var(--sv-space-2) var(--sv-space-4);
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-sm);
+  line-height: 1.4;
+}
+
+.content {
+  flex: 1;
+  text-align: center;
+}
+
+/* Dismiss button — inherits the variant text colour */
+.dismiss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: var(--sv-radius-sm);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.12s ease;
+}
+
+.dismiss:hover {
+  opacity: 1;
+}
+
+.dismiss:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 1px;
+}
+
+/* Variants */
+.info {
+  background: var(--sv-color-info-surface);
+  color: var(--sv-color-info-text);
+  border-bottom-color: var(--sv-color-info-border);
+}
+
+.warning {
+  background: var(--sv-color-warning-surface);
+  color: var(--sv-color-warning-text);
+  border-bottom-color: var(--sv-color-warning-border);
+}
+
+.error {
+  background: var(--sv-color-error-surface);
+  color: var(--sv-color-error-text);
+  border-bottom-color: var(--sv-color-error-border);
+}

package/dist/Tabs.module.css

@@ -0,0 +1,49 @@
+.tablist {
+  display: flex;
+  border-bottom: 1px solid var(--sv-color-border);
+  /* Horizontal scroll on mobile — scrollbar hidden for clean appearance */
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.tablist::-webkit-scrollbar {
+  display: none;
+}
+
+.tab {
+  flex-shrink: 0;
+  padding: var(--sv-space-2) var(--sv-space-4);
+  border: none;
+  border-bottom: 2px solid transparent;
+  /* Negative margin pulls the 2px border flush with the tablist border-bottom */
+  margin-bottom: -1px;
+  background: transparent;
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-sm);
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    color 0.12s ease,
+    border-color 0.12s ease;
+  white-space: nowrap;
+}
+
+.tab:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: -2px;
+}
+
+.active {
+  color: var(--sv-color-text-primary);
+  font-weight: var(--sv-font-weight-semibold);
+  border-bottom-color: var(--sv-color-accent);
+}
+
+.inactive {
+  color: var(--sv-color-text-muted);
+  font-weight: var(--sv-font-weight-medium);
+}
+
+.inactive:hover {
+  color: var(--sv-color-text-primary);
+}

package/dist/Toast.module.css

@@ -0,0 +1,130 @@
+/* Toast — transient notification snackbar.
+ *
+ * Fixed top-right, 320px. Slides in from above. Each toast auto-dismisses
+ * after `duration` ms. Leading status icon reinforces category at a glance.
+ *
+ * Category variants map to the semantic status tokens (info/success/warning/
+ * error) so the visual language is consistent with banners and badges.
+ * The announcement category uses the accent colour (neutral brand highlight).
+ * `security` matches the error palette — draws maximum attention. */
+
+.region {
+  position: fixed;
+  top: var(--sv-space-4);
+  right: var(--sv-space-4);
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sv-space-2);
+  width: 320px;
+  max-width: calc(100vw - var(--sv-space-8));
+  pointer-events: none;
+}
+
+.toast {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sv-space-3);
+  padding: var(--sv-space-3) var(--sv-space-4);
+  background: var(--sv-color-surface-raised);
+  color: var(--sv-color-text-primary);
+  border: 1px solid var(--sv-color-border);
+  border-radius: var(--sv-radius-md);
+  box-shadow: var(--sv-shadow-overlay);
+  pointer-events: all;
+  animation: toastIn 200ms ease-out;
+}
+
+.toast.exiting {
+  animation: toastOut 200ms ease-in forwards;
+}
+
+/* Leading status icon */
+.icon {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  padding-top: 1px;
+  color: var(--sv-color-border-strong);
+}
+
+.toast.info .icon,
+.toast.announcement .icon {
+  color: var(--sv-color-accent);
+}
+
+.toast.success .icon {
+  color: var(--sv-color-success-text);
+}
+
+.toast.warning .icon {
+  color: var(--sv-color-warning-text);
+}
+
+.toast.error .icon,
+.toast.security .icon {
+  color: var(--sv-color-error-text);
+}
+
+.body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.title {
+  font-size: var(--sv-font-size-sm);
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--sv-color-text-primary);
+}
+
+.message {
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-secondary);
+  margin-top: var(--sv-space-1);
+  line-height: 1.4;
+}
+
+.close {
+  flex: 0 0 auto;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--sv-color-text-tertiary);
+  line-height: 1;
+  font-size: var(--sv-font-size-base);
+}
+
+.close:hover {
+  color: var(--sv-color-text-primary);
+}
+
+@keyframes toastIn {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes toastOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toast,
+  .toast.exiting {
+    animation: none;
+  }
+}

package/dist/Toggle.module.css

@@ -0,0 +1,52 @@
+.track {
+  /* 38×22px pill — spec dimensions */
+  display: inline-flex;
+  align-items: center;
+  width: 38px;
+  height: 22px;
+  border-radius: var(--sv-radius-full);
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color 0.15s ease;
+  position: relative;
+}
+
+.track:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}
+
+.track:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.on {
+  background-color: var(--sv-color-accent);
+}
+
+.off {
+  background-color: var(--sv-color-border-strong);
+}
+
+/* 18px thumb, 2px inset on each side */
+.thumb {
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-white);
+  transition: transform 0.15s ease;
+  left: 2px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.on .thumb {
+  transform: translateX(16px); /* 38 - 18 - 2 - 2 = 16 */
+}
+
+.off .thumb {
+  transform: translateX(0);
+}

package/dist/Tooltip.module.css

@@ -0,0 +1,51 @@
+.wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.tip {
+  position: absolute;
+  z-index: 50;
+  white-space: nowrap;
+  padding: var(--sv-space-1) var(--sv-space-2);
+  background: var(--sv-color-surface-raised);
+  border: 1px solid var(--sv-color-border);
+  border-radius: var(--sv-radius-md);
+  box-shadow: var(--sv-shadow-popover);
+  font-size: var(--sv-font-size-xs);
+  color: var(--sv-color-text-primary);
+  font-family: var(--sv-font-family);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.1s ease;
+}
+
+.wrapper:hover .tip,
+.wrapper:focus-within .tip {
+  opacity: 1;
+}
+
+/* Placement */
+.top {
+  bottom: calc(100% + var(--sv-space-2));
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.bottom {
+  top: calc(100% + var(--sv-space-2));
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.left {
+  right: calc(100% + var(--sv-space-2));
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.right {
+  left: calc(100% + var(--sv-space-2));
+  top: 50%;
+  transform: translateY(-50%);
+}