srcdev-nuxt-components 9.3.12 → 9.4.0

package/app/components/01.atoms/cookie-consent-banner/stories/CookieConsentBanner.stories.ts

@@ -0,0 +1,93 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import StorybookComponent from "../CookieConsentBanner.vue";
+
+export default {
+  title: "Atoms/CookieConsentBanner",
+  component: StorybookComponent,
+  argTypes: {
+    theme: {
+      control: { type: "inline-radio" },
+      options: ["info", "success", "warning", "error"],
+      description: "Semantic theme for the banner's accent border/accept button",
+      table: { category: "Appearance" },
+    },
+    styleClassPassthrough: {
+      control: { type: "object" },
+      description: "Extra classes applied to the banner root",
+      table: { category: "Styling" },
+    },
+  },
+  args: {
+    theme: "info",
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        // Drives itself from the real useCookieConsent()/useCookie() state, so
+        // once accepted/rejected in this browser it stays hidden across story
+        // reloads. Each story below has "Show banner again" (resets state
+        // in-place) and "Delete cookie" (clears document.cookie directly, for
+        // verifying the cookie itself is actually gone, e.g. in devtools).
+        component: "Reads/writes a real 'cookie-consent' cookie via useCookieConsent(). Use the story's reset controls to bring the banner back.",
+      },
+    },
+  },
+} as Meta<typeof StorybookComponent>;
+
+// Resets the same "cookie-consent" cookie useCookieConsent() reads, so the
+// banner's status goes back to "unset" and reappears without a page reload
+// (Nuxt dedupes useCookie() by key, so this shares the ref CookieConsentBanner
+// itself reads).
+function useResetConsent() {
+  const consentCookie = useCookie<"granted" | "denied" | null>("cookie-consent");
+  const showAgain = () => {
+    consentCookie.value = null;
+  };
+  // Belt-and-braces alongside showAgain(): clears the actual browser cookie
+  // rather than just the in-memory ref, so devtools/Application tab reflects
+  // it too, not only the story's live re-render.
+  const deleteCookie = () => {
+    document.cookie = "cookie-consent=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+    consentCookie.value = null;
+  };
+  return { showAgain, deleteCookie };
+}
+
+const Template: StoryFn<typeof StorybookComponent> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const { showAgain, deleteCookie } = useResetConsent();
+    return { args, showAgain, deleteCookie };
+  },
+  template: `
+    <div style="padding: 2rem; min-height: 240px; position: relative;">
+      <button type="button" @click="showAgain">Show banner again</button>
+      <button type="button" @click="deleteCookie" style="margin-inline-start: 0.8rem;">Delete cookie</button>
+      <StorybookComponent :theme="args.theme" :style-class-passthrough="args.styleClassPassthrough">
+        <template #message>This site uses cookies for analytics. You can accept or reject them.</template>
+      </StorybookComponent>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+
+export const CustomCopy: StoryFn<typeof StorybookComponent> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const { showAgain, deleteCookie } = useResetConsent();
+    return { args, showAgain, deleteCookie };
+  },
+  template: `
+    <div style="padding: 2rem; min-height: 240px; position: relative;">
+      <button type="button" @click="showAgain">Show banner again</button>
+      <button type="button" @click="deleteCookie" style="margin-inline-start: 0.8rem;">Delete cookie</button>
+      <StorybookComponent :theme="args.theme">
+        <template #message>We use cookies to understand traffic to this site. No personal data is sold.</template>
+        <template #acceptLabel>Allow cookies</template>
+        <template #rejectLabel>No thanks</template>
+      </StorybookComponent>
+    </div>
+  `,
+});

package/app/components/01.atoms/cookie-consent-banner/tests/CookieConsentBanner.spec.ts

@@ -0,0 +1,118 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { ref } from "vue";
+import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
+import CookieConsentBanner from "../CookieConsentBanner.vue";
+
+const { useAppConfigMock } = vi.hoisted(() => ({
+  useAppConfigMock: vi.fn(() => ({ srcdev: undefined as Record<string, unknown> | undefined, icon: {} as object })),
+}));
+
+const statusRef = ref<"unset" | "granted" | "denied">("unset");
+const acceptAllSpy = vi.fn(() => {
+  statusRef.value = "granted";
+});
+const rejectAllSpy = vi.fn(() => {
+  statusRef.value = "denied";
+});
+
+mockNuxtImport("useAppConfig", () => useAppConfigMock);
+mockNuxtImport("useCookieConsent", () => () => ({
+  status: statusRef,
+  acceptAll: acceptAllSpy,
+  rejectAll: rejectAllSpy,
+}));
+
+function banner() {
+  return document.querySelector(".cookie-consent-banner");
+}
+
+function acceptButton() {
+  return document.querySelector("[data-test-id='cookie-consent-banner-accept']") as HTMLElement;
+}
+
+function rejectButton() {
+  return document.querySelector("[data-test-id='cookie-consent-banner-reject']") as HTMLElement;
+}
+
+describe("CookieConsentBanner", () => {
+  beforeEach(() => {
+    statusRef.value = "unset";
+    acceptAllSpy.mockClear();
+    rejectAllSpy.mockClear();
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("mounts without error", async () => {
+    const w = await mountSuspended(CookieConsentBanner);
+    expect(w.vm).toBeTruthy();
+  });
+
+  it("renders the banner, teleported to body", async () => {
+    await mountSuspended(CookieConsentBanner);
+    expect(banner()).not.toBeNull();
+  });
+
+  it("is visible (no closed class) while status is 'unset'", async () => {
+    await mountSuspended(CookieConsentBanner);
+    expect(banner()!.classList).not.toContain("closed");
+  });
+
+  it("adds the closed class once status is no longer 'unset'", async () => {
+    statusRef.value = "granted";
+    await mountSuspended(CookieConsentBanner);
+    expect(banner()!.classList).toContain("closed");
+  });
+
+  it("defaults to data-theme='info'", async () => {
+    await mountSuspended(CookieConsentBanner);
+    expect(banner()!.getAttribute("data-theme")).toBe("info");
+  });
+
+  it("uses app.config theme when no prop is supplied", async () => {
+    useAppConfigMock.mockReturnValue({ icon: {}, srcdev: { cookieConsentBanner: { theme: "success" } } });
+    await mountSuspended(CookieConsentBanner);
+    expect(banner()!.getAttribute("data-theme")).toBe("success");
+  });
+
+  it("explicit theme prop takes precedence over app.config", async () => {
+    useAppConfigMock.mockReturnValue({ icon: {}, srcdev: { cookieConsentBanner: { theme: "warning" } } });
+    await mountSuspended(CookieConsentBanner, { props: { theme: "error" } });
+    expect(banner()!.getAttribute("data-theme")).toBe("error");
+  });
+
+  it("renders default message copy", async () => {
+    await mountSuspended(CookieConsentBanner);
+    expect(banner()!.textContent).toContain("cookies");
+  });
+
+  it("renders message slot content", async () => {
+    await mountSuspended(CookieConsentBanner, { slots: { message: "Custom cookie copy" } });
+    expect(banner()!.textContent).toContain("Custom cookie copy");
+  });
+
+  it("renders acceptLabel/rejectLabel slot content", async () => {
+    await mountSuspended(CookieConsentBanner, { slots: { acceptLabel: "Yes please", rejectLabel: "No thanks" } });
+    expect(acceptButton().textContent).toContain("Yes please");
+    expect(rejectButton().textContent).toContain("No thanks");
+  });
+
+  it("calls acceptAll() when the accept button is clicked", async () => {
+    await mountSuspended(CookieConsentBanner);
+    acceptButton().click();
+    expect(acceptAllSpy).toHaveBeenCalledOnce();
+  });
+
+  it("calls rejectAll() when the reject button is clicked", async () => {
+    await mountSuspended(CookieConsentBanner);
+    rejectButton().click();
+    expect(rejectAllSpy).toHaveBeenCalledOnce();
+  });
+
+  it("applies a styleClassPassthrough class to the root", async () => {
+    await mountSuspended(CookieConsentBanner, { props: { styleClassPassthrough: "outlined" } });
+    expect(banner()!.classList).toContain("outlined");
+  });
+});

package/app/components/02.molecules/input-copy/CONSUMER-STYLING.md

@@ -14,9 +14,9 @@ or instance) without touching the component itself.
 | `--input-copy-input-text-color` | `#333` | Input text colour |
 | `--input-copy-input-placeholder-color` | `#999` | Placeholder text colour |
 | `--input-copy-input-font-size` | `0.95rem` | Input field font size |
-| `--input-copy-button-bg` | `var(--theme-button-primary-surface)` | Copy button background |
-| `--input-copy-button-bg-hover` | `var(--theme-button-primary-surface-hover)` | Copy button background on hover |
-| `--input-copy-button-text-color` | `var(--theme-button-primary-text)` | Copy button text colour |
+| `--input-copy-button-bg` | `var(--input-button-primary-surface)` | Copy button background |
+| `--input-copy-button-bg-hover` | `var(--input-button-primary-surface-hover)` | Copy button background on hover |
+| `--input-copy-button-text-color` | `var(--input-button-primary-text)` | Copy button text colour |
 | `--input-copy-button-padding` | `0.8rem 1.2rem` | Copy button padding |
 | `--input-copy-button-border-radius` | `0.4rem` | Copy button corner rounding |
 | `--input-copy-button-gap` | `0.6rem` | Gap between icon and text in button |

package/app/components/02.molecules/input-copy/InputCopy.vue

@@ -102,9 +102,15 @@ onUnmounted(() => {
     --_input-placeholder-color: var(--input-copy-input-placeholder-color, #999);
     --_input-font-size: var(--input-copy-input-font-size, 0.95rem);
 
-    --_button-bg: var(--input-copy-button-bg, var(--theme-button-primary-surface));
-    --_button-bg-hover: var(--input-copy-button-bg-hover, var(--theme-button-primary-surface-hover));
-    --_button-text-color: var(--input-copy-button-text-color, var(--theme-button-primary-text));
+    --_button-bg: var(--input-copy-button-bg, var(--input-button-primary-surface, var(--theme-surface)));
+    --_button-bg-hover: var(
+      --input-copy-button-bg-hover,
+      var(--input-button-primary-surface-hover, var(--theme-surface-hover))
+    );
+    --_button-text-color: var(
+      --input-copy-button-text-color,
+      var(--input-button-primary-text, var(--theme-on-surface))
+    );
     --_button-padding: var(--input-copy-button-padding, 0.8rem 1.2rem);
     --_button-border-radius: var(--input-copy-button-border-radius, 0.4rem);
     --_button-gap: var(--input-copy-button-gap, 0.6rem);

package/app/components/02.molecules/pricing-card/CONSUMER-STYLING.md

@@ -33,9 +33,9 @@ override it — there is no locale-aware formatting, just a literal prefix chara
 | `--pricing-card-description-color` | `#555` | Plan description text colour |
 | `--pricing-card-feature-color` | `#333` | Feature list text colour |
 | `--pricing-card-cta-align` | `flex-start` | CTA wrapper `align-self` — set to `stretch`, `center`, or `flex-end` to change CTA alignment/width within the card |
-| `--pricing-card-cta-bg` | `var(--theme-button-primary-surface)` | CTA button background |
-| `--pricing-card-cta-bg-hover` | `var(--theme-button-primary-surface-hover)` | CTA button background on hover |
-| `--pricing-card-cta-text` | `var(--theme-button-primary-text)` | CTA button text colour |
+| `--pricing-card-cta-bg` | `var(--input-button-primary-surface)` | CTA button background |
+| `--pricing-card-cta-bg-hover` | `var(--input-button-primary-surface-hover)` | CTA button background on hover |
+| `--pricing-card-cta-text` | `var(--input-button-primary-text)` | CTA button text colour |
 | `--pricing-card-cta-padding` | `1rem 1.6rem` | CTA button padding |
 | `--pricing-card-cta-border-radius` | `0.4rem` | CTA button corner rounding |
 

package/app/components/02.molecules/pricing-card/PricingCard.vue

@@ -111,9 +111,12 @@ watch(
     --_feature-color: var(--pricing-card-feature-color, #333);
 
     --_cta-align: var(--pricing-card-cta-align, flex-start);
-    --_cta-bg: var(--pricing-card-cta-bg, var(--theme-button-primary-surface));
-    --_cta-bg-hover: var(--pricing-card-cta-bg-hover, var(--theme-button-primary-surface-hover));
-    --_cta-text: var(--pricing-card-cta-text, var(--theme-button-primary-text));
+    --_cta-bg: var(--pricing-card-cta-bg, var(--input-button-primary-surface, var(--theme-surface)));
+    --_cta-bg-hover: var(
+      --pricing-card-cta-bg-hover,
+      var(--input-button-primary-surface-hover, var(--theme-surface-hover))
+    );
+    --_cta-text: var(--pricing-card-cta-text, var(--input-button-primary-text, var(--theme-on-surface)));
     --_cta-padding: var(--pricing-card-cta-padding, 1rem 1.6rem);
     --_cta-border-radius: var(--pricing-card-cta-border-radius, 0.4rem);
 

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

@@ -0,0 +1,117 @@
+# InputButtonCore — Consumer Styling Guide
+
+## Public token API
+
+Every colour token below is `var(--input-button-{variant}-{property}, {default})` — set the
+`--input-button-*` name to override just this component's variant; leave it unset and it inherits
+the shared `--theme-*` slot every other themed component (inputs, alerts, ...) also falls back to.
+See `theming-component-token-pattern.md` for why this two-tier shape exists.
+
+**Resting state is flat by design**: `border` defaults to the variant's own surface colour, so
+there's no visible edge until you hover, focus, or override it. **`outline` defaults to fully
+transparent** in both resting and hover state — outline is reserved for the focus-visible ring,
+not used to reinforce the flat look. **Hover always darkens the resting surface** via `color-mix()`
+rather than jumping to a different `--theme-*` step — it's reliably darker in both light and dark
+mode. **`:focus-visible` is a separate token set**, not grouped with hover, since it's the one
+state that gets a real, independently-themeable indicator (its `outline-width`/`-offset` come from
+`--button-focus-ring-width`/`-offset`, not from here — see `theming-form-geometry-tokens.md`).
+
+Geometry and typography (`--button-*`) are separate, already-global tokens with real defaults —
+see `theming-form-geometry-tokens.md`. Not duplicated here. One geometry token worth calling out:
+`--button-min-height` defaults to `var(--input-min-height)`, so a button lines up height-wise with
+a text input/select/number field placed next to it (e.g. an inline "email + submit" pattern — see
+the `InlineWithTextInput` story). `box-sizing: content-box` means it's a floor, not a fixed height.
+
+### Primary
+
+| Token | Falls back to | Controls |
+|---|---|---|
+| `--input-button-primary-surface` | `var(--theme-surface)` | Background (resting) |
+| `--input-button-primary-text` | `var(--theme-on-surface)` | Text colour (all states) |
+| `--input-button-primary-border` | the resolved surface above | Border colour (resting) — flat by default |
+| `--input-button-primary-ring` | `transparent` | Outline colour (resting) |
+| `--input-button-primary-surface-hover` | `color-mix(in oklab, surface 85%, black)` | Background on hover |
+| `--input-button-primary-border-hover` | the resolved hover surface above | Border colour on hover |
+| `--input-button-primary-ring-hover` | `transparent` | Outline colour on hover |
+| `--input-button-primary-border-focus` | `var(--theme-border-focus)` | Border colour on `:focus-visible` |
+| `--input-button-primary-ring-focus` | `var(--theme-ring)` | Outline colour on `:focus-visible` |
+
+### Secondary
+
+Same shape, falls back to the inverted-surface slots instead:
+
+| Token | Falls back to |
+|---|---|
+| `--input-button-secondary-surface` | `var(--theme-surface-inverted)` |
+| `--input-button-secondary-text` | `var(--theme-text-inverted)` |
+| `--input-button-secondary-border` | the resolved surface above (flat) |
+| `--input-button-secondary-ring` / `-ring-hover` | `transparent` |
+| `--input-button-secondary-surface-hover` | `color-mix(in oklab, surface 85%, black)` |
+| `--input-button-secondary-border-hover` | the resolved hover surface above |
+| `--input-button-secondary-border-focus` | `var(--theme-border-focus)` |
+| `--input-button-secondary-ring-focus` | `var(--theme-ring)` |
+
+### Tertiary
+
+Same shape again; resting surface is transparent by default in dark mode (see note below):
+
+| Token | Falls back to |
+|---|---|
+| `--input-button-tertiary-surface` | `light-dark(var(--slate-01), transparent)` |
+| `--input-button-tertiary-text` | `var(--theme-text)` |
+| `--input-button-tertiary-border` | the resolved surface above (flat) |
+| `--input-button-tertiary-ring` / `-ring-hover` | `transparent` |
+| `--input-button-tertiary-surface-hover` | `color-mix(in oklab, surface 85%, black)` |
+| `--input-button-tertiary-border-hover` | the resolved hover surface above |
+| `--input-button-tertiary-border-focus` | `var(--theme-border-focus)` |
+| `--input-button-tertiary-ring-focus` | `var(--theme-ring)` |
+
+> `--input-button-tertiary-surface`'s dark-mode default is literal `transparent`. `color-mix()`
+> still produces a correct darker hover from that — mixing `transparent` with `black` lowers the
+> alpha channel rather than the lightness, so hover reads as a faint dark tint over whatever's
+> behind the button, not a flat fill swap.
+
+`.is-pending` always dims the *primary* surface regardless of variant — a pre-existing quirk, not
+something this token set changes.
+
+`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.
+
+---
+
+## Global theming — app-level CSS file
+
+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:
+
+```css
+:where(html) {
+  --input-button-primary-surface: var(--rose-09);
+  --input-button-primary-text: var(--rose-00);
+  /* Hover/border/ring all derive from --input-button-primary-surface automatically via
+     color-mix() — no need to also set -hover/-border/-ring unless you want a different
+     relationship than "same colour, darker". */
+}
+```
+
+Only declare the tokens you want to change — everything else keeps inheriting the shared
+`--theme-*` slots (or, for hover, keeps darkening whatever surface you did set).
+
+---
+
+## Per-instance overrides
+
+```vue
+<InputButtonCore 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
+  variant="primary"
+  button-text="Book now"
+  style="--input-button-primary-surface-hover: var(--gold-04);"
+/>
+```

package/app/components/05.forms/input-button/InputButtonCore.vue

@@ -106,6 +106,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     justify-content: center;
     align-items: center;
     box-sizing: content-box;
+    min-height: var(--button-min-height);
     border-radius: var(--button-border-radius);
     font-family: var(--font-family);
     padding-inline: var(--button-padding-inline);
@@ -121,60 +122,105 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
     /*
     * Theming
+    * Every colour is a public --input-button-{variant}-{property} token, inline-fallback to
+    * the shared theme slot (see theming-component-token-pattern.md for why: overriding one
+    * variant here never touches the --theme-* slots other components read).
+    *
+    * Flat by default: border defaults to the variant's own surface colour (so the resting state
+    * shows no visible edge) and outline defaults to fully transparent — outline is reserved for
+    * the focus-visible ring, not used to reinforce the flat look. Hover darkens the surface via
+    * color-mix (always darker, regardless of which direction the underlying theme ramp runs in
+    * light vs dark mode — no more "hover looks lighter" surprises) and carries the border along
+    * with it, still flat; outline stays transparent through hover too.
+    * focus-visible is deliberately its own block, not grouped with :hover — it's the one state
+    * that gets a real, separately-themeable a11y indicator, and its outline-width/-offset (set
+    * below, in Shared States) give it a visible ring regardless of the border/outline being
+    * invisible everywhere else.
+    * --_surface is a private local (not a public token) — it exists purely so -hover/-border/-ring
+    * can color-mix() off the SAME resolved value a consumer's --input-button-{variant}-surface
+    * override produces, without every derived token repeating that fallback chain itself.
     **/
-    background-color: var(--theme-surface);
-    color: var(--theme-on-surface);
-    border: var(--button-border-width) solid var(--theme-border);
-    outline: var(--button-outline-width) solid var(--theme-ring);
+    &.primary {
+      --_surface: var(--input-button-primary-surface, var(--theme-surface));
+      --_surface-hover: var(--input-button-primary-surface-hover, color-mix(in oklab, var(--_surface) 85%, black));
 
-    &:hover,
-    &:focus-visible {
-      background-color: var(--theme-surface-hover);
-      /* --theme-on-surface, not --theme-text: --theme-surface-hover's light-mode branch is a
-         dark step (by design — this button stays a bold colour even in light mode), and
-         --theme-text's light-mode branch is dark too (it's meant for text on a light surface
-         elsewhere, e.g. AlertContentInner). Pairing them made hover text invisible in light
-         mode. --theme-on-surface is a fixed light value regardless of scheme, matching how
-         AlertContentInner's own dismiss-button hover and .secondary:hover below already do it. */
-      color: var(--theme-on-surface);
-      border-color: var(--theme-border-focus);
-      outline-color: var(--theme-ring);
+      background-color: var(--_surface);
+      color: var(--input-button-primary-text, var(--theme-on-surface));
+      border: var(--button-border-width) solid var(--input-button-primary-border, var(--_surface));
+      outline: var(--button-outline-width) solid var(--input-button-primary-ring, transparent);
+
+      &:hover {
+        background-color: var(--_surface-hover);
+        border-color: var(--input-button-primary-border-hover, var(--_surface-hover));
+        outline-color: var(--input-button-primary-ring-hover, transparent);
+      }
+
+      &:focus-visible {
+        border-color: var(--input-button-primary-border-focus, var(--theme-border-focus));
+        outline-color: var(--input-button-primary-ring-focus, var(--theme-ring));
+      }
     }
 
     &.is-pending {
-      background-color: color-mix(in oklab, var(--theme-surface) 50%, transparent);
+      /* Always the primary surface regardless of variant — pre-existing behaviour, not
+         something this migration changes. */
+      background-color: color-mix(
+        in oklab,
+        var(--input-button-primary-surface, var(--theme-surface)) 50%,
+        transparent
+      );
     }
 
     &.secondary {
-      background-color: var(--theme-surface-inverted);
-      border: var(--button-border-width) solid var(--theme-border);
-      color: var(--theme-text-inverted);
-      outline: var(--button-outline-width) solid var(--theme-ring);
+      --_surface: var(--input-button-secondary-surface, var(--theme-surface-inverted));
+      --_surface-hover: var(
+        --input-button-secondary-surface-hover,
+        color-mix(in oklab, var(--_surface) 85%, black)
+      );
+
+      background-color: var(--_surface);
+      color: var(--input-button-secondary-text, var(--theme-text-inverted));
+      border: var(--button-border-width) solid var(--input-button-secondary-border, var(--_surface));
+      outline: var(--button-outline-width) solid var(--input-button-secondary-ring, transparent);
+
+      &:hover {
+        background-color: var(--_surface-hover);
+        border-color: var(--input-button-secondary-border-hover, var(--_surface-hover));
+        outline-color: var(--input-button-secondary-ring-hover, transparent);
+      }
 
-      &:hover,
       &:focus-visible {
-        background-color: var(--theme-surface);
-        color: var(--theme-on-surface);
-        border-color: var(--theme-border-focus);
-        outline-color: var(--theme-surface);
+        border-color: var(--input-button-secondary-border-focus, var(--theme-border-focus));
+        outline-color: var(--input-button-secondary-ring-focus, var(--theme-ring));
       }
     }
 
     &.tertiary {
-      background-color: light-dark(var(--slate-01), transparent);
-      border: var(--button-border-width) solid var(--theme-border);
-      color: var(--theme-text);
+      /* --_surface can resolve to literal transparent (dark mode default) — color-mix() still
+         darkens correctly here: mixing transparent with black lowers the alpha channel rather
+         than the lightness, so it reads as a faint dark tint over whatever's behind the button
+         instead of a flat fill. Same formula, no special-casing needed. */
+      --_surface: var(--input-button-tertiary-surface, light-dark(var(--slate-01), transparent));
+      --_surface-hover: var(
+        --input-button-tertiary-surface-hover,
+        color-mix(in oklab, var(--_surface) 85%, black)
+      );
+
+      background-color: var(--_surface);
+      color: var(--input-button-tertiary-text, var(--theme-text));
+      border: var(--button-border-width) solid var(--input-button-tertiary-border, var(--_surface));
+      outline: var(--button-outline-width) solid var(--input-button-tertiary-ring, transparent);
       text-decoration: underline;
-      outline: var(--button-outline-width) solid var(--theme-border-focus);
 
-      &:hover,
+      &:hover {
+        background-color: var(--_surface-hover);
+        border-color: var(--input-button-tertiary-border-hover, var(--_surface-hover));
+        outline-color: var(--input-button-tertiary-ring-hover, transparent);
+      }
+
       &:focus-visible {
-        background-color: var(--theme-surface-hover);
-        /* Same fix as the base :hover above — background goes dark in light mode, so text
-           needs to switch off --theme-text (dark in light mode) to stay visible. */
-        color: var(--theme-on-surface);
-        border-color: var(--theme-border-focus);
-        outline-color: var(--theme-border-focus);
+        border-color: var(--input-button-tertiary-border-focus, var(--theme-border-focus));
+        outline-color: var(--input-button-tertiary-ring-focus, var(--theme-ring));
       }
     }
 

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { ref } from "vue";
 import StorybookComponent from "../InputButtonCore.vue";
+import InputTextCore from "../../input-text/InputTextCore.vue";
 
 interface InputButtonCoreStoryArgs {
   type: "submit" | "button" | "reset";
@@ -240,7 +241,17 @@ const Template: StoryFn<InputButtonCoreStoryArgs> = (args) => ({
   },
   template: `
     <div style="display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;margin: 36px;">
+      <!-- :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
+           doesn't reliably re-evaluate a <template v-if="..."> conditionally attached to a named
+           slot when only the v-if's condition changes, on this component/Storybook combination.
+           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. -->
       <StorybookComponent
+        :key="[args.useLeftSlot, args.useLeftIcon, args.useRightSlot, args.useRightIcon, args.useIconOnlySlot, args.useIconOnly].join(',')"
         v-bind="args"
         @click="handleClick"
       >
@@ -302,3 +313,27 @@ NuxtIconOnlyComponent.args = {
   useIconOnly: true,
   iconOnlyName: "mdi:chevron-right-circle-outline",
 };
+
+// Composition check, not a props demo: confirms InputButtonCore'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.
+const InlineTemplate: StoryFn = () => ({
+  components: { StorybookComponent, InputTextCore },
+  template: `
+    <div style="margin: 36px; max-width: 480px;">
+      <div style="display: flex; align-items: flex-start; gap: 0.8rem;">
+        <InputTextCore
+          id="inline-email"
+          name="email"
+          type="email"
+          placeholder="you@example.com"
+          style="flex: 1;"
+        />
+        <StorybookComponent type="submit" variant="primary" button-text="Subscribe" />
+      </div>
+    </div>
+  `,
+});
+
+export const InlineWithTextInput = InlineTemplate.bind({});