@salemcobalt/ui 0.2.0-rc.27 → 0.2.0-rc.29

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* @salemcobalt/ui 0.2.0-rc.27 — requires @salemcobalt/tokens/css. */
+/* @salemcobalt/ui 0.2.0-rc.29 — requires @salemcobalt/tokens/css. */
 @layer sc {
   /* ---- base.css ---- */
   /* Shared: focus ring, reduced motion. Component files follow. */
@@ -840,6 +840,11 @@
     background: var(--sc-color-surface-backdrop);
     transition: opacity var(--sc-duration-base) var(--sc-ease-enter);
   }
+  /* A dialog opened from inside another (Base UI nests its portal after the parent's popup): its scrim covers the
+     parent's popup too, so the layer behind the new one reads as behind. Same layer as the popups; DOM order stacks it. */
+  .sc-dialog__backdrop:has(~ .sc-dialog__popup[data-nested]) {
+    z-index: var(--sc-z-dialog);
+  }
   .sc-dialog__backdrop[data-starting-style],
   .sc-dialog__backdrop[data-ending-style] {
     opacity: 0;
@@ -3023,6 +3028,8 @@
       translate var(--sc-duration-base) var(--sc-ease-standard);
   }
   .sc-selection-bar[data-open] {
+    /* Toasts sit above it (toast.css). */
+    anchor-name: --sc-bottom-bar;
     opacity: 1;
     translate: none;
     pointer-events: auto;
@@ -3062,18 +3069,32 @@
   
   /* ---- toast.css ---- */
   /* ---- Toast ----------------------------------------------------------------- */
+  /* Bottom-end, clear of a bar fixed along the bottom: an open SelectionBar, or any bar of the app's that sets
+     `anchor-name: --sc-bottom-bar`. Without one, the gutter. Phones use the md gutter on both sides. */
   .sc-toast-viewport {
+    --_gutter: var(--sc-spacing-lg);
+    --_bottom: calc(var(--_gutter) + env(safe-area-inset-bottom, 0px));
     position: fixed;
-    inset-block-end: var(--sc-spacing-lg);
-    inset-inline-end: var(--sc-spacing-lg);
+    inset-block-end: var(--_bottom);
+    inset-inline-end: var(--_gutter);
     z-index: var(--sc-z-toast);
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: var(--sc-spacing-xs);
-    inline-size: min(360px, 100vw - 2 * var(--sc-spacing-md));
+    inline-size: min(360px, 100vw - 2 * var(--_gutter));
     outline: none;
   }
+  @supports (anchor-name: --a) {
+    .sc-toast-viewport {
+      inset-block-end: max(var(--_bottom), calc(anchor(--sc-bottom-bar top, 0px) + var(--sc-spacing-xs)));
+    }
+  }
+  @media (width < 640px) {
+    .sc-toast-viewport {
+      --_gutter: var(--sc-spacing-md);
+    }
+  }
   /* A raised surface, so washes inside use the raised tokens (docs/adr/0003). */
   .sc-toast {
     --sc-color-surface-hover: var(--sc-color-surface-raised-hover);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salemcobalt/ui",
-  "version": "0.2.0-rc.27",
+  "version": "0.2.0-rc.29",
   "description": "React components for the Salem Cobalt design system: Button, IconButton, Icon set, BroomIcon, Badge, Card, Stack, Inline, Kbd, Dialog, FullScreenFlow, Tooltip, Menu, Popover, PriorityNav, Toolbar, Banner, Spinner, Progress, Tabs, Input, Textarea, Select, FileInput, Checkbox, Switch, Heading, Text, Table, Stat, Chip, Disclosure, EmptyState, Skeleton, Score, ReasonList, WordDiff, Quote; TextEditor (CodeMirror 6, inline word diffs) at @salemcobalt/ui/editor.",
   "license": "MIT",
   "repository": {
@@ -46,7 +46,7 @@
     "diff": "^8.0.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@salemcobalt/tokens": "^0.2.0-rc.27"
+    "@salemcobalt/tokens": "^0.2.0-rc.29"
   },
   "peerDependenciesMeta": {
     "@codemirror/commands": {
@@ -109,7 +109,7 @@
     "tsup": "^9.0.0",
     "typescript": "^5.9.3",
     "vitest": "^5.0.5",
-    "@salemcobalt/tokens": "^0.2.0-rc.27"
+    "@salemcobalt/tokens": "^0.2.0-rc.29"
   },
   "publishConfig": {
     "access": "public"