srcdev-nuxt-components 9.6.3 → 9.6.5

package/.claude/skills/storybook-add-story.md

@@ -242,6 +242,12 @@ export default meta;
 type Story = StoryObj<typeof ComponentName>; // ← still strict for individual stories
 ```
 
+When the story assigns a model arg itself (a button doing `args.modelValue = index + 1`, a wizard's
+Back/Continue), a type built from `InstanceType<typeof C>["$props"]` fails `vue-tsc` with "Cannot
+assign to 'modelValue' because it is a read-only property". Re-declare it writable:
+`Omit<InstanceType<typeof C>["$props"], "modelValue"> & { modelValue: number; ... }`
+(`ProgressTracker.stories.ts`).
+
 Strip extra args before `v-bind` using a `useStorySetup` helper in `setup()`:
 
 ```ts
@@ -307,6 +313,14 @@ the earlier nightly `@nuxtjs/storybook` didn't render Docs pages at all, so a lo
   },
   ```
 
+- A fixed or teleported overlay (banner, toast, dialog) can't be narrowed by `CanvasSwitcher`: it
+  positions against the viewport and may not even live inside the decorator. Its `StressTest`
+  (compliance checklist item 6b) renders **one** instance, switches between hostile data sets with
+  a story-only select (`stressCase`, category `"Story only"`, description starting
+  `**Story control, not a prop.**`), tells the reader to use Storybook's viewport toolbar for narrow
+  screens, and sets `docs.story: { inline: false }`. `CookieConsentBanner` and `DisplayToast`
+  follow this. A teleported component doesn't inherit a wrapper's `dir`, so wrap RTL slot copy
+  in `<span dir="rtl">`.
 - Opt a file out with `tags: ["!autodocs"]` only when it isn't a component reference (tooling, or
   a file with its own attached `.mdx` page, like `ColourRamps.stories.ts` with `SetupGuide.mdx`).
 

package/.claude/skills/testing-add-unit-test.md

@@ -201,6 +201,25 @@ await nextTick();
 vi.runAllTimers();
 ```
 
+### Native clicks are silently dropped under frozen time
+
+Vue's event invoker ignores an event whose timestamp is at or before the moment its listener was
+attached (a guard against an event that triggered the patch also firing the new listener). With
+the clock frozen, a native `button.click()` or `dispatchEvent()` straight after mount carries the
+same timestamp, so the handler never runs and the test fails with "called 0 times". Whether it
+bites depends on render timing: `CookieConsentBanner`'s click tests passed with raw `<button>`s
+and failed once they became `InputButton`s (2026-10-15). Either use test-utils'
+`wrapper.trigger("click")` (which works, including on teleported content via `findComponent`), or
+advance the clock first:
+
+```ts
+// Vue ignores events stamped at or before its listener's attach time; fake timers freeze both.
+function click(button: HTMLElement) {
+  vi.advanceTimersByTime(1);
+  button.click();
+}
+```
+
 ## `mountSuspended` flushes component async setup — initial state may be past the first `await`
 
 `mountSuspended` calls `flushPromises()` internally, draining all pending microtasks including `await nextTick()` calls inside the component's async functions. If a component's async lifecycle starts with `await nextTick()` (e.g. to let a CSS `v-bind` update before beginning a transition), **the component will have already executed past it by the time `mountSuspended` returns**.

package/.claude/skills/theming-component-token-pattern.md

@@ -184,7 +184,7 @@ raw value) chains through it:
 
 ```css
 /* InputCopy's copy button defaults to InputButton's primary look */
---_button-bg: var(--input-copy-button-bg, var(--input-button-primary-surface, var(--theme-surface)));
+background-color: var(--input-copy-button-bg, var(--input-button-primary-surface, var(--theme-surface)));
 ```
 
 Three tiers deep here: instance/global override → "look like the primary button" → the theme

package/.vscode/srcdev-component-cookie-consent-banner.code-snippets

@@ -10,11 +10,13 @@
     "description": "CookieConsentBanner with translated copy and accessible name",
     "scope": "vue,html",
     "body": [
-      "<CookieConsentBanner :aria-label=\"${1:t('global.cookieConsent.ariaLabel')}\">",
-      "  <template #title>{{ ${2:t('global.cookieConsent.title')} }}</template>",
-      "  <template #message>{{ ${3:t('global.cookieConsent.message')} }}</template>",
-      "  <template #acceptLabel>{{ ${4:t('global.cookieConsent.accept')} }}</template>",
-      "  <template #rejectLabel>{{ ${5:t('global.cookieConsent.reject')} }}</template>",
+      "<CookieConsentBanner",
+      "  :aria-label=\"${1:t('global.cookieConsent.ariaLabel')}\"",
+      "  :accept-label=\"${2:t('global.cookieConsent.accept')}\"",
+      "  :reject-label=\"${3:t('global.cookieConsent.reject')}\"",
+      ">",
+      "  <template #title>{{ ${4:t('global.cookieConsent.title')} }}</template>",
+      "  <template #message>{{ ${5:t('global.cookieConsent.message')} }}</template>",
       "</CookieConsentBanner>"
     ]
   },

package/.vscode/srcdev-component-input-copy.code-snippets

@@ -1,28 +1,27 @@
 {
   "SRCDEV InputCopy Basic": {
-    "description": "Basic InputCopy component with value and label",
+    "description": "InputCopy: readonly input with a copy-to-clipboard button",
     "scope": "vue,html",
     "body": [
       "<InputCopy",
-      "  value=\"$1sk_live_abc123xyz\"",
-      "  label=\"$2API key\"",
-      "  description=\"$3Copy this key to authenticate with our API.\"",
-      "  @copy=\"$4handleCopy\"",
+      "  :value=\"${1:licenseKey}\"",
+      "  label=\"${2:License key}\"",
+      "  description=\"${3:Copy this key to activate the component in your application.}\"",
+      "  @copied=\"${4:handleCopied}\"",
       "/>"
     ]
   },
-  "SRCDEV InputCopy License Key": {
-    "description": "InputCopy for displaying a license key on success page",
+  "SRCDEV InputCopy Translated": {
+    "description": "InputCopy with translated copy and accessible names",
     "scope": "vue,html",
     "body": [
       "<InputCopy",
-      "  :value=\"licenseKey\"",
-      "  label=\"License key\"",
-      "  description=\"Your license key is ready to use. Copy it to embed in your application.\"",
-      "  buttonText=\"Copy\"",
-      "  copiedText=\"Copied to clipboard!\"",
-      "  @copy=\"$1handleCopy\"",
-      "  @copied=\"$2showCopiedFeedback\"",
+      "  :value=\"${1:value}\"",
+      "  :label=\"${2:t('account.key.label')}\"",
+      "  :description=\"${3:t('account.key.description')}\"",
+      "  :button-text=\"${4:t('common.copy')}\"",
+      "  :copied-text=\"${5:t('common.copied')}\"",
+      "  :button-aria-label=\"${6:t('account.key.copyAriaLabel')}\"",
       "/>"
     ]
   },
@@ -31,25 +30,10 @@
     "scope": "vue,html",
     "body": [
       "<InputCopy",
-      "  :value=\"$1value\"",
-      "  label=\"$2Label\"",
-      "  :is-disabled=\"true\"",
-      "  :button-text=\"$3Unavailable\"",
-      "/>"
-    ]
-  },
-  "SRCDEV InputCopy in Page": {
-    "description": "InputCopy with custom aria labels",
-    "scope": "vue,html",
-    "body": [
-      "<InputCopy",
-      "  :value=\"$1value\"",
-      "  label=\"$2License key\"",
-      "  aria-label=\"$3Your unique GuideMyHair license identifier\"",
-      "  description=\"$4Keep this key safe. You'll need it to embed the widget.\"",
-      "  button-text=\"$5Copy key\"",
-      "  copied-text=\"$6Key copied!\"",
-      "  @copy=\"$7logCopy\"",
+      "  :value=\"${1:value}\"",
+      "  label=\"${2:Label}\"",
+      "  :is-disabled=\"${3:true}\"",
+      "  button-text=\"${4:Unavailable}\"",
       "/>"
     ]
   },
@@ -57,15 +41,13 @@
     "description": "CSS override scaffold for InputCopy tokens",
     "scope": "css",
     "body": [
-      ".$1success-page {",
-      "  .input-copy {",
-      "    --input-copy-input-bg: $2;",
-      "    --input-copy-input-border: $3;",
-      "    --input-copy-input-border-radius: $4;",
-      "    --input-copy-button-bg: $5;",
-      "    --input-copy-button-bg-hover: $6;",
-      "    --input-copy-button-text-color: $7;",
-      "  }",
+      ".${1:account-page} .input-copy {",
+      "  --input-copy-input-bg: ${2:var(--theme-input-surface)};",
+      "  --input-copy-input-border: ${3:0.1rem solid var(--theme-border)};",
+      "  --input-copy-button-bg: ${4:var(--theme-surface)};",
+      "  --input-copy-button-bg-hover: ${5:var(--theme-surface-hover)};",
+      "  --input-copy-button-text-color: ${6:var(--theme-on-surface)};",
+      "  --input-copy-description-line-clamp: ${7:none};",
       "}"
     ]
   }

package/.vscode/srcdev-component-progress-tracker.code-snippets

@@ -0,0 +1,45 @@
+{
+  "SRCDEV ProgressTracker": {
+    "description": "ProgressTracker showing progress through steps (v-model is the 0-based current step)",
+    "scope": "vue,html",
+    "body": [
+      "<ProgressTracker v-model=\"${1:currentStep}\" :steps=\"${2:steps}\" />"
+    ]
+  },
+  "SRCDEV ProgressTracker Wizard": {
+    "description": "ProgressTracker as a wizard: each step's form lives in its #step-{n} slot and drives the model",
+    "scope": "vue,html",
+    "body": [
+      "<ProgressTracker v-model=\"${1:currentStep}\" :steps=\"${2:steps}\">",
+      "  <template #step-0=\"{ headingId }\">",
+      "    <form :aria-labelledby=\"headingId\" @submit.prevent=\"$1++\">",
+      "      $3",
+      "      <InputButton type=\"submit\" button-text=\"Continue\" />",
+      "    </form>",
+      "  </template>",
+      "  <template #step-1=\"{ headingId }\">",
+      "    <form :aria-labelledby=\"headingId\" @submit.prevent=\"$1 = $2.length\">",
+      "      $4",
+      "      <InputButton button-text=\"Back\" variant=\"secondary\" @click=\"$1--\" />",
+      "      <InputButton type=\"submit\" button-text=\"Submit\" />",
+      "    </form>",
+      "  </template>",
+      "</ProgressTracker>"
+    ]
+  },
+  "SRCDEV ProgressTracker CSS Override": {
+    "description": "CSS override scaffold for ProgressTracker tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  --progress-tracker-accent: $2;",
+      "  --progress-tracker-track: $3;",
+      "  --progress-tracker-card-surface: $4;",
+      "  --progress-tracker-card-shadow: $5;",
+      "  --progress-tracker-label-font-family: $6;",
+      "  --progress-tracker-title-line-clamp: $7;",
+      "  --progress-tracker-body-line-clamp: $8;",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-stepper-list.code-snippets

@@ -31,8 +31,9 @@
       ".$1my-page {",
       "  --stepper-list-gap: $2;",
       "  --stepper-list-connector-color: $3;",
-      "  --stepper-list-counter-disc-background: $4;",
-      "  --stepper-list-counter-disc-text: $5;",
+      "  --stepper-list-connector-gap: $4;",
+      "  --stepper-list-counter-disc-background: $5;",
+      "  --stepper-list-counter-disc-text: $6;",
       "}"
     ]
   }

package/.vscode/srcdev-component-tabbed-content.code-snippets

@@ -58,6 +58,7 @@
       "    --tabs-underline-indicator-height: ;",
       "    --tabs-hover-underline-indicator-colour: ;",
       "    --tabs-hover-underline-indicator-height: ;",
+      "    --tabs-hover-indicator-stretch: ;",
       "    --tabs-list-item-opacity: ;",
       "    --tabs-list-item-colour: ;",
       "    --tabs-list-item-colour-selected: ;",

package/app/components/01.atoms/tabbed-content/CONSUMER-STYLING.md

@@ -58,6 +58,7 @@ box.
 | `--tabs-underline-indicator-height` | `0.4rem` | Thickness of the underline (`axis="x"`), also its width on `axis="y"` |
 | `--tabs-hover-underline-indicator-colour` | `--tabs-underline-indicator-colour` | Colour of the thin underline/sideline that follows the hovered tab (`trackHover` and `trackIndicator`) |
 | `--tabs-hover-underline-indicator-height` | `0.1rem` | Its thickness; `0` hides it. Sits under the active underline where they overlap |
+| `--tabs-hover-indicator-stretch` | `1` | Stretch of the hover highlight and hover underline as they move: `1` stretches (leading edge first, trailing edge catches up), `0` slides both edges together. Values in between shorten the stretch |
 
 ### More menu (`overflowMode="menu"`, `axis="x"`)
 
@@ -98,7 +99,10 @@ measured layout, per indicator (`active` / `hovered`): `--_{kind}-start` / `--_{
 insets from the bar's start and end along the axis), `--_{kind}-duration`,
 `--_{kind}-start-delay` / `--_{kind}-end-delay`; each indicator reads them through its own
 `--_start` / `--_end` / `--_duration` / `--_start-delay` / `--_end-delay`. Not public API; use the
-`transitionDuration` prop for indicator speed (one edge moves for that long, then the other).
+`transitionDuration` prop for indicator speed (one edge moves for that long, then the other), and
+`--tabs-hover-indicator-stretch` to turn the hover stretch off. The More menu also uses
+`--_anchor-name` (a per-instance anchor name) and the `--_anchor-*` position values
+`useAnchoredPopover` writes for browsers without CSS anchor positioning.
 
 > **Changed 2026-10-08**: indicators were a bar-wide box moved with `translate` and sized with
 > `scale` (`--_x-*`, `--_width-*`, `--_y-*`, a shared `--_transition-duration`), with a timer

package/app/components/01.atoms/tabbed-content/TabbedContent.vue

@@ -354,8 +354,8 @@ watch(
         --_start: var(--_hovered-start, 0px);
         --_end: var(--_hovered-end, 100%);
         --_duration: var(--_hovered-duration, 0ms);
-        --_start-delay: var(--_hovered-start-delay, 0ms);
-        --_end-delay: var(--_hovered-end-delay, 0ms);
+        --_start-delay: calc(var(--_hovered-start-delay, 0ms) * var(--tabs-hover-indicator-stretch, 1));
+        --_end-delay: calc(var(--_hovered-end-delay, 0ms) * var(--tabs-hover-indicator-stretch, 1));
       }
 
       .tabbed-content-indicator-active,

package/app/components/01.atoms/tabbed-content/stories/TabbedContent.stories.ts

@@ -219,6 +219,32 @@ export const IndicatorColours: Story = {
   }),
 };
 
+export const HoverWithoutStretch: Story = {
+  name: "Hover Without Stretch",
+  args: { itemCount: 5 },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "--tabs-hover-indicator-stretch: 0 makes the hover highlight slide between tabs instead of stretching across and catching up. Clicking a tab still stretches the active indicator.",
+      },
+    },
+  },
+  render: (args) => ({
+    components: { TabbedContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="--tabs-hover-indicator-stretch: 0">
+        <TabbedContent v-bind="args">
+          ${tabSlots}
+        </TabbedContent>
+      </div>
+    `,
+  }),
+};
+
 // ─── Stress test ──────────────────────────────────────────────────────────────
 
 const stressTabs = [

package/app/components/02.molecules/contact-section/tests/__snapshots__/ContactSection.spec.ts.snap

@@ -4,22 +4,22 @@ exports[`ContactSection > renders correct HTML structure with default props 1`]
 "<div class="contact-section">
   <div class="contact-section-inner">
     <div class="contact-section-info">
-      <ul class="stepper-list">
-        <li class="has-indicator indicator-top indicator-disc">
+      <ul role="list" class="stepper-list">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 1</p>
           </div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 2</p>
           </div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 3</p>
           </div>
         </li>
@@ -34,22 +34,22 @@ exports[`ContactSection > renders correct HTML structure with form slot 1`] = `
 "<div class="contact-section">
   <div class="contact-section-inner">
     <div class="contact-section-info">
-      <ul class="stepper-list">
-        <li class="has-indicator indicator-top indicator-disc">
+      <ul role="list" class="stepper-list">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 1</p>
           </div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 2</p>
           </div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 3</p>
           </div>
         </li>
@@ -66,22 +66,22 @@ exports[`ContactSection > renders correct HTML structure with styleClassPassthro
 "<div class="contact-section custom-class another-class">
   <div class="contact-section-inner">
     <div class="contact-section-info">
-      <ul class="stepper-list">
-        <li class="has-indicator indicator-top indicator-disc">
+      <ul role="list" class="stepper-list">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 1</p>
           </div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 2</p>
           </div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 3</p>
           </div>
         </li>
@@ -96,18 +96,18 @@ exports[`ContactSection > renders correctly with all props and slots combined 1`
 "<section class="contact-section combined-class">
   <div class="contact-section-inner">
     <div class="contact-section-info">
-      <ul class="stepper-list">
-        <li class="has-indicator indicator-top indicator-disc">
+      <ul role="list" class="stepper-list">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"><span class="icon">✓</span></div>
-          <div><span>Step one</span></div>
+          <div class="stepper-list-content"><span>Step one</span></div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div><span>Step two</span></div>
+          <div class="stepper-list-content"><span>Step two</span></div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div><span>Step three</span></div>
+          <div class="stepper-list-content"><span>Step three</span></div>
         </li>
       </ul>
     </div>

package/app/components/02.molecules/cookie-consent-banner/CONSUMER-STYLING.md

@@ -6,6 +6,11 @@ colour, border, radius, padding, accent stripe, icon, title and message sizes, a
 `app/components/02.molecules/alert-content/CONSUMER-STYLING.md`. This guide covers what the banner
 adds: position, motion and the two buttons.
 
+> **Changed 2026-10-15**: the closed state class `.closed` is now `.cookie-consent-banner-closed`,
+> and the buttons are `InputButton`s (`variant="inline"`, so the banner's tokens still style them):
+> each button is `.cookie-consent-banner-accept.input-button` / `.cookie-consent-banner-reject.input-button`
+> with the label in an inner `.button-text`. The button tokens below are unchanged.
+>
 > **Changed 2026-09-27**: rebuilt on `AlertContent`. The banner's own panel tokens
 > (`--cookie-consent-banner-padding`, `-gap`, `-border-radius`, `-border`, `-accent-border-width`,
 > `-background`, `-text-colour`, `-actions-gap`) are gone; use the matching `--alert-content-*`
@@ -41,7 +46,10 @@ adds: position, motion and the two buttons.
 | `--cookie-consent-banner-accept-text-colour` | `var(--theme-on-surface)` | Accept button text |
 
 The gap between the buttons and their alignment (right by default) are `AlertContent`'s
-`--alert-content-actions-gap` and `--alert-content-actions-justify`.
+`--alert-content-actions-gap` and `--alert-content-actions-justify`. Long labels wrap inside the
+buttons (`InputButton`'s `.button-text`), and the buttons wrap onto their own lines when the row is full.
+The label keeps the banner's font size and case: `InputButton`'s `--button-font-size` and
+`--button-text-transform` don't apply here.
 
 Private tokens (not public API): `--_gutter`, `--_transition-duration`, `--_accent` on the root,
 each resolving a public token once for reuse.
@@ -50,11 +58,12 @@ each resolving a public token once for reuse.
 
 - `data-theme` on the root and on the inner `.alert-content`, from the `theme` prop or `app.config`
   (default `info`). It drives every `--theme-*` default, for the panel and the buttons.
-- `.closed` on the root once consent is granted or denied. The banner fades out and becomes
+- `.cookie-consent-banner-closed` on the root once consent is granted or denied. The banner fades out and becomes
   `visibility: hidden`, so its buttons leave the tab order and the accessibility tree.
 - Classes: `.cookie-consent-banner` > `.cookie-consent-banner-inner` (the `role="region"`) >
   `.alert-content` (see its guide for the inner structure); the buttons are
-  `.cookie-consent-banner-reject` and `.cookie-consent-banner-accept` inside `.alert-content-actions`.
+  `InputButton`s with `.cookie-consent-banner-reject` and `.cookie-consent-banner-accept` (plus
+  `.input-button.inline`) inside `.alert-content-actions`.
 - `data-test-id`: `cookie-consent-banner`, `cookie-consent-banner-reject`, `cookie-consent-banner-accept`,
   plus `AlertContent`'s `alert-icon`, `alert-title`, `alert-content`, `alert-actions`.
 
@@ -91,5 +100,5 @@ The pre-2026-09-27 look (white panel, dark text, no tint), scoped to the banner:
 ## Class passthrough
 
 `style-class-passthrough` adds classes to the teleported root `.cookie-consent-banner`, next to
-`data-theme` and `.closed`. It's reachable in normal use and is the most reliable place to set
+`data-theme` and `.cookie-consent-banner-closed`. It's reachable in normal use and is the most reliable place to set
 tokens for this component, since ancestor wrappers don't contain it.

package/app/components/02.molecules/cookie-consent-banner/CookieConsentBanner.vue

@@ -2,7 +2,7 @@
   <Teleport to="body">
     <div
       class="cookie-consent-banner"
-      :class="[{ closed: isClosed }, elementClasses]"
+      :class="[{ 'cookie-consent-banner-closed': isClosed }, elementClasses]"
       :data-theme="resolved.theme"
       data-test-id="cookie-consent-banner"
     >
@@ -15,22 +15,22 @@
             <slot name="message">This site uses cookies to understand how it's used. You can accept or reject them.</slot>
           </template>
           <template #actions>
-            <button
+            <InputButton
               type="button"
+              variant="inline"
               class="cookie-consent-banner-reject"
               data-test-id="cookie-consent-banner-reject"
+              :button-text="rejectLabel"
               @click="rejectAll()"
-            >
-              <slot name="rejectLabel">Reject</slot>
-            </button>
-            <button
+            />
+            <InputButton
               type="button"
+              variant="inline"
               class="cookie-consent-banner-accept"
               data-test-id="cookie-consent-banner-accept"
+              :button-text="acceptLabel"
               @click="acceptAll()"
-            >
-              <slot name="acceptLabel">Accept</slot>
-            </button>
+            />
           </template>
         </AlertContent>
       </div>
@@ -44,6 +44,8 @@ import type { CookieConsentBannerProps } from "../../../types/components";
 const props = withDefaults(defineProps<CookieConsentBannerProps>(), {
   theme: undefined,
   ariaLabel: "Cookie consent",
+  acceptLabel: "Accept",
+  rejectLabel: "Reject",
   icon: "material-symbols:cookie-outline",
   showIcon: true,
   styleClassPassthrough: () => [],
@@ -91,7 +93,7 @@ const isClosed = computed(() => status.value !== "unset");
       opacity var(--_transition-duration) ease-in-out,
       visibility var(--_transition-duration);
 
-    &.closed {
+    &.cookie-consent-banner-closed {
       grid-template-rows: 0fr;
       opacity: 0;
       visibility: hidden;
@@ -107,8 +109,10 @@ const isClosed = computed(() => status.value !== "unset");
       overflow: hidden;
     }
 
-    .cookie-consent-banner-reject,
-    .cookie-consent-banner-accept {
+    .cookie-consent-banner-reject.input-button,
+    .cookie-consent-banner-accept.input-button {
+      box-sizing: border-box;
+      min-height: auto;
       padding: var(--cookie-consent-banner-button-padding, 0.8rem 1.6rem);
       border-radius: var(--cookie-consent-banner-button-border-radius, 0.4rem);
       border: 0.1rem solid transparent;
@@ -122,9 +126,14 @@ const isClosed = computed(() => status.value !== "unset");
         outline: 0.2rem solid var(--cookie-consent-banner-focus-ring, var(--theme-border-focus));
         outline-offset: 0.2rem;
       }
+
+      .button-text {
+        font-size: inherit;
+        text-transform: none;
+      }
     }
 
-    .cookie-consent-banner-reject {
+    .cookie-consent-banner-reject.input-button {
       background-color: transparent;
       color: inherit;
       border-color: var(--cookie-consent-banner-reject-border-colour, var(--theme-border));
@@ -135,7 +144,7 @@ const isClosed = computed(() => status.value !== "unset");
       }
     }
 
-    .cookie-consent-banner-accept {
+    .cookie-consent-banner-accept.input-button {
       background-color: var(--cookie-consent-banner-accept-background, var(--_accent));
       color: var(--cookie-consent-banner-accept-text-colour, var(--theme-on-surface));