srcdev-nuxt-components 9.5.6 → 9.6.0

package/app/components/02.molecules/price-list/stories/PriceList.stories.ts

@@ -1,5 +1,8 @@
+import { computed, ref } from "vue";
 import PriceList from "../PriceList.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { MediaCanvas, PriceListData } from "~/types/components";
 
 const priceListData = [
   {
@@ -26,10 +29,26 @@ const priceListData = [
   },
 ];
 
-const meta: Meta<typeof PriceList> = {
+type LineClamp = "none" | "1" | "2" | "3" | "4";
+
+// Story-only arg: drives a CSS token, not a PriceList prop. See the argTypes entry.
+type StoryArgs = InstanceType<typeof PriceList>["$props"] & {
+  descriptionLineClamp: LineClamp;
+};
+
+const meta: Meta<StoryArgs> = {
   title: "Molecules/PriceList",
   component: PriceList,
   argTypes: {
+    descriptionLineClamp: {
+      control: "select",
+      options: ["none", "1", "2", "3", "4"] satisfies LineClamp[],
+      description:
+        "**Story control, not a prop.** Sets the `--price-list-description-line-clamp` CSS token on a wrapper so you can try it here. " +
+        "To use it in an app, set the token in your own CSS, e.g. `.salon-menu { --price-list-description-line-clamp: 2; }`. " +
+        "`1` is single-line ellipsis, `none` (the default) shows everything.",
+      table: { category: "CSS tokens (story only, set in your CSS)", defaultValue: { summary: "none" } },
+    },
     priceListData: {
       control: "object",
       description: "Array of columns, each with a heading and list of items",
@@ -52,10 +71,52 @@ const meta: Meta<typeof PriceList> = {
       table: { category: "Styling" },
     },
   },
+  args: {
+    descriptionLineClamp: "none",
+  },
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+  },
 };
 
 export default meta;
-type Story = StoryObj<typeof PriceList>;
+type Story = StoryObj<StoryArgs>;
+
+function useStorySetup(args: StoryArgs) {
+  const componentArgs = computed(() => {
+    const { descriptionLineClamp: _descriptionLineClamp, ...rest } = args;
+    return rest;
+  });
+  const tokenStyles = computed(() => ({
+    "--price-list-description-line-clamp": args.descriptionLineClamp,
+  }));
+  return { componentArgs, tokenStyles };
+}
+
+const render = (args: StoryArgs) => ({
+  components: { PriceList },
+  setup() {
+    return useStorySetup(args);
+  },
+  template: `<div :style="tokenStyles"><PriceList v-bind="componentArgs" /></div>`,
+});
 
 export const Default: Story = {
   args: {
@@ -64,13 +125,7 @@ export const Default: Story = {
     fromLabel: "from",
     styleClassPassthrough: [],
   },
-  render: (args) => ({
-    components: { PriceList },
-    setup() {
-      return { args };
-    },
-    template: `<PriceList v-bind="args" />`,
-  }),
+  render,
 };
 
 export const SingleColumn: Story = {
@@ -78,13 +133,7 @@ export const SingleColumn: Story = {
   args: {
     priceListData: [priceListData[0]!],
   },
-  render: (args) => ({
-    components: { PriceList },
-    setup() {
-      return { args };
-    },
-    template: `<PriceList v-bind="args" />`,
-  }),
+  render,
 };
 
 export const EmptyState: Story = {
@@ -92,13 +141,7 @@ export const EmptyState: Story = {
   args: {
     priceListData: priceListData.map(({ headingtext, headingIcon }) => ({ headingtext, headingIcon, items: [] })),
   },
-  render: (args) => ({
-    components: { PriceList },
-    setup() {
-      return { args };
-    },
-    template: `<PriceList v-bind="args" />`,
-  }),
+  render,
 };
 
 export const NoIcons: Story = {
@@ -106,11 +149,64 @@ export const NoIcons: Story = {
   args: {
     priceListData: priceListData.map(({ headingtext, items }) => ({ headingtext, items })),
   },
-  render: (args) => ({
-    components: { PriceList },
-    setup() {
-      return { args };
+  render,
+};
+
+// ─── Stress test ──────────────────────────────────────────────────────────────
+
+const stressPriceListData: PriceListData[] = [
+  {
+    headingtext: "Haarschnitte, Pflegebehandlungen und Kopfhautmassagen für jeden Haartyp und jede Länge",
+    headingIcon: "lucide:sparkles",
+    items: [
+      { description: "Pneumonoultramicroscopicsilicovolcanoconiosisbehandlungohneleerzeichen", price: "£45" },
+      {
+        description: `${"Cut, wash, condition, blow dry and finish with a heat protectant serum. ".repeat(5)}`,
+        price: "£1,234.56 – £9,999.99 pro Sitzung inklusive Beratung",
+        from: true,
+      },
+      { description: "Price with no spaces", price: "£123456789012345678901234567890.00" },
+      { description: "From, but the price is empty", price: "", from: true },
+      { description: "", price: "£10" },
+      { description: "💇‍♀️💅🏽 Emoji first", price: "£0" },
+      { description: "<script>alert('xss')</script> rendered as text &amp; entities", price: "<b>£5</b>" },
+      { description: "قص الشعر وتصفيفه", price: "٤٥ £" },
+      { description: "X", price: "1" },
+      { description: "See https://example.com/a/very/long/path/that/never/breaks/segmentsegmentsegment", price: "-£20" },
+    ],
+  },
+  {
+    headingtext: "",
+    items: Array.from({ length: 30 }, (_, i) => ({ description: `Item ${i + 1} in a column with no heading`, price: `£${(i + 1) * 5}` })),
+  },
+  {
+    headingtext: "Broken icon, no items",
+    headingIcon: "lucide:this-icon-does-not-exist",
+    items: [],
+  },
+];
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    priceListData: stressPriceListData,
+    headingTag: "h2",
+    fromLabel: "ab einem Mindestpreis von",
+  },
+  render,
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "Deliberately hostile data to find breakage: a long German heading, unbroken description and price strings, " +
+          "a long price range with a long German 'from' label, a 'from' item with an empty price, an empty description, " +
+          "emoji, HTML-like text (must render as text), right-to-left Arabic, single characters, a negative price, " +
+          "a column with no heading (no empty heading is rendered) and 30 items, a broken icon name, and a column with no items. " +
+          "Check at every canvas width: nothing overflows its column, the price column never takes more than half the row " +
+          "and wraps inside it, columns go two-up only when the container is wide enough, and a third column wraps to a new row. " +
+          "Try the Description line clamp control too: it's a CSS token set by the story, not a prop.",
+      },
     },
-    template: `<PriceList v-bind="args" />`,
-  }),
+  },
 };

package/app/components/02.molecules/price-list/tests/PriceList.spec.ts

@@ -191,6 +191,26 @@ describe("PriceList", () => {
       expect(classes).not.toContain("first-class");
     });
 
+    it("does not render an empty heading when headingtext is empty", async () => {
+      wrapper = await createWrapper([
+        { headingtext: "", items: [{ description: "Cut", price: "£45" }] },
+        { headingtext: "Colour", items: [] },
+      ]);
+      const columns = wrapper.findAll(".price-list__column");
+      expect(columns[0]!.find(".price-list__heading").exists()).toBe(false);
+      expect(columns[0]!.findAll(".price-list__row").length).toBe(1);
+      expect(columns[1]!.find(".price-list__heading").text()).toBe("Colour");
+    });
+
+    it("renders HTML-like text as text", async () => {
+      wrapper = await createWrapper([
+        { headingtext: "Cuts", items: [{ description: "<script>alert(1)</script>", price: "<b>£5</b>" }] },
+      ]);
+      expect(wrapper.find("script").exists()).toBe(false);
+      expect(wrapper.find("dd b").exists()).toBe(false);
+      expect(wrapper.find(".price-list__description").text()).toBe("<script>alert(1)</script>");
+    });
+
     it("does not render a 'from' label when item.from is omitted", async () => {
       wrapper = await createWrapper();
       expect(wrapper.find(".price-list__from").exists()).toBe(false);

package/app/components/03.organisms/google-reviews/stories/GoogleReviews.stories.ts

@@ -54,14 +54,19 @@ const meta: Meta<StoryArgs> = {
     authorLineClamp: {
       control: "select",
       options: lineClampOptions,
-      description: "Story control for --google-reviews-author-line-clamp (1 = single-line ellipsis)",
-      table: { category: "CSS tokens" },
+      description:
+        "**Story control, not a prop.** Sets the `--google-reviews-author-line-clamp` CSS token on a wrapper. " +
+        "To use it in an app, set the token in your own CSS, e.g. `.reviews { --google-reviews-author-line-clamp: 1; }`. " +
+        "`1` is single-line ellipsis.",
+      table: { category: "CSS tokens (story only, set in your CSS)" },
     },
     textLineClamp: {
       control: "select",
       options: lineClampOptions,
-      description: "Story control for --google-reviews-text-line-clamp",
-      table: { category: "CSS tokens" },
+      description:
+        "**Story control, not a prop.** Sets the `--google-reviews-text-line-clamp` CSS token on a wrapper. " +
+        "To use it in an app, set the token in your own CSS, e.g. `.reviews { --google-reviews-text-line-clamp: 3; }`.",
+      table: { category: "CSS tokens (story only, set in your CSS)" },
     },
     data: { control: "object", description: "GoogleReviewsData, usually from useGoogleReviews()" },
     minRating: { control: { type: "range", min: 0, max: 5, step: 1 }, description: "Hide reviews below this rating; shows the filter notice" },

package/app/components/03.organisms/image-galleries/slider-gallery/CONSUMER-STYLING.md

@@ -6,7 +6,8 @@
 
 | Token | Default | Controls |
 |---|---|---|
-| `--slider-gallery-height` | `100svh` | Gallery height (width is always `100vw`) |
+| `--slider-gallery-height` | `100svh` | Gallery height |
+| `--slider-gallery-width` | `100vw` | Gallery width. Set `100%` to fill a positioned container instead of the viewport |
 | `--slider-gallery-z-index` | `9999` | Stacking order (full-screen takeover) |
 | `--slider-gallery-accent` | `#f1683a` | Loading spinner and progress bar colour |
 | `--slider-gallery-loading-background` | `var(--page-bg)` | Loading overlay background |
@@ -25,6 +26,15 @@
 | `--slider-gallery-cta-background` | `#99999975` | See-more link background |
 | `--slider-gallery-cta-border-colour` | `#fff` | See-more link border |
 | `--slider-gallery-cta-colour` | `#fff` | See-more link text |
+| `--slider-gallery-author-line-clamp` | `none` | Max lines of the stylist line |
+| `--slider-gallery-title-line-clamp` | `none` | Max lines of the title |
+| `--slider-gallery-topic-line-clamp` | `none` | Max lines of the category line |
+| `--slider-gallery-description-line-clamp` | `none` | Max lines of the description |
+
+Line-clamp tokens: `1` is single-line ellipsis, any other number caps the lines with an ellipsis
+on the last, `none` shows everything. All slide text wraps long unbroken strings (`overflow-wrap: anywhere`).
+The slide text is absolutely positioned, so very long copy can run into the thumbnails and arrows:
+clamp the description if your CMS copy is unbounded.
 
 ### Thumbnails
 
@@ -43,6 +53,11 @@
 | `--slider-gallery-thumbnail-outline-offset-hover` | the resting offset | Outline gap on hover |
 | `--slider-gallery-thumbnail-border-radius` | `20px` | Thumbnail rounding |
 | `--slider-gallery-thumbnail-overlay` | `#0004` | Tint over thumbnail images |
+| `--slider-gallery-thumbnail-title-line-clamp` | `2` | Max lines of a thumbnail title |
+| `--slider-gallery-thumbnail-description-line-clamp` | `2` | Max lines of a thumbnail description |
+
+The thumbnail clamps default to `2` because the card is a fixed size with its text anchored to the
+bottom: uncapped, long text grows upwards and its first lines are cut off.
 
 ### Arrows
 
@@ -83,6 +98,9 @@ Private (not public API): `--_animation-duration` (from the `animationDuration`
 `--_arrow-border-*`/`--_arrow-outline-*` (resting values the hover tokens fall back to) and
 `--_arrows-top`/`-right`/`-width`/`-max-width` (the resolved, breakpoint-switched row position).
 
+> Changed 2026-10-06: added `--slider-gallery-width` (was a fixed `100vw`) and the line-clamp tokens;
+> slide, thumbnail, see-more and loading text now wrap unbroken strings.
+
 > Changed 2026-09-28: the thumbnail sizing/border/radius overrides used to be private names
 > (`--_thumbnailMobileWidth`, `--_thumbnailBorderRadius`, etc.) with no public token; colours were
 > hardcoded. The arrow icon is now sized by `--slider-gallery-arrow-icon-size` (width/height), separately from the button, and the `--_translate-x` icon nudge was removed. The wide thumbnail size now also applies to the image

package/app/components/03.organisms/image-galleries/slider-gallery/SliderGallery.vue

@@ -25,7 +25,14 @@
           :data-text-brightness="item.textBrightness"
           :data-has-text="hasSlideText(item) ? '' : undefined"
         >
-          <NuxtImg :src="item.src" :alt="item.alt" @load="handleImageLoad(index)" @error="handleImageError(index)" />
+          <NuxtImg
+            :src="item.src"
+            :alt="item.alt"
+            width="1920"
+            height="1080"
+            @load="handleImageLoad(index)"
+            @error="handleImageError(index)"
+          />
           <div class="slider-gallery-item-content" :class="item.textBrightness">
             <div v-if="item.stylist" class="slider-gallery-author">{{ item.stylist }}</div>
             <div v-if="item.title" class="slider-gallery-title">{{ item.title }}</div>
@@ -41,7 +48,7 @@
       <div ref="sliderGalleryThumbnailsList" class="slider-gallery-thumbnails" aria-hidden="true">
         <div v-for="(item, index) in galleryData" :key="index" class="slider-gallery-item">
           <div class="slider-gallery-thumbnail-overlay">
-            <NuxtImg :src="item.src" alt="" loading="lazy" />
+            <NuxtImg :src="item.src" alt="" width="640" height="940" loading="lazy" />
             <div class="slider-gallery-item-content" :class="item.textBrightness">
               <div v-if="item.thumbnail?.title" class="slider-gallery-title">{{ item.thumbnail.title }}</div>
               <div v-if="item.thumbnail?.description" class="slider-gallery-description">
@@ -138,6 +145,12 @@ const prefersReducedMotion = () =>
   typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
 const shouldAutoRun = () => props.autoRun && !prefersReducedMotion();
 
+const finiteOr = (value: number, fallback: number) => (Number.isFinite(value) ? value : fallback);
+const safeAnimationDuration = computed(() => Math.max(0, finiteOr(props.animationDuration, 3000)));
+const safeAutoRunInterval = computed(() =>
+  Math.max(1000, safeAnimationDuration.value, finiteOr(props.autoRunInterval, 7000))
+);
+
 onMounted(async () => {
   await nextTick();
 
@@ -203,12 +216,12 @@ function scheduleAutoRun() {
   if (runNextAuto) clearTimeout(runNextAuto);
   runNextAuto = setTimeout(() => {
     if (!shouldAutoRun() || isLoading.value) return;
-    if (isPaused.value) {
+    if (isPaused.value || transitionRunning.value) {
       scheduleAutoRun();
       return;
     }
     doNext();
-  }, props.autoRunInterval);
+  }, safeAutoRunInterval.value);
 }
 
 function showSlider(type: "next" | "prev") {
@@ -249,7 +262,7 @@ function showSlider(type: "next" | "prev") {
       sliderGalleryWrapper.value.querySelectorAll(".is-prepended").forEach((el) => el.classList.remove("is-prepended"));
     }
     transitionRunning.value = false;
-  }, props.animationDuration);
+  }, safeAnimationDuration.value);
 
   scheduleAutoRun();
 }
@@ -286,13 +299,13 @@ onBeforeUnmount(() => {
 <style lang="css">
 @layer components {
   .slider-gallery {
-    --_animation-duration: v-bind(animationDuration + "ms");
+    --_animation-duration: v-bind(safeAnimationDuration + "ms");
     --_accent: var(--slider-gallery-accent, #f1683a);
     --_thumbnail-width: var(--slider-gallery-thumbnail-width, 100px);
     --_thumbnail-height: var(--slider-gallery-thumbnail-height, 165px);
 
     height: var(--slider-gallery-height, 100svh);
-    width: 100vw;
+    width: var(--slider-gallery-width, 100vw);
     overflow: hidden;
     position: absolute;
     inset: 0;
@@ -333,6 +346,10 @@ onBeforeUnmount(() => {
       p {
         font-size: 1.2em;
         font-weight: 500;
+        max-inline-size: 100%;
+        padding-inline: 1.6rem;
+        text-align: center;
+        overflow-wrap: anywhere;
       }
     }
 
@@ -435,14 +452,41 @@ onBeforeUnmount(() => {
           padding-right: 30%;
           box-sizing: border-box;
           text-shadow: 0 5px 10px #0004;
+          overflow-wrap: anywhere;
 
           @container (width < 678px) {
             padding-right: 0;
           }
 
+          .slider-gallery-author,
+          .slider-gallery-title,
+          .slider-gallery-topic,
+          .slider-gallery-description {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+          }
+
           .slider-gallery-author {
             font-weight: bold;
             letter-spacing: 10px;
+            -webkit-line-clamp: var(--slider-gallery-author-line-clamp, none);
+            line-clamp: var(--slider-gallery-author-line-clamp, none);
+          }
+
+          .slider-gallery-title {
+            -webkit-line-clamp: var(--slider-gallery-title-line-clamp, none);
+            line-clamp: var(--slider-gallery-title-line-clamp, none);
+          }
+
+          .slider-gallery-topic {
+            -webkit-line-clamp: var(--slider-gallery-topic-line-clamp, none);
+            line-clamp: var(--slider-gallery-topic-line-clamp, none);
+          }
+
+          .slider-gallery-description {
+            -webkit-line-clamp: var(--slider-gallery-description-line-clamp, none);
+            line-clamp: var(--slider-gallery-description-line-clamp, none);
           }
 
           .slider-gallery-title,
@@ -466,7 +510,9 @@ onBeforeUnmount(() => {
               place-items: center;
               min-width: 130px;
               min-height: 40px;
+              max-inline-size: 100%;
               padding-inline: 1.2rem;
+              box-sizing: border-box;
               background-color: var(--slider-gallery-cta-background, #99999975);
               border: 1px solid var(--slider-gallery-cta-border-colour, #fff);
               color: var(--slider-gallery-cta-colour, #fff);
@@ -528,13 +574,25 @@ onBeforeUnmount(() => {
           bottom: 10px;
           left: 10px;
           right: 10px;
+          overflow-wrap: anywhere;
+
+          .slider-gallery-title,
+          .slider-gallery-description {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+          }
 
           .slider-gallery-title {
             font-weight: 500;
+            -webkit-line-clamp: var(--slider-gallery-thumbnail-title-line-clamp, 2);
+            line-clamp: var(--slider-gallery-thumbnail-title-line-clamp, 2);
           }
 
           .slider-gallery-description {
             font-weight: 300;
+            -webkit-line-clamp: var(--slider-gallery-thumbnail-description-line-clamp, 2);
+            line-clamp: var(--slider-gallery-thumbnail-description-line-clamp, 2);
           }
         }
       }