@salemcobalt/ui 0.2.0-rc.33 → 0.2.0-rc.35

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* @salemcobalt/ui 0.2.0-rc.33 — requires @salemcobalt/tokens/css. */
+/* @salemcobalt/ui 0.2.0-rc.35 — requires @salemcobalt/tokens/css. */
 @layer sc {
   /* ---- base.css ---- */
   /* Shared: focus ring, reduced motion. Component files follow. */
@@ -853,11 +853,21 @@
   
   /* ---- dialog.css ---- */
   /* ---- Dialog ---------------------------------------------------------------- */
+  /* `--_overhang`: how far a docked surface (the scrim, a phone sheet, a full-screen dialog) runs past the bottom edge
+     of the layout viewport, out of sight. It covers what a collapsing or floating browser toolbar uncovers there. */
+  .sc-dialog__backdrop,
+  .sc-dialog__popup {
+    --_overhang: 160px;
+  }
   .sc-dialog__backdrop {
     position: fixed;
-    inset: 0;
+    /* The scrim runs past the bottom edge: when a phone's browser toolbar collapses or floats, the strip it uncovers
+       is still dimmed instead of showing the page undimmed beneath it. */
+    inset: 0 0 calc(-1 * var(--_overhang));
     z-index: var(--sc-z-backdrop);
     background: var(--sc-color-surface-backdrop);
+    /* A drag on the scrim never pans the page behind it (iOS rubber-banding included); a tap still closes. */
+    touch-action: none;
     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
@@ -874,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;
@@ -885,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);
@@ -1001,22 +1015,45 @@
   /* Below 640px the sheet docks to the bottom edge, full width, and slides up. The breakpoint is fixed
      here because custom properties cannot drive a media query. */
   @media (width < 640px) {
+    /* The sheet's surface runs on past the bottom edge as a bottom border in its own colour (the overhang), so no
+       strip of page shows under it when the browser toolbar collapses; the content and its safe-area padding end at
+       the edge as before. `touch-action: none`: a drag on the sheet outside a scroller never pans the page behind
+       it, while `Dialog.Body` and any other scroll container inside keep scrolling (touch-action resets at a
+       scroll container). The drag (sheetSwipe.ts) moves it with `transform`, on top of the `translate` that
+       opens and closes it.
+       Motion: the sheet and its scrim share one duration and curve each way, so the scrim never goes before the
+       sheet does. In: `slow` on `standard`, which leaves the bottom edge gently instead of jumping a quarter of its
+       height in the first frame. Out: 75% of that on `exit`, accelerating, so it is in view until it leaves.
+       After a swipe it decelerates instead (`data-swiped`), carrying on from the finger's speed. */
     .sc-dialog__popup[data-variant='sheet'] {
-      inset: auto 0 0 0;
+      inset: auto 0 calc(-1 * var(--_overhang)) 0;
       margin: 0;
       inline-size: 100%;
       max-inline-size: none;
-      max-block-size: calc(100dvh - env(safe-area-inset-top, 0px) - var(--sc-spacing-xl));
+      max-block-size: calc(100dvh - env(safe-area-inset-top, 0px) - var(--sc-spacing-xl) + var(--_overhang));
       padding-block-end: calc(var(--sc-spacing-lg) + env(safe-area-inset-bottom, 0px));
       padding-inline: calc(var(--sc-spacing-lg) + env(safe-area-inset-left, 0px))
         calc(var(--sc-spacing-lg) + env(safe-area-inset-right, 0px));
-      border-block-end: 0;
+      border-block-end: var(--_overhang) solid var(--sc-color-surface-raised);
       border-radius: var(--sc-radius-xl) var(--sc-radius-xl) 0 0;
+      touch-action: none;
       transition:
-        opacity var(--sc-duration-base) var(--sc-ease-enter),
-        translate var(--sc-duration-base) var(--sc-ease-enter),
+        translate var(--sc-duration-slow) var(--sc-ease-standard),
         transform var(--sc-duration-slow) var(--sc-ease-standard);
     }
+    .sc-dialog__backdrop[data-variant='sheet'] {
+      transition-duration: var(--sc-duration-slow);
+      transition-timing-function: var(--sc-ease-standard);
+    }
+    .sc-dialog__popup[data-variant='sheet'][data-ending-style],
+    .sc-dialog__backdrop[data-variant='sheet'][data-ending-style] {
+      transition-duration: calc(var(--sc-duration-slow) * 0.75);
+      transition-timing-function: var(--sc-ease-exit);
+    }
+    .sc-dialog__popup[data-variant='sheet'][data-ending-style][data-swiped] {
+      transition-duration: var(--sc-duration-base);
+      transition-timing-function: var(--sc-ease-enter);
+    }
     /* The handle: a 36 × 4 bar centred in a 64 × 24 target, where the bar alone used to sit. */
     .sc-dialog__popup[data-variant='sheet'] > .sc-dialog__handle {
       display: grid;
@@ -1043,12 +1080,6 @@
       border-radius: var(--sc-radius-full);
       background: currentColor;
     }
-    /* Swipe to dismiss (sheetSwipe.ts): the page never pans under the sheet, while `Dialog.Body` and any other
-       scroll container inside keep scrolling, because touch-action resets at a scroll container. The drag
-       moves the sheet with `transform`, which adds to the `translate` the exit transition animates. */
-    .sc-dialog__popup[data-variant='sheet'][data-swipe-dismiss] {
-      touch-action: none;
-    }
     .sc-dialog__popup[data-variant='sheet'][data-swipe-dismiss] > .sc-dialog__handle {
       cursor: grab;
     }
@@ -1057,10 +1088,11 @@
       user-select: none;
       transition: none;
     }
+    /* Just below the edge: its visible height, not counting the overhang already out of sight. */
     .sc-dialog__popup[data-variant='sheet'][data-starting-style],
     .sc-dialog__popup[data-variant='sheet'][data-ending-style] {
       opacity: 1;
-      translate: 0 100%;
+      translate: 0 calc(100% - var(--_overhang));
       scale: none;
     }
     /* Actions stack full width, confirming action on top, in thumb reach. */
@@ -1125,6 +1157,22 @@
     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) {
+    .sc-dialog__popup[data-variant='fullscreen'] {
+      inset-block-end: calc(-1 * var(--_overhang));
+      border-block-end: var(--_overhang) solid var(--sc-color-surface-default);
+    }
+  }
   /* From 900px the backdrop shows a margin around it, so it still reads as a layer over the app. */
   @media (width >= 900px) {
     .sc-dialog__popup[data-variant='fullscreen'] {
@@ -1161,7 +1209,11 @@
   /* Reduced motion: a docked sheet appears and goes without sliding, and a released swipe closes or snaps
      back in place without the spring. */
   @media (width < 640px) and (prefers-reduced-motion: reduce) {
-    .sc-dialog__popup[data-variant='sheet'] {
+    .sc-dialog__popup[data-variant='sheet'],
+    .sc-dialog__popup[data-variant='sheet'][data-ending-style],
+    .sc-dialog__popup[data-variant='sheet'][data-ending-style][data-swiped],
+    .sc-dialog__backdrop[data-variant='sheet'],
+    .sc-dialog__backdrop[data-variant='sheet'][data-ending-style] {
       transition-duration: 0ms;
     }
     .sc-dialog__popup[data-variant='sheet'][data-starting-style],
@@ -3028,18 +3080,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);
@@ -3102,19 +3156,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.33",
+  "version": "0.2.0-rc.35",
   "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.33"
+    "@salemcobalt/tokens": "^0.2.0-rc.35"
   },
   "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.33"
+    "@salemcobalt/tokens": "^0.2.0-rc.35"
   },
   "publishConfig": {
     "access": "public"