srcdev-nuxt-components 9.6.10 → 9.6.12

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

@@ -1,13 +1,16 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import StorybookComponent from "../InputButton.vue";
 import InputText from "../../input-text/InputText.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
 
 interface InputButtonStoryArgs {
   type: "submit" | "button" | "reset";
   theme: "default" | "success" | "error" | "warning";
   variant: "primary" | "secondary" | "tertiary" | "inline";
   buttonText: string;
+  isPill: boolean;
   styleClassPassthrough: string[];
   isPending: boolean;
   hasPendingEffect: boolean;
@@ -75,7 +78,7 @@ export default {
     variant: {
       control: { type: "select" },
       options: ["primary", "secondary", "tertiary", "inline"],
-      description: "Button variant/style",
+      description: "primary: filled. secondary: outlined. tertiary: text-only. inline: no colours, for wrapper components that style the button themselves",
       table: {
         category: "Styling",
       },
@@ -201,7 +204,7 @@ export default {
     isPending: false,
     hasPendingEffect: false,
     readonly: false,
-    isPill: false, // Ensure isPill is present and defaulted
+    isPill: false,
     useLeftSlot: false,
     useRightSlot: false,
     useIconOnlySlot: false,
@@ -215,7 +218,45 @@ export default {
     rightIconName: "mdi:arrow-right",
     iconOnlyName: "mdi:flash",
   },
-} as Meta<typeof StorybookComponent>;
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The library's button. Renders a `<button>`, or a link when `href` is set (`NuxtLink` for a `/` path unless `external`). `variant` (primary, secondary, tertiary, inline) and `theme` pick the colours, `is-pill` rounds it, `readonly` dims it and blocks clicks, and `is-pending` with `has-pending-effect` animates a border while work runs. Label copy is `button-text`; the `left`/`right` slots add icons beside it, and `iconOnly` replaces it (the text stays as screen-reader text). The Slots and Icons controls are story-only. It's also the action button inside [InputCopy](?path=/story/molecules-input-copy--default), [CookieConsentBanner](?path=/story/molecules-cookieconsentbanner--default) and the step buttons of [InputNumberField](?path=/story/components-forms-input-number-inputnumberfield--default).",
+      },
+    },
+  },
+} as Meta<InputButtonStoryArgs>;
+
+// Links in the canvas open in the Storybook manager (target="_top"), not inside the preview iframe.
+const storyNoteStyle = "margin: 0; font-size: 1.4rem;";
+const usedByNote = `
+  <p style="${storyNoteStyle}">
+    Also the action button inside
+    <a href="/?path=/story/molecules-input-copy--default" target="_top">InputCopy</a>,
+    <a href="/?path=/story/molecules-cookieconsentbanner--default" target="_top">CookieConsentBanner</a>
+    (variant inline, styled by the banner's tokens) and the step buttons of
+    <a href="/?path=/story/components-forms-input-number-inputnumberfield--default" target="_top">InputNumberField</a>.
+  </p>
+`;
+
+const storyOnlyArgs = [
+  "useLeftSlot",
+  "useRightSlot",
+  "useIconOnlySlot",
+  "leftSlotContent",
+  "rightSlotContent",
+  "iconOnlyContent",
+  "leftIconName",
+  "rightIconName",
+  "iconOnlyName",
+  "useLeftIcon",
+  "useRightIcon",
+  "useIconOnly",
+] as const;
+
+const stripStoryArgs = (args: InputButtonStoryArgs) =>
+  Object.fromEntries(Object.entries(args).filter(([key]) => !(storyOnlyArgs as readonly string[]).includes(key)));
 
 const Template: StoryFn<InputButtonStoryArgs> = (args) => ({
   components: { StorybookComponent },
@@ -228,14 +269,18 @@ const Template: StoryFn<InputButtonStoryArgs> = (args) => ({
       }
     };
 
+    const componentArgs = computed(() => stripStoryArgs(args));
+
     return {
       args,
+      componentArgs,
       clickCount,
       handleClick,
     };
   },
   template: `
-    <div style="display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;margin: 36px;">
+    <div style="display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; margin: 3.6rem;">
+      ${usedByNote}
       <!-- :key forces a remount when any slot-visibility arg changes. Verified the args
            themselves ARE reactive here (a plain {{ args.useLeftSlot }} interpolation updates
            live on toggle) — the bug is narrower: Vue's compiled-at-runtime string template
@@ -244,10 +289,11 @@ const Template: StoryFn<InputButtonStoryArgs> = (args) => ({
            Toggling a control changed the fallthrough attribute (confirmed via useleftslot="true"
            in the rendered DOM) but never actually added/removed the slot content until a hard
            refresh. Remounting sidesteps whatever the underlying slot-stability quirk is, rather
-           than chasing it further. -->
+           than chasing it further. The story-only args are stripped before v-bind, so they no
+           longer land on the button as attributes. -->
       <StorybookComponent
         :key="[args.useLeftSlot, args.useLeftIcon, args.useRightSlot, args.useRightIcon, args.useIconOnlySlot, args.useIconOnly].join(',')"
-        v-bind="args"
+        v-bind="componentArgs"
         @click="handleClick"
       >
         <template v-if="args.useLeftSlot || args.useLeftIcon" #left>
@@ -276,6 +322,9 @@ Default.args = {
   useLeftSlot: false,
   useRightSlot: false,
 };
+Default.parameters = {
+  docs: { description: { story: "Text only. Every prop is live in Controls, including the pending, pill and readonly states." } },
+};
 
 export const WithBothEmojiIcons = Template.bind({});
 WithBothEmojiIcons.args = {
@@ -285,6 +334,9 @@ WithBothEmojiIcons.args = {
   leftSlotContent: "💸",
   rightSlotContent: "✅",
 };
+WithBothEmojiIcons.parameters = {
+  docs: { description: { story: "Plain content in the `left` and `right` slots." } },
+};
 
 export const WithBothNuxtIconComponents = Template.bind({});
 WithBothNuxtIconComponents.args = {
@@ -294,6 +346,9 @@ WithBothNuxtIconComponents.args = {
   leftIconName: "mdi:arrow-left",
   rightIconName: "mdi:arrow-right",
 };
+WithBothNuxtIconComponents.parameters = {
+  docs: { description: { story: "`<Icon class=\"icon\">` in both slots, sized by `--input-icon-size`." } },
+};
 
 export const EmojiIconOnly = Template.bind({});
 EmojiIconOnly.args = {
@@ -301,6 +356,9 @@ EmojiIconOnly.args = {
   useIconOnlySlot: true,
   iconOnlyContent: "⚡",
 };
+EmojiIconOnly.parameters = {
+  docs: { description: { story: "The `iconOnly` slot makes the button square (`data-icon-only`) and keeps `button-text` as screen-reader text." } },
+};
 
 export const NuxtIconOnlyComponent = Template.bind({});
 NuxtIconOnlyComponent.args = {
@@ -308,6 +366,9 @@ NuxtIconOnlyComponent.args = {
   useIconOnly: true,
   iconOnlyName: "mdi:chevron-right-circle-outline",
 };
+NuxtIconOnlyComponent.parameters = {
+  docs: { description: { story: "Icon-only with an `<Icon>`; the accessible name still comes from `button-text`." } },
+};
 
 // Composition check, not a props demo: confirms InputButton's --button-min-height (defaults
 // to var(--input-min-height)) actually keeps it height-aligned with an inline text input, the
@@ -334,4 +395,80 @@ const InlineTemplate: StoryFn = () => ({
 export const InlineWithTextInput = InlineTemplate.bind({});
 
 // Fixed showcase: hardcoded values, so Controls would do nothing here.
-InlineWithTextInput.parameters = { controls: { disable: true } };
+InlineWithTextInput.parameters = {
+  controls: { disable: true },
+  docs: {
+    description: {
+      story: "Composition check: `--button-min-height` defaults to `--input-min-height`, so the button lines up with an inline text input. Controls do nothing here.",
+    },
+  },
+};
+
+const stressLabels = [
+  "Jetzt unverbindlich einen kostenlosen Beratungstermin vereinbaren",
+  "Datenschutzgrundverordnungskonformitätsbestätigung",
+  "https://example.com/a/very/long/unbroken/url/for/the/button/label",
+  "<b>not bold</b>",
+  "🎉 Book now",
+  "احجز الآن",
+  "x",
+  "",
+];
+
+const StressTemplate: StoryFn<InputButtonStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const componentArgs = computed(() => {
+      const { buttonText: _buttonText, ...rest } = stripStoryArgs(args);
+      return rest;
+    });
+    return { args, componentArgs, stressLabels };
+  },
+  template: `
+    <div style="display: grid; gap: 2.4rem;">
+      <div style="display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem;">
+        <StorybookComponent v-for="(label, index) in stressLabels" :key="index" v-bind="componentArgs" :button-text="label" />
+        <StorybookComponent v-bind="componentArgs" :button-text="stressLabels[0]">
+          <template #left><Icon name="mdi:calendar" class="icon" /></template>
+          <template #right><Icon name="mdi:arrow-right" class="icon" /></template>
+        </StorybookComponent>
+      </div>
+      <div style="display: flex; flex-wrap: wrap; gap: 1.2rem;">
+        <StorybookComponent v-bind="componentArgs" variant="secondary" button-text="Zurück zur vorherigen Seite" />
+        <StorybookComponent v-bind="componentArgs" :button-text="stressLabels[0]" />
+      </div>
+    </div>
+  `,
+});
+
+export const StressTest = StressTemplate.bind({});
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+StressTest.args = { isPill: true };
+StressTest.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>
+    `,
+  }),
+];
+StressTest.parameters = {
+  layout: "fullscreen",
+  initialCanvas: "mobileCanvas",
+  docs: {
+    story: { inline: false, height: "900px" },
+    description: {
+      story:
+        "Long German copy, an unbroken compound word, a long URL, HTML-like text, emoji, right-to-left text, a single character and an empty label, then a long label with icons on both sides and a wrapping row of two buttons. Check at every canvas width: no button pushes past the dashed outline, long labels wrap inside the button (`--input-button-text-white-space` defaults to `normal`), icons keep their size, markup renders as text, and the pill shape still reads with several lines. Toggle variant, pill and pending in Controls. Button text is never line-clamped: a cut-off action label can't be trusted.",
+    },
+  },
+};

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