@redseed/redseed-ui-tailwindcss 7.69.0 → 7.70.0

package/components/page_header.css

@@ -212,6 +212,80 @@
     @apply w-full pt-space-xs lg:pt-0 lg:w-auto;
 }
 
+/* ---------------------------------------------------------------------------
+   A WIDE SUBTITLE MUST NOT PUSH THE ACTIONS ONTO THEIR OWN LINE (#386)
+   ---------------------------------------------------------------------------
+   `__top` is flex-wrap and becomes a row at lg. `__title` has no grow and keeps its
+   default `min-width: auto`, so the block is as wide as its widest line — which is
+   usually the subtitle, not the h1. `__status-actions` is `flex-1`. Once the title's
+   CONTENT width plus the actions exceeds the row, the actions wrap underneath, right
+   aligned, leaving a band of empty space above the page content.
+
+   Reported against the Manager Self-Review capture screen and the 180 Feedback
+   self-assessment, where it wrapped the Ask Archie AI button. The LMS shipped a local
+   fix for it (redseedtraining/redseed#5239) and then took it back out, because the
+   behaviour belongs here.
+
+   The fix is to let the title SHRINK rather than letting it set the row's width:
+   `flex: 1 1 0%` with `min-width: 0` means the subtitle wraps inside the title block
+   instead of forcing the actions down. The actions stop being greedy (`flex: none`)
+   so they take only the space they need.
+
+   `align-self: flex-start` because `__top` is `lg:items-center`, which would otherwise
+   centre the actions against the whole title-plus-subtitle block and leave them
+   floating below the h1 they belong to. This is the visible change for any header that
+   has both a subtitle and actions, and it is the correct one: SectionHeader already
+   top-aligns its toolbar the same way (`__header` is `items-start`), so this closes a
+   disagreement between the two headers rather than opening one.
+
+   THREE EXCLUSIONS, all of which already own their row behaviour:
+
+     --profile      bottom-aligns its actions on purpose (`lg:self-end lg:pb-space-lg`)
+     :has(__stats)  already sets the title to `lg:grow lg:min-w-0 lg:basis-full`
+     :has(__search) puts a full-width search control in the row below lg
+
+   MEASURED, and worth being precise about which case is which.
+
+   The WRAP needs a genuinely wide action group — a status badge plus two default-size
+   buttons, which is the shape `__status-actions` takes on the reported screens, since it
+   is `justify-between` and carries the status as well as the actions:
+
+     1024   today: WRAPS, 112px      with this rule: no wrap, 140px
+
+   That 28px is the cost of the fix in the wrapping case: the subtitle takes more lines
+   inside a narrower title block instead of the actions taking a whole extra row. It is
+   the right way round, because the extra row also left a band of dead space above the
+   page content and put the button somewhere nobody looks for it.
+
+   With a SMALLER action group — two buttons and no status, which is the
+   LongSubtitleWithActions story — nothing wraps at any lg width, either before or after:
+
+     1024-1100   today: 92px          with this rule: 94px
+     1200+       today: 70px          with this rule: 70px
+
+   So in the common case the rule costs 2px at the narrow end of lg and nothing above it,
+   while still doing the visible half of the job: the actions stop being greedy (measured
+   409px wide -> 82px, taking only what they need) and sit level with the h1 instead of
+   14px below it.
+
+   Scoped to lg and up. Below lg `__top` is a column, where every child is full width
+   and none of this applies. */
+@media (min-width: 64rem) {
+    .rsui-page-header:not(.rsui-page-header--profile)
+    .rsui-page-header__top:not(:has(.rsui-page-header__stats)):not(:has(.rsui-page-header__search))
+    .rsui-page-header__title {
+        flex: 1 1 0%;
+        min-width: 0;
+    }
+
+    .rsui-page-header:not(.rsui-page-header--profile)
+    .rsui-page-header__top:not(:has(.rsui-page-header__stats)):not(:has(.rsui-page-header__search))
+    .rsui-page-header__status-actions {
+        flex: none;
+        align-self: flex-start;
+    }
+}
+
 /* ---------------------------------------------------------------------------
    Meta
 

package/components/toast.css

@@ -0,0 +1,188 @@
+/* A brief confirmation that an action completed. Bottom-left, per the standards, and
+   distinct from MessageBox in every dimension: fixed rather than in the page flow,
+   auto-dismissing rather than persistent (unless it carries an action), and about an
+   action rather than about the state of the thing on screen. */
+
+/* SURFACE. A dark overlay, which is Material's snackbar and the reason the standards
+   point at it — a toast has to read as something laid ON the page rather than as part of
+   it.
+
+   Measured against the real page ground, Modern Bone 500 #edebe2 (named in
+   storybook/.storybook/preview.ts), because this was nearly shipped as a light grey pill:
+
+     background-primary-invert   (Grey 300)   1.20:1 against the page — no separation
+     background-primary-contrast (Grey 800)  11.88:1, with white text on it at 14.20:1
+
+   1.20:1 is not a surface. It looked like a disabled chip someone had left behind.
+
+   ALL THREE VARIANTS SHARE THIS SURFACE, and that is the important part. They did not:
+   the default was dark while success and error were the library's light status tints, so
+   `variant` flipped the surface polarity as well as choosing the meaning. That made the
+   action slot's contract unstateable — `on-color` gives a button white ink, which is
+   14.20:1 on the dark default and 1.05:1 on the mint success ground. One rule could not
+   be true across the axis, and the story confidently told consumers the wrong half.
+
+   So semantics move off the ground and onto an accent (below), the ground stays constant,
+   and `on-color` is correct everywhere without qualification. The cost is that a red
+   toast no longer matches the red tint used by badges and MessageBox; the gain is a slot
+   contract that fits in one sentence and cannot be followed into a contrast failure. */
+.rsui-toast {
+    @apply fixed z-50 flex items-center gap-x-space-sm;
+    @apply px-space-md py-space-sm rounded-xl shadow-full-light;
+    @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.
+
+       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;
+    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));
+}
+
+/* The message is the only part allowed to grow, so the action and the close button keep
+   their size and stay where the eye expects them between one toast and the next. */
+.rsui-toast__message {
+    @apply flex-1 min-w-0;
+}
+
+/* The icon takes the toast's ink, for the same reason the close glyph does: `<Icon>`
+ * paints its child directly and cannot see what it is sitting on. `<Icon success>` renders
+ * text-success #067647 — a green drawn for a LIGHT ground — which measures 2.49:1 here and
+ * fails the 3:1 WCAG 1.4.11 asks of a meaningful non-text indicator. Measured, after this
+ * caught the close glyph and the action button the same way.
+ *
+ * The default inherits the toast's white; the semantic variants repaint it below. */
+.rsui-toast__icon {
+    @apply flex items-center justify-center shrink-0;
+}
+
+.rsui-toast__icon .rsui-icon > *,
+.rsui-toast__icon svg {
+    color: currentColor;
+}
+
+/* The action sits before the close button, so Tab reaches Undo first — it is the reason
+   the toast is still on screen, and the close button sits right beside it.
+
+   THE ACTION MUST BE PASSED `on-color`, and now that every variant shares one dark
+   surface this is unconditionally true. A plain <ButtonTertiary> renders brand green here
+   (Brand 600 #135847) and measures 1.70:1 against the surface — a straight WCAG 1.4.3
+   failure, and what the first draft of this component's own story shipped with.
+
+   Not forced from here. Reaching in to restyle a consumer's button would override a
+   variant they chose, which is the same call section_header.css documents and declines to
+   make for sizes.
+
+   No --rsui-button-on-color-ink override any more: it used to be set per variant, and on
+   the light surfaces it was a no-op anyway, because that variable only reaches the FILLED
+   treatment and button_slot.css already falls back to the same value. One surface means
+   one behaviour, and nothing to override. */
+.rsui-toast__action {
+    @apply shrink-0;
+}
+
+.rsui-toast__close {
+    @apply flex items-center justify-center shrink-0 cursor-pointer;
+    @apply text-current opacity-70 hover:opacity-100 transition-opacity;
+    /* Reset native <button> chrome, matching .rsui-meta-info__help. */
+    @apply bg-transparent border-0 p-0 rounded outline-hidden;
+    /* The ring takes the current ink rather than border-primary: on this dark surface the
+       standard ring is near-invisible against the ground it sits on. */
+    @apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-current focus-visible:ring-offset-transparent;
+}
+
+/* The X takes the button's ink, which it does not do on its own.
+ *
+ * `<Icon>` falls back to `primary` when the consumer names no colour, and
+ * `.rsui-icon--primary > *` PAINTS the svg directly — a declaration beats the white this
+ * button inherits, however specific the ancestor. So the close glyph rendered as Grey 900
+ * at the button's own 70% opacity: 1.15:1 as actually composited. Invisible, and it was
+ * on the branch that way through review. With currentColor it composites to 7.73:1, clear
+ * of the 3:1 WCAG 1.4.11 asks of an icon-only control.
+ *
+ * currentColor rather than a named token, so the rule holds if a variant ever changes its
+ * ink. Same mechanism as the override meta_info.css:68 makes for its label icon — but
+ * unscoped, where meta_info deliberately scopes to --primary. That difference is the
+ * interesting part: meta_info protects a consumer's `<Icon success>` because a status
+ * marker on a label is intent, whereas a close glyph has no legitimate reason to carry a
+ * semantic colour, so there is nothing to protect. */
+.rsui-toast__close .rsui-icon > * {
+    color: currentColor;
+}
+
+/* VARIANTS. Only three, and deliberately not MessageBox's six.
+ *
+ * A toast says an action completed. "Info" and "warning" are statements about the state
+ * of something, which is MessageBox's job and belongs in the page flow where it can stay.
+ * An `ai` toast is not a thing. Offering them here would invite a toast to be used as a
+ * banner that happens to disappear.
+ *
+ * CARRIED BY THE ICON, and by nothing else. Two rejected alternatives, both measured:
+ *
+ *   A left accent bar. Drawn as an inset box-shadow it is clipped by the toast's own
+ *   12px corner radius — on a 46px-tall toast the radius eats 12px off each end, so only
+ *   22px of a 4px bar is ever full width and it tapers away at both ends. It renders as a
+ *   crescent, not a bar.
+ *
+ *   Tinting the dark surface toward the hue. Keeps one polarity, so the ink stays
+ *   correct, but the tints are indistinguishable from the plain surface: mixing the
+ *   accent in at 20% gives 1.49:1 (success) and 1.35:1 (error) against the default
+ *   ground. Nobody would tell those apart. Pushing further only turns the surface muddy.
+ *
+ * So the ground is identical for every variant and the icon carries the meaning, at the
+ * full accent against a constant dark surface:
+ *
+ *   success  Success 400  #47cd8a   7.01:1
+ *   error    Error 400    #f97066   5.10:1
+ *
+ * Both clear of the 3:1 WCAG 1.4.11 asks of a meaningful non-text indicator.
+ *
+ * This means a success or error toast with NO icon looks exactly like a default one, and
+ * that is the accepted cost. The library's convention is that a semantic glyph belongs to
+ * the consumer — the note above .rsui-message-box's icon says so, and Pill, MetricCard,
+ * ListItem and SectionHeader all take theirs through a slot — so the component will not
+ * hardcode one. Colour is never the only signal in any case (WCAG 1.4.1): the message
+ * names what happened, and an error additionally takes role="alert".
+ *
+ * THESE TWO REACH PAST THE SEMANTIC TIER INTO THE RAW PALETTE, deliberately, and they are
+ * the only place in this file that does — the surface goes through
+ * `background-primary-contrast` like everything else.
+ *
+ * The semantic tier has no status colour for a dark ground. Every candidate, measured
+ * against this surface:
+ *
+ *     --color-text-success                #067647    2.49:1   fail
+ *     --color-text-error                  #b42318    2.16:1   fail
+ *     --color-background-success-invert   #abefc6   10.74:1   pass
+ *     --color-background-error-invert     #fecdca   10.00:1   pass
+ *     --color-border-success              #abefc6   10.74:1   pass
+ *     --color-border-error                #fecdca   10.00:1   pass
+ *
+ * Every `text-*` status token is drawn for a light ground and fails outright here. The
+ * ones that pass are pale pastels named for a background or a border — using them would
+ * buy tier purity with a naming stretch and a washed-out glyph on a dark pill.
+ *
+ * The proper fix is a semantic token meaning "a status colour on a contrast surface".
+ * That is an addition to tokens.css and a design decision rather than a component one, so
+ * until it exists this is the honest version: raw palette, named, measured, in one place,
+ * and easy to swap when the token lands. */
+.rsui-toast--success .rsui-toast__icon {
+    color: var(--Colors-Success-400);
+}
+
+.rsui-toast--error .rsui-toast__icon {
+    color: var(--Colors-Error-400);
+}

package/components.css

@@ -108,6 +108,7 @@ Please be careful when adding new components and updating the order.
 @import './components/th.css';
 @import './components/td.css';
 @import './components/td_user.css';
+@import './components/toast.css';
 @import './components/toggle.css';
 @import './components/tooltip.css';
 @import './components/two_column_layout.css';

package/package.json

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