@redseed/redseed-ui-vue3 11.0.2 → 11.2.0

package/package.json

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

package/src/components/Card/CardHeader.vue

@@ -46,6 +46,23 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    /**
+     * Keep the actions in the header row, whatever the container measures.
+     *
+     * The swap this overrides treats a narrow container as a phone and drops the actions
+     * under the title. `CardHorizontal` is never a phone: its header sits beside a fixed
+     * thumbnail rail inside a body column, so it is narrow by construction at every width.
+     *
+     * Opt-in and `false` by default, so no existing card moves. Scoped rather than a change
+     * to the rule itself, because the rule is right for a Card — measured on
+     * `InNarrowContainer`, two labelled buttons take 244px of a 398px header and the avatar
+     * takes its share before the title sees any, leaving the title 48px. Capping the toolbar
+     * does not rescue that either; it leaves the title at 95px.
+     */
+    inlineActions: {
+        type: Boolean,
+        default: false,
+    },
     /**
      * Force the overflow menu on, or suppress it.
      *
@@ -155,6 +172,7 @@ const isColumnOnAWiderPage = useColumnOnAWiderPage(cardHeaderWidth)
  * refs read below are still tracked, because the render effect is what calls this.
  */
 function keepsActionsInline() {
+    if (props.inlineActions) return true
     if (responsiveWidth.value.specific) return true
 
     return isColumnOnAWiderPage.value && countsRenderedNodes(slots.actions) === 1

package/src/components/Card/CardHorizontal.vue

@@ -1,7 +1,6 @@
 <script setup>
-import { ref, computed } from 'vue'
-import { useResizeObserver, useMutationObserver } from '@vueuse/core'
 import Card from './Card.vue'
+import CardHeader from './CardHeader.vue'
 
 const props = defineProps({
     /**
@@ -41,72 +40,16 @@ const props = defineProps({
 
 defineEmits(['click'])
 
-/* ── Floating thumbnail detection ────────────────────────────────────────────
-   Adds --floating to the thumbnail whenever the image does not reach the card
-   bottom, so CSS can restore the image's bottom-right radius.
-
-   Two independent conditions trigger floating. clientHeight is integer-rounded, so
-   strict `<` comparisons are stable — sub-pixel gaps (< 0.5 px) round to 0 and
-   produce equal clientHeights, leaving truly-flush images unaffected:
-     1. imgH > 0 && imgH < thumbH
-        Landscape: the loaded img is shorter than the 160px rail.
-        The imgH > 0 guard avoids a false positive on square cards while the
-        Image component's picture is still v-show=false (img.clientHeight = 0).
-     2. thumbH < cardContentH
-        Tall-body: the body column is taller than the 160px thumbnail.
-
-   NOTE: thumbIsFloating applies --floating in both stacked (mobile) and rail
-   (≥512px container) layouts. In the stacked layout the --floating CSS rules are
-   scoped to the @container/card-horizontal block so they have no visual effect —
-   the flag may be true in the stacked layout but is intentionally not guarded here.
-
-   useResizeObserver watches three targets: the thumbnail element, its parent
-   (content wrapper), and the currently-rendered img (currentImg ref — auto-retargets
-   via vueuse's reactive watch when the img reference changes, replacing the manual
-   unobserve/observe swap in the previous hand-rolled implementation).
-   useMutationObserver fires updateFloating when DOM children change in the thumbnail
-   subtree — catches Image component adding its <img> when originalUrl is set after
-   the card has already mounted (skeleton-first / data-loaded-later pattern).
-   All observers auto-cleanup on scope dispose (no onMounted/onUnmounted needed).  */
-
-const thumbEl = ref(null)
-const thumbIsFloating = ref(false)
-const currentImg = ref(null)
-const thumbParent = computed(() => thumbEl.value?.parentElement ?? null)
-
-function updateFloating() {
-    const thumb = thumbEl.value
-    if (!thumb) return
-
-    // Scoped img lookup: prefer the img inside an rsui-image wrapper (the common
-    // case), then fall back to a raw direct-child img. The :scope > img limit
-    // prevents a badge or avatar img nested deeper in the slot from being measured.
-    const img =
-        thumb.querySelector('.rsui-image img') ||
-        thumb.querySelector(':scope > img')
-
-    // Keep currentImg in sync so useResizeObserver(currentImg) auto-retargets
-    // the img observer when a late-appearing element replaces the previous one.
-    currentImg.value = img ?? null
-
-    const imgH = img ? img.clientHeight : 0
-    const thumbH = thumb.clientHeight
-    const cardContentH = thumb.parentElement ? thumb.parentElement.clientHeight : thumbH
-    // imgH > 0 guard on condition 1: while the Image component's picture is v-show=false
-    // (loading / empty state), img.clientHeight is 0. Without the guard a square card would
-    // incorrectly receive --floating at mount; the class self-corrects once the image loads
-    // and condition 1 can be re-evaluated with the real rendered height.
-    //
-    // Strict comparison (no px tolerance): clientHeight is integer-rounded, so a truly-flush
-    // image (sub-pixel gap < 0.5 px) produces equal integer heights and the condition is
-    // false. ANY visible gap (≥ 1 integer px) correctly triggers floating.
-    thumbIsFloating.value = (imgH > 0 && imgH < thumbH) || (thumbH < cardContentH)
-}
-
-useResizeObserver(thumbEl, updateFloating)
-useResizeObserver(thumbParent, updateFloating)
-useResizeObserver(currentImg, updateFloating)
-useMutationObserver(thumbEl, updateFloating, { childList: true, subtree: true })
+/*
+ * No floating-thumbnail detection any more.
+ *
+ * This used to run three ResizeObservers and a MutationObserver per card to work out
+ * whether the image reached the card's bottom, and add `--floating` so the CSS could
+ * put a radius back on its bottom-right corner. That answered a question the rail no
+ * longer asks: the image now covers a rail that fills the card's full height, so it
+ * always reaches the bottom and never carries a radius of its own. See #440 and the
+ * removal note in card_horizontal.css.
+ */
 </script>
 <template>
 <Card
@@ -125,25 +68,59 @@ useMutationObserver(thumbEl, updateFloating, { childList: true, subtree: true })
     </template>
 
     <!-- thumbnail slot: required for the horizontal rail layout.
-         Pass an Image component (originalUrl + alt) to populate the 160px column.
-         An empty slot renders a blank 160px rail gap in the rail layout. -->
-    <div
-        ref="thumbEl"
-        class="rsui-card-horizontal__thumbnail"
-        :class="{ 'rsui-card-horizontal__thumbnail--floating': thumbIsFloating }"
-    >
+         Pass an Image component (originalUrl + alt) to fill the rail — its width is
+         --ch-thumbnail-size and its height is the card's, and the image covers it
+         whatever its source ratio. An empty slot renders a blank rail. -->
+    <div class="rsui-card-horizontal__thumbnail">
         <slot name="thumbnail"></slot>
     </div>
 
     <div class="rsui-card-horizontal__body">
-        <div class="rsui-card-horizontal__content">
-            <div v-if="$slots.title" class="rsui-card-horizontal__title">
-                <slot name="title"></slot>
-            </div>
-            <div v-if="$slots.description" class="rsui-card-horizontal__description">
+        <!--
+            CardHeader, not a title and a description of its own.
+
+            This used to hand-roll both, and the stylesheet admitted it: `__title` carried
+            "The same as .rsui-card-header__title — brand Header 4, Inter Semibold 20/26",
+            and `__meta` "Matches .rsui-card__meta". Both of those comments exist because
+            the copies had already drifted once and had to be re-synced by hand.
+
+            Composing instead means the title role, the subtitle and the actions row come
+            from the component that defines them, and the only thing this file still owns is
+            the thumbnail rail and the meta region beneath it.
+
+            It also gives the card somewhere to put ACTIONS. There was no slot for them, so
+            the one consumer in the product puts its favourite and download buttons inside
+            `#meta` and forces a line break with `w-full` — a row invented at the call site
+            because the component offered nowhere else.
+
+            `singleLine` is false: CardHeader clamps a subtitle to one line at `@md`, and a
+            description here runs to two or three. Nothing clamps it in their place —
+            see the subtitle note at the foot of card_horizontal.css.
+        -->
+        <CardHeader
+            :showAvatar="false"
+            :singleLine="false"
+            inlineActions
+            :showMoreActions="$slots['more-actions'] ? null : false"
+        >
+            <slot name="title"></slot>
+
+            <template v-if="$slots.badge" #badge>
+                <slot name="badge"></slot>
+            </template>
+
+            <template v-if="$slots.description" #subtitle>
                 <slot name="description"></slot>
-            </div>
-        </div>
+            </template>
+
+            <template v-if="$slots.actions" #actions>
+                <slot name="actions"></slot>
+            </template>
+
+            <template v-if="$slots['more-actions']" #more-actions>
+                <slot name="more-actions"></slot>
+            </template>
+        </CardHeader>
 
         <div v-if="$slots.meta" class="rsui-card-horizontal__meta">
             <slot name="meta"></slot>

package/src/components/Category/CategoryList.vue

@@ -156,22 +156,36 @@ function toggle() {
             </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>
+        <!--
+            INSIDE the list, in its own `li`.
+
+            It was a sibling of the `ul`, to keep the toggle out of a list of categories
+            — it is a control, not a category. The cost was a layout one and it was not
+            small: a flex item is atomic, so the button could sit beside the whole list
+            or below it, never after the last badge. Once the badges wrapped to a second
+            row the toggle took a third, with the second row's free space beside it.
+            Measured at 700px: the last badge ended at 180px with 488px empty to its
+            right, and the control sat below at x=0. In the list, it lands at 196 and the
+            component is 60px tall instead of 88.
+
+            `display: contents` on the `ul` would have joined the rows without this, and
+            is why the button was outside in the first place — but it drops list
+            semantics in Chrome and Safari, which is the one thing the row exists to keep.
+            An `li` holding a button keeps them: the list is still a list, with the
+            control that governs it as its last item.
+        -->
+        <li v-if="isCapped" class="rsui-category-list__more-item">
+            <button
+                type="button"
+                class="rsui-category-list__more"
+                :aria-label="toggleAccessibleName"
+                :aria-expanded="isExpanded"
+                @click="toggle"
+            >
+                {{ toggleText }}
+            </button>
+        </li>
+    </ul>
 </div>
 </template>

package/src/components/Icon/IconSlot.vue

@@ -125,9 +125,9 @@ const defaultSize = computed(() =>
 )
 
 /**
- * Default color is primary if no color is specified.
+ * Whether the consumer named a tone at all.
  */
-const defaultColor = computed(() =>
+const hasNoTone = computed(() =>
     !props.primary
     && !props.secondary
     && !props.brand
@@ -158,7 +158,29 @@ const iconClass = computed(() => [
         /**
          * Colors
          */
-        'rsui-icon--primary': props.primary || defaultColor.value,
+        /**
+         * No tone means INHERIT, not primary.
+         *
+         * The tone rules paint the svg (`*:text-…`), and a colour on the svg wins over
+         * anything around it — so defaulting to `primary` made an icon inside a coloured
+         * control render near-black while the control beside it was green. A colour on the
+         * wrapper would have been inherited and therefore overridable, which is the
+         * property that was missing. With no class at all the svg's own `currentColor`
+         * resolves against whatever encloses it. See #428.
+         *
+         * Anywhere the surroundings are already primary ink — body text, headings, most of
+         * a page — that is the same colour it was. Only icons in a coloured control move.
+         *
+         * `background` is the exception, and it is not a leftover. It paints a CONTRAST
+         * SURFACE behind the glyph, and which surface is a question only a tone can answer:
+         * `.rsui-icon--primary.rsui-icon--background` is `bg-background-primary-contrast`.
+         * Without a fallback `IconCircleBackground` and `IconRoundedBackground` — neither
+         * of which passes a tone — would render with no background at all.
+         *
+         * `invert` needed the same partner and no longer does: it carries
+         * `*:text-text-on-color` itself now, which is what it always meant.
+         */
+        'rsui-icon--primary': props.primary || (hasNoTone.value && props.background),
         'rsui-icon--secondary': props.secondary,
         'rsui-icon--brand': props.brand,
         'rsui-icon--success': props.success,