srcdev-nuxt-components 9.6.5 → 9.6.7

package/app/components/02.molecules/toast/tests/DisplayToast.spec.ts

@@ -198,21 +198,35 @@ describe("DisplayToast", () => {
 
   // ─── Dismiss via Escape key ────────────────────────────────────────────────
 
-  it("transitions to hide class when Escape is pressed", async () => {
+  it("transitions to hide class when Escape is pressed on the toast", async () => {
     await mountAndShow({ config: { behavior: { autoDismiss: false } } });
-    vi.advanceTimersByTime(100); // fire the focus setTimeout
-    await nextTick();
+    vi.advanceTimersByTime(1);
     toast()!.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
     await nextTick();
     expect(toast()!.getAttribute("data-state")).toBe("hide");
   });
 
+  it("dismisses on Escape pressed anywhere in the document, since it never takes focus", async () => {
+    await mountAndShow({ config: { behavior: { autoDismiss: false } } });
+    document.body.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    await nextTick();
+    expect(toast()!.getAttribute("data-state")).toBe("hide");
+  });
+
+  it("ignores an Escape another handler has already claimed", async () => {
+    await mountAndShow({ config: { behavior: { autoDismiss: false } } });
+    const event = new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true });
+    event.preventDefault();
+    document.body.dispatchEvent(event);
+    await nextTick();
+    expect(toast()!.getAttribute("data-state")).toBe("show");
+  });
+
   // ─── Dismiss via close button ─────────────────────────────────────────────
 
   it("transitions to hide class when the close button is clicked", async () => {
     await mountAndShow({ config: { behavior: { autoDismiss: false } } });
-    vi.advanceTimersByTime(100);
-    await nextTick();
+    vi.advanceTimersByTime(1);
     (document.querySelector("[data-test-id='alert-dismiss']") as HTMLElement).click();
     await nextTick();
     expect(toast()!.getAttribute("data-state")).toBe("hide");
@@ -282,22 +296,29 @@ describe("DisplayToast", () => {
     expect(toast()!.getAttribute("data-state")).toBe("hide");
   });
 
-  it("does not pause when the toast takes focus after mouse input", async () => {
+  it("does not move focus to itself when shown", async () => {
+    await mountAndShow({ config: autoConfig });
+    vi.advanceTimersByTime(500);
+    await nextTick();
+    expect(document.activeElement).not.toBe(toast());
+    expect(toast()!.hasAttribute("data-paused")).toBe(false);
+  });
+
+  it("does not pause when focused after mouse input", async () => {
     setFocusVisible(false);
     await mountAndShow({ config: autoConfig });
-    vi.advanceTimersByTime(100); // the toast focuses itself
+    (toast() as HTMLElement).focus();
     await nextTick();
-    expect(document.activeElement).toBe(toast());
     expect(toast()!.hasAttribute("data-paused")).toBe(false);
-    vi.advanceTimersByTime(900);
+    vi.advanceTimersByTime(1000);
     await nextTick();
     expect(toast()!.getAttribute("data-state")).toBe("hide");
   });
 
-  it("pauses when the toast takes focus after keyboard input, until focus leaves", async () => {
+  it("pauses when a keyboard user focuses the toast, until focus leaves", async () => {
     setFocusVisible(true);
     await mountAndShow({ config: autoConfig });
-    vi.advanceTimersByTime(100);
+    (toast() as HTMLElement).focus();
     await nextTick();
     expect(toast()!.hasAttribute("data-paused")).toBe(true);
     vi.advanceTimersByTime(5000);
@@ -305,7 +326,7 @@ describe("DisplayToast", () => {
     expect(toast()!.getAttribute("data-state")).toBe("show");
     (toast() as HTMLElement).blur();
     await nextTick();
-    vi.advanceTimersByTime(900);
+    vi.advanceTimersByTime(1000);
     await nextTick();
     expect(toast()!.getAttribute("data-state")).toBe("hide");
   });

package/app/components/02.molecules/toast/tests/DisplayToastProvider.spec.ts

@@ -208,6 +208,26 @@ describe("DisplayToastProvider", () => {
     expect(items().length).toBe(0);
   });
 
+  it("does not move focus to a toast when it appears", async () => {
+    await mountProvider(DisplayToastProvider);
+    show({ behavior: { autoDismiss: false } });
+    await nextTick();
+    await nextTick();
+    expect(document.activeElement).not.toBe(item());
+  });
+
+  it("dismisses only the newest toast when Escape is pressed outside the toasts", async () => {
+    await mountProvider(DisplayToastProvider, { props: { maxVisible: 2 } });
+    show({ content: { text: "First" }, behavior: { autoDismiss: false } });
+    show({ content: { text: "Second" }, behavior: { autoDismiss: false } });
+    await nextTick();
+    expect(items().length).toBe(2);
+    document.body.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    await nextTick();
+    expect(items().length).toBe(1);
+    expect(item()!.textContent).toContain("First");
+  });
+
   // ─── Auto-dismiss timer ───────────────────────────────────────────────────
 
   it("auto-dismisses after duration", async () => {

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