srcdev-nuxt-components 9.6.6 → 9.6.8

package/app/components/04.templates/page-hero-highlights/tests/PageHeroHighlights.spec.ts

@@ -1,16 +1,29 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi, afterEach } from "vitest";
 import { h } from "vue";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import PageHeroHighlights from "../PageHeroHighlights.vue";
 
+const mounted: { unmount: () => void }[] = [];
+
+const mountTracked = (async (...args: Parameters<typeof mountSuspended>) => {
+  const wrapper = await mountSuspended(...args);
+  mounted.push(wrapper);
+  return wrapper;
+}) as typeof mountSuspended;
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+  vi.restoreAllMocks();
+});
+
 describe("PageHeroHighlights", () => {
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlights);
+    const wrapper = await mountTracked(PageHeroHighlights);
     expect(wrapper.vm).toBeTruthy();
   });
 
   it("renders correct HTML structure", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlights, {
+    const wrapper = await mountTracked(PageHeroHighlights, {
       slots: {
         header: "<h1>Page Title</h1>",
         highlights: "<div class='highlight'>Highlight 1</div>",
@@ -20,14 +33,23 @@ describe("PageHeroHighlights", () => {
     expect(wrapper.html()).toMatchSnapshot();
   });
 
+  it("wraps the rows in .page-hero-highlights-grid, so the root can be the gutter query container", async () => {
+    const wrapper = await mountTracked(PageHeroHighlights);
+    const grid = wrapper.find(".page-hero-highlights > .page-hero-highlights-grid");
+    expect(grid.exists()).toBe(true);
+    expect(grid.find(".page-hero-highlights-header-row").exists()).toBe(true);
+    expect(grid.find(".page-hero-highlights-strip").exists()).toBe(true);
+    expect(grid.find(".page-hero-highlights-content-row").exists()).toBe(true);
+  });
+
   it("renders as a div by default", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlights);
+    const wrapper = await mountTracked(PageHeroHighlights);
     expect(wrapper.element.tagName.toLowerCase()).toBe("div");
   });
 
   it("renders with the correct tag when tag prop is provided", async () => {
     for (const tag of ["section", "main"] as const) {
-      const wrapper = await mountSuspended(PageHeroHighlights, {
+      const wrapper = await mountTracked(PageHeroHighlights, {
         props: { tag },
       });
       expect(wrapper.element.tagName.toLowerCase()).toBe(tag);
@@ -35,7 +57,7 @@ describe("PageHeroHighlights", () => {
   });
 
   it("renders header slot content", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlights, {
+    const wrapper = await mountTracked(PageHeroHighlights, {
       slots: { header: "<h1 class='page-title'>Dashboard</h1>" },
     });
     expect(wrapper.find(".page-title").exists()).toBe(true);
@@ -43,7 +65,7 @@ describe("PageHeroHighlights", () => {
   });
 
   it("renders highlights slot content", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlights, {
+    const wrapper = await mountTracked(PageHeroHighlights, {
       slots: {
         highlights: ["<div class='highlight-card'>Card 1</div>", "<div class='highlight-card'>Card 2</div>"].join(""),
       },
@@ -52,7 +74,7 @@ describe("PageHeroHighlights", () => {
   });
 
   it("renders content slot content", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlights, {
+    const wrapper = await mountTracked(PageHeroHighlights, {
       slots: { content: "<p class='body-text'>Page body</p>" },
     });
     expect(wrapper.find(".body-text").exists()).toBe(true);
@@ -60,42 +82,42 @@ describe("PageHeroHighlights", () => {
   });
 
   it("content slot is rendered inside .content-slot", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlights, {
+    const wrapper = await mountTracked(PageHeroHighlights, {
       slots: { content: "<p class='body-text'>Page body</p>" },
     });
     expect(wrapper.find(".page-hero-highlights-content-slot .body-text").exists()).toBe(true);
   });
 
   it("header slot is rendered inside .header-slot", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlights, {
+    const wrapper = await mountTracked(PageHeroHighlights, {
       slots: { header: "<h1 class='page-title'>Dashboard</h1>" },
     });
     expect(wrapper.find(".page-hero-highlights-header-slot .page-title").exists()).toBe(true);
   });
 
   it("adds aria-labelledby when tag is section", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlights, {
+    const wrapper = await mountTracked(PageHeroHighlights, {
       props: { tag: "section" },
     });
     expect(wrapper.find(".page-hero-highlights").attributes("aria-labelledby")).toBeTruthy();
   });
 
   it("does not add aria-labelledby when tag is main (main never needs an accessible name)", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlights, {
+    const wrapper = await mountTracked(PageHeroHighlights, {
       props: { tag: "main" },
     });
     expect(wrapper.find(".page-hero-highlights").attributes("aria-labelledby")).toBeUndefined();
   });
 
   it("does not add aria-labelledby when tag is div", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlights, {
+    const wrapper = await mountTracked(PageHeroHighlights, {
       props: { tag: "div" },
     });
     expect(wrapper.find(".page-hero-highlights").attributes("aria-labelledby")).toBeUndefined();
   });
 
   it("exposes headingId via header scoped slot and aria-labelledby matches", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlights, {
+    const wrapper = await mountTracked(PageHeroHighlights, {
       props: { tag: "section" },
       slots: {
         header: (props: Record<string, unknown>) => h("h1", { id: props.headingId, class: "page-title" }, "Dashboard"),
@@ -107,13 +129,13 @@ describe("PageHeroHighlights", () => {
   });
 
   it("applies flexible-widths class by default", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlights);
+    const wrapper = await mountTracked(PageHeroHighlights);
     expect(wrapper.find(".page-hero-highlights-strip").classes()).toContain("flexible-widths");
     expect(wrapper.find(".page-hero-highlights-strip").classes()).not.toContain("equal-widths");
   });
 
   it("applies equal-widths class when highlightsEqualWidths is true", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlights, {
+    const wrapper = await mountTracked(PageHeroHighlights, {
       props: { highlightsEqualWidths: true },
     });
     expect(wrapper.find(".page-hero-highlights-strip").classes()).toContain("equal-widths");
@@ -121,14 +143,14 @@ describe("PageHeroHighlights", () => {
   });
 
   it("applies justify-start class by default", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlights);
+    const wrapper = await mountTracked(PageHeroHighlights);
     expect(wrapper.find(".page-hero-highlights-strip").classes()).toContain("justify-start");
   });
 
   it("applies the correct justify class for each highlightsJustify value", async () => {
     const values = ["start", "center", "end", "space-between", "space-around"] as const;
     for (const value of values) {
-      const wrapper = await mountSuspended(PageHeroHighlights, {
+      const wrapper = await mountTracked(PageHeroHighlights, {
         props: { highlightsJustify: value },
       });
       expect(wrapper.find(".page-hero-highlights-strip").classes()).toContain(`justify-${value}`);
@@ -136,31 +158,31 @@ describe("PageHeroHighlights", () => {
   });
 
   it("applies has-content-panel class by default", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlights);
+    const wrapper = await mountTracked(PageHeroHighlights);
     expect(wrapper.find(".page-hero-highlights").classes()).toContain("has-content-panel");
   });
 
   it("does not apply has-content-panel class when contentPanel is false", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlights, {
+    const wrapper = await mountTracked(PageHeroHighlights, {
       props: { contentPanel: false },
     });
     expect(wrapper.find(".page-hero-highlights").classes()).not.toContain("has-content-panel");
   });
 
   it("does not apply highlight-title-baseline class by default", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlights);
+    const wrapper = await mountTracked(PageHeroHighlights);
     expect(wrapper.find(".page-hero-highlights").classes()).not.toContain("highlight-title-baseline");
   });
 
   it("applies highlight-title-baseline class when highlightTitleBaseline is true", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlights, {
+    const wrapper = await mountTracked(PageHeroHighlights, {
       props: { highlightTitleBaseline: true },
     });
     expect(wrapper.find(".page-hero-highlights").classes()).toContain("highlight-title-baseline");
   });
 
   it("applies styleClassPassthrough classes", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlights, {
+    const wrapper = await mountTracked(PageHeroHighlights, {
       props: { styleClassPassthrough: ["extra-class", "another-class"] },
     });
     const el = wrapper.find(".page-hero-highlights");
@@ -170,24 +192,24 @@ describe("PageHeroHighlights", () => {
 
   describe("grid layout classes", () => {
     it("applies center class by default", async () => {
-      const wrapper = await mountSuspended(PageHeroHighlights);
+      const wrapper = await mountTracked(PageHeroHighlights);
       expect(wrapper.find(".page-hero-highlights").classes()).toContain("content-align-center");
     });
 
     it("does not apply width-constrained class by default", async () => {
-      const wrapper = await mountSuspended(PageHeroHighlights);
+      const wrapper = await mountTracked(PageHeroHighlights);
       expect(wrapper.find(".page-hero-highlights").classes()).not.toContain("width-constrained");
     });
 
     it("applies width-constrained class when widthConstrained is true", async () => {
-      const wrapper = await mountSuspended(PageHeroHighlights, {
+      const wrapper = await mountTracked(PageHeroHighlights, {
         props: { widthConstrained: true },
       });
       expect(wrapper.find(".page-hero-highlights").classes()).toContain("width-constrained");
     });
 
     it("applies start class when contentAlign is start", async () => {
-      const wrapper = await mountSuspended(PageHeroHighlights, {
+      const wrapper = await mountTracked(PageHeroHighlights, {
         props: { contentAlign: "start" },
       });
       expect(wrapper.find(".page-hero-highlights").classes()).toContain("content-align-start");

package/app/components/04.templates/page-hero-highlights/tests/PageHeroHighlightsHeader.spec.ts

@@ -1,15 +1,29 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { defineComponent } from "vue";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import PageHeroHighlightsHeader from "../PageHeroHighlightsHeader.vue";
 
+const mounted: { unmount: () => void }[] = [];
+
+const mountTracked = (async (...args: Parameters<typeof mountSuspended>) => {
+  const wrapper = await mountSuspended(...args);
+  mounted.push(wrapper);
+  return wrapper;
+}) as typeof mountSuspended;
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+  vi.restoreAllMocks();
+});
+
 describe("PageHeroHighlightsHeader", () => {
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlightsHeader);
+    const wrapper = await mountTracked(PageHeroHighlightsHeader);
     expect(wrapper.vm).toBeTruthy();
   });
 
   it("renders start slot content", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlightsHeader, {
+    const wrapper = await mountTracked(PageHeroHighlightsHeader, {
       slots: { start: "<h1 class='page-title'>Surplus needs</h1>" },
     });
     expect(wrapper.find(".page-hero-highlights-header-start .page-title").exists()).toBe(true);
@@ -17,7 +31,7 @@ describe("PageHeroHighlightsHeader", () => {
   });
 
   it("renders end slot content when provided", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlightsHeader, {
+    const wrapper = await mountTracked(PageHeroHighlightsHeader, {
       slots: {
         start: "<h1>Title</h1>",
         end: "<button class='cta'>Create new need</button>",
@@ -27,14 +41,14 @@ describe("PageHeroHighlightsHeader", () => {
   });
 
   it("does not render .page-hero-highlights-header-end when no end slot is provided", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlightsHeader, {
+    const wrapper = await mountTracked(PageHeroHighlightsHeader, {
       slots: { start: "<h1>Title</h1>" },
     });
     expect(wrapper.find(".page-hero-highlights-header-end").exists()).toBe(false);
   });
 
   it("renders .page-hero-highlights-header-start as full width when no end slot is provided", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlightsHeader, {
+    const wrapper = await mountTracked(PageHeroHighlightsHeader, {
       slots: { start: "<h1>Title</h1>" },
     });
     expect(wrapper.find(".page-hero-highlights-header-start").exists()).toBe(true);
@@ -42,10 +56,31 @@ describe("PageHeroHighlightsHeader", () => {
   });
 
   it("applies styleClassPassthrough classes", async () => {
-    const wrapper = await mountSuspended(PageHeroHighlightsHeader, {
+    const wrapper = await mountTracked(PageHeroHighlightsHeader, {
       props: { styleClassPassthrough: ["extra-class", "another-class"] },
     });
     expect(wrapper.find(".page-hero-highlights-header").classes()).toContain("extra-class");
     expect(wrapper.find(".page-hero-highlights-header").classes()).toContain("another-class");
   });
 });
+
+describe("PageHeroHighlightsHeader end slot toggled after mount", () => {
+  it("adds and removes .page-hero-highlights-header-end with a v-if'd end slot", async () => {
+    const Host = defineComponent({
+      components: { PageHeroHighlightsHeader },
+      props: { showEnd: { type: Boolean, default: false } },
+      template: `
+        <PageHeroHighlightsHeader>
+          <template #start><h1>Title</h1></template>
+          <template v-if="showEnd" #end><button class="cta">Go</button></template>
+        </PageHeroHighlightsHeader>
+      `,
+    });
+    const wrapper = await mountTracked(Host);
+    expect(wrapper.find(".page-hero-highlights-header-end").exists()).toBe(false);
+    await wrapper.setProps({ showEnd: true });
+    expect(wrapper.find(".page-hero-highlights-header-end .cta").exists()).toBe(true);
+    await wrapper.setProps({ showEnd: false });
+    expect(wrapper.find(".page-hero-highlights-header-end").exists()).toBe(false);
+  });
+});

package/app/components/04.templates/page-hero-highlights/tests/__snapshots__/PageHeroHighlights.spec.ts.snap

@@ -2,17 +2,19 @@
 
 exports[`PageHeroHighlights > renders correct HTML structure 1`] = `
 "<div class="page-hero-highlights content-align-center has-content-panel">
-  <div class="page-hero-highlights-header-row">
-    <div class="page-hero-highlights-header-slot">
-      <h1>Page Title</h1>
+  <div class="page-hero-highlights-grid">
+    <div class="page-hero-highlights-header-row">
+      <div class="page-hero-highlights-header-slot">
+        <h1>Page Title</h1>
+      </div>
     </div>
-  </div>
-  <div class="page-hero-highlights-strip flexible-widths justify-start">
-    <div class="highlight">Highlight 1</div>
-  </div>
-  <div class="page-hero-highlights-content-row">
-    <div class="page-hero-highlights-content-slot">
-      <p>Content</p>
+    <div class="page-hero-highlights-strip flexible-widths justify-start">
+      <div class="highlight">Highlight 1</div>
+    </div>
+    <div class="page-hero-highlights-content-row">
+      <div class="page-hero-highlights-content-slot">
+        <p>Content</p>
+      </div>
     </div>
   </div>
 </div>"

package/app/components/05.forms/input-checkbox/CONSUMER-STYLING.md

@@ -29,6 +29,16 @@ columns need more room.
 | `--single-checkbox-margin-block-start` | `1.2rem` | Space between the legend/description and the checkbox |
 | `--single-checkbox-column-min-width` | `100px` | Grid column minimum width with `options-layout="equal-widths"` |
 
+> **Changed 2026-10-16**: the equal-width column minimum is capped at `min(100%, ...)` so one long
+> label can no longer push the grid wider than its container.
+
+### Root fieldset
+
+`.multiple-checkboxes-fieldset` and `.single-checkbox-fieldset` set `min-inline-size: 0` and
+`overflow-wrap: anywhere` (added 2026-10-16). The second inherits into the legend, description,
+option labels and error, so long unbroken words and URLs wrap instead of overflowing. Neither is a
+token; override `overflow-wrap` on your passthrough class if you need the old behaviour.
+
 ---
 
 ## State hooks

package/app/components/05.forms/input-checkbox/MultipleCheckboxes.vue

@@ -23,10 +23,10 @@
         </template>
       </InputDescription>
       <div ref="itemsContainer" class="multiple-checkboxes-items" :data-options-layout="optionsLayout">
-        <template v-for="item in fieldData.data" :key="item.id">
+        <template v-for="(item, index) in fieldData.data" :key="item.id">
           <InputCheckboxRadioButton
             v-if="isButton"
-            :id="`${name}-${item.value}`"
+            :id="`${optionIdPrefix}-${index}`"
             v-model="modelValue"
             type="checkbox"
             :name
@@ -119,7 +119,14 @@ const slots = useSlots();
 const modelValue = defineModel<(string | number | boolean)[] | string | number | boolean | undefined>({ required: true });
 const fieldData = defineModel<IFormMultipleOptions>("fieldData", { required: true });
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
 
 const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
   props.name,
@@ -127,6 +134,8 @@ const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
   slots
 );
 
+const optionIdPrefix = useId();
+
 const { maxChildWidth, updateMaxChildWidth } = useMaxChildWidth(
   ".input-checkbox-radio-field-label, .input-checkbox-radio-field",
   "100px"
@@ -146,6 +155,11 @@ watch(
 
 <style lang="css">
 @layer components {
+.multiple-checkboxes-fieldset {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
 .multiple-checkboxes-items {
   display: flex;
   gap: var(--multiple-checkboxes-gap, 1.2rem);
@@ -165,7 +179,7 @@ watch(
     grid-template-columns: repeat(
       auto-fit,
       minmax(
-        calc(var(--input-checked-icon-gap) + (2 * var(--input-checkbox-label-padding-inline)) + v-bind(maxChildWidth)),
+        min(100%, calc(var(--input-checked-icon-gap) + (2 * var(--input-checkbox-label-padding-inline)) + v-bind(maxChildWidth))),
         1fr
       )
     );

package/app/components/05.forms/input-checkbox/SingleCheckbox.vue

@@ -84,7 +84,14 @@ const props = withDefaults(defineProps<Props>(), {
 
 const slots = useSlots();
 const modelValue = defineModel<(string | number | boolean)[] | string | number | boolean | undefined>({ required: true });
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
 
 const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
   props.name,
@@ -95,6 +102,11 @@ const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
 
 <style lang="css">
 @layer components {
+.single-checkbox-fieldset {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
 .single-checkbox-items {
   display: flex;
   gap: var(--single-checkbox-gap, 1.2rem);
@@ -111,7 +123,7 @@ const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
 
   &[data-options-layout="equal-widths"] {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(var(--single-checkbox-column-min-width, 100px), 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--single-checkbox-column-min-width, 100px)), 1fr));
   }
 }
 }