@sovereignfs/ui 0.45.0 → 0.83.1

package/dist/Toast.module.css

@@ -1,7 +1,9 @@
 /* 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.
+ * Desktop: fixed top-right, 320px, slides in from above. Mobile floats
+ * bottom-center instead (see the media query near the bottom of this file
+ * for why). 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.
@@ -28,7 +30,7 @@
   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: var(--sv-border-width-hairline) solid var(--sv-color-border);
   border-radius: var(--sv-radius-md);
   box-shadow: var(--sv-shadow-overlay);
   pointer-events: all;
@@ -124,6 +126,63 @@
   }
 }
 
+/* Mobile (<=768px, the design system's canonical breakpoint): float
+ * bottom-center instead of top-right. Clears any mobile footer/tab bar
+ * (--sv-shell-footer-height) and the home-indicator safe area, plus extra
+ * breathing room so it visibly floats above the edge rather than sitting
+ * flush against it — matches the platform convention (Android Toast,
+ * Material 3's "floating" Snackbar). Deliberately not threaded through
+ * --sv-shell-header-height instead: a toast can appear on a page with or
+ * without a self-rendered mobile header, and bottom-anchoring sidesteps that
+ * entirely rather than requiring every call site to account for it.
+ * Each toast is centered and content-sized (capped at 360px) rather than
+ * stretched to the region's full width, and slides up from below instead of
+ * down from above to match its new anchor. */
+@media (max-width: 768px) {
+  .region {
+    top: auto;
+    left: var(--sv-space-4);
+    right: var(--sv-space-4);
+    bottom: calc(
+      var(--sv-shell-footer-height, 0px) + env(safe-area-inset-bottom, 0px) + var(--sv-space-4)
+    );
+    width: auto;
+    align-items: center;
+  }
+
+  .toast {
+    width: 100%;
+    max-width: 360px;
+    animation-name: toastInMobile;
+  }
+
+  .toast.exiting {
+    animation-name: toastOutMobile;
+  }
+}
+
+@keyframes toastInMobile {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes toastOutMobile {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .toast,
   .toast.exiting {

package/dist/Tooltip.module.css

@@ -9,7 +9,7 @@
   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: var(--sv-border-width-hairline) solid var(--sv-color-border);
   border-radius: var(--sv-radius-md);
   box-shadow: var(--sv-shadow-popover);
   font-size: var(--sv-font-size-xs);

package/dist/UserMenu.module.css

@@ -0,0 +1,90 @@
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: var(--sv-border-width-hairline) solid var(--sv-color-accent);
+  border-radius: var(--sv-radius-full);
+  background-color: var(--sv-color-accent);
+  color: var(--sv-color-text-on-accent);
+  font-size: var(--sv-font-size-xs);
+  font-weight: var(--sv-font-weight-semibold);
+  overflow: hidden;
+  cursor: pointer;
+}
+
+/* The compact `Header` top-bar context's own avatar size. */
+.triggerSm {
+  width: 32px;
+  height: 32px;
+}
+
+.triggerImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.panelHeader {
+  padding: var(--sv-space-1) var(--sv-space-1) 0;
+}
+
+.userHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-3);
+  padding: var(--sv-space-2) var(--sv-space-3);
+}
+
+.menuAvatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 38px;
+  height: 38px;
+  border-radius: var(--sv-radius-full);
+  background-color: var(--sv-color-accent);
+  color: var(--sv-color-text-on-accent);
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-semibold);
+  overflow: hidden;
+}
+
+.menuAvatarImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.userInfo {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.userName {
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.userEmail {
+  font-size: var(--sv-font-size-caption);
+  color: var(--sv-color-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.divider {
+  margin: var(--sv-space-1) 0 0;
+  border: none;
+  border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
+}