@redseed/redseed-ui-vue3 10.5.0 → 11.0.0

package/package.json

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

package/src/components/Disclosure/Disclosure.vue

@@ -29,7 +29,6 @@ const props = defineProps({
 
 const emit = defineEmits(['click'])
 
-const triggerId = _.uniqueId('disclosure-trigger-')
 const contentId = _.uniqueId('disclosure-content-')
 
 const isOpen = ref(props.open)
@@ -139,14 +138,15 @@ watch(isOpen, (open, wasOpen) => {
 }, { flush: 'sync' })
 
 /**
- * Each teleport target's current element, or null while it is absent.
+ * The content teleport target's current element, or null while it is absent.
  *
  * Re-checked rather than latched. These used to only ever flip true, and the
  * observer disconnected once both had been found — so a consumer that removed a
  * target left a Teleport mounted against nothing and the trigger vanished.
- * `SectionHeader` does exactly that: it width-gates the slots a target is
- * mounted into, so narrowing a header past 640px took the trigger away and the
- * section could no longer be opened. See #372.
+ * `SectionHeader` did exactly that: it width-gated the slots a target was mounted
+ * into, so narrowing a header past 640px took the trigger away and the section
+ * could no longer be opened (#372). The trigger no longer teleports at all (#408);
+ * the content still does, because 27 consumers still place a content pad.
  *
  * The element itself goes to `to`, not an `#id` selector. Vue resolves a
  * selector once, when the Teleport mounts, and never again when only
@@ -156,13 +156,11 @@ watch(isOpen, (open, wasOpen) => {
  * changed `to` is re-resolved, so a target that appears late or is re-created
  * gets the content moved into the live element.
  */
-const triggerTarget = shallowRef(null)
 const contentTarget = shallowRef(null)
 
 let observer = null
 
 function setTeleport() {
-    triggerTarget.value = document.getElementById(triggerId)
     contentTarget.value = document.getElementById(contentId)
 }
 
@@ -189,39 +187,41 @@ onBeforeUnmount(() => {
     <div class="rsui-disclosure">
         <slot name="child"
             :isOpen="isOpen"
-            :triggerId="triggerId"
             :contentId="contentId"
             :handleTrigger="handleTrigger"
         ></slot>
     </div>
 
     <!--
-        `disabled` rather than `v-if`, so the trigger renders in place when the
-        consumer supplies no target instead of not rendering at all.
+        Rendered IN PLACE. There is no trigger Teleport any more.
 
-        There used to be no second branch: `<Teleport v-if="canTeleportTrigger">`
-        and nothing else, so a missing target meant no trigger ANYWHERE rather
-        than one in a less good place. `SectionHeader` width-gates the slots a
-        target is mounted into, so below 640px of its OWN width — container, not
-        viewport — a section simply could not be opened. See #372.
+        It used to be teleported into an empty `<div :id="triggerId">` the consumer left
+        somewhere in their own markup, and every failure this component has had came from
+        that handoff — a pad in a width-gated slot (#372), a pad removed by
+        `:showMoreActions="false"` (#407), banned utility classes to sit a pad beside a
+        title. `collapsible` on SectionHeader and CardHeader replaced it: the header asks
+        whether it is inside a Disclosure and renders the trigger itself.
 
-        Vue's own `disabled` keeps this as one definition rendered in one of two
-        places, rather than two copies that can drift.
+        With no consumer placing a trigger pad, the Teleport had nothing to do — it was
+        already `:disabled` for every one of them, which renders exactly here. So this is
+        not a behaviour change, it is the removal of a branch nothing took. See #408.
+
+        A consumer wanting the trigger somewhere specific puts a `collapsible` header
+        there, or writes `<DisclosureTrigger>` where they want it.
     -->
-    <Teleport v-if="rendersOwnTrigger"
-        :to="triggerTarget"
-        :disabled="!triggerTarget"
-    >
+    <!--
+        Gated as a whole, not just the default content. A header that claims the trigger
+        (`collapsible`) suppresses this ENTIRELY, so a consumer supplying a custom `#trigger`
+        alongside a collapsible header gets one control rather than two. That is what the
+        Teleport's own `v-if` used to do, and dropping it to the default slot content alone
+        would have quietly changed it.
+    -->
+    <template v-if="rendersOwnTrigger">
         <slot name="trigger"
             :handleTrigger="handleTrigger"
             :isOpen="isOpen"
             :contentId="contentId"
         >
-            <!--
-                The markup itself moved to DisclosureTrigger so a header can render
-                the same button in its own title row. Rendered here it is unchanged:
-                ButtonSlot treats an unset size prop and a false one alike.
-            -->
             <DisclosureTrigger
                 :sm="$attrs.sm"
                 :md="$attrs.md"
@@ -231,7 +231,7 @@ onBeforeUnmount(() => {
                 :full="$attrs.full"
             />
         </slot>
-    </Teleport>
+    </template>
 
     <!-- Same reasoning as the trigger above: in place rather than nowhere. -->
     <Teleport :to="contentTarget"

package/src/components/Section/SectionHeader.vue

@@ -72,19 +72,27 @@ const props = defineProps({
         default: false,
     },
     /**
-     * Keep the badge on the title line on a narrow header.
+     * Drop the badge onto its own line on a narrow header.
      *
-     * `--stacked` puts `basis-full` on the title text, so below 640px the badge does
-     * not wrap when it runs out of room — it ALWAYS starts a new line. A group header
-     * carrying a count then stacks three rows above the first card, which is the second
-     * of the two reasons TeamCoachingIndex gives for hand-placing its badge inside the
-     * title rather than using `#badge` at all.
+     * OPT-IN. It used to be the default, with `inlineBadge` to turn it off, and that was the
+     * wrong way round — BREAKING, hence the major.
      *
-     * Separate from `collapsible` on purpose: a collapsible section does not necessarily
-     * want an inline badge, and a badge-carrying section need not collapse. Default
-     * false, so no existing header moves. See #407.
+     * The slot is a count. The Section standards say so outright ("a badge in a section
+     * header says how many, not how it is going"), and 12 of 17 lms1 call sites are counts:
+     * `filteredCount`, `categoryGroup.count`, group counts. A number on its own line is
+     * severed from the thing it counts.
+     *
+     * `PageHeader` already settled the layout: its `__status` badge sits in
+     * `__title-text-container` with `items-center` and has no narrow branch at all.
+     *
+     * Measured before the flip: a 25px badge with 211px of clear room beside it still went
+     * to row two, costing 26px of header height for nothing. Of four test cases only one had
+     * a title long enough to need the wrap.
+     *
+     * Kept rather than deleted, because stacking is defensible when it is CHOSEN — a long
+     * label badge, rather than a count, may genuinely want its own line. See #407.
      */
-    inlineBadge: {
+    stackBadge: {
         type: Boolean,
         default: false,
     },
@@ -213,6 +221,11 @@ const titleTag = computed(() => HEADING_LEVELS.includes(String(props.headingLeve
         {
             'rsui-section-header--divider': showDivider,
             'rsui-section-header--clickable': isClickable,
+            // Direction driven by the SAME measurement as everything else in here.
+            // It used to come from `md:` — a viewport query at 768 — while the icon
+            // gate, the actions swap and the badge stacking all read the container at
+            // 640, so a narrow column on a wide screen got both layouts at once. #420.
+            'rsui-section-header--narrow': !responsiveWidth.specific,
         }
     ]"
     :role="isClickable ? 'button' : undefined"
@@ -222,6 +235,27 @@ const titleTag = computed(() => HEADING_LEVELS.includes(String(props.headingLeve
 >
     <div class="rsui-section-header__header">
 
+        <!--
+            The chevron takes the LEADING position, beside the text block rather than
+            inside the title — the same spot `#icon` occupies, and the same shape
+            `CardHeader` and `PageHeader` both use for `#avatar`.
+
+            It used to sit inside `__title`, copied from the coaching index prototype,
+            which hand-rolled it into a span in the title because it had no slot to use.
+            That indented the title and left the subtitle at the header's own edge, 46px
+            adrift from the heading it belongs to — three edges where there should be two.
+            Here the whole of `__text` (title, badge, subtitle) indents past it together.
+
+            Its own element, NOT the `#icon` slot: that slot is width-gated and a control
+            must not vanish on a narrow header (#372). `__header` is already `items-start`,
+            so it lands on the title's line rather than centring against the block. #407.
+        -->
+        <div v-if="rendersTrigger()"
+            class="rsui-section-header__trigger"
+        >
+            <DisclosureTrigger sm />
+        </div>
+
         <!-- Icon slot, optional — hidden on narrow sections -->
         <div class="rsui-section-header__icon"
             v-if="$slots.icon && responsiveWidth.specific"
@@ -237,24 +271,8 @@ const titleTag = computed(() => HEADING_LEVELS.includes(String(props.headingLeve
             <!-- Title slot, default slot -->
             <div :class="[
                 'rsui-section-header__title',
-                { 'rsui-section-header__title--stacked': !responsiveWidth.specific && !inlineBadge },
-                // --stacked gives the title text `basis-full`, which takes the whole row and
-                // strands the trigger on the line above it. Same class of defect CardHeader
-                // had, and it carries the same modifier name.
-                { 'rsui-section-header__title--with-trigger': rendersTrigger() },
+                { 'rsui-section-header__title--stacked': !responsiveWidth.specific && stackBadge },
             ]">
-                <!--
-                    First child of the TITLE row, not a sibling of the whole text block
-                    the way `#icon` is: `__icon` centres against title AND subtitle
-                    together, so with a subtitle present the chevron drifts off the line
-                    it belongs to. `sm` matches the ACTION SIZE guidance in
-                    section_header.css.
-                -->
-                <div v-if="rendersTrigger()"
-                    class="rsui-section-header__trigger"
-                >
-                    <DisclosureTrigger sm />
-                </div>
                 <component :is="titleTag"
                     :class="[
                         'rsui-section-header__title-text',