@redseed/redseed-ui-tailwindcss 7.67.0 → 7.69.0

package/components/category_list.css

@@ -30,16 +30,23 @@
 
 /* A linked category has to look like a link. A badge with no pointer and no
    hover reads as a label, which is what most categories are, so the ones that
-   genuinely filter a list get the library's always-on underline (the LinkSlot
-   convention) plus a hover state on the pill itself. Half-measures are the
-   failure here: a pointer alone is not a visible affordance. */
+   genuinely filter a list get a pointer, a hover state on the pill, and the
+   underline on hover.
+
+   Underline on hover rather than at rest, which is where this started and was
+   wrong: it borrowed LinkSlot's always-on rule, but a pill is not a run of text
+   in a paragraph. Its own shape already separates it from what is around it, so
+   a resting underline reads as a mistake rather than as a link — the same
+   treatment a table cell link gets, where colour and weight carry it and the
+   underline is the hover affordance. */
 .rsui-category-list__link {
     @apply block rounded-full no-underline;
     @apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-border-primary outline-hidden;
 }
 
 .rsui-category-list__link .rsui-badge {
-    @apply cursor-pointer underline underline-offset-2 transition-colors;
+    @apply cursor-pointer no-underline transition-colors;
+    @apply hover:underline underline-offset-2;
 }
 
 /* One grey step darker, not the usual `hover:bg-background-secondary`. That is the
@@ -56,8 +63,15 @@
 
    Sibling to the list rather than inside it, so it wraps onto its own line at
    phone widths — which is where the cap does most of its work. */
+/* min-width, because the label changes length as it toggles: "+4 more" is 57px
+   and "Show fewer" is 80px, so without a floor the whole row shifted 23px
+   sideways under the pointer mid-press. Measured. The value is the wider of the
+   two states, so the button never grows and never shrinks; text-align keeps the
+   shorter label from drifting left inside it.
+
+   Same fix the page header's meta toggle already carries, for the same reason. */
 .rsui-category-list__more {
-    @apply inline-flex w-fit items-center whitespace-nowrap;
+    @apply inline-flex w-fit min-w-20 justify-center items-center whitespace-nowrap;
     @apply text-sm font-semibold no-underline cursor-pointer transition-colors;
     @apply text-button-tertiary hover:text-button-tertiary-hover;
     @apply hover:underline underline-offset-4 decoration-2;

package/components/metric_card.css

@@ -167,7 +167,8 @@
    on it — and the alternative is inventing a second readable ink per tone to
    preserve a nicety. tone-light keeps its semantic colour, so it keeps the split. */
 .rsui-metric-card--tone-green .rsui-metric-card__comparison-context,
-.rsui-metric-card--tone-teal .rsui-metric-card__comparison-context {
+.rsui-metric-card--tone-teal .rsui-metric-card__comparison-context,
+.rsui-metric-card--tone-bloom .rsui-metric-card__comparison-context {
     color: var(--rsui-metric-card-ink-muted);
 }
 
@@ -247,6 +248,43 @@
     --rsui-metric-card-rule: rgba(255, 255, 255, 0.18);
 }
 
+/* For a MetricCard sitting on PageHeader's bloom band, and the one tone whose surface is
+   NOT opaque.
+
+   This is not the header's own stats strip — that is PageHeaderStat, a 150px tile with a
+   serif figure, and the two are different objects. This tone is for the case where a full
+   MetricCard, with its comparison and trend, is the content sitting on a bloom surface.
+
+   The band it sits on runs Journey Green at one end to Warm Mauve at the other, so an
+   opaque tile is the wrong colour at one end of its own row whichever step it takes.
+   Warm Mauve 900 was tried first and reads as a mauve panel dropped on the green end.
+   A white scrim instead lets the band through, so each tile picks up the part of the
+   sweep it is standing on and the row reads as one thing.
+
+   THE COST, MEASURED, AND WHAT IT DECIDES. A scrim can only lighten, so the tile is
+   always lighter than the band beneath it, and the band's lightest point is already the
+   tightest place on it. Compositing 9% white over that point — rgb(133, 107, 129):
+
+     white       4.77:1  PASS
+     Grey 200    3.97:1  fails
+     Grey 300    3.34:1  fails
+
+   So this is the one tone with NO muted ink: --rsui-metric-card-ink-muted is white too,
+   and the step between a tile's number and its label is carried by size and weight, which
+   is what the design does anyway. Nothing darker than white clears AA through a scrim on
+   this band, so a muted colour here would be a quiet failure rather than a choice.
+
+   9% is the ceiling, not a taste value: 12% takes white itself to 4.46:1. A hoverable
+   tile is safe because Card's hover scrim is DARK — it moves the tile away from the
+   limit, not towards it. Raise this figure and white goes under; re-measure rather than
+   nudge it. */
+.rsui-metric-card--tone-bloom {
+    --rsui-metric-card-surface: rgba(255, 255, 255, 0.09);
+    --rsui-metric-card-ink: var(--Colors-Base-white);
+    --rsui-metric-card-ink-muted: var(--Colors-Base-white);
+    --rsui-metric-card-rule: rgba(255, 255, 255, 0.18);
+}
+
 /* The white-label case: same layout, inverted ink. */
 .rsui-metric-card--tone-light {
     --rsui-metric-card-surface: var(--Colors-Modern-Bone-200);
@@ -273,17 +311,23 @@
     color: var(--rsui-metric-card-ink-muted);
 }
 
-/* The semantic status inks are unreadable on the two DARK tiles, measured:
+/* The semantic status inks are unreadable on the DARK tiles, measured:
+
+     ink                          tone-green   tone-teal   tone-bloom
+                                    #0e5942     #0f373c     (scrim)
+     --color-text-success #067647    1.46:1      2.26:1      1.20:1
+     --color-text-error   #b42318    1.26:1      1.96:1      1.38:1
 
-     ink                          on tone-green #0e5942   on tone-teal #0f373c
-     --color-text-success #067647          1.46:1                 2.26:1
-     --color-text-error   #b42318          1.26:1                 1.96:1
+   tone-bloom is measured on the lightest tile the scrim can produce,
+   rgb(133, 107, 129) — the band's lightest point seen through 9% white.
 
-   Both invisible — the same failure this file already documents for text-brand
+   All invisible — the same failure this file already documents for text-brand
    on a toned tile. So the comparison gives up its colour there and takes the
    tile's muted ink, exactly as the active state gives up its brand number, and
    the arrow direction plus the consumer's word carry the meaning on their own.
-   Journey Green 200 measures 5.92:1 and Deep Teal 300 6.36:1, both clearing AA.
+   Journey Green 200 measures 5.92:1 and Deep Teal 300 6.36:1, both clearing AA;
+   on tone-bloom the muted ink IS white, for the reason that tone documents, so
+   the comparison lands on white at 4.75:1 there.
 
    tone-light is deliberately NOT in this list. Its surface is Modern Bone 200
    (#f9f8f6), where success measures 5.36:1 and error 6.19:1 — both pass AA, so
@@ -291,21 +335,25 @@
 
    (0,2,0), so it outranks the (0,1,0) sentiment modifiers wherever they sit. */
 .rsui-metric-card--tone-green .rsui-metric-card__comparison,
-.rsui-metric-card--tone-teal .rsui-metric-card__comparison {
+.rsui-metric-card--tone-teal .rsui-metric-card__comparison,
+.rsui-metric-card--tone-bloom .rsui-metric-card__comparison {
     color: var(--rsui-metric-card-ink-muted);
 }
 
 /* The solid badge goes with it. Filling it with the error ink on a dark tile would
    reproduce exactly the 1.26:1 the rule above exists to avoid, so it takes the
    tile's muted ink and puts the arrow in the tile's own surface colour — the
-   same 5.92:1 and 6.36:1 pairing, read the other way round.
+   same 5.92:1 / 6.36:1 pairing, read the other way round. On tone-bloom the
+   surface is a scrim rather than a colour, so the knocked-out arrow shows the
+   band through it, which is the same effect one step further out.
 
    The ringed badge needs no rule of its own: its border is `currentColor`, and the
    rule above has already moved the comparison's ink to the tile's muted value, so
    the ring follows it. This is the tone where solid-vs-ringed does its real work,
    because once the colour is stripped it is the only sentiment signal left. */
 .rsui-metric-card--tone-green .rsui-metric-card__comparison--negative .rsui-metric-card__comparison-icon,
-.rsui-metric-card--tone-teal .rsui-metric-card__comparison--negative .rsui-metric-card__comparison-icon {
+.rsui-metric-card--tone-teal .rsui-metric-card__comparison--negative .rsui-metric-card__comparison-icon,
+.rsui-metric-card--tone-bloom .rsui-metric-card__comparison--negative .rsui-metric-card__comparison-icon {
     background-color: var(--rsui-metric-card-ink-muted);
     color: var(--rsui-metric-card-surface);
 }

package/components/modal.css

@@ -61,8 +61,29 @@
     @apply sticky top-0 z-1 p-0 bg-background-secondary shrink-0 text-lg font-semibold;
 }
 
+/* ---------------------------------------------------------------------------
+   Padding, and why it is written as three shorthands rather than @apply p-*
+
+   Each region used to pay for all four of its own sides — `p-space-md` on all
+   three — so the 16px below the header met the 16px above the body: 32px
+   between a dialog's title and its first line, 32px again before the buttons,
+   against 16px at the edges. The seams ended up twice the margin, which is
+   what you get when neighbours both pay for the gap between them.
+
+   So the two INNER edges are zeroed and the body carries them. Each region
+   still behaves when one of the others is absent, which matters because all
+   three modifiers are independent props a consumer can turn off.
+
+   The values are Material's dialog: 24 at every edge, 16 from the headline to
+   the supporting text, 24 from the supporting text to the buttons.
+
+   Longhand rather than Tailwind's `p-*` utilities on purpose — these are
+   three-value shorthands with a different value per edge, and `@apply
+   pt-space-lg px-space-lg pb-0` is four utilities to say what one declaration
+   says, with the seam buried in the last one.
+   --------------------------------------------------------------------------- */
 .rsui-modal__header--padded {
-    @apply p-space-md;
+    padding: 1.5rem 1.5rem 0;
 }
 
 .rsui-modal__body {
@@ -71,8 +92,11 @@
     scrollbar-width: none;
 }
 
+/* Carries both seams — 16px up to the header, 24px down to the footer — as well
+   as its own side edges. With no footer the 24px is simply the bottom of the
+   dialog, which is the same number, so nothing special is needed for that case. */
 .rsui-modal__body--padded {
-    @apply p-space-md;
+    padding: 1rem 1.5rem 1.5rem;
 }
 
 .rsui-modal__body::-webkit-scrollbar {
@@ -85,9 +109,31 @@
     padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
 }
 
+/* The footer pays for ALL FOUR of its own sides, unlike the header above.
+
+   That asymmetry is deliberate and it is about the banding. The header and body
+   share no visible boundary in the places it matters, so zeroing the header's
+   bottom edge and letting the body carry it reads as one gap. The footer does
+   not: it has its own background (background-secondary against the body's
+   primary), so the boundary is a visible edge and the buttons sit INSIDE a band
+   of their own. Borrowing the space above them from the body left them jammed
+   against the top of that band with 24px below — measured at 0 above, 24 below.
+
+   So the seam here is the body's 24px bottom plus the footer's 24px top. That is
+   more than the 24px between the title and the body, which is the right way
+   round: a button row is a different kind of thing from a paragraph, and the
+   band is already announcing that.
+
+   If the banding ever goes (the other half of #373), this should drop back to
+   `0 1.5rem 1.5rem` and let the body carry the seam, the way the header does.
+
+   The bottom keeps its safe-area floor — a footer is the last thing above the
+   home indicator on a phone, so the value is a minimum rather than a fixed
+   amount, and it rises with the padding (1rem -> 1.5rem) or a footer would sit
+   closer to the bottom edge than to its own buttons. */
 .rsui-modal__footer--padded {
-    @apply p-space-md;
-    padding-bottom: max(1rem, env(safe-area-inset-bottom));
+    padding: 1.5rem;
+    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
 }
 
 .rsui-modal__footer--start {

package/components/page_header.css

@@ -62,6 +62,27 @@
     @apply lg:text-[2.5rem] lg:leading-[1.15] lg:tracking-[-0.01em] lg:font-black;
 }
 
+/* An eyebrow above the h1, matching card_header.css's: xs, semibold, uppercase, wide
+   tracking, in the secondary ink so it labels the title rather than competing with it.
+   The two are deliberately the same recipe — an eyebrow means the same thing on a page
+   as it does on a card, and a second type style for it would be a second answer to one
+   question.
+
+   8px down to the title, the brand's smallest step, carried as a margin on this element
+   rather than as a gap on the parent so an absent eyebrow contributes nothing. Same
+   reason card_header.css gives. */
+.rsui-page-header__eyebrow {
+    @apply flex items-center gap-x-space-xs mb-space-xs;
+    @apply text-xs font-semibold uppercase tracking-wider text-text-secondary;
+}
+
+/* A badge brings its own case, size and tracking, so it must not inherit the uppercase
+   treatment meant for plain text. Badge sets no text-transform of its own, so without
+   this the uppercase leaks in. */
+.rsui-page-header__eyebrow .rsui-badge {
+    @apply normal-case tracking-normal;
+}
+
 .rsui-page-header__title-text-container {
     @apply flex flex-row gap-x-space-lg items-center;
 }
@@ -75,6 +96,110 @@
     @apply text-base leading-normal text-text-secondary;
 }
 
+/* ── The stats row ────────────────────────────────────────────────────────────
+   Ported from the /home/v2 twin rather than re-derived, because that band is the
+   thing this is meant to reproduce and it had already been worked out at every
+   width. Every number below is its number.
+
+   A wrapping row rather than a scrolling one: these are a handful of counts, and
+   a count you cannot see is not a summary.
+
+   Full width below lg, where __top is a column and the tiles sit under the title;
+   auto from lg up, where __top is a row and they sit beside it.
+   --------------------------------------------------------------------------- */
+.rsui-page-header__stats {
+    /* stretch, not start: a two-line label must not leave its tile shorter than
+       the one beside it. */
+    @apply w-full flex items-stretch gap-[10px];
+    @apply lg:w-auto lg:shrink-0;
+}
+
+/* The band carries four things in one row at desktop width and needs two rows
+   before that. The twin wrapped at 1280 rather than at 1024 because the three
+   counts plus a trailing action need about 600px, which squeezes the title hard
+   long before the layout actually breaks. */
+.rsui-page-header__top:has(.rsui-page-header__stats) {
+    @apply flex-wrap gap-[18px] lg:gap-[20px] xl:gap-[40px];
+}
+
+/* The title takes the rest of the row and the tiles keep their size, rather than
+   the two sharing it. min-width: 0 so a long title wraps instead of forcing the
+   tiles out of the row. */
+.rsui-page-header__top:has(.rsui-page-header__stats) .rsui-page-header__title {
+    @apply lg:grow lg:min-w-0 lg:basis-full xl:basis-auto;
+}
+
+/* One tile. 150px is the twin's width, at which its three labels sit on one line.
+
+   The leading edge is reserved whether or not it is painted, so a tile carrying a
+   rail and one without still line up — the mistake worth avoiding here is adding
+   the border only on the accented tile and knocking that tile 3px out of the row. */
+.rsui-page-header__stat {
+    @apply flex flex-col items-start gap-px;
+    @apply w-full px-[16px] py-[12px] text-left;
+    @apply border-0 border-s-[3px] border-solid border-s-transparent rounded-[10px];
+    @apply lg:w-[150px];
+
+    background: var(--rsui-page-header-tile, var(--color-background-secondary));
+    border-inline-start-color: var(--rsui-page-header-stat-accent, transparent);
+    font: inherit;
+}
+
+/* Below lg the row is full width, so the tiles share it rather than sitting at a
+   fixed size with the rest of the row empty beside them. */
+.rsui-page-header__stats > .rsui-page-header__stat {
+    @apply flex-1 lg:flex-none;
+}
+
+/* Only a tile that DOES something gets the pointer and the hover. A stat that
+   only reports a number is not a control, and PageHeaderStat renders it as a div
+   precisely so it does not pretend to be one. */
+.rsui-page-header__stat--interactive {
+    @apply cursor-pointer no-underline transition-colors duration-150;
+}
+
+/* Hover DARKENS on the dark tones rather than lightening, which is the opposite of the
+   twin and deliberate. Lifting a scrim from 9% to 16% takes white itself to 4.10:1 on the
+   band's lightest point — the hover state would be the one that fails. Darkening moves
+   every ink on the tile away from its limit instead, and still reads as a state change.
+   tone-light darkens too, through its own solid step. */
+.rsui-page-header__stat--interactive:hover {
+    background: var(--rsui-page-header-tile-hover, var(--color-background-secondary-contrast));
+}
+
+/* The figure is the one place the serif is right at this size: it is a number
+   being read as a headline, which is the range the brand keeps Newsreader for.
+   tabular-nums so a row of counts does not shift as the numbers change. */
+.rsui-page-header__stat-value {
+    @apply font-redseed-heading text-[2.875rem] font-semibold leading-none tabular-nums;
+
+    color: var(--rsui-page-header-ink, var(--color-text-primary));
+}
+
+/* The label takes the tone's INK rather than its muted ink, and the step down to it is
+   carried by size and weight — 46px semibold against 12px medium is already a long way.
+
+   That is a contrast result, not a preference. A tile is a scrim, so it is always lighter
+   than the band under it, and a muted ink measured against the BAND does not survive the
+   tile. Composited over each tone's own worst ground:
+
+     tone     tile ground        its muted ink          white
+     green    rgb(32, 92, 74)    JourneyGreen300 4.18   7.79
+     teal     rgb(34, 67, 71)    DeepTeal300     5.32  10.75
+     bloom    rgb(133, 107, 129) Grey 200        3.97   4.77
+
+   Two of the three fail, and bloom's is the band's lightest point — reachable, because a
+   header with no actions lets the title grow and pushes the tiles to the right edge, which
+   is exactly where that point is. In situ at 1440 with an action present the same tile
+   measures 6.83:1, but a library component does not get to assume the layout it is given.
+
+   tone-light resolves this to Grey 900 through the same rule, at 16.08:1 on its tile. */
+.rsui-page-header__stat-label {
+    @apply text-xs font-medium leading-[1.3];
+
+    color: var(--rsui-page-header-ink, var(--color-text-primary));
+}
+
 .rsui-page-header__status-actions {
     @apply flex-1 flex gap-x-space-xs items-center justify-between lg:pr-space-xs;
 }
@@ -83,26 +208,107 @@
     @apply flex-1 flex flex-wrap gap-space-xs items-center justify-end;
 }
 
-.rsui-page-header__meta-action {
-    @apply flex lg:hidden;
-}
-
 .rsui-page-header__search {
     @apply w-full pt-space-xs lg:pt-0 lg:w-auto;
 }
 
-.rsui-page-header__meta-modal {
-    @apply lg:hidden;
+/* ---------------------------------------------------------------------------
+   Meta
+
+   Visible at every width. It was `hidden lg:flex`, so the facts a header exists
+   to carry vanished below 1024px and a modal reproduced them — on a phone, where
+   a reader has least context to spare and least patience for a dialog.
+
+   A grid, not a flex row, and content-width rather than full-bleed: meta reads
+   as one cluster beside the title rather than a band across the page. Four
+   columns from sm up; two on a phone, because four 16px labels in 375px is not a
+   grid, it is a queue.
+
+   The cap is `:nth-child` rather than a count in JS. `#meta` is a slot and every
+   consumer fills it with a `v-for`, so the component cannot know how many facts
+   there are — but CSS does not need to know. Past the fourth, they are hidden
+   until the toggle expands the row.
+   --------------------------------------------------------------------------- */
+/* The region is the grid. The facts sit inside a `display: contents` wrapper so
+   they become direct grid items without the toggle joining their `:nth-child`
+   sequence — see the note in PageHeader.vue. */
+.rsui-page-header__meta-region {
+    @apply grid w-fit max-w-full items-start;
+    @apply gap-x-space-lg gap-y-space-md;
+
+    /* Columns sized to content, and the SAME count in both states.
+
+       An earlier version went five columns collapsed and four expanded, so the
+       toggle would sit in the row rather than wrap. That moved every fact
+       sideways when pressed — 13.7px with `1fr`, up to 40px with `max-content`,
+       because both make a column's width depend on something the toggle changes.
+       Holding the count fixed removes the question: the toggle occupies the
+       fifth cell while collapsed, and the fifth fact takes it once expanded.
+
+       The width has to be FIXED, not `max-content`. Holding the count steady is
+       not enough on its own: `max-content` sizes each column to whatever lands in
+       it, and expanding puts different facts in different columns, so they still
+       moved — 27px, measured. A fixed track depends on neither the count nor the
+       content.
+
+       6rem, against a widest-ink measurement of 90px across every label and value
+       in the busiest real header. Anything longer wraps inside its own cell
+       rather than pushing its neighbours. */
+    grid-template-columns: repeat(2, 6rem);
 }
 
-.rsui-page-header__meta-modal__body {
-    @apply flex flex-col gap-y-space-md;
+@media (min-width: 40rem) {
+    .rsui-page-header__meta-region {
+        grid-template-columns: repeat(5, 6rem);
+    }
 }
 
 .rsui-page-header__meta {
-    @apply hidden lg:flex gap-x-space-xl;
+    display: contents;
+}
+
+/* Past the cap, hidden until expanded. `> *` rather than a component class so it
+   does not care what a consumer puts in the slot — MetaInfo today, something
+   else tomorrow. The toggle is excluded by its own rule below, which comes
+   later and wins. */
+.rsui-page-header__meta > *:nth-child(n + 5) {
+    @apply hidden;
+}
+
+.rsui-page-header__meta--expanded > *:nth-child(n + 5) {
+    @apply block;
 }
 
+/* The toggle sits where the fifth fact would be, so pressing it expands the row
+   around it rather than moving it. Always shown, whatever the cap is doing. */
+.rsui-page-header__meta-toggle {
+    /* Centred against the fact beside it, not `self-start`. A fact is a two-line
+       unit — a 16px label over a 16px value, 36px in all — so a 20px toggle
+       pinned to the top reads as belonging to the LABELS rather than to the pair.
+       Centre also survives the expanded state, where the toggle wraps to its own
+       row and has no value to sit level with. */
+    @apply inline-flex w-fit items-center whitespace-nowrap self-center;
+    @apply text-sm font-semibold no-underline cursor-pointer transition-colors;
+    @apply text-button-tertiary hover:text-button-tertiary-hover;
+    @apply hover:underline underline-offset-4 decoration-2;
+    @apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-button-tertiary outline-hidden;
+
+    /* min-width, because the label changes length as it toggles — "+2 more"
+       against "Show fewer" — and without a floor the row shifts sideways under
+       the pointer mid-press. Same fix CategoryList carries (#355). */
+    @apply min-w-20 justify-center;
+
+    /* The negative margin pulls it back from the grid's 32px column gap to the
+       16px CategoryList uses. 32px is right between two FACTS, which read as
+       separate label/value pairs; it is too far for an affordance trailing them,
+       and the two rows sit one above the other in the same header — `+4 more`
+       under categories and `+3 more` under meta must not be spaced differently. */
+    @apply -ms-space-md;
+}
+
+
+
+
 .rsui-page-header__avatar {
     @apply shrink-0 size-12;
 }
@@ -151,11 +357,36 @@
     @apply p-space-lg;
 }
 
+/* The band reaches the viewport edges; its text does not. calc(50% - 50vw) pulls each
+   side out to the edge and the matching padding puts the content back on the container's
+   inner edge, so the greeting lines up with the logo and nav above it.
+
+   Measured in JS first, which is the wrong answer: a measured value goes stale whenever
+   the element resizes without the trigger you chose firing, and the band silently insets
+   itself again. CSS cannot go stale.
+
+   The vertical padding is the toned header's own and is not touched here, so this is
+   purely a horizontal escape. See the prop for the `overflow-x: clip` the document has to
+   carry. */
+.rsui-page-header--bleed {
+    /* width: auto is load-bearing. The base rule sets w-full, and a box with an explicit
+       width does not grow when its margins go negative — it just shifts. With w-full held
+       the band moved left to the viewport edge and stopped short on the right by exactly
+       the amount it had moved, which looks like a one-sided bug and is not one. */
+    @apply w-auto;
+
+    margin-inline: calc(50% - 50vw);
+    padding-inline: calc(50vw - 50%);
+}
+
 .rsui-page-header--tone-green {
     --rsui-page-header-bg: var(--Colors-Journey-Green-800);
     --rsui-page-header-ink: var(--Colors-Base-white);
     --rsui-page-header-ink-muted: var(--Colors-Journey-Green-300);
     --rsui-page-header-rule: rgba(255, 255, 255, 0.18);
+    --rsui-page-header-accent: var(--Colors-Warm-Yellow-400);
+    --rsui-page-header-tile: rgba(255, 255, 255, 0.09);
+    --rsui-page-header-tile-hover: rgba(0, 0, 0, 0.12);
 }
 
 .rsui-page-header--tone-teal {
@@ -163,6 +394,60 @@
     --rsui-page-header-ink: var(--Colors-Base-white);
     --rsui-page-header-ink-muted: var(--Colors-Deep-Teal-300);
     --rsui-page-header-rule: rgba(255, 255, 255, 0.18);
+    --rsui-page-header-accent: var(--Colors-Warm-Yellow-400);
+    --rsui-page-header-tile: rgba(255, 255, 255, 0.09);
+    --rsui-page-header-tile-hover: rgba(0, 0, 0, 0.12);
+}
+
+/* The brand's hero treatment: three soft radial washes over a green-to-mauve
+   sweep, so the band warms across its width instead of running dark green end to
+   end. Every colour is a primary identity ramp — Journey Green and Deep Teal
+   carry the base, Warm Yellow / Soft Lilac / Warm Mauve are the washes. No
+   secondary accents.
+
+   A TONE rather than a boolean layered over green or teal. The alphas below are
+   a contrast budget measured against THIS base sweep; put the same washes over a
+   different background and the measurement is void, so there is nothing to
+   compose with.
+
+   THE ALPHAS ARE MEASURED, NOT CHOSEN. All four layers were composited on a
+   200x200 grid across eight band sizes from 1920x150 down to 375x320, and the
+   lightest point anywhere in the band taken as the worst case — the right test
+   for a library component, where a consumer may put text anywhere along the
+   band, rather than the worst point under one particular text box.
+
+   The lightest point is the Soft Lilac centre at 96% 30%, where the washes
+   combine to alpha 0.320 and the surface resolves to rgb(121, 92, 117).
+   Against it:
+
+     Base white          5.82:1  PASS
+     Grey 200            4.84:1  PASS  <- the muted ink below
+     Deep Teal 200       4.00:1  large text only
+     Journey Green 300   3.12:1  large text only
+
+   Which is why the muted ink is NOT Journey Green 300, the muted step the green
+   tone uses: it fails AA at the lightest point of this band. Move a centre or
+   raise an alpha and this has to be measured again; do not eyeball it. */
+.rsui-page-header--tone-bloom {
+    --rsui-page-header-bg:
+        /* Warm Yellow 500 — above the band, left of centre where the base is greenest */
+        radial-gradient(50% 130% at 44% -20%, rgba(238, 220, 91, 0.34) 0%, rgba(238, 220, 91, 0) 62%),
+        /* Soft Lilac 500 — the right edge, the pink */
+        radial-gradient(55% 130% at 96% 30%, rgba(233, 184, 222, 0.32) 0%, rgba(233, 184, 222, 0) 62%),
+        /* Warm Mauve 500 — below the band, deepening the purple end */
+        radial-gradient(70% 125% at 88% 112%, rgba(185, 125, 168, 0.38) 0%, rgba(185, 125, 168, 0) 65%),
+        /* base sweep: Journey Green 800 -> Deep Teal 700 -> Warm Mauve 950 */
+        linear-gradient(115deg, var(--Colors-Journey-Green-800) 0%, var(--Colors-Deep-Teal-700) 42%, var(--Colors-Warm-Mauve-950) 100%);
+    --rsui-page-header-ink: var(--Colors-Base-white);
+    --rsui-page-header-ink-muted: var(--Colors-Grey-200);
+    --rsui-page-header-rule: rgba(255, 255, 255, 0.18);
+    /* Warm Yellow 400, the twin's accent: 5.37:1 on this band. */
+    --rsui-page-header-accent: var(--Colors-Warm-Yellow-400);
+    /* A scrim rather than a colour, so each tile picks up the part of the sweep
+       it is standing on and a row of them reads as one thing rather than as
+       panels dropped on a band. */
+    --rsui-page-header-tile: rgba(255, 255, 255, 0.09);
+    --rsui-page-header-tile-hover: rgba(0, 0, 0, 0.12);
 }
 
 /* The white-label case. Same layout, inverted ink — a client's own background
@@ -172,6 +457,10 @@
     --rsui-page-header-ink: var(--Colors-Grey-900);
     --rsui-page-header-ink-muted: var(--Colors-Grey-600);
     --rsui-page-header-rule: var(--Colors-Grey-300);
+    /* A scrim is invisible on a light band, so this tone names solid steps. */
+    --rsui-page-header-accent: var(--Colors-Journey-Green-700);
+    --rsui-page-header-tile: var(--Colors-Modern-Bone-200);
+    --rsui-page-header-tile-hover: var(--Colors-Grey-200);
 }
 
 /* Ink application is tone-agnostic: only the variable values differ, so the
@@ -184,7 +473,57 @@
     color: var(--rsui-page-header-ink-muted);
 }
 
-.rsui-page-header--toned .rsui-page-header__meta {
+/* The eyebrow takes the muted ink for the same reason the subtitle does: it is
+   the quieter of the two lines around the title, and text-text-secondary is a
+   dark grey that disappears on every tone but light. */
+.rsui-page-header--toned .rsui-page-header__eyebrow {
+    color: var(--rsui-page-header-ink-muted);
+}
+
+/* ── The band's type ──────────────────────────────────────────────────────────
+   Ported from the /home/v2 twin, which is the design this tone reproduces.
+
+   A DELIBERATE DEPARTURE from the h1 rule at the top of this file, and worth a
+   reviewer's eye rather than a quiet landing. That rule drops Newsreader for the
+   sans steps, citing the book's restriction of Newsreader to Header 1 and its
+   own sizes — and it is right for a page title. This is not a page title; it is
+   a hero band, the same surface the marketing site sets in Newsreader, and it
+   carries a greeting rather than the name of a record. The departure is scoped
+   to this one tone, so every other header keeps the sans title.
+
+   27px below lg, 36px from lg up — the twin's two sizes.
+   --------------------------------------------------------------------------- */
+.rsui-page-header--tone-bloom .rsui-page-header__title h1 {
+    @apply font-redseed-heading text-[1.6875rem] font-semibold;
+    @apply leading-[1.1] tracking-[-0.01em];
+    @apply lg:text-[2.25rem] lg:leading-[1.1] lg:font-semibold;
+}
+
+/* The eyebrow sits tight to the greeting — 3px, not the 8px a card eyebrow takes
+   — because the two read as one block of address here rather than as a label and
+   the thing it labels. */
+.rsui-page-header--tone-bloom .rsui-page-header__eyebrow {
+    @apply mb-[3px] tracking-[0.06em];
+}
+
+/* And the line under the title sits away from it, at 7px and one step down in
+   size: it is a second sentence, not a subtitle wrapping the first. */
+.rsui-page-header--tone-bloom .rsui-page-header__subtitle {
+    @apply mt-[7px] text-sm;
+}
+
+/* The one word in that line that is the point of it. Available on every tone,
+   because a band with a highlight in it is not specific to this one. */
+.rsui-page-header--toned .rsui-page-header__subtitle strong {
+    @apply font-semibold;
+
+    color: var(--rsui-page-header-accent, var(--rsui-page-header-ink));
+}
+
+/* On the REGION, not on `__meta`. The facts element is `display: contents` so it
+   generates no box at all — a border declared there paints nothing, and this
+   separator silently disappeared when the grid moved up a level. Measured. */
+.rsui-page-header--toned .rsui-page-header__meta-region {
     border-top: 1px solid var(--rsui-page-header-rule);
 
     @apply mt-space-md pt-space-md;
@@ -229,3 +568,19 @@
 .rsui-page-header--toned .rsui-category-list__more {
     color: var(--rsui-page-header-ink);
 }
+
+/* The meta toggle borrows the same tertiary green and disappears on the same dark
+   band — measured as near-invisible on Journey Green 800. Same fix, same reason:
+   an invisible control is worse than reaching for the tone's ink.
+
+   Hover included, because the hover colour is a second tertiary green and would
+   make the control vanish again the moment a pointer reached it. */
+.rsui-page-header--toned .rsui-page-header__meta-toggle {
+    color: var(--rsui-page-header-ink);
+}
+
+/* Hover separately: the hover colour is a second tertiary green, so without this
+   the control vanishes again the moment a pointer reaches it. */
+.rsui-page-header--toned .rsui-page-header__meta-toggle:hover {
+    color: var(--rsui-page-header-ink);
+}

package/components/section_header.css

@@ -22,8 +22,19 @@
     @apply border-border-primary;
 }
 
+/* A clickable header is a control, so it takes the library's focus ring rather
+   than the browser's. Without `outline-hidden` a `tabindex="0"` div falls through
+   to the UA default ring, which is the wrong colour and shape for this library.
+
+   Keyboard only, verified with a real click rather than a dispatched event: the
+   browser knows a genuine mouse press from a synthetic one, and `:focus-visible`
+   is false after the real thing. (A dispatched MouseEvent reports true even on a
+   plain <button>, so a probe built that way proves nothing.)
+
+   Same declaration CardHeader already carries for the same situation. */
 .rsui-section-header--clickable {
     @apply cursor-pointer;
+    @apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-border-primary outline-hidden;
 }
 
 .rsui-section-header__header {

package/package.json

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

package/tokens.css

@@ -11,7 +11,14 @@
     --color-text-success: #067647;
     --color-text-warning: #b54708;
     --color-text-error: #b42318;
-    --color-text-info: #0077cc;
+    /* #0077cc measured 4.46:1 on its own fill (--color-background-info, #f6fbfd),
+       just under the 4.5 AA threshold for body text. #0070c0 is the smallest step
+       that clears it — 4.94:1 — so the info blue moves as little as it can while
+       being legible. Every other ground it sits on improves too: 4.66 -> 5.15 on
+       white.
+       --color-background-info-contrast keeps #0077cc deliberately: it is a
+       BACKGROUND, so darkening it would change surfaces rather than fix text. */
+    --color-text-info: #0070c0;
     /* Warm-Mauve-800, not -600: the AI treatments set this over the pale AI gradient
        (#ebe0fa -> #fff6eb), where -600 measured 2.93:1 and failed WCAG AA for 14px text.
        -800 clears it at 4.52:1 at the gradient's worst point. Consumed by Badge AI,