@redseed/redseed-ui-vue3 8.63.0 → 8.65.0

package/index.js

@@ -12,6 +12,7 @@ export * from './src/components/Button'
 export * from './src/components/ButtonGroup'
 export * from './src/components/Card'
 export * from './src/components/CardGroup'
+export * from './src/components/Category'
 export * from './src/components/Chart'
 export * from './src/components/Comment'
 export * from './src/components/Disclosure'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.63.0",
+    "version": "8.65.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/Category/CategoryList.vue

@@ -0,0 +1,177 @@
+<script setup>
+import { ref, computed } from 'vue'
+import Badge from '../Badge/Badge.vue'
+import { isSafeHref } from '../../helpers/href'
+
+const props = defineProps({
+    /**
+     * The categories, in the order the record gives them. Entries are either a string
+     * or `{ label, href }` — see `href` below for when the second form applies.
+     *
+     * Never sorted. The first category is usually the primary one, so alphabetising
+     * throws away the only ordering information the record carries.
+     */
+    items: {
+        type: Array,
+        default: () => [],
+    },
+    /**
+     * Accessible name for the list. A bare row of badges is four unexplained words to a
+     * screen reader; named, it announces as "Categories, list, 4 items".
+     */
+    label: {
+        type: String,
+        default: 'Categories',
+    },
+    /**
+     * How many categories show before the rest are counted. Four is the cap the header
+     * standards set: eight categories is four lines of a phone screen before the meta
+     * even starts.
+     *
+     * Zero — or anything below it — caps nothing, for the rare row that must show in
+     * full. There is deliberately no horizontal-scroller option, for the same reason a
+     * table never scrolls the page sideways.
+     */
+    cap: {
+        type: Number,
+        default: 4,
+    },
+    /**
+     * Toggle labels. `{count}` is substituted rather than concatenated, so a translation
+     * can put the number wherever its grammar needs it.
+     */
+    moreLabel: {
+        type: String,
+        default: '+{count} more',
+    },
+    fewerLabel: {
+        type: String,
+        default: 'Show fewer',
+    },
+    /**
+     * The toggle's accessible name. "+4 more" on its own says nothing about what there
+     * are four more of, and that visible text is otherwise the whole name.
+     *
+     * Each one extends its visible label rather than replacing it, which WCAG 2.5.3
+     * Label in Name requires: a name of "Show all 8 categories" over a button reading
+     * "+4 more" gives a speech-input user nothing to say.
+     */
+    expandLabel: {
+        type: String,
+        default: '+{count} more categories',
+    },
+    collapseLabel: {
+        type: String,
+        default: 'Show fewer categories',
+    },
+})
+
+const emit = defineEmits(['toggle'])
+
+const isExpanded = ref(false)
+
+/**
+ * Strings and `{ label, href }` both arrive here as the same shape, so the template has
+ * one branch rather than two.
+ *
+ * Labels are coerced and trimmed rather than dereferenced: `default: () => []` only
+ * applies to `undefined`, and Vue skips type checking entirely for a `null` on a
+ * non-required prop, so a null label arrives with no warning and `.trim()` on it would
+ * throw out of setup and take the parent subtree down.
+ *
+ * Empty labels are dropped. An empty badge is a rendering artefact — a grey pill with
+ * nothing in it — and it would also count against the cap, pushing a real category into
+ * the hidden remainder.
+ */
+const categories = computed(() => {
+    // Normalise both accepted item shapes, then drop the ones with nothing to render —
+    // done in one chain so an empty label cannot survive as a blank badge.
+    return props.items
+        .map(item => {
+            const isObject = item !== null && typeof item === 'object'
+            const rawLabel = isObject ? item.label : item
+            const rawHref = isObject ? item.href : ''
+            const href = String(rawHref ?? '').trim()
+
+            return {
+                label: String(rawLabel ?? '').trim(),
+                // A refused href degrades to a label rather than to nothing. The category
+                // is still a true fact about the record; only its link was unusable.
+                href: isSafeHref(href) ? href : '',
+            }
+        })
+        .filter(category => category.label !== '')
+})
+
+const isCapped = computed(() => props.cap > 0 && categories.value.length > props.cap)
+
+const visibleCategories = computed(() => {
+    if (!isCapped.value) return categories.value
+    if (isExpanded.value) return categories.value
+
+    return categories.value.slice(0, props.cap)
+})
+
+const hiddenCount = computed(() => categories.value.length - props.cap)
+
+function withCount(template, count) {
+    return String(template ?? '').replace('{count}', count)
+}
+
+const toggleText = computed(() => {
+    if (isExpanded.value) return props.fewerLabel
+
+    return withCount(props.moreLabel, hiddenCount.value)
+})
+
+/**
+ * A disclosure, not a one-way reveal. Removing the toggle on expand would drop keyboard
+ * focus to the body mid-interaction, and `aria-expanded` needs something to describe.
+ * The visible resting state is still just "+4 more".
+ */
+const toggleAccessibleName = computed(() => {
+    if (isExpanded.value) return withCount(props.collapseLabel, props.cap)
+
+    return withCount(props.expandLabel, hiddenCount.value)
+})
+
+function toggle() {
+    isExpanded.value = !isExpanded.value
+
+    emit('toggle', isExpanded.value)
+}
+</script>
+<template>
+<div v-if="categories.length > 0" class="rsui-category-list">
+    <ul class="rsui-category-list__items" :aria-label="label">
+        <li v-for="(category, index) in visibleCategories"
+            :key="index"
+            class="rsui-category-list__item"
+        >
+            <a v-if="category.href !== ''"
+                class="rsui-category-list__link"
+                :href="category.href"
+            >
+                <Badge neutral>{{ category.label }}</Badge>
+            </a>
+            <Badge v-if="category.href === ''" neutral>{{ category.label }}</Badge>
+        </li>
+    </ul>
+
+    <!--
+        Outside the list, because the toggle is not a category. Sibling to the `ul`
+        rather than inside it so the list keeps its semantics: `display: contents` on a
+        `ul` would let the items join this row directly, but it also drops list
+        semantics in Chrome and Safari, which is the one thing the row exists to keep.
+    -->
+    <button v-if="isCapped"
+        type="button"
+        class="rsui-category-list__more"
+        :aria-label="toggleAccessibleName"
+        :aria-expanded="isExpanded"
+        @click="toggle"
+    >
+        {{ toggleText }}
+    </button>
+</div>
+</template>

package/src/components/Category/index.js

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

package/src/components/Layout/PageHeader.vue

@@ -95,6 +95,19 @@ const pageHeaderClass = computed(() => [
             </div>
         </div>
 
+        <!--
+            Between the subtitle and the meta, and outside `__top` for the same reason the
+            meta row is: both are full-width rows under the title block rather than
+            columns beside it.
+
+            Unlike the meta it is never hidden. The meta collapses into a modal below lg
+            because it is a grid of label/value pairs; categories are a wrapping row of
+            badges, and the cap is what keeps them short on a phone.
+        -->
+        <div v-if="$slots['categories']" class="rsui-page-header__categories">
+            <slot name="categories"></slot>
+        </div>
+
         <div v-if="$slots['meta']" class="rsui-page-header__meta">
             <slot name="meta"></slot>
         </div>

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,
     }
 ])
 

package/src/components/Section/SectionFooter.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, watchEffect, useSlots, Comment, Fragment } from 'vue'
+import { isSafeHref } from '../../helpers/href'
 
 const props = defineProps({
     showContent: {
@@ -42,44 +43,16 @@ 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.
+ * `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 unrecognised is refused loudly, since a link that
+ * quietly stops working is the failure this component exists to avoid.
+ *
+ * The rule itself lives in `helpers/href`, because CategoryList builds an anchor
+ * out of a declared prop the same way and two copies of a safety check drift.
  */
-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 isViewAllHrefSafe = computed(() => isSafeHref(rawViewAllHref.value))
 
 const hasViewAllLabel = computed(() => viewAllLabelText.value !== '')
 

package/src/components/Section/SectionHeader.vue

@@ -22,9 +22,14 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    // Default false. It was true, but no CSS rule existed behind the --divider class,
+    // so every consumer has been seeing no rule regardless. The rule exists now; keeping
+    // the default at true would make hairlines appear under every section header in every
+    // app off the back of a spacing fix. False preserves what they actually see today and
+    // makes the prop work for anyone who opts in. Matches CardHeader.
     showDivider: {
         type: Boolean,
-        default: true,
+        default: false,
     },
     noClamp: {
         type: Boolean,

package/src/helpers/href.js

@@ -0,0 +1,46 @@
+/**
+ * Whether a URL is safe to put in an `href` this library renders itself.
+ *
+ * Internal on purpose — not re-exported from `helpers/index.js`. It is a guard for
+ * components that build an anchor out of a declared prop, not a public utility, and
+ * consuming apps have their own escaping rules.
+ *
+ * The rule is the one SectionFooter's view-all link established: a consuming app can
+ * reasonably expect an anchor it did not write to be safe, so `javascript:` and
+ * `data:` — which are script execution, not navigation — are refused, and so is
+ * anything else with an unrecognised scheme.
+ */
+
+/** Schemes an anchor may safely carry. */
+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.
+ */
+function isRelativeHref(href) {
+    const beforeFirstSlash = href.split('/')[0]
+
+    return !beforeFirstSlash.includes(':')
+}
+
+/**
+ * An empty href counts as safe: it means "no link was asked for", which callers handle
+ * by rendering no anchor at all rather than by rejecting it.
+ */
+export function isSafeHref(href) {
+    const trimmed = String(href ?? '').trim()
+
+    if (trimmed === '') return true
+    if (PROTOCOL_RELATIVE.test(trimmed)) return false
+    if (SAFE_HREF_SCHEME.test(trimmed)) return true
+
+    return isRelativeHref(trimmed)
+}