@redseed/redseed-ui-tailwindcss 7.55.0 → 7.57.0

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/stage_dial.css

@@ -53,6 +53,28 @@
     @apply absolute inset-[15%] flex items-center justify-center text-center;
 }
 
+/* On a coloured or dark surface. The centre content has no colour of its own and
+   inherits the page ink, which on a dark band is near-invisible — this is the
+   only thing the variant needs to change. Same mechanism as
+   .rsui-body-text--on-color, including the child selector, since the slot
+   usually holds its own elements.
+
+   The track is deliberately NOT changed, because measuring said it did not need
+   to be. Grey-400 against the two tonal bands:
+
+     on Journey Green 800 (#0a4c38)   4.13:1
+     on Deep Teal 700     (#0c3035)   5.84:1
+
+   both clear of the 3:1 WCAG 1.4.11 asks of a non-text graphic. The obvious
+   "improvement" would have made it worse: a translucent white track, which is
+   what this looked like in the mock, measures 1.64:1 at 18% and 2.61:1 at 35%
+   — both failures. If a consumer wants the track tinted to their band, that is
+   a --rsui-stage-dial-* style override, not a default. */
+.rsui-stage-dial--on-color .rsui-stage-dial__content {
+    @apply text-text-on-color;
+    @apply *:text-text-on-color;
+}
+
 @media (prefers-reduced-motion: reduce) {
     .rsui-stage-dial--animate .rsui-stage-dial__fill {
         transition: none;

package/components/switcher.css

@@ -14,3 +14,109 @@
 .rsui-switcher .rsui-switcher-item {
     @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.
+
+   Two differences, and both are the reason it exists:
+     1. No tonal container, so the chips sit directly on the page rather than in
+        a grey well.
+     2. One row that scrolls sideways when it runs out of width, instead of
+        stacking. The default stacks below `sm` — documented and deliberate for a
+        segmented control — but a stacking chip set makes its container grow by an
+        unpredictable number of lines, which is what this avoids.
+
+   Every rule below has to out-specify a same-specificity rule above it, so this
+   block must stay last in the file. */
+.rsui-switcher--chips {
+    @apply w-full flex-row items-center flex-nowrap gap-2;
+    @apply bg-transparent p-0 rounded-none;
+
+    /* The default is overflow-hidden; this row is meant to scroll. Scrollbar
+       hidden to match .rsui-tab-slider, which already does exactly this. */
+    @apply overflow-x-auto;
+    scrollbar-width: none;
+}
+
+.rsui-switcher--chips::-webkit-scrollbar {
+    display: none;
+}
+
+/* Overrides `w-full sm:w-fit` above: a chip is sized by its own label at every
+   width, never stretched to fill the row. */
+.rsui-switcher--chips .rsui-switcher-item {
+    @apply w-fit rounded-full;
+    @apply bg-background-primary text-text-secondary border-border-primary;
+
+    /* 44px, so a chip clears the Apple HIG touch target on a phone. The default
+       item computes to 42px and is deliberately left alone. */
+    @apply min-h-11;
+}
+
+.rsui-switcher--chips .rsui-switcher-item--active {
+    @apply bg-background-primary-contrast text-text-on-color border-transparent;
+}
+
+.rsui-switcher--chips .rsui-switcher-item--disabled {
+    @apply bg-background-disabled text-text-disabled border-transparent;
+}

package/components/switcher_item.css

@@ -1,7 +1,24 @@
+/* The item is a native <button role="tab"> so it is keyboard operable and announces as a
+   tab (it used to be a click-handled <div>, which no keyboard could reach). These plain
+   declarations strip the UA button chrome so the visual design is unchanged — written out
+   rather than assumed from Tailwind preflight, because RSUI's index.css does not import
+   Tailwind itself and the consuming app may not ship preflight. */
 .rsui-switcher-item {
+    appearance: none;
+    background: none;
+    margin: 0;
+    border: 0 solid transparent;
+    font: inherit;
+    color: inherit;
+
     @apply h-fit inline-flex shrink-0 items-center justify-center select-none outline-hidden whitespace-nowrap will-change-transform cursor-pointer;
     @apply font-semibold gap-2 rounded-lg border border-transparent transition;
     @apply text-base px-3 py-2;
+
+    /* The class list above sets outline-hidden, which previously left the item with no focus
+       indicator at all once it became focusable. Drawn inset because .rsui-switcher is
+       overflow-hidden and would clip an offset ring. */
+    @apply focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-primary;
 }
 
 .rsui-switcher-item--active {
@@ -16,6 +33,8 @@
     @apply size-6;
 }
 
+/* No ml-space-xs here: the parent is a flex row that already supplies gap-space-xs, so the
+   margin stacked on top of it and the badge sat 16px from its label instead of 8px. */
 .rsui-switcher-item__badge {
-    @apply ml-space-xs flex items-center;
-}
+    @apply flex items-center;
+}

package/components/tab_slider_item.css

@@ -1,7 +1,26 @@
+/* The item is a native <button role="tab"> so it is keyboard operable and announces as a
+   tab (it used to be a click-handled <div>, which no keyboard could reach). These plain
+   declarations strip the UA button chrome so the visual design is byte-for-byte unchanged.
+   They are written out rather than assumed from Tailwind preflight because RSUI's index.css
+   does not import Tailwind itself — the consuming app does, and may not ship preflight.
+   The border reset matters most: the @apply below sets only `border-b-2`, so without an
+   all-sides width of 0 the UA's default `medium outset` border would remain on the other
+   three sides and widen every tab. */
 .rsui-tab-slider-item {
+    appearance: none;
+    background: none;
+    margin: 0;
+    border: 0 solid transparent;
+    font: inherit;
+    color: inherit;
+
     @apply inline-flex shrink-0 items-center justify-center select-none cursor-pointer whitespace-nowrap;
     @apply text-base px-4 py-3 gap-2 border-b-2 border-transparent -mb-px;
     @apply text-text-secondary;
+
+    /* Focus is drawn inside the box: .rsui-tab-slider is an overflow-x-auto scroller, so an
+       offset ring on the first or last tab would be clipped by it. */
+    @apply outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-primary;
 }
 
 .rsui-tab-slider-item--active {
@@ -16,6 +35,8 @@
     @apply size-5;
 }
 
+/* No ml-space-xs here: the parent is a flex row that already supplies gap-space-xs, so the
+   margin stacked on top of it and the badge sat 16px from its label instead of 8px. */
 .rsui-tab-slider-item__badge {
-    @apply ml-space-xs flex items-center;
+    @apply flex items-center;
 }

package/components.css

@@ -54,7 +54,6 @@ Please be careful when adding new components and updating the order.
 @import './components/form_wrapper_build.css';
 @import './components/form_wrapper_lms.css';
 @import './components/grid_container.css';
-@import './components/hero_section.css';
 @import './components/icon.css';
 @import './components/image.css';
 @import './components/image_16by9.css';

package/package.json

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

package/tokens.css

@@ -12,7 +12,11 @@
     --color-text-warning: #b54708;
     --color-text-error: #b42318;
     --color-text-info: #0077cc;
-    --color-text-ai: var(--Colors-Warm-Mauve-600);
+    /* 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,
+       Button AI, the AI body-text modifier and the AI icon treatments. */
+    --color-text-ai: var(--Colors-Warm-Mauve-800);
     --color-text-on-color: var(--Colors-Base-white);
 
     --color-background-primary: var(--Colors-Base-white);

package/components/hero_section.css

@@ -1,32 +0,0 @@
-.rsui-hero-section {
-    @apply rounded-xl px-5 py-6 flex flex-col gap-4 md:gap-6 relative overflow-hidden bg-text-primary text-text-on-color;
-}
-
-.rsui-hero-section::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-size: auto;
-    background-position: right center;
-    background-repeat: no-repeat;
-    opacity: 1;
-    z-index: 0;
-}
-
-.rsui-hero-section > * {
-    position: relative;
-    z-index: 1;
-}
-
-.rsui-hero-section__cards {
-    @apply grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6;
-}
-
-.rsui-hero-section__cards--hidden {
-    @apply hidden;
-}
-
-.rsui-hero-section__content--hidden {
-    @apply hidden;
-}
-