srcdev-nuxt-components 9.6.9 → 9.6.11

package/app/components/05.forms/input-button/tests/InputButton.spec.ts

@@ -9,7 +9,6 @@ interface InputButtonInstance {
   hasLeftSlot: () => boolean;
   hasRightSlot: () => boolean;
   hasIconOnlySlot: () => boolean;
-  buttonClasses: () => unknown[];
 }
 
 // --- Helpers ---
@@ -92,12 +91,12 @@ describe("InputButton", () => {
 
     it("renders button text", async () => {
       wrapper = await createWrapper({ buttonText: "Hello" });
-      expect(wrapper.find(".button-text").text()).toBe("Hello");
+      expect(wrapper.find(".input-button-text").text()).toBe("Hello");
     });
 
     it("handles empty buttonText gracefully", async () => {
       wrapper = await createWrapper({ buttonText: "" });
-      const buttonText = wrapper.find(".button-text");
+      const buttonText = wrapper.find(".input-button-text");
       expect(buttonText.exists()).toBe(true);
       expect(buttonText.text()).toBe("");
     });
@@ -107,31 +106,45 @@ describe("InputButton", () => {
   // Props
   // -------------------------
   describe("Props", () => {
-    it("applies variant class", async () => {
-      for (const variant of ["primary", "secondary", "tertiary"] as const) {
+    it("reflects variant as data-variant", async () => {
+      for (const variant of ["primary", "secondary", "tertiary", "inline"] as const) {
         const w = await mountSuspended(InputButton, {
           props: { buttonText: "Test", variant },
         });
-        expect(w.find("button").classes()).toContain(variant);
+        expect(w.find("button").attributes("data-variant")).toBe(variant);
+        expect(w.find("button").classes()).not.toContain(variant);
         w.unmount();
       }
     });
 
-    it("applies pill class when isPill is true", async () => {
+    it("sets data-pill when isPill is true", async () => {
       wrapper = await createWrapper({ isPill: true });
-      expect(wrapper.find("button").classes()).toContain("pill");
+      expect(wrapper.find("button").attributes("data-pill")).toBe("");
     });
 
-    it("does not apply pill class by default", async () => {
+    it("does not set data-pill by default", async () => {
       wrapper = await createWrapper();
-      expect(wrapper.find("button").classes()).not.toContain("pill");
+      expect(wrapper.find("button").attributes("data-pill")).toBeUndefined();
     });
 
-    it("applies is-pending and pending-effect classes", async () => {
+    it("sets data-pending and data-pending-effect", async () => {
       wrapper = await createWrapper({ isPending: true, hasPendingEffect: true });
+      const button = wrapper.find("button");
+      expect(button.attributes("data-pending")).toBe("");
+      expect(button.attributes("data-pending-effect")).toBe("");
+    });
+
+    it("does not use collision-prone bare state classes", async () => {
+      wrapper = await createWrapper(
+        { isPill: true, isPending: true, hasPendingEffect: true, variant: "secondary" },
+        { iconOnly: "<span>⚡</span>" }
+      );
       const classes = wrapper.find("button").classes();
-      expect(classes).toContain("is-pending");
-      expect(classes).toContain("pending-effect");
+      for (const name of ["secondary", "pill", "is-pending", "pending-effect", "icon-only"]) {
+        expect(classes).not.toContain(name);
+      }
+      expect(wrapper.find(".btn-icon").exists()).toBe(false);
+      expect(wrapper.find(".button-text").exists()).toBe(false);
     });
 
     it("applies correct type attribute", async () => {
@@ -168,9 +181,9 @@ describe("InputButton", () => {
   // Accessibility
   // -------------------------
   describe("Accessibility", () => {
-    it("sets aria-disabled to false by default", async () => {
+    it("omits aria-disabled when not readonly", async () => {
       wrapper = await createWrapper();
-      expect(wrapper.find("button").attributes("aria-disabled")).toBe("false");
+      expect(wrapper.find("button").attributes("aria-disabled")).toBeUndefined();
     });
 
     it("sets aria-disabled and readonly attr when readonly", async () => {
@@ -182,12 +195,12 @@ describe("InputButton", () => {
 
     it("keeps button text visible (not sr-only) by default", async () => {
       wrapper = await createWrapper();
-      expect(wrapper.find(".button-text").classes()).not.toContain("sr-only");
+      expect(wrapper.find(".input-button-text").classes()).not.toContain("sr-only");
     });
 
     it("makes button text sr-only with iconOnly slot, but keeps it in DOM for screen readers", async () => {
       wrapper = await createWrapper({ buttonText: "Save document" }, { iconOnly: "<span>💾</span>" });
-      const buttonText = wrapper.find(".button-text");
+      const buttonText = wrapper.find(".input-button-text");
       expect(buttonText.text()).toBe("Save document");
       expect(buttonText.classes()).toContain("sr-only");
     });
@@ -199,20 +212,20 @@ describe("InputButton", () => {
   describe("Slots", () => {
     it("renders left slot", async () => {
       wrapper = await createWrapper({}, { left: '<span data-testid="left-icon">←</span>' });
-      expect(wrapper.find(".btn-icon.left").exists()).toBe(true);
+      expect(wrapper.find('.input-button-icon[data-slot="left"]').exists()).toBe(true);
       expect(wrapper.find('[data-testid="left-icon"]').exists()).toBe(true);
     });
 
     it("renders right slot", async () => {
       wrapper = await createWrapper({}, { right: '<span data-testid="right-icon">→</span>' });
-      expect(wrapper.find(".btn-icon.right").exists()).toBe(true);
+      expect(wrapper.find('.input-button-icon[data-slot="right"]').exists()).toBe(true);
       expect(wrapper.find('[data-testid="right-icon"]').exists()).toBe(true);
     });
 
-    it("renders iconOnly slot and adds icon-only class to button", async () => {
+    it("renders iconOnly slot and sets data-icon-only on the button", async () => {
       wrapper = await createWrapper({}, { iconOnly: '<span data-testid="icon-only">⚡</span>' });
-      expect(wrapper.find(".btn-icon.icon-only").exists()).toBe(true);
-      expect(wrapper.find("button").classes()).toContain("icon-only");
+      expect(wrapper.find('.input-button-icon[data-slot="icon-only"]').exists()).toBe(true);
+      expect(wrapper.find("button").attributes("data-icon-only")).toBe("");
     });
 
     it("iconOnly suppresses left and right slots", async () => {
@@ -224,9 +237,9 @@ describe("InputButton", () => {
           iconOnly: '<span data-testid="icon">⚡</span>',
         }
       );
-      expect(wrapper.find(".btn-icon.left").exists()).toBe(false);
-      expect(wrapper.find(".btn-icon.right").exists()).toBe(false);
-      expect(wrapper.find(".btn-icon.icon-only").exists()).toBe(true);
+      expect(wrapper.find('.input-button-icon[data-slot="left"]').exists()).toBe(false);
+      expect(wrapper.find('.input-button-icon[data-slot="right"]').exists()).toBe(false);
+      expect(wrapper.find('.input-button-icon[data-slot="icon-only"]').exists()).toBe(true);
     });
 
     it("renders left and right slots together when no iconOnly", async () => {
@@ -237,9 +250,9 @@ describe("InputButton", () => {
           right: '<span data-testid="right">→</span>',
         }
       );
-      expect(wrapper.find(".btn-icon.left").exists()).toBe(true);
-      expect(wrapper.find(".btn-icon.right").exists()).toBe(true);
-      expect(wrapper.find(".btn-icon.icon-only").exists()).toBe(false);
+      expect(wrapper.find('.input-button-icon[data-slot="left"]').exists()).toBe(true);
+      expect(wrapper.find('.input-button-icon[data-slot="right"]').exists()).toBe(true);
+      expect(wrapper.find('.input-button-icon[data-slot="icon-only"]').exists()).toBe(false);
     });
   });
 
@@ -265,9 +278,9 @@ describe("InputButton", () => {
       expect(link.attributes("href")).toBe("/api/auth/github");
     });
 
-    it("applies the is-link class for a link", async () => {
+    it("sets data-link for a link", async () => {
       wrapper = await createWrapper({ href: "/api/auth/github", external: true });
-      expect(wrapper.find("a").classes()).toContain("is-link");
+      expect(wrapper.find("a").attributes("data-link")).toBe("");
     });
   });
 
@@ -297,8 +310,19 @@ describe("InputButton", () => {
   });
 });
 
+const looseMounts: { unmount: () => void }[] = [];
+const track = <T extends { unmount: () => void }>(mounted: T) => {
+  looseMounts.push(mounted);
+  return mounted;
+};
+
+afterEach(() => {
+  looseMounts.splice(0).forEach((mounted) => mounted.unmount());
+  vi.restoreAllMocks();
+});
+
 describe("InputButton slot toggling", () => {
-  it("adds and removes the icon-only class when the iconOnly slot changes after mount", async () => {
+  it("adds and removes data-icon-only when the iconOnly slot changes after mount", async () => {
     const Host = defineComponent({
       components: { InputButton },
       setup() {
@@ -310,23 +334,25 @@ describe("InputButton slot toggling", () => {
         </InputButton>
       `,
     });
-    const wrapper = await mountSuspended(Host);
+    const wrapper = track(await mountSuspended(Host));
     const button = () => wrapper.find(".input-button");
-    expect(button().classes()).not.toContain("icon-only");
+    expect(button().attributes("data-icon-only")).toBeUndefined();
     (wrapper.vm as unknown as { iconOnly: boolean }).iconOnly = true;
     await nextTick();
-    expect(button().classes()).toContain("icon-only");
-    expect(wrapper.find(".button-text").classes()).toContain("sr-only");
+    expect(button().attributes("data-icon-only")).toBe("");
+    expect(wrapper.find(".input-button-text").classes()).toContain("sr-only");
   });
 });
 
 describe("InputButton readonly and reactivity", () => {
   it("does not fire a consumer click handler while readonly (keyboard activation included)", async () => {
     const onClick = vi.fn();
-    const wrapper = await mountSuspended(InputButton, {
-      props: { buttonText: "Save", readonly: true },
-      attrs: { onClick },
-    });
+    const wrapper = track(
+      await mountSuspended(InputButton, {
+        props: { buttonText: "Save", readonly: true },
+        attrs: { onClick },
+      })
+    );
     await wrapper.trigger("click");
     expect(onClick).not.toHaveBeenCalled();
     expect(wrapper.attributes("aria-disabled")).toBe("true");
@@ -334,18 +360,22 @@ describe("InputButton readonly and reactivity", () => {
 
   it("fires the click handler when not readonly", async () => {
     const onClick = vi.fn();
-    const wrapper = await mountSuspended(InputButton, {
-      props: { buttonText: "Save" },
-      attrs: { onClick },
-    });
+    const wrapper = track(
+      await mountSuspended(InputButton, {
+        props: { buttonText: "Save" },
+        attrs: { onClick },
+      })
+    );
     await wrapper.trigger("click");
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
   it("updates classes when styleClassPassthrough changes after mount", async () => {
-    const wrapper = await mountSuspended(InputButton, {
-      props: { buttonText: "Save", styleClassPassthrough: ["original"] },
-    });
+    const wrapper = track(
+      await mountSuspended(InputButton, {
+        props: { buttonText: "Save", styleClassPassthrough: ["original"] },
+      })
+    );
     await wrapper.setProps({ styleClassPassthrough: ["updated"] });
     expect(wrapper.classes()).not.toContain("original");
     expect(wrapper.classes()).toContain("updated");

package/app/components/05.forms/input-button/tests/__snapshots__/InputButton.spec.ts.snap

@@ -1,72 +1,72 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InputButton > Snapshots > icon-only slot 1`] = `
-"<button type="button" aria-disabled="false" data-testid="input-button" data-theme="default" class="input-button primary icon-only">
+"<button type="button" data-testid="input-button" data-theme="default" data-variant="primary" data-icon-only="" class="input-button">
   <!--v-if-->
-  <!--v-if--><span class="button-text sr-only">Click me</span>
-  <!--v-if--><span class="btn-icon icon-only"><span data-testid="icon-only">⚡</span></span>
+  <!--v-if--><span class="input-button-text sr-only">Click me</span>
+  <!--v-if--><span class="input-button-icon" data-slot="icon-only"><span data-testid="icon-only">⚡</span></span>
 </button>"
 `;
 
 exports[`InputButton > Snapshots > pending state 1`] = `
-"<button type="button" aria-disabled="false" data-testid="input-button" data-theme="default" class="input-button primary pending-effect is-pending"><svg class="pending-effect-container" data-theme="default" aria-hidden="true" focusable="false">
+"<button type="button" data-testid="input-button" data-theme="default" data-variant="primary" data-pending="" data-pending-effect="" class="input-button"><svg class="pending-effect-container" data-theme="default" aria-hidden="true" focusable="false">
     <rect pathLength="100" stroke-linecap="round" class="pending-effect-blur"></rect>
     <rect pathLength="100" stroke-linecap="round" class="pending-effect-line"></rect>
   </svg>
-  <!--v-if--><span class="button-text">Click me</span>
+  <!--v-if--><span class="input-button-text">Click me</span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`InputButton > Snapshots > pill 1`] = `
-"<button type="button" aria-disabled="false" data-testid="input-button" data-theme="default" class="input-button primary pill">
+"<button type="button" data-testid="input-button" data-theme="default" data-variant="primary" data-pill="" class="input-button">
   <!--v-if-->
-  <!--v-if--><span class="button-text">Click me</span>
+  <!--v-if--><span class="input-button-text">Click me</span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`InputButton > Snapshots > primary (default) 1`] = `
-"<button type="button" aria-disabled="false" data-testid="input-button" data-theme="default" class="input-button primary">
+"<button type="button" data-testid="input-button" data-theme="default" data-variant="primary" class="input-button">
   <!--v-if-->
-  <!--v-if--><span class="button-text">Click me</span>
+  <!--v-if--><span class="input-button-text">Click me</span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`InputButton > Snapshots > readonly 1`] = `
-"<button type="button" readonly="" aria-disabled="true" data-testid="input-button" data-theme="default" class="input-button primary">
+"<button type="button" readonly="" aria-disabled="true" data-testid="input-button" data-theme="default" data-variant="primary" class="input-button">
   <!--v-if-->
-  <!--v-if--><span class="button-text">Click me</span>
+  <!--v-if--><span class="input-button-text">Click me</span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`InputButton > Snapshots > secondary variant 1`] = `
-"<button type="button" aria-disabled="false" data-testid="input-button" data-theme="default" class="input-button secondary">
+"<button type="button" data-testid="input-button" data-theme="default" data-variant="secondary" class="input-button">
   <!--v-if-->
-  <!--v-if--><span class="button-text">Click me</span>
+  <!--v-if--><span class="input-button-text">Click me</span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`InputButton > Snapshots > tertiary variant 1`] = `
-"<button type="button" aria-disabled="false" data-testid="input-button" data-theme="default" class="input-button tertiary">
+"<button type="button" data-testid="input-button" data-theme="default" data-variant="tertiary" class="input-button">
   <!--v-if-->
-  <!--v-if--><span class="button-text">Click me</span>
+  <!--v-if--><span class="input-button-text">Click me</span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`InputButton > Snapshots > with left and right slots 1`] = `
-"<button type="button" aria-disabled="false" data-testid="input-button" data-theme="default" class="input-button primary">
-  <!--v-if--><span class="btn-icon left"><span data-testid="left-icon">←</span></span><span class="button-text">Click me</span><span class="btn-icon right"><span data-testid="right-icon">→</span></span>
+"<button type="button" data-testid="input-button" data-theme="default" data-variant="primary" class="input-button">
+  <!--v-if--><span class="input-button-icon" data-slot="left"><span data-testid="left-icon">←</span></span><span class="input-button-text">Click me</span><span class="input-button-icon" data-slot="right"><span data-testid="right-icon">→</span></span>
   <!--v-if-->
 </button>"
 `;

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

@@ -25,6 +25,8 @@ declared in `04.elements/forms/03.generic-input-geometry.css`; see `theming-form
 |---|---|---|
 | `--input-checkbox-surface` | `var(--theme-checkbox-symbol-surface)` | Background |
 | `--input-checkbox-border` | `var(--theme-border)` | Border colour |
+| `--input-checkbox-border-hover` | the resolved border | 1px outline colour on hover |
+| `--input-checkbox-shadow` | `var(--form-element-shadow-colour, var(--colour-theme-2))` | Resting shadow ring outside the border (not inside the button style). Width is the global `--form-element-shadow-width` (`0.2rem`; `0` removes it) |
 | `--input-checkbox-border-focus` | `var(--theme-border-focus)` | Outline colour on `:focus-visible` (not in button mode, the button draws its own) |
 | `--input-checkbox-icon-color` | `var(--theme-text)` | Checked icon colour |
 | `--input-checkbox-transition-duration` | `var(--theme-form-transition-duration)` (`0.2s`) | Border/background and icon fade transitions, all three components |
@@ -50,7 +52,8 @@ Also reads `--input-checked-icon-gap` (control to label gap) and `--input-min-he
 | `--input-checkbox-button-surface` | `var(--theme-input-surface)` | Background (resting) |
 | `--input-checkbox-button-border` | `var(--theme-border)` | Border colour |
 | `--input-checkbox-button-surface-hover` | `var(--theme-input-surface-hover)` | Background on hover |
-| `--input-checkbox-button-ring-hover` | `var(--theme-ring)` | Outline colour on hover |
+| `--input-checkbox-button-ring-hover` | `var(--input-checkbox-button-border)` | 1px outline colour on hover, no offset |
+| `--input-checkbox-button-shadow` | `var(--form-element-shadow-colour, var(--colour-theme-2))` | Resting shadow ring outside the border. Width is the global `--form-element-shadow-width` (`0.2rem`; `0` removes it) |
 | `--input-checkbox-button-surface-focus` | `var(--theme-surface-subtle)` | Background when the inner control has `:focus-visible` |
 | `--input-checkbox-button-ring-focus` | `var(--theme-border-focus)` | Outline colour when the inner control has `:focus-visible` |
 | `--input-checkbox-button-label-color` | `var(--theme-text)` | Option label colour |
@@ -90,6 +93,11 @@ transitions) and `--_icon-size` (the button shrinks the inner control's checked
 
 ---
 
+> **Changed 2026-10-17**: bordered controls carry a light shadow ring (`box-shadow`, theme step 2,
+> so red when invalid), and hover draws a 1px outline in the border colour with no offset, over the
+> ring's inner edge. Hover used to draw a 2px outline at a 2px offset in the focus colour. Focus is
+> unchanged and sits just outside the ring.
+
 ## State hooks
 
 | Attribute | On | When |

package/app/components/05.forms/input-checkbox-radio/InputCheckboxRadio.vue

@@ -112,6 +112,14 @@ watch(
       border-radius: 100vw;
     }
 
+    &:not([data-button]) {
+      box-shadow: 0 0 0 var(--form-element-shadow-width) var(--input-checkbox-shadow, var(--form-element-shadow-colour, var(--colour-theme-2)));
+
+      &:has(input:hover) {
+        outline-color: var(--input-checkbox-border-hover, var(--input-checkbox-border, var(--theme-border)));
+      }
+    }
+
     &:not([data-button]):has(input:focus-visible) {
       outline: var(--form-element-outline-width-focus) solid var(--input-checkbox-border-focus, var(--theme-border-focus));
       outline-offset: var(--form-element-outline-offset-focus);

package/app/components/05.forms/input-checkbox-radio/InputCheckboxRadioButton.vue

@@ -114,6 +114,7 @@ watch(
     border: var(--form-element-border-width) solid var(--input-checkbox-button-border, var(--theme-border));
     border-radius: var(--input-checkbox-button-border-radius, 0.4rem);
     outline: var(--form-element-outline-width) solid transparent;
+    box-shadow: 0 0 0 var(--form-element-shadow-width) var(--input-checkbox-button-shadow, var(--form-element-shadow-colour, var(--colour-theme-2)));
 
     transition: all var(--input-checkbox-transition-duration, var(--theme-form-transition-duration)) ease-in-out;
 
@@ -127,8 +128,7 @@ watch(
 
     &:hover {
       background-color: var(--input-checkbox-button-surface-hover, var(--theme-input-surface-hover));
-      outline-color: var(--input-checkbox-button-ring-hover, var(--theme-ring));
-      outline-offset: var(--form-element-outline-offset-focus);
+      outline-color: var(--input-checkbox-button-ring-hover, var(--input-checkbox-button-border, var(--theme-border)));
       cursor: pointer;
     }
 

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

@@ -36,7 +36,7 @@ These match `FormFieldset`'s `--form-fieldset-*` panel tokens.
 | `--input-description-slot-margin-block-end` | `0.8rem` | Space below each slot's wrapper |
 | `--input-description-slot-margin-inline` | `0` | Inline margin of each slot's wrapper |
 | `--input-description-font-size` | `var(--step-4)` | Font size of the `descriptionText` paragraph |
-| `--input-description-line-height` | `var(--step-4)` | Line height of the `descriptionText` paragraph. The default equals the font size, which is tight for wrapping text, so `1.5` is a good override for long descriptions |
+| `--input-description-line-height` | `1.5` | Line height of the `descriptionText` paragraph |
 
 With default (unpadded) panel tokens, the slot margins collapse through the root, so they are what
 spaces the description from the label and control. Beyond these the `descriptionHtml` wrapper
@@ -67,7 +67,7 @@ Every field's description at once, from an app-level stylesheet (e.g. `app/asset
 ```css
 :where(html) {
   --input-description-color: var(--theme-input-placeholder);
-  --input-description-line-height: 1.5;
+  --input-description-font-size: 1.4rem;
 }
 ```
 
@@ -175,3 +175,15 @@ show as uneven space inside the panel. Zero them and space the panel with the ro
 `.input-description` element. It's only reachable when you render `InputDescription` directly in
 a custom field wrapper: the library's own wrappers pass `input-text-description` (no styles
 attached) and don't forward yours. Use a `class` on the wrapper instead (see **One field** above).
+
+---
+
+## Notes
+
+- The root sets `overflow-wrap: anywhere`, so a long URL or unbroken word wraps inside a narrow
+  column. Copy arrives through slots, so there is no line-clamp token: clamp your own slot markup
+  if you need to.
+
+> **Changed 2026-10-17**: `--input-description-line-height` defaults to `1.5` (was `var(--step-4)`,
+> the same as the font size, so wrapped lines touched). If you relied on the tighter spacing, set
+> it back with `--input-description-line-height: var(--step-4)`.

package/app/components/05.forms/input-description/InputDescription.vue

@@ -59,6 +59,7 @@ watch(
     border-radius: var(--input-description-border-radius, 0);
     outline: var(--input-description-outline, 0);
     outline-offset: var(--input-description-outline-offset, 0);
+    overflow-wrap: anywhere;
 
     .input-description-html,
     .input-description-text {
@@ -69,7 +70,7 @@ watch(
 
     .input-description-text {
       font-size: var(--input-description-font-size, var(--step-4));
-      line-height: var(--input-description-line-height, var(--step-4));
+      line-height: var(--input-description-line-height, 1.5);
     }
   }
 }

package/app/components/05.forms/input-description/stories/InputDescription.stories.ts

@@ -1,7 +1,9 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import StorybookComponent from "../InputDescription.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import type { InputUiVariant } from "~/types/forms/types.forms";
+import type { MediaCanvas } from "~/types/components";
 
 interface InputDescriptionStoryArgs {
   descriptionId: string;
@@ -52,8 +54,43 @@ export default {
     descriptionText: "We'll only use this to send your booking confirmation.",
     descriptionHtml: "",
   },
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Help text for a form field. Copy goes in the `descriptionText` slot (a paragraph) and the `descriptionHtml` slot (rich markup, rendered first); with neither filled nothing renders. `description-id` becomes the root id, for the control's `aria-describedby`. `field-has-error` and `input-variant` are styling hooks only. Every labelled field renders it from its own description slots: see [InputTextField](?path=/story/components-forms-input-text-inputtextfield--with-description).",
+      },
+    },
+  },
 } as Meta<InputDescriptionStoryArgs>;
 
+// Links in the canvas open in the Storybook manager (target="_top"), not inside the preview iframe.
+const storyNoteStyle = "margin: 0 0 1.6rem; font-size: 1.4rem;";
+const fieldNote = `
+  <p style="${storyNoteStyle}">
+    Every labelled field renders this from its own description slots. See it in a real field in the
+    <a href="/?path=/story/components-forms-input-text-inputtextfield--with-description" target="_top">InputTextField</a> story.
+  </p>
+`;
+
 const Template: StoryFn<InputDescriptionStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
@@ -64,7 +101,8 @@ const Template: StoryFn<InputDescriptionStoryArgs> = (args) => ({
     return { args, componentArgs };
   },
   template: `
-    <div style="max-width: 48rem; margin: 3.6rem; font-size: 1.6rem;">
+    <div style="max-width: 48rem; font-size: 1.6rem;">
+      ${fieldNote}
       <label for="story-field" style="display: block; font-weight: 700;">Email address</label>
       <StorybookComponent v-bind="componentArgs">
         <template v-if="args.descriptionHtml" #descriptionHtml><span v-html="args.descriptionHtml"></span></template>
@@ -81,17 +119,26 @@ const Template: StoryFn<InputDescriptionStoryArgs> = (args) => ({
 });
 
 export const TextOnly = Template.bind({});
+TextOnly.parameters = {
+  docs: { description: { story: "Plain help text in the `descriptionText` slot." } },
+};
 
 export const HtmlOnly = Template.bind({});
 HtmlOnly.args = {
   descriptionText: "",
   descriptionHtml: "Password must contain:<ul><li>At least 12 characters</li><li>One number</li></ul>",
 };
+HtmlOnly.parameters = {
+  docs: { description: { story: "Rich markup, here a list, in the `descriptionHtml` slot." } },
+};
 
 export const TextAndHtml = Template.bind({});
 TextAndHtml.args = {
   descriptionHtml: "<strong>Tip:</strong> use your work address if you have one.",
 };
+TextAndHtml.parameters = {
+  docs: { description: { story: "Both slots: `descriptionHtml` renders above `descriptionText`." } },
+};
 
 export const Empty = Template.bind({});
 Empty.args = { descriptionText: "", descriptionHtml: "" };
@@ -101,6 +148,9 @@ Empty.parameters = {
 
 export const CustomTokens = Template.bind({});
 CustomTokens.args = { styleClassPassthrough: "input-description-story-tokens" };
+CustomTokens.parameters = {
+  docs: { description: { story: "Colour, size and slot spacing set as tokens through a passthrough class." } },
+};
 CustomTokens.decorators = [
   () => ({
     template: `
@@ -109,7 +159,6 @@ CustomTokens.decorators = [
           .input-description-story-tokens {
             --input-description-color: var(--theme-input-placeholder);
             --input-description-font-size: 1.4rem;
-            --input-description-line-height: 1.5;
             --input-description-slot-margin-block-start: 0.2rem;
             --input-description-slot-margin-block-end: 1.2rem;
           }
@@ -147,7 +196,6 @@ Panel.decorators = [
             --input-description-padding-inline: 1.2rem;
             --input-description-slot-margin-block-start: 0;
             --input-description-slot-margin-block-end: 0;
-            --input-description-line-height: 1.5;
           }
           .input-description-story-panel .input-description-html + .input-description-text {
             margin-block-start: 0.4rem;
@@ -158,3 +206,21 @@ Panel.decorators = [
     `,
   }),
 ];
+
+export const StressTest = Template.bind({});
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+StressTest.args = {
+  descriptionText:
+    "📧 Wir verwenden Ihre Adresse ausschließlich für Rückfragen zu Ihrer Bestellung. Datenschutzgrundverordnungskonformitätsbestätigung https://example.com/a/very/long/unbroken/url/for/the/privacy/policy <b>not bold</b> يرجى إدخال بريدك الإلكتروني",
+  descriptionHtml:
+    "<strong>Hinweis:</strong> Elektronischepostadressefürdiebenachrichtigungüberbestellungen <a href=\"https://example.com/a/very/long/unbroken/url/for/the/terms\">https://example.com/a/very/long/unbroken/url/for/the/terms</a>",
+};
+StressTest.parameters = {
+  initialCanvas: "mobileCanvas",
+  docs: {
+    description: {
+      story:
+        "Long German copy, unbroken compound words, long URLs (one as a link), emoji, HTML-like and right-to-left text in both slots. Check at every canvas width: every line wraps inside the dashed outline and the wrapped lines don't touch. Copy arrives through slots, so there is no line-clamp token: clamp your own slot markup if you need to.",
+    },
+  },
+};

package/app/components/05.forms/input-description/tests/InputDescription.spec.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, afterEach } from "vitest";
+import { describe, it, expect, afterEach, vi } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import { nextTick } from "vue";
 import InputDescription from "../InputDescription.vue";
@@ -19,6 +19,7 @@ describe("InputDescription", () => {
   afterEach(() => {
     wrapper?.unmount();
     wrapper = undefined;
+    vi.restoreAllMocks();
   });
 
   describe("rendering", () => {

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

@@ -130,5 +130,13 @@ ancestor of the label).
 
 `:style-class-passthrough` (string or string array) adds classes to the `<label>`. It's only
 reachable when you render `InputLabel` directly in a custom field wrapper: the library's wrappers
-pass their own hook classes (`input-text-label`, `input-number-label`, `input-select-label`,
-`input-textarea-label`, `input-switch-label`) and don't forward yours.
+pass their own hook classes (`input-text-label`, `input-number-label`, `input-range-label`, `input-select-label`,
+`input-textarea-label`, `toggle-switch-label`) and don't forward yours.
+
+---
+
+## Notes
+
+- The label sets `overflow-wrap: anywhere`, so a long URL or unbroken word (and an unbroken
+  marker text) wraps inside a narrow column. Label copy arrives through slots, so there is no
+  line-clamp token: clamp your own slot markup if you need to.

package/app/components/05.forms/input-label/InputLabel.vue

@@ -95,6 +95,7 @@ watch(
     line-height: var(--input-label-line-height, 1.5);
     margin-block: var(--input-label-margin-block, 0.8rem);
     margin-inline: var(--input-label-margin-inline, 0);
+    overflow-wrap: anywhere;
 
     .input-label-indicator {
       --_indicator-color: var(--input-label-indicator-color, inherit);