srcdev-nuxt-components 9.5.7 → 9.6.0

package/app/components/02.molecules/navigation/tab-navigation/stories/TabNavigation.stories.ts

@@ -1,22 +1,40 @@
 import { ref, reactive, computed } from "vue";
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import type { Meta, StoryFn, StoryObj } from "@nuxtjs/storybook";
 import TabNavigationComponent from "../TabNavigation.vue";
+import CanvasSwitcher from "../../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import type { NavItemData } from "~/types/components/nav-item.d";
+import type { MediaCanvas } from "~/types/components";
 
 const meta: Meta<typeof TabNavigationComponent> = {
   title: "Molecules/TabNavigation",
   component: TabNavigationComponent,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "**Deprecated: use ResponsiveHeader.** It handles the same route and `#anchor` links (with " +
+          "`anchorScrollOffset`) and collapses item by item rather than all-or-nothing. See \"Migrating from " +
+          "TabNavigation\" in the ResponsiveHeader skill doc. TabNavigation stays until existing consumers have moved.",
+      },
+    },
+  },
   argTypes: {
     navAlign: {
       control: { type: "select" },
       options: ["left", "center", "right"],
       description: "Horizontal alignment of the nav list",
     },
+    ariaLabel: { control: "text", description: "aria-label on the nav landmark; override for localisation" },
+    openMenuLabel: { control: "text", description: "Burger button label while the menu is closed" },
+    closeMenuLabel: { control: "text", description: "Burger button label while the menu is open" },
     navItemData: { table: { disable: true } },
     styleClassPassthrough: { table: { disable: true } },
   },
   args: {
     navAlign: "left",
+    ariaLabel: "Site navigation",
+    openMenuLabel: "Open navigation menu",
+    closeMenuLabel: "Close navigation menu",
   },
 };
 
@@ -32,85 +50,47 @@ const navItemData: NavItemData = {
   ],
 };
 
-type Theme = "light" | "dark";
+// Playground: every control starts unset, so the nav shows the component's own (light) defaults.
+// Picking a colour sets that token as an override; Reset removes it again.
+const tokenControls = [
+  { group: "Indicator", label: "Indicator colour", token: "--tab-nav-decorator-indicator-color" },
+  { group: "Horizontal nav links", label: "Link colour", token: "--tab-nav-link-color" },
+  { group: "Horizontal nav links", label: "Hover colour", token: "--tab-nav-link-hover-color" },
+  { group: "Horizontal nav links", label: "Active colour", token: "--tab-nav-link-active-color" },
+  { group: "Horizontal nav links", label: "Focus ring colour", token: "--tab-nav-focus-ring-colour" },
+  { group: "Mobile panel", label: "Panel background", token: "--tab-nav-panel-bg" },
+  { group: "Mobile panel", label: "Panel link colour", token: "--tab-nav-panel-link-color" },
+  { group: "Burger", label: "Burger colour", token: "--tab-nav-burger-color" },
+] as const;
 
-const themeDefaults: Record<
-  Theme,
-  {
-    indicatorColor: string;
-    linkColor: string;
-    linkHoverColor: string;
-    linkActiveColor: string;
-    panelBg: string;
-    panelLinkColor: string;
-    burgerColor: string;
-    pageBg: string;
-  }
-> = {
-  dark: {
-    indicatorColor: "#c0847a",
-    linkColor: "#f0ece8",
-    linkHoverColor: "#e09890",
-    linkActiveColor: "#c0847a",
-    panelBg: "#1a1614",
-    panelLinkColor: "#f0ece8",
-    burgerColor: "#f0ece8",
-    pageBg: "#1a1614",
-  },
-  light: {
-    indicatorColor: "#b05a50",
-    linkColor: "#1a1614",
-    linkHoverColor: "#b05a50",
-    linkActiveColor: "#8c3a30",
-    panelBg: "#f5f2f0",
-    panelLinkColor: "#1a1614",
-    burgerColor: "#1a1614",
-    pageBg: "#f5f2f0",
-  },
-};
+type Token = (typeof tokenControls)[number]["token"];
 
 const DefaultTemplate: StoryFn<typeof TabNavigationComponent> = (args) => ({
   components: { TabNavigationComponent },
   setup() {
-    const theme = ref<Theme>("dark");
-
-    const controls = reactive({ ...themeDefaults.dark });
-
-    const setTheme = (newTheme: Theme) => {
-      theme.value = newTheme;
-      Object.assign(controls, themeDefaults[newTheme]);
-    };
-
-    const navStyle = computed(() => ({
-      "--tab-nav-decorator-indicator-color": controls.indicatorColor,
-      "--tab-nav-link-color": controls.linkColor,
-      "--tab-nav-link-hover-color": controls.linkHoverColor,
-      "--tab-nav-link-active-color": controls.linkActiveColor,
-      "--tab-nav-panel-bg": controls.panelBg,
-      "--tab-nav-panel-link-color": controls.panelLinkColor,
-      "--tab-nav-burger-color": controls.burgerColor,
-      "--page-bg": controls.pageBg,
-      "margin-block": "3.6rem",
+    const overrides = reactive<Partial<Record<Token, string>>>({});
+    const groups = [...new Set(tokenControls.map((control) => control.group))].map((group) => ({
+      group,
+      controls: tokenControls.filter((control) => control.group === group),
     }));
 
-    const cssSnippet = computed(
-      () => `.your-selector {
-  /* Indicator */
-  --tab-nav-decorator-indicator-color: ${controls.indicatorColor};
+    const setOverride = (token: Token, event: Event) => {
+      overrides[token] = (event.target as HTMLInputElement).value;
+    };
+    const resetOverride = (token: Token) => {
+      overrides[token] = undefined;
+    };
 
-  /* Horizontal nav links */
-  --tab-nav-link-color: ${controls.linkColor};
-  --tab-nav-link-hover-color: ${controls.linkHoverColor};
-  --tab-nav-link-active-color: ${controls.linkActiveColor};
+    const activeOverrides = computed(() => Object.entries(overrides).filter(([, value]) => value));
 
-  /* Mobile panel */
-  --tab-nav-panel-bg: ${controls.panelBg};
-  --tab-nav-panel-link-color: ${controls.panelLinkColor};
+    const navStyle = computed(() => Object.fromEntries(activeOverrides.value));
 
-  /* Burger */
-  --tab-nav-burger-color: ${controls.burgerColor};
-}`
-    );
+    const cssSnippet = computed(() => {
+      const lines = activeOverrides.value.map(([token, value]) => `  ${token}: ${value};`);
+      return lines.length
+        ? `.your-selector {\n${lines.join("\n")}\n}`
+        : "/* No overrides: the nav is using its default (light theme) colours. */";
+    });
 
     const copied = ref(false);
     const copySnippet = async () => {
@@ -121,7 +101,7 @@ const DefaultTemplate: StoryFn<typeof TabNavigationComponent> = (args) => ({
       }, 2000);
     };
 
-    return { args, navItemData, theme, controls, setTheme, navStyle, cssSnippet, copied, copySnippet };
+    return { args, navItemData, groups, overrides, setOverride, resetOverride, navStyle, cssSnippet, copied, copySnippet };
   },
   template: `
     <div class="sb-tabnav-story">
@@ -130,211 +110,150 @@ const DefaultTemplate: StoryFn<typeof TabNavigationComponent> = (args) => ({
         Resize the browser window to see the navigation collapse into a burger menu.
         The active indicator uses CSS <code>anchor-name</code> / <code>position-anchor</code> —
         no JavaScript required. Unsupported browsers fall back to link colour changes only.
+        The colours below start at the component defaults (light theme); dark mode is the consumer app's
+        call, e.g. with <code>light-dark()</code> in its own token overrides.
       </div>
-      <div class="sb-tabnav-header" :class="'theme-' + theme" :style="navStyle">
+
+      <div class="sb-tabnav-header" :style="navStyle">
         <div class="sb-tabnav-logo">LOGO</div>
-        <TabNavigationComponent
-          :nav-item-data="navItemData"
-          :nav-align="args.navAlign"
-        />
+        <TabNavigationComponent v-bind="args" :nav-item-data="navItemData" />
       </div>
 
-      <!-- Controls -->
       <div class="sb-tabnav-playground">
-
-        <fieldset>
-          <legend>Theme</legend>
-          <div class="sb-control-row">
-            <label>Light / Dark</label>
-            <div class="sb-theme-toggle">
-              <button :class="{ active: theme === 'light' }" @click="setTheme('light')">Light</button>
-              <button :class="{ active: theme === 'dark' }" @click="setTheme('dark')">Dark</button>
-            </div>
-          </div>
-        </fieldset>
-
-        <fieldset>
-          <legend>Indicator</legend>
-          <div class="sb-control-row">
-            <label for="sb-indicator-color">Indicator colour</label>
-            <input id="sb-indicator-color" v-model="controls.indicatorColor" type="color" />
-          </div>
-        </fieldset>
-
-        <fieldset>
-          <legend>Horizontal nav links</legend>
-          <div class="sb-control-row">
-            <label for="sb-link-color">Link colour</label>
-            <input id="sb-link-color" v-model="controls.linkColor" type="color" />
-          </div>
-          <div class="sb-control-row">
-            <label for="sb-link-hover-color">Hover colour</label>
-            <input id="sb-link-hover-color" v-model="controls.linkHoverColor" type="color" />
-          </div>
-          <div class="sb-control-row">
-            <label for="sb-link-active-color">Active colour</label>
-            <input id="sb-link-active-color" v-model="controls.linkActiveColor" type="color" />
+        <fieldset v-for="{ group, controls } in groups" :key="group">
+          <legend>{{ group }}</legend>
+          <div v-for="control in controls" :key="control.token" class="sb-control-row">
+            <label :for="control.token">{{ control.label }}</label>
+            <input
+              :id="control.token"
+              type="color"
+              :value="overrides[control.token] ?? '#000000'"
+              @input="setOverride(control.token, $event)"
+            />
+            <button
+              v-if="overrides[control.token]"
+              type="button"
+              class="sb-reset-btn"
+              @click="resetOverride(control.token)"
+            >
+              Reset
+            </button>
+            <span v-else class="sb-default-badge">default</span>
           </div>
         </fieldset>
-
-        <fieldset>
-          <legend>Mobile panel</legend>
-          <div class="sb-control-row">
-            <label for="sb-panel-bg">Panel background</label>
-            <input id="sb-panel-bg" v-model="controls.panelBg" type="color" />
-          </div>
-          <div class="sb-control-row">
-            <label for="sb-panel-link-color">Panel link colour</label>
-            <input id="sb-panel-link-color" v-model="controls.panelLinkColor" type="color" />
-          </div>
-        </fieldset>
-
-        <fieldset>
-          <legend>Burger</legend>
-          <div class="sb-control-row">
-            <label for="sb-burger-color">Burger colour</label>
-            <input id="sb-burger-color" v-model="controls.burgerColor" type="color" />
-          </div>
-        </fieldset>
-
       </div>
 
-      <!-- CSS snippet -->
       <div class="sb-css-snippet">
         <div class="sb-css-snippet-header">
           <strong>CSS Token Snippet</strong>
-          <button class="sb-copy-btn" @click="copySnippet">{{ copied ? 'Copied!' : 'Copy' }}</button>
+          <button class="sb-copy-btn" type="button" @click="copySnippet">{{ copied ? 'Copied!' : 'Copy' }}</button>
         </div>
         <pre class="sb-css-snippet-code">{{ cssSnippet }}</pre>
       </div>
 
+      <component is="style">
+        .sb-tabnav-story { font-size: 1.4rem; display: grid; gap: 2.4rem; padding: 2.4rem; }
+        .sb-tabnav-note { font-size: 1.3rem; opacity: 0.7; font-style: italic; }
+        .sb-tabnav-note code { font-family: monospace; background: rgba(128,128,128,0.15); padding: 0.1em 0.4em; border-radius: 0.2rem; }
+        .sb-tabnav-header {
+          display: flex; align-items: center; gap: 3.2rem; padding: 1.2rem 2.4rem;
+          position: relative; min-height: 6rem; border-radius: 0.4rem;
+          border: 1px solid rgba(128,128,128,0.3);
+        }
+        .sb-tabnav-logo { font-size: 1.8rem; font-weight: 700; letter-spacing: 0.1em; flex-shrink: 0; opacity: 0.5; }
+        .sb-tabnav-header .tab-navigation { flex: 1; min-width: 0; }
+        .sb-tabnav-playground { display: grid; grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); gap: 1.6rem; }
+        .sb-tabnav-playground fieldset { border: 1px solid #ccc; border-radius: 0.4rem; padding: 1.6rem; }
+        .sb-tabnav-playground legend { font-weight: bold; padding: 0 0.8rem; font-size: 1.4rem; }
+        .sb-control-row { display: grid; grid-template-columns: 1fr 8rem 6rem; gap: 1rem; align-items: center; padding: 0.5rem 0; font-size: 1.3rem; }
+        .sb-control-row input[type="color"] { height: 3.2rem; width: 100%; padding: 0.2rem; border: 1px solid #ccc; border-radius: 0.2rem; cursor: pointer; background: transparent; }
+        .sb-default-badge { font-size: 1.1rem; opacity: 0.6; text-align: center; }
+        .sb-css-snippet { border: 1px solid #ccc; border-radius: 0.4rem; overflow: hidden; }
+        .sb-css-snippet-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.6rem; border-bottom: 1px solid #ccc; font-size: 1.4rem; }
+        .sb-css-snippet-code { margin: 0; padding: 1.6rem; font-family: monospace; font-size: 1.3rem; line-height: 1.6; overflow-x: auto; white-space: pre; }
+        .sb-copy-btn, .sb-reset-btn { padding: 0.4rem 1.2rem; border: 1px solid #ccc; border-radius: 0.2rem; cursor: pointer; background: transparent; font-size: 1.3rem; color: inherit; }
+        .sb-copy-btn:hover, .sb-reset-btn:hover { background: #e0e0e0; }
+      </component>
     </div>
-
-    <style>
-      .sb-tabnav-story {
-        font-size: 1.4rem;
-        display: grid;
-        gap: 2.4rem;
-        padding: 2.4rem;
-      }
-      .sb-tabnav-note {
-        font-size: 1.3rem;
-        color: #888;
-        font-style: italic;
-      }
-      .sb-tabnav-note code {
-        font-family: monospace;
-        background: rgba(128,128,128,0.15);
-        padding: 0.1em 0.4em;
-        border-radius: 0.2rem;
-      }
-      .sb-tabnav-header {
-        display: flex;
-        align-items: center;
-        gap: 3.2rem;
-        padding: 1.2rem 2.4rem;
-        transition: background 300ms;
-        position: relative;
-        min-height: 6rem;
-        border-radius: 0.4rem;
-      }
-      .sb-tabnav-header.theme-dark {
-        background: var(--page-bg, #1a1614);
-        color-scheme: dark;
-      }
-      .sb-tabnav-header.theme-light {
-        background: var(--page-bg, #f5f2f0);
-        color-scheme: light;
-      }
-      .sb-tabnav-logo {
-        font-size: 1.8rem;
-        font-weight: 700;
-        letter-spacing: 0.1em;
-        flex-shrink: 0;
-        opacity: 0.5;
-      }
-      .sb-tabnav-header .tab-navigation {
-        flex: 1;
-        min-width: 0;
-      }
-      .sb-tabnav-playground {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
-        gap: 1.6rem;
-      }
-      .sb-tabnav-playground fieldset {
-        border: 1px solid #ccc;
-        border-radius: 0.4rem;
-        padding: 1.6rem;
-      }
-      .sb-tabnav-playground legend {
-        font-weight: bold;
-        padding: 0 0.8rem;
-        font-size: 1.4rem;
-      }
-      .sb-control-row {
-        display: grid;
-        grid-template-columns: 1fr 14rem;
-        gap: 1rem;
-        align-items: center;
-        padding: 0.5rem 0;
-        font-size: 1.3rem;
-      }
-      .sb-control-row input[type="color"] {
-        height: 3.2rem;
-        width: 100%;
-        padding: 0.2rem;
-        border: 1px solid #ccc;
-        border-radius: 0.2rem;
-        cursor: pointer;
-        background: transparent;
-      }
-      .sb-theme-toggle { display: flex; gap: 0.4rem; }
-      .sb-theme-toggle button {
-        padding: 0.4rem 1.6rem;
-        border: 1px solid #ccc;
-        border-radius: 0.2rem;
-        cursor: pointer;
-        background: transparent;
-        font-size: 1.3rem;
-        color: inherit;
-      }
-      .sb-theme-toggle button.active { background: #e0e0e0; font-weight: bold; }
-      .sb-css-snippet {
-        border: 1px solid #ccc;
-        border-radius: 0.4rem;
-        overflow: hidden;
-      }
-      .sb-css-snippet-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 1rem 1.6rem;
-        border-bottom: 1px solid #ccc;
-        font-size: 1.4rem;
-      }
-      .sb-css-snippet-code {
-        margin: 0;
-        padding: 1.6rem;
-        font-family: monospace;
-        font-size: 1.3rem;
-        line-height: 1.6;
-        overflow-x: auto;
-        white-space: pre;
-      }
-      .sb-copy-btn {
-        padding: 0.4rem 1.2rem;
-        border: 1px solid #ccc;
-        border-radius: 0.2rem;
-        cursor: pointer;
-        background: transparent;
-        font-size: 1.3rem;
-        color: inherit;
-      }
-      .sb-copy-btn:hover { background: #e0e0e0; }
-    </style>
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = { navAlign: "left" };
+
+// ─── Stress test ──────────────────────────────────────────────────────────────
+
+const longGerman = "Haarverlängerungsbehandlungsberatungsterminvereinbarung";
+
+const stressNavItemData: NavItemData = {
+  main: [
+    { text: "Startseite", href: "#start" },
+    { text: `${longGerman} und mehr`, href: "#lang" },
+    { text: "", href: "#blank" },
+    { text: "   ", href: "#spaces" },
+    { text: "😀 Emoji first", href: "#emoji", iconName: "this-icon:does-not-exist" },
+    { text: "<b>not bold</b>", href: "#html" },
+    { text: "تسريحات شعر جديدة", href: "#rtl" },
+    { text: "https://example.com/a/very/long/url/that/never/breaks/at/all", href: "https://example.com", isExternal: true },
+    { text: "Same href one", href: "#same" },
+    { text: "Same href two", href: "#same" },
+    { text: "No href" },
+    { text: "A", href: "#a" },
+  ],
+};
+
+export const StressTest: StoryObj<typeof TabNavigationComponent> = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    ariaLabel: "Hauptnavigation",
+    openMenuLabel: "Navigationsmenü öffnen",
+    closeMenuLabel: "Navigationsmenü schließen",
+  },
+  render: (args) => ({
+    components: { TabNavigationComponent },
+    setup() {
+      return { args, stressNavItemData };
+    },
+    template: `
+      <div
+        style="position: relative; display: flex; align-items: center; gap: 2.4rem; padding: 1.2rem 2.4rem; min-height: 6rem;"
+      >
+        <strong style="flex-shrink: 0;">LOGO</strong>
+        <TabNavigationComponent v-bind="args" :nav-item-data="stressNavItemData" style="flex: 1; min-inline-size: 0;" />
+      </div>
+    `,
+  }),
+  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-block-end: 40rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    initialCanvas: "fullWidthCanvas",
+    docs: {
+      description: {
+        story:
+          "Deliberately hostile data to find breakage: twelve items including a long German compound word, an unbroken " +
+          "URL, emoji (with a broken icon name), HTML-like text (must render as text), right-to-left Arabic, a single " +
+          "character, two items sharing an href, one with no href, and two blank labels (skipped: a link with no text " +
+          "has no accessible name), plus German landmark and burger labels." +
+          " Check at every canvas width: the bar " +
+          "collapses to the burger as soon as the items don\x27t fit rather than overflowing; in the open panel every " +
+          "label wraps inside the panel; Tab shows a focus ring on each link; and the burger\x27s label switches language.",
+      },
+    },
+  },
+};

package/app/components/02.molecules/navigation/tab-navigation/tests/TabNavigation.spec.ts

@@ -331,9 +331,49 @@ describe("TabNavigation", () => {
       expect(wrapper.find(".tab-nav-panel").attributes("inert")).toBeUndefined();
     });
 
-    it("panel has aria-controls pointing to tab-nav-panel", async () => {
+    it("burger aria-controls points at the panel's own unique id", async () => {
       const { wrapper } = await mountCollapsed();
-      expect(wrapper.find(".tab-nav-burger").attributes("aria-controls")).toBe("tab-nav-panel");
+      const panelId = wrapper.find(".tab-nav-panel").attributes("id");
+      expect(panelId).toBeTruthy();
+      expect(panelId).not.toBe("tab-nav-panel");
+      expect(wrapper.find(".tab-nav-burger").attributes("aria-controls")).toBe(panelId);
     });
+
+    it("uses openMenuLabel / closeMenuLabel for the burger", async () => {
+      const wrapper = await mountSuspended(TabNavigation, {
+        props: { navItemData: defaultNavItemData, openMenuLabel: "Menü öffnen", closeMenuLabel: "Menü schließen" },
+      });
+      const setup = (wrapper.vm as unknown as { $: { setupState: TabNavSetup } }).$.setupState;
+      setup.isCollapsed = true;
+      await nextTick();
+      expect(wrapper.find(".tab-nav-burger").text()).toContain("Menü öffnen");
+      await wrapper.find(".tab-nav-burger").trigger("click");
+      expect(wrapper.find(".tab-nav-burger").text()).toContain("Menü schließen");
+    });
+  });
+
+  // ─── Worst-case data ─────────────────────────────────────────────────────
+
+  it("skips items with blank text", async () => {
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: {
+        navItemData: { main: [{ text: "Home", href: "/" }, { text: "  ", href: "/blank" }, { text: "", href: "/empty" }] },
+      },
+    });
+    expect(wrapper.findAll(".tab-nav-link")).toHaveLength(1);
+  });
+
+  it("renders duplicate and missing hrefs without collapsing items", async () => {
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: {
+        navItemData: { main: [{ text: "One", href: "/same" }, { text: "Two", href: "/same" }, { text: "Three" }, { text: "Four" }] },
+      },
+    });
+    expect(wrapper.findAll(".tab-nav-link")).toHaveLength(4);
+  });
+
+  it("renders no nav landmark when there are no items", async () => {
+    const wrapper = await mountSuspended(TabNavigation, { props: { navItemData: { main: [] } } });
+    expect(wrapper.find("nav").exists()).toBe(false);
   });
 });

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