srcdev-nuxt-components 9.5.6 → 9.6.0

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

@@ -1,11 +1,54 @@
+import { computed, ref } from "vue";
 import SliderGallery from "../SliderGallery.vue";
+import CanvasSwitcher from "../../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
-import type { IGalleryData } from "~/types/components";
+import type { IGalleryData, MediaCanvas } from "~/types/components";
 
-const meta: Meta<typeof SliderGallery> = {
+type LineClamp = "none" | "1" | "2" | "3" | "4";
+
+// Story-only args: each drives a CSS token, not a SliderGallery prop. See the argTypes entries.
+const lineClampTokens = {
+  authorLineClamp: { token: "--slider-gallery-author-line-clamp", label: "Author (stylist)", fallback: "none" },
+  titleLineClamp: { token: "--slider-gallery-title-line-clamp", label: "Title", fallback: "none" },
+  topicLineClamp: { token: "--slider-gallery-topic-line-clamp", label: "Topic (category)", fallback: "none" },
+  descriptionLineClamp: { token: "--slider-gallery-description-line-clamp", label: "Description", fallback: "none" },
+  thumbnailTitleLineClamp: { token: "--slider-gallery-thumbnail-title-line-clamp", label: "Thumbnail title", fallback: "2" },
+  thumbnailDescriptionLineClamp: {
+    token: "--slider-gallery-thumbnail-description-line-clamp",
+    label: "Thumbnail description",
+    fallback: "2",
+  },
+} as const;
+
+type LineClampArg = keyof typeof lineClampTokens;
+
+type StoryArgs = InstanceType<typeof SliderGallery>["$props"] & Record<LineClampArg, LineClamp>;
+
+const lineClampArgTypes = Object.fromEntries(
+  Object.entries(lineClampTokens).map(([arg, { token, label, fallback }]) => [
+    arg,
+    {
+      name: `${label} line clamp`,
+      control: "select",
+      options: ["none", "1", "2", "3", "4"] satisfies LineClamp[],
+      description:
+        `**Story control, not a prop.** Sets the \`${token}\` 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. \`.hero { ${token}: 2; }\`. ` +
+        `\`1\` is single-line ellipsis, \`none\` shows everything.`,
+      table: { category: "CSS tokens (story only, set in your CSS)", defaultValue: { summary: fallback } },
+    },
+  ])
+);
+
+const lineClampArgs = Object.fromEntries(
+  Object.entries(lineClampTokens).map(([arg, { fallback }]) => [arg, fallback])
+) as Record<LineClampArg, LineClamp>;
+
+const meta: Meta<StoryArgs> = {
   title: "Organisms/Image Galleries/Slider Gallery",
   component: SliderGallery,
   argTypes: {
+    ...lineClampArgTypes,
     autoRun: {
       control: { type: "boolean" },
       description: "Automatically advance to the next slide",
@@ -40,6 +83,7 @@ const meta: Meta<typeof SliderGallery> = {
     },
   },
   args: {
+    ...lineClampArgs,
     autoRun: true,
     autoRunInterval: 7000,
     animationDuration: 3000,
@@ -64,7 +108,7 @@ const meta: Meta<typeof SliderGallery> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof SliderGallery>;
+type Story = StoryObj<StoryArgs>;
 
 // ─── Fixtures ─────────────────────────────────────────────────────────────────
 
@@ -123,17 +167,105 @@ const sampleSlides: IGalleryData[] = [
   },
 ];
 
+const longGerman =
+  "Donaudampfschifffahrtsgesellschaftskapitänsmützenbandherstellungsbetriebsgenossenschaftsvorsitzender";
+const longUrl =
+  "https://example.com/a/very/long/path/that/never/breaks/because/it/has/no/spaces/at/all?utm_source=newsletter&utm_medium=email&utm_campaign=autumn-collection-2026-final-final-v3";
+const longParagraph =
+  "Eine ausgesprochen lange Beschreibung, wie sie ein CMS liefert, wenn niemand die Zeichenanzahl prüft. ".repeat(8);
+
+const stressSlides: IGalleryData[] = [
+  {
+    src: "https://picsum.photos/seed/stress1/1920/1080",
+    alt: "Long German copy in every field",
+    stylist: `STYLISTIN ${longGerman.toUpperCase()}`,
+    title: `${longGerman} und Freunde`,
+    category: "Haarverlängerungen, Strähnchen und vollständige Farbkorrekturen",
+    description: longParagraph,
+    thumbnail: { title: longGerman, description: longParagraph },
+    textBrightness: "light",
+    href: longUrl,
+  },
+  {
+    src: "https://picsum.photos/seed/stress2/1920/1080",
+    alt: "Emoji and HTML-like text",
+    stylist: "💇‍♀️✨ SALON 🎉",
+    title: "<script>alert('xss')</script>",
+    category: "<b>not bold</b> &amp; &lt;tags&gt;",
+    description: "🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈",
+    thumbnail: { title: "😀 Emoji first", description: "<img src=x onerror=alert(1)>" },
+    textBrightness: "dark",
+    href: "#emoji",
+  },
+  {
+    src: "https://picsum.photos/seed/stress3/1920/1080",
+    alt: "صورة لصالون تصفيف الشعر",
+    stylist: "مصففة الشعر",
+    title: "تسريحات شعر جديدة لموسم الخريف",
+    category: "تلوين الشعر",
+    description: "وصف طويل باللغة العربية يمتد عبر عدة أسطر للتحقق من أن النص من اليمين إلى اليسار يعرض بشكل صحيح.",
+    thumbnail: { title: "تسريحات", description: "تلوين الشعر" },
+    textBrightness: "light",
+  },
+  {
+    src: "https://example.invalid/this-image-does-not-exist.jpg",
+    alt: "Broken image URL: the alt text should show instead",
+    stylist: "A",
+    title: "B",
+    category: "C",
+    description: "",
+    thumbnail: { title: "", description: "" },
+    textBrightness: "dark",
+    href: "",
+  },
+  {
+    src: "https://picsum.photos/seed/stress5/1920/1080",
+    alt: "",
+    textBrightness: "light",
+  },
+  {
+    src: "https://picsum.photos/seed/stress6/1920/1080",
+    alt: "Unbroken URL as description",
+    title: "Link soup",
+    description: longUrl,
+    thumbnail: { title: longUrl, description: longUrl },
+    textBrightness: "light",
+    href: "#link-soup",
+  },
+  ...Array.from({ length: 24 }, (_, index): IGalleryData => ({
+    src: `https://picsum.photos/seed/stress-many-${index}/1920/1080`,
+    alt: `Filler slide ${index + 7}`,
+    title: `Slide ${index + 7}`,
+    thumbnail: { title: `Slide ${index + 7}`, description: "Filler" },
+    textBrightness: "light",
+  })),
+];
+
 // ─── Stories ──────────────────────────────────────────────────────────────────
 
+function useStorySetup(args: StoryArgs) {
+  const componentArgs = computed(() =>
+    Object.fromEntries(Object.entries(args).filter(([arg]) => !(arg in lineClampTokens)))
+  );
+  const tokenStyles = computed(() =>
+    Object.fromEntries(
+      Object.entries(lineClampTokens).map(([arg, { token }]) => [token, args[arg as LineClampArg]])
+    )
+  );
+  return { componentArgs, tokenStyles };
+}
+
+const renderWith = (slides: IGalleryData[]) => (args: StoryArgs) => ({
+  components: { SliderGallery },
+  setup() {
+    const galleryData = ref<IGalleryData[]>(slides);
+    return { ...useStorySetup(args), galleryData };
+  },
+  template: `<div :style="tokenStyles"><SliderGallery v-bind="componentArgs" v-model:gallery-data="galleryData" /></div>`,
+});
+
 export const Default: Story = {
-  render: (args) => ({
-    components: { SliderGallery },
-    setup() {
-      const galleryData = ref<IGalleryData[]>(sampleSlides);
-      return { args, galleryData };
-    },
-    template: `<SliderGallery v-bind="args" v-model:gallery-data="galleryData" />`,
-  }),
+  render: renderWith(sampleSlides),
 };
 
 export const AutoRunDisabled: Story = {
@@ -141,14 +273,7 @@ export const AutoRunDisabled: Story = {
   args: {
     autoRun: false,
   },
-  render: (args) => ({
-    components: { SliderGallery },
-    setup() {
-      const galleryData = ref<IGalleryData[]>(sampleSlides);
-      return { args, galleryData };
-    },
-    template: `<SliderGallery v-bind="args" v-model:gallery-data="galleryData" />`,
-  }),
+  render: renderWith(sampleSlides),
   parameters: {
     docs: {
       description: {
@@ -164,14 +289,7 @@ export const FastTransition: Story = {
     animationDuration: 500,
     autoRunInterval: 3000,
   },
-  render: (args) => ({
-    components: { SliderGallery },
-    setup() {
-      const galleryData = ref<IGalleryData[]>(sampleSlides);
-      return { args, galleryData };
-    },
-    template: `<SliderGallery v-bind="args" v-model:gallery-data="galleryData" />`,
-  }),
+  render: renderWith(sampleSlides),
 };
 
 export const SlowTransition: Story = {
@@ -180,14 +298,7 @@ export const SlowTransition: Story = {
     animationDuration: 5000,
     autoRunInterval: 10000,
   },
-  render: (args) => ({
-    components: { SliderGallery },
-    setup() {
-      const galleryData = ref<IGalleryData[]>(sampleSlides);
-      return { args, galleryData };
-    },
-    template: `<SliderGallery v-bind="args" v-model:gallery-data="galleryData" />`,
-  }),
+  render: renderWith(sampleSlides),
 };
 
 export const SingleSlide: Story = {
@@ -195,14 +306,7 @@ export const SingleSlide: Story = {
   args: {
     autoRun: false,
   },
-  render: (args) => ({
-    components: { SliderGallery },
-    setup() {
-      const galleryData = ref<IGalleryData[]>([sampleSlides[0]!]);
-      return { args, galleryData };
-    },
-    template: `<SliderGallery v-bind="args" v-model:gallery-data="galleryData" />`,
-  }),
+  render: renderWith([sampleSlides[0]!]),
   parameters: {
     docs: {
       description: {
@@ -217,18 +321,11 @@ export const MinimalSlideData: Story = {
   args: {
     autoRun: false,
   },
-  render: (args) => ({
-    components: { SliderGallery },
-    setup() {
-      const galleryData = ref<IGalleryData[]>([
-        { src: "https://picsum.photos/seed/min1/1920/1080", alt: "Image one", textBrightness: "light" },
-        { src: "https://picsum.photos/seed/min2/1920/1080", alt: "Image two", textBrightness: "dark" },
-        { src: "https://picsum.photos/seed/min3/1920/1080", alt: "Image three", textBrightness: "light" },
-      ]);
-      return { args, galleryData };
-    },
-    template: `<SliderGallery v-bind="args" v-model:gallery-data="galleryData" />`,
-  }),
+  render: renderWith([
+    { src: "https://picsum.photos/seed/min1/1920/1080", alt: "Image one", textBrightness: "light" },
+    { src: "https://picsum.photos/seed/min2/1920/1080", alt: "Image two", textBrightness: "dark" },
+    { src: "https://picsum.photos/seed/min3/1920/1080", alt: "Image three", textBrightness: "light" },
+  ]),
   parameters: {
     docs: {
       description: {
@@ -240,14 +337,7 @@ export const MinimalSlideData: Story = {
 
 export const EmptyGallery: Story = {
   name: "Empty Gallery",
-  render: (args) => ({
-    components: { SliderGallery },
-    setup() {
-      const galleryData = ref<IGalleryData[]>([]);
-      return { args, galleryData };
-    },
-    template: `<SliderGallery v-bind="args" v-model:gallery-data="galleryData" />`,
-  }),
+  render: renderWith([]),
   parameters: {
     docs: {
       description: {
@@ -256,3 +346,51 @@ export const EmptyGallery: Story = {
     },
   },
 };
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    autoRunInterval: 0,
+    loadingText: "Die Galerie wird geladen, bitte haben Sie einen Augenblick Geduld...",
+    seeMoreText: "WEITERE INFORMATIONEN ZU DIESEM BEITRAG ANZEIGEN",
+    ariaLabel: "",
+  },
+  render: renderWith(stressSlides),
+  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="position: relative; block-size: 80svh; margin-inline: auto; outline: 1px dashed currentColor; --slider-gallery-width: 100%; --slider-gallery-height: 100%;"
+        >
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "Deliberately hostile data to find breakage, sized to the canvas with `--slider-gallery-width: 100%` and " +
+          "`--slider-gallery-height: 100%`: long German copy and unbroken strings (a 100-character compound word, a long URL) " +
+          "in every field including the see-more and loading copy, emoji (including first), HTML-like text (must render as text), " +
+          "right-to-left Arabic, a broken image URL (its alt text shows), single characters, empty strings (no empty elements or " +
+          "empty link are rendered), a slide with an empty alt and no text, an empty carousel label, and 30 slides. " +
+          "`autoRunInterval` is 0: auto-advance is floored to the transition length (minimum 1s), so it keeps cycling rather than " +
+          "stalling; try a negative `animationDuration` too. Hover the gallery to pause it while you look. " +
+          "Check at every canvas width: no text runs off the slide, thumbnail text stays inside its card (2 lines each by default), " +
+          "and the arrows stay usable. Try the line clamp controls too: they set CSS tokens, they are not props.",
+      },
+    },
+  },
+};

package/app/components/03.organisms/image-galleries/slider-gallery/tests/SliderGallery.spec.ts

@@ -43,9 +43,13 @@ type MockImageInstance = {
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
 /** Mount the gallery and simulate the first image loading successfully. */
-async function mountAndLoad(galleryData: IGalleryData[], mockImage: MockImageInstance) {
+async function mountAndLoad(
+  galleryData: IGalleryData[],
+  mockImage: MockImageInstance,
+  props: Record<string, unknown> = {}
+) {
   const wrapper = await mountSuspended(SliderGallery, {
-    props: { galleryData },
+    props: { galleryData, ...props },
   });
   mockImage.onload?.();
   await nextTick(); // let onMounted resume after Promise.race resolves
@@ -310,4 +314,39 @@ describe("SliderGallery", () => {
     await nextTick();
     expect(wrapper.classes()).not.toContain("is-next");
   });
+
+  // ─── Worst-case numbers ─────────────────────────────────────────────────
+
+  const activeAlt = (wrapper: Awaited<ReturnType<typeof mountAndLoad>>) =>
+    wrapper.find(".slider-gallery-list .slider-gallery-item img").attributes("alt");
+
+  // Mount with motion allowed, then let the load chain settle so the first auto-run timer is queued.
+  async function mountForAutoRun(props: Record<string, unknown>) {
+    vi.stubGlobal("matchMedia", vi.fn(() => ({ matches: false })));
+    const wrapper = await mountAndLoad(mockGalleryData, mockImage, props);
+    vi.advanceTimersByTime(1000);
+    await nextTick();
+    return wrapper;
+  }
+
+  it("keeps auto-advancing when autoRunInterval is shorter than the transition", async () => {
+    const wrapper = await mountForAutoRun({ autoRunInterval: 0, animationDuration: 3000 });
+    expect(activeAlt(wrapper)).toBe("Slide 1");
+    vi.advanceTimersByTime(3000);
+    await nextTick();
+    expect(activeAlt(wrapper)).toBe("Slide 2");
+    vi.advanceTimersByTime(3000);
+    await nextTick();
+    expect(activeAlt(wrapper)).toBe("Slide 3");
+  });
+
+  it("floors auto-advance at 1s when both timings are zero or negative", async () => {
+    const wrapper = await mountForAutoRun({ autoRunInterval: 0, animationDuration: -500 });
+    vi.advanceTimersByTime(999);
+    await nextTick();
+    expect(activeAlt(wrapper)).toBe("Slide 1");
+    vi.advanceTimersByTime(1);
+    await nextTick();
+    expect(activeAlt(wrapper)).toBe("Slide 2");
+  });
 });

package/app/components/03.organisms/image-galleries/slider-gallery/tests/__snapshots__/SliderGallery.spec.ts.snap

@@ -8,7 +8,7 @@ exports[`SliderGallery > renders correct HTML structure after load 1`] = `
   </div>
   <div class="slider-gallery-content">
     <div class="slider-gallery-list">
-      <div class="slider-gallery-item" data-text-brightness="light" data-has-text=""><img data-nuxt-img="" srcset="/_ipx/_/images/slide-1.jpg 1x, /_ipx/_/images/slide-1.jpg 2x" alt="Slide 1" src="/_ipx/_/images/slide-1.jpg">
+      <div class="slider-gallery-item" data-text-brightness="light" data-has-text=""><img width="1920" height="1080" data-nuxt-img="" srcset="/_ipx/s_1920x1080/images/slide-1.jpg 1x, /_ipx/s_3840x2160/images/slide-1.jpg 2x" alt="Slide 1" src="/_ipx/s_1920x1080/images/slide-1.jpg">
         <div class="slider-gallery-item-content light">
           <div class="slider-gallery-author">Stylist One</div>
           <div class="slider-gallery-title">First Slide</div>
@@ -17,7 +17,7 @@ exports[`SliderGallery > renders correct HTML structure after load 1`] = `
           <!--v-if-->
         </div>
       </div>
-      <div class="slider-gallery-item" data-text-brightness="dark" data-has-text=""><img data-nuxt-img="" srcset="/_ipx/_/images/slide-2.jpg 1x, /_ipx/_/images/slide-2.jpg 2x" alt="Slide 2" src="/_ipx/_/images/slide-2.jpg">
+      <div class="slider-gallery-item" data-text-brightness="dark" data-has-text=""><img width="1920" height="1080" data-nuxt-img="" srcset="/_ipx/s_1920x1080/images/slide-2.jpg 1x, /_ipx/s_3840x2160/images/slide-2.jpg 2x" alt="Slide 2" src="/_ipx/s_1920x1080/images/slide-2.jpg">
         <div class="slider-gallery-item-content dark">
           <!--v-if-->
           <div class="slider-gallery-title">Second Slide</div>
@@ -26,7 +26,7 @@ exports[`SliderGallery > renders correct HTML structure after load 1`] = `
           <!--v-if-->
         </div>
       </div>
-      <div class="slider-gallery-item" data-text-brightness="light"><img data-nuxt-img="" srcset="/_ipx/_/images/slide-3.jpg 1x, /_ipx/_/images/slide-3.jpg 2x" alt="Slide 3" src="/_ipx/_/images/slide-3.jpg">
+      <div class="slider-gallery-item" data-text-brightness="light"><img width="1920" height="1080" data-nuxt-img="" srcset="/_ipx/s_1920x1080/images/slide-3.jpg 1x, /_ipx/s_3840x2160/images/slide-3.jpg 2x" alt="Slide 3" src="/_ipx/s_1920x1080/images/slide-3.jpg">
         <div class="slider-gallery-item-content light">
           <!--v-if-->
           <!--v-if-->
@@ -38,7 +38,7 @@ exports[`SliderGallery > renders correct HTML structure after load 1`] = `
     </div>
     <div class="slider-gallery-thumbnails" aria-hidden="true">
       <div class="slider-gallery-item">
-        <div class="slider-gallery-thumbnail-overlay"><img data-nuxt-img="" srcset="/_ipx/_/images/slide-1.jpg 1x, /_ipx/_/images/slide-1.jpg 2x" alt="" loading="lazy" src="/_ipx/_/images/slide-1.jpg">
+        <div class="slider-gallery-thumbnail-overlay"><img width="640" height="940" data-nuxt-img="" srcset="/_ipx/s_640x940/images/slide-1.jpg 1x, /_ipx/s_1280x1880/images/slide-1.jpg 2x" alt="" loading="lazy" src="/_ipx/s_640x940/images/slide-1.jpg">
           <div class="slider-gallery-item-content light">
             <div class="slider-gallery-title">Thumb 1</div>
             <div class="slider-gallery-description">Thumb desc 1</div>
@@ -46,7 +46,7 @@ exports[`SliderGallery > renders correct HTML structure after load 1`] = `
         </div>
       </div>
       <div class="slider-gallery-item">
-        <div class="slider-gallery-thumbnail-overlay"><img data-nuxt-img="" srcset="/_ipx/_/images/slide-2.jpg 1x, /_ipx/_/images/slide-2.jpg 2x" alt="" loading="lazy" src="/_ipx/_/images/slide-2.jpg">
+        <div class="slider-gallery-thumbnail-overlay"><img width="640" height="940" data-nuxt-img="" srcset="/_ipx/s_640x940/images/slide-2.jpg 1x, /_ipx/s_1280x1880/images/slide-2.jpg 2x" alt="" loading="lazy" src="/_ipx/s_640x940/images/slide-2.jpg">
           <div class="slider-gallery-item-content dark">
             <div class="slider-gallery-title">Thumb 2</div>
             <div class="slider-gallery-description">Thumb desc 2</div>
@@ -54,7 +54,7 @@ exports[`SliderGallery > renders correct HTML structure after load 1`] = `
         </div>
       </div>
       <div class="slider-gallery-item">
-        <div class="slider-gallery-thumbnail-overlay"><img data-nuxt-img="" srcset="/_ipx/_/images/slide-3.jpg 1x, /_ipx/_/images/slide-3.jpg 2x" alt="" loading="lazy" src="/_ipx/_/images/slide-3.jpg">
+        <div class="slider-gallery-thumbnail-overlay"><img width="640" height="940" data-nuxt-img="" srcset="/_ipx/s_640x940/images/slide-3.jpg 1x, /_ipx/s_1280x1880/images/slide-3.jpg 2x" alt="" loading="lazy" src="/_ipx/s_640x940/images/slide-3.jpg">
           <div class="slider-gallery-item-content light">
             <!--v-if-->
             <!--v-if-->

package/app/components/03.organisms/responsive-header/CONSUMER-STYLING.md

@@ -11,6 +11,7 @@ are documented alongside it since that's where they're consumed.
 |---|---|---|
 | `--responsive-header-link-font-size` | `inherit` | Nav-link font-size. **Always set this to a fixed value.** Leaving it `inherit` means a fluid ancestor font-size (`clamp()`/`vw`) can drift nav-item text width without ever re-triggering the overflow-collapse measurement — see the component skill doc's "measurement pipeline" section for the full mechanism. |
 | `--responsive-header-link-color` | `inherit` | Link/summary text colour. |
+| `--responsive-header-main-nav-justify-content` | `space-between` | How the main nav's groups are spread along the bar. Use `flex-start`, `safe center` or `safe end`; plain `center`/`end` let items that don't fit spill off the start edge, where they're clipped. (Safari 16 ignores `safe` values and falls back to start alignment.) |
 | `--responsive-header-color` | `inherit` | Root element text colour. |
 | `--responsive-header-margin` | `0` | Root element margin. |
 | `--responsive-header-bg` | `transparent` | Root element background. |
@@ -20,8 +21,21 @@ are documented alongside it since that's where they're consumed.
 | `--responsive-header-max-height` | `none` | Root element max-height. |
 | `--responsive-header-inline-size` | `100%` | Root element inline-size. |
 | `--responsive-header-sub-nav-bg` / `-border` / `-border-radius` / `-padding` | `Canvas` / `1px solid #efefef75` / `8px` / `12px` | Top-bar dropdown panel (`.main-navigation-sub-nav`). |
+| `--responsive-header-sub-nav-max-inline-size` | `min(48rem, calc(100vw - 3.2rem))` | Widest the top-bar dropdown panel gets; long child names wrap inside it. |
+| `--responsive-header-sub-nav-max-block-size` | `70vh` | Tallest the top-bar dropdown panel gets before it scrolls, so a long child list stays reachable under a sticky header. |
 | `--responsive-header-overflow-btn-bg` / `-size` / `-border` / `-outline` / `-icon-color` / `-hover-outline` | `Canvas` / `20px` / `1px solid #ffffff90` / `1px solid #ffffff10` / `inherit` / `1px solid #ffffff` | Overflow burger button. |
 | `--responsive-header-overflow-nav-bg` / `-border` / `-border-radius` / `-padding-block` | `Canvas` / `1px solid #ffffff90` / `8px` / `12px` | Overflow panel container. |
+| `--responsive-header-overflow-nav-max-block-size` | `70vh` | Tallest the overflow panel gets before it scrolls. |
+| `--overflow-nav-max-inline-size` | `calc(100vw - 3.2rem)` | Widest the overflow panel's content gets (set on `NavigationItems`); long names wrap inside it. |
+
+Link and dropdown text is never line-clamped: it names where the link goes. Long unbroken names
+wrap inside the dropdown and overflow panels; in the top bar, an item too wide to fit moves to the
+overflow menu.
+
+> **Changed 2026-10-05**: the dropdown and overflow panels had no maximum size, so a long child
+> name or a long child list ran off-screen. They are now capped by the four tokens above.
+> `--_overflow-drop-down-width`, a private token nothing ever set, is gone (`min-width: fit-content`
+> directly).
 | `--responsive-nav-decorator-indicator-color` | `currentColor` | Active-item indicator bar/underline. |
 | `--responsive-nav-decorator-hovered-indicator-color` | inherits the above | Indicator colour while hovering. |
 | `--responsive-nav-decorator-hovered-bg` | `oklch(100% 0 0 / 8%)` | Hover highlight background behind the hovered item. |
@@ -66,6 +80,10 @@ Set the tokens above on an element you own (a page or section class, or a class
 
 ## Notes
 
+- Same-page `#anchor` items (since 2026-10-06) render as plain `<a>` with the same classes as route
+  links (`.main-navigation-link`, `.overflow-navigation-link`, the sub-nav link classes), so every token
+  and selector here applies to them. Their `li.is-active` follows the current hash rather than the route.
+
 - Anything with async-loaded content (an `iconName` icon on a nav item, a new decorator inside
   a nav link) must reserve its own `width`/`height` in CSS — an unsized element measures at
   `0` during the initial geometry pass and then pops in afterward with nothing to detect it.