srcdev-nuxt-components 9.6.6 → 9.6.8

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
@@ -147,8 +147,8 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── pop-over.md                — PopOver: generic anchor-positioned disclosure panel, consumer-supplied trigger/content slots, placement prop, CSS token API
     ├── input-text-core.md        — InputTextCore: native text/date/number input primitive, min/max pass-through (date-picker range), CSS token API; Variants section covers InputTextWithLabel/InputPasswordWithLabel/InputTextAsNumberWithLabel
     ├── input-button.md           — InputButton (renamed from InputButtonCore 2026-09-28): button/NuxtLink/a, variants, icon slots, readonly (aria-disabled, activation blocked), tokens
-    ├── input-range-core.md       — InputRangeCore: native range-slider primitive, markers/datalist slots, dead --theme-form-range-accent-color token fixed, CSS token API; Variants section covers InputRangeDefault
-    ├── input-number.md           — InputNumber: native number-input primitive, left/right step-button slots, missing base class/placeholder/mismatched slot-selector bugs fixed, CSS token API; Variants section covers InputNumberField
+    ├── input-range.md            — InputRange: native range-slider primitive, markers/datalist slots, dead --theme-form-range-accent-color token fixed, CSS token API; Variants section covers InputRangeField; renamed from InputRangeCore/InputRangeDefault 2026-10-16, clamped stepping, useId datalist id, data-* hooks
+    ├── input-number.md           — InputNumber: native number-input primitive, left/right step-button slots, missing base class/placeholder/mismatched slot-selector bugs fixed, CSS token API; Variants section covers InputNumberField; clamped, rounded stepping, data-* state hooks, min/step-aware inputmode
     ├── input-otp.md              — InputOtp: one-time-code digit boxes (paste/autofill spreading, Backspace/arrow/Home/End nav, Enter submits, leading zeros kept, complete event, hidden input); Variants section covers InputOtpField
     ├── form-field.md             — FormField: layout wrapper for one form control (width cap, gutter, field spacing), data-width/data-has-gutter/data-invalid hooks, dead .underline rule removed, CSS token API
     ├── form-fieldset.md          — FormFieldset: shared fieldset+legend for checkbox/radio groups, groupRole prop (hardcoded radiogroup bug fixed), aria-required only on radiogroup, dead description slot removed, legend token API
@@ -159,9 +159,9 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── pending-effect.md         — PendingEffect: animated dashed border InputButton draws while is-pending (has-pending-effect), tokens renamed to --pending-effect-* and read at point of use, animation moved off the host button, aria-hidden
     ├── input-textarea-core.md    — InputTextareaCore: native textarea primitive, left/right decorative slots, undefined-token/dead-code/label-leak bugs fixed, CSS token API; Variants section covers InputTextareaWithLabel
     ├── input-select-core.md      — InputSelectCore: native select primitive, data-driven options with icon decorator, dead required/styleClassPassthrough/isDirty-isActive functionality fixed, appearance:base-select browser-support note, CSS token API; Variants section covers InputSelectWithLabel
-    ├── input-checkbox-radio.md   — InputCheckboxRadio (bare control), InputCheckboxRadioField (labelled), InputCheckboxRadioButton (button/pill option): renamed from Core/WithLabel, state classes → data-* hooks, type-switch v-model fix, no aria-checked, icon font-size sizing, button spacing tokens
-    ├── input-checkbox.md         — MultipleCheckboxes/SingleCheckbox: fieldset-wrapped checkbox group (data-driven, button or labelled) and single checkbox, per-box native-required/styleClassPassthrough/data-testid bugs fixed, spacing token API
-    ├── input-radio.md            — MultipleRadiobuttons: fieldset radiogroup (data-driven, button or labelled), shared-name grouping bug fixed, dead label/placeholder/equalCols props removed, data-options-layout hook, spacing token API
+    ├── input-checkbox-radio.md   — InputCheckboxRadio (bare control), InputCheckboxRadioField (labelled), InputCheckboxRadioButton (button/pill option): renamed from Core/WithLabel, state classes → data-* hooks, type-switch v-model fix, no aria-checked, icon font-size sizing, button spacing tokens, long labels wrap (inline nowrap removed), optional useId button id
+    ├── input-checkbox.md         — MultipleCheckboxes/SingleCheckbox: fieldset-wrapped checkbox group (data-driven, button or labelled) and single checkbox, per-box native-required/styleClassPassthrough/data-testid bugs fixed, spacing token API, wraps hostile content (fieldset min-inline-size, useId option ids)
+    ├── input-radio.md            — MultipleRadiobuttons: fieldset radiogroup (data-driven, button or labelled), shared-name grouping bug fixed, dead label/placeholder/equalCols props removed, data-options-layout hook, spacing token API, useId button ids, wraps hostile content
     ├── toggle-switch-core.md      — ToggleSwitchCore: pill/square checkbox-backed toggle primitive, dead round-prop/data-theme-error functionality and story theme-options bugs fixed, CSS token API; Variants section covers ToggleSwitchWithLabel (descriptionText/descriptionHtml via InputDescription, `description` slot removed 2026-09-29)/ToggleSwitchWithLabelInline
     ├── triple-toggle-switch.md    — TripleToggleSwitch (renamed from TripleToggleSwitchCore): three-option icon radio pill with sliding marker, radiogroup + ariaLabel, system/light/dark marker-gradient tokens, reduced-motion, CSS token API
     ├── entry-animation.md         — EntryAnimation: scroll-driven entry animation wrapper (slide-in/zoom-reveal/exit-blur utility classes), skipAnimation for above-the-fold loop items, reduced-motion handled at the CSS layer

package/.claude/skills/testing-add-unit-test.md

@@ -321,6 +321,23 @@ it("passes myProp to ChildComponent", async () => {
 
 Import the child component directly in the test file — it is not auto-imported there.
 
+## Testing `useId()` uniqueness across instances
+
+Each `mountSuspended` call is its own Nuxt app, so `useId()` restarts its counter and two separately
+mounted instances get the **same** ids. That's a test artefact, not a bug. To prove two instances
+don't collide, render both inside one host component (`MultipleCheckboxes.spec.ts`):
+
+```ts
+const Host = defineComponent({
+  components: { ComponentUnderTest },
+  setup: () => ({ props: initialPropsData }),
+  template: `<div><ComponentUnderTest v-bind="props" /><ComponentUnderTest v-bind="props" /></div>`,
+});
+const host = await mountSuspended(Host);
+const ids = host.findAll("input").map((input) => input.attributes("id"));
+expect(new Set(ids).size).toBe(ids.length);
+```
+
 ## Mocking browser APIs
 
 ### Global constructors (ResizeObserver, IntersectionObserver, etc.)

package/.vscode/srcdev-component-input-checkbox-radio.code-snippets

@@ -30,7 +30,6 @@
     "body": [
       "<InputCheckboxRadioButton",
       "  v-for=\"option in ${1:options}\"",
-      "  :id=\"`${2:name}-\\${option.value}`\"",
       "  :key=\"option.value\"",
       "  v-model=\"${3:state.value}\"",
       "  type=\"${4|checkbox,radio|}\"",

package/.vscode/srcdev-component-input-range.code-snippets

@@ -1,9 +1,9 @@
 {
-  "SRCDEV InputRangeCore Basic": {
-    "description": "Basic InputRangeCore native range input (no label/error wrapper)",
+  "SRCDEV InputRange Basic": {
+    "description": "Basic InputRange native range input (no label/error wrapper)",
     "scope": "vue,html",
     "body": [
-      "<InputRangeCore",
+      "<InputRange",
       "  id=\"$1fieldId\"",
       "  name=\"$2fieldName\"",
       "  v-model=\"$3fieldValue\"",
@@ -13,11 +13,11 @@
       "/>"
     ]
   },
-  "SRCDEV InputRangeCore With Markers": {
-    "description": "InputRangeCore with custom tick-mark markers overlaid on the track",
+  "SRCDEV InputRange With Markers": {
+    "description": "InputRange with custom tick-mark markers overlaid on the track",
     "scope": "vue,html",
     "body": [
-      "<InputRangeCore",
+      "<InputRange",
       "  id=\"$1fieldId\"",
       "  name=\"$2fieldName\"",
       "  v-model=\"$3fieldValue\"",
@@ -27,19 +27,39 @@
       ">",
       "  <template #markers>",
       "    <div class=\"input-range-markers\">",
-      "      <div class=\"marker\"><span class=\"marker-icon\">$7\\ud83d\\ude00</span></div>",
-      "      <div class=\"marker\"><span class=\"marker-icon\">$8\\ud83d\\ude10</span></div>",
-      "      <div class=\"marker\"><span class=\"marker-icon\">$9\\ud83d\\ude1e</span></div>",
+      "      <div class=\"input-range-marker\"><span class=\"input-range-marker-icon\">$7\\ud83d\\ude00</span></div>",
+      "      <div class=\"input-range-marker\"><span class=\"input-range-marker-icon\">$8\\ud83d\\ude10</span></div>",
+      "      <div class=\"input-range-marker\"><span class=\"input-range-marker-icon\">$9\\ud83d\\ude1e</span></div>",
       "    </div>",
       "  </template>",
-      "</InputRangeCore>"
+      "</InputRange>"
     ]
   },
-  "SRCDEV InputRangeDefault Basic": {
-    "description": "InputRangeDefault: labelled range slider with error/description support",
+  "SRCDEV InputRange With Datalist": {
+    "description": "InputRange with a datalist; the slot passes the generated datalistId",
     "scope": "vue,html",
     "body": [
-      "<InputRangeDefault",
+      "<InputRange",
+      "  id=\"$1fieldId\"",
+      "  name=\"$2fieldName\"",
+      "  v-model=\"$3fieldValue\"",
+      "  :min=\"${4:0}\"",
+      "  :max=\"${5:100}\"",
+      ">",
+      "  <template #datalist=\"{ datalistId }\">",
+      "    <datalist :id=\"datalistId\" class=\"input-range-datalist\">",
+      "      <option value=\"${4:0}\" label=\"${6:Low}\"></option>",
+      "      <option value=\"${5:100}\" label=\"${7:High}\"></option>",
+      "    </datalist>",
+      "  </template>",
+      "</InputRange>"
+    ]
+  },
+  "SRCDEV InputRangeField Basic": {
+    "description": "InputRangeField: labelled range slider with error/description support",
+    "scope": "vue,html",
+    "body": [
+      "<InputRangeField",
       "  v-model=\"$1fieldValue\"",
       "  name=\"$2fieldName\"",
       "  label=\"$3Field label\"",
@@ -51,11 +71,11 @@
       "/>"
     ]
   },
-  "SRCDEV InputRangeDefault With Step Buttons": {
-    "description": "InputRangeDefault with step-down/step-up buttons wired into the left/right slots",
+  "SRCDEV InputRangeField With Step Buttons": {
+    "description": "InputRangeField with step-down/step-up buttons wired into the left/right slots",
     "scope": "vue,html",
     "body": [
-      "<InputRangeDefault",
+      "<InputRangeField",
       "  v-model=\"$1fieldValue\"",
       "  name=\"$2fieldName\"",
       "  label=\"$3Field label\"",
@@ -67,11 +87,11 @@
       ">",
       "  <template #left>\\u2212</template>",
       "  <template #right>+</template>",
-      "</InputRangeDefault>"
+      "</InputRangeField>"
     ]
   },
   "SRCDEV InputRange CSS Override": {
-    "description": "CSS override scaffold for InputRangeCore tokens",
+    "description": "CSS override scaffold for InputRange tokens",
     "scope": "css",
     "body": [
       ".$1my-page {",

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);
         }