srcdev-nuxt-components 9.4.12 → 9.5.1

package/app/components/01.atoms/animations/view-timeline/CONSUMER-STYLING.md

@@ -9,6 +9,8 @@
 | `--wipe-away-vertical-animation-duration` | `1s`     | `wipe-out` scroll-linked animation, browsers supporting `animation-timeline: view()` |
 | `--wipe-away-vertical-trailing-buffer`    | `20vh`   | `.trailing-buffer` height — release room after the last panel                        |
 
+---
+
 ## Only itemCount - 1 scrollingItem slots
 
 The last panel has nothing left to reveal, so it has no wipe animation and no `.scrolling-section`
@@ -20,6 +22,8 @@ as deep on screen as the others, since it got the same reveal lead-in as every o
 a whole dedicated section with no wipe to cut it short. `.trailing-buffer` (see token above)
 replaces that with a much smaller, purpose-built release cushion instead.
 
+---
+
 ## Pure CSS, no JS measurement
 
 The whole pin/reveal effect is CSS-only (grid overlay + `animation-timeline: view()`); there's
@@ -29,6 +33,8 @@ see below), and `.sticky-items-container` spans `grid-row: 1 / -1` to overlay al
 adding its own row — so the root's height is simply the sum of the scrolling sections' own content
 height plus the leading buffer, nothing extra to size manually.
 
+---
+
 ## Leading buffer
 
 `.leading-buffer` is a fixed `100vh` spacer rendered before the first scrolling section. Without
@@ -37,6 +43,8 @@ timeline range at initial page load (before any scrolling happens), so the first
 appear partially wiped on load. The buffer guarantees a full viewport of scroll run-up regardless
 of how much real content precedes the component.
 
+---
+
 ## No `animation-timeline: view()` support
 
 Browsers without support (checked via `@supports not (animation-timeline: view())`) get the
@@ -44,6 +52,8 @@ sticky/grid-overlay/animation rules dropped entirely — `.sticky-item`s just re
 stacked panels in document flow, and `.scrolling-section`s are hidden. No JS fallback, no
 opacity crossfade.
 
+---
+
 ## Sticky vertical centering — no transform
 
 `.sticky-items-container` centers itself with `top: calc((100vh - var(--wipe-away-vertical-height, 100vh)) / 2)` — a plain calc(), not a `transform: translateY()`. Do not
@@ -59,12 +69,27 @@ the last panel and whatever content follows the component.
 }
 ```
 
+---
+
 ## Reduced motion
 
 The wipe animation is disabled under `prefers-reduced-motion: reduce` (`animation: none;
 clip-path: none;`) — panels render fully visible with no clip.
 
+---
+
+## 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`.
+
+---
+
 ## Class passthrough
 
 `styleClassPassthrough` (string or string array) is applied to the root element via
 `useStyleClassPassthrough`.
+

package/app/components/01.atoms/banner-video/CONSUMER-STYLING.md

@@ -55,7 +55,7 @@ component doesn't cover), replace it with the `toggle-icon` scoped slot, which r
 
 ---
 
-## Global theming — recommended approach
+## Global theming
 
 Create `assets/styles/setup/07.components/banner-video.css` in the consuming app and set
 tokens on `:root`. This applies to every `BannerVideo` across the site.
@@ -72,7 +72,15 @@ tokens on `:root`. This applies to every `BannerVideo` 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 banner by scoping them under the page or layout wrapper.
 No `:deep()` is required (component styles are unscoped).
@@ -88,9 +96,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:
@@ -118,3 +124,4 @@ visual style, pass a modifier class:
   consuming apps are expected to reskin per-brand.
 - `aspectRatio`, `objectFit`, `verticalPosition`, and `horizontalPosition` are props, not
   tokens — set them directly on the component.
+

package/app/components/01.atoms/canvas-switcher/CONSUMER-STYLING.md

@@ -1,6 +1,6 @@
 # CanvasSwitcher — Consumer Styling
 
-CanvasSwitcher renders its buttons via `InputButtonCore` (`variant="tertiary"`, icon-only) — see
+CanvasSwitcher renders its buttons via `InputButton` (`variant="tertiary"`, icon-only) — see
 that component's own `CONSUMER-STYLING.md` for the button surface/hover/focus tokens it inherits.
 CanvasSwitcher itself exposes the following public tokens:
 
@@ -8,15 +8,10 @@ CanvasSwitcher itself exposes the following public tokens:
 |---|---|---|
 | `--canvas-switcher-gap` | `2rem` | Gap between the switcher's own children (currently just the list) |
 | `--canvas-switcher-item-gap` | `1rem` | Gap between each button in the list |
-| `--canvas-switcher-icon-size` | `2.4rem` | Width/height of each icon |
+| `--canvas-switcher-icon-size` | `1.6rem`, `2.2rem` from 768px | Width/height of each icon (setting it replaces both defaults) |
 | `--canvas-switcher-icon-colour` | `var(--slate-10)` | Icon colour, resting state |
 | `--canvas-switcher-icon-colour-current` | `var(--green-10)` | Icon colour when that button's canvas is selected (`aria-pressed="true"`) |
 
-## Class passthrough
-
-`styleClassPassthrough` (string or string[]) is applied to the root `.canvas-switcher` element via
-`useStyleClassPassthrough()`.
-
 ## Canvas-size utility classes
 
 `.mobileCanvas`, `.tabletCanvas`, `.laptopCanvas`, `.desktopCanvas`, `.fullWidthCanvas` are also
@@ -25,3 +20,21 @@ the same `MediaCanvas` value returned by `v-model:canvas-name` directly as a cla
 wrapper to constrain its width — see `DashboardQuadGrid`/`DashboardStatsGrid` stories for the pattern. These are
 plain global utility classes, not overridable via a CSS custom property; import `CanvasSwitcher`
 (or otherwise ensure its styles are bundled) wherever you rely on them.
+
+---
+
+## 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`.
+
+---
+
+## Class passthrough
+
+`styleClassPassthrough` (string or string[]) is applied to the root `.canvas-switcher` element via
+`useStyleClassPassthrough()`.
+

package/app/components/01.atoms/canvas-switcher/CanvasSwitcher.vue

@@ -2,7 +2,7 @@
   <div class="canvas-switcher" :class="[elementClasses]">
     <ul class="canvas-switcher-list">
       <li v-for="option in canvasOptions" :key="option.value">
-        <InputButtonCore
+        <InputButton
           type="button"
           variant="tertiary"
           class="canvas-switcher-button"
@@ -11,9 +11,9 @@
           @click="updateCanvas(option.value)"
         >
           <template #iconOnly>
-            <Icon :name="option.icon" class="icon"></Icon>
+            <Icon :name="option.icon" class="icon" />
           </template>
-        </InputButtonCore>
+        </InputButton>
       </li>
     </ul>
   </div>
@@ -36,7 +36,7 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
-const canvasName = defineModel<MediaCanvas>("canvasName");
+const canvasName = defineModel<MediaCanvas | undefined>("canvasName", { default: undefined });
 
 const canvasOptions: CanvasOption[] = [
   { value: "mobileCanvas", label: "Mobile", icon: "ic:baseline-phone-iphone" },
@@ -77,7 +77,7 @@ watch(
     padding: 0;
   }
 
-  .canvas-switcher-button.input-button-core {
+  .canvas-switcher-button.input-button {
     color: var(--canvas-switcher-icon-colour, var(--slate-10));
 
     &[aria-pressed="true"] {
@@ -85,8 +85,13 @@ watch(
     }
 
     .icon {
-      width: var(--canvas-switcher-icon-size, 2.4rem);
-      height: var(--canvas-switcher-icon-size, 2.4rem);
+      --_icon-size-default: 1.6rem;
+      width: var(--canvas-switcher-icon-size, var(--_icon-size-default));
+      height: var(--canvas-switcher-icon-size, var(--_icon-size-default));
+
+      @media (min-width: 768px) {
+        --_icon-size-default: 2.2rem;
+      }
     }
   }
 

package/app/components/01.atoms/card/CONSUMER-STYLING.md

@@ -27,7 +27,7 @@ or instance) without touching the component itself.
 
 ---
 
-## Global theming — app-level CSS file
+## Global theming
 
 Create `assets/styles/setup/07.components/card-core.css` in the consuming app and set tokens on
 `:root`. These values apply to every `CardCore` instance across the site.
@@ -44,7 +44,15 @@ Create `assets/styles/setup/07.components/card-core.css` in the consuming app an
 
 ---
 
-## Per-variant 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`.
+
+### Per variant
 
 Variants override internal tokens directly, so target the variant class to change their colours:
 
@@ -73,43 +81,7 @@ Variants override internal tokens directly, so target the variant class to chang
 }
 ```
 
----
-
-## Blurred backdrop pattern
-
-Set `--card-core-lower-background-image` and `--card-core-lower-background-color` to create a
-blurred translucent layer behind the card content. The `::before` pseudo-element handles the blur
-and the scale hides the blur-edge artefact.
-
-```css
-.card-core {
-  &.hero-card {
-    --card-core-lower-background-image: url("/images/hero.jpg");
-    --card-core-lower-background-blur: 24px;
-    --card-core-lower-scale: 1.15;
-    --card-core-lower-background-color: rgb(0 0 0 / 30%); /* tint over image */
-    --card-core-background-color: transparent;
-  }
-}
-```
-
-Or inline for a single instance:
-
-```vue
-<CardCore
-  variant="solid"
-  style="
-    --card-core-lower-background-image: url('/images/hero.jpg');
-    --card-core-lower-background-blur: 20px;
-  "
->
-  ...
-</CardCore>
-```
-
----
-
-## Page-scoped overrides
+### Page or section
 
 When a card appears in a specific page context, scope overrides under the page wrapper. No
 `:deep()` is required (component styles are unscoped).
@@ -128,9 +100,7 @@ When a card appears in a specific page context, scope overrides under the page w
 }
 ```
 
----
-
-## Per-instance overrides via styleClassPassthrough
+### One instance
 
 ```vue
 <CardCore :style-class-passthrough="['featured']">
@@ -150,6 +120,40 @@ When a card appears in a specific page context, scope overrides under the page w
 
 ---
 
+## Blurred backdrop pattern
+
+Set `--card-core-lower-background-image` and `--card-core-lower-background-color` to create a
+blurred translucent layer behind the card content. The `::before` pseudo-element handles the blur
+and the scale hides the blur-edge artefact.
+
+```css
+.card-core {
+  &.hero-card {
+    --card-core-lower-background-image: url("/images/hero.jpg");
+    --card-core-lower-background-blur: 24px;
+    --card-core-lower-scale: 1.15;
+    --card-core-lower-background-color: rgb(0 0 0 / 30%); /* tint over image */
+    --card-core-background-color: transparent;
+  }
+}
+```
+
+Or inline for a single instance:
+
+```vue
+<CardCore
+  variant="solid"
+  style="
+    --card-core-lower-background-image: url('/images/hero.jpg');
+    --card-core-lower-background-blur: 20px;
+  "
+>
+  ...
+</CardCore>
+```
+
+---
+
 ## Card row targeting
 
 Slot content is wrapped in `.card-row.card-row-{name}`. Target rows for padding, borders, or
@@ -173,3 +177,4 @@ backgrounds without modifying the component:
   }
 }
 ```
+

package/app/components/01.atoms/card/CardCore.vue

@@ -41,23 +41,14 @@ watch(
 <style lang="css">
 @layer components {
   .card-core {
-    --_card-row-gap: var(--card-core-row-gap, 1rem);
-    --_card-padding: var(--card-core-inner-padding, 1rem);
-    --_card-lower-background-image: var(--card-core-lower-background-image, none);
-    --_card-lower-background-position: var(--card-core-lower-background-position, center);
-    --_card-lower-background-color: var(--card-core-lower-background-color, transparent);
-    --_card-lower-background-blur: var(--card-core-lower-background-blur, 16px);
-    --_card-lower-scale: var(--card-core-lower-scale, 1.1);
-    --_card-background-image: var(--card-core-background-image, none);
     --_card-background-color: var(--card-core-background-color, transparent);
     --_card-border: var(--card-core-border, 0.2rem solid var(--slate-08));
-    --_card-border-radius: var(--card-core-border-radius, 0.5rem);
     --_card-box-shadow: var(--card-core-box-shadow, 0.1rem 0.1rem 0.4rem oklch(from var(--slate-08) l c h / 0.45));
 
     display: grid;
     grid-auto-flow: row;
-    gap: var(--_card-row-gap);
-    border-radius: var(--_card-border-radius);
+    gap: var(--card-core-row-gap, 1rem);
+    border-radius: var(--card-core-border-radius, 0.5rem);
     overflow: hidden;
     position: relative;
 
@@ -69,13 +60,13 @@ watch(
       content: "";
       position: absolute;
       inset: 0;
-      background-color: var(--_card-lower-background-color);
-      background-image: var(--_card-lower-background-image);
-      background-position: var(--_card-lower-background-position, center);
+      background-color: var(--card-core-lower-background-color, transparent);
+      background-image: var(--card-core-lower-background-image, none);
+      background-position: var(--card-core-lower-background-position, center);
       background-size: cover;
       background-repeat: no-repeat;
-      filter: blur(var(--_card-lower-background-blur));
-      scale: var(--_card-lower-scale);
+      filter: blur(var(--card-core-lower-background-blur, 16px));
+      scale: var(--card-core-lower-scale, 1.1);
       z-index: 0;
     }
 
@@ -101,7 +92,6 @@ watch(
 
     &.soft {
       --_card-background-color: color-mix(in oklab, var(--slate-01) 20%, transparent);
-      --_card-box-shadow-color: color-mix(in oklab, var(--slate-02) 80%, transparent);
     }
 
     &.outline {

package/app/components/01.atoms/clipped-panel/CONSUMER-STYLING.md

@@ -28,6 +28,8 @@ Or scope to a single instance via `styleClassPassthrough`:
 }
 ```
 
+---
+
 ## Shapes are fixed-size, not tokenised
 
 Each `variant`'s notched/cutout shape is drawn with `clip-path: path("...")` using literal pixel
@@ -37,3 +39,14 @@ radii, notch size, overall dimensions — is **not** overridable via tokens or `
 overrides. Changing `width` on the element stretches the box without moving the clip-path
 coordinates, which will misalign the shape. If a different size or geometry is needed, that
 requires a new variant with its own `path()` string, not a CSS override.
+
+---
+
+## 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/01.atoms/content-wrappers/docs-pages/CONSUMER-STYLING.md

@@ -0,0 +1,127 @@
+# ContentDocs — Consumer Styling Guide
+
+## Public token API
+
+Most tokens come in a **shared** form (`--content-docs-heading-*`, `-panel-*`, `-link-*`) that
+styles both the docs nav and the page nav, plus **per-side** forms (`--content-docs-nav-*`,
+`--content-docs-page-nav-*`) that fall back to the shared one when unset.
+
+> Changed 2026-09-27: defaults no longer call `light-dark()` themselves (unsupported on older iPad
+> Safari). Colours now come from the global scheme-aware tokens (`--colour-text-default`,
+> `--page-bg`, `--theme-surface-subtle`), so they still follow light/dark mode. The active-link
+> pill is a fixed green pair that reads the same in both.
+
+### Headings
+
+| Shared token | Default | Per-side overrides |
+|---|---|---|
+| `--content-docs-heading-font-size` | `1.4rem` | `--content-docs-nav-heading-font-size`, `--content-docs-page-nav-heading-font-size` |
+| `--content-docs-heading-font-weight` | `700` | `-nav-heading-font-weight`, `-page-nav-heading-font-weight` |
+| `--content-docs-heading-color` | `var(--colour-text-default)` | `-nav-heading-color`, `-page-nav-heading-color` |
+| `--content-docs-heading-bg` | `transparent` | `-nav-heading-bg`, `-page-nav-heading-bg` |
+| `--content-docs-heading-margin` | `0` | `-nav-heading-margin`, `-page-nav-heading-margin` |
+| `--content-docs-heading-padding-block` | `0.4rem 0.8rem` | `-nav-heading-padding-block`, `-page-nav-heading-padding-block` |
+| `--content-docs-heading-padding-inline` | `0` | `-nav-heading-padding-inline`, `-page-nav-heading-padding-inline` |
+
+### Panels (the `<nav>` list containers)
+
+| Token | Default | Notes |
+|---|---|---|
+| `--content-docs-panel-bg` | `var(--page-bg)` | Per-side: `--content-docs-nav-panel-bg`, `--content-docs-page-nav-panel-bg` |
+| `--content-docs-panel-padding-block` | `0.8rem` | Shared only |
+| `--content-docs-panel-padding-inline` | `0.8rem` | Shared only |
+| `--content-docs-panel-border-radius` | `0.5rem` | Shared only |
+
+### Links
+
+| Shared token | Default | Per-side overrides |
+|---|---|---|
+| `--content-docs-link-color` | `var(--colour-text-default)` | `-nav-link-color`, `-page-nav-link-color` |
+| `--content-docs-link-hover-bg` | `var(--theme-surface-subtle)` | `-nav-link-hover-bg`, `-page-nav-link-hover-bg` |
+| `--content-docs-link-hover-color` | the link colour | `-nav-link-hover-color`, `-page-nav-link-hover-color` |
+| `--content-docs-link-active-bg` | `var(--green-01)` | `-nav-link-active-bg`, `-page-nav-link-active-bg` |
+| `--content-docs-link-active-color` | `var(--green-10)` | `-nav-link-active-color`, `-page-nav-link-active-color` |
+| `--content-docs-link-bg` | `transparent` | Shared only |
+| `--content-docs-link-font-size` | `1.4rem` | Shared only |
+| `--content-docs-link-padding-block` | `0.6rem` | Shared only |
+| `--content-docs-link-padding-inline` | `0.8rem` | Shared only |
+| `--content-docs-link-margin-block` | `0` | Shared only |
+| `--content-docs-link-border-radius` | `0.4rem` | Shared only |
+
+### Link icons
+
+| Token | Default | Notes |
+|---|---|---|
+| `--content-docs-link-icon-size` | `1.6rem` | Icon column width and icon `font-size` (both lists) |
+| `--content-docs-link-icon-gap` | `0.6rem` | Gap between icon and label (both lists) |
+| `--content-docs-nav-link-icon-order` | `ltr` | `rtl` puts the icon after the label in the docs nav |
+| `--content-docs-page-nav-link-icon-order` | `ltr` | Same, for the page nav |
+
+> Changed 2026-09-27: renamed from `--docs-nav-link-icon-size`, `--docs-nav-link-icon-gap`,
+> `--docs-nav-link-icon-order` and `--docs-page-nav-link-icon-order`. The size is now applied as
+> `font-size`; as `width`/`height` it was silently overridden by `@nuxt/icon`'s own rule.
+
+### Layout
+
+| Token | Default | Notes |
+|---|---|---|
+| `--content-docs-nav-column-width` | `23rem` | Docs nav track at 1024px+ container width |
+| `--content-docs-page-nav-column-width` | `22rem` | Page nav track at 1024px+ |
+| `--content-docs-page-nav-column-width-tablet` | `20rem` | Page nav track at 768px–1023px |
+
+Link transitions also read the library-wide `--control-transition-duration` (`200ms`) and
+`--control-transition-ease` (`ease`); focus rings use `--theme-ring`.
+
+The `--_*` variables declared on `.content-docs` (e.g. `--_link-color`, `--_panel-bg`)
+are the resolved shared/per-side fallback chain: not public API. Set the `--content-docs-*`
+tokens instead.
+
+---
+
+## State hooks
+
+| Selector | When |
+|---|---|
+| `.docs-nav-link.is-active`, `.docs-page-nav-link.is-active` | The link matching `v-model:active-nav-item` / `v-model:active-page-nav-item` (also gets `aria-current="page"`) |
+
+Inner classes: `.content-docs-inner` (grid), `.docs-nav`, `.docs-content`, `.docs-page-nav` (grid
+areas), `.docs-nav-heading`, `.docs-page-nav-heading`, `.docs-nav-list`, `.docs-page-nav-list`
+(the `<nav>`s), `.docs-nav-link`, `.docs-page-nav-link`, `-link-icon`, `-link-label`.
+
+The collapsible wrappers are `ExpandingPanelClassic` by default (`.expanding-panel-classic-*`
+classes) or `ExpandingPanel` with `panel-variant="modern"` (`.expanding-panel-*`). Style both if
+you target them.
+
+---
+
+## Breakpoints
+
+Container queries on `.content-docs` (`container-name: contentDocs`), matched in script by
+`useContainerBreakpoints`:
+
+| Container width | Layout |
+|---|---|
+| < 768px | Single column; both navs are collapsible panels that overlay content |
+| 768px–1023px | Page nav pinned open in a right-hand column; docs nav collapsible above content |
+| ≥ 1024px | Three columns, both navs pinned open |
+
+---
+
+## 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:** set the public `--content-docs-*` tokens, not the `--_*` names. The `--_*` chain is
+re-declared on `.content-docs` itself, so an ancestor value for a `--_*` name never lands.
+
+---
+
+## Class passthrough
+
+`style-class-passthrough` adds classes to the root `.content-docs` element, which is where the
+token fallback chain is resolved, so tokens set on a passthrough class land for the whole
+component.