srcdev-nuxt-components 9.6.3 → 9.6.5

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { computed } from "vue";
 import StorybookComponent from "../CookieConsentBanner.vue";
 
 export default {
@@ -21,6 +22,16 @@ export default {
       description: "Render the icon column",
       table: { category: "Appearance" },
     },
+    acceptLabel: {
+      control: "text",
+      description: "Accept button text",
+      table: { category: "Content" },
+    },
+    rejectLabel: {
+      control: "text",
+      description: "Reject button text",
+      table: { category: "Content" },
+    },
     ariaLabel: {
       control: "text",
       description: "Accessible name for the banner region",
@@ -35,6 +46,8 @@ export default {
   args: {
     theme: "info",
     ariaLabel: "Cookie consent",
+    acceptLabel: "Accept",
+    rejectLabel: "Reject",
     icon: "material-symbols:cookie-outline",
     showIcon: true,
     styleClassPassthrough: [],
@@ -49,7 +62,10 @@ export default {
         // reloads. Each story below has "Show banner again" (resets state
         // in-place) and "Delete cookie" (clears document.cookie directly, for
         // verifying the cookie itself is actually gone, e.g. in devtools).
-        component: "Reads/writes a real 'privacy-notice-consent' cookie via useCookieConsent(). Use the story's reset controls to bring the banner back.",
+        component:
+          "Fixed, non-modal cookie consent banner built on AlertContent, with Accept/Reject InputButtons wired to useCookieConsent(). " +
+          "Copy comes from the title and message slots and the acceptLabel, rejectLabel and ariaLabel props; theme, icon and showIcon set the look. " +
+          "It reads/writes a real 'privacy-notice-consent' cookie, so use the story's reset controls to bring the banner back.",
       },
     },
   },
@@ -84,7 +100,7 @@ const Template: StoryFn<typeof StorybookComponent> = (args) => ({
     <div style="padding: 2rem; min-height: 240px; position: relative;">
       <button type="button" @click="showAgain">Show banner again</button>
       <button type="button" @click="deleteCookie" style="margin-inline-start: 0.8rem;">Delete cookie</button>
-      <StorybookComponent :theme="args.theme" :icon="args.icon" :show-icon="args.showIcon" :aria-label="args.ariaLabel" :style-class-passthrough="args.styleClassPassthrough">
+      <StorybookComponent :theme="args.theme" :icon="args.icon" :show-icon="args.showIcon" :aria-label="args.ariaLabel" :accept-label="args.acceptLabel" :reject-label="args.rejectLabel" :style-class-passthrough="args.styleClassPassthrough">
         <template #message>This site uses cookies for analytics. You can accept or reject them.</template>
       </StorybookComponent>
     </div>
@@ -103,12 +119,97 @@ export const CustomCopy: StoryFn<typeof StorybookComponent> = (args) => ({
     <div style="padding: 2rem; min-height: 240px; position: relative;">
       <button type="button" @click="showAgain">Show banner again</button>
       <button type="button" @click="deleteCookie" style="margin-inline-start: 0.8rem;">Delete cookie</button>
-      <StorybookComponent :theme="args.theme" :icon="args.icon" :show-icon="args.showIcon" :aria-label="args.ariaLabel">
+      <StorybookComponent :theme="args.theme" :icon="args.icon" :show-icon="args.showIcon" :aria-label="args.ariaLabel" :accept-label="args.acceptLabel" :reject-label="args.rejectLabel">
         <template #title>Your privacy</template>
         <template #message>We use cookies to understand traffic to this site. No personal data is sold.</template>
-        <template #acceptLabel>Allow cookies</template>
-        <template #rejectLabel>No thanks</template>
       </StorybookComponent>
     </div>
   `,
 });
+CustomCopy.args = { acceptLabel: "Allow cookies", rejectLabel: "No thanks" };
+
+const stressCases = {
+  german: {
+    title: "Datenschutzeinstellungen",
+    message:
+      "Diese Website verwendet Cookies, um zu verstehen, wie sie genutzt wird, und um Ihnen ein besseres Erlebnis zu bieten. Weitere Informationen finden Sie in unserer Datenschutzerklärung.",
+    acceptLabel: "Alle Cookies akzeptieren und fortfahren",
+    rejectLabel: "Alle nicht notwendigen Cookies ablehnen",
+    dir: "ltr",
+  },
+  unbroken: {
+    title: "Datenschutzgrundverordnungskonformitätsbestätigungseinstellungen",
+    message: "https://example.com/a-very-long-path-segment-without-any-spaces-at-all-in-it/privacy-and-cookie-policy",
+    acceptLabel: "Cookieeinwilligungsbestätigung",
+    rejectLabel: "Cookieeinwilligungsablehnung",
+    dir: "ltr",
+  },
+  emojiHtml: {
+    title: "🍪 <strong>Cookies</strong>",
+    message: "<script>alert('xss')</script> We use cookies 🍪🍪🍪 & <em>similar</em> technologies.",
+    acceptLabel: "✅ <b>Yes</b>",
+    rejectLabel: "❌ <i>No</i>",
+    dir: "ltr",
+  },
+  rtl: {
+    title: "ملفات تعريف الارتباط",
+    message: "يستخدم هذا الموقع ملفات تعريف الارتباط لفهم كيفية استخدامه. يمكنك قبولها أو رفضها.",
+    acceptLabel: "قبول",
+    rejectLabel: "رفض",
+    dir: "rtl",
+  },
+  minimal: {
+    title: "",
+    message: "C",
+    acceptLabel: "✓",
+    rejectLabel: "✗",
+    dir: "ltr",
+  },
+} as const;
+
+type StressCase = keyof typeof stressCases;
+
+export const StressTest: StoryFn<typeof StorybookComponent> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const { showAgain, deleteCookie } = useResetConsent();
+    const copy = computed(() => stressCases[(args as { stressCase?: StressCase }).stressCase ?? "german"]);
+    return { args, copy, showAgain, deleteCookie };
+  },
+  template: `
+    <div style="padding: 2rem; min-height: 320px; position: relative;">
+      <button type="button" @click="showAgain">Show banner again</button>
+      <button type="button" @click="deleteCookie" style="margin-inline-start: 0.8rem;">Delete cookie</button>
+      <StorybookComponent :theme="args.theme" :icon="args.icon" :show-icon="args.showIcon" :aria-label="args.ariaLabel" :accept-label="copy.acceptLabel" :reject-label="copy.rejectLabel" :style-class-passthrough="args.styleClassPassthrough">
+        <template #title><span :dir="copy.dir">{{ copy.title }}</span></template>
+        <template #message><span :dir="copy.dir">{{ copy.message }}</span></template>
+      </StorybookComponent>
+    </div>
+  `,
+});
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+StressTest.argTypes = {
+  stressCase: {
+    name: "Stress case",
+    control: { type: "select" },
+    options: Object.keys(stressCases),
+    description:
+      "**Story control, not a prop.** Picks which worst-case copy fills the title and message slots and the acceptLabel/rejectLabel props (overriding their controls).",
+    table: { category: "Story only" },
+  },
+} as Meta<typeof StorybookComponent>["argTypes"];
+StressTest.args = { stressCase: "german" } as typeof StressTest.args;
+StressTest.parameters = {
+  docs: {
+    story: { inline: false, height: "480px" },
+    description: {
+      story:
+        "Hostile slot content, switched with the Stress case control: long German copy and button labels, an unbroken compound title " +
+        "with a long URL as the message and unbroken button labels, emoji and HTML-like text (must render as text, never as markup), " +
+        "right-to-left Arabic, and a minimal case with an empty title and one-character copy. The banner is fixed to the viewport, so " +
+        "use Storybook's viewport toolbar (not a canvas width) to check narrow screens. Check that the banner stays inside the gutter " +
+        "and caps at 64rem, unbroken text wraps instead of being clipped (including inside the buttons), and the buttons wrap onto " +
+        "their own lines rather than overflowing.",
+    },
+  },
+};

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.