@redseed/redseed-ui-vue3 8.67.0 → 8.69.0

package/package.json

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

package/src/components/Card/Card.vue

@@ -66,6 +66,39 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    // CATEGORY colour, which is a different job from the semantic variants above.
+    // `brand`/`success`/`error` and friends say what STATE a thing is in; they
+    // cannot say which taxonomy a thing BELONGS to (a capability domain, a team, a
+    // location, a pathway), and there are always more categories than the semantic
+    // set has slots.
+    //
+    // Takes the name of a RUNTIME CSS custom property, applied as
+    // `var(--<color>, <neutral>)` — the same convention and the same neutral
+    // degrade as Pill's `color` prop, so the two components stay consistent and
+    // RSUI stays theme-agnostic. Pass a real runtime theme variable, e.g. the
+    // consuming app's palette (`color7` -> `var(--color7)`). NOTE: RSUI's own
+    // Tailwind `@theme` tokens (e.g. `--color-brand-500`) are inlined into
+    // utilities, not exposed as runtime vars, so they will NOT resolve here. An
+    // UNRESOLVABLE (undefined) token degrades to a neutral grey rather than an
+    // invisible bar; a token that *resolves* to `transparent`/empty is not caught.
+    //
+    // On its own this prop paints nothing — it needs `accent` to say which edge
+    // carries it.
+    color: {
+        type: String,
+        default: '',
+    },
+    // Which edge carries the category accent bar. Default 'none', so nothing
+    // changes for any existing consumer. Thickness is NOT a consumer decision —
+    // it comes from a token (see --rsui-card-accent-w in card.css). That is the
+    // whole point of the prop: the same concept was hand-rolled twice on one page
+    // at two different weights (4px and 3px) precisely because nothing told the
+    // author what the weight should be.
+    accent: {
+        type: String,
+        default: 'none',
+        validator: (value) => ['left', 'top', 'none'].includes(value),
+    },
     ariaLabel: {
         type: String,
         default: undefined,
@@ -110,6 +143,16 @@ const ariaCurrent = computed(() => {
 // conveyed by colour alone (WCAG 1.4.1).
 const isActive = computed(() => props.pressed === true || Boolean(props.current))
 
+// The accent token is only set when a color is supplied; otherwise the property
+// is left unset so the CSS neutral fallback applies. When it IS supplied it
+// carries an inline fallback to the neutral grey, so an unresolvable token
+// degrades to grey rather than to an invisible edge. Mirrors Pill exactly.
+const accentStyle = computed(() =>
+    props.color
+        ? { '--rsui-card-accent': `var(--${props.color}, var(--Colors-Grey-500))` }
+        : {},
+)
+
 const slots = useSlots()
 
 const cardElement = ref(null)
@@ -130,6 +173,8 @@ const cardClass = computed(() => [
         'rsui-card--warning': props.warning,
         'rsui-card--error': props.error,
         'rsui-card--draft': props.draft,
+        'rsui-card--accent-left': props.accent === 'left',
+        'rsui-card--accent-top': props.accent === 'top',
         'rsui-card--2xs': responsiveWidth.value['2xs'],
         'rsui-card--xs': responsiveWidth.value['xs'],
         'rsui-card--sm': responsiveWidth.value['sm'],
@@ -170,7 +215,7 @@ function onClick() {
 }
 </script>
 <template>
-    <div ref="cardElement" :class="cardClass" data-testid="card">
+    <div ref="cardElement" :class="cardClass" :style="accentStyle" data-testid="card">
         <svg
             v-if="draft"
             class="rsui-card__draft-border"

package/src/components/Card/CheckboxCard.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from 'vue'
+import { computed, ref, useSlots, watch } from 'vue'
 import Card from './Card.vue'
 import CardHeader from './CardHeader.vue'
 import FormFieldCheckbox from '../FormField/FormFieldCheckbox.vue'
@@ -31,6 +31,14 @@ const props = defineProps({
 
 const emit = defineEmits(['check', 'uncheck', 'change'])
 
+const slots = useSlots()
+
+// Whether anything renders BELOW the header. When nothing does, the card is header-only
+// and the header has to pay its own bottom padding — it is styled `pb-0` and normally
+// borrows its bottom edge from the body's padding, so without this a title-only card sits
+// flush against its own border.
+const hasBody = computed(() => Boolean(slots.default || slots.meta))
+
 const isChecked = ref(props.checked)
 
 watch(() => props.checked, (val) => {
@@ -66,6 +74,7 @@ function onFieldInput() {
             :showMoreActions="showMoreActions"
             :showDivider="false"
             :singleLine="false"
+            :headerOnlyCard="!hasBody"
         >
             <div class="rsui-checkbox-card__title-row">
                 <div class="rsui-checkbox-card__field">
@@ -102,7 +111,13 @@ function onFieldInput() {
         </CardHeader>
     </template>
 
-    <slot></slot>
+    <!-- v-if, not a bare <slot>. Card already guards its body with
+         `v-if="$slots.default || $slots.meta"`, but a bare <slot> here counts as a default
+         slot whether or not the consumer filled it, so that guard could never fire and a
+         title-only task card still rendered an empty padded body. -->
+    <template #default v-if="$slots.default">
+        <slot></slot>
+    </template>
 
     <template #meta v-if="$slots.meta">
         <slot name="meta"></slot>