@redseed/redseed-ui-vue3 10.5.0 → 10.5.1

package/package.json

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

package/src/components/Section/SectionHeader.vue

@@ -213,6 +213,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 +227,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"
@@ -238,23 +264,7 @@ const titleTag = computed(() => HEADING_LEVELS.includes(String(props.headingLeve
             <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() },
             ]">
-                <!--
-                    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',