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

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* @salemcobalt/ui 0.2.0-rc.28 — 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. */
@@ -3028,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;
@@ -3067,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.28",
+  "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.28"
+    "@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.28"
+    "@salemcobalt/tokens": "^0.2.0-rc.29"
   },
   "publishConfig": {
     "access": "public"