@redseed/redseed-ui-vue3 8.62.0 → 8.63.0

package/package.json

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

package/src/components/Icon/IconSlot.vue

@@ -90,6 +90,24 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    /**
+     * Expand a ring outwards from the icon a few times on arrival, to draw the
+     * eye to something that has just appeared.
+     *
+     * Runs a fixed number of iterations rather than looping. An animation that
+     * repeats indefinitely for more than five seconds needs a pause control
+     * (WCAG 2.2.2), and an icon has nowhere sensible to put one — a burst on
+     * arrival gets the attention without taking on that obligation. Suppressed
+     * entirely under `prefers-reduced-motion`.
+     *
+     * The ring is drawn around the icon's own box, so it suits a round glyph —
+     * the circle heroicons, or anything with `circle`. On a square icon it reads
+     * as a mistake rather than a pulse.
+     */
+    pulse: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 /**
@@ -162,6 +180,7 @@ const iconClass = computed(() => [
          */
         'rsui-icon--background': props.background,
         'rsui-icon--invert': props.invert,
+        'rsui-icon--pulse': props.pulse,
     }
 ])
 </script>

package/src/components/MessageBox/MessageBox.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch, watchEffect, useSlots, Comment, Fragment } from 'vue'
 import Icon from '../Icon/Icon.vue'
 import { XMarkIcon } from '@heroicons/vue/24/outline'
 
@@ -20,13 +20,101 @@ const props = defineProps({
         type: String,
         default: 'default',
         validator: (value) => ['default', 'info', 'success', 'warning', 'error', 'ai'].includes(value)
-    }
+    },
+    /**
+     * Renders a quiet dismiss action in the actions row, wired to the same close
+     * path as the corner button. Owned by the component rather than left to the
+     * `actions` slot, so dismissal cannot drift in wording or come unwired.
+     */
+    dismissLabel: {
+        type: String,
+        default: '',
+    },
 })
 
 const emit = defineEmits(['close'])
 
+/**
+ * Enforced at render, not just by the prop validator. Validators only warn and are
+ * stripped from production builds, so an unrecognised value used to reach the
+ * class attribute and the computeds below — and every fallback pointed the wrong
+ * way at once: no background (no matching CSS rule), an *information* glyph on
+ * what might be an error, and no live region at all, so a screen reader user was
+ * never told the operation failed.
+ */
+const VARIANTS = ['default', 'info', 'success', 'warning', 'error', 'ai']
+
+const slots = useSlots()
+
 const isClosed = ref(props.closed)
 
+const isKnownVariant = computed(() => VARIANTS.includes(props.variant))
+
+const safeVariant = computed(() => isKnownVariant.value ? props.variant : 'default')
+
+/**
+ * Dev-only, matching LinkSlot, ButtonSlot, Pill and InlineEditableText — this
+ * package ships raw `.vue` source, so an ungated warn reaches real users'
+ * consoles. Silence would leave a consumer with an unstyled box, a decoration that
+ * never appears, or an unnamed control, and no way to know why.
+ */
+watchEffect(() => {
+    if (process.env.NODE_ENV === 'production') return
+
+    if (!isKnownVariant.value) {
+        console.warn(`[RSUI] MessageBox: variant "${props.variant}" is not supported (${VARIANTS.join(', ')}). Falling back to "default".`)
+    }
+
+    if (props.dismissLabel !== '' && props.dismissLabel.trim() === '') {
+        console.warn('[RSUI] MessageBox: `dismissLabel` is only whitespace, so no dismiss control has been rendered — a button with no accessible name is worse than no button.')
+    }
+})
+
+/**
+ * `closed` is a two-way switch, not a starting position. Without this the ref was
+ * seeded once at setup and never looked at the prop again, so a consumer could
+ * neither close the box by setting it nor re-show a dismissed one by clearing it
+ * — and a flash message re-shown on the next visit would silently never appear,
+ * because Vue patches the same instance rather than remounting it.
+ */
+watch(() => props.closed, (value) => {
+    isClosed.value = value
+})
+
+/**
+ * A Fragment is a wrapper, so its own presence answers nothing — only what is
+ * inside it does. Hence the recursion: a `v-for` compiles to a Fragment and
+ * leaves a comment placeholder for each hidden item, so counting children
+ * reported content for a list whose every action was filtered out (the usual
+ * shape for permission-gated actions), and a nested `<template>` puts another
+ * Fragment inside that one.
+ *
+ * `Array.isArray` rather than recursing straight into `children`, which is a raw
+ * string on a Fragment built by hand as `h(Fragment, null, 'text')`. Vue's own
+ * `ensureValidVNode` assumes the array and throws on that shape, so answering
+ * "renders" here only hands it a slot it cannot render; treating it as empty
+ * drops the row instead, which is the quieter of the two failures. Compiled
+ * templates always produce the array.
+ */
+function rendersNode(node) {
+    if (node.type === Comment) return false
+    if (node.type === Fragment) return Array.isArray(node.children) && node.children.some(rendersNode)
+
+    return true
+}
+
+/**
+ * Whether a slot renders anything at all. Slot *presence* is not the same
+ * question: a slot holding only a falsy `v-if` is still a truthy slot function
+ * that renders a comment placeholder, which would put an empty padded row under
+ * the message.
+ */
+function rendersContent(slot) {
+    const nodes = slot?.()
+
+    return Boolean(nodes) && nodes.some(rendersNode)
+}
+
 /**
  * Announce the box as a live region so flash / MOTD content reaches assistive
  * tech (WCAG 4.1.3 Status Messages). `alert` is assertive — reserved for errors
@@ -40,11 +128,28 @@ const isClosed = ref(props.closed)
  * interrupt for something nobody asked about.
  */
 const liveRole = computed(() => {
-    if (props.variant === 'error') return 'alert'
-    if (['info', 'success', 'warning'].includes(props.variant)) return 'status'
+    if (safeVariant.value === 'error') return 'alert'
+    if (['info', 'success', 'warning'].includes(safeVariant.value)) return 'status'
     return undefined
 })
 
+/**
+ * The icon is the consumer's, not ours — matching Pill, MetricCard, ListItem and
+ * SectionHeader, which all take one through a slot. RSUI only hardcodes a glyph
+ * where it is chrome belonging to the control itself (Disclosure's chevron,
+ * Pagination's arrows); the marker beside a message is content, and which glyph
+ * says "this came from the model" or "this is a billing notice" is the caller's
+ * call, not a mapping this component can guess from a variant name.
+ *
+ * Colour, shape and the attention pulse all ride on the `Icon` the consumer
+ * passes — `<Icon ai circle background pulse>` — so none of it needs a prop here.
+ */
+function hasIcon() {
+    return rendersContent(slots.icon)
+}
+
+const hasDismiss = computed(() => props.dismissLabel.trim() !== '')
+
 function close() {
     isClosed.value = true
     emit('close')
@@ -54,41 +159,70 @@ function close() {
 <div v-if="!isClosed"
     :class="[
         'rsui-message-box',
-        `rsui-message-box--${variant}`
+        `rsui-message-box--${safeVariant}`,
+        { 'rsui-message-box--with-icon': hasIcon() },
     ]"
     :role="liveRole"
 >
-    <div v-if="$slots.title" class="rsui-message-box__head">
-        <div class="rsui-message-box__title">
-            <slot name="title"></slot>
-        </div>
-        <div v-if="closeable" class="rsui-message-box__close">
-            <button type="button"
-                class="rsui-message-box__close-icon"
-                :aria-label="closeLabel"
-                @click="close"
-            >
-                <Icon disabled>
-                    <XMarkIcon aria-hidden="true"></XMarkIcon>
-                </Icon>
-            </button>
-        </div>
+    <!--
+        A sibling of the whole text column rather than of the body, so it sits
+        beside the title and the text below it indents past it instead of wrapping
+        under it.
+
+        `aria-hidden` because the glyph restates the message rather than adding to
+        it, matching Pill and MetricCard — the variant's meaning reaches assistive
+        tech through the live region, not through a decorative icon.
+    -->
+    <div v-if="hasIcon()" class="rsui-message-box__icon" aria-hidden="true">
+        <slot name="icon"></slot>
     </div>
-    <div class="rsui-message-box__content">
-        <div class="rsui-message-box__body">
-            <slot></slot>
+
+    <div class="rsui-message-box__main">
+        <div v-if="$slots.title" class="rsui-message-box__head">
+            <div class="rsui-message-box__title">
+                <slot name="title"></slot>
+            </div>
         </div>
-        <div v-if="closeable && !$slots.title" class="rsui-message-box__close">
-            <button type="button"
-                class="rsui-message-box__close-icon"
-                :aria-label="closeLabel"
+
+        <div class="rsui-message-box__content">
+            <div class="rsui-message-box__body">
+                <slot></slot>
+            </div>
+        </div>
+
+        <!--
+            Actions stay neutral rather than taking the variant colour. Coloured
+            text on a coloured tint is a contrast problem, and the action is a way
+            out of the message rather than a restatement of its severity.
+        -->
+        <div v-if="hasDismiss || rendersContent($slots.actions)" class="rsui-message-box__actions">
+            <button v-if="hasDismiss"
+                type="button"
+                class="rsui-message-box__dismiss"
                 @click="close"
             >
-                <Icon disabled>
-                    <XMarkIcon aria-hidden="true"></XMarkIcon>
-                </Icon>
+                {{ dismissLabel }}
             </button>
+
+            <slot name="actions" :close="close"></slot>
         </div>
     </div>
+
+    <!--
+        Top level rather than inside the head or the body, so it stays in the
+        corner whether or not there is a title — the two duplicated buttons this
+        replaces each sat in a `justify-between` row to reach the same place.
+    -->
+    <div v-if="closeable" class="rsui-message-box__close">
+        <button type="button"
+            class="rsui-message-box__close-icon"
+            :aria-label="closeLabel"
+            @click="close"
+        >
+            <Icon secondary>
+                <XMarkIcon aria-hidden="true"></XMarkIcon>
+            </Icon>
+        </button>
+    </div>
 </div>
 </template>

package/src/components/Section/SectionFooter.vue

@@ -1,25 +1,215 @@
 <script setup>
-defineProps({
+import { computed, watchEffect, useSlots, Comment, Fragment } from 'vue'
+
+const props = defineProps({
     showContent: {
         type: Boolean,
         default: true,
     },
+    /**
+     * Label for the trailing "view all" link. Setting it, together with
+     * `viewAllHref`, is what puts the link in the footer.
+     *
+     * A prop rather than a slot: it is the link's accessible name, and a prop
+     * cannot be present-but-empty the way a slot can. Slot presence read through
+     * `useSlots()` is also not reactive, so a link gated on it would never appear
+     * for a consumer rendering it conditionally.
+     */
+    viewAllLabel: {
+        type: String,
+        default: '',
+    },
+    /**
+     * Where the view-all link goes. Required alongside the label — an anchor
+     * without an href is not a link, and is skipped by keyboard navigation.
+     */
+    viewAllHref: {
+        type: String,
+        default: '',
+    },
+})
+
+/**
+ * Coerced, not dereferenced. `default: ''` only applies to `undefined` — Vue
+ * skips type checking entirely for a `null` on a non-required prop, so `null`
+ * arrives with no warning at all and `.trim()` on it throws out of setup, taking
+ * the whole parent subtree down with it. An absent URL serialises to `null`, not
+ * `undefined`, so that is the likely wiring rather than the exotic one. The type
+ * validator cannot be relied on either; it is stripped from production builds.
+ */
+const viewAllLabelText = computed(() => String(props.viewAllLabel ?? '').trim())
+
+const rawViewAllHref = computed(() => String(props.viewAllHref ?? '').trim())
+
+/**
+ * Schemes an anchor may safely carry. `javascript:` and `data:` in an href are
+ * script execution, and this is a declared prop on a design-system component
+ * rather than an attribute passthrough — a consuming app can reasonably expect
+ * the anchor it did not write to be safe. Anything else is refused loudly, since
+ * a link that quietly stops working is the failure this component exists to
+ * avoid.
+ */
+const SAFE_HREF_SCHEME = /^(https?:|mailto:|tel:)/i
+
+/**
+ * `//evil.com` is protocol-relative: it starts with a slash but navigates to
+ * another host entirely, so a leading-slash test alone would wave it through.
+ */
+const PROTOCOL_RELATIVE = /^\/\//
+
+/**
+ * Anything with a scheme has one before the first slash. No colon in that span
+ * means a relative path — `courses/1`, `./x`, `../x`, `#anchor`, `?q=1` — which
+ * cannot leave the site and so needs no allow-list of its own. This is what the
+ * warning text has always told consumers to use; the previous check only accepted
+ * paths beginning with `/`, and refused the rest while telling them they were
+ * fine.
+ */
+function isRelativeHref(href) {
+    const beforeFirstSlash = href.split('/')[0]
+
+    return !beforeFirstSlash.includes(':')
+}
+
+const isViewAllHrefSafe = computed(() => {
+    const href = rawViewAllHref.value
+
+    if (href === '') return true
+    if (PROTOCOL_RELATIVE.test(href)) return false
+    if (SAFE_HREF_SCHEME.test(href)) return true
+
+    return isRelativeHref(href)
+})
+
+const hasViewAllLabel = computed(() => viewAllLabelText.value !== '')
+
+const hasViewAllHref = computed(() => rawViewAllHref.value !== '' && isViewAllHrefSafe.value)
+
+const showViewAll = computed(() => hasViewAllLabel.value && hasViewAllHref.value)
+
+const slots = useSlots()
+
+/**
+ * Whether a slot renders anything at all. Slot *presence* is not the same
+ * question: `<template #default><Button v-if="canManage" /></template>` leaves a
+ * truthy slot function that renders a comment placeholder, which would still
+ * claim a `flex-1` region and shove the centred link into one half of the footer.
+ */
+function rendersContent(slot) {
+    const nodes = slot?.()
+
+    if (!nodes) return false
+
+    // Comment vnodes are what a falsy `v-if` leaves behind. Fragments wrap lists
+    // and `<template v-if>` blocks, so a truthy wrapper around a falsy child is a
+    // Fragment whose only child is a Comment — counting its length would call that
+    // content and render an empty region claiming `flex-1`.
+    return nodes.some(rendersNode)
+}
+
+function rendersNode(node) {
+    if (node.type === Comment) return false
+    if (node.type === Fragment) return Array.isArray(node.children) && node.children.some(rendersNode)
+
+    return true
+}
+
+/**
+ * Whether the view-all has the footer to itself, which is the case that wants
+ * centring. With anything alongside it, a greedy region would split the row with
+ * `content-start` and squeeze the buttons towards the middle rather than the
+ * right edge, so it stays content-sized and sits at the end instead.
+ */
+/*
+ * Plain functions, not computeds. `useSlots()` returns a non-reactive object, so
+ * a computed wrapping it caches its first answer forever — a consumer putting a
+ * `v-if` on the slot itself would never see the region appear or disappear. Called
+ * from the template instead, so they are re-evaluated on every render, which is
+ * what makes them track.
+ */
+function hasDefaultContent() {
+    return rendersContent(slots.default)
+}
+
+function hasStartContent() {
+    return props.showContent && rendersContent(slots.content)
+}
+
+function isViewAllAlone() {
+    return !hasDefaultContent() && !hasStartContent()
+}
+
+/**
+ * Half a link is not a link, so say so rather than rendering nothing. A label
+ * with no href would be an anchor the keyboard skips; an href with no label
+ * would be one a screen reader announces as its own URL.
+ *
+ * Deferred by a tick, and cancelled if the effect re-runs. The two values often
+ * arrive separately — a literal label beside an href that is empty until a fetch
+ * resolves — and warning about a state that corrects itself a tick later trains
+ * everyone to ignore the channel, which costs more than it catches.
+ *
+ * Dev-only, matching LinkSlot, ButtonSlot, Pill and InlineEditableText. This
+ * package ships raw `.vue` source, so an ungated warn reaches real users'
+ * consoles.
+ */
+watchEffect((onCleanup) => {
+    if (process.env.NODE_ENV === 'production') return
+    if (showViewAll.value) return
+
+    const isUnsafeHref = rawViewAllHref.value !== '' && !isViewAllHrefSafe.value
+    const isHalfConfigured = hasViewAllLabel.value !== hasViewAllHref.value
+
+    if (!isUnsafeHref && !isHalfConfigured) return
+
+    const message = isUnsafeHref
+        ? `[RSUI] SectionFooter: refused an unsafe \`viewAllHref\` ("${rawViewAllHref.value}"). Use an http(s), mailto, tel, or relative URL.`
+        : `[RSUI] SectionFooter: the view-all link needs both \`viewAllLabel\` and \`viewAllHref\`; \`${hasViewAllLabel.value ? 'viewAllHref' : 'viewAllLabel'}\` is missing, so no link has been rendered.`
+
+    const timer = setTimeout(() => console.warn(message), 0)
+
+    onCleanup(() => clearTimeout(timer))
 })
 </script>
 <template>
 <div class="rsui-section-footer">
     <div class="rsui-section-footer__content-start"
-        v-if="showContent && $slots.content"
+        v-if="hasStartContent()"
     >
         <slot name="content"></slot>
     </div>
-    <div :class="[
-        'rsui-section-footer__content-end',
-        {
-            'rsui-section-footer__content-end--full': !showContent || !$slots.content,
-        }
-    ]">
+    <div v-if="hasDefaultContent()"
+        :class="[
+            'rsui-section-footer__content-end',
+            {
+                'rsui-section-footer__content-end--full': !hasStartContent(),
+            }
+        ]"
+    >
         <slot></slot>
     </div>
+
+    <!--
+        Its own centred region rather than tucked into `content-end`, which is
+        right-aligned for action buttons. A view-all is not a form action sitting
+        at the end of a row — it is the way out of the section, and it usually has
+        the footer to itself.
+    -->
+    <div v-if="showViewAll"
+        :class="[
+            'rsui-section-footer__view-all-region',
+            {
+                'rsui-section-footer__view-all-region--full': isViewAllAlone(),
+            }
+        ]"
+    >
+        <a class="rsui-section-footer__view-all"
+            :href="rawViewAllHref"
+            data-ph-capture-attribute-component="SectionFooterViewAll"
+            data-ph-capture-attribute-label="View all"
+        >
+            {{ viewAllLabelText }}
+        </a>
+    </div>
 </div>
 </template>

package/src/components/Section/SectionSlider.vue

@@ -1,11 +1,25 @@
 <script setup>
-import { ref, computed, useSlots } from 'vue'
-import { useScroll } from '@vueuse/core'
-import { Icon } from '../Icon'
+import { ref, computed, watch, watchEffect, useSlots } from 'vue'
+import { useScroll, useEventListener, watchDebounced } from '@vueuse/core'
 import Section from './Section.vue'
 import SectionHeader from './SectionHeader.vue'
 import SectionSliderItem from './SectionSliderItem.vue'
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/outline'
+import SectionSliderAction from './SectionSliderAction.vue'
+
+/**
+ * Emitted when the trailing view-all card is activated — by click, Enter or
+ * Space, since it is a real button. The consumer decides what "view all" means,
+ * so routing stays out of the design system.
+ */
+defineEmits(['view-all'])
+
+/**
+ * Variants the view-all card understands. Enforced at render as well as by the
+ * prop validator: validators only warn, and they are stripped from production
+ * builds, so an unvetted value would otherwise reach the class attribute and
+ * silently render an unstyled card.
+ */
+const VIEW_ALL_VARIANTS = ['primary', 'secondary', 'brand', 'success', 'info', 'warning', 'error', 'ai']
 
 const props = defineProps({
     items: {
@@ -30,6 +44,63 @@ const props = defineProps({
         default: null,
         validator: (value) => value === null || ['1', '2', '3', '4', '5', '6'].includes(String(value)),
     },
+    /**
+     * Move the prev/next arrows out of the header and onto the rail itself,
+     * revealed when the pointer is over the cards. Navigation then sits in the
+     * thing being navigated rather than in the header, which matters most when
+     * several sliders stack on one page and header arrows stop reading as
+     * belonging to any particular rail. Opt-in, so existing consumers keep the
+     * header arrows.
+     */
+    hoverActions: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * What the rail holds, in plural lowercase — "courses", "articles". Used to
+     * name the rail itself and to disambiguate the arrows, which otherwise all
+     * announce as a bare "Next" on a page with several rails. Left unset the
+     * labels stay exactly as they were.
+     */
+    navigationLabel: {
+        type: String,
+        default: '',
+    },
+    /**
+     * Label for the trailing view-all card. Setting it is what puts the card on
+     * the rail; left empty there is no card.
+     *
+     * A prop rather than a slot, for two reasons. It is the button's accessible
+     * name, and a prop cannot be present-but-empty the way a slot can — a slot
+     * whose content resolves to nothing still counts as supplied, which would
+     * ship a focusable button with no name. And slot presence read through
+     * `useSlots()` is not reactive, so a card gated on it would never appear for
+     * a consumer who renders the slot conditionally.
+     */
+    viewAllLabel: {
+        type: String,
+        default: '',
+    },
+    /**
+     * Colour treatment for the view-all card, using Card's own variant
+     * vocabulary. The card composes Card's classes, so each variant brings its
+     * own background and border colour straight from `card.css`.
+     *
+     * Two exceptions, both about the section showing through rather than the card
+     * painting over it: the `ai` card variant's gradient is cleared, and on an
+     * `--ai` or `--featured` *section* the card goes transparent entirely.
+     *
+     * `draft` is left out on purpose: it sets `border-0` and draws its boundary
+     * with a separate element the button never renders, so it would take the
+     * dashed edge away entirely.
+     */
+    viewAllVariant: {
+        type: String,
+        default: 'primary',
+        // Literal rather than the VIEW_ALL_VARIANTS const below: defineProps is
+        // hoisted out of setup(), so it cannot reference local declarations.
+        validator: (value) => ['primary', 'secondary', 'brand', 'success', 'info', 'warning', 'error', 'ai'].includes(value),
+    },
 })
 
 const sectionVariant = computed(() => {
@@ -44,11 +115,23 @@ const sliderClasses = computed(() => [
         'rsui-section-slider--default': !props.featured && !props.ai,
         'rsui-section-slider--featured': props.featured,
         'rsui-section-slider--ai': props.ai,
+        'rsui-section-slider--hover-actions': props.hoverActions,
     },
 ])
 
 const slots = useSlots()
 
+/**
+ * A consumer-supplied `actions` slot always wins and always renders in the
+ * header — that slot exists so consumers can put their own controls up there.
+ * The built-in arrows go to whichever placement `hoverActions` selects.
+ */
+const hasCustomActions = computed(() => Boolean(slots.actions))
+
+const showHeaderActions = computed(() => hasCustomActions.value || !props.hoverActions)
+
+const showOverlayActions = computed(() => !hasCustomActions.value && props.hoverActions)
+
 /**
  * Unique id for the slider
  */
@@ -67,7 +150,11 @@ function generateItemId(index) {
 const sliderContainerRef = ref(null)
 
 /**
- * Whether the slider container is scrolling
+ * Whether the slider container is scrolling. Only the flag is taken: `useScroll`
+ * also offers `arrivedState`, but it is measured on mount and then only from its
+ * own scroll handler, so it goes stale on resize or on items arriving late. Edge
+ * detection is derived from the intersection observer instead — see
+ * hasPreviousSlide/hasNextSlide below.
  */
 const { isScrolling } = useScroll(sliderContainerRef)
 
@@ -85,32 +172,99 @@ function removeVisibleItemId(id) {
 }
 
 /**
- * Maximum number of visible items
+ * How many items are fully visible right now — not a maximum, despite the name,
+ * which predates this. `SectionSliderItem` observes at threshold 1, so a card
+ * peeking at either edge is not counted. The paging arithmetic below uses this as
+ * the page size, so it is a live measurement rather than a capacity.
  */
 const maxVisibleItems = computed(() => visibleItemIds.value.length)
 
 /**
- * Slides - chunks items into groups based on visible count
+ * Whether a trailing "view all" card is on the rail. Driven by the label prop,
+ * so it is genuinely reactive and the card can never exist without a name.
  */
-const slides = computed(() => {
-    const mappedItems = props.items.map((item, index) => {
-        return generateItemId(index + 1)
-    })
+/**
+ * Coerced, not dereferenced. `default: ''` only covers `undefined` — Vue skips
+ * type checking entirely for a `null` on a non-required prop, so `null` arrives
+ * unannounced and `.trim()` on it throws out of setup, taking the whole render
+ * with it. An absent label serialises to `null`, not `undefined`, so that is the
+ * likely wiring rather than the exotic one, and the type validator is stripped
+ * from production builds anyway.
+ */
+const viewAllLabelText = computed(() => String(props.viewAllLabel ?? '').trim())
+
+const hasViewAllCard = computed(() => viewAllLabelText.value !== '')
 
-    return _.chunk(mappedItems, maxVisibleItems.value)
+/**
+ * The icon is decoration on top of the label, so on its own it produces nothing.
+ * Say so rather than discarding it silently — a consumer who supplies only the
+ * icon sees no card, no icon and no error, which is a long way to a one-word fix.
+ */
+watchEffect(() => {
+    // Read the reactive dependency first. Bailing on the non-reactive `slots`
+    // lookup before touching `hasViewAllCard` meant the effect recorded no
+    // dependency at all on a mount without an icon, so it could never re-run.
+    const hasCard = hasViewAllCard.value
+
+    if (!slots['view-all-icon']) return
+    if (hasCard) return
+
+    console.warn('[SectionSlider] #view-all-icon was supplied without a `viewAllLabel`. The view-all card needs a label for its accessible name, so no card has been rendered.')
 })
 
 /**
- * Active slide index
+ * Card's own classes, so the view-all card inherits each variant's background
+ * and border colour rather than this file restating them — and stays in step if
+ * those tokens are ever retuned. `section_slider.css` is imported after
+ * `card.css`, so the dashed edge and the layout below still win at equal
+ * specificity.
  */
-const activeSlideIndex = ref(0)
+const viewAllClasses = computed(() => {
+    const isKnownVariant = VIEW_ALL_VARIANTS.includes(props.viewAllVariant)
+
+    if (!isKnownVariant) {
+        console.warn(`[SectionSlider] viewAllVariant "${props.viewAllVariant}" is not supported (${VIEW_ALL_VARIANTS.join(', ')}). Falling back to "primary".`)
+    }
+
+    const variant = isKnownVariant ? props.viewAllVariant : 'primary'
+
+    return [
+        'rsui-card',
+        'rsui-card--bordered',
+        'rsui-section-slider__view-all',
+        {
+            'rsui-card--secondary': variant === 'secondary',
+            'rsui-card--brand': variant === 'brand',
+            'rsui-card--success': variant === 'success',
+            'rsui-card--info': variant === 'info',
+            'rsui-card--warning': variant === 'warning',
+            'rsui-card--error': variant === 'error',
+            'rsui-card--ai': variant === 'ai',
+        },
+    ]
+})
+
+/**
+ * The card is a way out of the rail, so with nothing in the rail there is
+ * nothing to opt out of — and it would otherwise sit above the empty state,
+ * offering "view all" of nothing.
+ */
+const showViewAllCard = computed(() => hasViewAllCard.value && props.items.length > 0)
+
+/**
+ * How many cards the rail holds, as opposed to how many *items* the consumer
+ * passed. The view-all card occupies a slot, snaps, and has to be reachable, so
+ * every piece of paging arithmetic counts it — the announcement being the one
+ * deliberate exception.
+ */
+const railItemCount = computed(() => props.items.length + (showViewAllCard.value ? 1 : 0))
 
 /**
  * Whether the previous button is disabled
  */
 const disabledPrevButton = computed(() => isScrolling.value
     || maxVisibleItems.value === 0
-    || props.items.length === maxVisibleItems.value
+    || railItemCount.value === maxVisibleItems.value
 )
 
 /**
@@ -118,51 +272,258 @@ const disabledPrevButton = computed(() => isScrolling.value
  */
 const disabledNextButton = computed(() => isScrolling.value
     || maxVisibleItems.value === 0
-    || props.items.length === maxVisibleItems.value
+    || railItemCount.value === maxVisibleItems.value
 )
 
 /**
- * Show the next slide
+ * Whether any content is parked off-screen at all.
  */
-function showNextSlide() {
-    if (disabledNextButton.value) return
+const isScrollable = computed(() => maxVisibleItems.value > 0
+    && railItemCount.value > maxVisibleItems.value
+)
 
-    if (activeSlideIndex.value === slides.value.length - 1) {
-        activeSlideIndex.value = 0
-    } else {
-        activeSlideIndex.value++
-    }
+/**
+ * Which items are on screen, as 1-based positions.
+ *
+ * Ids are `<sliderId>:<position>`, so the position is the second segment.
+ * `generateItemId` above is the other half of that contract — change the
+ * separator there and this parse has to change with it. Integers only, because
+ * `Number('')` is 0, not NaN, and a position of 0 would read as "before the
+ * first card" and silently take the wrap branch below.
+ */
+const visibleItemPositions = computed(() => visibleItemIds.value
+    .map((id) => Number(id.split(':')[1]))
+    .filter((position) => Number.isInteger(position) && position >= 1)
+)
+
+/**
+ * Where the rail actually sits, as 1-based positions.
+ *
+ * Both fall back to 1 when nothing is fully visible. That state is unreachable
+ * from either arrow — an empty set means `maxVisibleItems` is 0, which disables
+ * every arrow in both modes — so the fallback is here to keep the computeds
+ * total, not to degrade paging to something smaller.
+ */
+const firstVisiblePosition = computed(() => {
+    if (visibleItemPositions.value.length === 0) return 1
+
+    return _.min(visibleItemPositions.value)
+})
+
+const lastVisiblePosition = computed(() => {
+    if (visibleItemPositions.value.length === 0) return 1
+
+    return _.max(visibleItemPositions.value)
+})
+
+/**
+ * Whether there is anything to reach in either direction, from where the rail
+ * currently sits.
+ *
+ * Derived from the observed positions rather than from `useScroll`'s
+ * `arrivedState`, which is measured once on mount and thereafter only inside its
+ * own scroll handler — it observes neither resize nor mutation. A rail that
+ * mounts with no items measures as already arrived at the right edge, and items
+ * fetched after mount fire no scroll event, so the next arrow would latch
+ * disabled for the life of the page. From `lg` up that arrow is the only way to
+ * move the rail, so the whole feature would be quietly dead. The intersection
+ * observer reacts to layout, so these cannot go stale.
+ *
+ * Deriving both from the same source also means the arrow's disabled state and
+ * the wrap branch in showNextSlide agree by construction, rather than by the two
+ * happening to coincide.
+ *
+ * Excludes `isScrolling` on purpose: folding it in would blink a rail arrow out
+ * and back on every smooth scroll, because the reveal is `:enabled`-gated.
+ */
+const hasPreviousSlide = computed(() => isScrollable.value && firstVisiblePosition.value > 1)
+
+const hasNextSlide = computed(() => isScrollable.value && lastVisiblePosition.value < railItemCount.value)
+
+/**
+ * Fade the edge that has content behind it, so a rail with its arrows hidden
+ * still shows that it moves. Scoped to `hoverActions`: that mode is the one
+ * with no resting affordance, and leaving the default header mode untouched
+ * keeps existing consumers as they are.
+ */
+const containerClasses = computed(() => [
+    'rsui-section-slider__container',
+    {
+        'rsui-section-slider__container--fade-start': props.hoverActions && hasPreviousSlide.value,
+        'rsui-section-slider__container--fade-end': props.hoverActions && hasNextSlide.value,
+    },
+])
+
+/**
+ * Announced after the rail settles. Position rather than "moved", because
+ * "showing 5 to 8 of 10" is the thing a screen reader user cannot see and
+ * cannot infer from the scroll itself.
+ */
+const announcement = ref('')
+
+/**
+ * Only announce once the rail has actually been moved. Without this the region
+ * fires on first paint, as the observer reports the opening cards, and a screen
+ * reader opens the page by reading out a position nobody asked for.
+ */
+const hasRailMoved = ref(false)
+
+watch(isScrolling, (scrolling) => {
+    if (scrolling) hasRailMoved.value = true
+})
+
+/**
+ * Announce on settle, not during: `visibleItemIds` churns as cards cross the
+ * edge mid-scroll, and a polite region would queue every one of those and read
+ * them all out after the fact.
+ *
+ * Debounced off the positions rather than fired when `isScrolling` clears. The
+ * visibility flags come from an IntersectionObserver, whose callbacks are
+ * asynchronous and can land after that flag settles — keying off the flag
+ * announced the previous position, which for a live region is worse than
+ * silence.
+ *
+ * Watching the raw array and not first/last, because those fall back to 1 when
+ * nothing is visible: returning to the head of the rail goes
+ * `[4] → [] → … → [1]`, and the empty step already reported 1, so the arrival at
+ * the real position 1 was no change at all and never fired. The array's identity
+ * changes on every recompute, so no transition is invisible.
+ *
+ * `isScrolling` rides along as a second trigger. Across a single instantaneous
+ * jump of several screens the observer coalesces and can drop the final step,
+ * leaving the last position unreported; the scroll flag still settles, and since
+ * the callback reads current state when it fires rather than the value that woke
+ * it, that is enough to catch up.
+ */
+watchDebounced([visibleItemPositions, isScrolling], () => {
+    if (!hasRailMoved.value) return
+    if (!isScrollable.value) return
+    if (visibleItemPositions.value.length === 0) return
+
+    /*
+     * Nothing real on screen — the view-all card is the only fully visible item,
+     * which happens at the end of a narrow rail where one card fills the track.
+     * The clamp below would name the last item as showing when the viewer is not
+     * on an item at all, so say nothing instead.
+     */
+    if (firstVisiblePosition.value > props.items.length) return
+
+    /*
+     * Clamped to the item count, not the rail count. The view-all card sits at
+     * position `items.length + 1`, so once it scrolls into view alongside real
+     * cards an unclamped `lastVisiblePosition` reads "showing 9 to 11 of 10".
+     * Clamping reports the last real item instead, which is what the number is
+     * describing.
+     */
+    const firstItemPosition = _.clamp(firstVisiblePosition.value, 1, props.items.length)
+    const lastItemPosition = _.clamp(lastVisiblePosition.value, 1, props.items.length)
 
-    const activeSlideFirstItemId = slides.value[activeSlideIndex.value][0]
-    const activeSlideFirstElement = document.getElementById(activeSlideFirstItemId)
+    announcement.value = `Showing ${firstItemPosition} to ${lastItemPosition} of ${props.items.length}`
+}, { debounce: 300 })
 
-    activeSlideFirstElement.scrollIntoView({
-        behavior: 'smooth',
+/**
+ * WCAG 1.4.13 wants hover-revealed content that obscures other content to be
+ * dismissable without moving the pointer, and these arrows sit over the cards.
+ * Escape hides them until the pointer leaves the rail.
+ *
+ * Listens on the document rather than the rail because Escape has to work while
+ * the pointer merely hovers — with focus elsewhere, a keydown bound to the rail
+ * would never fire. The trade-off is that Escape pressed for some unrelated
+ * reason (closing a modal, clearing a field) also sets this, on every rail on the
+ * page at once, so the flag is cleared on pointer entry as well as exit —
+ * otherwise arriving at a rail that was dismissed while you were elsewhere would
+ * show no arrows at all.
+ */
+const isNavigationDismissed = ref(false)
+
+useEventListener(document, 'keydown', (event) => {
+    if (!props.hoverActions) return
+    if (event.key !== 'Escape') return
+
+    isNavigationDismissed.value = true
+})
+
+const viewportClasses = computed(() => [
+    'rsui-section-slider__viewport',
+    {
+        'rsui-section-slider__viewport--navigation-dismissed': isNavigationDismissed.value,
+    },
+])
+
+/**
+ * Bring the item at a 1-based position to the left edge of the rail.
+ *
+ * Resolved through the container's own children rather than
+ * `document.getElementById`. Slider ids come from `_.uniqueId`, which counts per
+ * lodash instance, and index.js puts lodash on `window` — so two copies of lodash
+ * on one page hand out the same slider id twice, and a global lookup would
+ * happily scroll a different slider's rail while finding an element and looking
+ * perfectly healthy. Indexing the container cannot address anything outside this
+ * instance, and works inside a shadow root.
+ *
+ * The reduced-motion preference is read at call time rather than cached, so a
+ * mid-session change to the OS setting takes effect without a remount. The
+ * reduced path passes `'instant'`, not `'auto'`: `'auto'` defers to the
+ * stylesheet's `scroll-behavior` rather than overriding it, which would leave
+ * this branch doing nothing on its own. The media query in section_slider.css
+ * still earns its place — it covers swipe and keyboard scrolling, which never
+ * come through here.
+ */
+function scrollToPosition(position) {
+    const clampedPosition = _.clamp(position, 1, railItemCount.value)
+    const targetElement = sliderContainerRef.value?.children[clampedPosition - 1]
+
+    if (!targetElement) return
+
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+    targetElement.scrollIntoView({
+        behavior: prefersReducedMotion ? 'instant' : 'smooth',
         block: 'nearest',
         inline: 'start',
     })
 }
 
 /**
- * Show the previous slide
+ * Page forward from wherever the rail actually sits.
+ *
+ * Positions come off the intersection observer rather than a stored index, which
+ * is the whole point: a swipe, a keyboard tab onto an off-screen card, or any
+ * programmatic scroll used to leave a stored index stale, so the next press
+ * moved relative to a position the user had long since scrolled past.
+ *
+ * Wrapping back to the head is kept from the previous behaviour, for the header
+ * arrows that still rely on it. In rail mode it is unreachable by construction:
+ * `hasNextSlide` is false on exactly the condition tested here, so the arrow is
+ * already disabled.
  */
-function showPreviousSlide() {
-    if (disabledPrevButton.value) return
+function showNextSlide() {
+    if (!isScrollable.value) return
 
-    if (activeSlideIndex.value === 0) {
-        activeSlideIndex.value = slides.value.length - 1
-    } else {
-        activeSlideIndex.value--
+    if (lastVisiblePosition.value >= railItemCount.value) {
+        scrollToPosition(1)
+
+        return
     }
 
-    const activeSlideFirstItemId = slides.value[activeSlideIndex.value][0]
-    const activeSlideFirstElement = document.getElementById(activeSlideFirstItemId)
+    scrollToPosition(lastVisiblePosition.value + 1)
+}
 
-    activeSlideFirstElement.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-        inline: 'start',
-    })
+/**
+ * Page back from wherever the rail actually sits. Wrapping lands on the final
+ * whole page rather than the last item, so the rail does not come to rest with a
+ * single card and a screenful of empty track.
+ */
+function showPreviousSlide() {
+    if (!isScrollable.value) return
+
+    if (firstVisiblePosition.value <= 1) {
+        scrollToPosition(railItemCount.value - maxVisibleItems.value + 1)
+
+        return
+    }
+
+    scrollToPosition(firstVisiblePosition.value - maxVisibleItems.value)
 }
 </script>
 
@@ -187,55 +548,133 @@ function showPreviousSlide() {
                     <slot name="see-all"></slot>
                 </template>
 
-                <template #actions>
+                <template v-if="showHeaderActions" #actions>
                     <slot name="actions"
                         :showNextSlide="showNextSlide"
                         :showPreviousSlide="showPreviousSlide"
                         :disabledPrevButton="disabledPrevButton"
                         :disabledNextButton="disabledNextButton"
                     >
-                        <button class="rsui-section-slider__action"
-                            type="button"
-                            aria-label="Previous"
+                        <SectionSliderAction direction="prev"
                             :disabled="disabledPrevButton"
-                            data-ph-capture-attribute-component="SectionSliderAction"
-                            data-ph-capture-attribute-label="Previous"
+                            :invert="featured"
+                            :context="navigationLabel"
                             @click="showPreviousSlide"
-                        >
-                            <Icon :invert="featured">
-                                <ChevronLeftIcon />
-                            </Icon>
-                        </button>
-
-                        <button class="rsui-section-slider__action"
-                            type="button"
-                            aria-label="Next"
+                        />
+
+                        <SectionSliderAction direction="next"
                             :disabled="disabledNextButton"
-                            data-ph-capture-attribute-component="SectionSliderAction"
-                            data-ph-capture-attribute-label="Next"
+                            :invert="featured"
+                            :context="navigationLabel"
                             @click="showNextSlide"
-                        >
-                            <Icon :invert="featured">
-                                <ChevronRightIcon />
-                            </Icon>
-                        </button>
+                        />
                     </slot>
                 </template>
             </SectionHeader>
         </template>
 
-        <div ref="sliderContainerRef"
-            class="rsui-section-slider__container"
+        <div :class="viewportClasses"
+            @pointerenter="isNavigationDismissed = false"
+            @pointerleave="isNavigationDismissed = false"
         >
-            <SectionSliderItem
-                v-for="(item, index) in items"
-                :key="index"
-                :id="generateItemId(index + 1)"
-                @visible="addVisibleItemId"
-                @hidden="removeVisibleItemId"
+            <!--
+                Ahead of the track in the DOM so the arrows come before the cards
+                in tab order, rather than after all of them. Costs nothing
+                visually: the layer is absolutely positioned with a z-index, so
+                it paints in the same place either way.
+            -->
+            <div v-if="showOverlayActions"
+                class="rsui-section-slider__actions"
+            >
+                <SectionSliderAction direction="prev"
+                    :disabled="!hasPreviousSlide"
+                    :context="navigationLabel"
+                    @click="showPreviousSlide"
+                />
+
+                <SectionSliderAction direction="next"
+                    :disabled="!hasNextSlide"
+                    :context="navigationLabel"
+                    @click="showNextSlide"
+                />
+            </div>
+
+            <div ref="sliderContainerRef"
+                :class="containerClasses"
+                role="list"
+            >
+                <SectionSliderItem
+                    v-for="(item, index) in items"
+                    :key="index"
+                    :id="generateItemId(index + 1)"
+                    @visible="addVisibleItemId"
+                    @hidden="removeVisibleItemId"
+                >
+                    <slot name="item" :item="item"></slot>
+                </SectionSliderItem>
+
+                <!--
+                    A real rail item, not a decoration appended after the track:
+                    it takes the next position id, so the arrows can reach it, the
+                    observer counts it, and it snaps like any other card.
+
+                    A real <button>, too, rather than a div with a click handler.
+                    The whole card is the target, so it needs the keyboard
+                    activation, focus behaviour and accessible name that a button
+                    gets for free — and it takes its name from the slot content,
+                    which is why the label goes directly inside rather than in a
+                    nested control.
+                -->
+                <!--
+                    Keyed on the id so a change of position remounts rather than
+                    patches. This is the one rail item whose id moves — it trails
+                    `items.length` — and SectionSliderItem only emits on a
+                    visibility transition or unmount, never on `id` changing. Left
+                    patched, items arriving after mount would rename the card
+                    while `visibleItemIds` still held its old id, stranding an
+                    entry that nothing can ever remove and pinning
+                    `firstVisiblePosition` at 1 for good. Remounting makes the old
+                    instance emit `hidden` with the id actually in the set.
+                -->
+                <SectionSliderItem v-if="showViewAllCard"
+                    :key="generateItemId(items.length + 1)"
+                    :id="generateItemId(items.length + 1)"
+                    @visible="addVisibleItemId"
+                    @hidden="removeVisibleItemId"
+                >
+                    <button :class="viewAllClasses"
+                        type="button"
+                        data-ph-capture-attribute-component="SectionSliderViewAll"
+                        data-ph-capture-attribute-label="View all"
+                        @click="$emit('view-all', $event)"
+                    >
+                        <!--
+                            Stacked above the label, the way Empty arranges its
+                            image slot. No default icon: Empty can assume one
+                            because it always means the same thing, whereas what
+                            this card leads to is the consumer's business.
+
+                            Sizing is left to Icon/IconCircleBackground, which
+                            size their own SVG child — same expectation Empty
+                            places on its image slot.
+                        -->
+                        <span v-if="slots['view-all-icon']"
+                            class="rsui-section-slider__view-all-icon"
+                        >
+                            <slot name="view-all-icon"></slot>
+                        </span>
+
+                        {{ viewAllLabelText }}
+                    </button>
+                </SectionSliderItem>
+            </div>
+
+            <p class="rsui-section-slider__announcer"
+                role="status"
+                aria-live="polite"
             >
-                <slot name="item" :item="item"></slot>
-            </SectionSliderItem>
+                {{ announcement }}
+            </p>
         </div>
 
         <slot v-if="slots.empty && items.length === 0" name="empty"></slot>

package/src/components/Section/SectionSliderAction.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { computed } from 'vue'
+import { Icon } from '../Icon'
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/outline'
+
+const props = defineProps({
+    direction: {
+        type: String,
+        required: true,
+        validator: (value) => ['prev', 'next'].includes(value),
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    invert: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * What this arrow moves, appended to the accessible name. Several rails on
+     * one page otherwise all announce as a bare "Next, button", which is the
+     * same ambiguity that moving the arrows onto the rail was meant to solve --
+     * except a screen reader user has no rail position to disambiguate from.
+     */
+    context: {
+        type: String,
+        default: '',
+    },
+})
+
+defineEmits(['click'])
+
+const isPrevious = computed(() => props.direction === 'prev')
+
+const isNext = computed(() => props.direction === 'next')
+
+/**
+ * Kept free of `context` on purpose: this value feeds analytics, and folding a
+ * per-consumer label into it would fragment the existing capture.
+ */
+const directionLabel = computed(() => isPrevious.value ? 'Previous' : 'Next')
+
+const accessibleLabel = computed(() => {
+    if (!props.context) return directionLabel.value
+
+    return `${directionLabel.value} ${props.context}`
+})
+</script>
+
+<template>
+    <button class="rsui-section-slider__action"
+        type="button"
+        :aria-label="accessibleLabel"
+        :disabled="disabled"
+        data-ph-capture-attribute-component="SectionSliderAction"
+        :data-ph-capture-attribute-label="directionLabel"
+        @click="$emit('click')"
+    >
+        <Icon :invert="invert">
+            <ChevronLeftIcon v-if="isPrevious" />
+            <ChevronRightIcon v-if="isNext" />
+        </Icon>
+    </button>
+</template>

package/src/components/Section/SectionSliderItem.vue

@@ -34,9 +34,19 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
+    <!--
+        Paired with role="list" on the track in SectionSlider. The rail is a list
+        of cards, not a carousel: nothing is replaced, every item stays in the DOM.
+
+        Explicit roles rather than ul/li because this element is `flex`, and
+        `display: flex` on an li drops the listitem role in Chrome and Safari.
+        Nothing enforces the pairing across the two files, so a consumer using
+        SectionSliderItem outside a role="list" parent produces an orphan listitem.
+    -->
     <div :id="id"
         ref="itemRef"
         class="rsui-section-slider-item"
+        role="listitem"
     >
         <slot></slot>
     </div>

package/src/components/Section/index.js

@@ -2,6 +2,7 @@ import Section from './Section.vue'
 import SectionFooter from './SectionFooter.vue'
 import SectionHeader from './SectionHeader.vue'
 import SectionSlider from './SectionSlider.vue'
+import SectionSliderAction from './SectionSliderAction.vue'
 import SectionSliderItem from './SectionSliderItem.vue'
 
 export {
@@ -9,5 +10,6 @@ export {
     SectionFooter,
     SectionHeader,
     SectionSlider,
+    SectionSliderAction,
     SectionSliderItem,
 }

package/src/components/Switcher/Switcher.vue

@@ -20,6 +20,25 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    // Outlines the track and lifts the selected item with a shadow, for a switcher on a
+    // surface that is not white — the track is marginally *lighter* than a secondary
+    // Section, so it does not read as a container there at all. See switcher.css for the
+    // token derivation. No effect under `chips`, which has no track. Opt-in.
+    bordered: {
+        type: Boolean,
+        default: false,
+    },
+    // Keeps the options on one row below `sm` rather than stacking them, which suits a
+    // segmented control with long labels but turns a two-option Cards/Table toggle into
+    // two full-width rows.
+    //
+    // Pair it with `full`: `inline` sets the direction, `full` gives it a row to split.
+    // On its own the container still shrink-wraps, so there is no row to share. No effect
+    // under `chips`, which is already an unstacked row. Opt-in.
+    inline: {
+        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: {
@@ -48,6 +67,8 @@ function setActiveItem(item) {
     :class="{
         'rsui-switcher--full': props.full,
         'rsui-switcher--chips': props.chips,
+        'rsui-switcher--bordered': props.bordered,
+        'rsui-switcher--inline': props.inline,
     }"
     role="tablist"
     :aria-label="props.ariaLabel"