@redseed/redseed-ui-tailwindcss 7.70.0 → 7.71.0

package/components/toast.css

@@ -32,24 +32,34 @@
     @apply text-sm font-medium;
     @apply bg-background-primary-contrast text-text-on-color border border-transparent;
 
-    /* BOTTOM-LEFT, and it must clear two things the toast cannot see.
-
-       --rsui-toast-offset is the sticky action bar. The standards are explicit that a
-       toast sits ABOVE such a bar and never over it — the bar owns the bottom edge —
-       but only the page knows whether it has one, and how tall. Set it on :root, NOT on
-       a wrapper: the toast is teleported to the body, so a custom property declared on
-       an ancestor in the consumer's tree never reaches it. The default of 0 means an
-       ordinary page needs nothing.
+    /* BOTTOM-LEFT, and it must clear three things the toast cannot see. Both offsets
+       below go on :root, NOT on a wrapper: the toast is teleported to the body, so a
+       custom property declared anywhere in the consumer's component tree never reaches
+       it. Both default to 0, so an ordinary page sets neither.
+
+       --rsui-toast-offset moves it UP. Written for a sticky action bar — the standards
+       are explicit that a toast sits above one and never over it, because the bar owns
+       the bottom edge — but it serves any furniture parked in that corner. In the LMS
+       that is the Help Scout Beacon launcher.
+
+       --rsui-toast-offset-inline moves it IN, and exists for the same reason one corner
+       can hold two things: clearing a launcher vertically is not enough if the toast then
+       sits flush to the viewport edge while the launcher is indented, because the two
+       read as misaligned rather than stacked. The page knows its own left gutter; the
+       toast cannot. (Unsuffixed is the vertical axis, for backwards compatibility with
+       the name that shipped in 10.1.0.)
 
        env(safe-area-inset-bottom) is the home indicator. A toast is the last thing above
        the bottom edge on a phone, so the inset is a FLOOR under the spacing rather than
        an addition to it — the same max() shape drawer.css and modal.css already use. */
-    left: 1rem;
+    left: calc(1rem + var(--rsui-toast-offset-inline, 0px));
     bottom: calc(max(1rem, env(safe-area-inset-bottom)) + var(--rsui-toast-offset, 0px));
 
     /* Brief, so it is never a paragraph. Wide enough for a sentence, capped so it does
-       not stretch across a desktop, and held off both edges on a narrow screen. */
-    max-width: min(28rem, calc(100vw - 2rem));
+       not stretch across a desktop, and held off both edges on a narrow screen — the
+       inline offset is subtracted too, or pushing the toast right would run it off the
+       opposite edge on a phone. */
+    max-width: min(28rem, calc(100vw - 2rem - var(--rsui-toast-offset-inline, 0px)));
 }
 
 /* The message is the only part allowed to grow, so the action and the close button keep

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-tailwindcss",
-    "version": "7.70.0",
+    "version": "7.71.0",
     "description": "RedSeed UI Tailwindcss",
     "main": "index.js",
     "style": "index.css",