@sovereignfs/ui 0.41.0 → 0.54.0

package/dist/Pagination.module.css

@@ -0,0 +1,98 @@
+.nav {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-1);
+}
+
+.list {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* Icon-only nav buttons — same footprint as Dialog's close button. */
+.navButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sv-space-8);
+  height: var(--sv-space-8);
+  border: none;
+  border-radius: var(--sv-radius-md);
+  background: transparent;
+  color: var(--sv-color-text-primary);
+  cursor: pointer;
+}
+
+.navButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@media (hover: hover) {
+  .navButton:not(:disabled):hover {
+    background: var(--sv-color-surface-sunken);
+  }
+}
+
+.navButton:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}
+
+@media (pointer: coarse) {
+  .navButton {
+    width: var(--sv-touch-target-min, 44px);
+    height: var(--sv-touch-target-min, 44px);
+  }
+}
+
+.pageButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--sv-space-8);
+  height: var(--sv-space-8);
+  padding: 0 var(--sv-space-2);
+  border: none;
+  border-radius: var(--sv-radius-md);
+  background: transparent;
+  color: var(--sv-color-text-primary);
+  font-size: var(--sv-font-size-sm);
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .pageButton:not(.active):hover {
+    background: var(--sv-color-surface-sunken);
+  }
+}
+
+.pageButton:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}
+
+.active {
+  background: var(--sv-color-accent);
+  color: var(--sv-color-text-on-accent);
+}
+
+@media (pointer: coarse) {
+  .pageButton {
+    min-width: var(--sv-touch-target-min, 44px);
+    height: var(--sv-touch-target-min, 44px);
+  }
+}
+
+.ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--sv-space-8);
+  height: var(--sv-space-8);
+  color: var(--sv-color-text-muted);
+}

package/dist/Progress.module.css

@@ -0,0 +1,20 @@
+.track {
+  width: 100%;
+  height: 8px;
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-surface-sunken);
+  overflow: hidden;
+}
+
+.fill {
+  height: 100%;
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-accent);
+  transition: width 0.2s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fill {
+    transition: none;
+  }
+}

package/dist/RadioGroup.module.css

@@ -0,0 +1,88 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sv-space-2);
+}
+
+.option {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+  cursor: pointer;
+}
+
+/* The visual circle — same 18px size and touch-target-expansion technique
+   as Checkbox's box, radius-full instead of radius-sm. */
+.circle {
+  --radio-circle-size: 18px;
+  position: relative;
+  flex-shrink: 0;
+  width: var(--radio-circle-size);
+  height: var(--radio-circle-size);
+  border-radius: var(--sv-radius-full);
+  border: 1.5px solid var(--sv-color-border-strong);
+  background: var(--sv-color-surface);
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.checked {
+  border-color: var(--sv-color-accent);
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-accent);
+  pointer-events: none;
+}
+
+/* Hide the native input visually but keep it accessible */
+.input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.input:disabled {
+  cursor: not-allowed;
+}
+
+/* Expand the tappable region to the platform's minimum touch target without
+   growing the visible circle. Gated to (pointer: coarse), the *primary*
+   pointer, so a touchscreen laptop with mouse/trackpad as primary keeps
+   desktop density — same reasoning as Checkbox. */
+@media (pointer: coarse) {
+  .input {
+    inset: calc((var(--radio-circle-size) - var(--sv-touch-target-min, 44px)) / 2);
+  }
+}
+
+.input:focus-visible {
+  outline: none;
+}
+
+.circle:has(.input:focus-visible) {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}
+
+.optionLabel {
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-primary);
+  user-select: none;
+}
+
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/dist/Resizable.module.css

@@ -0,0 +1,70 @@
+.group {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  min-height: 320px;
+  border: 1px solid var(--sv-color-border);
+  border-radius: var(--sv-radius-lg);
+  overflow: hidden;
+  background: var(--sv-color-surface);
+}
+
+.groupVertical {
+  flex-direction: column;
+}
+
+.panel {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  background: var(--sv-color-surface);
+}
+
+.handle {
+  position: relative;
+  flex-shrink: 0;
+  width: 12px;
+  padding: 0;
+  border: 0;
+  border-inline: 1px solid var(--sv-color-border);
+  cursor: col-resize;
+  background: var(--sv-color-surface-sunken);
+}
+
+.handleVertical {
+  width: 100%;
+  height: 12px;
+  border-inline: 0;
+  border-block: 1px solid var(--sv-color-border);
+  cursor: row-resize;
+}
+
+.handle::before {
+  position: absolute;
+  inset-block: 50%;
+  inset-inline: 50%;
+  width: 2px;
+  height: 40px;
+  content: '';
+  background: var(--sv-color-border-strong);
+  border-radius: var(--sv-radius-full);
+  transform: translate(-50%, -50%);
+}
+
+.handleVertical::before {
+  width: 40px;
+  height: 2px;
+}
+
+@media (hover: hover) {
+  .handle:hover {
+    background: var(--sv-color-accent-subtle);
+  }
+}
+
+.handle:focus-visible {
+  background: var(--sv-color-accent-subtle);
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: -2px;
+}

package/dist/ScrollArea.module.css

@@ -0,0 +1,20 @@
+.root {
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--sv-color-border-strong) transparent;
+}
+
+.root::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.root::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.root::-webkit-scrollbar-thumb {
+  background: var(--sv-color-border-strong);
+  border-radius: var(--sv-radius-full);
+}

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/SwipableMobileCarousel.module.css

@@ -0,0 +1,55 @@
+.wrap {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.scroller {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  /* Momentum + rubber-banding come from the browser's native scroll physics —
+     no hand-rolled pointer/touch dragging. Deliberately NOT
+     -webkit-overflow-scrolling: touch: that legacy iOS <13 hint promotes its
+     element to its own compositing layer for GPU-accelerated momentum
+     scroll, and that layer's paint order relative to siblings/fixed
+     descendants elsewhere in the tree isn't always reliable on real iOS
+     Safari (confirmed via sovereign-tasks' and sovereign-shopper's own
+     carousels, which hit and fixed this exact bug — a position:fixed
+     overlay opened above the scroller painted BEHIND it instead of above).
+     Removing it doesn't disable momentum scrolling on any iOS version this
+     platform realistically targets. */
+}
+
+.slide {
+  flex: 0 0 100%;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  overflow: hidden;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  /* Slide content is a flex column so Header/Footer stay their natural size
+     and Body (flex: 1 1 auto, min-height: 0) fills and scrolls the rest —
+     see SwipableMobileCarouselSlideParts.module.css. */
+  display: flex;
+  flex-direction: column;
+}
+
+.dots {
+  /* Overlays the bottom of .wrap rather than taking its own layout row —
+     matches both sovereign-tasks' and sovereign-shopper's existing dots
+     placement. */
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: var(--sv-space-3);
+  pointer-events: none;
+}
+
+.dots > * {
+  pointer-events: auto;
+}

package/dist/SwipableMobileCarouselDots.module.css

@@ -0,0 +1,49 @@
+.dots {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sv-space-2);
+}
+
+.dot {
+  /* A 6px visible dot is too small a hit target on its own — the button's
+     real box is larger (20px) with the dot itself painted by ::before and
+     centered inside, so tap area grows without changing the visible dot
+     size or the row's gap-based spacing math. */
+  position: relative;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.dot::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--sv-color-border-strong);
+  transform: translate(-50%, -50%);
+  transition: background 0.15s ease;
+}
+
+.dot:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+  border-radius: 50%;
+}
+
+.dotActive::before {
+  background: var(--sv-color-text-primary);
+}
+
+@media (hover: hover) {
+  .dot:not(.dotActive):hover::before {
+    background: var(--sv-color-text-muted);
+  }
+}

package/dist/SwipableMobileCarouselSlideParts.module.css

@@ -0,0 +1,29 @@
+.header,
+.footer {
+  flex: 0 0 auto;
+}
+
+.body {
+  flex: 1 1 auto;
+  min-height: 0; /* allow shrinking inside the slide's flex column, so it can scroll instead of overflowing */
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* Deliberately does NOT set touch-action: pan-y here. touch-action's
+     effective value is the INTERSECTION of this element's and every
+     ancestor's value (docs/architecture-rules.md) — the ancestor .scroller
+     (SwipableMobileCarousel.module.css) needs the horizontal swipe gesture,
+     so pan-y here ∩ that horizontal handling would resolve to neither axis
+     working natively. Relying on the browser's default touch-action (auto)
+     here lets native gesture arbitration between the two nested scrollers
+     sort out which axis wins per-gesture — don't "fix" perceived nested-
+     scroll jank by adding pan-y; it silently breaks horizontal swipe instead. */
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--sv-color-text-subtle);
+  font-size: var(--sv-font-size-sm);
+}

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;
+}