@redseed/redseed-ui-vue3 8.61.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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.61.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

@@ -40,6 +40,18 @@ const props = defineProps({
         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: {
@@ -192,6 +204,7 @@ const stageDialClass = computed(() => [
     `rsui-stage-dial--${activeSize.value}`,
     {
         'rsui-stage-dial--animate': props.animate,
+        'rsui-stage-dial--on-color': props.onColor,
     },
 ])
 

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>