srcdev-nuxt-components 9.4.7 → 9.4.9

package/.claude/skills/components/skip-links.md

@@ -0,0 +1,82 @@
+---
+name: SkipLinks
+description: SkipLinks accessibility skip-navigation utility — focus-revealed jump links, props, CSS tokens, consumer styling
+type: reference
+---
+
+# SkipLinks
+
+## Overview
+
+`SkipLinks` renders a set of visually-hidden links that become visible on keyboard focus, letting
+keyboard and screen-reader users jump past repeated navigation straight to main content, the
+footer, or any other in-page target. Place it first in the page layout, before the header/nav, so
+it's the first focusable element on the page.
+
+## Props
+
+| Prop | Type | Default | Required |
+|------|------|---------|----------|
+| `links` | `SkipLink[]` (`{ href: string; label: string }[]`) | `[{ href: "#main-content", label: "Skip to main content" }, { href: "#footer-content", label: "Skip to footer" }]` | no |
+| `ariaLabel` | `string` | `"Skip navigation"` | no — override for localisation |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | no |
+
+`SkipLink` is exported from `~/types/components/skip-links` (and re-exported from
+`~/types/components`):
+
+```typescript
+interface SkipLink {
+  href: string;
+  label: string;
+}
+```
+
+## Slots
+
+`homeLink` — optional content (typically a logo/home link) rendered before the skip-nav, wrapped
+in `.skip-links__home`. Only rendered when the slot is actually used.
+
+```vue
+<SkipLinks>
+  <template #homeLink>
+    <NuxtLink to="/" class="logo">Acme</NuxtLink>
+  </template>
+</SkipLinks>
+```
+
+## Usage
+
+```vue
+<SkipLinks
+  :links="[
+    { href: '#site-navigation', label: 'Skip to navigation' },
+    { href: '#main-content', label: 'Skip to main content' },
+    { href: '#footer-content', label: 'Skip to footer' },
+  ]"
+/>
+```
+
+Each `href` must match the `id` of a real element on the page (e.g. `<main id="main-content">`) —
+the component does not create those anchors itself.
+
+## Accessibility behaviour
+
+- Links are hidden via `opacity`/`transform`, not `display`/`visibility` — they stay in the tab
+  order and keyboard-focusable even while visually hidden.
+- The panel reveals on `:focus-within`, so tabbing onto any link shows the whole group.
+- Wrapped in a `<nav :aria-label="ariaLabel">` landmark, defaulting to `"Skip navigation"`.
+- The reveal transition is disabled under `prefers-reduced-motion: reduce`.
+- `ariaLabel` and every link's `label` are plain string props/fields — pass translated strings
+  from the consumer's own i18n solution.
+
+## CSS custom properties
+
+See `CONSUMER-STYLING.md` in this component's folder for the full `--skip-links-*` token API
+(panel background/border, link text colour, spacing, transition duration, focus outline).
+
+## Notes
+
+- Component is auto-imported in Nuxt — no import needed.
+- Migrated 2026-09-15 from the unplaced `skip-links/` folder: the link set was previously
+  hardcoded (two fixed `<a>` tags with hardcoded English copy) — now data-driven via `links` so
+  consumers can add/remove targets and localise the copy without forking the component.

package/.claude/skills/components/tabs-core.md

@@ -0,0 +1,187 @@
+---
+name: TabsCore
+description: TabsCore tab list/panel widget — indexed dynamic slots, arrow-key navigation, moving hover/active/underline indicators, CSS tokens
+type: reference
+---
+
+# TabsCore
+
+## Overview
+
+`TabsCore` renders a WAI-ARIA tablist from indexed slots. The number of tabs is set via
+`itemCount`; each tab's trigger and content come from `tab-{n}-trigger`/`tab-{n}-content` slots.
+Indexed slots (rather than named dynamic slots) are used here deliberately — `itemCount` is needed
+for ARIA linking across the two parallel loops (triggers and panels), not just the slot loop
+itself.
+
+Three independent moving-highlight decorators track pointer/keyboard state: a hover highlight, an
+active-tab highlight, and an underline/sideline indicator — each can be turned off individually.
+
+## Props
+
+| Prop | Type | Default | Required |
+|------|------|---------|----------|
+| `itemCount` | `number` | — | **yes** — number of tabs; drives both slot loops |
+| `axis` | `"x" \| "y"` | `"x"` | no — horizontal row or vertical column layout |
+| `transitionDuration` | `number` | `200` | no — ms duration of the moving indicators |
+| `trackHover` | `boolean` | `true` | no — shows the moving hover highlight |
+| `trackActive` | `boolean` | `true` | no — shows the moving active-tab highlight |
+| `trackIndicator` | `boolean` | `true` | no — shows the moving underline/sideline indicator |
+| `ariaLabel` | `string` | `"Tabs"` | no — override for localisation |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | no |
+
+## Slots
+
+For each index `0..itemCount-1`:
+
+- `tab-{n}-trigger` — content of the tab button.
+- `tab-{n}-content` — content of that tab's panel.
+
+```vue
+<TabsCore :item-count="2">
+  <template #tab-0-trigger>Overview</template>
+  <template #tab-0-content>Overview content…</template>
+  <template #tab-1-trigger>Specs</template>
+  <template #tab-1-content>Specs content…</template>
+</TabsCore>
+```
+
+## Accessibility behaviour
+
+- Renders `role="tablist"` (with `aria-label`), `role="tab"` triggers (`type="button"`), and
+  `role="tabpanel"` panels (`aria-labelledby` pointing at their trigger, `tabindex="0"` so keyboard
+  users can scroll into panel content per the WAI-ARIA Tabs Pattern).
+  Fixed 2026-09-15 — panels previously used `role="region"` and were hardcoded
+  `aria-hidden="true"` permanently, even the visible one, hiding all tab content from assistive
+  tech at all times.
+- Roving tabindex: only the active trigger has `tabindex="0"`; the rest are `-1`.
+- Arrow keys move focus and activate the target tab (automatic activation): `ArrowLeft`/`ArrowRight`
+  on `axis="x"`, `ArrowUp`/`ArrowDown` on `axis="y"`, wrapping at the ends; `Home`/`End` jump to the
+  first/last tab. Fixed 2026-09-15 — previously there was no keyboard navigation at all beyond
+  native Tab-key focus and click/Enter/Space activation on individual buttons.
+- Focus is visible via `:focus-visible` on both triggers and panels.
+
+## CSS custom properties
+
+See `CONSUMER-STYLING.md` in this component's folder for the full `--tabs-*` token API (indicator
+colours, list-item spacing/typography, content-panel border/background, axis-y gap). Whether each
+indicator renders at all is controlled by `trackHover`/`trackActive`/`trackIndicator`, not tokens.
+
+## Migration note (2026-09-15)
+
+Previously lived at `tabs/TabsCore.vue` with options-style `defineProps`, no tier folder, and
+several defects fixed in this pass:
+
+- `querySelectorAll("[data-nav-item")` was missing its closing `]` — an invalid selector that
+  some browsers tolerate but that throws in strict DOM implementations (including this repo's test
+  environment). Fixed to `"[data-nav-item]"`.
+- `aria-labelledby="channel-name"` was hardcoded on the tablist, pointing at an id that doesn't
+  exist anywhere in this library. Replaced with the new `ariaLabel` prop.
+- `border-bottom`/`border-left` on the tab list referenced `--_tabs-border-bottom`, a private CSS
+  variable that was never set anywhere (dead reference — the border never rendered). Promoted to
+  the public `--tabs-nav-border` token with a real default.
+- `tag`, `trackHover`, `trackActive`, and `trackIndicator` were all declared props with no effect
+  anywhere in the component or its composable (`useTabs`). `tag` had no coherent purpose (triggers
+  were always hardcoded `<button>`s) and was removed; the three `track*` flags were wired up to
+  actually gate their respective decorator elements, since removing them would have been a bigger
+  behavioural change than making them work as their names already implied.
+- Almost every colour/spacing/typography value in the `<style>` block was hardcoded with no
+  override hook at all (not even a private token) — promoted to public `--tabs-*` tokens.
+
+## Performance notes (2026-09-15)
+
+`useTabs` had a few real perf issues, fixed alongside the migration:
+
+- **Layout thrashing**: `moveActiveIndicator`/`moveHoveredIndicator`/`setFinalActivePositions`/
+  `setFinalHoveredPositions` used to interleave `offsetLeft`/`offsetWidth`/etc. reads with
+  `style.setProperty` writes, forcing a synchronous reflow between each pair. All layout reads are
+  now batched into local variables before any writes happen.
+- **`@mouseover` → `@mouseenter`**: the hover trigger listener used `mouseover`, which bubbles and
+  re-fires as the pointer crosses any child element inside the button. `mouseenter` fires exactly
+  once per tab entered.
+- **Debounced settle timers**: `moveActiveIndicator`/`moveHoveredIndicator` schedule a `setTimeout`
+  to snap the indicator to its exact final position once the CSS transition ends. Previously each
+  call scheduled a new timeout without clearing the last one, so moving the pointer quickly across
+  several tabs stacked up redundant pending timeouts. Now the previous timeout is cleared before
+  scheduling the next, and both are cleared in `onUnmounted`.
+- `handleTransitioningClass` called `.indexOf()` on the same two tabs repeatedly inside its loop
+  condition and body — now computed once per call.
+- `previousActiveTab` used `useState("previousActiveTab", ...)` with a fixed, unscoped key — every
+  `TabsCore` instance on a page would have shared that one piece of state. Not actually a
+  performance issue, but a correctness bug found while auditing this file; fixed by switching to a
+  plain per-instance `ref`, since this state doesn't need SSR/hydration sharing.
+
+## Fixed: hover/active label text could become unreadable against the indicator (2026-09-15)
+
+`--tabs-hover-indicator-text-colour` and `--tabs-active-indicator-text-colour` were set as `color`
+on `.nav__hovered`/`.nav__active` — decorative, empty, absolutely-positioned divs with no text
+content, so that `color` was dead CSS with no visible effect. The actual tab label
+(`.tabs-list-item`) used one shared `--tabs-list-item-colour-selected` token for hover, active,
+*and* transitioning alike, regardless of which of the two (potentially differently-coloured)
+indicator backgrounds was actually behind it at that moment. A consumer overriding only the hover
+indicator's background (or the active one) had no working lever to keep the label readable against
+it, and could end up with text the same colour as the background sliding behind it — this was the
+original defect noticed during this component's initial authoring, reported as "the button text
+became the same colour as the track item background and became invisible."
+
+Fixed by removing the dead `color` declarations from the two decorator divs and splitting
+`.tabs-list-item`'s combined `:hover, [aria-selected="true"], .transitioning` rule so hover uses
+`--tabs-hover-indicator-text-colour` and active uses `--tabs-list-item-colour-selected` falling
+back to `--tabs-active-indicator-text-colour` — each state's text colour now tracks the background
+actually behind it. See `CONSUMER-STYLING.md`'s "Tab-label text colour tracks the indicator behind
+it" section: overriding an indicator background without its matching text-colour token can still
+produce poor contrast (same tradeoff as any two independently-set colour tokens) — the fix makes
+the tokens functional, it doesn't auto-compute contrast.
+
+## Fixed: intermediate tab labels could go invisible during a multi-tab jump (2026-09-15)
+
+The first fix above wasn't the whole story. The exact repro that surfaced the rest of it: with tab
+1 active, hover then click tab 5 — the tabs in between briefly lost all visible text. Going the
+other direction (tab 5 active, hover then click tab 1) looked fine.
+
+Cause: `useTabs` had a `handleTransitioningClass` helper that added a `.transitioning` class to
+every tab spanned by a jump (previously shared by the `[aria-selected="true"]` colour rule fixed
+above), on the assumption the sliding indicator visually covers every spanned tab for the whole
+transition — so it force-applied the active text colour to all of them, for the full
+`transitionDuration`. It doesn't cover them the whole time: the indicator's "grow from anchor" CSS
+transition (see `moveActiveIndicator`/`moveHoveredIndicator`) keeps the box's leading edge pinned
+at the *old* tab's position on a forward move and only grows its width, so it only gradually sweeps
+across later tabs — a tab several positions away isn't actually covered until *late* in the
+transition. Recolouring it to the active text colour from the very start meant its label matched
+neither its own background nor the not-yet-arrived indicator, going invisible. A backward move
+animates position and width toward their final values together, so the box's rendered coverage is
+more consistent throughout — which is why that direction looked fine and made the bug easy to miss
+without a specific repro.
+
+Fixed by removing `handleTransitioningClass` and the `.transitioning` class entirely — it had no
+other purpose. Tabs spanned by a jump now keep their normal (inactive) styling throughout; only the
+newly-active tab (`[aria-selected="true"]`) and the currently-hovered tab (`:hover`) get their
+special colours. See `CONSUMER-STYLING.md`'s "Tabs spanned by a jump keep their normal styling".
+
+## Fixed: passed-over tab text still invisible under the active indicator specifically (2026-09-15)
+
+Removing `.transitioning` (previous fix) uncovered a second, pre-existing defect that
+`.transitioning`'s forced recolour had been accidentally masking the whole time: a non-active tab's
+normal text colour (`--tabs-list-item-colour`) was **exactly the same value** as the active
+indicator's background (`--tabs-active-indicator-colour`, same default) — this collision existed in
+the very first authored version of this component, not something introduced by any migration
+change. So whenever the active pill visually passes under (or briefly sits under) any tab that
+isn't itself marked active — which happens on every transition, single-step or distant, in either
+direction — that tab's text became literally the same colour as the background sliding beneath it.
+`--tabs-hover-indicator-colour`'s default never had this problem since it doesn't coincide with the
+inactive text default.
+
+Fixed by changing `--tabs-active-indicator-colour`'s default to one step in from the extreme,
+still clearly the boldest of the three indicator colours, but no longer numerically identical to
+`--tabs-list-item-colour`'s default. `--tabs-active-indicator-text-colour`/
+`--tabs-list-item-colour-selected` (used by the truly active tab) still contrast fine against the
+new value. See `CONSUMER-STYLING.md` for the note on keeping these two tokens from colliding again
+if you override either one.
+
+## Colour token defaults are flat values, not light-dark() (2026-09-15)
+
+Every colour token's default was originally a `light-dark(lightValue, darkValue)` pair (as most of
+this library's other components use). Deliberately changed to a single flat `--slate-*` value per
+token for this component — it doesn't bake in automatic light/dark scheme-switching for its own
+defaults; a consumer who wants a token to adapt to `color-scheme` wraps their own override value in
+`light-dark()`. See `CONSUMER-STYLING.md`'s "Colour tokens are flat values, not light-dark() pairs".

package/.claude/skills/index.md

@@ -70,6 +70,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── layout-grid-by-cols.md  — LayoutGridByCols dynamic slots (item-{n}), props, column/gap/breakpoint decisions
     ├── page-row.md             — PageRow layout primitive: CSS grid named lines, nesting pattern, align prop, aria-labelledby, CSS token API
     ├── link-text.md            — LinkText props, slots, usage patterns, styling
+    ├── header-block.md         — HeaderBlock: tagLevel/classLevel semantic-vs-visual heading decoupling, page-heading-N utility classes
     ├── page-hero-highlights.md — PageHeroHighlights template: hero + highlights strip grid, CSS custom property theming
     ├── services-card.md        — ServicesCard props (incl. eyebrowConfig/heroConfig), actions slot, CSS tokens, page boilerplate
     ├── services-card-grid.md        — ServicesCardGrid props, config pass-through, CSS tokens, full page boilerplate
@@ -77,6 +78,8 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── service-summary.md           — ServiceSummary props, summary-link slot, DisplayPill duration/price (renamed/stripped from ServicesSection — full mode is now ServiceDetail)
     ├── service-detail.md            — ServiceDetail: full service detail page (hero banner, sticky sidebar booking card + related services, closing CTA), headerTag vs subheadingTag split, book-cta/sidebar-note/related-service/final-cta slots
     ├── breadcrumb.md                — Breadcrumb: items (BreadcrumbItem[]) trail, link vs current-page text, CSS token API
+    ├── skip-links.md                — SkipLinks: focus-revealed accessibility skip-nav, links (SkipLink[]) data-driven, homeLink slot, CSS token API
+    ├── tabs-core.md                 — TabsCore: tablist from indexed slots (itemCount), arrow-key nav, moving hover/active/underline indicators, CSS token API
     ├── contact-section.md      — ContactSection props (stepperIndicatorSize pass-through), 3-item info+form layout, slot API
     ├── stepper-list.md         — StepperList dynamic slots (item-{n}/indicator-{n}), props, connector behaviour
     ├── expanding-panel.md      — ExpandingPanel v-model, forceOpened, contentIsOnTop overlay mode, slots (summary/icon/content), ARIA wiring, CSS token API
@@ -90,6 +93,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── scroll-reveal-frame.md  — ScrollRevealFrame: generic parallax clipping frame, slot API, image grid pattern, CSS tokens, browser support
     ├── scroll-reveal-image.md  — ScrollRevealImage: single-image parallax reveal, focalX, imgWidth/imgHeight, responsive frame height
     ├── marquee-scroller.md     — MarqueeScroller: infinite logo/badge scroller, per-item dynamic slots (marqueeData id), hover/focus/keyboard pause, reduced-motion, CSS tokens
+    ├── rotating-carousel-image.md — RotatingCarouselImage: 3D rotating image carousel, scroll-parallax tilt, focus/keyboard/hover pause, reduced-motion, CSS tokens
     ├── site-navigation.md      — SiteNavigation: responsive nav with auto-collapse, burger menu, decorator indicators, CSS token API
     ├── tab-navigation.md       — TabNavigation: horizontal tab nav with CSS anchor-positioning indicators, anchor scroll, burger collapse, full CSS token API
     ├── social-icons-list.md    — SocialIconsList: data-driven social icon links, ISocialIcon type, logos: icon names, CSS tokens

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

@@ -0,0 +1,41 @@
+{
+  "SRCDEV HeaderBlock Basic": {
+    "description": "HeaderBlock — semantic heading tag decoupled from visual page-heading-N size",
+    "scope": "vue,html",
+    "body": [
+      "<HeaderBlock :tag-level=\"${1:1}\" :class-level=\"${2:1}\">",
+      "  $3",
+      "</HeaderBlock>"
+    ]
+  },
+  "SRCDEV HeaderBlock Decoupled Levels": {
+    "description": "HeaderBlock with a semantic tag lower than its visual size (e.g. hero heading below the page's real h1)",
+    "scope": "vue,html",
+    "body": [
+      "<HeaderBlock :tag-level=\"${1:2}\" :class-level=\"${2:1}\">",
+      "  $3",
+      "</HeaderBlock>"
+    ]
+  },
+  "SRCDEV HeaderBlock With Passthrough Class": {
+    "description": "HeaderBlock with a custom class for one-off styling overrides",
+    "scope": "vue,html",
+    "body": [
+      "<HeaderBlock :tag-level=\"${1:1}\" :class-level=\"${2:1}\" style-class-passthrough=\"${3:hero-title}\">",
+      "  $4",
+      "</HeaderBlock>"
+    ]
+  },
+  "SRCDEV HeaderBlock Paired With Section aria-labelledby": {
+    "description": "HeaderBlock with id bound to a wrapping section's aria-labelledby target",
+    "scope": "vue,html",
+    "body": [
+      "<section aria-labelledby=\"${1:section-heading}\">",
+      "  <HeaderBlock id=\"${1:section-heading}\" :tag-level=\"${2:2}\" :class-level=\"${3:1}\">",
+      "    $4",
+      "  </HeaderBlock>",
+      "  $5",
+      "</section>"
+    ]
+  }
+}

package/.vscode/srcdev-component-rotating-carousel-image.code-snippets

@@ -0,0 +1,74 @@
+{
+  "SRCDEV RotatingCarouselImage Basic": {
+    "description": "RotatingCarouselImage — 3D rotating image carousel with scroll-parallax tilt",
+    "scope": "vue,html",
+    "body": [
+      "<RotatingCarouselImage",
+      "  :data=\"[",
+      "    { src: '${1:/carousel/1.jpg}', alt: '${2:Image 1}' },",
+      "    { src: '${3:/carousel/2.jpg}', alt: '${4:Image 2}' },",
+      "  ]\"",
+      ">$5</RotatingCarouselImage>"
+    ]
+  },
+  "SRCDEV RotatingCarouselImage With Controls": {
+    "description": "RotatingCarouselImage with the visible pause/play control button (WCAG 2.2.2)",
+    "scope": "vue,html",
+    "body": [
+      "<RotatingCarouselImage",
+      "  :data=\"$1images\"",
+      "  show-controls",
+      "  aria-label=\"$2Rotating product photos\"",
+      "/>"
+    ]
+  },
+  "SRCDEV RotatingCarouselImage Static Tilt": {
+    "description": "RotatingCarouselImage with scroll-parallax disabled, using a fixed rotateX instead",
+    "scope": "vue,html",
+    "body": [
+      "<RotatingCarouselImage",
+      "  :data=\"$1images\"",
+      "  :use-parallax-effect=\"false\"",
+      "  :rotate-x=\"${2:10}\"",
+      "  show-controls",
+      "/>"
+    ]
+  },
+  "SRCDEV RotatingCarouselImage Custom Toggle Icon Slot": {
+    "description": "RotatingCarouselImage with the toggle-icon slot fully replacing the control button's icon",
+    "scope": "vue,html",
+    "body": [
+      "<RotatingCarouselImage :data=\"$1images\" show-controls>",
+      "  <template #toggle-icon=\"{ isPaused }\">",
+      "    $2",
+      "  </template>",
+      "</RotatingCarouselImage>"
+    ]
+  },
+  "SRCDEV RotatingCarouselImage CSS Override": {
+    "description": "CSS override scaffold for RotatingCarouselImage — scope to a page or section class",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .rotating-carousel {",
+      "    --rotating-carousel-height: ;",
+      "    --rotating-carousel-item-width: ;",
+      "    --rotating-carousel-item-height: ;",
+      "    --rotating-carousel-offset-bottom: ;",
+      "    --rotating-carousel-rotation-duration: ;",
+      "    --rotating-carousel-z-index: ;",
+      "    --rotating-carousel-focus-outline-width: ;",
+      "    --rotating-carousel-focus-outline-offset: ;",
+      "    --rotating-carousel-control-offset: ;",
+      "    --rotating-carousel-control-background-colour: ;",
+      "    --rotating-carousel-control-background-colour-hover: ;",
+      "    --rotating-carousel-control-text-colour: ;",
+      "    --rotating-carousel-control-border-radius: ;",
+      "    --rotating-carousel-control-border-width: ;",
+      "    --rotating-carousel-control-padding: ;",
+      "    --rotating-carousel-control-font-size: ;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-skip-links.code-snippets

@@ -0,0 +1,55 @@
+{
+  "SRCDEV SkipLinks Basic": {
+    "description": "SkipLinks — accessibility skip-navigation utility, default main-content/footer links",
+    "scope": "vue,html",
+    "body": [
+      "<SkipLinks />"
+    ]
+  },
+  "SRCDEV SkipLinks Custom Links": {
+    "description": "SkipLinks with a custom list of skip targets",
+    "scope": "vue,html",
+    "body": [
+      "<SkipLinks",
+      "  :links=\"[",
+      "    { href: '${1:#site-navigation}', label: '${2:Skip to navigation}' },",
+      "    { href: '${3:#main-content}', label: '${4:Skip to main content}' },",
+      "    { href: '${5:#footer-content}', label: '${6:Skip to footer}' },",
+      "  ]\"",
+      "/>"
+    ]
+  },
+  "SRCDEV SkipLinks With Home Link Slot": {
+    "description": "SkipLinks with the homeLink slot for a logo/home link before the skip-nav",
+    "scope": "vue,html",
+    "body": [
+      "<SkipLinks>",
+      "  <template #homeLink>",
+      "    $1",
+      "  </template>",
+      "</SkipLinks>"
+    ]
+  },
+  "SRCDEV SkipLinks CSS Override": {
+    "description": "CSS override scaffold for SkipLinks — scope to a page or section class",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .skip-links {",
+      "    --skip-links-z-index: ;",
+      "    --skip-links-gap: ;",
+      "    --skip-links-background-colour: ;",
+      "    --skip-links-border-colour: ;",
+      "    --skip-links-border-width: ;",
+      "    --skip-links-padding: ;",
+      "    --skip-links-text-colour: ;",
+      "    --skip-links-link-padding-block: ;",
+      "    --skip-links-link-padding-inline: ;",
+      "    --skip-links-transition-duration: ;",
+      "    --skip-links-focus-outline-width: ;",
+      "    --skip-links-focus-outline-colour: ;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-tabs-core.code-snippets

@@ -0,0 +1,78 @@
+{
+  "SRCDEV TabsCore Basic": {
+    "description": "TabsCore — horizontal tablist with indexed trigger/content slots",
+    "scope": "vue,html",
+    "body": [
+      "<TabsCore :item-count=\"${1:3}\">",
+      "  <template #tab-0-trigger>${2:Overview}</template>",
+      "  <template #tab-0-content>",
+      "    $3",
+      "  </template>",
+      "  <template #tab-1-trigger>${4:Specs}</template>",
+      "  <template #tab-1-content>",
+      "    $5",
+      "  </template>",
+      "  <template #tab-2-trigger>${6:Reviews}</template>",
+      "  <template #tab-2-content>",
+      "    $7",
+      "  </template>",
+      "</TabsCore>"
+    ]
+  },
+  "SRCDEV TabsCore Vertical": {
+    "description": "TabsCore with axis=\"y\" for a vertical tab column",
+    "scope": "vue,html",
+    "body": [
+      "<TabsCore axis=\"y\" :item-count=\"${1:3}\" aria-label=\"${2:Settings}\">",
+      "  <template #tab-0-trigger>$3</template>",
+      "  <template #tab-0-content>$4</template>",
+      "</TabsCore>"
+    ]
+  },
+  "SRCDEV TabsCore Indicators Off": {
+    "description": "TabsCore with the moving hover/active/underline decorators all disabled",
+    "scope": "vue,html",
+    "body": [
+      "<TabsCore",
+      "  :item-count=\"${1:3}\"",
+      "  :track-hover=\"false\"",
+      "  :track-active=\"false\"",
+      "  :track-indicator=\"false\"",
+      ">",
+      "  $2",
+      "</TabsCore>"
+    ]
+  },
+  "SRCDEV TabsCore CSS Override": {
+    "description": "CSS override scaffold for TabsCore — scope to a page or section class",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .tabs-core {",
+      "    --tabs-nav-border: ;",
+      "    --tabs-hover-indicator-colour: ;",
+      "    --tabs-hover-indicator-text-colour: ;",
+      "    --tabs-active-indicator-colour: ;",
+      "    --tabs-active-indicator-text-colour: ;",
+      "    --tabs-underline-indicator-colour: ;",
+      "    --tabs-underline-indicator-height: ;",
+      "    --tabs-list-item-opacity: ;",
+      "    --tabs-list-item-colour: ;",
+      "    --tabs-list-item-colour-selected: ;",
+      "    --tabs-list-item-text-transform: ;",
+      "    --tabs-list-item-font-weight: ;",
+      "    --tabs-list-item-padding-block: ;",
+      "    --tabs-list-item-padding-inline: ;",
+      "    --tabs-list-item-colour-transition-duration: ;",
+      "    --tabs-list-item-focus-outline-width: ;",
+      "    --tabs-list-item-focus-outline-offset: ;",
+      "    --tabs-content-background-colour: ;",
+      "    --tabs-content-border-width: ;",
+      "    --tabs-content-border-colour: ;",
+      "    --tabs-content-border-radius: ;",
+      "    --tabs-axis-y-gap: ;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/app/assets/styles/setup/05.typography/02.utility-classes/_font-classes-page-heading.css

@@ -31,5 +31,6 @@
   font-weight: 600;
   font-variation-settings: "wght" 600;
   line-height: 1;
-  margin: 0;
+  margin-block: 0rem;
+  padding-block: 0rem;
 }

package/app/components/01.atoms/animations/rotating-carousel-image/CONSUMER-STYLING.md

@@ -0,0 +1,54 @@
+# RotatingCarouselImage — Consumer Styling Guide
+
+## Public token API
+
+| Token | Default | Controls |
+|---|---|---|
+| `--rotating-carousel-height` | `70svh` | Height of the carousel's root element |
+| `--rotating-carousel-item-width` | `200px` | Width of each rotating item (and the slider box itself) |
+| `--rotating-carousel-item-height` | `250px` | Height of each rotating item (and the slider box itself) |
+| `--rotating-carousel-offset-bottom` | `35%` | Vertical position of the slider box within the root element |
+| `--rotating-carousel-rotation-duration` | `30s` | Duration of one full 360° rotation |
+| `--rotating-carousel-z-index` | `2` | Stacking context of the slider box |
+| `--rotating-carousel-focus-outline-width` | `2px` | Outline width on the root region and the control button when keyboard-focused (colour is `--theme-ring`) |
+| `--rotating-carousel-focus-outline-offset` | `2px` | Outline offset on the same two focus states |
+| `--rotating-carousel-control-offset` | `8px` | Distance of the pause/play button from the top and end edges |
+| `--rotating-carousel-control-background-colour` | `rgba(0, 0, 0, 0.7)` | Pause/play button background |
+| `--rotating-carousel-control-background-colour-hover` | `rgba(0, 0, 0, 0.9)` | Pause/play button background on hover |
+| `--rotating-carousel-control-text-colour` | `white` | Pause/play button icon colour |
+| `--rotating-carousel-control-border-radius` | `4px` | Pause/play button border radius |
+| `--rotating-carousel-control-padding` | `8px` | Pause/play button padding |
+| `--rotating-carousel-control-font-size` | `14px` | Pause/play button icon font size |
+| `--rotating-carousel-control-transition-duration` | `0.2s` | Pause/play button background-colour transition duration |
+| `--rotating-carousel-control-border-width` | `1px` | Pause/play button border width in forced-colors/high-contrast mode (`prefers-contrast: high`) |
+
+```css
+.my-page {
+  --rotating-carousel-item-width: 260px;
+  --rotating-carousel-item-height: 320px;
+  --rotating-carousel-rotation-duration: 45s;
+}
+```
+
+## High-contrast mode colours are not tokenised
+
+Under `prefers-contrast: high`, the control button switches to the system colour keywords
+`ButtonFace`/`ButtonText` rather than the component's own background/text tokens, so it tracks the
+user's OS-level high-contrast theme. Only the border *width* in that mode is a token
+(`--rotating-carousel-control-border-width`).
+
+## Rotation geometry is prop-driven, not tokens
+
+`rotateX`, `perspective`, and `translateZ` control the 3D tilt and radius of the rotation and are
+set via props (not CSS custom properties), since they also drive the component's own scroll-based
+parallax math:
+
+```vue
+<RotatingCarouselImage :data="images" :perspective="1200" :translate-z="1200" />
+```
+
+## Control button icon and copy
+
+The pause/play button's icon and its `aria-label` copy are overridable via `playIcon`/`pauseIcon`/
+`playLabel`/`pauseLabel` props, or the `toggle-icon` slot for a fully custom icon (scoped with
+`isPaused`) — same pattern as `MarqueeScroller`.