@redseed/redseed-ui-tailwindcss 7.56.0 → 7.57.0

package/components/form_field_date_range.css

@@ -153,6 +153,38 @@
     @apply hover:bg-background-brand-contrast;
 }
 
+/*
+ * Square off the edge each endpoint faces the range on, so the band closes.
+ *
+ * The base `.rsui-form-field-date-range__day` is `rounded-lg` on all four
+ * corners and the endpoints only override the background, so an endpoint used to
+ * sit between two square in-range fills as a rounded square — leaving a white
+ * notch at each corner where its curve pulled away from its neighbour. The band
+ * read as interrupted by the endpoint rather than containing it.
+ *
+ * MUI solves the same problem by drawing a continuous highlight band behind the
+ * cells and putting the endpoint circle on top of it. That needs a second
+ * element per cell; squaring the inner edge of the endpoint's own fill gets the
+ * same join out of the existing one.
+ */
+.rsui-form-field-date-range__day--range-start {
+    @apply rounded-r-none;
+}
+
+.rsui-form-field-date-range__day--range-end {
+    @apply rounded-l-none;
+}
+
+/*
+ * Both modifiers land on the same day for a single-day window — `today`, or a
+ * range picked start-and-end on one date. There is no band to join, so restore
+ * the full radius. This selector is deliberately last and doubly-classed so it
+ * outranks the two above.
+ */
+.rsui-form-field-date-range__day--range-start.rsui-form-field-date-range__day--range-end {
+    @apply rounded-lg;
+}
+
 /*
  * The day the presets resolve against — "today" as the server sees it.
  *

package/components/icon.css

@@ -88,42 +88,52 @@
 
 .rsui-icon--primary {
     @apply *:text-text-primary;
+    --rsui-icon-pulse: var(--color-text-primary);
 }
 
 .rsui-icon--secondary {
     @apply *:text-text-secondary;
+    --rsui-icon-pulse: var(--color-text-secondary);
 }
 
 .rsui-icon--brand {
     @apply *:text-text-brand;
+    --rsui-icon-pulse: var(--color-text-brand);
 }
 
 .rsui-icon--success {
     @apply *:text-text-success;
+    --rsui-icon-pulse: var(--color-text-success);
 }
 
 .rsui-icon--info {
     @apply *:text-text-info;
+    --rsui-icon-pulse: var(--color-text-info);
 }
 
 .rsui-icon--warning {
     @apply *:text-text-warning;
+    --rsui-icon-pulse: var(--color-text-warning);
 }
 
 .rsui-icon--error {
     @apply *:text-text-error;
+    --rsui-icon-pulse: var(--color-text-error);
 }
 
 .rsui-icon--ai {
     @apply *:text-text-ai;
+    --rsui-icon-pulse: var(--color-text-ai);
 }
 
 .rsui-icon--disabled {
     @apply *:text-text-disabled;
+    --rsui-icon-pulse: var(--color-text-disabled);
 }
 
 .rsui-icon--classic {
     @apply *:text-pink-500;
+    --rsui-icon-pulse: var(--color-pink-500);
 }
 
 .rsui-icon--primary.rsui-icon--invert {
@@ -216,52 +226,145 @@
     @apply *:text-text-on-color;
 }
 
+/*
+ * Both flags together is the one combination that puts the glyph back on its
+ * variant colour, against a tinted fill — so each of these restates the pulse
+ * token alongside it, undoing the on-colour default set below. Kept here rather
+ * than in a block of its own so the ring colour is edited in the same place as
+ * the glyph colour it has to match.
+ */
 .rsui-icon--primary.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-primary-invert;
     @apply *:text-text-primary;
+    --rsui-icon-pulse: var(--color-text-primary);
 }
 
 .rsui-icon--secondary.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-secondary-invert;
     @apply *:text-text-secondary;
+    --rsui-icon-pulse: var(--color-text-secondary);
 }
 
 .rsui-icon--brand.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-brand-invert;
     @apply *:text-text-brand;
+    --rsui-icon-pulse: var(--color-text-brand);
 }
 
 .rsui-icon--success.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-success-invert;
     @apply *:text-text-success;
+    --rsui-icon-pulse: var(--color-text-success);
 }
 
 .rsui-icon--info.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-info-invert;
     @apply *:text-text-info;
+    --rsui-icon-pulse: var(--color-text-info);
 }
 
 .rsui-icon--warning.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-warning-invert;
     @apply *:text-text-warning;
+    --rsui-icon-pulse: var(--color-text-warning);
 }
 
 .rsui-icon--error.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-error-invert;
     @apply *:text-text-error;
+    --rsui-icon-pulse: var(--color-text-error);
 }
 
 .rsui-icon--ai.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-ai-invert;
     @apply *:text-text-ai;
+    --rsui-icon-pulse: var(--color-text-ai);
 }
 
 .rsui-icon--disabled.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-disabled-invert;
     @apply *:text-text-disabled;
+    --rsui-icon-pulse: var(--color-text-disabled);
 }
 
 .rsui-icon--classic.rsui-icon--background.rsui-icon--invert {
     @apply bg-pink-50;
     @apply *:text-pink-500;
-}
+    --rsui-icon-pulse: var(--color-pink-500);
+}
+/*
+ * On a filled or inverted icon the glyph is repainted to an on-colour token, so
+ * the ring follows it rather than staying on a variant colour it no longer
+ * matches. Same specificity as the base variant rules and declared after them,
+ * so it wins on source order — but it loses to the two-flag rules above, which
+ * is the point: those put the glyph back on its variant colour and take the ring
+ * with them.
+ */
+.rsui-icon--background,
+.rsui-icon--invert {
+    --rsui-icon-pulse: var(--color-text-on-color);
+}
+
+/*
+ * Optional attention pulse: a ring expands out from the icon and fades, a few
+ * times, when the icon arrives.
+ *
+ * Deliberately a fixed number of iterations rather than `infinite`. An animation
+ * that repeats for more than five seconds needs a pause control (WCAG 2.2.2), and
+ * an icon has nowhere sensible to put one — three bursts draw the eye on arrival
+ * without taking on that obligation.
+ *
+ * Duration x iterations is the number that matters there, and it must stay under
+ * five seconds: 1.4s x 3 leaves 800ms of headroom. Slowing the ring to 1.8s to
+ * soften it further would put the total at 5.4s and trip the criterion, so the
+ * softening is done with opacity, border width and travel instead.
+ *
+ * The ring takes its colour from `--rsui-icon-pulse`, which each colour variant
+ * sets alongside its glyph rule.
+ *
+ * A custom property rather than `currentColor`: the variants colour the SVG child
+ * (`*:text-…`) and not the wrapper, so an inherited ring comes out near-black.
+ * Setting `color` on the wrapper instead would fix the base variants but silently
+ * miss `--invert` and `--background`, which repaint the glyph and would leave the
+ * ring on the old colour. A property the combination rules can override keeps the
+ * answer in one place — and, unlike a wrapper colour, it is inert for everything
+ * that does not read it.
+ *
+ * `pointer-events-none` because the ring overflows the icon's box and would
+ * otherwise sit over whatever is beside it.
+ */
+.rsui-icon--pulse {
+    @apply relative;
+}
+
+.rsui-icon--pulse::after {
+    @apply content-[''] absolute inset-0 rounded-full pointer-events-none;
+    border: 1px solid var(--rsui-icon-pulse, currentColor);
+    /* Invisible at rest, in both directions. Without this the ring reverts to its
+       un-animated state once the iterations finish — full opacity at scale 1 —
+       and a solid ring stays welded around the icon for the life of the page. */
+    @apply opacity-0;
+    animation: rsui-icon-pulse 1.4s ease-out 3;
+}
+
+@keyframes rsui-icon-pulse {
+    0% {
+        opacity: 0.35;
+        transform: scale(1);
+    }
+    100% {
+        opacity: 0;
+        transform: scale(1.8);
+    }
+}
+
+/*
+ * The pulse is decoration on top of an icon that is already visible, so removing
+ * it costs nothing — no state is conveyed by the animation alone.
+ */
+@media (prefers-reduced-motion: reduce) {
+    .rsui-icon--pulse::after {
+        animation: none;
+        display: none;
+    }
+}

package/components/message_box.css

@@ -1,5 +1,46 @@
+/*
+ * A row: optional icon, the text column, optional close. `items-start` so the
+ * icon and the close button align with the first line rather than centring
+ * against a tall body.
+ */
 .rsui-message-box {
-    @apply border rounded-lg overflow-hidden p-4 flex flex-col gap-y-3;
+    @apply border rounded-lg overflow-hidden p-4 flex items-start gap-x-3;
+}
+
+/*
+ * The text column. Carries the vertical rhythm the box itself used to own, so a
+ * box with no icon and no actions lays out exactly as it did before.
+ */
+.rsui-message-box__main {
+    @apply flex-1 flex flex-col gap-y-3;
+}
+
+/*
+ * Narrow and with an icon: the icon and the close button take a row of their own
+ * and the text runs full width beneath them, rather than indenting past a column
+ * that costs more than it gives at this width.
+ *
+ * Ordering is what makes it work — the DOM runs icon, text, close, so without it
+ * the full-width text column would wrap between the two and strand the close
+ * button on a third row. Scoped to `--with-icon` because a box with no icon has
+ * no column to escape: its close button already sits beside the title, and a
+ * lone X on its own row would be a wasted line.
+ *
+ * The box itself sets only `gap-x`, which buys nothing once these become two
+ * flex lines — so the row gap is set here, matching the text column's own
+ * rhythm. Inert at `sm:flex-nowrap`, where there is only ever one line.
+ */
+.rsui-message-box--with-icon {
+    @apply flex-wrap gap-y-3 sm:flex-nowrap;
+}
+
+.rsui-message-box--with-icon .rsui-message-box__close {
+    @apply order-2 ms-auto sm:order-3 sm:ms-0;
+}
+
+/* `sm:basis-0` rather than `basis-auto`, to restore exactly what `flex-1` sets. */
+.rsui-message-box--with-icon .rsui-message-box__main {
+    @apply order-3 basis-full sm:order-2 sm:basis-0;
 }
 
 .rsui-message-box--default {
@@ -37,17 +78,76 @@
 }
 
 .rsui-message-box__head {
-    @apply flex justify-between items-center gap-x-2;
+    @apply flex items-center gap-x-2;
 }
 
 .rsui-message-box__content {
-    @apply flex justify-between items-start gap-x-2;
+    @apply flex items-start gap-x-2;
+}
+
+/*
+ * `items-start` so the icon aligns with the first line of the message rather
+ * than centring against a multi-line body. `shrink-0` keeps it from being
+ * squeezed by long text.
+ */
+.rsui-message-box__icon {
+    @apply shrink-0 flex items-center h-6;
+}
+
+/*
+ * Actions sit under the message, indented to the body rather than the icon, so
+ * they read as belonging to the text.
+ *
+ * Neutral, not variant-coloured: a coloured action on a coloured tint is a
+ * contrast problem, and the action is a way out of the message rather than a
+ * restatement of its severity. The dismiss is quieter than whatever the consumer
+ * puts beside it, which is the only hierarchy this row needs.
+ */
+.rsui-message-box__actions {
+    @apply flex flex-wrap items-center gap-x-4 gap-y-2 pt-1;
+}
+
+.rsui-message-box__dismiss,
+.rsui-message-box__action {
+    @apply bg-transparent border-0 p-0 cursor-pointer;
+    @apply text-sm font-semibold transition-colors;
+    @apply hover:underline underline-offset-4 decoration-2;
+    @apply outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-border-primary rounded-sm;
+}
+
+/*
+ * Two tiers, and the only hierarchy this row needs: dismiss is the quieter of
+ * the pair, whatever the consumer puts beside it is the one they want pressed.
+ */
+.rsui-message-box__dismiss {
+    @apply text-text-secondary hover:text-text-primary;
+}
+
+.rsui-message-box__action {
+    @apply text-text-primary;
 }
 
+/*
+ * `-my-2` so the 40px hit target centres on the first 24px line rather than
+ * hanging 8px below it. Under `items-start` the button's own box starts at the
+ * padding edge, which put its glyph at y=36 against a title centred at y=28 —
+ * and, with an icon shown, two icons in the same row not lining up. The negative
+ * margin keeps the target size while claiming only 24px of layout height.
+ */
 .rsui-message-box__close {
-    @apply size-10;
+    @apply size-10 shrink-0 -my-2;
 }
 
+/*
+ * The glyph colour is set on the Icon itself (`secondary`), not here — the
+ * variant rules target the SVG child directly, so a colour on this button would
+ * lose to them.
+ *
+ * It was `disabled` before, which painted a working control in the disabled text
+ * colour — Grey-400, 2.41:1 on white — so it looked permanently greyed out and
+ * fell under the 3:1 WCAG 1.4.11 asks of a control. Grey-700 reads as quiet
+ * without reading as dead.
+ */
 .rsui-message-box__close-icon {
     @apply size-10 cursor-pointer rounded-lg flex items-center justify-center hover:bg-border-secondary transition duration-200;
     /* Reset native <button> chrome so it matches the prior inline affordance ... */

package/components/section_footer.css

@@ -17,3 +17,71 @@
     @apply flex-1;
 }
 
+/*
+ * The view-all sits in its own region so it can centre, rather than joining the
+ * right-aligned action row.
+ *
+ * `order-first md:order-last` keeps it trailing at both breakpoints. The footer
+ * is `flex-col-reverse` below `md`, so the last DOM child paints at the top —
+ * appending the region put the view-all *above* the actions and the content on
+ * mobile, which is the opposite of what every comment about it claims. Ordering
+ * it first puts it back at the bottom there, and `md:order-last` restores it to
+ * the end of the desktop row.
+ */
+.rsui-section-footer__view-all-region {
+    @apply flex items-center justify-center order-first md:order-last;
+}
+
+/*
+ * `flex-1` only when the view-all has the footer to itself, which is the case
+ * that wants centring. Applying it unconditionally made the region a second
+ * greedy sibling alongside `content-start`: the two split the row and squeezed
+ * the action buttons towards the middle instead of the right edge — measured at
+ * x=599 of 1265. With actions present the region stays content-sized and
+ * `justify-between` puts it at the end of the row where it belongs.
+ */
+.rsui-section-footer__view-all-region--full {
+    @apply flex-1 w-full;
+}
+
+/*
+ * The trailing "view all" link. Matches the "See all" treatment already used in
+ * section headers: `font-semibold text-sm` on the tertiary-button colour, no
+ * underline, no arrow. That pairing is what makes it read as an action without
+ * competing with the section's own type.
+ *
+ * Deliberately not LinkSlot, which sits at `font-medium`, carries an always-on
+ * underline rule, and pins a font size per variant — all three wrong for this.
+ * No `text-*` here either: the size comes from whatever encloses the footer, so
+ * the link sits a step below the section's own type wherever it lands rather than
+ * locking to one scale. The semibold is what makes it read as an action.
+ *
+ * Colour comes from `--color-button-tertiary` rather than a literal brand value,
+ * so it tracks whatever tertiary actions are doing. It is overridden per section
+ * variant below rather than hardcoded, because a brand-coloured link is
+ * invisible on a brand-coloured surface.
+ *
+ * `w-fit` so the link stays the width of its own text. Its region centres it, and
+ * an underline that ran the width of the footer would read as a rule rather than
+ * as part of the link.
+ */
+.rsui-section-footer__view-all {
+    @apply inline-flex w-fit items-center whitespace-nowrap;
+    @apply font-semibold no-underline cursor-pointer transition-colors;
+    @apply text-button-tertiary hover:text-button-tertiary-hover;
+    /* Underline on hover only: the resting state stays as clean as the header's
+       "See all", but the link still confirms itself as one under the pointer. */
+    @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;
+}
+
+/*
+ * No dark-surface override here, deliberately. Every plain Section variant is a
+ * light tint, so the tertiary colour reads on all nine. The one dark surface in
+ * the package is the slider's `--featured` (brand-600), where a brand link would
+ * be brand on brand — but `SectionSlider` renders no footer and does not forward
+ * Section's `#footer` slot, so no consumer can put this link there. A rule for it
+ * would be unreachable, untested, and would imply a capability that does not
+ * exist. Add it alongside a footer slot on the slider, if that is ever wanted.
+ */
+

package/components/section_slider.css

@@ -24,12 +24,314 @@
 
 .rsui-section-slider__action {
     @apply shrink-0 inline-flex items-center justify-center size-14 rounded-full no-underline transition-all disabled:opacity-50 disabled:text-grey-400 hover:cursor-pointer disabled:hover:cursor-default border border-grey-400 bg-transparent;
+    @apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-border-primary;
 }
 
+/*
+ * The trailing "view all" card. The element carries `rsui-card
+ * rsui-card--bordered` plus any `rsui-card--<variant>`, so radius, background,
+ * border colour and the transition all come from Card — including every
+ * variant's border colour, which is the point of composing rather than
+ * restating. This file adds only what Card has no opinion about.
+ *
+ * The dashed edge is the one deliberate departure, and it is what marks the card
+ * as an opening rather than content. It follows form_field_uploader.css, the
+ * package's only other dashed affordance. `section_slider.css` is imported after
+ * `card.css`, so this wins on source order at equal specificity.
+ *
+ * `hover:shadow-md` rather than a background change, mirroring
+ * `rsui-card--hoverable`: it reads the same on every variant, whereas shifting
+ * the background would fight whatever colour the variant just set.
+ *
+ * No `color` here on purpose. Card does not set one either — its text comes from
+ * whichever Section encloses it — and Tailwind's preflight already gives buttons
+ * `color: inherit`, so the card picks up the section the same way a real card
+ * does. Setting it explicitly produced the same pixels today but would have
+ * ignored a section that ever chose a different text colour.
+ *
+ * Height is not declared: the rail item is a flex container that stretches, so
+ * the shell takes its height from the tallest card in the track. A fixed height
+ * would go short or overhang the moment consumer cards changed.
+ *
+ * Width is a floor rather than a fixed value. The rail item has no intrinsic
+ * width — consumer cards supply their own — so `w-full` here would resolve
+ * against content and collapse to the label. `min-w-64` matches the common card
+ * width and still grows if the consumer puts something wider inside.
+ */
+.rsui-section-slider__view-all {
+    @apply min-w-64 items-center justify-center gap-3 border-dashed p-space-lg text-center;
+    @apply font-semibold;
+    @apply hover:cursor-pointer hover:shadow-md;
+    @apply focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-primary outline-hidden;
+}
+
+/*
+ * The `ai` variant is the exception: Card gives it an animated gradient, which is
+ * a lot of movement for a card that is meant to be an opening rather than a
+ * destination. Cleared so the section's own background — itself the ai gradient
+ * when the slider is in that variant — shows through instead.
+ *
+ * `bg-none` and not `bg-transparent`: Card paints this one with
+ * `background-image`, which a background-colour reset leaves untouched. That is
+ * also why the other variants need no rule here — theirs are background colours,
+ * and they are meant to stay.
+ *
+ * Card has no `--bordered.--ai` companion the way the other variants do, so the
+ * border would otherwise fall back to the base grey. Brand-500 matches the border
+ * the `--ai` section itself uses.
+ */
+.rsui-section-slider__view-all.rsui-card--ai {
+    @apply bg-none border-brand-500;
+}
+
+/*
+ * The icon slot, stacked above the label the way Empty stacks its image. Sizing
+ * belongs to whichever Icon component the consumer puts inside — those size
+ * their own SVG child.
+ *
+ * Colour, though, has to be taken back. Icon's variants pin the SVG to a fixed
+ * token (`--primary` is `text-text-primary`), which would leave the icon sitting
+ * still while the label darkens on hover, and dark on the brand-600 surface of
+ * `--featured` where the rest of the card has inverted. Forcing `currentColor`
+ * onto the SVG makes the icon inherit the button, so it moves and inverts with
+ * the label without the consumer having to pick a matching Icon variant.
+ *
+ * `IconCircleBackground` is excluded, though — it already carries a deliberate
+ * on-colour pairing, and forcing `currentColor` would put a dark glyph on its dark
+ * contrast-coloured circle.
+ *
+ * Both branches of the `:is()` need the guard. A bare `svg` alternative looks
+ * harmless but matches the heroicon inside a background icon just the same, and
+ * with the wrapper class in front the rule is (0,3,0) — above the (0,2,0) that
+ * paints the glyph — so it would win outright and defeat the exclusion this
+ * comment claims to make.
+ */
+.rsui-section-slider__view-all-icon {
+    @apply flex items-center justify-center;
+}
+
+.rsui-section-slider__view-all-icon :is(.rsui-icon:not(.rsui-icon--background) svg, .rsui-icon:not(.rsui-icon--background) > *) {
+    color: currentColor;
+}
+
+/*
+ * Card's tokens are built for a light surface, and this variant is brand-600, so
+ * they invert here — the same thing the header title and subtitle already do for
+ * `--featured`.
+ *
+ * `bg-transparent` is load-bearing, not tidying. `.rsui-card` paints
+ * `bg-background-primary`, which is white, and nothing else in this cascade
+ * resets it — inverting only the foreground leaves white text and a white dashed
+ * border on a white card, i.e. an invisible card on a brand-600 slider. The card
+ * has to sit on the brand surface for the inversion to mean anything.
+ */
+.rsui-section-slider--featured .rsui-section-slider__view-all {
+    @apply bg-transparent border-white/60 text-white/80;
+    @apply hover:border-white hover:bg-white/10 hover:text-white;
+    @apply focus-visible:ring-white;
+}
+
+/*
+ * Same reasoning on the `--ai` section, minus the inversion. That gradient is
+ * light enough for the default dark label to stay legible, so only the fill has
+ * to go — Card's white would otherwise sit on the gradient as a flat patch, which
+ * is the one place a ghost card should be showing what is behind it.
+ *
+ * `bg-transparent` and not `bg-none` here: the card's own background is a colour
+ * at this point, since `--ai` describes the section rather than the card. The
+ * `bg-none` rule above is for `viewAllVariant="ai"`, where Card paints a gradient
+ * via `background-image` instead.
+ */
+.rsui-section-slider--ai .rsui-section-slider__view-all {
+    @apply bg-transparent;
+    @apply hover:bg-white/40;
+}
+
+/*
+ * The `focus-visible` ring below is not decorative. Below `lg` this is a real
+ * scroll port, and Chrome can make scroll containers keyboard-focusable so they
+ * can be arrow-keyed — measured at 500px, this one is focusable with
+ * `outline-style: none`, i.e. a focus stop with no visible indicator (WCAG
+ * 2.4.7). At `lg` and up the track is `overflow-x-hidden`, which is not
+ * user-scrollable and so not focusable, and the rule never fires.
+ *
+ * `ring-inset` rather than an offset ring: the slider root is `overflow-x-hidden`
+ * with `px-0`, so the track sits flush against it and an outset ring would be
+ * clipped away on both edges — and clipped a second time by the mask in
+ * `--hover-actions` mode. Same reason card_group.css and form_field_date_range.css
+ * use it.
+ */
 .rsui-section-slider__container {
     @apply relative flex gap-x-3 lg:gap-x-6 overflow-x-auto lg:overflow-x-hidden focus:outline-hidden scroll-smooth snap-x snap-mandatory scroll-pl-space-lg;
+    @apply focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-primary;
+}
+
+/*
+ * Position announcements for screen readers. The rail is a list of cards, not a
+ * carousel, so there is no slide to name -- what a non-sighted user cannot
+ * recover is simply how far along the rail they now are.
+ */
+.rsui-section-slider__announcer {
+    @apply sr-only;
 }
 
 .rsui-section-slider__container::-webkit-scrollbar {
     @apply hidden;
 }
+
+/*
+ * Edge fades for `hover-actions`. With the arrows held back until hover, a
+ * resting rail has nothing at all to say it moves, and the peeking last card is
+ * doing that work alone. Fading the edge that has content behind it gives the
+ * rail a permanent affordance that costs no hover, no touch and no semantics.
+ *
+ * A mask rather than a gradient overlay, because the fade has to work over four
+ * different section backgrounds — default, `--featured` (brand-600) and `--ai`
+ * (itself a gradient). Colour-matching an overlay to a gradient is not possible;
+ * masking the content to transparent is background-agnostic and needs no variant
+ * of its own.
+ *
+ * Both widths rest at 0, which collapses the gradient to fully opaque, so the
+ * mask is inert until Vue adds a fade modifier. Not transitioned: the widths
+ * would need registering via @property to animate at all, and the switch happens
+ * mid-scroll where the movement already covers it.
+ */
+.rsui-section-slider__container {
+    --rsui-section-slider-fade-start: 0px;
+    --rsui-section-slider-fade-end: 0px;
+}
+
+.rsui-section-slider--hover-actions .rsui-section-slider__container {
+    mask-image: linear-gradient(
+        to right,
+        transparent 0,
+        black var(--rsui-section-slider-fade-start),
+        black calc(100% - var(--rsui-section-slider-fade-end)),
+        transparent 100%
+    );
+}
+
+.rsui-section-slider__container--fade-start {
+    --rsui-section-slider-fade-start: 3rem;
+}
+
+.rsui-section-slider__container--fade-end {
+    --rsui-section-slider-fade-end: 3rem;
+}
+
+/*
+ * Positioning context for the `hover-actions` overlay. Deliberately a wrapper
+ * around the track rather than the track itself: the container is the scroll
+ * port, so anything absolutely positioned inside it scrolls away with the cards.
+ */
+.rsui-section-slider__viewport {
+    @apply relative;
+}
+
+/*
+ * Overlay navigation layer — one full-bleed layer rather than two individually
+ * positioned buttons, so `justify-between` places the pair on the two edges and
+ * `items-center` centres them on the rail without any transform maths.
+ *
+ * The layer spans the cards, so it has to stay transparent to the pointer;
+ * `pointer-events-none` here with `pointer-events-auto` back on the buttons
+ * keeps the cards underneath clickable.
+ *
+ * Hidden below `lg` on purpose. Up to that breakpoint the track is
+ * `overflow-x-auto` and swipe already moves it, so arrows over the artwork would
+ * be covering content to duplicate a gesture the user already has.
+ */
+.rsui-section-slider__actions {
+    @apply hidden lg:flex absolute inset-0 z-10 items-center justify-between px-3 pointer-events-none;
+}
+
+/*
+ * Overlaid arrows sit on card artwork, so the header's transparent pill would
+ * leave the chevron competing with whatever is behind it. Give these ones a
+ * solid surface — scoped to the overlay so header arrows keep their existing
+ * look.
+ *
+ * This single-tone border does not *guarantee* 1.4.11 against arbitrary
+ * photography: its outer edge always has an unknown image beside it, so it fails
+ * on mid-tone imagery. It narrows the gap rather than closing it, helped by the
+ * fade behind the pill — though note the fade only covers the outer part of the
+ * pill's backdrop (the fade runs 0–3rem from the edge, the pill roughly
+ * 0.75–4.25rem), and only partially at that.
+ *
+ * A two-tone indicator would actually close it: two adjacent bands with 3:1
+ * against each other means at least one of them clears 3:1 against whatever is
+ * behind, whatever that turns out to be. Deliberately not done here — it is a
+ * visible design change to the control rather than a correctness fix, so it wants
+ * a decision rather than a commit.
+ */
+.rsui-section-slider__actions .rsui-section-slider__action {
+    @apply pointer-events-auto bg-background-primary border-grey-600 shadow-xl;
+}
+
+@media (hover: hover) {
+    /*
+     * Rest hidden, reveal on the rail. Opacity rather than `display`/`hidden` so
+     * the buttons keep their box (no reflow as they appear) and stay reachable
+     * by keyboard — a focusable control that cannot be seen fails WCAG 2.4.7,
+     * which is what `:focus-within` below is for. The base class already carries
+     * `transition-all`, so the fade needs nothing added here.
+     *
+     * Gated on `(hover: hover)`: from `lg` up the track is `overflow-x-hidden`,
+     * so these arrows are the only way to move the rail. A touch device at a
+     * desktop width — iPad in landscape, touchscreen laptop — has no swipe and
+     * no hover, and would be left with no way to navigate at all. Those devices
+     * keep the arrows on permanently.
+     */
+    .rsui-section-slider__actions .rsui-section-slider__action {
+        @apply opacity-0;
+    }
+
+    /*
+     * `:enabled` so only arrows that can actually move the rail come forward.
+     * In rail mode that tracks scroll position, so a resting rail shows no
+     * previous arrow at all rather than one pointing into nothing, and the pair
+     * disappears entirely when every card already fits. The button stays in the
+     * DOM and in the a11y tree as disabled, which tells a screen reader user
+     * "start of the rail" — something an unmounted button cannot do.
+     */
+    .rsui-section-slider__viewport:hover .rsui-section-slider__action:enabled,
+    .rsui-section-slider__viewport:focus-within .rsui-section-slider__action:enabled {
+        @apply opacity-100;
+    }
+
+    /*
+     * Escape hides the arrows again while the pointer is still on the rail —
+     * WCAG 1.4.13 wants hover-revealed content that obscures other content to be
+     * dismissable without moving the pointer, and these do sit over the cards.
+     *
+     * `:not(:focus-within)` because dismissal must not win over the focus reveal
+     * above. Without it, pressing Escape with the pointer on the rail and focus on
+     * an arrow hid a control that was still focused and still clickable — the
+     * exact 2.4.7 failure the reveal rule exists to prevent.
+     *
+     * `:enabled` carries no extra weight of its own here: this selector and the
+     * reveal above both compute to (0,4,0), so it only brings this level and the
+     * cascade decides on source order. That is why this block has to stay last
+     * inside the query.
+     */
+    .rsui-section-slider__viewport--navigation-dismissed:not(:focus-within):hover .rsui-section-slider__action:enabled {
+        @apply opacity-0;
+    }
+}
+
+/*
+ * Reduced motion. This rule covers swipe and keyboard scrolling, which never go
+ * through JavaScript. Arrow presses are handled separately in scrollToPosition,
+ * which passes an explicit `'instant'` — a scripted `behavior` other than `auto`
+ * overrides `scroll-behavior`, so the two paths do not overlap and neither is
+ * redundant.
+ */
+@media (prefers-reduced-motion: reduce) {
+    .rsui-section-slider__container {
+        scroll-behavior: auto;
+    }
+
+    .rsui-section-slider__action {
+        transition: none;
+    }
+}

package/components/switcher.css

@@ -15,6 +15,66 @@
     @apply w-full sm:w-fit;
 }
 
+/* Bordered — for a switcher on a surface that is not white. Opt in with the
+   `bordered` prop.
+
+   The track is `background-disabled` (Grey-25, #fcfcfc) and a secondary Section is
+   `background-secondary` (Grey-50, #fafafa): 2/255 apart, and the track is the
+   *lighter* of the two, so on a grey surface it does not read as a container at all.
+
+   A border rather than a darker fill, so the tonal well stays the same grey
+   everywhere it already works. Note it does add 2px to each axis, so a bordered
+   switcher no longer aligns exactly with an unbordered sibling.
+
+   `:not(--chips)` on both new modifiers: chips deliberately has no track
+   (`bg-transparent p-0 rounded-none`), so a border there is a square hairline box
+   hugging the chips with a clipped shadow — broken-looking rather than opt-out-able.
+   Excluded here rather than reset in the chips block, so no existing chips rule
+   changes. */
+.rsui-switcher--bordered:not(.rsui-switcher--chips) {
+    @apply border border-border-secondary;
+}
+
+/* The active item is already delineated by its own Grey-300 border
+   (`switcher_item.css`, `--active` sets `border-border-secondary` against a base of
+   `border-transparent`). Once the container gains a Grey-300 border too, the pill
+   edge and the track edge are the same colour and the nesting reads flat. The shadow
+   re-separates the two by depth rather than by adding a third colour.
+
+   `shadow-sm` rather than a raw `box-shadow`, which would be the only literal shadow
+   in the package — every other component uses a utility. */
+.rsui-switcher--bordered:not(.rsui-switcher--chips) .rsui-switcher-item--active {
+    @apply shadow-sm;
+}
+
+/* Inline — one row below `sm`, split between the options. Opt in with the `inline`
+   prop, and pair it with `full`: `inline` sets the direction, `full` gives it a row
+   to split. On its own the container is still `w-fit` and shrink-wraps.
+
+   Scoped to `max-sm` on purpose: at `sm` and above the default is already a row, so
+   there is nothing to change and nothing to accidentally break — `--full`'s `flex-1`
+   in particular is left entirely alone. Only the sub-`sm` stack is overridden.
+
+   Three declarations, all load-bearing:
+     - `w-auto` undoes `w-full` from `.rsui-switcher .rsui-switcher-item`, which would
+       otherwise make each option claim the full width of a row it is now sharing.
+       This works by source order at equal specificity (0,2,0), so this block must
+       stay BELOW that base item rule.
+     - `flex-1` is what actually splits the row between the options.
+     - `min-w-0` is what stops it clipping. Flex items floor at `min-width: auto`, and
+       the item is `whitespace-nowrap`, so without this they refuse to shrink below
+       their label, the row outgrows the `overflow-hidden` track, and options are cut
+       off with no scrollbar and no way to reach them — measured at 166px of a 360px
+       track lost with three long labels. `overflow-hidden` on the item keeps a long
+       label inside its own button rather than spilling over its neighbour. */
+.rsui-switcher--inline:not(.rsui-switcher--chips) {
+    @apply max-sm:flex-row max-sm:items-center;
+}
+
+.rsui-switcher--inline:not(.rsui-switcher--chips) .rsui-switcher-item {
+    @apply max-sm:w-auto max-sm:flex-1 max-sm:min-w-0 max-sm:overflow-hidden;
+}
+
 /* Chips variant — a filter chip set rather than a segmented control. Opt in with
    the `chips` prop; the default is untouched.
 

package/package.json

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