srcdev-nuxt-components 9.4.11 → 9.5.0

package/app/components/05.forms/form-wrapper/CONSUMER-STYLING.md

@@ -0,0 +1,101 @@
+# FormWrapper — Consumer Styling Guide
+
+`FormWrapper` is the outer container around a whole form. It caps the form's width
+(`narrow`/`medium`/`wide`) and adds space below it. Individual fields inside are wrapped in
+`FormField`, which has its own width cap (see its CONSUMER-STYLING.md).
+
+## Public token API
+
+| Token | Default | Controls |
+|---|---|---|
+| `--form-wrapper-max-width-narrow` | `400px` | Max width when `width="narrow"` (the default) |
+| `--form-wrapper-max-width-medium` | `800px` | Max width when `width="medium"` |
+| `--form-wrapper-max-width-wide` | `1200px` | Max width when `width="wide"` |
+| `--form-wrapper-container-type` | `inline-size` | `container-type` of the wrapper. Set to `normal` to opt out of containment |
+| `--form-wrapper-margin-block` | `0` | Block margin (space outside the wrapper, above and below) |
+| `--form-wrapper-margin-inline` | `0` | Inline margin. Set to `auto` to centre the form in its container |
+| `--form-wrapper-padding-block` | `0 2rem` | Space above and below the form (`padding-block` shorthand: start, end) |
+| `--form-wrapper-padding-inline` | `0` | Inline padding |
+| `--form-wrapper-border` | `0` | `border` shorthand, e.g. `1px solid var(--theme-border)` |
+| `--form-wrapper-border-radius` | `0` | Corner radius |
+| `--form-wrapper-outline` | `0` | `outline` shorthand |
+| `--form-wrapper-outline-offset` | `0` | Outline offset |
+
+Private token (not public API): `--_max-width`, which the `width` prop switches.
+
+The wrapper also sets `margin-trim: block`, so the first and last children's outer block margins
+are trimmed in browsers that support it (Safari today). Elsewhere it has no effect.
+
+---
+
+## Container queries
+
+The wrapper is a size container named `form-wrapper` (`container: form-wrapper / inline-size`), so
+anything inside the form can respond to the form's width rather than the viewport:
+
+```css
+@container form-wrapper (width > 60rem) {
+  .my-form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+}
+```
+
+`inline-size` containment means the wrapper's width no longer comes from its content. As a normal
+block element it just fills its container (up to its max width), so nothing changes. But inside a
+shrink-to-fit parent (e.g. a flex item with no set width, or `width: fit-content`) it collapses to
+zero width. Give it an explicit width there, or set `--form-wrapper-container-type: normal`.
+
+---
+
+## State hooks
+
+| Attribute | When |
+|---|---|
+| `data-width="narrow" \| "medium" \| "wide"` | Always, mirrors the `width` prop |
+
+> **Changed 2026-09-26**: width used to be a bare class (`.narrow`, `.medium`, `.wide`). Update
+> any `.form-wrapper.medium` selector to `.form-wrapper[data-width="medium"]`. Plain
+> `.form-wrapper` selectors are unaffected.
+
+Don't reuse the `form-wrapper` class on your own `<form>` inside a `FormWrapper`. The component's
+styles would apply to both elements, doubling the bottom padding.
+
+---
+
+## Global theming
+
+```css
+:where(html) {
+  --form-wrapper-max-width-medium: 72rem;
+  --form-wrapper-margin-inline: auto;
+}
+```
+
+---
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<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`.
+
+### Page or section
+
+```css
+.contact-page {
+  .form-wrapper {
+    --form-wrapper-padding-block: 1.6rem 0;
+  }
+}
+```
+
+---
+
+## Class passthrough
+
+`:style-class-passthrough` (string or string array) adds classes to the root `.form-wrapper` element.
+

package/app/components/05.forms/form-wrapper/FormWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="form-wrapper" :class="width">
+  <div class="form-wrapper" :class="elementClasses" :data-width="width">
     <slot name="default"></slot>
   </div>
 </template>
@@ -7,31 +7,48 @@
 <script setup lang="ts">
 interface Props {
   width?: "narrow" | "medium" | "wide";
+  styleClassPassthrough?: string | string[];
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   width: "narrow",
+  styleClassPassthrough: () => [],
 });
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
 </script>
 
 <style lang="css">
 @layer components {
-.form-wrapper {
-  outline: 0rem solid var(--slate-10);
-  padding-bottom: 2rem;
-  margin-trim: block;
+  .form-wrapper {
+    --_max-width: var(--form-wrapper-max-width-narrow, 400px);
 
-  &.narrow {
-    max-width: 400px;
-  }
+    container: form-wrapper / var(--form-wrapper-container-type, inline-size);
+    max-width: var(--_max-width);
+    margin-block: var(--form-wrapper-margin-block, 0);
+    margin-inline: var(--form-wrapper-margin-inline, 0);
+    padding-block: var(--form-wrapper-padding-block, 0 2rem);
+    padding-inline: var(--form-wrapper-padding-inline, 0);
+    border: var(--form-wrapper-border, 0);
+    border-radius: var(--form-wrapper-border-radius, 0);
+    outline: var(--form-wrapper-outline, 0);
+    outline-offset: var(--form-wrapper-outline-offset, 0);
+    margin-trim: block;
 
-  &.medium {
-    max-width: 800px;
-  }
+    &[data-width="medium"] {
+      --_max-width: var(--form-wrapper-max-width-medium, 800px);
+    }
 
-  &.wide {
-    max-width: 1200px;
+    &[data-width="wide"] {
+      --_max-width: var(--form-wrapper-max-width-wide, 1200px);
+    }
   }
 }
-}
 </style>

package/app/components/05.forms/form-wrapper/stories/FormWrapper.stories.ts

@@ -0,0 +1,75 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import StorybookComponent from "../FormWrapper.vue";
+import FormField from "../../form-field/FormField.vue";
+
+interface FormWrapperStoryArgs {
+  width: "narrow" | "medium" | "wide";
+  styleClassPassthrough: string;
+}
+
+export default {
+  title: "Components/Forms/Form Wrapper/FormWrapper",
+  component: StorybookComponent,
+  argTypes: {
+    width: {
+      control: { type: "select" },
+      options: ["narrow", "medium", "wide"],
+      table: { category: "Layout" },
+    },
+    styleClassPassthrough: { control: "text", table: { category: "Styling" } },
+  },
+  args: {
+    width: "narrow",
+    styleClassPassthrough: "",
+  },
+} as Meta<FormWrapperStoryArgs>;
+
+const demoStyles = `
+  <component is="style">
+    .form-wrapper-story-frame {
+      outline: 1px dashed var(--slate-05);
+      padding: 1.6rem;
+    }
+    .form-wrapper-story-frame .form-wrapper {
+      outline: 1px solid var(--slate-06);
+      background-color: var(--slate-01);
+    }
+    .form-wrapper-story-frame .form-field {
+      outline: 1px dotted var(--slate-05);
+    }
+    .form-wrapper-story-placeholder {
+      padding: 1.2rem;
+      font-size: 1.4rem;
+    }
+  </component>
+`;
+
+const Template: StoryFn<FormWrapperStoryArgs> = (args) => ({
+  components: { StorybookComponent, FormField },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div>
+      ${demoStyles}
+      <p style="font-size: 1.4rem; margin: 1.6rem;">Dashed outline: page container. Solid outline: the FormWrapper. Dotted: FormField children.</p>
+      <div class="form-wrapper-story-frame">
+        <StorybookComponent :width="args.width" :style-class-passthrough="args.styleClassPassthrough">
+          <form @submit.prevent>
+            <FormField v-for="n in 3" :key="n" width="wide" :has-gutter="false">
+              <div class="form-wrapper-story-placeholder">Field {{ n }} (FormWrapper width="{{ args.width }}")</div>
+            </FormField>
+          </form>
+        </StorybookComponent>
+      </div>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+
+export const Medium = Template.bind({});
+Medium.args = { width: "medium" };
+
+export const Wide = Template.bind({});
+Wide.args = { width: "wide" };

package/app/components/05.forms/form-wrapper/tests/FormWrapper.spec.ts

@@ -0,0 +1,57 @@
+import { describe, it, expect } from "vitest";
+import { nextTick } from "vue";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import FormWrapper from "../FormWrapper.vue";
+
+describe("FormWrapper", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(FormWrapper);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders default slot content", async () => {
+    const wrapper = await mountSuspended(FormWrapper, {
+      slots: { default: () => "Form goes here" },
+    });
+    expect(wrapper.find(".form-wrapper").text()).toBe("Form goes here");
+  });
+
+  it("defaults to narrow width", async () => {
+    const wrapper = await mountSuspended(FormWrapper);
+    expect(wrapper.find(".form-wrapper").attributes("data-width")).toBe("narrow");
+  });
+
+  it.each(["narrow", "medium", "wide"] as const)("reflects width=%s on data-width", async (width) => {
+    const wrapper = await mountSuspended(FormWrapper, { props: { width } });
+    expect(wrapper.find(".form-wrapper").attributes("data-width")).toBe(width);
+  });
+
+  it("does not use a bare width modifier class", async () => {
+    const wrapper = await mountSuspended(FormWrapper, { props: { width: "medium" } });
+    expect(wrapper.find(".form-wrapper").classes()).not.toContain("medium");
+  });
+
+  it("updates data-width when the prop changes", async () => {
+    const wrapper = await mountSuspended(FormWrapper);
+    await wrapper.setProps({ width: "wide" });
+    expect(wrapper.find(".form-wrapper").attributes("data-width")).toBe("wide");
+  });
+
+  it("applies styleClassPassthrough as a string", async () => {
+    const wrapper = await mountSuspended(FormWrapper, { props: { styleClassPassthrough: "extra-a extra-b" } });
+    const classes = wrapper.find(".form-wrapper").classes();
+    expect(classes).toContain("extra-a");
+    expect(classes).toContain("extra-b");
+  });
+
+  it("applies styleClassPassthrough as an array and updates on change", async () => {
+    const wrapper = await mountSuspended(FormWrapper, { props: { styleClassPassthrough: ["one"] } });
+    expect(wrapper.find(".form-wrapper").classes()).toContain("one");
+
+    await wrapper.setProps({ styleClassPassthrough: ["two"] });
+    await nextTick();
+    const classes = wrapper.find(".form-wrapper").classes();
+    expect(classes).toContain("two");
+    expect(classes).not.toContain("one");
+  });
+});

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

@@ -1,4 +1,4 @@
-# InputButtonCore — Consumer Styling Guide
+# InputButton — Consumer Styling Guide
 
 ## Public token API
 
@@ -67,17 +67,47 @@ Same shape again:
 | `--input-button-tertiary-ring-focus` | `var(--theme-ring)` |
 
 `.is-pending` always dims the *primary* surface regardless of variant — a pre-existing quirk, not
-something this token set changes.
+something this token set changes. The animated border added by `has-pending-effect` has its own
+`--pending-effect-*` tokens, see `../pending-effect/CONSUMER-STYLING.md`.
 
 `InputCopy` and `PricingCard` fall back through `--input-button-primary-*` for their own copy/CTA
 buttons (see their own `CONSUMER-STYLING.md`) rather than duplicating this chain.
 
+> **Trial, 2026-09-27: automatic text contrast.** In browsers that support CSS `contrast-color()`
+> (Safari/iOS 26, Firefox 146, Chrome/Edge 147), an unset `--input-button-{variant}-text` resolves
+> to `contrast-color()` of that state's own surface: pure black or pure white, whichever has more
+> contrast, re-evaluated on hover. Older browsers keep the defaults in the tables above. Setting
+> the `-text` token explicitly always wins, so you can opt a variant out. The whole behaviour is
+> one `@supports` block in `InputButton.vue` and may be removed if the trial doesn't hold up.
+
+---
+
+> Renamed 2026-09-28: component `InputButtonCore` → `InputButton`, root class `.input-button-core` →
+> `.input-button`, `data-testid="input-button-core"` → `"input-button"`. Icon size inside `.btn-icon`
+> is now applied as `font-size: var(--input-icon-size)` (the old `width`/`height` on the `<Icon>` was
+> overridden by `@nuxt/icon`).
+
 ---
 
-## Global theming — app-level CSS file
+## State hooks
+
+| Hook | When |
+|---|---|
+| `.primary`, `.secondary`, `.tertiary`, `.inline` | The `variant` prop |
+| `[data-theme]` | The `theme` prop (re-declares the `--theme-*` palette on the button) |
+| `.icon-only` | The `#iconOnly` slot is used (square, text becomes `sr-only`) |
+| `.pill` | `is-pill` |
+| `.is-pending`, `.pending-effect` | `is-pending` / `has-pending-effect` |
+| `.is-link` | `href` is set (renders `NuxtLink` or `<a>`) |
+| `[readonly]` + `aria-disabled="true"` | `readonly` (dimmed, not operable by mouse or keyboard) |
+
+Inner classes: `.button-text`, `.btn-icon` with `.left` / `.right` / `.icon-only`.
+
+
+## Global theming
 
 Set tokens on `:where(html)` in the consuming app's own theming file (e.g.
-`assets/styles/setup/03.theming/_button.css`). These apply to every `InputButtonCore` instance:
+`assets/styles/setup/03.theming/_button.css`). These apply to every `InputButton` instance:
 
 ```css
 :where(html) {
@@ -94,19 +124,34 @@ Only declare the tokens you want to change — everything else keeps inheriting
 
 ---
 
-## Per-instance overrides
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<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`.
+
+### One instance
 
 ```vue
-<InputButtonCore variant="primary" button-text="Book now" style="--input-button-primary-surface: var(--gold-06);" />
+<InputButton variant="primary" button-text="Book now" style="--input-button-primary-surface: var(--gold-06);" />
 ```
 
 To make hover lighten instead of darken for one instance, override the hover token directly rather
 than fighting the `color-mix()` default:
 
 ```vue
-<InputButtonCore
+<InputButton
   variant="primary"
   button-text="Book now"
   style="--input-button-primary-surface-hover: var(--gold-04);"
 />
 ```
+
+
+---
+
+## Class passthrough
+
+`style-class-passthrough` adds classes to the root `.input-button` element. Reactive after mount.

package/app/components/05.forms/input-button/{InputButtonCore.vue → InputButton.vue}

@@ -5,21 +5,22 @@
     :href="isLink ? props.href : undefined"
     :readonly="!isLink ? props.readonly : undefined"
     :aria-disabled="!isLink ? props.readonly : undefined"
-    data-testid="input-button-core"
+    data-testid="input-button"
     :data-theme="theme"
-    class="input-button-core"
-    :class="buttonClasses"
+    class="input-button"
+    :class="buttonClasses()"
+    @click.capture="guardReadonly"
   >
     <PendingEffect v-if="hasPendingEffect" :theme="theme" />
 
-    <span v-if="hasLeftSlot" class="btn-icon left">
+    <span v-if="hasLeftSlot()" class="btn-icon left">
       <slot name="left"></slot>
     </span>
-    <span class="button-text" :class="[{ 'sr-only': hasIconOnlySlot }]">{{ buttonText }}</span>
-    <span v-if="hasRightSlot" class="btn-icon right">
+    <span class="button-text" :class="[{ 'sr-only': hasIconOnlySlot() }]">{{ buttonText }}</span>
+    <span v-if="hasRightSlot()" class="btn-icon right">
       <slot name="right"></slot>
     </span>
-    <span v-if="hasIconOnlySlot" class="btn-icon icon-only">
+    <span v-if="hasIconOnlySlot()" class="btn-icon icon-only">
       <slot name="iconOnly"></slot>
     </span>
   </component>
@@ -77,27 +78,38 @@ const tag = computed(() => {
 });
 
 // Cache slot computations for better performance
-const hasLeftSlot = computed(() => Boolean(slots.left && !slots.iconOnly));
-const hasRightSlot = computed(() => Boolean(slots.right && !slots.iconOnly));
-const hasIconOnlySlot = computed(() => Boolean(slots.iconOnly));
+const hasLeftSlot = () => Boolean(slots.left && !slots.iconOnly);
+const hasRightSlot = () => Boolean(slots.right && !slots.iconOnly);
+const hasIconOnlySlot = () => Boolean(slots.iconOnly);
 
 // Combine all button classes into a single computed
-const buttonClasses = computed(() => [
+const buttonClasses = () => [
   props.variant,
   elementClasses.value,
-  { "icon-only": hasIconOnlySlot.value },
+  { "icon-only": hasIconOnlySlot() },
   { "pending-effect": props.hasPendingEffect },
   { "is-pending": props.isPending },
   { pill: props.isPill },
   { "is-link": isLink.value },
-]);
+];
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const guardReadonly = (event: MouseEvent) => {
+  if (!props.readonly) return;
+  event.preventDefault();
+  event.stopImmediatePropagation();
+};
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough)
+);
 </script>
 
 <style lang="css">
 @layer components {
-  .input-button-core {
+  .input-button {
     /* all: unset; */
 
     display: grid;
@@ -120,6 +132,10 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
       display: inline-grid;
     }
 
+    &.pending-effect {
+      overflow: visible;
+    }
+
     /*
     * Theming
     * Every colour is a public --input-button-{variant}-{property} token, inline-fallback to
@@ -220,6 +236,34 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
       }
     }
 
+    /* Trial (2026-09-27): where supported, text picks black or white from its own surface, per
+       state. An explicit --input-button-{variant}-text still wins. Remove this block to revert. */
+    @supports (color: contrast-color(red)) {
+      &.primary {
+        color: var(--input-button-primary-text, contrast-color(var(--_surface)));
+
+        &:hover {
+          color: var(--input-button-primary-text, contrast-color(var(--_surface-hover)));
+        }
+      }
+
+      &.secondary {
+        color: var(--input-button-secondary-text, contrast-color(var(--_surface)));
+
+        &:hover {
+          color: var(--input-button-secondary-text, contrast-color(var(--_surface-hover)));
+        }
+      }
+
+      &.tertiary {
+        color: var(--input-button-tertiary-text, contrast-color(var(--_surface)));
+
+        &:hover {
+          color: var(--input-button-tertiary-text, contrast-color(var(--_surface-hover)));
+        }
+      }
+    }
+
     &.primary,
     &.secondary,
     &.tertiary {
@@ -259,10 +303,8 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
       display: flex;
 
       .icon {
-        aspect-ratio: 1;
         display: inline-block;
-        height: var(--input-icon-size);
-        width: var(--input-icon-size);
+        font-size: var(--input-icon-size);
       }
     }
 

package/app/components/05.forms/input-button/playwright/{input-button-core.playwright.ts → input-button.playwright.ts}

@@ -38,7 +38,7 @@ const THEMES = ["default", "success", "error", "warning"] as const;
 // -------------------------
 // Per-story baseline snapshots
 // -------------------------
-test.describe("InputButtonCore — story baselines", () => {
+test.describe("InputButton — story baselines", () => {
   for (const story of STORIES) {
     test(`${story} matches snapshot`, async ({ page }) => {
       const button = await getButton(page, story);
@@ -50,7 +50,7 @@ test.describe("InputButtonCore — story baselines", () => {
 // -------------------------
 // Variant snapshots (default story × each variant)
 // -------------------------
-test.describe("InputButtonCore — variants", () => {
+test.describe("InputButton — variants", () => {
   for (const variant of VARIANTS) {
     test(`default story — variant: ${variant}`, async ({ page }) => {
       const button = await getButton(page, "default", { variant });
@@ -62,7 +62,7 @@ test.describe("InputButtonCore — variants", () => {
 // -------------------------
 // Theme snapshots (default story × each theme)
 // -------------------------
-test.describe("InputButtonCore — themes", () => {
+test.describe("InputButton — themes", () => {
   for (const theme of THEMES) {
     test(`default story — theme: ${theme}`, async ({ page }) => {
       const button = await getButton(page, "default", { theme });
@@ -74,7 +74,7 @@ test.describe("InputButtonCore — themes", () => {
 // -------------------------
 // State snapshots
 // -------------------------
-test.describe("InputButtonCore — states", () => {
+test.describe("InputButton — states", () => {
   test("readonly", async ({ page }) => {
     const button = await getButton(page, "default", { readonly: "true" });
     await expect(button).toHaveScreenshot("state-readonly.png");
@@ -94,7 +94,7 @@ test.describe("InputButtonCore — states", () => {
 // -------------------------
 // Key combinations (variant × state — not exhaustive, just meaningful)
 // -------------------------
-test.describe("InputButtonCore — variant × state combinations", () => {
+test.describe("InputButton — variant × state combinations", () => {
   const combinations: Array<{ story: string; args: Record<string, string>; name: string }> = [
     { story: "default", args: { variant: "secondary", isPill: "true" }, name: "secondary-pill" },
     { story: "default", args: { variant: "tertiary", readonly: "true" }, name: "tertiary-readonly" },

package/app/components/05.forms/input-button/stories/{InputButtonCore.stories.ts → InputButton.stories.ts}

@@ -1,9 +1,9 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { ref } from "vue";
-import StorybookComponent from "../InputButtonCore.vue";
+import StorybookComponent from "../InputButton.vue";
 import InputTextCore from "../../input-text/InputTextCore.vue";
 
-interface InputButtonCoreStoryArgs {
+interface InputButtonStoryArgs {
   type: "submit" | "button" | "reset";
   theme: "default" | "success" | "error" | "warning";
   variant: "primary" | "secondary" | "tertiary" | "inline";
@@ -27,7 +27,7 @@ interface InputButtonCoreStoryArgs {
 }
 
 export default {
-  title: "Components/Forms/Input Button/InputButtonCore",
+  title: "Components/Forms/Input Button/InputButton",
   component: StorybookComponent,
   argTypes: {
     // Basic Configuration
@@ -215,14 +215,9 @@ export default {
     rightIconName: "mdi:arrow-right",
     iconOnlyName: "mdi:flash",
   },
-  // NOTE: In your InputButtonCore.vue component, ensure you do NOT destructure props in <script setup>.
-  // Always use props.variant and props.isPill directly for reactivity.
-  // Example:
-  // const props = defineProps<{ variant: string; isPill: boolean; ... }>()
-  // // Use props.variant, props.isPill in template and script.
 } as Meta<typeof StorybookComponent>;
 
-const Template: StoryFn<InputButtonCoreStoryArgs> = (args) => ({
+const Template: StoryFn<InputButtonStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
     const clickCount = ref(0);
@@ -314,7 +309,7 @@ NuxtIconOnlyComponent.args = {
   iconOnlyName: "mdi:chevron-right-circle-outline",
 };
 
-// Composition check, not a props demo: confirms InputButtonCore's --button-min-height (defaults
+// 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
 // most common "usual suspect" pairing (e.g. newsletter signup, search bar). Textareas are the
 // deliberate exception to this alignment and aren't part of this story.
@@ -337,3 +332,6 @@ const InlineTemplate: StoryFn = () => ({
 });
 
 export const InlineWithTextInput = InlineTemplate.bind({});
+
+// Fixed showcase: hardcoded values, so Controls would do nothing here.
+InlineWithTextInput.parameters = { controls: { disable: true } };