@redseed/redseed-ui-vue3 8.62.0 → 8.64.0

package/package.json

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

package/src/components/Button/ButtonPrimary.vue

@@ -7,6 +7,12 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    // Declared rather than left to fall through: a prop named onXxx is ambiguous
+    // with an event listener, so it is forwarded by name. See ButtonSlot.
+    onColor: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 const buttonClass = computed(() => [
@@ -17,7 +23,7 @@ const buttonClass = computed(() => [
 ])
 </script>
 <template>
-<ButtonSlot :class="buttonClass">
+<ButtonSlot :class="buttonClass" :on-color="props.onColor">
     <slot></slot>
 </ButtonSlot>
 </template>

package/src/components/Button/ButtonPrimaryFull.vue

@@ -1,15 +1,21 @@
 <script setup>
 import ButtonPrimary from './ButtonPrimary.vue'
 
-defineProps({
+// Forwarded by name for the same reason ButtonPrimary declares it: a prop called onXxx
+// is ambiguous with an event listener, so it is not left to fall through.
+const props = defineProps({
     invert: {
         type: Boolean,
         default: false,
     },
+    onColor: {
+        type: Boolean,
+        default: false,
+    },
 })
 </script>
 <template>
-<ButtonPrimary full :invert="invert">
+<ButtonPrimary full :on-color="props.onColor" :invert="props.invert">
     <slot></slot>
 </ButtonPrimary>
 </template>

package/src/components/Button/ButtonSecondary.vue

@@ -1,8 +1,22 @@
 <script setup>
+import { computed } from 'vue'
 import ButtonSlot from './ButtonSlot.vue'
+
+const props = defineProps({
+    // Declared rather than left to fall through: a prop named onXxx is ambiguous
+    // with an event listener, so it is forwarded by name. See ButtonSlot.
+    onColor: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const buttonClass = computed(() => [
+    'rsui-button-secondary',
+])
 </script>
 <template>
-<ButtonSlot class="rsui-button-secondary">
+<ButtonSlot :class="buttonClass" :on-color="props.onColor">
     <slot></slot>
 </ButtonSlot>
 </template>

package/src/components/Button/ButtonSecondaryFull.vue

@@ -1,8 +1,17 @@
 <script setup>
 import ButtonSecondary from './ButtonSecondary.vue'
+
+// Forwarded by name for the same reason ButtonSecondary declares it: a prop called onXxx
+// is ambiguous with an event listener, so it is not left to fall through.
+const props = defineProps({
+    onColor: {
+        type: Boolean,
+        default: false,
+    },
+})
 </script>
 <template>
-<ButtonSecondary full>
+<ButtonSecondary full :on-color="props.onColor">
     <slot></slot>
 </ButtonSecondary>
 </template>

package/src/components/Button/ButtonSlot.vue

@@ -35,6 +35,22 @@ const props = defineProps({
         default: 'center',
         validator: (value) => ['left', 'center', 'right'].includes(value)
     },
+    // Set when the button sits on a COLOURED or DARK surface — a tonal PageHeader
+    // band, a toned MetricCard, the AI insight panel. Every variant is drawn for a
+    // light ground and has no correct rendering on a dark one: secondary's white
+    // fill disappears, tertiary's ink goes near-invisible.
+    //
+    // Named to match BodyText's and StageDial's `onColor` rather than the existing
+    // `invert` on Primary and Danger, which is a different thing: invert means a
+    // transparent fill with brand ink, an outline treatment for a LIGHT surface.
+    // The two compose.
+    //
+    // The ink for the filled treatment comes from the surface, through
+    // --rsui-button-on-color-ink — the button cannot know what it is sitting on.
+    onColor: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 defineEmits(['click'])
@@ -90,6 +106,9 @@ const buttonSlotClass = computed(() => [
         // button full width
         'rsui-button-slot--full': props.full,
 
+        // button on a coloured or dark surface
+        'rsui-button-slot--on-color': props.onColor,
+
         // button alignment
         'rsui-button-slot--left': props.alignment === 'left',
         'rsui-button-slot--center': props.alignment === 'center',

package/src/components/Button/ButtonTertiary.vue

@@ -1,8 +1,22 @@
 <script setup>
+import { computed } from 'vue'
 import ButtonSlot from './ButtonSlot.vue'
+
+const props = defineProps({
+    // Declared rather than left to fall through: a prop named onXxx is ambiguous
+    // with an event listener, so it is forwarded by name. See ButtonSlot.
+    onColor: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const buttonClass = computed(() => [
+    'rsui-button-tertiary',
+])
 </script>
 <template>
-<ButtonSlot class="rsui-button-tertiary">
+<ButtonSlot :class="buttonClass" :on-color="props.onColor">
     <slot></slot>
 </ButtonSlot>
 </template>

package/src/components/Button/ButtonTertiaryFull.vue

@@ -1,8 +1,17 @@
 <script setup>
 import ButtonTertiary from './ButtonTertiary.vue'
+
+// Forwarded by name for the same reason ButtonTertiary declares it: a prop called onXxx
+// is ambiguous with an event listener, so it is not left to fall through.
+const props = defineProps({
+    onColor: {
+        type: Boolean,
+        default: false,
+    },
+})
 </script>
 <template>
-<ButtonTertiary full>
+<ButtonTertiary full :on-color="props.onColor">
     <slot></slot>
 </ButtonTertiary>
 </template>

package/src/components/Card/Card.vue

@@ -27,6 +27,17 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    // The AI family at full strength: a BOLD dark surface rather than the pale
+    // lilac wash `ai` gives. Every other Card variant is a light tint, so this is
+    // the first card that has to carry light type — it adapts CardHeader's ink and
+    // flips the hover scrim, both of which assume a light ground.
+    //
+    // BodyText inside it is NOT adapted: that component has its own `onColor` prop,
+    // which is the explicit route and would only fight an override from here.
+    aiBold: {
+        type: Boolean,
+        default: false,
+    },
     secondary: {
         type: Boolean,
         default: false,
@@ -111,6 +122,7 @@ const cardClass = computed(() => [
         'rsui-card--clickable': props.clickable && !props.disabled,
         'rsui-card--bordered': props.bordered,
         'rsui-card--ai': props.ai,
+        'rsui-card--ai-bold': props.aiBold,
         'rsui-card--secondary': props.secondary,
         'rsui-card--brand': props.brand,
         'rsui-card--success': props.success,

package/src/components/Card/CardHeader.vue

@@ -14,6 +14,12 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    // Matches showBadge and showSubtitle: the slot is opt-in by being filled, and
+    // this exists so a consumer can suppress it without unbinding the slot.
+    showEyebrow: {
+        type: Boolean,
+        default: true,
+    },
     showSubtitle: {
         type: Boolean,
         default: true,
@@ -26,9 +32,14 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    // Default false: Material 3 cards are one continuous padded surface, and a
+    // full-bleed rule between the header and the body made every card read as two
+    // stacked boxes rather than one tile. Still available for the cases that want
+    // it — a header over a table, or a disclosure — where it separates two genuinely
+    // different regions rather than splitting one.
     showDivider: {
         type: Boolean,
-        default: true,
+        default: false,
     },
     singleLine: {
         type: Boolean,
@@ -95,6 +106,19 @@ function handleMoreActionsClick() {
 
         <div class="rsui-card-header__text">
 
+            <!--
+                Eyebrow slot, optional. ABOVE the title, which is the one position
+                the header had no slot for: badge and subtitle both render below it
+                and the flex column has no order overrides, so there was no way to
+                put a label over a card title without hand-rolling the header.
+                Takes plain text or a badge — BadgeRedSeedAI is the common case.
+            -->
+            <div class="rsui-card-header__eyebrow"
+                v-if="showEyebrow && $slots.eyebrow"
+            >
+                <slot name="eyebrow"></slot>
+            </div>
+
             <!-- Title slot, default slot -->
             <div class="rsui-card-header__title-container">
                 <div :class="[
@@ -119,13 +143,6 @@ function handleMoreActionsClick() {
             >
                 <slot name="subtitle"></slot>
             </div>
-
-            <!-- Badge slot, optional -->
-            <div class="rsui-card-header__badge"
-                v-if="showBadge && $slots.badge"
-            >
-                <slot name="badge"></slot>
-            </div>
         </div>
 
         <!-- Actions slot, optional -->
@@ -158,6 +175,15 @@ function handleMoreActionsClick() {
         </div>
     </div>
 
+    <!-- Badge slot, optional. A sibling of __header rather than a child of __text, so it
+         sits on the card's own left edge — level with the body below it — instead of being
+         indented past the avatar with the title. -->
+    <div class="rsui-card-header__badge"
+        v-if="showBadge && $slots.badge"
+    >
+        <slot name="badge"></slot>
+    </div>
+
     <!-- Mobile actions slot, optional -->
     <div class="rsui-card-header__actions-mobile"
         v-if="showActions && !responsiveWidth.specific && $slots.actions"

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/MetaInfo/MetaInfo.vue

@@ -16,6 +16,18 @@ const props = defineProps({
         type: Boolean,
         default: false
     },
+    // Size ramp. Booleans, only one applies at a time — the library convention, and
+    // the same three steps StageDial uses. `sm` is the default and renders exactly
+    // as the unnamed default did, so nothing changes for existing consumers.
+    //
+    // Note the names sit one step below the type scale they produce: sm is text-xs,
+    // md is text-sm, lg is text-base. That predates this change and is left alone,
+    // because `md` and `lg` are used in consuming apps and renaming them would be a
+    // breaking change for a cosmetic gain.
+    sm: {
+        type: Boolean,
+        default: false
+    },
     md: {
         type: Boolean,
         default: false
@@ -26,12 +38,23 @@ const props = defineProps({
     }
 })
 
+// Largest flag wins, so passing more than one still gives a defined result. It used
+// to spread the booleans straight onto the class list, which meant `<MetaInfo md lg>`
+// emitted BOTH modifiers and the winner came down to the order meta_info.css
+// happened to be imported in.
+const activeSize = computed(() => {
+    if (props.lg) return 'lg'
+    if (props.md) return 'md'
+    if (props.sm) return 'sm'
+
+    return 'sm'
+})
+
 const metaInfoClass = computed(() => [
     'rsui-meta-info',
+    `rsui-meta-info--${activeSize.value}`,
     {
         'rsui-meta-info--inline': props.inline,
-        'rsui-meta-info--md': props.md,
-        'rsui-meta-info--lg': props.lg,
     }
 ])