srcdev-nuxt-components 9.3.9 → 9.3.11

package/app/components/01.atoms/grids/grid-stack/GridStack.vue

@@ -25,6 +25,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
   .grid-stack {
     display: grid;
     grid-template-areas: "stack";
+    grid-template-rows: 100%;
 
     .grid-stack__layer {
       grid-area: stack;

package/app/components/03.organisms/services/service-detail/CONSUMER-STYLING.md

@@ -37,7 +37,7 @@ compose.
 | Token | Default | Controls |
 |---|---|---|
 | `--service-detail-hero-border-radius` | `0.8rem` | Corner rounding on the hero (clips the image/content layers — set to `0` for a true edge-to-edge bleed hero) |
-| `--service-detail-hero-content-align` | `end` | `align-content` of the content overlay grid — where the breadcrumb/title/pills sit within the hero's block axis (`end` = bottom-anchored) |
+| `--service-detail-hero-content-align` | `end` | `align-content` on `.service-detail__hero-content` (the breadcrumb/title/pills wrapper) — where that content sits within the hero's block axis (`end` = bottom-anchored) |
 | `--service-detail-hero-min-height-mobile` | `32rem` | Hero banner height below the `768px` container breakpoint. The hero image always fills this height (`object-fit`/`object-position` control cropping) |
 | `--service-detail-hero-min-height-tablet` | `36rem` | Hero banner height from the `768px` container breakpoint |
 | `--service-detail-hero-min-height-desktop` | `42rem` | Hero banner height from the `1024px` container breakpoint |

package/app/components/03.organisms/services/service-detail/ServiceDetail.vue

@@ -282,6 +282,7 @@ watch(
         .service-detail__hero-image-row,
         .service-detail__hero-overlay {
           height: 100%;
+          grid-template-rows: 100%;
         }
       }
 
@@ -301,7 +302,6 @@ watch(
       .service-detail__hero-overlay {
         display: grid;
         height: 100%;
-        align-content: var(--service-detail-hero-content-align, end);
         padding-block: var(--service-detail-hero-padding, 3.2rem);
         background: var(
           --service-detail-hero-scrim,
@@ -309,6 +309,9 @@ watch(
         );
 
         .service-detail__hero-content {
+          display: grid;
+          align-content: var(--service-detail-hero-content-align, end);
+
           .service-detail__breadcrumb {
             --breadcrumb-colour: var(--service-detail-hero-text-colour, white);
             margin-block-end: var(--service-detail-breadcrumb-margin-block-end, 0.8rem);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.3.9",
+  "version": "9.3.11",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",