@redseed/redseed-ui-tailwindcss 7.56.0 → 7.58.0

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_header.css

@@ -1,6 +1,7 @@
 .rsui-section-header {
-    @apply flex flex-col gap-x-space-sm gap-y-space-lg transition-all;
+    @apply flex flex-col gap-x-space-md gap-y-space-md transition-all;
     @apply md:flex-row md:justify-between md:items-center;
+    @apply border-b border-transparent;
 }
 
 /* overflow-hidden guards against a useResponsiveWidth feedback loop (mobile
@@ -11,22 +12,40 @@
     @apply overflow-hidden;
 }
 
+/* The --divider class was being set by SectionHeader.vue with no rule behind it, so
+   showDivider did nothing. Implemented the way CardHeader does it — a transparent
+   bottom border on the base, coloured here — and the prop's default flips to false in
+   the same change, so every consumer's appearance is unchanged (they saw no rule
+   before and see none now) while the prop starts working for anyone who opts in.
+   Brand-wise a hairline between sections is right; a box around them is not. */
+.rsui-section-header--divider {
+    @apply border-border-primary;
+}
+
 .rsui-section-header--clickable {
     @apply cursor-pointer;
 }
 
 .rsui-section-header__header {
-    @apply flex-1 min-w-0 flex justify-between items-start gap-x-space-sm;
+    @apply flex-1 min-w-0 flex justify-between items-start gap-x-space-md;
 }
 
 .rsui-section-header__icon {
     @apply flex items-center justify-center;
 }
 
+/* No row-gap: one value cannot serve both a title/badge row and a title/subtitle pair.
+   The subtitle carries its own margin instead, which also means an absent subtitle
+   leaves no gap behind. Same structure as .rsui-card-header__text. */
 .rsui-section-header__text {
-    @apply flex-1 flex flex-col gap-y-space-xs;
+    @apply flex-1 flex flex-col;
 }
 
+/* An optical nudge, not spacing — which is why it stays a raw 4px rather than being
+   rounded onto the 8px rhythm. It lines the title's cap height up with the button text
+   beside it; the correct value is whatever makes those two agree, and it is not a gap
+   between two elements. Same category as the control offsets in checkbox_card and
+   card_group, which are also deliberately raw. */
 .rsui-section-header__text--with-toolbar {
     @apply pt-1;
 }
@@ -56,12 +75,35 @@
    from inside the header would silently override a size prop the consumer passed. The stories
    demonstrate the `sm` pairing.
 
-   TITLE SIZE: text-3xl from lg up. At a flat text-2xl the title box was 32px while even an sm
-   button is 38px, so the heading never led its own actions. Responsive rather than flat, and
-   matching how PageHeader scales, because mobile stacks the actions anyway (see
-   __actions-mobile) and the imbalance only really shows on wide screens. */
+   BADGE SIZE: a badge beside the title belongs at `xs`. Measured against the Header 4
+   title box (26px): the `md` badge is 34px — 131% of it — and `sm`, which is Badge's
+   DEFAULT, is 26px, exactly 100%. Either reads as competing with the heading rather than
+   labelling it. `xs` is 18px, 69%. Like ACTION SIZE above this is guidance, not enforced:
+   scoping a size from inside the header would silently override a size prop the consumer
+   passed, and CSS cannot tell Badge's default `sm` from an explicit one. The stories
+   demonstrate the pairing.
+
+   Worth knowing that `sm` being the default makes `<Badge>` with no size 100% of a
+   Header 4 title box anywhere it sits beside one — CardHeader included. That is a
+   Badge-level question rather than something to patch per header.
+
+   TITLE SIZE: brand Header 4 (20/130%) below lg, Header 3 (28/120%) from lg up. It was
+   text-2xl -> text-3xl, which is 24 -> 30 and neither is a step on the scale at all
+   (16 / 20 / 28 / 40 / 64).
+
+   Responsive rather than flat is kept deliberately, and so is the reason: mobile stacks
+   the actions (see __actions-mobile) so the title does not have to out-weigh them there,
+   while on a wide screen it sits beside them and does. Read the note below before
+   flattening this.
+
+   Honest limit: the original concern was that a 32px title box lost to a 38px sm button.
+   28px at 120% is a 34px box, so it is better but not resolved — a title that decisively
+   leads an sm button needs Header 2 (40px), which is PageHeader's step and would compete
+   with it. The alternative is smaller action buttons. That is a design call, flagged
+   rather than taken here. */
 .rsui-section-header__title-text {
-    @apply text-2xl lg:text-3xl font-bold line-clamp-2 md:line-clamp-1 text-text-primary;
+    @apply text-xl leading-[1.3] font-bold line-clamp-2 md:line-clamp-1 text-text-primary;
+    @apply lg:text-[1.75rem] lg:leading-[1.2];
     /* Reset heading UA margins so an <h1>-<h6> title matches the previous <div> */
     /* min-w-0 lets the title shrink and truncate first; the badge is shrink-0 so */
     /* it keeps its size. No flex-1 — a growing title pushes the See-all badge up */
@@ -80,18 +122,23 @@
     @apply flex items-center shrink-0;
 }
 
+/* TIGHT PAIR — 4px up to the title, deliberately off the brand's 8px rhythm. See the
+   note above .rsui-card-header__subtitle in card_header.css: line-height already
+   contributes half-leading at both ends, so 8px renders as roughly 14px and the pair
+   reads as two separate lines rather than one thing and its qualifier. */
 .rsui-section-header__subtitle {
+    @apply mt-space-xxs;
     @apply text-sm text-text-secondary;
 }
 
 .rsui-section-header__toolbar {
-    @apply flex gap-space-sm md:items-center justify-end;
+    @apply flex gap-space-xs md:items-center justify-end;
 }
 
 .rsui-section-header__actions-desktop {
-    @apply flex gap-space-sm items-center;
+    @apply flex gap-space-xs items-center;
 }
 
 .rsui-section-header__actions-mobile {
-    @apply flex flex-wrap gap-space-sm items-center justify-start;
+    @apply flex flex-wrap gap-space-xs items-center justify-start;
 }

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.58.0",
     "description": "RedSeed UI Tailwindcss",
     "main": "index.js",
     "style": "index.css",

package/tokens.css

@@ -49,6 +49,13 @@
     --color-background-ai-from: #ebe0fa;
     --color-background-ai-to: var(--Colors-Background-AI-2); /* v1 defines ai-from only; ai-to kept as warm counterpart */
     --color-background-ai-contrast: var(--Colors-Warm-Mauve-600);
+    /* The AI family at full strength, for a BOLD surface rather than a light tint.
+       ai-from/ai-to are a pale lilac wash; these are the dark end of the same ramp,
+       for a card that has to carry white type. On-ramp on purpose — the /home/v2
+       mock used #56374c/#3b2635, which are not Warm Mauve values. */
+    --color-background-ai-bold-from: var(--Colors-Warm-Mauve-900);
+    --color-background-ai-bold-via: var(--Colors-Warm-Mauve-950);
+    --color-background-ai-bold-to: var(--Colors-Grey-950);
     --color-background-ai-invert: var(--Colors-Warm-Mauve-200);
 
     --color-border-primary: var(--Colors-Grey-400);