srcdev-nuxt-components 9.6.3 → 9.6.4

package/.claude/rules/consumer/vue-no-self-closing.md

@@ -6,6 +6,7 @@ paths:
 # No self-closing non-void elements
 
 Always write explicit closing tags on non-void elements and slots: `<slot name="x"></slot>`,
-`<span></span>`. Never `<slot name="x" />`.
+`<span></span>`. Never `<slot name="x" />`. Components are the opposite: self-close them when
+they have no content (`<InputButton :button-text="label" />`, not `<InputButton ...></InputButton>`).
 
-Why: ESLint `vue/html-self-closing` rejects it.
+Why: ESLint `vue/html-self-closing` is set to `normal: "never"`, `component: "always"`.

package/.claude/skills/component-compliance-checklist.md

@@ -104,7 +104,8 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
    Sample copy in stories, and examples in the skill doc, use placeholders (a name like "Alex
    Morgan", a town like "Northtown"), never a real client's name, town, business or site: the
    stories and docs ship in the public package. **Existing component:** check for, and replace, any
-   copy lifted from a consumer app (`ProfileSection` had both).
+   copy lifted from a consumer app (`ProfileSection` had both), in the stories, the snippet and the
+   skill doc (`InputCopy` had one in a story and one in a snippet).
 6a. **Storybook Controls-panel reactivity** — check every story `Template`/`render` function in
     the component's `stories/*.stories.ts` files for this bug: `@storybook/vue3` mounts the story
     component **once** and, on every Controls-panel change, mutates the same reactive `args`
@@ -167,7 +168,9 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
 7. **Skill doc** — create or update `.claude/skills/components/<component-name>.md`, following the
    pattern of an existing one. A labelled `<Name>Field` wrapper (or any other wrapper) is documented
    in its control's doc under a "Variants" section, not in a doc of its own
-   (`feedback_variants_deprecated_as_own_skill_docs`). **Existing component:** if you find a
+   (`feedback_variants_deprecated_as_own_skill_docs`). **Existing component:** check every
+   behavioural claim (event order and timing, what's disabled when, breakpoints) against the code,
+   not just the props table: `InputCopy`'s doc said `copy` fired before the clipboard write. **Existing component:** if you find a
    `variants/` subfolder, flatten it into the parent folder (`git mv` the `.vue` files plus their
    stories/tests up one level, fix relative imports); `pathPrefix: false` keeps the auto-import
    names unchanged. All existing `variants/` folders were flattened 2026-09-25.
@@ -250,6 +253,9 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
       the edits in private memory. Note that an inline-size container can't size itself from its
       content: say so in `CONSUMER-STYLING.md` (`ProfileSection`).
     - Grid tracks that hold text are `minmax(0, …)` so an unbroken string can't widen the grid.
+    - Action buttons are `InputButton` (`variant="inline"` when the wrapper styles them), not a raw
+      `<button>` (`component-inline-button.md`, `component-inline-action-button.md`). The ledger
+      doesn't check this, which is how `InputCopy` scored 5/5 with one (fixed 2026-10-15).
     - No `:deep()` in the component's `<style>`: these blocks are never scoped, so Vue leaves it
       as-is and the browser drops the whole rule (pitfall #27). Use a descendant selector, or set
       the child component's public tokens on an ancestor.

package/.claude/skills/component-inline-action-button.md

@@ -74,6 +74,37 @@ Target `.my-action-button.input-button` inside the wrapper to override InputButt
 }
 ```
 
-## Real example
+## What `variant="inline"` still brings
 
-`InputCopyCore` — `app/components/forms/input-copy/InputCopyCore.vue`
+`inline` adds no colours, but the base `.input-button` rule and its inner `.button-text` still
+apply. Override what the wrapper doesn't want, on the `.my-action-button.input-button` selector:
+
+- `box-sizing: content-box`: set `border-box` if the button has a `max-inline-size: 100%` or sits
+  in a wrapping flex row, or padding pushes it past its container.
+- `min-height: var(--button-min-height)`: set `auto` to size from your own padding.
+- `grid-auto-flow: column` layout, `overflow: hidden` and a `transition: all` (replace it with
+  your own `transition` list).
+- `.button-text` takes `font-size: var(--button-font-size)` and
+  `text-transform: var(--button-text-transform)`: set `font-size: inherit; text-transform: none`
+  on `& .button-text` to keep the wrapper's type. It already wraps unbroken text
+  (`overflow-wrap: anywhere`, with `white-space` from `--input-button-text-white-space`).
+- The label is the `buttonText` string prop; there's no label slot. A wrapper that had label
+  slots on a raw `<button>` turns them into string props when it switches (a breaking change).
+
+`InputButton` always renders `data-theme` (default `"default"`). That value has no hue rule of
+its own, so the button keeps the parent's `data-theme` palette and `--theme-*` reads inside it
+still follow the wrapper's theme. Don't pass a theme just to keep it in step.
+
+## Temporary "done" states (copied, saved)
+
+When the button briefly blocks repeat clicks after it succeeds, use `InputButton`'s `readonly` prop
+(`aria-disabled` plus a click guard), not `disabled`: disabling the focused button drops keyboard
+focus. Keep `disabled` for a genuinely unavailable control. If the button has an `aria-label`, a
+changed visible label ("Copied!") isn't announced, because the aria-label wins; add a visually hidden
+`role="status"` span carrying the message. `InputCopy` does both (2026-10-15).
+
+## Real examples
+
+- `InputPasswordWithLabel`: `app/components/05.forms/input-text/InputPasswordWithLabel.vue` (show/hide toggle attached to the input)
+- `CookieConsentBanner`: `app/components/02.molecules/cookie-consent-banner/CookieConsentBanner.vue`
+  (standalone Accept/Reject actions, not attached to an input)

package/.claude/skills/components/cookie-consent-banner.md

@@ -16,6 +16,8 @@ Fixed, non-modal banner built on `AlertContent` (see `alert-content.md`), shown
 |---|---|---|---|
 | `theme` | `SemanticTheme` | `"info"` | Passed to `AlertContent`: panel colours, accent stripe and the accept button, via `--theme-*`. |
 | `ariaLabel` | `string` | `"Cookie consent"` | Accessible name for the banner's `role="region"`. Pass translated copy in non-English apps. |
+| `acceptLabel` | `string` | `"Accept"` | Accept button text (an `InputButton`'s `buttonText`). |
+| `rejectLabel` | `string` | `"Reject"` | Reject button text. |
 | `icon` | `string` | `"material-symbols:cookie-outline"` | Iconify name for the alert icon (`AlertContent`'s `customIcon`). |
 | `showIcon` | `boolean` | `true` | Render the icon column. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes on the root element. |
@@ -41,10 +43,8 @@ Resolution chain: **prop → app.config → hardcoded fallback**.
 |---|---|---|
 | `title` | Title line above the message | "Cookies" |
 | `message` | The consent message body | "This site uses cookies to understand how it's used. You can accept or reject them." |
-| `acceptLabel` | Accept button text | "Accept" |
-| `rejectLabel` | Reject button text | "Reject" |
 
-Per [[feedback_i18n_required]] in consuming apps, always fill these slots with `t()`-sourced copy rather than relying on the English defaults.
+Per [[feedback_i18n_required]] in consuming apps, always fill these slots and the label props with `t()`-sourced copy rather than relying on the English defaults.
 
 ## Basic usage
 
@@ -61,11 +61,13 @@ useAnalytics();
   <div class="page-layout">
     <slot />
     <DisplayToastProvider position="top" alignment="right" :max-visible="3" />
-    <CookieConsentBanner :aria-label="t('global.cookieConsent.ariaLabel')">
+    <CookieConsentBanner
+      :aria-label="t('global.cookieConsent.ariaLabel')"
+      :accept-label="t('global.cookieConsent.accept')"
+      :reject-label="t('global.cookieConsent.reject')"
+    >
       <template #title>{{ t("global.cookieConsent.title") }}</template>
       <template #message>{{ t("global.cookieConsent.message") }}</template>
-      <template #acceptLabel>{{ t("global.cookieConsent.accept") }}</template>
-      <template #rejectLabel>{{ t("global.cookieConsent.reject") }}</template>
     </CookieConsentBanner>
   </div>
 </template>
@@ -85,3 +87,4 @@ The banner is **teleported to `<body>`**, so set tokens on `:root`/`html`/`body`
 - To let a visitor change their mind later (e.g. from a cookie-policy page), call `useCookieConsent().rejectAll()` or clear the `privacy-notice-consent` cookie — the banner reappears since `status` returns to `"unset"` only once the cookie is gone; `rejectAll()` itself sets it to `"denied"`, which keeps the banner hidden but stops GA. Expose a dedicated "reset my choice" affordance if you want the banner itself to resurface.
 - 2026-09-27 migration: classes/tokens/test ids renamed `privacy-notice-banner` → `cookie-consent-banner`; `light-dark()` defaults replaced with light values plus an explicit text colour; single-use private pass-throughs inlined and the hardcoded spacing, button and colour values promoted to public tokens; `ariaLabel` prop (was a hardcoded "Cookie consent"); closed banner hidden from keyboard and screen readers; visible `:focus-visible` outline on the buttons; reduced-motion support; `styleClassPassthrough` now reactive. Added CONSUMER-STYLING.md and a snippet.
 - 2026-09-27 (later the same day): rebuilt on `AlertContent` (`:custom-icon`, `:show-icon`, title/message/actions slots). New `title` slot (default "Cookies") and `icon`/`showIcon` props. The panel now follows the semantic theme in light and dark mode instead of a fixed white panel, with a left accent stripe instead of a top border and right-aligned buttons. The banner's own panel tokens were removed in favour of `--alert-content-*`.
+- 2026-10-15: `StressTest` story (worst-case copy: long German, unbroken strings and URLs, emoji/HTML-like text, RTL, empty title). **Breaking:** the buttons are now `InputButton variant="inline"`, so the `acceptLabel`/`rejectLabel` slots became string props of the same name (`:accept-label`, `:reject-label`); the closed state class `.closed` became `.cookie-consent-banner-closed`. The `--cookie-consent-banner-button-*`/`-accept-*`/`-reject-*` tokens are unchanged.

package/.claude/skills/components/input-copy.md

@@ -2,7 +2,9 @@
 
 ## Overview
 
-`InputCopy` renders a readonly text input with a copy-to-clipboard button. Displays a copyable value (e.g., license key, API token) with optional description text below. Shows visual feedback ("Copied!") in the button after a successful copy. Emits `copy` and `copied` events for consumer-side toast/feedback handling.
+`InputCopy` renders a readonly text input with a copy-to-clipboard button (an inline `InputButton`), with optional description text below. After a successful copy the button shows `copiedText` and `copiedIcon` for `copiedDuration` ms, a visually hidden status region announces `copiedText`, and the button stays focusable but `aria-disabled` so repeat clicks are ignored without losing focus. Emits `copy` and `copied` for consumer-side toast/feedback handling.
+
+**Location**: `app/components/02.molecules/input-copy/InputCopy.vue`
 
 ---
 
@@ -10,53 +12,49 @@
 
 > **Hyphenation rule**: Vue's ESLint config enforces `vue/attribute-hyphenation`. Always write camelCase prop names hyphenated in templates: `:style-class-passthrough`.
 
-| Prop (template form)       | Type                   | Default          | Notes                                                        |
-| -------------------------- | ---------------------- | ---------------- | ------------------------------------------------------------ |
-| `:value`                   | `string`               | (required)       | The text to copy to clipboard (e.g., license key, API token).|
-| `:id`                      | `string`               | auto-generated   | Id applied to the input. Only pass one if something needs to target this input directly. |
-| `:name`                    | `string`               | falls back to `id` | Name applied to the input. Falls back to the resolved `id` (auto-generated or explicit) when not provided. |
-| `:label`                   | `string`               | (optional)       | Short label for the field; used in aria-label if ariaLabel not set. |
-| `:aria-label`              | `string`               | (optional)       | Custom aria-label for the input; overrides label.           |
-| `:description`             | `string`               | (optional)       | Helper text displayed below the input.                       |
-| `:button-text`             | `string`               | `"Copy"`         | Label on the copy button.                                    |
-| `:copied-text`             | `string`               | `"Copied!"`      | Text shown in button after copy succeeds.                    |
-| `:copied-duration`         | `number`               | `2000`           | Milliseconds the "Copied!" state persists before resetting.  |
-| `:is-disabled`             | `boolean`              | `false`          | Disables the copy button.                                    |
-| `:style-class-passthrough` | `string \| string[]`   | `[]`             | Extra CSS classes applied to the root element.              |
+| Prop (template form)       | Type                 | Default            | Notes |
+| -------------------------- | -------------------- | ------------------ | ----- |
+| `:value`                   | `string`             | (required)         | The text copied to the clipboard. |
+| `:id`                      | `string`             | auto-generated     | Id on the input. Only pass one if something needs to target it. |
+| `:name`                    | `string`             | falls back to `id` | Name on the input. |
+| `:label`                   | `string`             | `undefined`        | Accessible name for the input (not rendered visibly) and part of the default button aria-label. |
+| `:aria-label`              | `string`             | `undefined`        | Accessible name for the input; overrides `label`. |
+| `:description`             | `string`             | `undefined`        | Helper text below the input, linked with `aria-describedby`. |
+| `:button-text`             | `string`             | `"Copy"`           | Button label. |
+| `:copied-text`             | `string`             | `"Copied!"`        | Button label and status announcement after a copy. |
+| `:button-aria-label`       | `string`             | `"Copy <label> to clipboard"` | Accessible name for the button. Pass translated copy in non-English apps. |
+| `:icon`                    | `string`             | `"lucide:copy"`    | Iconify name for the resting icon. |
+| `:copied-icon`             | `string`             | `"lucide:check"`   | Iconify name shown after a copy. |
+| `:copied-duration`         | `number`             | `2000`             | Milliseconds the copied state lasts. |
+| `:is-disabled`             | `boolean`            | `false`            | Disables the copy button. |
+| `:style-class-passthrough` | `string \| string[]` | `[]`               | Extra classes on the root element. |
 
 ---
 
 ## Events
 
-| Event    | Payload              | Notes                                                      |
-| -------- | -------------------- | ---------------------------------------------------------- |
-| `copy`   | `value: string`      | Emitted when the copy button is clicked (before clipboard write). |
-| `copied` | `value: string`      | Emitted after successful clipboard write; fires after `copy`. |
+| Event    | Payload         | Notes |
+| -------- | --------------- | ----- |
+| `copy`   | `value: string` | Emitted after the clipboard write succeeds. |
+| `copied` | `value: string` | Emitted straight after `copy`, same payload. Neither fires if the write fails (it logs `console.error`). |
 
 ---
 
 ## Slots
 
-None. Use events to customize feedback behavior.
+None.
 
 ---
 
-## CSS Token Customization
-
-All `--input-copy-*` tokens can be overridden at global, page, or instance scope. See `CONSUMER-STYLING.md` in the component directory for full token documentation and examples.
+## Styling
 
-**Common tokens:**
-- `--input-copy-input-bg` — input field background
-- `--input-copy-input-border` — input field border
-- `--input-copy-button-bg` — copy button background
-- `--input-copy-button-bg-hover` — button background on hover
-- `--input-copy-description-color` — description text color
+Tokens are `--input-copy-*` (layout gap, input, button, description including `--input-copy-description-line-clamp`), defaulting from `--theme-*`. Full list and defaults in `CONSUMER-STYLING.md` next to the component. The root is an inline-size container: below `48rem` of its own width the button shows only its icon.
 
 ---
 
-## Usage Examples
+## Usage examples
 
-### License key display (most common)
+### License key display
 
 ```vue
 <InputCopy
@@ -67,21 +65,20 @@ All `--input-copy-*` tokens can be overridden at global, page, or instance scope
 />
 ```
 
-### API token with custom button text
+### Translated copy
 
 ```vue
 <InputCopy
   :value="apiToken"
-  label="API token"
-  description="Do not share this token with anyone."
-  button-text="Copy token"
-  copied-text="Token copied!"
-  @copy="logCopy"
-  @copied="logCopied"
+  :label="t('account.apiToken.label')"
+  :description="t('account.apiToken.description')"
+  :button-text="t('common.copy')"
+  :copied-text="t('common.copied')"
+  :button-aria-label="t('account.apiToken.copyAriaLabel')"
 />
 ```
 
-### Disabled state (e.g., loading or error)
+### Disabled state
 
 ```vue
 <InputCopy
@@ -93,79 +90,29 @@ All `--input-copy-*` tokens can be overridden at global, page, or instance scope
 />
 ```
 
-### With custom styling via CSS tokens
-
-```vue
-<InputCopy
-  :value="shareLink"
-  label="Share link"
-  description="Share this link with others"
-  style="
-    --input-copy-input-bg: #f0f0f0;
-    --input-copy-button-bg: var(--brand-primary);
-    --input-copy-button-text-color: white;
-  "
-/>
-```
-
-### With page-scoped styling
-
-In your page's `<style>` block:
+### Page-scoped styling
 
 ```css
-.success-page .input-copy {
-  --input-copy-input-border: 2px solid var(--success-color);
-  --input-copy-button-bg: var(--success-color);
-  --input-copy-description-color: var(--slate-06);
+.account-page .input-copy {
+  --input-copy-input-border: 0.2rem solid var(--theme-border);
+  --input-copy-button-bg: var(--theme-surface-inverted);
 }
 ```
 
-Then in the template:
-
-```vue
-<div class="success-page">
-  <InputCopy
-    :value="licenseKey"
-    label="Your license key"
-    description="Copy this key to activate the component in your application."
-  />
-</div>
-```
-
-### With toast feedback (consumer-side)
-
-```vue
-<template>
-  <InputCopy
-    :value="apiKey"
-    label="API key"
-    @copied="handleCopied"
-  />
-</template>
-
-<script setup>
-const handleCopied = (value: string) => {
-  // Use your app's toast library
-  useToast().success(`Copied: ${value.slice(0, 8)}...`);
-};
-</script>
-```
-
 ---
 
 ## Accessibility
 
-- Input always has `aria-label` set from `label` or `aria-label` prop
-- Button has descriptive aria-label: "Copy [label] to clipboard"
-- Button is disabled during the "Copied!" feedback window to prevent repeated clicks
-- Icon-only display on mobile (<480px); text shown on desktop for clarity
-- Readonly input has `readonly` attribute; not editable
+- The input's accessible name comes from `aria-label` or `label`; `description` is linked with `aria-describedby`.
+- The button's accessible name is `buttonAriaLabel`, defaulting to "Copy [label] to clipboard". It's set as `aria-label`, so it overrides the visible label.
+- A visually hidden `role="status"` region announces `copiedText` after a copy (the button's aria-label doesn't change, so screen readers wouldn't otherwise hear it).
+- During the copied state the button is `aria-disabled`, not `disabled`, so keyboard focus stays on it.
+- Visible `:focus-visible` rings on the input and the button.
 
 ---
 
 ## Notes
 
-- **Clipboard API**: Uses native `navigator.clipboard.writeText()`. Fails silently if unavailable (e.g., insecure context).
-- **Button text hide on mobile**: By default, only the copy icon displays on screens <480px. Text appears on desktop (≥480px).
-- **No toast built-in**: This component does not show toasts. Listen to `@copied` event and use your app's toast library for feedback.
-- **Manual reset**: The "Copied!" state automatically resets after `copied-duration` milliseconds. No manual reset needed.
+- **Clipboard API**: uses `navigator.clipboard.writeText()`, which needs a secure context. A failure logs to the console and leaves the resting state.
+- **No toast built-in**: listen to `@copied` and use the app's own toast (e.g. `DisplayToastProvider`).
+- 2026-10-15 migration: raw `<button>` replaced with `InputButton variant="inline"`; new `buttonAriaLabel`, `icon`, `copiedIcon` props; status announcement, `aria-describedby`, copied state via `aria-disabled` instead of `disabled`; theme colour defaults and readable font sizes; container query replaces the 480px viewport media query; `.input-copy__button-text` became InputButton's `.button-text`; StressTest story and `--input-copy-description-line-clamp`.

package/.claude/skills/composable-cookie-consent.md

@@ -18,7 +18,7 @@
 
 ### 2. Render the banner
 
-Pair it with [[cookie-consent-banner]] (`CookieConsentBanner.vue`), registered once in the app's default layout — see that component's skill doc for placement and copy slots.
+Pair it with [[cookie-consent-banner]] (`CookieConsentBanner.vue`), registered once in the app's default layout — see that component's skill doc for placement, copy slots and label props.
 
 ## Composable reference
 

package/.claude/skills/index.md

@@ -106,7 +106,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── pricing-card.md         — PricingCard: plan card with highlight badge, corner ribbon, feature list, #cta slot, heading-tag, line-clamp tokens
     ├── price-list.md           — PriceList: service/menu price columns (dl rows), PriceListData type, headingTag/fromLabel props, CSS token API
     ├── opening-hours.md        — OpeningHours: per-day data auto-grouped into ranges, split sessions, 24h/appointment, exceptions, Intl formatting, today highlight, JSON-LD, CSS token API
-    ├── input-copy.md           — InputCopy: readonly copy-to-clipboard input, visual feedback, Clipboard API, accessibility, CSS token API
+    ├── input-copy.md           — InputCopy: readonly copy-to-clipboard input with an inline InputButton, copied state + status announcement, translatable labels/icons, container-query icon-only button, --input-copy-* tokens
     ├── banner-video.md         — BannerVideo: full-width hero video banner, depth tier system, objectFit/objectPosition, playIcon/pauseIcon/toggle-icon slot, reduced-motion fallback, CSS tokens
     ├── grid-stack.md           — GridStack: CSS Grid z-axis stacking, slot API, z-order rules, sizing, video+overlay and image+text patterns
     ├── scroll-reveal-frame.md  — ScrollRevealFrame: generic parallax clipping frame, slot API, image grid pattern, public --scroll-reveal-frame-* tokens (props only write them when passed), browser support
@@ -136,7 +136,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── site-header.md            — SiteHeader: PageRow + SkipLinks + ResponsiveHeader composition, #branding/#secondaryNavigation slots, dual styleClassPassthrough hooks
     ├── responsive-header.md      — ResponsiveHeader: overflow-collapsing adaptive nav, measurement-pipeline gotchas (unsized icons, vw font-size drift), full CSS token API
     ├── navigation-items.md       — NavigationItems: internal overflow-panel renderer for ResponsiveHeader, complement-visibility logic, not used standalone
-    ├── cookie-consent-banner.md  — CookieConsentBanner: fixed non-modal Accept/Reject banner built on AlertContent, driven by useCookieConsent; title/message/acceptLabel/rejectLabel slots, icon/showIcon/ariaLabel props, position/button tokens (panel via --alert-content-*), teleported so tokens go on html/passthrough
+    ├── cookie-consent-banner.md  — CookieConsentBanner: fixed non-modal Accept/Reject banner built on AlertContent, driven by useCookieConsent; title/message slots, acceptLabel/rejectLabel/icon/showIcon/ariaLabel props, InputButton (inline) actions, position/button tokens (panel via --alert-content-*), teleported so tokens go on html/passthrough
     ├── display-banner.md         — DisplayBanner: canvas/content stacked overlay banner, conditional slot wrappers, CSS token API
     ├── deep-expanding-menu.md         — DeepExpandingMenu: anchor-positioned popover nav panels, browser support caveat, CSS token API
     ├── deep-expanding-menu-classic.md — DeepExpandingMenuClassic: <details>-based fallback nav, click-outside close, CSS token API

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

@@ -307,6 +307,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/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.