@redseed/redseed-ui-vue3 8.63.0 → 8.64.0

package/package.json

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