srcdev-nuxt-components 9.5.7 → 9.6.0

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

package/app/components/02.molecules/navigation/tab-navigation/TabNavigation.vue

@@ -1,5 +1,6 @@
 <template>
   <nav
+    v-if="visibleItems.length"
     ref="navRef"
     class="tab-navigation"
     :class="[
@@ -11,8 +12,8 @@
   >
     <ul v-if="!isCollapsed || !isLoaded" ref="navListRef" class="tab-nav-list" @mouseleave="hoveredItemHref = null">
       <li
-        v-for="item in navItemData.main"
-        :key="item.href"
+        v-for="(item, index) in visibleItems"
+        :key="`${index}-${item.href}`"
         :data-href="item.href"
         :class="[
           item.cssName,
@@ -55,9 +56,9 @@
       class="tab-nav-burger"
       :class="{ 'is-open': isMenuOpen }"
       variant="tertiary"
-      :button-text="isMenuOpen ? 'Close navigation menu' : 'Open navigation menu'"
+      :button-text="isMenuOpen ? closeMenuLabel : openMenuLabel"
       :aria-expanded="String(isMenuOpen)"
-      aria-controls="tab-nav-panel"
+      :aria-controls="panelId"
       @click="toggleMenu"
     >
       <template #iconOnly>
@@ -79,14 +80,14 @@
 
     <div
       v-if="showCollapsed"
-      id="tab-nav-panel"
+      :id="panelId"
       class="tab-nav-panel"
       :class="{ 'is-open': isMenuOpen }"
       :inert="!isMenuOpen ? true : undefined"
     >
       <div class="tab-nav-panel-inner">
         <ul class="tab-nav-panel-list">
-          <li v-for="item in navItemData.main" :key="item.href" :class="item.cssName">
+          <li v-for="(item, index) in visibleItems" :key="`${index}-${item.href}`" :class="item.cssName">
             <a
               v-if="item.href?.startsWith('#')"
               :href="item.href"
@@ -133,6 +134,10 @@ interface Props {
   anchorScrollOffset?: number | (() => number);
   /** aria-label on the nav landmark — override for localisation. */
   ariaLabel?: string;
+  /** Burger button label while the menu is closed — override for localisation. */
+  openMenuLabel?: string;
+  /** Burger button label while the menu is open — override for localisation. */
+  closeMenuLabel?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -140,8 +145,22 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
   anchorScrollOffset: undefined,
   ariaLabel: "Site navigation",
+  openMenuLabel: "Open navigation menu",
+  closeMenuLabel: "Close navigation menu",
 });
 
+if (import.meta.dev) {
+  console.warn(
+    "TabNavigation is deprecated: use ResponsiveHeader, which also handles #anchor links " +
+      "(anchorScrollOffset) and collapses item by item. See \"Migrating from TabNavigation\" in " +
+      ".claude/skills/components/responsive-header.md."
+  );
+}
+
+// Items with no text would render links with no accessible name.
+const visibleItems = computed(() => (props.navItemData.main ?? []).filter((item) => item.text?.trim()));
+const panelId = useId();
+
 const { navRef, navListRef, isCollapsed, isLoaded, isMenuOpen, isActiveItem, toggleMenu, closeMenu } =
   useNavCollapse("tab-nav-loaded");
 
@@ -149,7 +168,7 @@ const { handleNavClick, activeHash } = useAnchorScroll({ offset: props.anchorScr
 
 onMounted(() => {
   if (!activeHash.value) {
-    const firstHashItem = props.navItemData.main?.find((item) => item.href?.startsWith("#"));
+    const firstHashItem = visibleItems.value.find((item) => item.href?.startsWith("#"));
     if (firstHashItem?.href) activeHash.value = firstHashItem.href;
   }
 });
@@ -209,25 +228,22 @@ watch(
     /* ─── Public token API ────────────────────────────────────────────── */
 
     /* Horizontal nav */
-    --_link-color: var(--tab-nav-link-color, var(--slate-01, currentColor));
+    --_link-color: var(--tab-nav-link-color, var(--theme-text));
+    --_link-hover-color: var(--tab-nav-link-hover-color, var(--theme-accent));
     --_link-size: var(--tab-nav-link-size, 1.6rem);
     --_link-tracking: var(--tab-nav-link-tracking, 0.06em);
     --_link-weight: var(--tab-nav-link-weight, 400);
     --_nav-transition: var(--tab-nav-transition, 250ms ease);
 
     /* Panel */
-    --_panel-border-color: var(
-      --tab-nav-panel-border-color,
-      color-mix(in oklch, var(--slate-01, #c0847a) 35%, transparent)
-    );
-    --_panel-link-color: var(--tab-nav-panel-link-color, var(--slate-01, currentColor));
+    --_panel-link-color: var(--tab-nav-panel-link-color, var(--_link-color));
     --_panel-slide-duration: var(--tab-nav-panel-slide-duration, 350ms);
     --_panel-slide-easing: var(--tab-nav-panel-slide-easing, cubic-bezier(0.4, 0, 0.2, 1));
 
     /* Burger */
     --_burger-bar-height: var(--tab-nav-burger-height, 1.5px);
     --_burger-bar-gap: var(--tab-nav-burger-gap, 5px);
-    --_burger-color: var(--tab-nav-burger-color, var(--slate-01, currentColor));
+    --_burger-color: var(--tab-nav-burger-color, var(--_link-color));
     --_burger-transition: var(--tab-nav-burger-transition, 300ms ease);
 
     /* ─────────────────────────────────────────────────────────────────── */
@@ -287,12 +303,17 @@ watch(
 
         &:hover,
         &:focus-visible {
-          color: var(--tab-nav-link-hover-color, var(--slate-04, var(--_link-color)));
+          color: var(--_link-hover-color);
           outline: none;
         }
 
+        &:focus-visible {
+          outline: var(--tab-nav-focus-ring-width, 2px) solid var(--tab-nav-focus-ring-colour, currentColor);
+          outline-offset: var(--tab-nav-focus-ring-offset, 2px);
+        }
+
         &.router-link-exact-active {
-          color: var(--tab-nav-link-active-color, var(--slate-01, var(--_link-color)));
+          color: var(--tab-nav-link-active-color, var(--_link-color));
         }
       }
     }
@@ -390,12 +411,12 @@ watch(
 
       &.is-open {
         grid-template-rows: 1fr;
-        border-block-start-color: var(--_panel-border-color);
+        border-block-start-color: var(--tab-nav-panel-border-color, color-mix(in oklch, var(--_link-color) 20%, transparent));
       }
 
       .tab-nav-panel-inner {
         overflow: hidden;
-        background-color: var(--tab-nav-panel-bg, var(--page-bg, #1a1614));
+        background-color: var(--tab-nav-panel-bg, var(--page-bg, var(--theme-surface-subtle)));
       }
 
       .tab-nav-panel-list {
@@ -404,14 +425,18 @@ watch(
         padding: 0;
 
         li {
-          border-block-end: 1px solid var(--tab-nav-panel-item-border, color-mix(in oklch, var(--slate-01, white) 8%, transparent));
+          border-block-end: 1px solid
+            var(--tab-nav-panel-item-border, color-mix(in oklch, var(--_panel-link-color) 12%, transparent));
 
           &:last-child {
             border-block-end: none;
           }
 
           &:hover {
-            background-color: color-mix(in oklch, var(--slate-01, white) 5%, transparent);
+            background-color: var(
+              --tab-nav-panel-item-hover-bg,
+              color-mix(in oklch, var(--_panel-link-color) 5%, transparent)
+            );
           }
         }
 
@@ -426,18 +451,25 @@ watch(
           text-decoration: none;
           padding-block: var(--tab-nav-panel-padding-block, 1.4rem);
           padding-inline: var(--tab-nav-panel-padding-inline, 1.5rem);
+          overflow-wrap: anywhere;
+          min-inline-size: 0;
           position: relative;
           z-index: 1;
           transition: color var(--_nav-transition);
 
           &:hover,
           &:focus-visible {
-            color: var(--tab-nav-panel-link-hover-color, var(--slate-04, var(--_panel-link-color)));
+            color: var(--tab-nav-panel-link-hover-color, var(--_link-hover-color));
             outline: none;
           }
 
+          &:focus-visible {
+            outline: var(--tab-nav-focus-ring-width, 2px) solid var(--tab-nav-focus-ring-colour, currentColor);
+            outline-offset: calc(-1 * var(--tab-nav-focus-ring-width, 2px));
+          }
+
           &.router-link-exact-active {
-            color: var(--tab-nav-panel-link-active-color, var(--slate-01, var(--_panel-link-color)));
+            color: var(--tab-nav-panel-link-active-color, var(--_panel-link-color));
           }
         }
       }
@@ -504,7 +536,7 @@ watch(
     bottom: 0;
     height: 2px;
     pointer-events: none;
-    background-color: var(--tab-nav-decorator-indicator-color, var(--slate-01, currentColor));
+    background-color: var(--tab-nav-decorator-indicator-color, var(--theme-accent));
     z-index: 3;
   }