srcdev-nuxt-components 9.4.11 → 9.5.0

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

@@ -0,0 +1,149 @@
+<template>
+  <Teleport to="body">
+    <div
+      class="cookie-consent-banner"
+      :class="[{ closed: isClosed }, elementClasses]"
+      :data-theme="resolved.theme"
+      data-test-id="cookie-consent-banner"
+    >
+      <div class="cookie-consent-banner-inner" role="region" :aria-label="ariaLabel">
+        <AlertContent :theme="resolved.theme" :custom-icon="icon" :show-icon="showIcon">
+          <template #title>
+            <slot name="title">Cookies</slot>
+          </template>
+          <template #content>
+            <slot name="message">This site uses cookies to understand how it's used. You can accept or reject them.</slot>
+          </template>
+          <template #actions>
+            <button
+              type="button"
+              class="cookie-consent-banner-reject"
+              data-test-id="cookie-consent-banner-reject"
+              @click="rejectAll()"
+            >
+              <slot name="rejectLabel">Reject</slot>
+            </button>
+            <button
+              type="button"
+              class="cookie-consent-banner-accept"
+              data-test-id="cookie-consent-banner-accept"
+              @click="acceptAll()"
+            >
+              <slot name="acceptLabel">Accept</slot>
+            </button>
+          </template>
+        </AlertContent>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import type { CookieConsentBannerProps } from "../../../types/components";
+
+const props = withDefaults(defineProps<CookieConsentBannerProps>(), {
+  theme: undefined,
+  ariaLabel: "Cookie consent",
+  icon: "material-symbols:cookie-outline",
+  showIcon: true,
+  styleClassPassthrough: () => [],
+});
+
+const appConfig = useAppConfig();
+
+const resolved = computed(() => {
+  const config = appConfig.srcdev?.cookieConsentBanner;
+  return {
+    theme: props.theme ?? config?.theme ?? "info",
+  } as const;
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough)
+);
+
+const { status, acceptAll, rejectAll } = useCookieConsent();
+const isClosed = computed(() => status.value !== "unset");
+</script>
+
+<style lang="css">
+@layer components {
+  .cookie-consent-banner {
+    --_gutter: var(--cookie-consent-banner-gutter, 1.6rem);
+    --_transition-duration: var(--cookie-consent-banner-transition-duration, 200ms);
+    --_accent: var(--cookie-consent-banner-accent, var(--theme-accent));
+
+    position: fixed;
+    inset-inline: var(--_gutter);
+    inset-block-end: var(--_gutter);
+    z-index: var(--cookie-consent-banner-z-index, 999999);
+    margin-inline: auto;
+    max-width: var(--cookie-consent-banner-max-width, 64rem);
+
+    display: grid;
+    grid-template-rows: 1fr;
+    opacity: 1;
+    transition:
+      grid-template-rows var(--_transition-duration) ease-in-out,
+      opacity var(--_transition-duration) ease-in-out,
+      visibility var(--_transition-duration);
+
+    &.closed {
+      grid-template-rows: 0fr;
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
+    .cookie-consent-banner-inner {
+      min-height: 0;
+      overflow: hidden;
+    }
+
+    .cookie-consent-banner-reject,
+    .cookie-consent-banner-accept {
+      padding: var(--cookie-consent-banner-button-padding, 0.8rem 1.6rem);
+      border-radius: var(--cookie-consent-banner-button-border-radius, 0.4rem);
+      border: 0.1rem solid transparent;
+      font: inherit;
+      cursor: pointer;
+      transition:
+        border-color var(--_transition-duration),
+        background-color var(--_transition-duration);
+
+      &:focus-visible {
+        outline: 0.2rem solid var(--cookie-consent-banner-focus-ring, var(--theme-border-focus));
+        outline-offset: 0.2rem;
+      }
+    }
+
+    .cookie-consent-banner-reject {
+      background-color: transparent;
+      color: inherit;
+      border-color: var(--cookie-consent-banner-reject-border-colour, var(--theme-border));
+
+      &:hover,
+      &:focus-visible {
+        border-color: var(--cookie-consent-banner-reject-border-colour-hover, var(--_accent));
+      }
+    }
+
+    .cookie-consent-banner-accept {
+      background-color: var(--cookie-consent-banner-accept-background, var(--_accent));
+      color: var(--cookie-consent-banner-accept-text-colour, var(--theme-on-surface));
+
+      &:hover,
+      &:focus-visible {
+        opacity: 0.9;
+      }
+    }
+  }
+}
+</style>

package/app/components/{01.atoms → 02.molecules}/cookie-consent-banner/stories/CookieConsentBanner.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import StorybookComponent from "../CookieConsentBanner.vue";
 
 export default {
-  title: "Atoms/CookieConsentBanner",
+  title: "Molecules/CookieConsentBanner",
   component: StorybookComponent,
   argTypes: {
     theme: {
@@ -11,6 +11,21 @@ export default {
       description: "Semantic theme for the banner's accent border/accept button",
       table: { category: "Appearance" },
     },
+    icon: {
+      control: "text",
+      description: "Iconify name for the alert icon",
+      table: { category: "Appearance" },
+    },
+    showIcon: {
+      control: "boolean",
+      description: "Render the icon column",
+      table: { category: "Appearance" },
+    },
+    ariaLabel: {
+      control: "text",
+      description: "Accessible name for the banner region",
+      table: { category: "Accessibility" },
+    },
     styleClassPassthrough: {
       control: { type: "object" },
       description: "Extra classes applied to the banner root",
@@ -19,6 +34,9 @@ export default {
   },
   args: {
     theme: "info",
+    ariaLabel: "Cookie consent",
+    icon: "material-symbols:cookie-outline",
+    showIcon: true,
     styleClassPassthrough: [],
   },
   parameters: {
@@ -64,7 +82,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" :style-class-passthrough="args.styleClassPassthrough">
+      <StorybookComponent :theme="args.theme" :icon="args.icon" :show-icon="args.showIcon" :aria-label="args.ariaLabel" :style-class-passthrough="args.styleClassPassthrough">
         <template #message>This site uses cookies for analytics. You can accept or reject them.</template>
       </StorybookComponent>
     </div>
@@ -83,7 +101,8 @@ 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">
+      <StorybookComponent :theme="args.theme" :icon="args.icon" :show-icon="args.showIcon" :aria-label="args.ariaLabel">
+        <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>

package/app/components/{01.atoms → 02.molecules}/cookie-consent-banner/tests/CookieConsentBanner.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { ref } from "vue";
+import { nextTick, ref } from "vue";
 import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
 import CookieConsentBanner from "../CookieConsentBanner.vue";
 
@@ -23,15 +23,15 @@ mockNuxtImport("useCookieConsent", () => () => ({
 }));
 
 function banner() {
-  return document.querySelector(".privacy-notice-banner");
+  return document.querySelector(".cookie-consent-banner");
 }
 
 function acceptButton() {
-  return document.querySelector("[data-test-id='privacy-notice-banner-accept']") as HTMLElement;
+  return document.querySelector("[data-test-id='cookie-consent-banner-accept']") as HTMLElement;
 }
 
 function rejectButton() {
-  return document.querySelector("[data-test-id='privacy-notice-banner-reject']") as HTMLElement;
+  return document.querySelector("[data-test-id='cookie-consent-banner-reject']") as HTMLElement;
 }
 
 describe("CookieConsentBanner", () => {
@@ -39,6 +39,7 @@ describe("CookieConsentBanner", () => {
     statusRef.value = "unset";
     acceptAllSpy.mockClear();
     rejectAllSpy.mockClear();
+    useAppConfigMock.mockReturnValue({ srcdev: undefined, icon: {} });
   });
 
   afterEach(() => {
@@ -115,4 +116,80 @@ describe("CookieConsentBanner", () => {
     await mountSuspended(CookieConsentBanner, { props: { styleClassPassthrough: "outlined" } });
     expect(banner()!.classList).toContain("outlined");
   });
+
+  it("names the region with the default aria-label", async () => {
+    await mountSuspended(CookieConsentBanner);
+    const region = document.querySelector(".cookie-consent-banner-inner")!;
+    expect(region.getAttribute("role")).toBe("region");
+    expect(region.getAttribute("aria-label")).toBe("Cookie consent");
+  });
+
+  it("applies a custom ariaLabel", async () => {
+    await mountSuspended(CookieConsentBanner, { props: { ariaLabel: "Consentement aux cookies" } });
+    expect(document.querySelector(".cookie-consent-banner-inner")!.getAttribute("aria-label")).toBe(
+      "Consentement aux cookies"
+    );
+  });
+
+  it("closes after a choice is made", async () => {
+    await mountSuspended(CookieConsentBanner);
+    rejectButton().click();
+    await nextTick();
+    expect(banner()!.classList).toContain("closed");
+  });
+
+  it("reopens if consent is reset to 'unset'", async () => {
+    statusRef.value = "denied";
+    await mountSuspended(CookieConsentBanner);
+    statusRef.value = "unset";
+    await nextTick();
+    expect(banner()!.classList).not.toContain("closed");
+  });
+
+  it("updates classes when styleClassPassthrough changes", async () => {
+    const w = await mountSuspended(CookieConsentBanner, { props: { styleClassPassthrough: ["one"] } });
+    await w.setProps({ styleClassPassthrough: ["two"] });
+    expect(banner()!.classList).toContain("two");
+    expect(banner()!.classList).not.toContain("one");
+  });
+
+  // ─── Built on AlertContent (2026-09-27) ───────────────────────────────────
+
+  it("renders inside AlertContent with the resolved theme", async () => {
+    await mountSuspended(CookieConsentBanner, { props: { theme: "success" } });
+    const alert = document.querySelector(".cookie-consent-banner-inner .alert-content");
+    expect(alert).not.toBeNull();
+    expect(alert!.getAttribute("data-theme")).toBe("success");
+  });
+
+  it("renders the default 'Cookies' title and the message in the alert body", async () => {
+    await mountSuspended(CookieConsentBanner);
+    expect(document.querySelector("[data-test-id='alert-title']")!.textContent).toContain("Cookies");
+    expect(document.querySelector("[data-test-id='alert-content']")!.textContent).toContain("cookies");
+  });
+
+  it("replaces the title via the #title slot", async () => {
+    await mountSuspended(CookieConsentBanner, { slots: { title: "Your privacy" } });
+    expect(document.querySelector("[data-test-id='alert-title']")!.textContent).toContain("Your privacy");
+  });
+
+  it("puts both buttons in the alert's actions row", async () => {
+    await mountSuspended(CookieConsentBanner);
+    const actions = document.querySelector("[data-test-id='alert-actions']")!;
+    expect(actions.contains(acceptButton())).toBe(true);
+    expect(actions.contains(rejectButton())).toBe(true);
+  });
+
+  it("shows the icon by default and hides it with showIcon=false", async () => {
+    await mountSuspended(CookieConsentBanner);
+    expect(document.querySelector("[data-test-id='alert-icon']")).not.toBeNull();
+    document.body.innerHTML = "";
+    await mountSuspended(CookieConsentBanner, { props: { showIcon: false } });
+    expect(document.querySelector("[data-test-id='alert-icon']")).toBeNull();
+  });
+
+  it("does not make the message an aria-live region", async () => {
+    await mountSuspended(CookieConsentBanner);
+    expect(document.querySelector(".alert-content-body")!.hasAttribute("aria-live")).toBe(false);
+  });
 });

package/app/components/02.molecules/display-avatar/CONSUMER-STYLING.md

@@ -0,0 +1,63 @@
+# DisplayAvatar — Consumer Styling Guide
+
+## Public token API
+
+### Size
+
+| Token | Default | Controls |
+|---|---|---|
+| `--display-avatar-size` | the size class's value | Diameter, overriding the `size` prop's scale (one instance or a whole area) |
+| `--display-avatar-font-size` | the size class's value | Initials/text size, overriding the scale |
+| `--display-avatar-size-xs` / `-s` / `-md` / `-lg` / `-xl` | `2.4rem` / `3.2rem` / `4rem` / `4.8rem` / `5.6rem` | The diameter each `size` value maps to |
+| `--display-avatar-font-size-xs` / `-s` / `-md` / `-lg` / `-xl` | `1.2rem` / `1.4rem` / `1.6rem` / `1.8rem` / `2rem` | The text size each `size` value maps to |
+
+A custom `size` string (anything other than `xs`–`xl`) is added as a class but maps to no scale
+step, so it renders at `md` unless you set `--display-avatar-size` for it.
+
+### Appearance
+
+| Token | Default | Controls |
+|---|---|---|
+| `--display-avatar-background` | `var(--theme-surface-subtle)` | Circle background (shows behind initials; hidden by an image) |
+| `--display-avatar-text-colour` | `var(--theme-text)` | Initials/text colour |
+| `--display-avatar-border-radius` | `50%` | Shape (the image follows it) |
+| `--display-avatar-icon-size` | `2.4rem` | Size of an icon given the `display-avatar-icon` class in the `#icon` slot |
+
+> **Changed 2026-09-27**: sizes and colours were hardcoded. The font sizes were written for a 16px
+> root (`0.75rem`–`1.25rem`), so on this library's `62.5%` root they rendered at 7.5–12.5px; they're
+> now `1.2rem`–`2rem` (12–20px, the intended sizes). Diameters moved from px to the same values in
+> rem. The circle had no background and light grey text (`--slate-03`), which made initials
+> faint in light mode; it now uses the `--theme-*` surface and text tokens, so it follows light
+> and dark mode.
+
+Private tokens (not public API): `--_size` and `--_font-size`, which each size class sets from its
+scale token.
+
+## State hooks
+
+- Size class on the root: `.xs`, `.s`, `.md`, `.lg`, `.xl` (or your custom `size` string).
+- Classes: `.display-avatar` (root), `.display-avatar-image` (the image), `.display-avatar-icon`
+  (opt-in, for your `#icon` slot content).
+- With `chip`, the root is `DisplayChip`, so it also carries `.display-chip` and its shape
+  class; status classes such as `.online` (through `style-class-passthrough`) are `DisplayChip`'s.
+  See `display-chip` for its tokens.
+
+> **Changed 2026-09-27**: `.avatar-image` → `.display-avatar-image` and `.avatar-icon` →
+> `.display-avatar-icon`.
+
+## 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`.
+
+**Caveat:** the size classes set `--_size`/`--_font-size` on the avatar itself, so changing the
+scale (`--display-avatar-size-md` etc.) from an ancestor works, but a one-off diameter should use
+`--display-avatar-size`, which beats the scale wherever it's set.
+
+## Class passthrough
+
+`style-class-passthrough` adds classes to the root, including when the root is `DisplayChip`. That's
+how chip status classes like `online` are applied.

package/app/components/02.molecules/display-avatar/DisplayAvatar.vue

@@ -0,0 +1,120 @@
+<template>
+  <component
+    :is="chip ? DisplayChip : as"
+    v-bind="chip ? { tag: chipTag, config: chipConfig } : {}"
+    class="display-avatar"
+    :class="[size, elementClasses]"
+  >
+    <slot name="default">
+      <NuxtImg v-if="src" :src :alt="alt ?? ''" width="100%" height="100%" class="display-avatar-image" />
+      <template v-else>
+        <span :aria-hidden="alt ? 'true' : undefined">{{ fallback }}</span>
+        <span v-if="alt" class="sr-only">{{ alt }}</span>
+      </template>
+    </slot>
+    <slot name="icon"></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import DisplayChip from "../display-chip/DisplayChip.vue";
+import type { DisplayChipConfig } from "~/types/components";
+
+interface Props {
+  as?: string | object;
+  src?: string;
+  alt?: string;
+  text?: string;
+  size?: "xs" | "s" | "md" | "lg" | "xl" | string;
+  chip?: boolean | DisplayChipConfig;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "span",
+  src: undefined,
+  alt: undefined,
+  text: undefined,
+  size: "md",
+  chip: undefined,
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough)
+);
+
+const fallback = computed(
+  () =>
+    props.text ||
+    (props.alt || "")
+      .split(" ")
+      .map((word) => word.charAt(0))
+      .join("")
+      .substring(0, 2)
+);
+
+const chipDefaultConfig: DisplayChipConfig = {
+  size: "12px",
+  maskWidth: "4px",
+  offset: "0px",
+  angle: "90deg",
+};
+
+const chipConfig = computed(() => (typeof props.chip === "object" ? props.chip : chipDefaultConfig));
+
+const chipTag = computed((): "div" | "span" => (props.as === "div" || props.as === "span" ? props.as : "span"));
+</script>
+
+<style lang="css">
+@layer components {
+  .display-avatar {
+    --_size: var(--display-avatar-size-md, 4rem);
+    --_font-size: var(--display-avatar-font-size-md, 1.6rem);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--display-avatar-size, var(--_size));
+    height: var(--display-avatar-size, var(--_size));
+    font-size: var(--display-avatar-font-size, var(--_font-size));
+    border-radius: var(--display-avatar-border-radius, 50%);
+    background-color: var(--display-avatar-background, var(--theme-surface-subtle));
+    color: var(--display-avatar-text-colour, var(--theme-text));
+
+    isolation: isolate;
+
+    &.xs {
+      --_size: var(--display-avatar-size-xs, 2.4rem);
+      --_font-size: var(--display-avatar-font-size-xs, 1.2rem);
+    }
+    &.s {
+      --_size: var(--display-avatar-size-s, 3.2rem);
+      --_font-size: var(--display-avatar-font-size-s, 1.4rem);
+    }
+    &.lg {
+      --_size: var(--display-avatar-size-lg, 4.8rem);
+      --_font-size: var(--display-avatar-font-size-lg, 1.8rem);
+    }
+    &.xl {
+      --_size: var(--display-avatar-size-xl, 5.6rem);
+      --_font-size: var(--display-avatar-font-size-xl, 2rem);
+    }
+
+    .display-avatar-image {
+      display: block;
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+      object-fit: cover;
+    }
+
+    .display-avatar-icon {
+      font-size: var(--display-avatar-icon-size, 2.4rem);
+    }
+  }
+}
+</style>

package/app/components/{01.atoms → 02.molecules}/display-avatar/stories/DisplayAvatar.stories.ts

@@ -1,8 +1,9 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { computed } from "vue";
 import StorybookComponent from "../DisplayAvatar.vue";
 
 export default {
-  title: "Atoms/DisplayAvatar",
+  title: "Molecules/DisplayAvatar",
   component: StorybookComponent,
   argTypes: {
     size: {
@@ -80,27 +81,68 @@ export default {
   },
 } as Meta<typeof StorybookComponent>;
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const useChip = (args: any) =>
+  computed(() => ({
+    size: `${args.chipSize ?? 12}px`,
+    maskWidth: `${args.chipMaskWidth ?? 4}px`,
+    offset: `${args.chipOffset ?? 2}px`,
+    angle: `${args.chipAngle ?? 45}deg`,
+  }));
+
 const Template: StoryFn<typeof StorybookComponent> = (args) => ({
   components: { StorybookComponent },
   setup() {
-    return { args };
+    return { args, chip: useChip(args) };
   },
   template: `
     <div style="display: flex; align-items: center; justify-content: center; height: 100vh;">
-    <StorybookComponent
-      :size="args.size"
-      :src="args.src"
-      :alt="args.alt"
-      :chip="{
-        size: (args.chipSize || 12) + 'px',
-        maskWidth: (args.chipMaskWidth || 4) + 'px',
-        offset: (args.chipOffset || 2) + 'px',
-        angle: (args.chipAngle || 45) + 'deg'
-      }"
-      :style-class-passthrough="args.styleClassPassthrough"
-    />
+      <StorybookComponent
+        :size="args.size"
+        :src="args.src"
+        :alt="args.alt"
+        :chip="chip"
+        :style-class-passthrough="args.styleClassPassthrough"
+      />
     </div>
   `,
 });
 
 export const Default = Template.bind({});
+
+export const Initials: StoryFn<typeof StorybookComponent> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    return { args, chip: useChip(args) };
+  },
+  template: `
+    <div style="display: flex; align-items: center; justify-content: center; gap: 1.6rem; height: 100vh;">
+      <StorybookComponent :size="args.size" :alt="args.alt" :chip="chip" :style-class-passthrough="args.styleClassPassthrough" />
+      <StorybookComponent :size="args.size" text="?" :chip="chip" :style-class-passthrough="args.styleClassPassthrough" />
+    </div>
+  `,
+});
+Initials.args = { src: undefined, alt: "Jane Smith" };
+Initials.argTypes = { src: { table: { disable: true } } };
+
+export const Sizes: StoryFn<typeof StorybookComponent> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    return { args, chip: useChip(args), sizes: ["xs", "s", "md", "lg", "xl"] };
+  },
+  template: `
+    <div style="display: flex; align-items: center; justify-content: center; gap: 1.6rem; height: 100vh;">
+      <StorybookComponent
+        v-for="size in sizes"
+        :key="size"
+        :size="size"
+        :src="args.src"
+        :alt="args.alt"
+        :chip="chip"
+        :style-class-passthrough="args.styleClassPassthrough"
+      />
+    </div>
+  `,
+});
+Sizes.args = { src: undefined, alt: "Jane Smith" };
+Sizes.argTypes = { size: { table: { disable: true } } };