srcdev-nuxt-components 9.6.4 → 9.6.6

package/app/components/02.molecules/toast/stories/DisplayToast.stories.ts

@@ -1,12 +1,56 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { ref, onMounted } from "vue";
+import { ref, computed, watchEffect, onMounted, onUnmounted } from "vue";
 import StorybookComponent from "../DisplayToast.vue";
 
+type CanvasKey = "none" | "gradient" | "lake" | "portrait" | "dark-photo" | "stripes" | "page-text";
+
+const busyBackdrop = [
+  "repeating-linear-gradient(45deg, oklch(100% 0 0 / 0.18) 0 1.2rem, transparent 1.2rem 2.4rem)",
+  "linear-gradient(120deg, oklch(70% 0.2 30), oklch(75% 0.18 90) 35%, oklch(65% 0.2 200) 70%, oklch(55% 0.22 300))",
+].join(", ");
+
+const canvases: Record<CanvasKey, string> = {
+  none: "",
+  gradient: "background: linear-gradient(135deg, oklch(40% 0.15 250), oklch(25% 0.1 300));",
+  lake: "background: url('/images/banners/video/lake-banner.jpg') center / cover;",
+  portrait: "background: url('/images/page/hero/hero-blonde.jpg') center 30% / cover;",
+  "dark-photo": "background: url('/images/page/hero/hero-dark.jpg') center / cover;",
+  stripes: `background: ${busyBackdrop};`,
+  "page-text": "background: white;",
+};
+
+const pageText = Array.from(
+  { length: 6 },
+  () =>
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. " +
+    "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. " +
+    "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
+);
+
+/*
+ * The toast teleports to <body>, so a fill override on a story wrapper never reaches it. Inject a
+ * rule on .display-toast instead: --theme-surface-subtle then resolves against the toast's data-theme.
+ */
+function useMaskedFillStyle(fill: () => number) {
+  const styleEl = document.createElement("style");
+  document.head.appendChild(styleEl);
+  watchEffect(() => {
+    styleEl.textContent =
+      fill() === 80
+        ? ""
+        : `.display-toast { --alert-masked-content-background: color-mix(in oklab, var(--theme-surface-subtle) ${fill()}%, transparent); }`;
+  });
+  onUnmounted(() => styleEl.remove());
+}
+
 interface ToastStoryArgs {
   theme: "info" | "success" | "warning" | "error";
   position: "top" | "bottom";
   alignment: "left" | "center" | "right";
   fullWidth: boolean;
+  masked: boolean;
+  maskedFill: number;
+  canvas: CanvasKey;
   autoDismiss: boolean;
   duration: number;
   revealDuration: number;
@@ -42,6 +86,24 @@ export default {
       description: "Whether toast spans full width",
       table: { category: "Appearance" },
     },
+    masked: {
+      control: { type: "boolean" },
+      description: "Render with AlertMaskedContent (SVG border, translucent fill) instead of AlertContent",
+      table: { category: "Appearance" },
+    },
+    maskedFill: {
+      control: { type: "range", min: 0, max: 100, step: 5 },
+      description:
+        "Story-only: opacity (%) of the masked fill, set via --alert-masked-content-background. 80 is the library default; lower values cost contrast",
+      if: { arg: "masked" },
+      table: { category: "Story canvas" },
+    },
+    canvas: {
+      control: { type: "select" },
+      options: ["none", "gradient", "lake", "portrait", "dark-photo", "stripes", "page-text"],
+      description: "Story-only: full-viewport backdrop behind the toast, to show what the masked variant lets through",
+      table: { category: "Story canvas" },
+    },
     autoDismiss: {
       control: { type: "boolean" },
       description: "Auto dismiss toast after duration",
@@ -80,6 +142,9 @@ export default {
     position: "top",
     alignment: "right",
     fullWidth: false,
+    masked: false,
+    maskedFill: 80,
+    canvas: "none",
     autoDismiss: false,
     duration: 3000,
     revealDuration: 300,
@@ -104,9 +169,21 @@ const Template: StoryFn<ToastStoryArgs> = (args) => ({
       }, 500);
     });
 
-    return { args, isActive };
+    useMaskedFillStyle(() => args.maskedFill);
+    const canvasStyle = computed(() => canvases[args.canvas]);
+
+    return { args, isActive, canvasStyle, pageText };
   },
   template: `
+    <div
+      v-if="args.canvas !== 'none'"
+      :style="canvasStyle + ' position: fixed; inset: 0; overflow: hidden; padding: 6rem 2rem 2rem; font-family: sans-serif; font-size: 1.6rem; line-height: 1.5; color: #222;'"
+    >
+      <template v-if="args.canvas === 'page-text'">
+        <h2 style="margin: 0 0 1rem;">Article heading behind the toast</h2>
+        <p v-for="(para, i) in pageText" :key="i" style="margin: 0 0 1rem;">{{ para }}</p>
+      </template>
+    </div>
     <div style="position: relative; height: 200px; padding: 20px;">
       <button
         @click="isActive = true"
@@ -123,6 +200,7 @@ const Template: StoryFn<ToastStoryArgs> = (args) => ({
             position: args.position,
             alignment: args.alignment,
             fullWidth: args.fullWidth,
+            masked: args.masked,
           },
           behavior: {
             autoDismiss: args.autoDismiss,
@@ -220,3 +298,123 @@ StressTest.parameters = {
     },
   },
 };
+
+export const MaskedOverGradient = Template.bind({});
+MaskedOverGradient.storyName = "Masked: Over Gradient";
+MaskedOverGradient.args = {
+  masked: true,
+  canvas: "gradient",
+  title: "Masked toast",
+  description: "AlertMaskedContent: the accent border is an SVG cut-out and the fill is 80% translucent.",
+};
+MaskedOverGradient.parameters = {
+  docs: {
+    description: {
+      story:
+        "`appearance.masked: true` swaps AlertContent for AlertMaskedContent. Over a flat gradient the effect is subtle: " +
+        "switch `canvas` to a photo or the stripes to see the backdrop through the fill.",
+    },
+  },
+};
+
+export const MaskedOverPhoto = Template.bind({});
+MaskedOverPhoto.storyName = "Masked: Over Photo";
+MaskedOverPhoto.args = {
+  theme: "success",
+  masked: true,
+  canvas: "portrait",
+  title: "Booking confirmed",
+  description: "We've sent the details to your inbox.",
+  customIcon: "akar-icons:check-box",
+};
+MaskedOverPhoto.parameters = {
+  docs: {
+    description: {
+      story:
+        "A photo backdrop is where the masked variant earns its place: the image stays visible through the body and around the border. " +
+        "Try `lake` and `dark-photo` too, and every theme.",
+    },
+  },
+};
+
+export const MaskedVsOpaque: StoryFn<ToastStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const isActive = ref(false);
+    onMounted(() => {
+      setTimeout(() => {
+        isActive.value = true;
+      }, 500);
+    });
+    useMaskedFillStyle(() => args.maskedFill);
+    const canvasStyle = computed(() => canvases[args.canvas]);
+    const config = (masked: boolean, alignment: "left" | "right") => ({
+      appearance: { theme: args.theme, position: args.position, alignment, masked },
+      behavior: { autoDismiss: false, revealDuration: args.revealDuration },
+      content: { title: masked ? "AlertMaskedContent" : "AlertContent", description: args.description },
+    });
+    return { args, isActive, canvasStyle, config };
+  },
+  template: `
+    <div :style="canvasStyle + ' position: fixed; inset: 0;'"></div>
+    <div style="position: relative; padding: 20px;">
+      <button
+        @click="isActive = true"
+        style="padding: 8px 16px; background: #0066cc; color: white; border: none; border-radius: 4px; cursor: pointer;"
+      >
+        Trigger Toasts
+      </button>
+    </div>
+    <StorybookComponent v-model="isActive" :config="config(false, 'left')" />
+    <StorybookComponent v-model="isActive" :config="config(true, 'right')" />
+  `,
+});
+MaskedVsOpaque.storyName = "Masked: Side by Side with Opaque";
+MaskedVsOpaque.args = {
+  masked: true,
+  canvas: "lake",
+  description: "Same theme, same backdrop: opaque on the left, masked on the right.",
+};
+MaskedVsOpaque.argTypes = {
+  masked: { table: { disable: true } },
+  alignment: { table: { disable: true } },
+  fullWidth: { table: { disable: true } },
+  title: { table: { disable: true } },
+  customIcon: { table: { disable: true } },
+  autoDismiss: { table: { disable: true } },
+  duration: { table: { disable: true } },
+};
+MaskedVsOpaque.parameters = {
+  docs: {
+    description: {
+      story:
+        "Two toasts over one backdrop: AlertContent (left) and AlertMaskedContent (right). Change `canvas` and `theme` to compare, " +
+        "and drag `maskedFill` to see how much backdrop the masked one lets through.",
+    },
+  },
+};
+
+export const MaskedLowContrast = Template.bind({});
+MaskedLowContrast.storyName = "Masked: Low Contrast Risk";
+MaskedLowContrast.args = {
+  theme: "info",
+  masked: true,
+  maskedFill: 35,
+  canvas: "page-text",
+  alignment: "center",
+  title: "Hard to read",
+  description: "Page text shows through a 35% fill and fights with the toast's own text.",
+};
+MaskedLowContrast.parameters = {
+  docs: {
+    description: {
+      story:
+        "What can go wrong. The default 80% fill keeps `--theme-text` readable over most backdrops, but contrast depends on what's behind the toast, " +
+        "which you don't control once it's fixed to the viewport. Here the fill is lowered to 35% over body copy, so letterforms from the page " +
+        "show through and compete with the message. Other traps to try: `stripes` or `portrait` with a low fill (busy detail behind small text), " +
+        "and the `info` theme over `gradient` (the 1px accent border nearly vanishes against a backdrop of a similar hue). " +
+        "Drag `maskedFill` back up to 80 to see the default recover. If you lower `--alert-masked-content-background`, test it over your real imagery and content, " +
+        "and prefer the opaque variant for error and warning toasts that must be read.",
+    },
+  },
+};

package/app/components/02.molecules/toast/tests/DisplayToast.spec.ts

@@ -198,21 +198,35 @@ describe("DisplayToast", () => {
 
   // ─── Dismiss via Escape key ────────────────────────────────────────────────
 
-  it("transitions to hide class when Escape is pressed", async () => {
+  it("transitions to hide class when Escape is pressed on the toast", async () => {
     await mountAndShow({ config: { behavior: { autoDismiss: false } } });
-    vi.advanceTimersByTime(100); // fire the focus setTimeout
-    await nextTick();
+    vi.advanceTimersByTime(1);
     toast()!.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
     await nextTick();
     expect(toast()!.getAttribute("data-state")).toBe("hide");
   });
 
+  it("dismisses on Escape pressed anywhere in the document, since it never takes focus", async () => {
+    await mountAndShow({ config: { behavior: { autoDismiss: false } } });
+    document.body.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    await nextTick();
+    expect(toast()!.getAttribute("data-state")).toBe("hide");
+  });
+
+  it("ignores an Escape another handler has already claimed", async () => {
+    await mountAndShow({ config: { behavior: { autoDismiss: false } } });
+    const event = new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true });
+    event.preventDefault();
+    document.body.dispatchEvent(event);
+    await nextTick();
+    expect(toast()!.getAttribute("data-state")).toBe("show");
+  });
+
   // ─── Dismiss via close button ─────────────────────────────────────────────
 
   it("transitions to hide class when the close button is clicked", async () => {
     await mountAndShow({ config: { behavior: { autoDismiss: false } } });
-    vi.advanceTimersByTime(100);
-    await nextTick();
+    vi.advanceTimersByTime(1);
     (document.querySelector("[data-test-id='alert-dismiss']") as HTMLElement).click();
     await nextTick();
     expect(toast()!.getAttribute("data-state")).toBe("hide");
@@ -282,22 +296,29 @@ describe("DisplayToast", () => {
     expect(toast()!.getAttribute("data-state")).toBe("hide");
   });
 
-  it("does not pause when the toast takes focus after mouse input", async () => {
+  it("does not move focus to itself when shown", async () => {
+    await mountAndShow({ config: autoConfig });
+    vi.advanceTimersByTime(500);
+    await nextTick();
+    expect(document.activeElement).not.toBe(toast());
+    expect(toast()!.hasAttribute("data-paused")).toBe(false);
+  });
+
+  it("does not pause when focused after mouse input", async () => {
     setFocusVisible(false);
     await mountAndShow({ config: autoConfig });
-    vi.advanceTimersByTime(100); // the toast focuses itself
+    (toast() as HTMLElement).focus();
     await nextTick();
-    expect(document.activeElement).toBe(toast());
     expect(toast()!.hasAttribute("data-paused")).toBe(false);
-    vi.advanceTimersByTime(900);
+    vi.advanceTimersByTime(1000);
     await nextTick();
     expect(toast()!.getAttribute("data-state")).toBe("hide");
   });
 
-  it("pauses when the toast takes focus after keyboard input, until focus leaves", async () => {
+  it("pauses when a keyboard user focuses the toast, until focus leaves", async () => {
     setFocusVisible(true);
     await mountAndShow({ config: autoConfig });
-    vi.advanceTimersByTime(100);
+    (toast() as HTMLElement).focus();
     await nextTick();
     expect(toast()!.hasAttribute("data-paused")).toBe(true);
     vi.advanceTimersByTime(5000);
@@ -305,7 +326,7 @@ describe("DisplayToast", () => {
     expect(toast()!.getAttribute("data-state")).toBe("show");
     (toast() as HTMLElement).blur();
     await nextTick();
-    vi.advanceTimersByTime(900);
+    vi.advanceTimersByTime(1000);
     await nextTick();
     expect(toast()!.getAttribute("data-state")).toBe("hide");
   });

package/app/components/02.molecules/toast/tests/DisplayToastProvider.spec.ts

@@ -208,6 +208,26 @@ describe("DisplayToastProvider", () => {
     expect(items().length).toBe(0);
   });
 
+  it("does not move focus to a toast when it appears", async () => {
+    await mountProvider(DisplayToastProvider);
+    show({ behavior: { autoDismiss: false } });
+    await nextTick();
+    await nextTick();
+    expect(document.activeElement).not.toBe(item());
+  });
+
+  it("dismisses only the newest toast when Escape is pressed outside the toasts", async () => {
+    await mountProvider(DisplayToastProvider, { props: { maxVisible: 2 } });
+    show({ content: { text: "First" }, behavior: { autoDismiss: false } });
+    show({ content: { text: "Second" }, behavior: { autoDismiss: false } });
+    await nextTick();
+    expect(items().length).toBe(2);
+    document.body.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    await nextTick();
+    expect(items().length).toBe(1);
+    expect(item()!.textContent).toContain("First");
+  });
+
   // ─── Auto-dismiss timer ───────────────────────────────────────────────────
 
   it("auto-dismisses after duration", async () => {

package/app/components/03.organisms/services/service-detail/tests/__snapshots__/ServiceDetail.spec.ts.snap

@@ -37,22 +37,22 @@ exports[`ServiceDetail > renders correct HTML structure 1`] = `
         <h2 class="hero-text mb-20 subheading axis-horizontal">
           <!--v-if--><span class="text-block-0 normal">The Process</span>
         </h2>
-        <ol class="stepper-list has-connectors service-detail__process">
-          <li class="indicator-top indicator-circle" style="--_connector-top: 0px; --_connector-height: 0px;">
+        <ol role="list" class="stepper-list has-connectors service-detail__process">
+          <li class="stepper-list-item indicator-top indicator-circle" style="--_connector-left: 0px; --_connector-top: 0px; --_connector-height: 0px;">
             <div class="stepper-list__indicator-counter"></div>
-            <div>
+            <div class="stepper-list-content">
               <p class="page-body-normal">Consultation</p>
             </div>
           </li>
-          <li class="indicator-top indicator-circle" style="--_connector-top: 0px; --_connector-height: 0px;">
+          <li class="stepper-list-item indicator-top indicator-circle" style="--_connector-left: 0px; --_connector-top: 0px; --_connector-height: 0px;">
             <div class="stepper-list__indicator-counter"></div>
-            <div>
+            <div class="stepper-list-content">
               <p class="page-body-normal">Sectioning</p>
             </div>
           </li>
-          <li class="indicator-top indicator-circle">
+          <li class="stepper-list-item indicator-top indicator-circle">
             <div class="stepper-list__indicator-counter"></div>
-            <div>
+            <div class="stepper-list-content">
               <p class="page-body-normal">Painting</p>
             </div>
           </li>

package/app/types/components/index.ts

@@ -26,3 +26,4 @@ export * from "./samaritan-prompt.d"
 export * from "./profile-section.d"
 export * from "./services-card.d"
 export * from "./google-reviews.d"
+export * from "./progress-tracker.d"

package/app/types/components/progress-tracker.d.ts

@@ -0,0 +1,6 @@
+export interface ProgressTrackerStep {
+  title: string;
+  body?: string;
+}
+
+export type ProgressTrackerStepState = "done" | "current" | "upcoming";

package/app/types/components/social-icons-list.d.ts

@@ -1,3 +1,5 @@
+import type { VNode } from "vue";
+
 export interface ISocialIcon {
   networkName: string;
   iconName: string;
@@ -5,4 +7,11 @@ export interface ISocialIcon {
   profileId: string;
   /** Accessible name for the link; overrides the list's linkLabelTemplate. */
   label?: string;
+  /** Brand colour, exposed as --social-icons-list-brand-colour on this item for recipes to use. */
+  brandColour?: string;
+}
+
+export interface SocialIconsListSlots {
+  icon?(props: { item: ISocialIcon }): VNode[];
+  label?(props: { item: ISocialIcon }): VNode[];
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.6.4",
+  "version": "9.6.6",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",