srcdev-nuxt-components 9.4.6 → 9.4.8

package/.claude/skills/components/pop-over.md

@@ -0,0 +1,100 @@
+---
+name: PopOver
+description: PopOver generic anchor-positioned disclosure panel with consumer-supplied trigger/content slots, placement prop, CSS token API
+type: reference
+---
+
+# PopOver
+
+## Overview
+
+`PopOver` renders a fully consumer-supplied trigger that opens an anchor-positioned popover panel
+with fully consumer-supplied content, built on the native Popover API
+(`popover`/`popovertarget`) and CSS anchor-positioning (`anchor-name`/`position-anchor`/
+`anchor()`). Unlike [`DisplayTooltip`](display-tooltip.md) (a fixed icon trigger for inline help
+text) or `ActionMenu` (menu semantics with arrow-key navigation), `PopOver` makes no assumption
+about what the trigger or content look like, and always renders its own visible close button.
+
+**Browser support caveat:** CSS anchor-positioning and the Popover API are both comparatively
+recent — check current browser support before relying on this where broad support is a hard
+requirement, same caution as `DisplayTooltip`/`DeepExpandingMenu`'s equivalent gap.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `placement` | `"top" \| "right" \| "bottom" \| "left"` | `"right"` | Which side of the trigger the popover panel opens on. Each side has a `position-try-fallbacks` so the browser flips it automatically if it would overflow the viewport. |
+| `triggerAriaLabel` | `string` | `""` | aria-label on the trigger button — set this when the `trigger` slot is icon-only. Unset (no attribute) by default, since the trigger slot usually carries its own visible/accessible content. |
+| `popoverAriaLabel` | `string` | `""` | aria-label on the popover content region — set this when the `content` slot has no visible heading. |
+| `closeButtonAriaLabel` | `string` | `"Close"` | aria-label on the close button — override for localisation. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element. |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `trigger` | Content rendered inside the trigger button. |
+| `content` | Content rendered inside the popover panel, below the close button. |
+
+## Basic usage
+
+```vue
+<PopOver placement="bottom">
+  <template #trigger>
+    <span>Open popover</span>
+  </template>
+  <template #content>
+    <p>This is some popover content.</p>
+  </template>
+</PopOver>
+```
+
+Icon-only trigger:
+
+```vue
+<PopOver trigger-aria-label="Show filters" popover-aria-label="Filter options">
+  <template #trigger>
+    <Icon name="lucide:filter" aria-hidden="true" />
+  </template>
+  <template #content>
+    <p>Filter controls would go here.</p>
+  </template>
+</PopOver>
+```
+
+## Notes on content
+
+The `content` slot's immediate children have their default UA top/bottom margins trimmed (via
+`:first-child`/`:last-child`), so `--pop-over-content-padding`/`-content-padding-block-start` are
+the only source of space above/below the slotted content — a plain `<p>` doesn't stack its own
+`margin-block` on top of the panel's padding. Interior spacing between multiple slotted children
+(e.g. two paragraphs) is untouched.
+
+## Behaviour
+
+- Opening/closing is handled natively by the Popover API: clicking the trigger toggles the panel,
+  clicking the close button or pressing Escape hides it, and focus returns to the trigger
+  automatically on close.
+- On open, focus moves to the close button (`handleToggle`, driven by the popover's native
+  `toggle` event) so keyboard users land inside the panel immediately.
+
+## CSS custom properties
+
+See `CONSUMER-STYLING.md` for the full `--pop-over-*` token API (gap, trigger outline, panel
+border/background/text/shadow/width, content padding, and close-button tokens).
+
+## Notes
+
+- Auto-imported in Nuxt — no manual import needed.
+- 2026-09-13 migration: moved from an unplaced top-level folder (`app/components/pop-over/`) into
+  `01.atoms/pop-over/`; converted options-style `defineProps` to `interface Props` +
+  `withDefaults`; the slot named `popoverCotent` (typo) was renamed to `content`, and the required
+  `popovertarget` prop was replaced with an auto-generated id (`useId()`) so consumers no longer
+  need to wire up matching ids themselves; the `role="tooltip"` on the popover panel was removed
+  (it described a tooltip, not this component's actual arbitrary-content disclosure semantics);
+  added a real, visible close button (the original template referenced one with no styling or
+  accessible label — literal `x` text); added `placement` (`top`/`right`/`bottom`/`left`, all with
+  `position-try-fallbacks`) — the original only supported opening to the right, with several
+  `@position-try` blocks commented out and unused; promoted every hardcoded value to a public CSS
+  token; added tests, a Storybook story, this skill doc, and a VS Code snippet (all previously
+  missing).

package/.claude/skills/components/rotating-carousel-image.md

@@ -0,0 +1,101 @@
+---
+name: RotatingCarouselImage
+description: RotatingCarouselImage 3D rotating image carousel — scroll-parallax tilt, props, accessibility controls, CSS tokens, consumer styling
+type: reference
+---
+
+# RotatingCarouselImage
+
+## Overview
+
+`RotatingCarouselImage` renders a set of images arranged in a circle and continuously rotated with
+a CSS animation, tilted in 3D via `perspective`/`rotateX`. By default (`useParallaxEffect: true`)
+the tilt follows scroll position instead of a fixed value — the carousel leans more as it enters
+and leaves the viewport centre. The rotation pauses automatically on keyboard focus and when the
+user has `prefers-reduced-motion` set, and can optionally expose a visible pause/play button.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `CarouselImageData[]` (`{ src: string; alt: string }[]`) | `[]` | Images to render around the rotation. |
+| `tag` | `"div" \| "p" \| "span" \| "section" \| "article" \| "aside" \| "header" \| "footer" \| "main" \| "nav" \| "ul" \| "ol"` | `"div"` | Root element tag. |
+| `rotateX` | `number` | `0` | Static X-axis tilt in degrees. Only applied while `useParallaxEffect` is `false`. |
+| `perspective` | `number` | `1000` | CSS perspective distance in pixels. |
+| `translateZ` | `number` | `1000` | Radius of the rotation — distance each item sits from the centre, in pixels. |
+| `pauseOnHover` | `boolean` | `false` | Pauses the rotation while the pointer hovers over the carousel. |
+| `useParallaxEffect` | `boolean` | `true` | Drives the tilt from scroll position instead of the static `rotateX` prop. |
+| `showControls` | `boolean` | `false` | Shows a visible pause/play button. Recommended (WCAG 2.2.2) for any auto-rotating content. |
+| `respectReducedMotion` | `boolean` | `true` | Auto-pauses and disables the animation for `prefers-reduced-motion: reduce`. |
+| `ariaLabel` | `string` | `"Rotating image carousel"` | `aria-label` on the root region — override for localisation. |
+| `ariaDescription` | `string` | `"Use spacebar to pause or play the rotation."` | Screen-reader-only instructions rendered inside the region — override for localisation. |
+| `playIcon` | `string` | `"mdi:play"` | Iconify icon name shown on the control button while paused. Ignored if the `toggle-icon` slot is used. |
+| `pauseIcon` | `string` | `"mdi:pause"` | Iconify icon name shown on the control button while playing. Ignored if the `toggle-icon` slot is used. |
+| `playLabel` | `string` | `"Play rotation"` | Control button `aria-label` while paused — override for localisation. |
+| `pauseLabel` | `string` | `"Pause rotation"` | Control button `aria-label` while playing — override for localisation. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element. |
+
+Import the data type from the library's type exports when building `data` outside the component:
+
+```ts
+import type { CarouselImageData } from "srcdev-nuxt-components";
+```
+
+## Slots
+
+`toggle-icon` (scoped with `{ isPaused: boolean }`) replaces the control button's icon entirely —
+same pattern as `MarqueeScroller`:
+
+```vue
+<RotatingCarouselImage :data="images" show-controls>
+  <template #toggle-icon="{ isPaused }">
+    <Icon :name="isPaused ? 'lucide:play' : 'lucide:pause'" />
+  </template>
+</RotatingCarouselImage>
+```
+
+## Accessibility behaviour
+
+- The root is `role="region"` with `tabindex="0"` so it's independently focusable.
+- Spacebar toggles pause/play while the region is focused.
+- Focusing the region always pauses the rotation so keyboard users can inspect it; blurring
+  resumes it unless the user prefers reduced motion.
+- Hovering the carousel pauses it only when `pauseOnHover` is `true` (default `false`, preserving
+  the component's original opt-in behaviour).
+- All user-visible copy (`ariaLabel`, `ariaDescription`, `playLabel`, `pauseLabel`) is a plain
+  string prop with an English default — pass translated strings from the consumer's own i18n
+  solution.
+
+## Basic usage
+
+```vue
+<RotatingCarouselImage
+  :data="[
+    { src: '/carousel/1.jpg', alt: 'Product shot 1' },
+    { src: '/carousel/2.jpg', alt: 'Product shot 2' },
+  ]"
+  show-controls
+/>
+```
+
+Disable scroll-driven tilt for a static, self-contained rotation:
+
+```vue
+<RotatingCarouselImage :data="images" :use-parallax-effect="false" :rotate-x="10" show-controls />
+```
+
+## CSS custom properties
+
+See `CONSUMER-STYLING.md` in this component's folder for the full public token table (carousel
+height, item size, rotation duration, control button styling). `rotateX`/`perspective`/
+`translateZ` are prop-driven, not tokens, since they also drive the component's own scroll-parallax
+math.
+
+## Migration note (2026-09-15)
+
+Previously lived at `app/components/rotating-carousel/RotatingCarouselImage.vue` with
+options-style `defineProps`, no accessibility controls (no focus/keyboard pause, no visible pause
+button), and several hardcoded CSS values (item size, rotation duration, carousel height) with no
+override hook. Moved to `01.atoms/animations/rotating-carousel-image/`, migrated to
+`interface Props` + `withDefaults`, and given the same pause/focus/reduced-motion/control-button
+pattern as `MarqueeScroller`.

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
@@ -116,7 +120,12 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── deep-expanding-menu.md         — DeepExpandingMenu: anchor-positioned popover nav panels, browser support caveat, CSS token API
     ├── deep-expanding-menu-classic.md — DeepExpandingMenuClassic: <details>-based fallback nav, click-outside close, CSS token API
     ├── display-tooltip.md         — DisplayTooltip: anchor-positioned popover trigger, browser support caveat, CSS token API
-    └── display-tooltip-defined.md — DisplayTooltipDefined: structured title/body/action tooltip content with close button, composes DisplayTooltip
+    ├── display-tooltip-defined.md — DisplayTooltipDefined: structured title/body/action tooltip content with close button, composes DisplayTooltip
+    ├── pop-over.md                — PopOver: generic anchor-positioned disclosure panel, consumer-supplied trigger/content slots, placement prop, CSS token API
+    ├── input-text-core.md        — InputTextCore: native text/date/number input primitive, min/max pass-through (date-picker range), CSS token API; Variants section covers InputTextWithLabel/InputPasswordWithLabel/InputTextAsNumberWithLabel
+    ├── entry-animation.md         — EntryAnimation: scroll-driven entry animation wrapper (slide-in/zoom-reveal/exit-blur utility classes), skipAnimation for above-the-fold loop items, reduced-motion handled at the CSS layer
+    ├── column-flow-grid.md        — ColumnFlowGrid (renamed from MasonryGrid): CSS multi-column text-flow layout, named dynamic slots (no count/data prop), itemMinWidth/gap/unit sizing, CSS token API; not a true masonry, see "which one do I want?"
+    └── masonry-grid.md            — MasonryGrid: real measured-height masonry (greedy shortest-column packing, animated resize) absorbed from the now-retired MasonryGridOrdered; named dynamic slots, fixedWidth/justify, CSS token API
 ```
 
 ## Skill file template

package/.vscode/srcdev-component-column-flow-grid.code-snippets

@@ -0,0 +1,39 @@
+{
+  "SRCDEV ColumnFlowGrid Basic": {
+    "description": "Basic ColumnFlowGrid with a few named item slots",
+    "scope": "vue,html",
+    "body": [
+      "<ColumnFlowGrid :item-min-width=\"$1300\" :gap=\"$21.2\">",
+      "  <template #item-1>",
+      "    $3",
+      "  </template>",
+      "  <template #item-2>",
+      "    $4",
+      "  </template>",
+      "</ColumnFlowGrid>"
+    ]
+  },
+  "SRCDEV ColumnFlowGrid Looped": {
+    "description": "ColumnFlowGrid rendering a v-for list via dynamic slot names (no count prop needed)",
+    "scope": "vue,html",
+    "body": [
+      "<ColumnFlowGrid :item-min-width=\"$1280\" :gap=\"$21.6\">",
+      "  <template v-for=\"($3item, $4index) in $5items\" :key=\"$3item.id\" #[`item-${$4index}`]>",
+      "    $6",
+      "  </template>",
+      "</ColumnFlowGrid>"
+    ]
+  },
+  "SRCDEV ColumnFlowGrid CSS Override": {
+    "description": "CSS override scaffold for ColumnFlowGrid tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .column-flow-grid-wrapper {",
+      "    --column-flow-grid-item-border-colour: $2;",
+      "    --column-flow-grid-item-padding: $3;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-entry-animation.code-snippets

@@ -0,0 +1,29 @@
+{
+  "SRCDEV EntryAnimation Basic": {
+    "description": "Basic EntryAnimation wrapper with a default slide-in animation",
+    "scope": "vue,html",
+    "body": [
+      "<EntryAnimation animation-type=\"$1entry-slide-in\">",
+      "  <template #default>",
+      "    $2",
+      "  </template>",
+      "</EntryAnimation>"
+    ]
+  },
+  "SRCDEV EntryAnimation Looped, Skip First": {
+    "description": "EntryAnimation in a v-for loop, skipping the first (above-the-fold) item",
+    "scope": "vue,html",
+    "body": [
+      "<EntryAnimation",
+      "  v-for=\"($1item, $2index) in $3items\"",
+      "  :key=\"$1item.id\"",
+      "  :skip-animation=\"$2index === 0\"",
+      "  animation-type=\"$4entry-slide-in\"",
+      ">",
+      "  <template #default>",
+      "    $5",
+      "  </template>",
+      "</EntryAnimation>"
+    ]
+  }
+}

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>"
+    ]
+  }
+}