srcdev-nuxt-components 9.6.2 → 9.6.4

package/app/components/02.molecules/cookie-consent-banner/tests/CookieConsentBanner.spec.ts

@@ -34,6 +34,12 @@ function rejectButton() {
   return document.querySelector("[data-test-id='cookie-consent-banner-reject']") as HTMLElement;
 }
 
+// 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();
+}
+
 describe("CookieConsentBanner", () => {
   beforeEach(() => {
     statusRef.value = "unset";
@@ -56,15 +62,15 @@ describe("CookieConsentBanner", () => {
     expect(banner()).not.toBeNull();
   });
 
-  it("is visible (no closed class) while status is 'unset'", async () => {
+  it("is visible (no closed state class) while status is 'unset'", async () => {
     await mountSuspended(CookieConsentBanner);
-    expect(banner()!.classList).not.toContain("closed");
+    expect(banner()!.classList).not.toContain("cookie-consent-banner-closed");
   });
 
-  it("adds the closed class once status is no longer 'unset'", async () => {
+  it("adds the cookie-consent-banner-closed class once status is no longer 'unset'", async () => {
     statusRef.value = "granted";
     await mountSuspended(CookieConsentBanner);
-    expect(banner()!.classList).toContain("closed");
+    expect(banner()!.classList).toContain("cookie-consent-banner-closed");
   });
 
   it("defaults to data-theme='info'", async () => {
@@ -94,21 +100,37 @@ describe("CookieConsentBanner", () => {
     expect(banner()!.textContent).toContain("Custom cookie copy");
   });
 
-  it("renders acceptLabel/rejectLabel slot content", async () => {
-    await mountSuspended(CookieConsentBanner, { slots: { acceptLabel: "Yes please", rejectLabel: "No thanks" } });
+  it("renders default button labels", async () => {
+    await mountSuspended(CookieConsentBanner);
+    expect(acceptButton().textContent).toContain("Accept");
+    expect(rejectButton().textContent).toContain("Reject");
+  });
+
+  it("renders acceptLabel/rejectLabel props", async () => {
+    await mountSuspended(CookieConsentBanner, { props: { acceptLabel: "Yes please", rejectLabel: "No thanks" } });
     expect(acceptButton().textContent).toContain("Yes please");
     expect(rejectButton().textContent).toContain("No thanks");
   });
 
+  it("renders both buttons as inline InputButtons", async () => {
+    await mountSuspended(CookieConsentBanner);
+    for (const button of [acceptButton(), rejectButton()]) {
+      expect(button.tagName).toBe("BUTTON");
+      expect(button.getAttribute("type")).toBe("button");
+      expect(button.classList).toContain("input-button");
+      expect(button.classList).toContain("inline");
+    }
+  });
+
   it("calls acceptAll() when the accept button is clicked", async () => {
     await mountSuspended(CookieConsentBanner);
-    acceptButton().click();
+    click(acceptButton());
     expect(acceptAllSpy).toHaveBeenCalledOnce();
   });
 
   it("calls rejectAll() when the reject button is clicked", async () => {
     await mountSuspended(CookieConsentBanner);
-    rejectButton().click();
+    click(rejectButton());
     expect(rejectAllSpy).toHaveBeenCalledOnce();
   });
 
@@ -133,9 +155,9 @@ describe("CookieConsentBanner", () => {
 
   it("closes after a choice is made", async () => {
     await mountSuspended(CookieConsentBanner);
-    rejectButton().click();
+    click(rejectButton());
     await nextTick();
-    expect(banner()!.classList).toContain("closed");
+    expect(banner()!.classList).toContain("cookie-consent-banner-closed");
   });
 
   it("reopens if consent is reset to 'unset'", async () => {
@@ -143,7 +165,7 @@ describe("CookieConsentBanner", () => {
     await mountSuspended(CookieConsentBanner);
     statusRef.value = "unset";
     await nextTick();
-    expect(banner()!.classList).not.toContain("closed");
+    expect(banner()!.classList).not.toContain("cookie-consent-banner-closed");
   });
 
   it("updates classes when styleClassPassthrough changes", async () => {

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

@@ -1,150 +1,108 @@
 # InputCopy — Consumer Styling Guide
 
+A readonly input and a copy button (an `InputButton` with `variant="inline"`, so the tokens below
+style it rather than `InputButton`'s variant colours), with optional description text below.
+
+> **Changed 2026-10-15**: compliance migration.
+>
+> - Colour defaults now come from the theme: input background `--theme-input-surface` (was
+>   `--slate-00`), border `0.1rem solid var(--theme-border)` (was `1px solid var(--slate-03)`), input
+>   and description text `--theme-text` (were `#333` / `#666`). Set the tokens if you relied on the
+>   old greys.
+> - Font sizes were `0.95rem` / `0.85rem` (9.5px / 8.5px on the 10px rem base); both now default to
+>   `var(--step-4)`.
+> - `--input-copy-description-margin` defaults to `0` (was `0.6rem 0 0 0`, doubling up with the
+>   gap); spacing is the new `--input-copy-gap`.
+> - `--input-copy-input-placeholder-color` is gone (the input always has a value). New:
+>   `--input-copy-gap`, `--input-copy-focus-ring`, `--input-copy-description-line-clamp`.
+> - The input's focus outline used the border-radius token as its colour; it's now a real
+>   `:focus-visible` ring from `--input-copy-focus-ring`.
+> - The button label is `InputButton`'s `.button-text` (was `.input-copy__button-text`), and it
+>   hides below 48rem of the **component's** width (a container query), not a 480px viewport.
+
 ## Public token API
 
-All `--input-copy-*` tokens are the stable override surface. Set them at any scope (global, page,
-or instance) without touching the component itself.
+### Layout
 
 | Token | Default | Controls |
 |---|---|---|
-| `--input-copy-input-bg` | `var(--slate-00)` | Input field background colour |
-| `--input-copy-input-border` | `1px solid var(--slate-03)` | Input field border |
-| `--input-copy-input-border-radius` | `0.4rem` | Input field corner rounding |
-| `--input-copy-input-padding` | `0.8rem 1rem` | Input field padding |
-| `--input-copy-input-text-color` | `#333` | Input text colour |
-| `--input-copy-input-placeholder-color` | `#999` | Placeholder text colour |
-| `--input-copy-input-font-size` | `0.95rem` | Input field font size |
-| `--input-copy-button-bg` | `var(--input-button-primary-surface)` | Copy button background |
-| `--input-copy-button-bg-hover` | `var(--input-button-primary-surface-hover)` | Copy button background on hover |
-| `--input-copy-button-text-color` | `var(--input-button-primary-text)` | Copy button text colour |
-| `--input-copy-button-padding` | `0.8rem 1.2rem` | Copy button padding |
-| `--input-copy-button-border-radius` | `0.4rem` | Copy button corner rounding |
-| `--input-copy-button-gap` | `0.6rem` | Gap between icon and text in button |
-| `--input-copy-description-color` | `#666` | Description text colour |
-| `--input-copy-description-font-size` | `0.85rem` | Description font size |
-| `--input-copy-description-margin` | `0.6rem 0 0 0` | Description margin |
-
----
+| `--input-copy-gap` | `0.8rem` | Gap between input and button, and above the description |
 
-## Global theming
+### Input
+
+| Token | Default | Controls |
+|---|---|---|
+| `--input-copy-input-bg` | `var(--theme-input-surface)` | Input background |
+| `--input-copy-input-border` | `0.1rem solid var(--theme-border)` | Input border (shorthand) |
+| `--input-copy-input-border-radius` | `0.4rem` | Input corner radius |
+| `--input-copy-input-padding` | `0.8rem 1rem` | Input padding |
+| `--input-copy-input-text-color` | `var(--theme-text)` | Input text colour |
+| `--input-copy-input-font-size` | `var(--step-4)` | Input and button font size |
+| `--input-copy-focus-ring` | `var(--theme-border-focus)` | `:focus-visible` outline colour on the input and the button |
+
+### Button
 
-Create `assets/styles/setup/07.components/input-copy.css` in the consuming app and set tokens on
-`:root`. These values apply to every `InputCopy` instance across the site.
+| Token | Default | Controls |
+|---|---|---|
+| `--input-copy-button-bg` | `var(--input-button-primary-surface, var(--theme-surface))` | Button background |
+| `--input-copy-button-bg-hover` | `var(--input-button-primary-surface-hover, var(--theme-surface-hover))` | Button background on hover |
+| `--input-copy-button-text-color` | `var(--input-button-primary-text, var(--theme-on-surface))` | Button text and icon colour |
+| `--input-copy-button-padding` | `0.8rem 1.2rem` | Button padding |
+| `--input-copy-button-border-radius` | `0.4rem` | Button corner radius |
+| `--input-copy-button-gap` | `0.6rem` | Gap between icon and label |
+
+### Description
+
+| Token | Default | Controls |
+|---|---|---|
+| `--input-copy-description-color` | `var(--theme-text)` | Description text colour |
+| `--input-copy-description-font-size` | `var(--step-4)` | Description font size |
+| `--input-copy-description-margin` | `0` | Description margin |
+| `--input-copy-description-line-clamp` | `none` | Lines before the description is cut off with an ellipsis (`1` = single line) |
+
+Private tokens (not public API): `--_input-font-size` on the root, the resolved input font size
+shared by the input and the button.
+
+## State hooks
+
+- `.input-copy-copied` on the root for `copiedDuration` ms after a successful copy. The button then
+  has `aria-disabled="true"` (it stays focusable and ignores clicks) and shows `copiedText` and
+  `copiedIcon`.
+- `disabled` on the button when `isDisabled` is set.
+- Classes: `.input-copy` > `.input-copy__wrapper` > `.input-copy__input` and
+  `.input-copy__button` (also `.input-button.inline`, containing `.input-copy__icon` and
+  `.button-text`); then `.input-copy__description` and a visually hidden `role="status"` span.
+- Container: the root is `container: input-copy / inline-size`. Below `48rem` of its own width the
+  button's `.button-text` is hidden and only the icon shows (the button keeps its aria-label).
+
+## Global theming
 
 ```css
-/* assets/styles/setup/07.components/input-copy.css */
-:root {
+:where(html) {
   --input-copy-input-border-radius: 0.6rem;
-  --input-copy-input-padding: 1rem 1.2rem;
   --input-copy-button-border-radius: 0.6rem;
-  --input-copy-button-gap: 0.8rem;
-  --input-copy-description-color: var(--slate-06);
 }
 ```
 
----
-
 ## Local overrides
 
 Set the tokens above on an element you own (a page or section class, or a class added with
 `:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
 `@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
-`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
-`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
-
-### One instance
-
-Override tokens directly on a single InputCopy instance:
-
-```vue
-<InputCopy
-  value="sk_live_abc123"
-  label="API key"
-  style="
-    --input-copy-input-border-radius: 0.8rem;
-    --input-copy-button-bg: var(--brand-success);
-  "
-/>
-```
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the
+component need `:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
 
-### Page or section
+**Caveat:** the button sets `--input-button-text-white-space: normal` on itself so long labels wrap,
+so a value set on an ancestor won't reach it.
 
-When input-copy appears in a specific page context (e.g., checkout success page), scope overrides
-under the page wrapper:
+## Class passthrough
 
-```css
-/* In the consuming page's unscoped <style> block */
-.success-page {
-  .input-copy {
-    --input-copy-input-bg: var(--brand-surface-light);
-    --input-copy-input-border: 2px solid var(--brand-primary);
-    --input-copy-button-bg: var(--brand-primary);
-    --input-copy-button-bg-hover: var(--brand-primary-hover);
-  }
-}
-```
-
----
-
-## License key display pattern
+`style-class-passthrough` adds classes to the root `.input-copy`, next to `.input-copy-copied`. It's
+reachable in normal use and is a good place to set tokens for one instance.
 
-Typical usage on a success page or dashboard to display a license key:
-
-```vue
-<InputCopy
-  :value="licenseKey"
-  label="License key"
-  description="Your license key is ready to use. Copy it and add to your component."
-  buttonText="Copy"
-  copiedText="Copied!"
-  @copied="showFeedback"
-/>
-```
-
-```css
-.success-page {
-  .input-copy {
-    max-width: 500px;
-
-    --input-copy-input-bg: #f9f9f9;
-    --input-copy-input-border: 1px solid var(--slate-02);
-    --input-copy-input-text-color: var(--slate-09);
-  }
-}
-```
-
----
-
-## Readonly input styling
-
-The input field is always readonly to prevent accidental edits. Style it distinctly if needed:
-
-```css
-.input-copy {
-  .input-copy__input {
-    background-color: var(--slate-00);
-    color: var(--slate-09);
-    cursor: default;
-  }
-}
-```
-
----
-
-## Button text visibility on small screens
-
-By default, the button text is hidden on screens < 480px. Override for always-visible text:
-
-```css
-.input-copy__button-text {
-  display: inline !important;
-}
-```
-
-Or show only the icon on mobile and text on desktop (default behavior):
-
-```css
-/* Default: button shows only icon on mobile, icon + text on desktop (480px+) */
-/* No override needed; this is the built-in behavior */
-```
+## Notes
 
+- The root is an inline-size container, so it can't size itself from its content: give it a width
+  from its parent (it fills a block or grid cell; inside a flex row, give it `flex: 1` or a width).
+- The button is capped at half the row (`max-inline-size: 50%`) and its label wraps, so a long
+  translated label can't squeeze the input to nothing.

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-copy" :class="elementClasses">
+  <div class="input-copy" :class="[{ 'input-copy-copied': copied }, elementClasses]">
     <div class="input-copy__wrapper">
       <input
         :id="resolvedId"
@@ -8,20 +8,26 @@
         :name="name || resolvedId"
         :value="value"
         :aria-label="ariaLabel || label"
+        :aria-describedby="description ? descriptionId : undefined"
         readonly
       />
-      <button
+      <InputButton
         type="button"
+        variant="inline"
         class="input-copy__button"
-        :aria-label="`Copy ${ariaLabel || label || 'value'} to clipboard`"
-        :disabled="copied || isDisabled"
+        :button-text="copied ? copiedText : buttonText"
+        :aria-label="resolvedButtonAriaLabel"
+        :disabled="isDisabled"
+        :readonly="copied"
         @click="handleCopy"
       >
-        <Icon name="lucide:copy" class="input-copy__icon" />
-        <span class="input-copy__button-text">{{ copied ? copiedText : buttonText }}</span>
-      </button>
+        <template #left>
+          <Icon :name="copied ? copiedIcon : icon" class="input-copy__icon" />
+        </template>
+      </InputButton>
     </div>
-    <p v-if="description" class="input-copy__description">{{ description }}</p>
+    <p v-if="description" :id="descriptionId" class="input-copy__description">{{ description }}</p>
+    <span class="sr-only" role="status">{{ copied ? copiedText : "" }}</span>
   </div>
 </template>
 
@@ -36,6 +42,9 @@ interface Props {
   description?: string;
   buttonText?: string;
   copiedText?: string;
+  buttonAriaLabel?: string;
+  icon?: string;
+  copiedIcon?: string;
   copiedDuration?: number;
   isDisabled?: boolean;
   styleClassPassthrough?: string | string[];
@@ -49,17 +58,23 @@ const props = withDefaults(defineProps<Props>(), {
   description: undefined,
   buttonText: "Copy",
   copiedText: "Copied!",
+  buttonAriaLabel: undefined,
+  icon: "lucide:copy",
+  copiedIcon: "lucide:check",
   copiedDuration: 2000,
   isDisabled: false,
   styleClassPassthrough: () => [],
 });
 
 // Readonly text inputs still need an id/name to satisfy "a form field element should have an
-// id or name attribute" — auto-generated so every existing call site (none of which pass one)
-// gets a valid, unique id for free. Named resolvedId, not id, so it can't be confused with (or
-// silently shadow) the `id` prop it falls back to.
+// id or name attribute", so one is auto-generated when none is passed.
 const autoId = useId();
 const resolvedId = computed(() => props.id ?? autoId);
+const descriptionId = computed(() => `${resolvedId.value}-description`);
+
+const resolvedButtonAriaLabel = computed(
+  () => props.buttonAriaLabel ?? `Copy ${props.ariaLabel || props.label || "value"} to clipboard`
+);
 
 const emit = defineEmits<{
   copy: [value: string];
@@ -95,7 +110,7 @@ watch(
   () => props.styleClassPassthrough,
   () => {
     resetElementClasses(props.styleClassPassthrough);
-  },
+  }
 );
 
 onUnmounted(() => {
@@ -108,95 +123,105 @@ onUnmounted(() => {
 <style lang="css">
 @layer components {
   .input-copy {
-    --_input-border-radius: var(--input-copy-input-border-radius, 0.4rem);
-    --_input-font-size: var(--input-copy-input-font-size, 0.95rem);
-
-    --_button-bg-hover: var(
-      --input-copy-button-bg-hover,
-      var(--input-button-primary-surface-hover, var(--theme-surface-hover))
-    );
-    --_button-text-color: var(
-      --input-copy-button-text-color,
-      var(--input-button-primary-text, var(--theme-on-surface))
-    );
+    --_input-font-size: var(--input-copy-input-font-size, var(--step-4));
 
+    container: input-copy / inline-size;
     display: flex;
     flex-direction: column;
-    gap: 0.8rem;
-  }
+    gap: var(--input-copy-gap, 0.8rem);
 
-  .input-copy__wrapper {
-    display: flex;
-    gap: 0.8rem;
-    align-items: stretch;
-  }
+    .input-copy__wrapper {
+      display: flex;
+      gap: var(--input-copy-gap, 0.8rem);
+      align-items: stretch;
+    }
 
-  .input-copy__input {
-    flex: 1;
-    min-width: 0;
+    .input-copy__input {
+      flex: 1;
+      min-width: 0;
+      padding: var(--input-copy-input-padding, 0.8rem 1rem);
+      background-color: var(--input-copy-input-bg, var(--theme-input-surface));
+      border: var(--input-copy-input-border, 0.1rem solid var(--theme-border));
+      border-radius: var(--input-copy-input-border-radius, 0.4rem);
+      font-size: var(--_input-font-size);
+      color: var(--input-copy-input-text-color, var(--theme-text));
+      font-family: inherit;
+
+      &:focus-visible {
+        outline: var(--form-element-outline-width-focus, 0.2rem) solid
+          var(--input-copy-focus-ring, var(--theme-border-focus));
+        outline-offset: var(--form-element-outline-offset-focus, 0.2rem);
+      }
+    }
 
-    padding: var(--input-copy-input-padding, 0.8rem 1rem);
-    background-color: var(--input-copy-input-bg, var(--slate-00));
-    border: var(--input-copy-input-border, 1px solid var(--slate-03));
-    border-radius: var(--_input-border-radius);
-    font-size: var(--_input-font-size);
-    color: var(--input-copy-input-text-color, #333);
-    font-family: inherit;
+    .input-copy__button.input-button {
+      flex-shrink: 0;
+      max-inline-size: 50%;
+      box-sizing: border-box;
+      min-height: auto;
+      gap: var(--input-copy-button-gap, 0.6rem);
+      padding: var(--input-copy-button-padding, 0.8rem 1.2rem);
+      background-color: var(--input-copy-button-bg, var(--input-button-primary-surface, var(--theme-surface)));
+      color: var(--input-copy-button-text-color, var(--input-button-primary-text, var(--theme-on-surface)));
+      border: none;
+      border-radius: var(--input-copy-button-border-radius, 0.4rem);
+      font-size: var(--_input-font-size);
+      font-weight: 500;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+      --input-button-text-white-space: normal;
+
+      &:hover:not(:disabled, [aria-disabled="true"]) {
+        background-color: var(
+          --input-copy-button-bg-hover,
+          var(--input-button-primary-surface-hover, var(--theme-surface-hover))
+        );
+      }
 
-    &::placeholder {
-      color: var(--input-copy-input-placeholder-color, #999);
-    }
+      &:focus-visible {
+        outline: var(--form-element-outline-width-focus, 0.2rem) solid
+          var(--input-copy-focus-ring, var(--theme-border-focus));
+        outline-offset: var(--form-element-outline-offset-focus, 0.2rem);
+      }
 
-    &:focus {
-      outline: 2px solid var(--_input-border-radius);
-      outline-offset: 2px;
-    }
-  }
+      &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
 
-  .input-copy__button {
-    display: flex;
-    align-items: center;
-    gap: var(--input-copy-button-gap, 0.6rem);
-    padding: var(--input-copy-button-padding, 0.8rem 1.2rem);
-
-    background-color: var(--input-copy-button-bg, var(--input-button-primary-surface, var(--theme-surface)));
-    color: var(--_button-text-color);
-    border: none;
-    border-radius: var(--input-copy-button-border-radius, 0.4rem);
-    font-size: var(--_input-font-size);
-    font-weight: 500;
-    cursor: pointer;
-    white-space: nowrap;
-    transition: background-color 0.2s ease;
-
-    &:hover:not(:disabled) {
-      background-color: var(--_button-bg-hover);
-    }
+      &[aria-disabled="true"] {
+        cursor: default;
+      }
 
-    &:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
+      .input-copy__icon {
+        width: 1.2em;
+        height: 1.2em;
+        flex-shrink: 0;
+      }
 
-    .input-copy__icon {
-      width: 1.2em;
-      height: 1.2em;
-      flex-shrink: 0;
+      .button-text {
+        font-size: inherit;
+        text-transform: none;
+      }
     }
 
-    .input-copy__button-text {
-      display: none;
-
-      @media (min-width: 480px) {
-        display: inline;
+    @container input-copy (width < 48rem) {
+      .input-copy__button.input-button .button-text {
+        display: none;
       }
     }
-  }
 
-  .input-copy__description {
-    margin: var(--input-copy-description-margin, 0.6rem 0 0 0);
-    font-size: var(--input-copy-description-font-size, 0.85rem);
-    color: var(--input-copy-description-color, #666);
+    .input-copy__description {
+      margin: var(--input-copy-description-margin, 0);
+      font-size: var(--input-copy-description-font-size, var(--step-4));
+      color: var(--input-copy-description-color, var(--theme-text));
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      overflow-wrap: anywhere;
+      -webkit-line-clamp: var(--input-copy-description-line-clamp, none);
+      line-clamp: var(--input-copy-description-line-clamp, none);
+    }
   }
 }
 </style>