@sovereignfs/ui 0.40.0 → 0.45.0

package/dist/Select.module.css

@@ -8,8 +8,11 @@
 .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);
+  /* 36px rendered height. Explicit height + border-box, same technique as
+     Input. Right-pad to clear the custom chevron. */
+  height: 36px;
+  box-sizing: border-box;
+  padding: 4px var(--sv-space-8) 4px var(--sv-space-3);
   font-family: var(--sv-font-family);
   font-size: var(--sv-font-size-sm);
   line-height: 1.5;
@@ -25,8 +28,9 @@
     box-shadow 0.15s ease;
 }
 
-/* sm — compact for table cells and inline controls */
+/* sm — compact for table cells and inline controls. 32px height. */
 .sm .select {
+  height: 32px;
   padding: 2px var(--sv-space-6) 2px var(--sv-space-2);
   font-size: var(--sv-font-size-sm);
   line-height: 1.4;

package/dist/Slider.module.css

@@ -0,0 +1,95 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sv-space-2);
+}
+
+.label {
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-primary);
+}
+
+.slider {
+  appearance: none;
+  width: 100%;
+  height: 20px;
+  background: transparent;
+  cursor: pointer;
+  margin: 0;
+}
+
+/* Expand the vertical hit area for touch dragging without thickening the
+   visible track — same rationale as Button/Checkbox's touch-target
+   expansion, gated to the primary pointer. */
+@media (pointer: coarse) {
+  .slider {
+    height: var(--sv-touch-target-min, 44px);
+  }
+}
+
+.slider:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.slider:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}
+
+/* Track — WebKit/Blink. The filled portion is a gradient computed from the
+   --slider-fill custom property the component sets inline; no JS-measured
+   pixel math, just a CSS variable driving a hard color stop. */
+.slider::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: var(--sv-radius-full);
+  background: linear-gradient(
+    to right,
+    var(--sv-color-accent) var(--slider-fill),
+    var(--sv-color-border-strong) var(--slider-fill)
+  );
+}
+
+.slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  margin-top: -6px;
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-accent);
+  box-shadow: var(--sv-shadow-control);
+  cursor: pointer;
+}
+
+.slider:disabled::-webkit-slider-thumb {
+  cursor: not-allowed;
+}
+
+/* Track — Firefox. Separate track/progress pseudo-elements instead of a
+   gradient — Firefox renders the filled portion natively via
+   ::-moz-range-progress. */
+.slider::-moz-range-track {
+  height: 4px;
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-border-strong);
+}
+
+.slider::-moz-range-progress {
+  height: 4px;
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-accent);
+}
+
+.slider::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border: none;
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-accent);
+  box-shadow: var(--sv-shadow-control);
+  cursor: pointer;
+}
+
+.slider:disabled::-moz-range-thumb {
+  cursor: not-allowed;
+}

package/dist/Table.module.css

@@ -0,0 +1,45 @@
+/* Horizontal scroll container — masked-edge fade + hidden scrollbar, same
+   technique as NavTabs. Always active (not gated to a narrow viewport):
+   unlike NavTabs' item count, a table's column count is content-driven and
+   can overflow at any screen size. */
+.scrollContainer {
+  overflow-x: auto;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+  mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
+}
+
+.scrollContainer::-webkit-scrollbar {
+  display: none;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--sv-font-size-sm);
+}
+
+.head .row {
+  border-bottom: 1px solid var(--sv-color-border-strong);
+}
+
+.body .row {
+  border-bottom: 1px solid var(--sv-color-border);
+}
+
+.body .row:last-child {
+  border-bottom: none;
+}
+
+.th {
+  padding: var(--sv-space-2) var(--sv-space-3);
+  text-align: left;
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-muted);
+  white-space: nowrap;
+}
+
+.td {
+  padding: var(--sv-space-2) var(--sv-space-3);
+  color: var(--sv-color-text-primary);
+}

package/dist/Tabs.module.css

@@ -12,7 +12,12 @@
 
 .tab {
   flex-shrink: 0;
-  padding: var(--sv-space-2) var(--sv-space-4);
+  /* 36px rendered height, matching this scale's other 36px controls (Input,
+     Select). Vertical padding hardcoded to hit the exact height, same
+     reasoning as Button — accounting for the 2px border-bottom below,
+     which (content-box) adds to the rendered height on top of font-size +
+     padding. */
+  padding: 10px var(--sv-space-4);
   border: none;
   border-bottom: 2px solid transparent;
   /* Negative margin pulls the 2px border flush with the tablist border-bottom */

package/dist/Toggle.module.css

@@ -1,5 +1,10 @@
 .track {
-  /* 38×22px pill — spec dimensions */
+  /* 38×22px pill — spec dimensions. Sizing audit: despite the component
+     name, this renders as a binary pill switch (role="switch"), not a
+     pressable toggle button — reviewed against this scale's other compact
+     controls with that in mind. Kept dimensions unchanged, generously
+     sized for touch-friendliness. (The name vs. actual behavior mismatch
+     is a separate, pre-existing naming note, not addressed here.) */
   display: inline-flex;
   align-items: center;
   width: 38px;

package/dist/Typography.module.css

@@ -0,0 +1,47 @@
+.h1 {
+  margin: 0;
+  font-size: var(--sv-font-size-2xl);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+}
+
+.h2 {
+  margin: 0;
+  font-size: var(--sv-font-size-xl);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+}
+
+.h3 {
+  margin: 0;
+  font-size: var(--sv-font-size-lg);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+}
+
+.h4 {
+  margin: 0;
+  font-size: var(--sv-font-size-md);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+}
+
+.body {
+  margin: 0;
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-primary);
+}
+
+.caption {
+  margin: 0;
+  font-size: var(--sv-font-size-caption);
+  color: var(--sv-color-text-muted);
+}
+
+.label {
+  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;
+}