srcdev-nuxt-components 9.4.11 → 9.5.0

package/app/components/02.molecules/expandable/expanding-panel/CONSUMER-STYLING.md

@@ -20,7 +20,7 @@ for why both are safe.
 
 ---
 
-## Global theming — recommended approach
+## Global theming
 
 Create `assets/styles/setup/07.components/expanding-panel.css` in the consuming app and set
 tokens on `:root`. This applies to every `ExpandingPanel` across the site.
@@ -36,7 +36,15 @@ tokens on `:root`. This applies to every `ExpandingPanel` across the site.
 
 ---
 
-## Page-scoped overrides
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+### Page or section
 
 Override tokens for a specific section by scoping them under the page or layout wrapper.
 No `:deep()` is required (component styles are unscoped).
@@ -50,9 +58,7 @@ No `:deep()` is required (component styles are unscoped).
 }
 ```
 
----
-
-## Per-instance overrides via styleClassPassthrough
+### One instance
 
 Use sparingly — prefer global or page-scoped CSS. When a single instance needs a distinct
 visual style, pass a modifier class:
@@ -104,3 +110,4 @@ visual style, pass a modifier class:
   and gets visually covered when the first panel opens. `contentIsOnTop` is for a single panel
   overlaying unrelated trailing page content, not for grouped/stacked accordion panels — use the
   default in-flow layout for those.
+

package/app/components/02.molecules/expandable/expanding-panel-classic/CONSUMER-STYLING.md

@@ -19,7 +19,7 @@ for why, and style a wrapper *inside* the `#content` slot instead.
 
 ---
 
-## Global theming — recommended approach
+## Global theming
 
 Create `assets/styles/setup/07.components/expanding-panel-classic.css` in the consuming app and set
 tokens on `:root`. This applies to every `ExpandingPanelClassic` across the site.
@@ -35,7 +35,15 @@ tokens on `:root`. This applies to every `ExpandingPanelClassic` across the site
 
 ---
 
-## Page-scoped overrides
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+### Page or section
 
 Override tokens for a specific section by scoping them under the page or layout wrapper.
 No `:deep()` is required (component styles are unscoped).
@@ -49,9 +57,7 @@ No `:deep()` is required (component styles are unscoped).
 }
 ```
 
----
-
-## Per-instance overrides via styleClassPassthrough
+### One instance
 
 Use sparingly — prefer global or page-scoped CSS. When a single instance needs a distinct
 visual style, pass a modifier class:
@@ -101,3 +107,4 @@ visual style, pass a modifier class:
   and gets visually covered when the first panel opens. `contentIsOnTop` is for a single panel
   overlaying unrelated trailing page content, not for grouped/stacked accordion panels — use the
   default in-flow layout for those.
+

package/app/components/02.molecules/input-copy/CONSUMER-STYLING.md

@@ -26,7 +26,7 @@ or instance) without touching the component itself.
 
 ---
 
-## Global theming — app-level CSS file
+## Global theming
 
 Create `assets/styles/setup/07.components/input-copy.css` in the consuming app and set tokens on
 `:root`. These values apply to every `InputCopy` instance across the site.
@@ -44,7 +44,15 @@ Create `assets/styles/setup/07.components/input-copy.css` in the consuming app a
 
 ---
 
-## Per-instance overrides via inline styles
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+### One instance
 
 Override tokens directly on a single InputCopy instance:
 
@@ -59,9 +67,7 @@ Override tokens directly on a single InputCopy instance:
 />
 ```
 
----
-
-## Page-scoped overrides
+### Page or section
 
 When input-copy appears in a specific page context (e.g., checkout success page), scope overrides
 under the page wrapper:
@@ -141,3 +147,4 @@ Or show only the icon on mobile and text on desktop (default behavior):
 /* Default: button shows only icon on mobile, icon + text on desktop (480px+) */
 /* No override needed; this is the built-in behavior */
 ```
+

package/app/components/02.molecules/input-copy/InputCopy.vue

@@ -108,15 +108,9 @@ onUnmounted(() => {
 <style lang="css">
 @layer components {
   .input-copy {
-    --_input-bg: var(--input-copy-input-bg, var(--slate-00));
-    --_input-border: var(--input-copy-input-border, 1px solid var(--slate-03));
     --_input-border-radius: var(--input-copy-input-border-radius, 0.4rem);
-    --_input-padding: var(--input-copy-input-padding, 0.8rem 1rem);
-    --_input-text-color: var(--input-copy-input-text-color, #333);
-    --_input-placeholder-color: var(--input-copy-input-placeholder-color, #999);
     --_input-font-size: var(--input-copy-input-font-size, 0.95rem);
 
-    --_button-bg: var(--input-copy-button-bg, var(--input-button-primary-surface, var(--theme-surface)));
     --_button-bg-hover: var(
       --input-copy-button-bg-hover,
       var(--input-button-primary-surface-hover, var(--theme-surface-hover))
@@ -125,13 +119,6 @@ onUnmounted(() => {
       --input-copy-button-text-color,
       var(--input-button-primary-text, var(--theme-on-surface))
     );
-    --_button-padding: var(--input-copy-button-padding, 0.8rem 1.2rem);
-    --_button-border-radius: var(--input-copy-button-border-radius, 0.4rem);
-    --_button-gap: var(--input-copy-button-gap, 0.6rem);
-
-    --_description-color: var(--input-copy-description-color, #666);
-    --_description-font-size: var(--input-copy-description-font-size, 0.85rem);
-    --_description-margin: var(--input-copy-description-margin, 0.6rem 0 0 0);
 
     display: flex;
     flex-direction: column;
@@ -148,16 +135,16 @@ onUnmounted(() => {
     flex: 1;
     min-width: 0;
 
-    padding: var(--_input-padding);
-    background-color: var(--_input-bg);
-    border: var(--_input-border);
+    padding: var(--input-copy-input-padding, 0.8rem 1rem);
+    background-color: var(--input-copy-input-bg, var(--slate-00));
+    border: var(--input-copy-input-border, 1px solid var(--slate-03));
     border-radius: var(--_input-border-radius);
     font-size: var(--_input-font-size);
-    color: var(--_input-text-color);
+    color: var(--input-copy-input-text-color, #333);
     font-family: inherit;
 
     &::placeholder {
-      color: var(--_input-placeholder-color);
+      color: var(--input-copy-input-placeholder-color, #999);
     }
 
     &:focus {
@@ -169,13 +156,13 @@ onUnmounted(() => {
   .input-copy__button {
     display: flex;
     align-items: center;
-    gap: var(--_button-gap);
-    padding: var(--_button-padding);
+    gap: var(--input-copy-button-gap, 0.6rem);
+    padding: var(--input-copy-button-padding, 0.8rem 1.2rem);
 
-    background-color: var(--_button-bg);
+    background-color: var(--input-copy-button-bg, var(--input-button-primary-surface, var(--theme-surface)));
     color: var(--_button-text-color);
     border: none;
-    border-radius: var(--_button-border-radius);
+    border-radius: var(--input-copy-button-border-radius, 0.4rem);
     font-size: var(--_input-font-size);
     font-weight: 500;
     cursor: pointer;
@@ -207,9 +194,9 @@ onUnmounted(() => {
   }
 
   .input-copy__description {
-    margin: var(--_description-margin);
-    font-size: var(--_description-font-size);
-    color: var(--_description-color);
+    margin: var(--input-copy-description-margin, 0.6rem 0 0 0);
+    font-size: var(--input-copy-description-font-size, 0.85rem);
+    color: var(--input-copy-description-color, #666);
   }
 }
 </style>

package/app/components/02.molecules/input-copy/stories/InputCopy.stories.ts

@@ -75,7 +75,7 @@ export const LicenseKey: Story = {
 
 export const APIToken: Story = {
   args: {
-    value: "ghp_16C7e42F292c6912E7710c838347Ae178B4a",
+    value: "example_token_not_real_0123456789abcdef",
     label: "API token",
     description: "Your API token for authentication. Do not share this token.",
   },

package/app/components/02.molecules/input-copy/tests/InputCopy.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { mount, flushPromises } from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
 import InputCopy from "../InputCopy.vue";
 
 describe("InputCopy", () => {

package/app/components/02.molecules/navigation/deep-expanding-menu/CONSUMER-STYLING.md

@@ -35,6 +35,8 @@ Or scope to a single instance via `styleClassPassthrough`:
 <DeepExpandingMenu style-class-passthrough="main-nav">...</DeepExpandingMenu>
 ```
 
+---
+
 ## Not tokenised
 
 - The `@position-try` fallback offsets (`--anchor-left`/`--anchor-right`) are fixed at `1rem` —
@@ -42,3 +44,14 @@ Or scope to a single instance via `styleClassPassthrough`:
   overridden per-instance without a new `@position-try` block.
 - Anchor names and popover target ids are generated per-instance via `useId()` and are not
   consumer-configurable — they only need to be unique, not meaningful.
+
+---
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+

package/app/components/02.molecules/navigation/deep-expanding-menu-classic/CONSUMER-STYLING.md

@@ -38,3 +38,14 @@ Or scope to a single instance via `styleClassPassthrough`:
 ```vue
 <DeepExpandingMenuClassic style-class-passthrough="main-nav">...</DeepExpandingMenuClassic>
 ```
+
+---
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+

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

@@ -0,0 +1,109 @@
+# SiteNavigation — Consumer Styling Guide
+
+## Public token API
+
+Defaults that read `var(--slate-01, currentColor)` use the library palette when it's loaded and fall
+back to the inherited text colour otherwise.
+
+### Horizontal nav
+
+| Token | Default | Controls |
+|---|---|---|
+| `--site-nav-link-color` | `var(--slate-01, currentColor)` | Link colour |
+| `--site-nav-link-hover-color` | `var(--slate-04, <link colour>)` | Link colour on hover |
+| `--site-nav-link-active-color` | `var(--slate-01, <link colour>)` | Active link colour |
+| `--site-nav-link-accent` | `var(--slate-01, currentColor)` | Link accent colour |
+| `--site-nav-link-size` | `1.6rem` | Link font size |
+| `--site-nav-link-weight` | `400` | Link font weight |
+| `--site-nav-link-tracking` | `0.06em` | Link letter spacing |
+| `--site-nav-gap` | `2.2rem` | Gap between links |
+| `--site-nav-transition` | `250ms ease` | Link colour transition |
+| `--site-nav-decorator-indicator-color` | `var(--slate-01, currentColor)` | Sliding underline bar |
+| `--site-nav-decorator-hovered-bg` | `transparent` | Sliding pill behind the hovered link |
+| `--site-nav-decorator-active-bg` | `transparent` | Pill behind the active link |
+
+> Changed 2026-09-27: `--site-nav-decorator-hovered-bg` and `--site-nav-decorator-active-bg` are
+> new. The values were hardcoded `transparent` with no override, unlike the panel equivalents.
+
+### Collapsed panel
+
+| Token | Default | Controls |
+|---|---|---|
+| `--site-nav-panel-bg` | `var(--page-bg, #1a1614)` | Panel background |
+| `--site-nav-panel-border-color` | `color-mix(in oklch, var(--slate-01, #c0847a) 35%, transparent)` | Top border when open |
+| `--site-nav-panel-item-border` | `color-mix(in oklch, var(--slate-01, white) 8%, transparent)` | Divider between panel links |
+| `--site-nav-panel-link-color` | `var(--slate-01, currentColor)` | Panel link colour |
+| `--site-nav-panel-link-hover-color` | `var(--slate-04, <panel link colour>)` | Panel link hover colour |
+| `--site-nav-panel-link-active-color` | `var(--slate-01, <panel link colour>)` | Active panel link colour |
+| `--site-nav-panel-padding-block` | `1.4rem` | Panel link vertical padding |
+| `--site-nav-panel-padding-inline` | `1.5rem` | Panel link horizontal padding |
+| `--site-nav-panel-slide-duration` | `350ms` | Open/close slide duration |
+| `--site-nav-panel-slide-easing` | `cubic-bezier(0.4, 0, 0.2, 1)` | Open/close easing |
+| `--site-nav-panel-decorator-indicator-color` | `var(--slate-01, currentColor)` | Panel indicator bar |
+| `--site-nav-panel-decorator-hovered-bg` | `transparent` | Pill behind the hovered panel link |
+| `--site-nav-panel-decorator-active-bg` | `transparent` | Pill behind the active panel link |
+| `--site-nav-panel-indicator-left` | `0` | Indicator bar left position |
+| `--site-nav-panel-indicator-right` | `auto` | Indicator bar right position |
+
+### Burger button
+
+| Token | Default | Controls |
+|---|---|---|
+| `--site-nav-burger-color` | `var(--slate-01, currentColor)` | Bar colour |
+| `--site-nav-burger-width` | `22px` | Bar width |
+| `--site-nav-burger-height` | `1.5px` | Bar thickness |
+| `--site-nav-burger-gap` | `5px` | Gap between bars |
+| `--site-nav-burger-transition` | `300ms ease` | Open/close morph |
+
+### Backdrop (teleported to `<body>`)
+
+| Token | Default | Controls |
+|---|---|---|
+| `--site-nav-backdrop-bg` | `oklch(0% 0 0 / 55%)` | Scrim colour |
+| `--site-nav-backdrop-blur` | `3px` | Blur behind the scrim |
+| `--site-nav-backdrop-duration` | `350ms` | Fade duration |
+| `--site-nav-backdrop-z-index` | `10` | Scrim stacking order; keep your header above it |
+
+> Changed 2026-09-27: `--site-nav-backdrop-z-index` is new (was a hardcoded `10`).
+
+The `--_*` variables declared on `.site-navigation` are the resolved copies of the tokens above
+that are read in more than one place: not public API.
+
+---
+
+## State hooks
+
+| Hook | Element | When |
+|---|---|---|
+| `.site-navigation--left`, `--center`, `--right` | root `<nav>` | `nav-align` |
+| `.is-collapsed` | root | Links don't fit, so the burger and panel are shown |
+| `.is-loaded` | root | First measurement done (the nav is `opacity: 0` until then) |
+| `.menu-open` | root | Panel open |
+| `.is-animated` | root | Indicator transitions enabled (after first layout) |
+| `li.is-active` | nav and panel items | Item matches the current route |
+| `.is-open` | `.site-nav-burger`, `.site-nav-panel`, `.site-nav-backdrop` | Panel open |
+
+Inner classes: `.site-nav-list`, `.site-nav-link`, `.site-nav-burger`, `.burger-bar`,
+`.site-nav-panel`, `.site-nav-panel-inner`, `.site-nav-panel-list`, `.site-nav-panel-link`,
+`.site-nav-backdrop`; decorators `.nav__hovered`, `.nav__active`, `.nav__active-indicator`.
+Each item `li` also gets its `NavItem.cssName`.
+
+---
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+**Caveat:** the backdrop is teleported to `<body>`, outside your header, so the
+`--site-nav-backdrop-*` tokens only land when set on `:root`, `html` or `body`.
+
+---
+
+## Class passthrough
+
+`style-class-passthrough` adds classes to the root `<nav>`. Reactive after mount. It doesn't reach
+the teleported backdrop.

package/app/components/02.molecules/navigation/site-navigation/SiteNavigation.vue

@@ -32,14 +32,14 @@
       <li aria-hidden="true" role="none" class="nav-indicator-li"><div class="nav__active-indicator"></div></li>
     </ul>
 
-    <InputButtonCore
+    <InputButton
       v-if="isCollapsed && isLoaded"
       class="site-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="site-nav-panel"
+      :aria-controls="panelId"
       @click="toggleMenu"
     >
       <template #iconOnly>
@@ -47,7 +47,7 @@
         <span class="burger-bar" aria-hidden="true"></span>
         <span class="burger-bar" aria-hidden="true"></span>
       </template>
-    </InputButtonCore>
+    </InputButton>
 
     <Teleport to="body">
       <div
@@ -61,7 +61,7 @@
 
     <div
       v-if="isCollapsed && isLoaded"
-      id="site-nav-panel"
+      :id="panelId"
       class="site-nav-panel"
       :class="{ 'is-open': isMenuOpen }"
       :inert="!isMenuOpen ? true : undefined"
@@ -108,14 +108,22 @@ interface Props {
   styleClassPassthrough?: string | string[];
   /** 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>(), {
   navAlign: "left",
   styleClassPassthrough: () => [],
   ariaLabel: "Site navigation",
+  openMenuLabel: "Open navigation menu",
+  closeMenuLabel: "Close navigation menu",
 });
 
+const panelId = `site-nav-panel-${useId()}`;
+
 // ─── Animation gate — prevents indicator from transitioning on first paint ───
 
 const isAnimated = ref(false);
@@ -390,18 +398,14 @@ watch(
 <style lang="css">
 @layer components {
   .site-nav-backdrop {
-    --_backdrop-bg: var(--site-nav-backdrop-bg, oklch(0% 0 0 / 55%));
-    --_backdrop-blur: var(--site-nav-backdrop-blur, 3px);
-    --_backdrop-duration: var(--site-nav-backdrop-duration, 350ms);
-
     position: fixed;
     inset: 0;
-    z-index: 10;
-    background: var(--_backdrop-bg);
-    backdrop-filter: blur(var(--_backdrop-blur));
+    z-index: var(--site-nav-backdrop-z-index, 10);
+    background: var(--site-nav-backdrop-bg, oklch(0% 0 0 / 55%));
+    backdrop-filter: blur(var(--site-nav-backdrop-blur, 3px));
     opacity: 0;
     pointer-events: none;
-    transition: opacity var(--_backdrop-duration) ease;
+    transition: opacity var(--site-nav-backdrop-duration, 350ms) ease;
 
     &.is-open {
       opacity: 1;
@@ -412,31 +416,14 @@ watch(
   .site-navigation {
     /* ─── Public token API ────────────────────────────────────────────── */
 
-    /* Decorators — horizontal nav */
-    --_decorator-hovered-bg: transparent;
-    --_decorator-active-bg: transparent;
-    --_decorator-indicator-color: var(--site-nav-decorator-indicator-color, var(--slate-01, currentColor));
-
-    /* Decorators — panel */
-    --_panel-decorator-hovered-bg: var(--site-nav-panel-decorator-hovered-bg, transparent);
-    --_panel-decorator-active-bg: var(--site-nav-panel-decorator-active-bg, transparent);
-    --_panel-decorator-indicator-color: var(--site-nav-panel-decorator-indicator-color, var(--slate-01, currentColor));
-    --_panel-indicator-left: var(--site-nav-panel-indicator-left, 0);
-    --_panel-indicator-right: var(--site-nav-panel-indicator-right, auto);
-
     /* Horizontal nav */
     --_link-color: var(--site-nav-link-color, var(--slate-01, currentColor));
-    --_link-hover-color: var(--site-nav-link-hover-color, var(--slate-04, var(--_link-color)));
-    --_link-active-color: var(--site-nav-link-active-color, var(--slate-01, var(--_link-color)));
     --_link-size: var(--site-nav-link-size, 1.6rem);
     --_link-tracking: var(--site-nav-link-tracking, 0.06em);
     --_link-weight: var(--site-nav-link-weight, 400);
-    --_link-accent: var(--site-nav-link-accent, var(--slate-01, currentColor));
-    --_nav-gap: var(--site-nav-gap, 2.2rem);
     --_nav-transition: var(--site-nav-transition, 250ms ease);
 
     /* Panel */
-    --_panel-bg: var(--site-nav-panel-bg, var(--page-bg, #1a1614));
     --_panel-border-color: var(
       --site-nav-panel-border-color,
       color-mix(in oklch, var(--slate-01, #c0847a) 35%, transparent)
@@ -446,15 +433,10 @@ watch(
       color-mix(in oklch, var(--slate-01, white) 8%, transparent)
     );
     --_panel-link-color: var(--site-nav-panel-link-color, var(--slate-01, currentColor));
-    --_panel-link-hover-color: var(--site-nav-panel-link-hover-color, var(--slate-04, var(--_panel-link-color)));
-    --_panel-link-active-color: var(--site-nav-panel-link-active-color, var(--slate-01, var(--_panel-link-color)));
-    --_panel-padding-block: var(--site-nav-panel-padding-block, 1.4rem);
-    --_panel-padding-inline: var(--site-nav-panel-padding-inline, 1.5rem);
     --_panel-slide-duration: var(--site-nav-panel-slide-duration, 350ms);
     --_panel-slide-easing: var(--site-nav-panel-slide-easing, cubic-bezier(0.4, 0, 0.2, 1));
 
     /* Burger */
-    --_burger-bar-width: var(--site-nav-burger-width, 22px);
     --_burger-bar-height: var(--site-nav-burger-height, 1.5px);
     --_burger-bar-gap: var(--site-nav-burger-gap, 5px);
     --_burger-color: var(--site-nav-burger-color, var(--slate-01, currentColor));
@@ -478,7 +460,7 @@ watch(
       margin: 0;
       padding: 0;
       display: flex;
-      gap: var(--_nav-gap);
+      gap: var(--site-nav-gap, 2.2rem);
       align-items: center;
       position: relative;
 
@@ -522,13 +504,13 @@ watch(
       }
 
       .nav__hovered {
-        background: var(--_decorator-hovered-bg);
+        background: var(--site-nav-decorator-hovered-bg, transparent);
         border-radius: 4px;
         z-index: 1;
       }
 
       .nav__active {
-        background: var(--_decorator-active-bg);
+        background: var(--site-nav-decorator-active-bg, transparent);
         border-radius: 4px;
         z-index: 2;
       }
@@ -536,7 +518,7 @@ watch(
       .nav__active-indicator {
         top: auto;
         height: 2px;
-        background-color: var(--_decorator-indicator-color);
+        background-color: var(--site-nav-decorator-indicator-color, var(--slate-01, currentColor));
         z-index: 3;
       }
 
@@ -558,12 +540,12 @@ watch(
 
         &:hover,
         &:focus-visible {
-          color: var(--_link-hover-color);
+          color: var(--site-nav-link-hover-color, var(--slate-04, var(--_link-color)));
           outline: none;
         }
       }
       li.is-active .site-nav-link {
-        color: var(--_link-active-color);
+        color: var(--site-nav-link-active-color, var(--slate-01, var(--_link-color)));
       }
     }
 
@@ -581,13 +563,13 @@ watch(
       justify-content: end;
     }
 
-    /* ─── Burger button (InputButtonCore) ──────────────────────────── */
+    /* ─── Burger button (InputButton) ──────────────────────────── */
 
-    .site-nav-burger.input-button-core.icon-only {
+    .site-nav-burger.input-button.icon-only {
       margin-inline-start: auto;
       color: var(--_burger-color);
 
-      /* Strip all InputButtonCore visual styling */
+      /* Strip all InputButton visual styling */
       background: none;
       border: none;
       outline: none;
@@ -617,7 +599,7 @@ watch(
 
     .burger-bar {
       display: block;
-      width: var(--_burger-bar-width);
+      width: var(--site-nav-burger-width, 22px);
       height: var(--_burger-bar-height);
       background: currentColor;
       border-radius: 1px;
@@ -666,7 +648,7 @@ watch(
 
       .site-nav-panel-inner {
         overflow: hidden;
-        background-color: var(--_panel-bg);
+        background-color: var(--site-nav-panel-bg, var(--page-bg, #1a1614));
       }
 
       .site-nav-panel-list {
@@ -710,23 +692,23 @@ watch(
         }
 
         .nav__active-indicator {
-          left: var(--_panel-indicator-left, 0);
-          right: var(--_panel-indicator-right, auto);
+          left: var(--site-nav-panel-indicator-left, 0);
+          right: var(--site-nav-panel-indicator-right, auto);
           width: 2px;
         }
 
         .nav__hovered {
-          background: var(--_panel-decorator-hovered-bg);
+          background: var(--site-nav-panel-decorator-hovered-bg, transparent);
           z-index: 1;
         }
 
         .nav__active {
-          background: var(--_panel-decorator-active-bg);
+          background: var(--site-nav-panel-decorator-active-bg, transparent);
           z-index: 2;
         }
 
         .nav__active-indicator {
-          background: var(--_panel-decorator-indicator-color);
+          background: var(--site-nav-panel-decorator-indicator-color, var(--slate-01, currentColor));
           z-index: 3;
         }
 
@@ -747,20 +729,20 @@ watch(
           font-weight: var(--_link-weight);
           letter-spacing: var(--_link-tracking);
           text-decoration: none;
-          padding-block: var(--_panel-padding-block);
-          padding-inline: var(--_panel-padding-inline);
+          padding-block: var(--site-nav-panel-padding-block, 1.4rem);
+          padding-inline: var(--site-nav-panel-padding-inline, 1.5rem);
           position: relative;
           z-index: 4;
           transition: color var(--_nav-transition);
 
           &:hover,
           &:focus-visible {
-            color: var(--_panel-link-hover-color);
+            color: var(--site-nav-panel-link-hover-color, var(--slate-04, var(--_panel-link-color)));
             outline: none;
           }
         }
         li.is-active .site-nav-panel-link {
-          color: var(--_panel-link-active-color);
+          color: var(--site-nav-panel-link-active-color, var(--slate-01, var(--_panel-link-color)));
         }
       }
     }