@salemcobalt/ui 0.2.0-rc.34 → 0.2.0-rc.36

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* @salemcobalt/ui 0.2.0-rc.34 — requires @salemcobalt/tokens/css. */
+/* @salemcobalt/ui 0.2.0-rc.36 — requires @salemcobalt/tokens/css. */
 @layer sc {
   /* ---- base.css ---- */
   /* Shared: focus ring, reduced motion. Component files follow. */
@@ -884,10 +884,14 @@
     transition-timing-function: var(--sc-ease-exit);
   }
   /* The popup never exceeds the viewport minus a gutter each side, whatever `size` says. 100dvw rather than
-     100% so the clamp holds inside a transformed or narrow portal container too. */
+     100% so the clamp holds inside a transformed or narrow portal container too. Under `viewport-fit=cover` each
+     gutter is at least the safe-area inset on that axis (the larger of the pair, as the popup is centred), so a
+     centred dialog on a landscape phone stays clear of the notch, the rounded corners and the home indicator. */
   .sc-dialog__popup {
     --_gutter: var(--sc-spacing-md);
-    --_max: calc(100dvw - 2 * var(--_gutter));
+    --_side: max(var(--_gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
+    --_ends: max(var(--_gutter), env(safe-area-inset-top, 0px), env(safe-area-inset-bottom, 0px));
+    --_max: calc(100dvw - 2 * var(--_side));
     position: fixed;
     inset: 0;
     margin: auto;
@@ -895,7 +899,7 @@
     box-sizing: border-box;
     inline-size: min(var(--_max), var(--sc-size-dialog-md));
     max-inline-size: var(--_max);
-    max-block-size: min(100dvh - 2 * var(--_gutter), 85dvh);
+    max-block-size: min(100dvh - 2 * var(--_ends), 85dvh);
     block-size: fit-content;
     overflow: hidden auto; /* vertical only: a 44px touch target on an edge button must not scroll it sideways */
     padding: var(--sc-spacing-lg);
@@ -1153,6 +1157,14 @@
     overflow: hidden auto; /* vertical only: a 44px touch target on an edge button must not scroll it sideways */
     overscroll-behavior: contain;
   }
+  /* A `Dialog.Close` on the full-screen surface sits at the top inline-end corner of the screen, so it clears the
+     status bar and a landscape notch the way the padding does. */
+  .sc-dialog__popup[data-variant='fullscreen'] .sc-dialog__close {
+    inset-block-start: calc(var(--sc-spacing-sm) + env(safe-area-inset-top, 0px));
+    inset-inline-end: calc(
+      var(--sc-spacing-sm) + max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))
+    );
+  }
   /* Below 900px the full-screen surface runs past the bottom edge like the sheet (the overhang, a bottom border in
      its own colour), so a collapsing browser toolbar uncovers more of it, not the page. */
   @media (width < 900px) {
@@ -2676,6 +2688,14 @@
     font-size: var(--sc-font-size-sm);
     line-height: var(--sc-font-line-height-ui);
   }
+  /* A full-bleed notice across the top of the page (the Bolt docs' top bar, shorter): square, compact, a hairline under it. */
+  .sc-banner[data-placement='page'] {
+    min-block-size: var(--sc-size-control-sm);
+    padding-block: var(--sc-spacing-3xs);
+    padding-inline: var(--sc-spacing-sm) var(--sc-spacing-2xs);
+    border-radius: 0;
+    border-block-end: 1px solid rgb(from var(--_fg) r g b / 0.2);
+  }
   .sc-banner[data-tone='success'] {
     --_bg: var(--sc-color-success-subtle);
     --_fg: var(--sc-color-success-text);
@@ -3068,18 +3088,20 @@
   /* ---- selection-bar.css ---- */
   /* ---- SelectionBar ---------------------------------------------------------- */
   /* Floats centred at the bottom of the viewport, sized to its content. A raised surface like Menu and Popover, so
-     washes inside use the raised tokens (docs/adr/0003). */
+     washes inside use the raised tokens (docs/adr/0003). Its sides keep the gutter or the larger side safe-area inset,
+     whichever is wider (a landscape phone's notch and rounded corners under `viewport-fit=cover`). */
   .sc-selection-bar {
     --_gutter: var(--sc-spacing-md);
+    --_side: max(var(--_gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
     --sc-color-surface-hover: var(--sc-color-surface-raised-hover);
     --sc-color-surface-active: var(--sc-color-surface-raised-active);
     position: fixed;
-    inset-inline: var(--_gutter);
+    inset-inline: var(--_side);
     inset-block-end: calc(var(--_gutter) + env(safe-area-inset-bottom, 0px));
     z-index: var(--sc-z-sticky);
     box-sizing: border-box;
     inline-size: fit-content;
-    max-inline-size: min(100vw - 2 * var(--_gutter), 48rem);
+    max-inline-size: min(100vw - 2 * var(--_side), 48rem);
     margin-inline: auto;
     padding: var(--sc-spacing-2xs) var(--sc-spacing-xs) var(--sc-spacing-2xs) var(--sc-spacing-sm);
     border: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
@@ -3142,19 +3164,22 @@
   /* Bottom-end, clear of a bar fixed along the bottom: an open SelectionBar, or any `position: fixed` bar of the app's
      that sets `anchor-name: --sc-bottom-bar`. Without one, the gutter. Phones use the md gutter on both sides.
      A sticky bar can't be an anchor (anchor() reads where it would be unstuck); while one shows, the app raises the
-     toasts by setting `--sc-toast-offset-block-end` (on :root, for example) to the room it needs. */
+     toasts by setting `--sc-toast-offset-block-end` (on :root, for example) to the room it needs.
+     Under `viewport-fit=cover` the side keeps clear of a landscape phone's notch or Dynamic Island and rounded corners:
+     the gutter or the larger side inset, whichever is wider (the larger of the two, so inline-end is right either way). */
   .sc-toast-viewport {
     --_gutter: var(--sc-spacing-lg);
+    --_side: max(var(--_gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
     --_bottom: calc(var(--_gutter) + var(--sc-toast-offset-block-end, 0px) + env(safe-area-inset-bottom, 0px));
     position: fixed;
     inset-block-end: var(--_bottom);
-    inset-inline-end: var(--_gutter);
+    inset-inline-end: var(--_side);
     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(--_gutter));
+    inline-size: min(360px, 100vw - 2 * var(--_side));
     outline: none;
   }
   @supports (anchor-name: --a) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salemcobalt/ui",
-  "version": "0.2.0-rc.34",
+  "version": "0.2.0-rc.36",
   "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.34"
+    "@salemcobalt/tokens": "^0.2.0-rc.36"
   },
   "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.34"
+    "@salemcobalt/tokens": "^0.2.0-rc.36"
   },
   "publishConfig": {
     "access": "public"