srcdev-nuxt-components 9.6.6 → 9.6.7

package/.claude/skills/components/page-hero-highlights.md

@@ -1,5 +1,7 @@
 # PageHeroHighlights Component
 
+> **Changed 2026-10-16:** `widthConstrained` was inverted in the CSS since it was first added (`true` gave full width, `false` capped the column); it now does what this doc always said. The tablet/desktop gutters never applied (their `@container` queries had no container): the root is now a named `page-hero-highlights` inline-size container and the rows sit in a `.page-hero-highlights-grid` wrapper. Colour defaults are light theme tokens (were `darkblue`/`white`/`black`/`--slate-*`). Equal-width highlights wrap below `--page-hero-highlights-item-min-width` (12rem). Grid tracks are `minmax(0, …)` and items get `overflow-wrap: anywhere`.
+
 > **Changed 2026-09-28:** styles are now in `@layer components` (they were unlayered). Every token is `--page-hero-highlights-*` with its default as a `var()` fallback, so it can be set on the component or any ancestor (previously declared on the root with generic names like `--max-width`, `--highlight-border`, so ancestor values never landed). Inner classes are prefixed (`.page-hero-highlights-header-row`, `-header-slot`, `-strip`, `-content-row`, `-content-slot`); the content-align root classes are `.content-align-start`/`.content-align-center` (were bare `.start`/`.center`); the highlight contract classes are `.page-hero-highlights-item`, `-item-title`, `-item-body` (were `.highlight`, `.title`, `.body`); PageHeroHighlightsHeader uses `.page-hero-highlights-header-start`/`-end` and `--page-hero-highlights-header-*` tokens (were `.phh-*` / `--phh-*`). Full token reference: `CONSUMER-STYLING.md` in the component folder.
 
 ## Overview
@@ -19,7 +21,7 @@ The layout uses a 4-row CSS Grid with `subgrid` — no `translate`, negative mar
 | `tag`                   | `"div" \| "section" \| "main"`                                      | `"div"`     | Root element tag                                                                                                                |
 | `highlightsEqualWidths` | `boolean`                                                           | `false`     | Equal-width grid columns for highlight items                                                                                    |
 | `highlightsJustify`     | `"start" \| "center" \| "end" \| "space-between" \| "space-around"` | `"start"`   | Alignment of highlight items along the main axis                                                                                |
-| `widthConstrained`              | `boolean`                                                           | `false`     | When `true`, caps the central column at `--width-constrained` (default `1064px`). Gutters grow responsively to enforce the constraint. |
+| `widthConstrained`              | `boolean`                                                           | `false`     | When `true`, caps the central column at `--page-hero-highlights-max-width` (default `1064px`). Gutters grow responsively to enforce the constraint. |
 | `contentAlign`          | `"start" \| "center"`                                               | `"center"`  | When `widthConstrained` is `true`: `"center"` grows gutters equally; `"start"` pins content to the left with a fixed left gutter.      |
 | `contentPanel`          | `boolean`                                                           | `true`      | When `true`, renders a decorative panel behind the content slot and offsets the highlights strip. Set to `false` for a flat layout with no backdrop. |
 | `highlightTitleBaseline`| `boolean`                                                           | `false`     | When `true`, fixes the highlight title row to a set height so titles align at a common baseline. Override `--page-hero-highlights-title-height` to tune. |
@@ -166,7 +168,7 @@ See [component-aria-landmark.md](../component-aria-landmark.md) for the full pat
 
 ## Equal-width highlights
 
-By default, highlight items size to their content (`flex-wrap`). Pass `:highlights-equal-widths="true"` to switch to a grid where all items share equal column widths:
+By default, highlight items size to their content (`flex-wrap`). Pass `:highlights-equal-widths="true"` to switch to a grid where all items share equal column widths (`repeat(auto-fit, minmax(min(100%, --page-hero-highlights-item-min-width), 1fr))`), wrapping onto new rows when they'd get narrower than the min width (default `12rem`):
 
 ```vue
 <PageHeroHighlights :highlights-equal-widths="true">
@@ -176,10 +178,10 @@ By default, highlight items size to their content (`flex-wrap`). Pass `:highligh
 
 ## Constraining the central column width
 
-Pass `:width-constrained="true"` to cap the content column at `--width-constrained` (default `1064px`). The gutters grow responsively to enforce it — full-bleed backgrounds are unaffected and `subgrid` continues to work. Use `content-align` to pin to the left or centre:
+Pass `:width-constrained="true"` to cap the content column at `--page-hero-highlights-max-width` (default `1064px`). The gutters grow responsively to enforce it — full-bleed backgrounds are unaffected and `subgrid` continues to work. Use `content-align` to pin to the left or centre:
 
 ```vue
-<!-- Centred, capped at --width-constrained (1064px) -->
+<!-- Centred, capped at --page-hero-highlights-max-width (1064px) -->
 <PageHeroHighlights :width-constrained="true" content-align="center">...</PageHeroHighlights>
 
 <!-- Left-pinned (right side takes remaining space) -->
@@ -190,12 +192,12 @@ The maximum width value and gutter sizes are all CSS tokens — override them vi
 
 ```css
 .my-page-hero {
-  --width-constrained: 1200px;
+  --page-hero-highlights-max-width: 1200px;
   --page-hero-highlights-gutter-desktop: 48px;
 }
 ```
 
-See [css-grid-width-constrained-gutters.md](../css-grid-width-constrained-gutters.md) for the underlying pattern explanation.
+See [css-grid-max-width-gutters.md](../css-grid-max-width-gutters.md) for the underlying pattern explanation.
 
 ## Local style override scaffold
 
@@ -215,40 +217,41 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
 .page-hero-highlights {
   &.my-page-hero {
     /* Grid layout */
-    /* --width-constrained: 1064px; */
+    /* --page-hero-highlights-max-width: 1064px; */
     /* --page-hero-highlights-gutter-mobile: 16px; */
     /* --page-hero-highlights-gutter-tablet: 40px; */
     /* --page-hero-highlights-gutter-desktop: 32px; */
 
     /* Header zone */
-    /* --page-hero-highlights-header-background: darkblue; */
+    /* --page-hero-highlights-header-background: var(--theme-surface-subtle); */
 
     /* Highlights strip */
     /* --page-hero-highlights-strip-gap: 1rem; */
     /* --page-hero-highlights-strip-inset: 1.2rem; */
+    /* --page-hero-highlights-item-min-width: 12rem; */ /* equal-widths wrap point */
 
     /* Highlight cards */
     /* --page-hero-highlights-item-rows-gap: 1.2rem; */
     /* --page-hero-highlights-title-height: 1fr; */ /* see: highlight-title-baseline prop */
     /* --page-hero-highlights-item-padding-block-start: 1.2rem; */
     /* --page-hero-highlights-item-padding: 1.2rem; */
-    /* --page-hero-highlights-item-background: white; */
-    /* --page-hero-highlights-item-border: 1px solid black; */
+    /* --page-hero-highlights-item-background: var(--page-bg, Canvas); */
+    /* --page-hero-highlights-item-border: 1px solid var(--theme-border); */
     /* --page-hero-highlights-item-border-radius: 8px; */
-    /* --page-hero-highlights-item-colour: black; */
+    /* --page-hero-highlights-item-colour: var(--theme-text); */
 
     /* Content zone */
-    /* --page-hero-highlights-content-background: var(--slate-01); */ /* transparent */
+    /* --page-hero-highlights-content-background: transparent; */
     /* --page-hero-highlights-content-start-gap: 1.2rem; */
     /* --page-hero-highlights-content-end-gap: 1.2rem; */
 
     /* Content slot decorative border */
     /* --page-hero-highlights-content-margin-block-start: 2.4rem; */
     /* --page-hero-highlights-content-margin: var(--page-hero-highlights-strip-inset); */
-    /* --page-hero-highlights-panel-background: var(--slate-00); */
-    /* --page-hero-highlights-panel-border: 1px solid var(--slate-06); */
+    /* --page-hero-highlights-panel-background: var(--theme-surface-subtle); */
+    /* --page-hero-highlights-panel-border: 1px solid var(--theme-border); */
     /* --page-hero-highlights-panel-border-radius: 0.8rem; */
-    /* --page-hero-highlights-panel-outline: 1px solid var(--slate-02); */
+    /* --page-hero-highlights-panel-outline: none; */
 
     /* When using :highlight-title-baseline="true" */
     /* --page-hero-highlights-title-height-baseline: 4rem; */ /* proportional value preferred */
@@ -268,10 +271,10 @@ row3: highlights bottom half
 row4: page content (never underflows highlights)
 ```
 
-`.page-hero-highlights-header-row` spans cols 1–3, rows 1–2 (edge-to-edge bg). `.page-hero-highlights-header-slot` is placed in row 1 only.
+All of these sit in `.page-hero-highlights-grid`, the grid inside the root (the root is the size container). `.page-hero-highlights-header-row` spans cols 1–3, rows 1–2 (edge-to-edge bg). `.page-hero-highlights-header-slot` is placed in row 1 only.
 `.page-hero-highlights-content-row` spans cols 1–3, rows 3–4 (bg fills behind highlights; `.page-hero-highlights-content-slot` is placed in row 4 only). The decorative border behind `.page-hero-highlights-content-slot` is rendered via `.page-hero-highlights-content-row::before` — there is no separate DOM element for it.
 
-Grid columns are determined entirely by CSS — no `v-bind`. The `widthConstrained` and `contentAlign` props add CSS classes (`width-constrained`, `start`, `center`) which select the appropriate `grid-template-columns` rule.
+Grid columns are determined entirely by CSS — no `v-bind`. The `widthConstrained` and `contentAlign` props add CSS classes (`width-constrained`, `content-align-start`, `content-align-center`) on the root, which select the `grid-template-columns` rule on `.page-hero-highlights-grid`.
 
 ## Layout pitfall: do not use `grid-template-rows: subgrid` inside `.page-hero-highlights-strip`
 
@@ -300,4 +303,5 @@ The `.page-hero-highlights-strip` element spans rows 2–3 of the parent grid (t
 - Lives in `app/components/04.templates/page-hero-highlights/`.
 - Storybook title: `"Templates/PageHeroHighlights"`.
 - **`contentAlign` has no effect when `widthConstrained` is `false`** — both gutters hold their responsive default.
-- **Gutter sizes are CSS tokens** — `--page-hero-highlights-gutter-mobile/tablet/desktop` are all overridable. The responsive switching between them (via `@container`) is handled internally and cannot be overridden.
+- **Gutter sizes are CSS tokens** — `--page-hero-highlights-gutter-mobile/tablet/desktop` are all overridable. They switch at 768px and 1024px of the component's own width (`@container page-hero-highlights`); the breakpoints themselves aren't tokens.
+- **The root is an inline-size container**, so it can't size from its content: as a flex or grid item give it `inline-size: 100%` or a track. A grid on the root itself was moved to `.page-hero-highlights-grid` for this (an element can't query its own size).

package/.claude/skills/index.md

@@ -88,7 +88,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── link-text.md            — LinkText props, slots, usage patterns, styling
     ├── header-block.md         — HeaderBlock: tagLevel/classLevel semantic-vs-visual heading decoupling, page-heading-N utility classes
     ├── text-block.md           — TextBlock: vertical-rhythm text wrapper, --text-block-padding-block-start/-end tokens, heading-id slot prop for section/article aria-labelledby
-    ├── page-hero-highlights.md — PageHeroHighlights template: hero + highlights strip grid, CSS custom property theming
+    ├── page-hero-highlights.md — PageHeroHighlights template: hero + straddling highlights strip grid (root is the `page-hero-highlights` container, grid in `.page-hero-highlights-grid`), widthConstrained caps the column, equal-width highlights wrap at --page-hero-highlights-item-min-width, light theme-token defaults, PageHeroHighlightsHeader companion
     ├── slider-gallery.md       — SliderGallery: full-screen image carousel, IGalleryData, pause-on-hover/reduced-motion auto-advance, prefixed classes, CSS tokens
     ├── services-card.md        — ServicesCard props (incl. eyebrowConfig/heroConfig), actions slot, CSS tokens, page boilerplate
     ├── google-reviews.md        — GoogleReviews + GoogleReviewCard: Google Places reviews in a scrolling row; env vars, server route, useGoogleReviews, props, slots, tokens, Google terms

package/.vscode/srcdev-component-page-hero-highlights.code-snippets

@@ -3,7 +3,7 @@
     "description": "PageHeroHighlights: header zone, straddling highlights strip, content panel",
     "scope": "vue,html",
     "body": [
-      "<PageHeroHighlights tag=\"section\" content-align=\"${1|center,start|}\">",
+      "<PageHeroHighlights tag=\"section\" :width-constrained=\"true\" content-align=\"${1|center,start|}\">",
       "  <template #header=\"{ headingId }\">",
       "    <PageHeroHighlightsHeader>",
       "      <template #start><h1 :id=\"headingId\">$2</h1></template>",
@@ -31,6 +31,7 @@
       "  --page-hero-highlights-content-background: $3;",
       "  --page-hero-highlights-item-background: $4;",
       "  --page-hero-highlights-max-width: $5;",
+      "  --page-hero-highlights-item-min-width: $6;",
       "}"
     ]
   }

package/app/components/04.templates/page-hero-highlights/CONSUMER-STYLING.md

@@ -6,12 +6,12 @@
 
 | Token | Default | Controls |
 |---|---|---|
-| `--page-hero-highlights-max-width` | `1064px` | Central column cap (unless `width-constrained`) |
+| `--page-hero-highlights-max-width` | `1064px` | Central column cap with `width-constrained` |
 | `--page-hero-highlights-gutter-mobile` | `16px` | Side gutter |
-| `--page-hero-highlights-gutter-tablet` | `40px` | Side gutter at 768px+ container width |
-| `--page-hero-highlights-gutter-desktop` | `32px` | Side gutter at 1024px+ |
-| `--page-hero-highlights-header-background` | `darkblue` | Header zone background |
-| `--page-hero-highlights-content-background` | `var(--slate-01)` | Content zone background |
+| `--page-hero-highlights-gutter-tablet` | `40px` | Side gutter at 768px+ of the component's width |
+| `--page-hero-highlights-gutter-desktop` | `32px` | Side gutter at 1024px+ of the component's width |
+| `--page-hero-highlights-header-background` | `var(--theme-surface-subtle)` | Header zone background |
+| `--page-hero-highlights-content-background` | `transparent` | Content zone background |
 | `--page-hero-highlights-content-start-gap` | `1.2rem` | Space above the content panel |
 | `--page-hero-highlights-content-end-gap` | `1.2rem` | Space below the content zone |
 | `--page-hero-highlights-content-margin-block-start` | `2.4rem` | Space above the content slot |
@@ -23,24 +23,25 @@
 |---|---|---|
 | `--page-hero-highlights-strip-gap` | `1rem` | Gap between highlight items |
 | `--page-hero-highlights-strip-inset` | `1.2rem` | Strip inline inset (with the content panel) |
+| `--page-hero-highlights-item-min-width` | `12rem` | Narrowest an item gets with `highlights-equal-widths` before the strip wraps to a new row |
 | `--page-hero-highlights-title-height` | `1fr` | Title row height |
 | `--page-hero-highlights-title-height-baseline` | `4rem` | Title row height with `highlight-title-baseline` |
 | `--page-hero-highlights-item-padding` | `1.2rem` | Item padding |
 | `--page-hero-highlights-item-padding-block-start` | the item padding | Item top padding |
 | `--page-hero-highlights-item-padding-block-start-baseline` | `0` | Item top padding with `highlight-title-baseline` |
 | `--page-hero-highlights-item-rows-gap` | `1.2rem` | Gap between item title and body |
-| `--page-hero-highlights-item-background` | `white` | Item background |
-| `--page-hero-highlights-item-border` | `1px solid black` | Item border |
+| `--page-hero-highlights-item-background` | `var(--page-bg, Canvas)` | Item background |
+| `--page-hero-highlights-item-border` | `1px solid var(--theme-border)` | Item border |
 | `--page-hero-highlights-item-border-radius` | `8px` | Item rounding |
-| `--page-hero-highlights-item-colour` | `black` | Item text colour |
+| `--page-hero-highlights-item-colour` | `var(--theme-text)` | Item text colour |
 
 ### Content panel (`content-panel`, on by default)
 
 | Token | Default | Controls |
 |---|---|---|
-| `--page-hero-highlights-panel-background` | `var(--slate-00)` | Panel background |
-| `--page-hero-highlights-panel-border` | `1px solid var(--slate-06)` | Panel border |
-| `--page-hero-highlights-panel-outline` | `1px solid var(--slate-02)` | Panel outline |
+| `--page-hero-highlights-panel-background` | `var(--theme-surface-subtle)` | Panel background |
+| `--page-hero-highlights-panel-border` | `1px solid var(--theme-border)` | Panel border |
+| `--page-hero-highlights-panel-outline` | `none` | Panel outline |
 | `--page-hero-highlights-panel-border-radius` | `0.8rem` | Panel rounding |
 
 ### PageHeroHighlightsHeader
@@ -56,6 +57,20 @@
 Private (not public API): `--_max-width`, `--_gutter`, `--_strip-inset`, `--_title-height`,
 `--_item-padding`, `--_item-padding-block-start`, `--_header-slot-grid-row`.
 
+> Changed 2026-10-16:
+>
+> - `width-constrained` was inverted: `true` gave a full-width column and `false` capped it at
+>   `--page-hero-highlights-max-width`, the opposite of every doc. It now matches the docs (`true` caps it,
+>   `content-align` applies). Flip any `width-constrained` you set to get the old look.
+> - The tablet and desktop gutters never applied: their `@container` queries had no container to
+>   match. The root is now a named `page-hero-highlights` inline-size container and the rows sit in a
+>   new `.page-hero-highlights-grid` wrapper, so the gutters step at the component's own width.
+> - Colour defaults are light, from theme tokens (were `darkblue`, `white`, `black` and `--slate-*`):
+>   set the header, item and panel tokens to keep a dark header.
+> - `highlights-equal-widths` now wraps onto new rows below `--page-hero-highlights-item-min-width`
+>   instead of squeezing every item into one row, and grid tracks are `minmax(0, …)` so long
+>   unbroken text can't widen the layout. Highlight items get `overflow-wrap: anywhere`.
+>
 > Changed 2026-09-28: every token used to be declared on the root with its value, under generic
 > names (`--max-width`, `--header-row-background-colour`, `--highlight-*`, `--content-row-*`,
 > `--content-slot-*`, `--phh-*`), so a value set on an ancestor never landed and the names could
@@ -74,7 +89,7 @@ Private (not public API): `--_max-width`, `--_gutter`, `--_strip-inset`, `--_tit
 | `.highlight-title-baseline` | root | `highlight-title-baseline` |
 | `.equal-widths` / `.flexible-widths`, `.justify-*` | `.page-hero-highlights-strip` | `highlights-equal-widths`, `highlights-justify` |
 
-Inner classes: `.page-hero-highlights-header-row`, `.page-hero-highlights-header-slot`,
+Inner classes: `.page-hero-highlights-grid` (the grid itself, inside the root), `.page-hero-highlights-header-row`, `.page-hero-highlights-header-slot`,
 `.page-hero-highlights-strip`, `.page-hero-highlights-content-row` (its `::before` is the content
 panel), `.page-hero-highlights-content-slot`; header component `.page-hero-highlights-header-start`,
 `.page-hero-highlights-header-end`.
@@ -96,6 +111,11 @@ Set the tokens above on an element you own (a page or section class, or a class
 `<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
 `:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
 
+**Caveat:** the root is an inline-size container (`container: page-hero-highlights / inline-size`), so it
+can't size itself from its content: give it a width from its context (a block in normal flow is fine; as a
+flex or grid item give it `inline-size: 100%` or a track). The highlight item padding tokens are
+re-declared by `highlight-title-baseline`, so with that prop on, set the `-baseline` variants.
+
 ---
 
 ## Class passthrough

package/app/components/04.templates/page-hero-highlights/PageHeroHighlights.vue

@@ -5,17 +5,19 @@
     :class="[elementClasses, componentClasses]"
     :aria-labelledby="ariaLabelledby"
   >
-    <div class="page-hero-highlights-header-row">
-      <div class="page-hero-highlights-header-slot">
-        <slot name="header" :heading-id="headingId"></slot>
+    <div class="page-hero-highlights-grid">
+      <div class="page-hero-highlights-header-row">
+        <div class="page-hero-highlights-header-slot">
+          <slot name="header" :heading-id="headingId"></slot>
+        </div>
       </div>
-    </div>
-    <div class="page-hero-highlights-strip" :class="highlightClasses">
-      <slot name="highlights"></slot>
-    </div>
-    <div class="page-hero-highlights-content-row">
-      <div class="page-hero-highlights-content-slot">
-        <slot name="content"></slot>
+      <div class="page-hero-highlights-strip" :class="highlightClasses">
+        <slot name="highlights"></slot>
+      </div>
+      <div class="page-hero-highlights-content-row">
+        <div class="page-hero-highlights-content-slot">
+          <slot name="content"></slot>
+        </div>
       </div>
     </div>
   </component>
@@ -79,13 +81,7 @@ watch(
     --_item-padding-block-start: var(--page-hero-highlights-item-padding-block-start, var(--_item-padding));
     --_header-slot-grid-row: 1;
 
-    @container (width >= 768px) {
-      --_gutter: var(--page-hero-highlights-gutter-tablet, 40px);
-    }
-
-    @container (width >= 1024px) {
-      --_gutter: var(--page-hero-highlights-gutter-desktop, 32px);
-    }
+    container: page-hero-highlights / inline-size;
 
     &.highlight-title-baseline {
       --_title-height: var(--page-hero-highlights-title-height-baseline, 4rem);
@@ -93,38 +89,44 @@ watch(
       --_header-slot-grid-row: 1 / span 2;
     }
 
-    display: grid;
-    grid-template-rows: auto var(--_title-height) 1fr auto;
-    gap: 0;
-
-    &.width-constrained {
-      grid-template-columns: var(--_gutter) 1fr var(--_gutter);
-    }
+    .page-hero-highlights-grid {
+      display: grid;
+      grid-template-rows: auto var(--_title-height) 1fr auto;
+      grid-template-columns: var(--_gutter) minmax(0, 1fr) var(--_gutter);
+      gap: 0;
 
-    &:not(.width-constrained) {
-      &.content-align-start {
-        grid-template-columns: var(--_gutter) minmax(0, var(--_max-width)) minmax(var(--_gutter), 1fr);
+      @container page-hero-highlights (width >= 768px) {
+        --_gutter: var(--page-hero-highlights-gutter-tablet, 40px);
       }
 
-      &.content-align-center {
-        grid-template-columns:
-          max(var(--_gutter), (100% - var(--_max-width)) / 2)
-          1fr
-          max(var(--_gutter), (100% - var(--_max-width)) / 2);
+      @container page-hero-highlights (width >= 1024px) {
+        --_gutter: var(--page-hero-highlights-gutter-desktop, 32px);
       }
     }
 
+    &.width-constrained.content-align-start .page-hero-highlights-grid {
+      grid-template-columns: var(--_gutter) minmax(0, var(--_max-width)) minmax(var(--_gutter), 1fr);
+    }
+
+    &.width-constrained.content-align-center .page-hero-highlights-grid {
+      grid-template-columns:
+        max(var(--_gutter), (100% - var(--_max-width)) / 2)
+        minmax(0, 1fr)
+        max(var(--_gutter), (100% - var(--_max-width)) / 2);
+    }
+
     .page-hero-highlights-header-row {
       grid-column: 1 / -1;
       grid-row: 1 / 3;
       display: grid;
       grid-template-columns: subgrid;
       grid-template-rows: subgrid;
-      background-color: var(--page-hero-highlights-header-background, darkblue);
+      background-color: var(--page-hero-highlights-header-background, var(--theme-surface-subtle));
 
       .page-hero-highlights-header-slot {
         grid-column: 2;
         grid-row: var(--_header-slot-grid-row);
+        min-inline-size: 0;
         container-type: inline-size;
       }
     }
@@ -134,19 +136,27 @@ watch(
       grid-row: 2 / 4;
       position: relative;
       z-index: 1;
+      min-inline-size: 0;
       gap: var(--page-hero-highlights-strip-gap, 1rem);
       margin-inline-start: 0;
 
       &.equal-widths {
         display: grid;
-        grid-auto-columns: 1fr;
-        grid-auto-flow: column;
+        grid-template-columns: repeat(
+          auto-fit,
+          minmax(min(100%, var(--page-hero-highlights-item-min-width, 12rem)), 1fr)
+        );
       }
 
       &.flexible-widths {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
+
+        & > * {
+          min-inline-size: 0;
+          max-inline-size: 100%;
+        }
       }
 
       &.justify-start {
@@ -173,18 +183,19 @@ watch(
         display: grid;
         grid-template-rows: subgrid;
         grid-auto-flow: row;
+        overflow-wrap: anywhere;
         padding-block: var(--_item-padding-block-start) var(--_item-padding);
         padding-inline: var(--_item-padding);
-        background-color: var(--page-hero-highlights-item-background, white);
-        border: var(--page-hero-highlights-item-border, 1px solid black);
+        background-color: var(--page-hero-highlights-item-background, var(--page-bg, Canvas));
+        border: var(--page-hero-highlights-item-border, 1px solid var(--theme-border));
         border-radius: var(--page-hero-highlights-item-border-radius, 8px);
-        color: var(--page-hero-highlights-item-colour, black);
+        color: var(--page-hero-highlights-item-colour, var(--theme-text));
 
         .page-hero-highlights-item-title {
           display: grid;
           grid-row: 2;
           align-items: end;
-          height: var(--_title-height);
+          block-size: var(--_title-height);
         }
 
         .page-hero-highlights-item-body {
@@ -202,12 +213,13 @@ watch(
       grid-template-rows: subgrid;
       position: relative;
       isolation: isolate;
-      background-color: var(--page-hero-highlights-content-background, var(--slate-01));
+      background-color: var(--page-hero-highlights-content-background, transparent);
       padding-block-end: var(--page-hero-highlights-content-end-gap, 1.2rem);
 
       .page-hero-highlights-content-slot {
         grid-column: 2;
         grid-row: 2;
+        min-inline-size: 0;
         margin-block: var(--page-hero-highlights-content-margin-block-start, 2.4rem)
           var(--page-hero-highlights-content-margin, var(--_strip-inset));
         margin-inline: 0;
@@ -222,15 +234,12 @@ watch(
       .page-hero-highlights-content-row {
         &::before {
           content: "";
-          display: grid;
-          grid-template-columns: subgrid;
-          grid-template-rows: subgrid;
           grid-column: 2;
           grid-row: 1 / span 2;
-          margin-top: var(--page-hero-highlights-content-start-gap, 1.2rem);
-          background-color: var(--page-hero-highlights-panel-background, var(--slate-00));
-          border: var(--page-hero-highlights-panel-border, 1px solid var(--slate-06));
-          outline: var(--page-hero-highlights-panel-outline, 1px solid var(--slate-02));
+          margin-block-start: var(--page-hero-highlights-content-start-gap, 1.2rem);
+          background-color: var(--page-hero-highlights-panel-background, var(--theme-surface-subtle));
+          border: var(--page-hero-highlights-panel-border, 1px solid var(--theme-border));
+          outline: var(--page-hero-highlights-panel-outline, none);
           border-radius: var(--page-hero-highlights-panel-border-radius, 0.8rem);
         }