@redseed/redseed-ui-vue3 8.60.0 → 8.62.0

package/docs/00-component-overview.md

@@ -7,7 +7,7 @@ A comprehensive Vue 3 component library designed for building modern, accessible
 ### 1. [Layout Components](./01-layout-components.md)
 Structural components for organizing page content, including layouts, headers, sections, and page structure.
 
-**Key Components:** SingleColumnLayout, TwoColumnLayout, PageHeader, SectionHeader, HeroSection
+**Key Components:** SingleColumnLayout, TwoColumnLayout, PageHeader, SectionHeader
 
 ### 2. [Button Components](./02-button-components.md)
 Interactive elements for user actions, with various styles and grouping options.

package/docs/01-layout-components.md

@@ -116,34 +116,6 @@ Layout components provide the structural foundation for organizing content on pa
 </template>
 ```
 
-### HeroSection
-**When to use:** For landing pages, marketing pages, or any page that needs a prominent introduction section with header content and optional button cards.
-**Implementation:**
-```vue
-<template>
-  <HeroSection>
-    <template #header>
-      <SectionHeader>
-        Section header
-        <template #subtitle>
-          Section header subtitle
-        </template>
-      </SectionHeader>
-    </template>
-
-    <ButtonCard>
-      <template #icon>
-        <FaceSmileIcon />
-      </template>
-      Button card title
-      <template #supporting-text>
-        Supporting text
-      </template>
-    </ButtonCard>
-  </HeroSection>
-</template>
-```
-
 ## Best Practices
 
 1. **Consistent Structure:** Use layout components consistently across your application to maintain visual hierarchy and user experience.

package/docs/08-media-components.md

@@ -147,19 +147,24 @@ Media components provide consistent ways to display images, logos, and other vis
 
 ## Common Use Cases
 
-### Hero Section with Image
+### Banner Section with Image
 ```vue
 <template>
-  <HeroSection 
-    title="Welcome to Our Platform"
-    subtitle="The best solution for your needs"
-  >
-    <Image16By9 
-      :src="heroImageUrl" 
-      :alt="heroImageAlt"
-      class="hero-image"
+  <Section>
+    <template #header>
+      <SectionHeader>
+        Welcome to Our Platform
+        <template #subtitle>
+          The best solution for your needs
+        </template>
+      </SectionHeader>
+    </template>
+
+    <Image16By9
+      :src="bannerImageUrl"
+      :alt="bannerImageAlt"
     />
-  </HeroSection>
+  </Section>
 </template>
 ```
 

package/index.js

@@ -42,6 +42,7 @@ export * from './src/components/Section'
 export * from './src/components/Skeleton'
 export * from './src/components/Social'
 export * from './src/components/Sorting'
+export * from './src/components/StageDial'
 export * from './src/components/Switcher'
 export * from './src/components/TabSlider'
 export * from './src/components/Table'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.60.0",
+    "version": "8.62.0",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/Card/MetricCard.vue

@@ -28,12 +28,27 @@ const props = defineProps({
         type: Boolean,
         default: null,
     },
+    // Puts the tile on a tonal surface with ink to match, using the same named set as
+    // PageHeader's `tone` so a tile inside a toned header can be given the matching name.
+    // Named tones rather than a colour because white-labelling means the component cannot
+    // assume light-on-dark: surface, ink, muted ink and rule move together.
+    //
+    // Not combinable with Card's semantic variants (brand, success, …) — pick one.
+    tone: {
+        type: String,
+        default: null,
+        validator: value => ['green', 'teal', 'light'].includes(value),
+    },
 })
 </script>
 
 <template>
 <Card class="rsui-metric-card"
-    :class="{ 'rsui-metric-card--active': active === true }"
+    :class="{
+        'rsui-metric-card--active': active === true,
+        'rsui-metric-card--toned': !!props.tone,
+        [`rsui-metric-card--tone-${props.tone}`]: !!props.tone,
+    }"
     :clickable="props.clickable"
     :hoverable="props.hoverable"
     :pressed="active"

package/src/components/Form/FormFieldsLogin.vue

@@ -22,64 +22,66 @@ const props = defineProps({
 const formRef = ref(props.form)
 </script>
 <template>
-<slot name="top-fields" :formRef="formRef"></slot>
+<div class="rsui-form-fields-login">
+    <slot name="top-fields" :formRef="formRef"></slot>
 
-<slot name="email-username" :formRef="formRef">
-    <FormFieldEmail
-        v-model="formRef.email"
-        id="email"
-        name="email"
+    <slot name="email-username" :formRef="formRef">
+        <FormFieldEmail
+            v-model="formRef.email"
+            id="email"
+            name="email"
+        >
+            <template #label>
+                <slot name="email-label">
+                    Email
+                </slot>
+            </template>
+
+            <template #error v-if="formRef.errors.email">
+                {{ formRef.errors.email }}
+            </template>
+        </FormFieldEmail>
+    </slot>
+
+    <FormFieldPassword
+        v-model="formRef.password"
+        id="password"
+        name="password"
     >
         <template #label>
-            <slot name="email-label">
-                Email
+            <slot name="password-label">
+                Password
             </slot>
         </template>
 
-        <template #error v-if="formRef.errors.email">
-            {{ formRef.errors.email }}
+        <template #error v-if="formRef.errors.password">
+            {{ formRef.errors.password }}
         </template>
-    </FormFieldEmail>
-</slot>
-
-<FormFieldPassword
-    v-model="formRef.password"
-    id="password"
-    name="password"
->
-    <template #label>
-        <slot name="password-label">
-            Password
-        </slot>
-    </template>
+    </FormFieldPassword>
 
-    <template #error v-if="formRef.errors.password">
-        {{ formRef.errors.password }}
-    </template>
-</FormFieldPassword>
+    <slot name="bottom-fields" :formRef="formRef"></slot>
 
-<slot name="bottom-fields" :formRef="formRef"></slot>
-
-<FormFieldSlot v-if="$slots.forgot"
-    class="rsui-form-field-forgot"
->
-    <slot name="forgot"></slot>
-</FormFieldSlot>
+    <FormFieldSlot v-if="$slots.forgot"
+        class="rsui-form-field-forgot"
+    >
+        <slot name="forgot"></slot>
+    </FormFieldSlot>
 
-<slot name="submit"
-    :formRef="formRef"
->
-    <ButtonPrimaryFull lg
-        :disabled="form.processing"
-        type="submit"
+    <slot name="submit"
+        :formRef="formRef"
     >
-        <slot name="submit-label">
-            Log in
-        </slot>
-    </ButtonPrimaryFull>
-</slot>
+        <ButtonPrimaryFull lg
+            :disabled="form.processing"
+            type="submit"
+        >
+            <slot name="submit-label">
+                Log in
+            </slot>
+        </ButtonPrimaryFull>
+    </slot>
 
-<div v-if="$slots.signup" class="rsui-form-login__signup">
-    <slot name="signup"></slot>
+    <div v-if="$slots.signup" class="rsui-form-login__signup">
+        <slot name="signup"></slot>
+    </div>
 </div>
 </template>

package/src/components/Form/FormFieldsRegister.vue

@@ -25,93 +25,95 @@ const props = defineProps({
 const formRef = ref(props.form)
 </script>
 <template>
-<slot name="top-fields" :formRef="formRef"></slot>
+<div class="rsui-form-fields-register">
+    <slot name="top-fields" :formRef="formRef"></slot>
 
-<slot name="name-fields"
-    :formRef="formRef"
->
-    <FormFieldText
-        v-model="formRef.name"
-        id="name"
-        name="name"
+    <slot name="name-fields"
+        :formRef="formRef"
+    >
+        <FormFieldText
+            v-model="formRef.name"
+            id="name"
+            name="name"
+        >
+            <template #label>
+                <slot name="name-label">
+                    Name
+                </slot>
+            </template>
+
+            <template #error v-if="formRef.errors.name">
+                {{ formRef.errors.name }}
+            </template>
+        </FormFieldText>
+    </slot>
+
+    <FormFieldEmail
+        v-model="formRef.email"
+        id="email"
+        name="email"
     >
         <template #label>
-            <slot name="name-label">
-                Name
+            <slot name="email-label">
+                Email
             </slot>
         </template>
 
-        <template #error v-if="formRef.errors.name">
-            {{ formRef.errors.name }}
+        <template #error v-if="formRef.errors.email">
+            {{ formRef.errors.email }}
         </template>
-    </FormFieldText>
-</slot>
-
-<FormFieldEmail
-    v-model="formRef.email"
-    id="email"
-    name="email"
->
-    <template #label>
-        <slot name="email-label">
-            Email
-        </slot>
-    </template>
+    </FormFieldEmail>
 
-    <template #error v-if="formRef.errors.email">
-        {{ formRef.errors.email }}
-    </template>
-</FormFieldEmail>
-
-<FormFieldPasswordToggle
-    v-model="formRef.password"
-    id="password"
-    name="password"
->
-    <template #label>
-        <slot name="password-label">
-            Password
-        </slot>
-    </template>
+    <FormFieldPasswordToggle
+        v-model="formRef.password"
+        id="password"
+        name="password"
+    >
+        <template #label>
+            <slot name="password-label">
+                Password
+            </slot>
+        </template>
 
-    <template #error v-if="formRef.errors.password">
-        {{ formRef.errors.password }}
-    </template>
-</FormFieldPasswordToggle>
+        <template #error v-if="formRef.errors.password">
+            {{ formRef.errors.password }}
+        </template>
+    </FormFieldPasswordToggle>
 
-<slot name="bottom-fields" :formRef="formRef"></slot>
+    <slot name="bottom-fields" :formRef="formRef"></slot>
 
-<FormFieldCheckbox
-    v-if="$slots.terms"
-    v-model="formRef.terms"
-    id="terms"
-    name="terms"
->
-    <template #label>
-        <slot name="terms"></slot>
-    </template>
+    <FormFieldCheckbox
+        v-if="$slots.terms"
+        v-model="formRef.terms"
+        id="terms"
+        name="terms"
+    >
+        <template #label>
+            <slot name="terms"></slot>
+        </template>
 
-    <template #error v-if="formRef.errors.terms">
-        {{ formRef.errors.terms }}
-    </template>
-</FormFieldCheckbox>
+        <template #error v-if="formRef.errors.terms">
+            {{ formRef.errors.terms }}
+        </template>
+    </FormFieldCheckbox>
 
-<slot name="recaptcha" :formRef="formRef"></slot>
+    <slot name="recaptcha" :formRef="formRef"></slot>
 
-<slot name="submit"
-    :formRef="formRef"
->
-    <ButtonPrimaryFull lg
-        :disabled="form.processing"
-        type="submit"
+    <slot name="submit"
+        :formRef="formRef"
     >
-        <slot name="submit-label">
-            Register
-        </slot>
-    </ButtonPrimaryFull>
-</slot>
+        <ButtonPrimaryFull lg
+            :disabled="form.processing"
+            type="submit"
+        >
+            <slot name="submit-label">
+                Register
+            </slot>
+        </ButtonPrimaryFull>
+    </slot>
 
-<div v-if="$slots.signin" class="rsui-form-register__signin">
-    <slot name="signin"></slot>
+    <div v-if="$slots.signin" class="rsui-form-register__signin">
+        <slot name="signin"></slot>
+    </div>
 </div>
 </template>

package/src/components/Layout/PageHeader.vue

@@ -8,6 +8,18 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    // Puts the header on a tonal band and flips its ink to match. Named tones rather than a
+    // background colour, because white-labelling means the component cannot assume
+    // light-on-dark: hand it a colour alone and a client who picks a light one gets white
+    // text on white. Background, ink, muted ink and rule move together as a set.
+    //
+    // A toned header supplies its own padding, so place it outside the page's content
+    // gutter and let the band bleed. Omit the prop and nothing changes.
+    tone: {
+        type: String,
+        default: null,
+        validator: value => ['green', 'teal', 'light'].includes(value),
+    },
 })
 
 const showMetaModal = ref(false)
@@ -16,6 +28,8 @@ const pageHeaderClass = computed(() => [
     'rsui-page-header',
     {
         'rsui-page-header--profile': props.profile,
+        'rsui-page-header--toned': !!props.tone,
+        [`rsui-page-header--tone-${props.tone}`]: !!props.tone,
     },
 ])
 </script>

package/src/components/List/ListItem.vue

@@ -17,6 +17,29 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    // Draws a coloured rail down the leading edge, so a list of mixed kinds can be scanned
+    // by colour. Semantic names rather than brand ones, matching MessageBox's vocabulary —
+    // the rail is decoration, so it only has to clear WCAG 1.4.11 at 3:1.
+    accent: {
+        type: String,
+        default: null,
+        validator: value => ['warning', 'info', 'success', 'error', 'neutral'].includes(value),
+    },
+    // Keeps meta and description rendered at every width. They are dropped below 480px by
+    // default, which is right for a dense list but wrong for a row whose second line carries
+    // the detail that makes it actionable.
+    alwaysShowBody: {
+        type: Boolean,
+        default: false,
+    },
+    // Size of the default action button. Defaults to the xs it has always used, which
+    // measures 34px. `lg` is the first size that clears the 44px touch target a phone
+    // wants — measured 46px; `md` is 42px and does not.
+    actionSize: {
+        type: String,
+        default: 'xs',
+        validator: value => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value),
+    },
 })
 
 const listItemElement = ref(null)
@@ -28,7 +51,7 @@ const isWide = computed(() => !!responsiveWidth.value.specific)
 const slots = useSlots()
 
 const shouldShowBody = computed(() => {
-    return isWide.value && (slots.meta || slots.description)
+    return (isWide.value || props.alwaysShowBody) && (slots.meta || slots.description)
 })
 
 const listItemClass = computed(() => [
@@ -37,6 +60,8 @@ const listItemClass = computed(() => [
         'rsui-list-item--clickable': props.clickable,
         'rsui-list-item--avatar': props.avatar,
         'rsui-list-item--wide': isWide.value,
+        'rsui-list-item--accented': !!props.accent,
+        [`rsui-list-item--accent-${props.accent}`]: !!props.accent,
     }
 ])
 
@@ -75,6 +100,15 @@ function clickItem(event) {
         The peer class is used to show hover effect on the whole item with the bg div.
     -->
     <div class="rsui-list-item__header peer">
+        <!--
+            The icon sits inline at the start of the row, unlike the avatar below, which
+            hangs outside the row box on a negative offset. Two different jobs: an avatar
+            identifies a person, an icon classifies the row, so they are separate slots
+            and can be used together.
+        -->
+        <div v-if="$slots.icon" class="rsui-list-item__icon" aria-hidden="true">
+            <slot name="icon"></slot>
+        </div>
         <div v-if="avatar" class="rsui-list-item__avatar">
             <slot name="avatar">
                 <div class="rsui-list-item__avatar-placeholder">
@@ -92,7 +126,14 @@ function clickItem(event) {
         </div>
         <div v-if="action" class="rsui-list-item__action">
             <slot name="action" :clickAction="clickAction">
-                <ButtonTertiary xs @click="clickAction">
+                <ButtonTertiary
+                    :xs="props.actionSize === 'xs'"
+                    :sm="props.actionSize === 'sm'"
+                    :md="props.actionSize === 'md'"
+                    :lg="props.actionSize === 'lg'"
+                    :xl="props.actionSize === 'xl'"
+                    @click="clickAction"
+                >
                     <slot name="action-label">Action</slot>
                 </ButtonTertiary>
             </slot>

package/src/components/MessageBox/MessageBox.vue

@@ -19,7 +19,7 @@ const props = defineProps({
     variant: {
         type: String,
         default: 'default',
-        validator: (value) => ['default', 'info', 'success', 'warning', 'error'].includes(value)
+        validator: (value) => ['default', 'info', 'success', 'warning', 'error', 'ai'].includes(value)
     }
 })
 
@@ -34,6 +34,10 @@ const isClosed = ref(props.closed)
  * `default` variant is a plain container, not a status message, so it gets no
  * live role (avoids announcing arbitrary static content). Both roles carry an
  * implicit aria-live, so no separate attribute is needed.
+ *
+ * `ai` gets no live role either, and deliberately: an AI insight is content the
+ * reader chooses to read, not a status change. Announcing one on mount would
+ * interrupt for something nobody asked about.
  */
 const liveRole = computed(() => {
     if (props.variant === 'error') return 'alert'

package/src/components/Section/SectionHeader.vue

@@ -140,7 +140,10 @@ const titleTag = computed(() => props.headingLevel ? `h${props.headingLevel}` :
                 <slot name="more-actions"
                     :handleMoreActionsClick="handleMoreActionsClick"
                 >
-                    <ButtonTertiary @click="handleMoreActionsClick">
+                    <!-- sm, not the md default: this is the header's own overflow control, so it
+                         follows the same action sizing the header documents and the stories use.
+                         Left md it stood 42px against a 36px title and 38px sibling actions. -->
+                    <ButtonTertiary sm @click="handleMoreActionsClick">
                         <slot name="more-actions-label">
                             <Icon>
                                 <EllipsisVerticalIcon />

package/src/components/Section/index.js

@@ -1,4 +1,3 @@
-import HeroSection from './HeroSection.vue'
 import Section from './Section.vue'
 import SectionFooter from './SectionFooter.vue'
 import SectionHeader from './SectionHeader.vue'
@@ -6,7 +5,6 @@ import SectionSlider from './SectionSlider.vue'
 import SectionSliderItem from './SectionSliderItem.vue'
 
 export {
-    HeroSection,
     Section,
     SectionFooter,
     SectionHeader,

package/src/components/StageDial/StageDial.vue

@@ -0,0 +1,279 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+
+// A circular stage indicator built from DISCRETE segments — one per named stage,
+// filled up to the stage reached. Deliberately not ProgressCircle: a continuous
+// ring filled two-thirds reads as "67%", where three separate segments with two
+// filled reads as "the second of three named stages". For anything describing
+// capability or maturity rather than completion, the continuous version turns a
+// developmental stage into a score, which is the whole thing this avoids.
+const props = defineProps({
+    // Ordered stage labels, lowest first (e.g. ['Emerging', 'Developing', 'Strong']).
+    stages: {
+        type: Array,
+        default: () => [],
+    },
+    // The stage reached — fills every segment up to and including it. Matched
+    // against `stages` case-insensitively and trimmed, so both 'Developing' and
+    // 'developing' resolve. No match (or an empty value) fills nothing, which is
+    // the honest rendering for "no stage yet" rather than defaulting to stage one.
+    current: {
+        type: String,
+        default: '',
+    },
+    // The name of a RUNTIME CSS custom property to use as the accent for the
+    // filled segments — applied as `var(--<color>, <neutral>)`, same convention
+    // as Pill's `color` prop. Pass a real runtime theme variable, e.g. the
+    // consuming app's palette (`color7` → `var(--color7)`). NOTE: RSUI's own
+    // Tailwind `@theme` color tokens (e.g. `--color-brand-500`) are inlined into
+    // utilities, not exposed as runtime vars, so they will NOT resolve here. An
+    // UNRESOLVABLE (undefined) token degrades to a neutral grey rather than an
+    // invisible dial. Optional — falls back to a neutral accent when omitted, so
+    // RSUI stays theme-agnostic.
+    color: {
+        type: String,
+        default: '',
+    },
+    // Arc degrees. The default 270 leaves a 90° gap at the bottom for a label,
+    // and the empty span is always centred on the bottom whatever the sweep.
+    sweep: {
+        type: Number,
+        default: 270,
+    },
+    // Set when the dial sits on a coloured or dark surface — a tonal PageHeader band, say.
+    // The centre content has no colour of its own and inherits the page ink, which on a dark
+    // band is near-invisible; this flips it to the on-colour token. Named to match
+    // BodyText's `onColor` rather than PageHeader's `tone`, because the dial has no surface
+    // of its own: it is transparent and only ever reacts to what is behind it, so the three
+    // tone names would be two behaviours wearing three labels.
+    //
+    // The track is deliberately untouched — see stage_dial.css for the measurements.
+    onColor: {
+        type: Boolean,
+        default: false,
+    },
+    // Opt-in draw-in: filled segments animate their dash length from 0, staggered
+    // by segment. No-ops under `prefers-reduced-motion` (handled in CSS).
+    animate: {
+        type: Boolean,
+        default: false,
+    },
+    // Extra delay in ms before this dial's first segment draws. Lets a row of
+    // dials be staggered into a wave by passing an increasing delay per dial.
+    delay: {
+        type: Number,
+        default: 0,
+    },
+    // Optional prefix for the generated accessible label, e.g. 'Lead self' →
+    // "Lead self: Developing, stage 2 of 3".
+    label: {
+        type: String,
+        default: '',
+    },
+    // Size ramp. Booleans, only one applies at a time — matches the RSUI
+    // size-prop convention. Defaults to md.
+    sm: {
+        type: Boolean,
+        default: false,
+    },
+    md: {
+        type: Boolean,
+        default: false,
+    },
+    lg: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+// --- geometry ---------------------------------------------------------------
+// Everything is drawn in a 100x100 viewBox so the whole dial scales with the
+// CSS box: the stroke is in user units, so it scales too.
+const RADIUS = 42
+const STROKE = 9
+// Preferred gap between segments, in path units. It MUST exceed the stroke
+// width: with `stroke-linecap: round` the caps extend half the stroke width past
+// each dash end, so a gap narrower than the stroke closes up and the segments
+// render as one continuous sweep — exactly the gauge look this component exists
+// to avoid. Twice the stroke is what reads unmistakably as separate stages.
+const PREFERRED_GAP = 18
+// Stagger between consecutive segments drawing in.
+const SEGMENT_STAGGER = 130
+
+const circumference = 2 * Math.PI * RADIUS
+
+// Clamped so a nonsense sweep still renders something sane.
+const safeSweep = computed(() => {
+    if (props.sweep < 30) return 30
+    if (props.sweep > 360) return 360
+
+    return props.sweep
+})
+
+const stageCount = computed(() => props.stages.length)
+
+// Total path length the segments and gaps share.
+const arcLength = computed(() => circumference * (safeSweep.value / 360))
+
+// The gap shrinks below the preferred value rather than letting the gaps eat the
+// arc, so a dial with many stages (or a tight sweep) still shows segments. Capped
+// at a third of each stage's nominal share of the arc, which keeps segments at
+// least twice the width of the gaps between them however many stages there are.
+const gapLength = computed(() => {
+    if (stageCount.value < 2) return 0
+
+    return Math.min(PREFERRED_GAP, arcLength.value / (stageCount.value * 3))
+})
+
+const segmentLength = computed(() => {
+    if (! stageCount.value) return 0
+
+    const gapTotal = gapLength.value * (stageCount.value - 1)
+
+    return (arcLength.value - gapTotal) / stageCount.value
+})
+
+// An SVG circle's path starts at 3 o'clock and runs clockwise, so an un-rotated
+// arc leaves its empty span centred at `sweep / 2 + 180`. Rotating the whole
+// group by the difference moves that span to the bottom (90°), which is where the
+// label goes — so the arc stays visually centred at any sweep.
+const rotation = computed(() => (90 - (safeSweep.value / 2 + 180) + 360) % 360)
+
+// --- stages -----------------------------------------------------------------
+// Compared lowercased so a consumer can pass either the label or a lowercase key.
+const normalisedStages = computed(() =>
+    props.stages.map((stage) => String(stage).trim().toLowerCase()),
+)
+
+const currentIndex = computed(() =>
+    normalisedStages.value.indexOf(String(props.current).trim().toLowerCase()),
+)
+
+// Segments up to and including the reached stage. Everything is derived from
+// this leading run, so unreached segments are never rendered at all — a
+// zero-length dash still paints a dot under round caps, so they have to be left
+// out rather than drawn at length 0.
+const filledCount = computed(() => currentIndex.value + 1)
+
+const segments = computed(() =>
+    props.stages.map((stage, index) => ({
+        stage,
+        index,
+        // Each segment starts one segment-plus-gap further round than the last.
+        offset: -(index * (segmentLength.value + gapLength.value)),
+        transitionDelay: `${props.delay + index * SEGMENT_STAGGER}ms`,
+    })),
+)
+
+const filledSegments = computed(() => segments.value.slice(0, filledCount.value))
+
+// --- animation --------------------------------------------------------------
+// Starts drawn when not animating, so a static dial paints in one frame.
+const isDrawn = ref(! props.animate)
+
+onMounted(() => {
+    if (! props.animate) return
+
+    // A frame later, so the transition has an initial value to move away from.
+    requestAnimationFrame(() => {
+        isDrawn.value = true
+    })
+})
+
+const dashArray = computed(() =>
+    isDrawn.value
+        ? `${segmentLength.value} ${circumference}`
+        : `0 ${circumference}`,
+)
+
+const trackDashArray = computed(() => `${segmentLength.value} ${circumference}`)
+
+// --- presentation -----------------------------------------------------------
+// Largest flag wins so a consumer passing more than one still gets a defined
+// result, and an unsized dial defaults to md.
+const activeSize = computed(() => {
+    if (props.lg) return 'lg'
+    if (props.md) return 'md'
+    if (props.sm) return 'sm'
+
+    return 'md'
+})
+
+const stageDialClass = computed(() => [
+    'rsui-stage-dial',
+    `rsui-stage-dial--${activeSize.value}`,
+    {
+        'rsui-stage-dial--animate': props.animate,
+        'rsui-stage-dial--on-color': props.onColor,
+    },
+])
+
+// When no color is supplied we leave the property unset so the CSS neutral
+// fallback applies. When a color IS supplied it carries an inline fallback to
+// the neutral grey, so an UNRESOLVABLE (undefined) token degrades to grey rather
+// than invisible segments. Note: var()'s fallback does not fire for a token that
+// *resolves* to transparent/empty — passing a real colour is the consumer's
+// responsibility.
+const accentStyle = computed(() =>
+    props.color
+        ? { '--rsui-stage-dial-accent': `var(--${props.color}, var(--Colors-Grey-500))` }
+        : {},
+)
+
+// The dial is a picture of a stage, not a percentage, so it gets `role="img"`
+// with a spelled-out label rather than progressbar semantics — an
+// `aria-valuenow` would reintroduce the score reading in the accessibility tree.
+const accessibleLabel = computed(() => {
+    if (! stageCount.value) return props.label
+
+    const reached = currentIndex.value
+    const stageText = reached === -1
+        ? `no stage reached, ${stageCount.value} stages`
+        : `${props.stages[reached]}, stage ${reached + 1} of ${stageCount.value}`
+
+    return props.label ? `${props.label}: ${stageText}` : stageText
+})
+
+// warn in development when the geometry will visually merge the segments
+if (process.env.NODE_ENV !== 'production') {
+    if (stageCount.value > 1 && gapLength.value <= STROKE) {
+        console.warn(
+            '[RSUI] StageDial segments will render as one continuous sweep: the gap between them is narrower than the stroke width. Widen `sweep` or pass fewer stages.',
+        )
+    }
+}
+</script>
+<template>
+<div :class="stageDialClass"
+    :style="accentStyle"
+    role="img"
+    :aria-label="accessibleLabel"
+>
+    <svg class="rsui-stage-dial__svg" viewBox="0 0 100 100" aria-hidden="true" focusable="false">
+        <g :transform="`rotate(${rotation} 50 50)`">
+            <circle v-for="segment in segments"
+                :key="`track-${segment.index}`"
+                class="rsui-stage-dial__track"
+                cx="50"
+                cy="50"
+                :r="RADIUS"
+                :stroke-dasharray="trackDashArray"
+                :stroke-dashoffset="segment.offset"
+            ></circle>
+            <circle v-for="segment in filledSegments"
+                :key="`fill-${segment.index}`"
+                class="rsui-stage-dial__fill"
+                cx="50"
+                cy="50"
+                :r="RADIUS"
+                :stroke-dasharray="dashArray"
+                :stroke-dashoffset="segment.offset"
+                :style="{ transitionDelay: segment.transitionDelay }"
+            ></circle>
+        </g>
+    </svg>
+    <div class="rsui-stage-dial__content">
+        <slot></slot>
+    </div>
+</div>
+</template>

package/src/components/StageDial/index.js

@@ -0,0 +1,5 @@
+import StageDial from './StageDial.vue'
+
+export {
+    StageDial,
+}

package/src/components/Switcher/Switcher.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import Icon from '../Icon/Icon.vue'
 import SwitcherItem from './SwitcherItem.vue'
+import { useTablistNavigation } from '../../composables/useTablistNavigation.js'
 
 const props = defineProps({
     items: {
@@ -12,12 +13,29 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    // Renders the group as a filter chip set instead of a segmented control: no tonal
+    // container, pill-shaped items, and one row that scrolls sideways rather than stacking
+    // on a narrow screen. Opt-in, so existing consumers keep the segmented layout.
+    chips: {
+        type: Boolean,
+        default: false,
+    },
+    // Names the tablist for assistive technology. A tablist that only ever appears once on
+    // a page can go without, but any page carrying two of them needs each one labelled.
+    ariaLabel: {
+        type: String,
+        default: undefined,
+    },
 })
 
 const emit = defineEmits(['change'])
 
 const activeItem = ref(props.items.find(item => item.active) || props.items[0])
 
+// Arrow / Home / End key handling for the tabs pattern — see useTablistNavigation for why
+// focus moves without changing the selection.
+const { tablistElement, handleKeydown } = useTablistNavigation()
+
 function setActiveItem(item) {
     if (activeItem.value == item) return
     activeItem.value = item
@@ -25,15 +43,22 @@ function setActiveItem(item) {
 }
 </script>
 <template>
-<div class="rsui-switcher"
+<div ref="tablistElement"
+    class="rsui-switcher"
     :class="{
         'rsui-switcher--full': props.full,
+        'rsui-switcher--chips': props.chips,
     }"
+    role="tablist"
+    :aria-label="props.ariaLabel"
+    @keydown="handleKeydown"
 >
     <SwitcherItem v-for="item in items"
         :key="item.id"
         :active="activeItem.id == item.id"
         :disabled="item.disabled"
+        :tabId="item.tabId"
+        :panelId="item.panelId"
         @click="setActiveItem(item)"
     >
             <Icon v-if="item.icon">

package/src/components/Switcher/SwitcherItem.vue

@@ -8,6 +8,19 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    // ID applied to the tab button itself, so the panel can point back at it with
+    // aria-labelledby and be named by its tab. Optional, like panelId.
+    tabId: {
+        type: String,
+        default: undefined,
+    },
+    // ID of the element this tab controls. Optional because Switcher does not own the
+    // panel — the consumer renders it and gives it `role="tabpanel"`. Supplying it here
+    // completes the tabs pattern for assistive technology.
+    panelId: {
+        type: String,
+        default: undefined,
+    },
 })
 
 const emit = defineEmits(['click'])
@@ -19,16 +32,23 @@ function handleClick() {
 }
 </script>
 <template>
-<div class="rsui-switcher-item"
+<button type="button"
+    :id="props.tabId"
+    class="rsui-switcher-item"
     :class="{
         'rsui-switcher-item--active': props.active && !props.disabled,
         'rsui-switcher-item--disabled': props.disabled,
     }"
+    role="tab"
+    :aria-selected="props.active"
+    :aria-disabled="props.disabled ? true : undefined"
+    :aria-controls="props.panelId"
+    :tabindex="props.active ? 0 : -1"
     @click="handleClick"
 >
     <slot></slot>
     <div v-if="$slots.badge" class="rsui-switcher-item__badge">
         <slot name="badge"></slot>
     </div>
-</div>
+</button>
 </template>

package/src/components/TabSlider/TabSlider.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import Icon from '../Icon/Icon.vue'
 import TabSliderItem from './TabSliderItem.vue'
+import { useTablistNavigation } from '../../composables/useTablistNavigation.js'
 
 const props = defineProps({
     items: {
@@ -12,12 +13,22 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    // Names the tablist for assistive technology. A tablist that only ever appears once on
+    // a page can go without, but any page carrying two of them needs each one labelled.
+    ariaLabel: {
+        type: String,
+        default: undefined,
+    },
 })
 
 const emit = defineEmits(['change'])
 
 const activeItem = ref(props.items.find(item => item.active) || props.items[0])
 
+// Arrow / Home / End key handling for the tabs pattern — see useTablistNavigation for why
+// focus moves without changing the selection.
+const { tablistElement, handleKeydown } = useTablistNavigation()
+
 function setActiveItem(item) {
     if (activeItem.value == item) return
     activeItem.value = item
@@ -25,15 +36,21 @@ function setActiveItem(item) {
 }
 </script>
 <template>
-<div class="rsui-tab-slider"
+<div ref="tablistElement"
+    class="rsui-tab-slider"
     :class="{
         'rsui-tab-slider--full': props.full,
     }"
+    role="tablist"
+    :aria-label="props.ariaLabel"
+    @keydown="handleKeydown"
 >
     <TabSliderItem v-for="item in items"
         :key="item.id"
         :active="activeItem.id == item.id"
         :disabled="item.disabled"
+        :tabId="item.tabId"
+        :panelId="item.panelId"
         @click="setActiveItem(item)"
     >
             <Icon v-if="item.icon">

package/src/components/TabSlider/TabSliderItem.vue

@@ -8,6 +8,19 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    // ID applied to the tab button itself, so the panel can point back at it with
+    // aria-labelledby and be named by its tab. Optional, like panelId.
+    tabId: {
+        type: String,
+        default: undefined,
+    },
+    // ID of the element this tab controls. Optional because TabSlider does not own the
+    // panel — the consumer renders it and gives it `role="tabpanel"`. Supplying it here
+    // completes the tabs pattern for assistive technology.
+    panelId: {
+        type: String,
+        default: undefined,
+    },
 })
 
 const emit = defineEmits(['click'])
@@ -19,16 +32,23 @@ function handleClick() {
 }
 </script>
 <template>
-<div class="rsui-tab-slider-item"
+<button type="button"
+    :id="props.tabId"
+    class="rsui-tab-slider-item"
     :class="{
         'rsui-tab-slider-item--active': props.active && !props.disabled,
         'rsui-tab-slider-item--disabled': props.disabled,
     }"
+    role="tab"
+    :aria-selected="props.active"
+    :aria-disabled="props.disabled ? true : undefined"
+    :aria-controls="props.panelId"
+    :tabindex="props.active ? 0 : -1"
     @click="handleClick"
 >
     <slot></slot>
     <div v-if="$slots.badge" class="rsui-tab-slider-item__badge">
         <slot name="badge"></slot>
     </div>
-</div>
+</button>
 </template>

package/src/composables/useTablistNavigation.js

@@ -0,0 +1,107 @@
+import { ref } from 'vue'
+
+/**
+ * Keyboard navigation for the WAI-ARIA tabs pattern, shared by TabSlider and Switcher.
+ *
+ * Both components render a `role="tablist"` whose children are `role="tab"` buttons using
+ * a roving tabindex: the selected tab carries `tabindex="0"` and the rest `tabindex="-1"`,
+ * so the tablist is a single Tab stop and the arrow keys move between tabs inside it.
+ *
+ * MANUAL ACTIVATION: the arrow keys move focus only — they do not change the selection.
+ * The APG permits either this or automatic activation (selection follows focus). Manual is
+ * the right default for a shared library: consumers commonly load data in response to
+ * `change`, and automatic activation would emit `change` for every tab arrowed past on the
+ * way to the intended one. Enter and Space activate the focused tab, and because each tab
+ * is a native <button> those come for free with no key handler of our own.
+ *
+ * Disabled tabs are marked `aria-disabled` rather than given the `disabled` attribute — the
+ * APG keeps them discoverable — but they are skipped by the arrow keys so keyboard users
+ * are not parked on a tab they cannot activate.
+ *
+ * Both arrow axes are handled because these two tablists are not both horizontal:
+ * `.rsui-switcher` is `flex-col sm:flex-row`, so it stacks vertically on small screens.
+ * Home and End jump to the first and last enabled tab. Navigation wraps at both ends.
+ */
+export function useTablistNavigation() {
+    const tablistElement = ref(null)
+
+    const NAVIGATION_KEYS = [
+        'ArrowRight',
+        'ArrowLeft',
+        'ArrowDown',
+        'ArrowUp',
+        'Home',
+        'End',
+    ]
+
+    /**
+     * Every tab the arrow keys are allowed to land on, in DOM order.
+     */
+    function enabledTabs() {
+        if (!tablistElement.value) return []
+
+        return Array.from(
+            tablistElement.value.querySelectorAll('[role="tab"]:not([aria-disabled="true"])')
+        )
+    }
+
+    /**
+     * The tab that currently holds focus. Resolved with closest() because focus can sit on a
+     * descendant of the button (an icon, a badge) rather than the button itself.
+     */
+    function focusedTabIndex(tabs) {
+        const active = document.activeElement
+
+        if (!active) return -1
+
+        return tabs.indexOf(active.closest('[role="tab"]'))
+    }
+
+    function handleKeydown(event) {
+        if (!NAVIGATION_KEYS.includes(event.key)) return
+
+        const tabs = enabledTabs()
+
+        if (!tabs.length) return
+
+        const currentIndex = focusedTabIndex(tabs)
+
+        // Focus sits outside the tablist (or on a disabled tab) — start from the first tab
+        // rather than computing an offset from a meaningless position.
+        if (currentIndex === -1) {
+            event.preventDefault()
+            tabs[0].focus()
+
+            return
+        }
+
+        const lastIndex = tabs.length - 1
+        let nextIndex = currentIndex
+
+        if (event.key === 'Home') {
+            nextIndex = 0
+        }
+
+        if (event.key === 'End') {
+            nextIndex = lastIndex
+        }
+
+        if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+            nextIndex = currentIndex === lastIndex ? 0 : currentIndex + 1
+        }
+
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+            nextIndex = currentIndex === 0 ? lastIndex : currentIndex - 1
+        }
+
+        // Claim the key only once a move is actually happening, so an unhandled arrow still
+        // scrolls the page as the user expects.
+        event.preventDefault()
+        tabs[nextIndex].focus()
+    }
+
+    return {
+        tablistElement,
+        handleKeydown,
+    }
+}

package/src/components/Section/HeroSection.vue

@@ -1,35 +0,0 @@
-<script setup>
-defineProps({
-    showContent: {
-        type: Boolean,
-        default: true,
-    },
-})
-</script>
-<template>
-<div class="rsui-hero-section">
-    <slot name="header"></slot>
-
-    <div v-if="$slots.content"
-        :class="[
-            'rsui-hero-section__content',
-            {
-                'rsui-hero-section__content--hidden': !showContent,
-            }
-        ]"
-    >
-        <slot name="content"></slot>
-    </div>
-
-    <div v-if="$slots.default"
-        :class="[
-            'rsui-hero-section__cards',
-            {
-                'rsui-hero-section__cards--hidden': !showContent,
-            }
-        ]"
-    >
-        <slot></slot>
-    </div>
-</div>
-</template>