@sovereignfs/ui 0.41.0 → 0.45.0

package/dist/Item.module.css

@@ -0,0 +1,70 @@
+.root {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-3);
+  width: 100%;
+  padding: var(--sv-space-3);
+  border: none;
+  border-radius: var(--sv-radius-md);
+  background: transparent;
+  text-align: left;
+  font-family: var(--sv-font-family);
+  color: inherit;
+}
+
+.interactive {
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .interactive:not(:disabled):hover {
+    background: var(--sv-color-surface-sunken);
+  }
+}
+
+.interactive:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: -2px;
+}
+
+.interactive:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@media (pointer: coarse) {
+  .root {
+    min-height: var(--sv-touch-target-min, 44px);
+  }
+}
+
+.leading,
+.trailing {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+}
+
+.title {
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-medium);
+  color: var(--sv-color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.description {
+  font-size: var(--sv-font-size-caption);
+  color: var(--sv-color-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/Kbd.module.css

@@ -0,0 +1,14 @@
+.kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5em;
+  padding: var(--sv-space-1) var(--sv-space-2);
+  border: 1px solid var(--sv-color-border-strong);
+  border-radius: var(--sv-radius-sm);
+  background: var(--sv-color-surface-sunken);
+  color: var(--sv-color-text-primary);
+  font-family: var(--sv-font-family-mono);
+  font-size: var(--sv-font-size-xs);
+  line-height: 1;
+}

package/dist/Label.module.css

@@ -0,0 +1,11 @@
+.label {
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-medium);
+  color: var(--sv-color-text-primary);
+  cursor: default;
+}
+
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/dist/Marker.module.css

@@ -0,0 +1,33 @@
+.marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  margin: 0 1px;
+  border: none;
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-accent-subtle);
+  color: var(--sv-color-accent);
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-label);
+  font-weight: var(--sv-font-weight-semibold);
+  line-height: 1;
+  vertical-align: super;
+}
+
+button.marker {
+  cursor: pointer;
+}
+
+button.marker:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 1px;
+}
+
+@media (hover: hover) {
+  button.marker:hover {
+    background: color-mix(in srgb, var(--sv-color-accent-subtle) 70%, var(--sv-color-accent) 30%);
+  }
+}

package/dist/Menu.module.css

@@ -1,6 +1,13 @@
 /* Menu — the item list shared by both presentations (Popover panel on
  * desktop, Drawer panel on mobile); the presentational chrome around it is
- * entirely owned by those two components, not duplicated here. */
+ * entirely owned by those two components, not duplicated here.
+ *
+ * Sizing audit: reviewed against this scale's other compact controls —
+ * --sv-radius-sm (6px) and --sv-font-size-sm (14px) already fit. The 44px
+ * min-height is a deliberate design choice, kept unconditional (not gated
+ * to pointer:coarse like Button/Checkbox) because this menu doubles as a
+ * full Drawer sheet on mobile, where every item must stay comfortably
+ * tappable. */
 
 .list {
   list-style: none;

package/dist/Message.module.css

@@ -0,0 +1,99 @@
+.row {
+  display: flex;
+  flex-direction: column;
+  max-width: 80%;
+}
+
+.user {
+  align-self: flex-end;
+  align-items: flex-end;
+}
+
+.assistant,
+.tool {
+  align-self: flex-start;
+  align-items: flex-start;
+}
+
+.bubble {
+  padding: var(--sv-space-2) var(--sv-space-3);
+  border-radius: var(--sv-radius-xl);
+  font-size: var(--sv-font-size-sm);
+  line-height: 1.5;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+
+.user .bubble {
+  background: var(--sv-color-accent);
+  color: var(--sv-color-text-on-accent);
+  border-bottom-right-radius: var(--sv-radius-sm);
+}
+
+.assistant .bubble {
+  background: var(--sv-color-surface-raised);
+  border: 1px solid var(--sv-color-border);
+  color: var(--sv-color-text-primary);
+  border-bottom-left-radius: var(--sv-radius-sm);
+}
+
+.tool .bubble {
+  background: var(--sv-color-surface-sunken);
+  color: var(--sv-color-text-muted);
+  font-family: var(--sv-font-family-mono);
+  font-size: var(--sv-font-size-xs);
+  border-bottom-left-radius: var(--sv-radius-sm);
+}
+
+.actions {
+  display: flex;
+  gap: var(--sv-space-2);
+  margin-top: var(--sv-space-1);
+  font-size: var(--sv-font-size-caption);
+  color: var(--sv-color-text-muted);
+}
+
+/* Typing indicator — three dots, staggered pulse. */
+.typingDots {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: var(--sv-space-1) 0;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--sv-radius-full);
+  background: currentColor;
+  opacity: 0.4;
+  animation: typing-pulse 1.2s ease-in-out infinite;
+}
+
+.dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes typing-pulse {
+  0%,
+  80%,
+  100% {
+    opacity: 0.4;
+    transform: scale(0.85);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dot {
+    animation: none;
+    opacity: 0.7;
+  }
+}

package/dist/MessageScroller.module.css

@@ -0,0 +1,54 @@
+.root {
+  position: relative;
+  height: 100%;
+  min-height: 0;
+}
+
+.scrollContainer {
+  height: 100%;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sv-space-3);
+  padding: var(--sv-space-3);
+  scrollbar-width: thin;
+  scrollbar-color: var(--sv-color-border-strong) transparent;
+}
+
+.scrollContainer::-webkit-scrollbar {
+  width: 8px;
+}
+
+.scrollContainer::-webkit-scrollbar-thumb {
+  background: var(--sv-color-border-strong);
+  border-radius: var(--sv-radius-full);
+}
+
+.jumpButton {
+  position: absolute;
+  bottom: var(--sv-space-3);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: var(--sv-space-1) var(--sv-space-3);
+  border: 1px solid var(--sv-color-border);
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-surface-raised);
+  box-shadow: var(--sv-shadow-popover);
+  color: var(--sv-color-text-primary);
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-caption);
+  font-weight: var(--sv-font-weight-medium);
+  cursor: pointer;
+}
+
+.jumpButton:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}
+
+@media (hover: hover) {
+  .jumpButton:hover {
+    background: var(--sv-color-surface-sunken);
+  }
+}

package/dist/NavigationMenu.module.css

@@ -0,0 +1,53 @@
+.nav {
+  min-width: 0;
+}
+
+.list {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.link,
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  height: 36px;
+  padding: 0 var(--sv-space-3);
+  border: none;
+  border-radius: var(--sv-radius-md);
+  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-decoration: none;
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .link:hover,
+  .trigger:hover {
+    background: var(--sv-color-surface-sunken);
+  }
+}
+
+.link:focus-visible,
+.trigger:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}
+
+.triggerOpen {
+  background: var(--sv-color-surface-sunken);
+}
+
+@media (pointer: coarse) {
+  .link,
+  .trigger {
+    min-height: var(--sv-touch-target-min, 44px);
+  }
+}

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;