srcdev-nuxt-components 9.5.6 → 9.6.0

package/.vscode/srcdev-component-services-card.code-snippets

@@ -85,6 +85,7 @@
       "    --services-card-outline-width: ;",
       "    --services-card-outline-colour: ;",
       "    --services-card-outline-colour-hover: ;",
+      "    --services-card-outline-colour-focus: ;",
       "    --services-card-outline-offset: ;",
       "    --services-card-outline-offset-hover: ;",
       "    --services-card-background-color-hover: ;",
@@ -94,44 +95,45 @@
       "    --services-card-background-color: ;",
       "    --services-card-padding-block: ;",
       "    --services-card-padding-inline: ;",
-      "    --image-wrapper-aspect-ratio: ;",
-      "    --image-wrapper-border-radius: ;",
-      "    --image-wrapper-padding-block: ;",
-      "    --image-wrapper-padding-inline: ;",
-      "    --image-wrapper-border-image-zoom-transform: ;",
-      "    --details-wrapper-grid-gap: ;",
-      "    --details-wrapper-padding-block: ;",
-      "    --details-wrapper-padding-inline: ;",
-      "    --eyebrow-text-padding-block: ;",
-      "    --hero-text-padding-block: ;",
-      "    --description-text-colour: ;",
-      "    --description-padding-block: ;",
-      "    --description-line-height: ;",
-      "    --description-font-weight: ;",
-      "    --description-line-clamp: ;",
-      "    --meta-padding-block: ;",
-      "    --meta-border-colour: ;",
-      "    --meta-text-colour: ;",
-      "    --meta-duration-text-colour: ;",
-      "    --meta-price-text-colour: ;",
-      "    --meta-duration-font-weight: ;",
-      "    --meta-price-font-weight: ;",
-      "    --meta-letter-spacing: ;",
-      "    --meta-font-size: ;",
-      "    --meta-text-transform: ;",
-      "    --footer-padding-block: ;",
-      "    --footer-wrapper-grid-gap: ;",
+      "    --services-card-image-aspect-ratio: ;",
+      "    --services-card-image-border-radius: ;",
+      "    --services-card-image-padding-block: ;",
+      "    --services-card-image-padding-inline: ;",
+      "    --services-card-image-zoom-transform: ;",
+      "    --services-card-details-gap: ;",
+      "    --services-card-details-padding-block: ;",
+      "    --services-card-details-padding-inline: ;",
+      "    --services-card-eyebrow-padding-block: ;",
+      "    --services-card-title-padding-block: ;",
+      "    --services-card-description-text-colour: ;",
+      "    --services-card-description-padding-block: ;",
+      "    --services-card-description-line-height: ;",
+      "    --services-card-description-font-weight: ;",
+      "    --services-card-description-line-clamp: ;",
+      "    --services-card-meta-padding-block: ;",
+      "    --services-card-meta-border-colour: ;",
+      "    --services-card-meta-text-colour: ;",
+      "    --services-card-meta-duration-text-colour: ;",
+      "    --services-card-meta-price-text-colour: ;",
+      "    --services-card-meta-duration-font-weight: ;",
+      "    --services-card-meta-price-font-weight: ;",
+      "    --services-card-meta-letter-spacing: ;",
+      "    --services-card-meta-font-size: ;",
+      "    --services-card-meta-text-transform: ;",
+      "    --services-card-meta-gap: ;",
+      "    --services-card-footer-padding-block: ;",
+      "    --services-card-footer-gap: ;",
       "",
       "    /* Titles over the image (titlesWithinImageWrapper) */",
-      "    --image-wrapper-details-scrim-colour: ;",
-      "    --image-wrapper-details-scrim: ;",
-      "    --image-wrapper-details-text-colour: ;",
-      "    --image-wrapper-details-eyebrow-text-colour: ;",
-      "    --image-wrapper-details-gap: ;",
-      "    --image-wrapper-details-eyebrow-text-padding-block: ;",
-      "    --image-wrapper-details-eyebrow-text-padding-inline: ;",
-      "    --image-wrapper-details-hero-text-padding-block: ;",
-      "    --image-wrapper-details-hero-text-padding-inline: ;",
+      "    --services-card-image-details-scrim-colour: ;",
+      "    --services-card-image-details-scrim: ;",
+      "    --services-card-image-details-text-colour: ;",
+      "    --services-card-image-details-eyebrow-colour: ;",
+      "    --services-card-image-details-gap: ;",
+      "    --services-card-image-details-eyebrow-padding-block: ;",
+      "    --services-card-image-details-eyebrow-padding-inline: ;",
+      "    --services-card-image-details-title-padding-block: ;",
+      "    --services-card-image-details-title-padding-inline: ;",
       "  }",
       "}"
     ]

package/.vscode/srcdev-component-services-grids.code-snippets

@@ -29,7 +29,8 @@
       ".$1my-page {",
       "  --services-card-grid-column-min-width: $2;",
       "  --services-card-grid-gap: $3;",
-      "  --service-summary-grid-row-gap: $4;",
+      "  --services-card-grid-button-text-white-space: $4;",
+      "  --service-summary-grid-row-gap: $5;",
       "}"
     ]
   }

package/.vscode/srcdev-component-site-header.code-snippets

@@ -40,9 +40,11 @@
       "  main-nav-aria-label=\"${3:Main navigation}\"",
       "  secondary-nav-aria-label=\"${4:Secondary navigation}\"",
       "  overflow-menu-aria-label=\"${5:Overflow navigation menu}\"",
+      "  overflow-button-label=\"${6:More navigation}\"",
+      "  submenu-aria-label=\"${7:{title\\} submenu}\"",
       ">",
       "  <template #branding>",
-      "    <NuxtLink to=\"/\" class=\"home-link\">$6Brand</NuxtLink>",
+      "    <NuxtLink to=\"/\" class=\"home-link\">$8Brand</NuxtLink>",
       "  </template>",
       "</SiteHeader>"
     ]

package/.vscode/srcdev-component-tab-navigation.code-snippets

@@ -10,7 +10,7 @@
     "description": "TabNavigation with a localised aria-label",
     "scope": "vue,html",
     "body": [
-      "<TabNavigation :nav-item-data=\"$1navData\" aria-label=\"${2:Site navigation}\" />"
+      "<TabNavigation :nav-item-data=\"$1navData\" aria-label=\"${2:Site navigation}\" open-menu-label=\"${3:Open navigation menu}\" close-menu-label=\"${4:Close navigation menu}\" />"
     ]
   },
   "SRCDEV TabNavigation Nav Data Script": {

package/app/components/01.atoms/display-pill/CONSUMER-STYLING.md

@@ -73,6 +73,9 @@ keeps the same proportions. Tune a **ratio** to change spacing across all sizes,
 Private tokens (not public API): `--_background`, `--_text-colour`, `--_font-size`, `--_padding-inline`,
 `--_padding-block`, `--_padding-inline-icon` (derived from `--_icon-size`), `--_icon-size`, swapped by the size and variant classes.
 
+> **Changed 2026-10-06**: a pill is capped at its container's width (`max-inline-size: 100%`), and a
+> label too long for it ends in an ellipsis instead of overflowing. Short labels are unaffected.
+
 ## State hooks
 
 - Size class: `.sm`, `.md`, `.lg`. Variant class: `.default`, `.primary`, `.success`, `.warning`,

package/app/components/01.atoms/display-pill/DisplayPill.vue

@@ -105,6 +105,7 @@ watch(
     line-height: 1;
     white-space: nowrap;
     width: fit-content;
+    max-inline-size: 100%;
     cursor: default;
     user-select: none;
 
@@ -128,8 +129,10 @@ watch(
     }
 
     .display-pill-label {
-      display: inline-flex;
-      align-items: center;
+      display: block;
+      min-inline-size: 0;
+      overflow-x: clip;
+      text-overflow: ellipsis;
     }
 
     &.sm {

package/app/components/01.atoms/navigation/breadcrumb/Breadcrumb.vue

@@ -1,12 +1,12 @@
 <template>
-  <nav class="breadcrumb" :class="[elementClasses]" :aria-label="ariaLabel">
+  <nav v-if="visibleItems.length" class="breadcrumb" :class="[elementClasses]" :aria-label="ariaLabel">
     <ol class="breadcrumb__list">
-      <li v-for="(item, index) in items" :key="`${item.label}-${index}`" class="breadcrumb__item">
+      <li v-for="(item, index) in visibleItems" :key="`${item.label}-${index}`" class="breadcrumb__item">
         <NuxtLink v-if="item.to" :to="item.to" class="breadcrumb__link">{{ item.label }}</NuxtLink>
-        <span v-else class="breadcrumb__label" :aria-current="index === items.length - 1 ? 'page' : undefined">{{
+        <span v-else class="breadcrumb__label" :aria-current="index === visibleItems.length - 1 ? 'page' : undefined">{{
           item.label
         }}</span>
-        <span v-if="index < items.length - 1" class="breadcrumb__separator" aria-hidden="true">{{ separator }}</span>
+        <span v-if="separator && index < visibleItems.length - 1" class="breadcrumb__separator" aria-hidden="true">{{ separator }}</span>
       </li>
     </ol>
   </nav>
@@ -29,6 +29,9 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
+// Blank labels would render an empty crumb with a dangling separator.
+const visibleItems = computed(() => props.items.filter((item) => item.label?.trim()));
+
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(
@@ -63,11 +66,19 @@ watch(
       display: flex;
       align-items: center;
       gap: var(--_gap);
+      min-inline-size: 0;
     }
 
     .breadcrumb__link,
     .breadcrumb__label {
       color: var(--_colour);
+      min-inline-size: 0;
+      overflow-wrap: anywhere;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      -webkit-line-clamp: var(--breadcrumb-item-line-clamp, none);
+      line-clamp: var(--breadcrumb-item-line-clamp, none);
     }
 
     .breadcrumb__label[aria-current="page"] {
@@ -84,6 +95,7 @@ watch(
     }
 
     .breadcrumb__separator {
+      flex-shrink: 0;
       color: var(--_colour);
       opacity: 0.6;
     }

package/app/components/01.atoms/navigation/breadcrumb/CONSUMER-STYLING.md

@@ -9,8 +9,11 @@
 | `--breadcrumb-text-transform` | `uppercase` | Text transform of the whole trail |
 | `--breadcrumb-letter-spacing` | `0.05em` | Letter spacing of the whole trail |
 | `--breadcrumb-colour` | `currentColor` | Colour of links, separators, and non-current labels |
-| `--breadcrumb-colour-current` | `currentColor` | Colour of the current-page item (the one without a `to`) |
+| `--breadcrumb-colour-current` | `currentColor` | Colour of the current-page item (the last item, when it has no `to`) |
 | `--breadcrumb-link-decoration-hover` | `underline` | `text-decoration` on link hover/focus |
+| `--breadcrumb-item-line-clamp` | `none` | Max lines of each item's label, with an ellipsis on the last. `1` is single-line ellipsis, `none` shows everything |
+
+> Added 2026-10-06: `--breadcrumb-item-line-clamp`; long unbroken labels now wrap inside the trail.
 
 ```css
 .breadcrumb {
@@ -21,9 +24,21 @@
 
 ---
 
+## State hooks
+
+| Hook | When |
+|---|---|
+| `.breadcrumb__label[aria-current="page"]` | The last item, when it has no `to` (styled by `--breadcrumb-colour-current`) |
+
+Inner classes: `.breadcrumb__list`, `.breadcrumb__item`, `.breadcrumb__link`, `.breadcrumb__label`,
+`.breadcrumb__separator`.
+
+---
+
 ## Text content — props, not CSS
 
-`items` and `separator` are props. There is no hardcoded copy to override in CSS.
+`items`, `separator` and `ariaLabel` (the nav landmark's label) are props. There is no hardcoded copy to
+override in CSS.
 
 ---
 
@@ -37,11 +52,19 @@ Set the tokens above on an element you own (a page or section class, or a class
 
 ---
 
+## Class passthrough
+
+`style-class-passthrough` adds classes to the root `nav.breadcrumb`. Reactive after mount.
+
+---
+
 ## Notes
 
-- An item renders as a `NuxtLink` when it has a `to`, otherwise as `<span aria-current="page">` —
-  omit `to` on whichever item represents the current page (usually the last one).
-- The separator (`aria-hidden="true"`) is only rendered between items, never after the last one.
+- An item renders as a `NuxtLink` when it has a `to`, otherwise as a plain `<span>`. The last item gets
+  `aria-current="page"` when it has no `to`, so omit `to` on the current page's item.
+- The separator (`aria-hidden="true"`) is only rendered between items, never after the last one, and
+  not at all when `separator` is `""`.
+- Items with a blank `label` are skipped, and no `<nav>` is rendered when none are left (added 2026-10-06).
 - `--breadcrumb-colour` is what `ServiceDetail` overrides internally (to `white` by default) so
   the breadcrumb reads over its hero image — see `ServiceDetail`'s `CONSUMER-STYLING.md`.
 

package/app/components/01.atoms/navigation/breadcrumb/stories/Breadcrumb.stories.ts

@@ -1,6 +1,9 @@
+import { computed, ref } from "vue";
 import Breadcrumb from "../Breadcrumb.vue";
+import CanvasSwitcher from "../../../canvas-switcher/CanvasSwitcher.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 import type { BreadcrumbItem } from "~/types/components/breadcrumb";
+import type { MediaCanvas } from "~/types/components";
 
 const meta: Meta<typeof Breadcrumb> = {
   title: "Atoms/Navigation/Breadcrumb",
@@ -14,6 +17,10 @@ const meta: Meta<typeof Breadcrumb> = {
       control: "text",
       description: "Character or short string rendered between items",
     },
+    ariaLabel: {
+      control: "text",
+      description: "aria-label on the nav landmark; override for localisation",
+    },
     styleClassPassthrough: {
       control: "object",
       description: "Additional CSS classes applied to the root element",
@@ -21,6 +28,7 @@ const meta: Meta<typeof Breadcrumb> = {
   },
   args: {
     separator: "/",
+    ariaLabel: "Breadcrumb",
     styleClassPassthrough: [],
   },
   parameters: {
@@ -85,3 +93,89 @@ export const CustomSeparator: Story = {
     template: `<Breadcrumb v-bind="args" />`,
   }),
 };
+
+// ─── Stress test ──────────────────────────────────────────────────────────────
+
+type LineClamp = "none" | "1" | "2" | "3";
+
+// Story-only arg: drives a CSS token, not a Breadcrumb prop. See the argTypes entry.
+type StressArgs = InstanceType<typeof Breadcrumb>["$props"] & { itemLineClamp: LineClamp };
+
+const longGerman = "Haarverlängerungsbehandlungsberatungsterminvereinbarung";
+
+const stressItems: BreadcrumbItem[] = [
+  { label: "Startseite", to: "/" },
+  { label: `Kategorie ${longGerman}`, to: "/kategorie" },
+  { label: "" },
+  { label: "   " },
+  { label: "😀 Emoji first", to: "/emoji" },
+  { label: "<b>not bold</b>", to: "/html" },
+  { label: "تسريحات شعر جديدة لموسم الخريف", to: "/rtl" },
+  { label: "https://example.com/a/very/long/url/that/never/breaks/because/it/has/no/spaces", to: "/url" },
+  { label: "A", to: "/a" },
+  { label: `${longGerman} und ${longGerman}` },
+];
+
+export const StressTest: StoryObj<StressArgs> = {
+  name: "Stress Test (Worst-Case Data)",
+  argTypes: {
+    itemLineClamp: {
+      control: "select",
+      options: ["none", "1", "2", "3"] satisfies LineClamp[],
+      description:
+        "**Story control, not a prop.** Sets the `--breadcrumb-item-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. `.page-header { --breadcrumb-item-line-clamp: 1; }`. " +
+        "`1` is single-line ellipsis, `none` (the default) shows everything.",
+      table: { category: "CSS tokens (story only, set in your CSS)", defaultValue: { summary: "none" } },
+    },
+  },
+  args: {
+    items: stressItems,
+    separator: "→→",
+    ariaLabel: "Navigationspfad",
+    itemLineClamp: "none",
+  },
+  render: (args) => ({
+    components: { Breadcrumb },
+    setup() {
+      const componentArgs = computed(() => {
+        const { itemLineClamp: _itemLineClamp, ...rest } = args;
+        return rest;
+      });
+      const tokenStyles = computed(() => ({ "--breadcrumb-item-line-clamp": args.itemLineClamp }));
+      return { componentArgs, tokenStyles };
+    },
+    template: `<div :style="tokenStyles"><Breadcrumb v-bind="componentArgs" /></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: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "Deliberately hostile data to find breakage: ten items including a long German compound word, an unbroken URL, " +
+          "emoji, HTML-like text (must render as text), right-to-left Arabic, a single character, and two blank labels " +
+          "(skipped, with no dangling separator), plus a two-character separator and a German nav label. Check at every " +
+          "canvas width: labels wrap inside the trail, separators keep their size, and the last item is the current page. " +
+          "Try the Item line clamp control too: it\x27s a CSS token set by the story, not a prop.",
+      },
+    },
+  },
+};

package/app/components/01.atoms/navigation/breadcrumb/tests/Breadcrumb.spec.ts

@@ -84,4 +84,31 @@ describe("Breadcrumb", () => {
     expect(wrapper.classes()).not.toContain("original");
     expect(wrapper.classes()).toContain("updated");
   });
+
+  // ─── Worst-case data ───────────────────────────────────────────────────
+
+  it("skips blank labels without leaving a dangling separator", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, {
+      props: { items: [{ label: "Services", to: "/services" }, { label: "  " }, { label: "Balayage" }, { label: "" }] },
+    });
+    expect(wrapper.findAll(".breadcrumb__item")).toHaveLength(2);
+    expect(wrapper.findAll(".breadcrumb__separator")).toHaveLength(1);
+    expect(wrapper.find(".breadcrumb__label").attributes("aria-current")).toBe("page");
+  });
+
+  it("renders no nav landmark when there is nothing to show", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items: [{ label: "" }] } });
+    expect(wrapper.find("nav").exists()).toBe(false);
+  });
+
+  it("renders no separator element when separator is empty", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items, separator: "" } });
+    expect(wrapper.find(".breadcrumb__separator").exists()).toBe(false);
+  });
+
+  it("renders HTML-like labels as text", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items: [{ label: "<b>bold</b>" }] } });
+    expect(wrapper.find(".breadcrumb__label").text()).toBe("<b>bold</b>");
+    expect(wrapper.find(".breadcrumb__label b").exists()).toBe(false);
+  });
 });

package/app/components/02.molecules/navigation/tab-navigation/CONSUMER-STYLING.md

@@ -1,5 +1,8 @@
 # TabNavigation — Consumer Styling Guide
 
+> **Deprecated (2026-10-06):** use `ResponsiveHeader`. The token mapping is in "Migrating from
+> TabNavigation" in `.claude/skills/components/responsive-header.md`.
+
 ## Public token API
 
 All `--tab-nav-*` tokens are the stable override surface. Set them at any scope (global, page, or
@@ -9,32 +12,46 @@ instance) without touching the component itself.
 
 | Token | Default | Controls |
 |---|---|---|
-| `--tab-nav-link-color` | `var(--slate-01, currentColor)` | Link text colour (rest state) |
-| `--tab-nav-link-hover-color` | `var(--slate-04, currentColor)` | Link text colour on hover |
-| `--tab-nav-link-active-color` | `var(--slate-01, currentColor)` | Link text colour when route is active |
+| `--tab-nav-link-color` | `var(--theme-text)` | Link text colour (rest state) |
+| `--tab-nav-link-hover-color` | `var(--theme-accent)` | Link text colour on hover |
+| `--tab-nav-link-active-color` | the link colour | Link text colour when route is active |
 | `--tab-nav-link-size` | `1.6rem` | Link font size |
 | `--tab-nav-link-weight` | `400` | Link font weight |
 | `--tab-nav-link-tracking` | `0.06em` | Link letter spacing |
 | `--tab-nav-gap` | `2.2rem` | Gap between nav items |
 | `--tab-nav-transition` | `250ms ease` | Colour transition on hover/active |
+| `--tab-nav-focus-ring-width` | `2px` | Keyboard focus ring width, on bar and panel links |
+| `--tab-nav-focus-ring-colour` | `currentColor` | Keyboard focus ring colour |
+| `--tab-nav-focus-ring-offset` | `2px` | Focus ring gap on bar links (panel links draw it inset) |
+
+> Changed 2026-10-06: keyboard focus now shows a ring. Before, `:focus-visible` only changed the
+> link colour (`outline: none`).
+
+> **Changed 2026-10-06: light defaults.** The colours used to assume a dark header (light `--slate-01`
+> links, burger and indicator; dark `#1a1614` panel), so on a light page they were light-on-light.
+> They now come from the light theme slots: links and burger `--theme-text`, hover and the indicator
+> `--theme-accent`, the panel `--page-bg` (else `--theme-surface-subtle`), dividers mixed from the link
+> colour. For a dark header, or dark mode, set the colour tokens yourself (e.g. with `light-dark()` in
+> your own overrides); the library ships light values only. New: `--tab-nav-panel-item-hover-bg`.
 
 ### Indicator decorators
 
 | Token | Default | Controls |
 |---|---|---|
-| `--tab-nav-decorator-indicator-color` | `var(--slate-01, currentColor)` | Active-item underline bar colour |
+| `--tab-nav-decorator-indicator-color` | `var(--theme-accent)` | Active-item underline bar colour |
 | `--tab-nav-decorator-hovered-bg` | `transparent` | Background fill pill that follows the pointer |
 
 ### Mobile panel
 
 | Token | Default | Controls |
 |---|---|---|
-| `--tab-nav-panel-bg` | `var(--page-bg, #1a1614)` | Panel background colour |
-| `--tab-nav-panel-border-color` | `color-mix(in oklch, var(--slate-01, #c0847a) 35%, transparent)` | Border between nav bar and open panel |
-| `--tab-nav-panel-item-border` | `color-mix(in oklch, var(--slate-01, white) 8%, transparent)` | Divider between panel items |
-| `--tab-nav-panel-link-color` | `var(--slate-01, currentColor)` | Panel link text colour |
-| `--tab-nav-panel-link-hover-color` | `var(--slate-04, currentColor)` | Panel link text colour on hover |
-| `--tab-nav-panel-link-active-color` | `var(--slate-01, currentColor)` | Panel active link colour |
+| `--tab-nav-panel-bg` | `var(--page-bg, var(--theme-surface-subtle))` | Panel background colour |
+| `--tab-nav-panel-border-color` | the link colour at 20% | Border between nav bar and open panel |
+| `--tab-nav-panel-item-border` | the panel link colour at 12% | Divider between panel items |
+| `--tab-nav-panel-item-hover-bg` | the panel link colour at 5% | Panel item background on hover |
+| `--tab-nav-panel-link-color` | the link colour | Panel link text colour |
+| `--tab-nav-panel-link-hover-color` | the link hover colour | Panel link text colour on hover |
+| `--tab-nav-panel-link-active-color` | the panel link colour | Panel active link colour |
 | `--tab-nav-panel-padding-block` | `1.4rem` | Panel link vertical padding |
 | `--tab-nav-panel-padding-inline` | `1.5rem` | Panel link horizontal padding |
 | `--tab-nav-panel-slide-duration` | `350ms` | Panel open/close animation duration |
@@ -44,7 +61,7 @@ instance) without touching the component itself.
 
 | Token | Default | Controls |
 |---|---|---|
-| `--tab-nav-burger-color` | `var(--slate-01, currentColor)` | Burger bar colour |
+| `--tab-nav-burger-color` | the link colour | Burger bar colour |
 | `--tab-nav-burger-width` | `22px` | Width of each burger bar |
 | `--tab-nav-burger-height` | `1.5px` | Height of each burger bar |
 | `--tab-nav-burger-gap` | `5px` | Gap between burger bars |
@@ -60,6 +77,24 @@ instance) without touching the component itself.
 
 ---
 
+## State hooks
+
+| Hook | When |
+|---|---|
+| `.tab-navigation.is-collapsed` | The items don't fit, so the bar shows the burger instead |
+| `.tab-navigation.menu-open`, `.tab-nav-burger.is-open`, `.tab-nav-panel.is-open`, `.tab-nav-backdrop.is-open` | The burger menu is open |
+| `.tab-navigation.is-loaded` | First measurement done (the nav is hidden before it, to avoid a wrong-state flash) |
+| `.tab-navigation.is-animated` | Indicator transitions are on (off for a frame during route changes) |
+| `.tab-navigation--left` / `--center` / `--right` | The `navAlign` prop |
+| `.tab-nav-list li.is-active` / `.is-hovered` | The active and hovered items (the indicators anchor to these) |
+| `.tab-nav-link.router-link-exact-active` | Route link for the current page |
+
+Inner classes: `.tab-nav-list`, `.tab-nav-link`, `.nav__hovered`, `.nav__active-indicator`, `.tab-nav-burger`,
+`.burger-bar`, `.tab-nav-panel`, `.tab-nav-panel-inner`, `.tab-nav-panel-list`, `.tab-nav-panel-link`,
+`.tab-nav-backdrop` (teleported to `<body>`). Each item's `cssName` is added to its `<li>`.
+
+---
+
 ## Global theming
 
 Create `assets/styles/setup/07.components/tab-navigation.css` in the consuming app and set tokens
@@ -134,6 +169,12 @@ Override tokens for a single page by scoping them under a page wrapper. No `:dee
 
 ---
 
+## Class passthrough
+
+`style-class-passthrough` adds classes to the root `nav.tab-navigation`. Reactive after mount.
+
+---
+
 ## Notes
 
 - The active underline indicator and hover pill use CSS Anchor Positioning. They animate via