srcdev-nuxt-components 9.6.2 → 9.6.4

package/.claude/rules/consumer/consumer-overrides.md

@@ -0,0 +1,17 @@
+---
+paths:
+  - "app/**/*.vue"
+  - "app/**/*.css"
+---
+
+# Overriding srcdev-nuxt-components styles
+
+Override a layer component through its public tokens (`--component-name-*`, listed in its
+`CONSUMER-STYLING.md`) set on an ancestor you own. Never wrap override `<style>` blocks in a named
+`@layer`, never set its private `--_` tokens, and override colours and geometry only, never
+behaviour (`display`, `visibility`, `pointer-events`, `z-index`, animations). Applies in apps that
+extend the layer, not to a component's own styles inside srcdev-nuxt-components.
+
+Why: unlayered CSS always beats the layer's `@layer components`, while a named layer can be ordered
+below it by SSR-inlined chunks; private tokens can change in any release.
+Detail: skill `component-local-style-override.md` (srcdev-nuxt-components).

package/.claude/rules/consumer/css-comment-slash.md

@@ -0,0 +1,13 @@
+---
+paths:
+  - "app/**/*.vue"
+  - "app/**/*.css"
+---
+
+# No `*/` inside CSS comments
+
+Never join token names with a bare slash in a CSS comment (`--_form-*/--_scheme-icon-font-size`);
+write "and" or space the slash.
+
+Why: `*/` closes the comment early and yields a misleading "Unclosed string" error lines later.
+

package/.claude/rules/consumer/css-native-nesting.md

@@ -0,0 +1,13 @@
+---
+paths:
+  - "app/**/*.vue"
+  - "app/**/*.css"
+---
+
+# Native CSS nesting, no Sass concatenation
+
+Never write `&__child` or `&-modifier`. Use `& .block__child` or a top-level `.block__child {}` rule.
+Nest child rules inside the component's root block.
+
+Why: it's Sass syntax; esbuild turns `&__foo` into `:is(__foo)`, which silently matches nothing.
+Detail: skill `css-nesting-conventions.md` (srcdev-nuxt-components).

package/.claude/rules/consumer/css-no-deep.md

@@ -0,0 +1,13 @@
+---
+paths:
+  - "app/**/*.vue"
+---
+
+# `:deep()` only in `<style scoped>`
+
+Never use `:deep()` in an unscoped `<style>` block (srcdev-nuxt-components' own styles are never
+scoped). There, reach a child component with a plain descendant selector (`& .input-button`), or
+better, set the child's public tokens on an ancestor. In a `<style scoped>` block it works as normal.
+
+Why: outside `<style scoped>` `:deep()` stays as an unknown pseudo-class and the browser silently
+drops the whole rule.

package/.claude/rules/consumer/css-rem-base.md

@@ -0,0 +1,11 @@
+---
+paths:
+  - "app/**/*.vue"
+  - "app/**/*.css"
+---
+
+# 1rem = 10px
+
+Calculate rem values on a 10px base (`html { font-size: 62.5% }`): `1.6rem` = 16px, `2.4rem` = 24px.
+
+Why: the browser default 16px base gives wrong sizes.

package/.claude/rules/consumer/css-surface-text-pairing.md

@@ -0,0 +1,13 @@
+---
+paths:
+  - "app/**/*.vue"
+  - "app/**/*.css"
+---
+
+# Text on dark surfaces uses `--theme-on-surface`
+
+Pair a dark/bold surface (`--theme-surface-hover`, `--theme-surface-inverted`) with
+`--theme-on-surface`, never `--theme-text` or `--theme-text-inverted`.
+
+Why: those text tokens assume a light surface, so the pairing renders dark-on-dark in light mode.
+Detail: skill `theming-partial-override.md` (srcdev-nuxt-components).

package/.claude/rules/consumer/css-webkit-support.md

@@ -0,0 +1,15 @@
+---
+paths:
+  - "app/**/*.vue"
+  - "app/**/*.css"
+---
+
+# Load-bearing CSS must work in WebKit / Safari 16
+
+Never rely on a new CSS feature (`::details-content`, `@starting-style`, `appearance: base-select`,
+anchor positioning, ...) for anything load-bearing unless Safari 16 has a working path; decorative
+extras may degrade. Prefer routing to a proven alternative implementation over a CSS-only
+`@supports` patch.
+
+Why: WebKit silently drops unsupported rules, and Chrome's device emulation is still Blink so it
+can't show the gap.

package/.claude/rules/consumer/explicit-vue-imports.md

@@ -0,0 +1,11 @@
+---
+paths:
+  - "app/**/*.spec.ts"
+  - "**/*.stories.ts"
+---
+
+# Import Vue APIs explicitly in tests and stories
+
+Always import `nextTick`, `computed`, `ref`, etc. from `"vue"` in `.spec.ts` and `.stories.ts` files.
+
+Why: auto-imports only apply inside components.

package/.claude/rules/consumer/nuxt-img-dimensions.md

@@ -0,0 +1,12 @@
+---
+paths:
+  - "app/**/*.vue"
+---
+
+# NuxtImg needs numeric width and height
+
+Always give `NuxtImg` numeric `width` and `height` props, roughly the largest rendered pixel width
+(pass a size prop through when it varies). Never `width="100%"`. CSS sizes the displayed image.
+
+Why: without them the Vercel provider requests a width it doesn't allow (`w=1536`), and a
+non-numeric width makes it request its largest screen width for every image.

package/.claude/rules/consumer/srcdev-skills-location.md

@@ -0,0 +1,9 @@
+# Where srcdev-nuxt-components skills live
+
+A skill named as "skill `x.md` (srcdev-nuxt-components)" is at
+`.claude/skills/srcdev-nuxt-components/x.md`. Per-component usage docs are in its `components/`
+subfolder (`.claude/skills/srcdev-nuxt-components/components/<component-name>.md`). Inside the
+srcdev-nuxt-components repo itself, the same files are directly under `.claude/skills/`.
+
+Why: the layer's rules name skills rather than linking a path, so they read the same in the
+library repo and in consuming apps.

package/.claude/rules/consumer/story-args.md

@@ -0,0 +1,12 @@
+---
+paths:
+  - "**/*.stories.ts"
+---
+
+# Story args stay reactive
+
+Never destructure, copy (`ref(args.x)`) or `watch` `args` at setup time. Strip non-prop extra args
+inside a `computed` before `v-bind`, and type the meta as `Meta<StoryArgs>` when it has extra args.
+
+Why: setup runs once, so copied args and watchers miss control changes, and unstripped extras become
+unknown HTML attributes. Detail: skill `storybook-add-story.md` (srcdev-nuxt-components).

package/.claude/rules/consumer/story-register-components.md

@@ -0,0 +1,12 @@
+---
+paths:
+  - "**/*.stories.ts"
+---
+
+# Register every component a story template uses
+
+Every component in a story's `template` string, including ones placed in the component's slots, must
+be listed in that story's `components: {}`.
+
+Why: components aren't auto-registered in story templates; unregistered ones render as unknown tags.
+Detail: skill `storybook-add-story.md` (srcdev-nuxt-components).

package/.claude/rules/consumer/vue-auto-imports.md

@@ -0,0 +1,14 @@
+---
+paths:
+  - "app/**/*.vue"
+  - "app/composables/**/*.ts"
+  - "app/utils/**/*.ts"
+---
+
+# Vue and Nuxt auto-imports
+
+Never import `ref`, `reactive`, `computed`, `watch`, `nextTick`, `useState`, `useRoute`, `useRouter`
+or anything from `~/composables/` in app code. Import only `type`s and external packages.
+
+Why: Nuxt auto-imports them; manual imports are noise and drift from the rest of the codebase.
+Test and story files are the exception (see `explicit-vue-imports.md`).

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

@@ -0,0 +1,12 @@
+---
+paths:
+  - "app/**/*.vue"
+---
+
+# 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" />`. 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` is set to `normal: "never"`, `component: "always"`.

package/.claude/rules/consumer/vue-prop-hyphenation.md

@@ -0,0 +1,11 @@
+---
+paths:
+  - "app/**/*.vue"
+  - "**/*.stories.ts"
+---
+
+# Hyphenated props in templates
+
+Always write camelCase props hyphenated in templates: `:item-count`, `:style-class-passthrough`.
+
+Why: ESLint `vue/attribute-hyphenation` requires it.

package/.claude/rules/consumer/vue-props-pattern.md

@@ -0,0 +1,13 @@
+---
+paths:
+  - "app/**/*.vue"
+---
+
+# Props pattern
+
+Always declare props as `interface Props` + `withDefaults(defineProps<Props>(), {...})`, with factory
+functions for array/object defaults. Never use options-style `defineProps({ x: { type, default } })`.
+Never declare `class` or `style` as props; hide them from Storybook controls via `argTypes` instead.
+
+Why: typed props are the standard across srcdev-nuxt-components and its apps, and a
+`class`/`style` prop breaks Vue's automatic `$attrs` inheritance.

package/.claude/rules/consumer/vue-slots-no-computed.md

@@ -0,0 +1,14 @@
+---
+paths:
+  - "app/**/*.vue"
+  - "app/composables/**/*.ts"
+---
+
+# Never derive state from slots in a computed
+
+Never read `useSlots()` inside a `computed()`. Use a plain function called from the template
+(`v-if="hasFooter()"`, `:aria-describedby="ariaDescribedby()"`), including anything derived from it.
+Test by toggling a `v-if`'d slot in a host component after mount.
+
+Why: the slots object isn't reactive, so the computed caches its first value and leaves split state
+when a slot is added or removed after mount.

package/.claude/rules/consumer/vue-video-source.md

@@ -0,0 +1,12 @@
+---
+paths:
+  - "app/**/*.vue"
+---
+
+# Video src goes on a `<source>` child
+
+Never bind `:src` on a `<video>`. Use `<source :src="src">` inside it, `:key="src"` on the video, and
+an explicit `videoEl.load()` on mount and src change.
+
+Why: Vue patching `:src` on client-side navigation silently skips the fetch.
+Detail: skill `vue-video-autoplay.md` (srcdev-nuxt-components).

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

@@ -15,7 +15,7 @@ A component passes when its Component Ledger row (`node .claude/component-ledger
 `.claude/component-ledger/audit.json`) shows `score: 5`, a real tier, and `variants`, `legacy_props`,
 `story_args_bug`, `eslint_issues`, `redundant_priv_tokens`, `styling_doc_outdated` and `missing_stress_story`
 all `false`.
-The ledger can't see items 9, 10, 11 and 14, so check those by hand.
+The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
 
 ## The checklist
 
@@ -104,7 +104,8 @@ The ledger can't see items 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`
@@ -149,10 +150,27 @@ The ledger can't see items 9, 10, 11 and 14, so check those by hand.
     with nothing to stress (animation wrappers, decorative containers that only take a slot and
     tag/variant props, Storybook tooling) are exempt: they are listed in `stressStoryExempt` in
     `.claude/component-ledger/build.mjs`; add a new one there rather than writing a padding story.
+6c. **Storybook docs page** — every story file gets a generated Docs page: `tags: ["autodocs"]` is
+    set globally in `.storybook/preview.ts` (since 2026-10-14), so don't repeat it in the meta.
+    Open the component's Docs page and check that it reads well:
+    - A `parameters.docs.description.component` in the meta says what the component is for and
+      names its main props/slots/events. Per-story `docs.description.story` text explains what
+      that story shows (the Docs page is the only place either is visible).
+    - The props table is accurate. Every story-only arg has a `description` and a category, and
+      CSS-token args are labelled story-only (6b).
+    - Every story renders inline. A story that misbehaves on the shared page (fixed/sticky
+      overlays, `layout: "fullscreen"` canvases, dialogs, toasts, scroll effects, heavy stress
+      data) gets `parameters.docs.story: { inline: false, height: "<px>" }` so it renders in its
+      own iframe. Don't drop it from the page.
+    - A story file that isn't a component reference (Storybook tooling, a file that already has an
+      attached `.mdx` page) opts out with `tags: ["!autodocs"]`. `ColourRamps.stories.ts` does this.
+    See `storybook-add-story.md`, "Docs page".
 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.
@@ -235,3 +253,13 @@ The ledger can't see items 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.
+    - No `font-size` (or font-size token default) under `1rem`. `html` is `62.5%`, so `1rem` is
+      10px, and values like `0.75rem`/`0.9rem` are almost always copied from a 16px-base design
+      and render at 7.5-9px. `PricingCard` had both (fixed 2026-10-15); grep
+      `font-size:\s*(var\([^,]+,\s*)?0?\.[0-9]+rem` to find them.

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/component-naming.md

@@ -58,7 +58,7 @@ stripping `Core`.
 
 1. `git mv` the `.vue` files, their stories and tests (and the skill doc if it's named after the old
    control name).
-2. `sed` the old names across `app/`, `.claude/`, `.vscode/`, `MIGRATION.md` and `Claude.md`:
+2. `sed` the old names across `app/`, `.claude/`, `.vscode/`, `MIGRATION.md` and `CLAUDE.md`:
    component names, `import` paths, story titles/`*StoryArgs` interfaces, `describe()` names, and the
    root/base DOM class (update `CONSUMER-STYLING.md` and test selectors that use it).
 3. Add a "Renamed YYYY-MM-DD" note at the top of the skill doc listing old → new names and classes.

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`.