@redseed/redseed-ui-vue3 8.61.0 → 8.63.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.63.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/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/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>