srcdev-nuxt-components 9.1.48 → 9.1.50

package/.claude/skills/components/tab-navigation.md

@@ -0,0 +1,222 @@
+# TabNavigation
+
+## Overview
+
+A responsive horizontal navigation bar with CSS anchor-positioning indicators, smooth anchor
+scroll, and a burger-menu collapse at narrow widths. Accepts both route links (`NuxtLink`) and
+hash anchors (`<a>`). Items are driven by a `NavItemData` object; the component only reads the
+`main` key.
+
+---
+
+## Types
+
+Import from the layer package root — do **not** use `~/types/...` in consuming apps:
+
+```ts
+import type { NavItemData } from "srcdev-nuxt-components"
+```
+
+```ts
+interface NavItem {
+  text: string;
+  href?: string;
+  isExternal?: boolean; // adds target="_blank" rel behaviour via NuxtLink
+  iconName?: string;    // icon set name, rendered via <Icon>
+  cssName?: string;     // extra CSS class on the <li>
+}
+
+interface NavItemData {
+  [key: string]: NavItem[]; // component reads navItemData.main
+}
+```
+
+---
+
+## Props
+
+| Prop (template form) | Type | Default | Notes |
+|---|---|---|---|
+| `nav-item-data` | `NavItemData` | required | Navigation link data — only `main` key is read |
+| `nav-align` | `"left" \| "center" \| "right"` | `"left"` | Positions the tab list within the nav container |
+| `anchor-scroll-offset` | `number \| (() => number)` | — | Pixel offset subtracted from scroll target; pass a getter so it is re-evaluated at click time |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root `<nav>` element |
+
+---
+
+## Basic usage — route links
+
+```vue
+<TabNavigation :nav-item-data="navData" nav-align="center" />
+```
+
+```ts
+import type { NavItemData } from "srcdev-nuxt-components"
+
+const navData: NavItemData = {
+  main: [
+    { text: "Home", href: "/" },
+    { text: "About", href: "/about" },
+    { text: "Services", href: "/services" },
+    { text: "Contact", href: "/contact" },
+  ],
+}
+```
+
+Items without a leading `#` render as `NuxtLink`. The active indicator tracks the current route
+via `router-link-exact-active`.
+
+---
+
+## Anchor scroll usage
+
+Hash-prefixed hrefs render as plain `<a>` elements to keep Vue Router out of the scroll path.
+Pass a getter for the offset so the sticky bar height is read at click time (not at mount).
+
+```vue
+<div ref="stickyRef" class="sticky-nav">
+  <TabNavigation
+    :nav-item-data="anchorData"
+    :anchor-scroll-offset="() => stickyRef?.offsetHeight ?? 0"
+  />
+</div>
+```
+
+```ts
+const stickyRef = ref<HTMLElement | null>(null)
+
+const anchorData: NavItemData = {
+  main: [
+    { text: "Overview", href: "#overview" },
+    { text: "Features", href: "#features" },
+    { text: "Pricing", href: "#pricing" },
+  ],
+}
+```
+
+Clicks are handled by `useAnchorScroll`. Respects `prefers-reduced-motion` — motion-sensitive
+users get an instant jump rather than smooth scroll. See the `composable-anchor-scroll.md` skill
+for the full composable reference.
+
+### Mixed navigation
+
+Route links and hash anchors can coexist in the same `navItemData`:
+
+```ts
+const navData: NavItemData = {
+  main: [
+    { text: "Home", href: "/" },          // NuxtLink
+    { text: "Overview", href: "#intro" }, // <a> + smooth scroll
+    { text: "Blog", href: "/blog" },      // NuxtLink
+  ],
+}
+```
+
+---
+
+## Responsive collapse
+
+`useNavCollapse` measures the nav list on every resize. When the list overflows its container it
+is hidden and replaced with a burger button. The button opens a slide-down panel listing all items.
+
+The nav hides itself (opacity 0) until the first measurement completes to prevent a flash of the
+wrong state.
+
+---
+
+## Alignment variants
+
+```vue
+<TabNavigation :nav-item-data="navData" nav-align="left" />   <!-- default -->
+<TabNavigation :nav-item-data="navData" nav-align="center" />
+<TabNavigation :nav-item-data="navData" nav-align="right" />
+```
+
+`center` and `right` use `margin-inline: auto` / `margin-inline-start: auto` on the `ul`.
+
+---
+
+## CSS token API
+
+Set `--tab-nav-*` tokens on any ancestor element — no prop needed. See `CONSUMER-STYLING.md` in
+the component source folder for the full token reference.
+
+### Horizontal nav
+
+| Token | Default | Controls |
+|---|---|---|
+| `--tab-nav-link-color` | `var(--slate-01, currentColor)` | Link text colour |
+| `--tab-nav-link-hover-color` | `var(--slate-04, currentColor)` | Link hover colour |
+| `--tab-nav-link-active-color` | `var(--slate-01, currentColor)` | Active link colour |
+| `--tab-nav-link-size` | `1.6rem` | Font size |
+| `--tab-nav-link-weight` | `400` | Font weight |
+| `--tab-nav-link-tracking` | `0.06em` | Letter spacing |
+| `--tab-nav-gap` | `2.2rem` | Gap between items |
+| `--tab-nav-transition` | `250ms ease` | Colour fade on hover/active |
+
+### Indicator decorators
+
+| Token | Default | Controls |
+|---|---|---|
+| `--tab-nav-decorator-indicator-color` | `var(--slate-01, currentColor)` | Active underline bar colour |
+| `--tab-nav-decorator-hovered-bg` | `transparent` | Hover pill background (set non-transparent to enable) |
+
+### Mobile panel
+
+| Token | Default | Controls |
+|---|---|---|
+| `--tab-nav-panel-bg` | `var(--page-bg, #1a1614)` | Panel background |
+| `--tab-nav-panel-border-color` | `color-mix(in oklch, var(--slate-01) 35%, transparent)` | Panel top border |
+| `--tab-nav-panel-item-border` | `color-mix(in oklch, var(--slate-01) 8%, transparent)` | Item dividers |
+| `--tab-nav-panel-link-color` | `var(--slate-01, currentColor)` | Panel link colour |
+| `--tab-nav-panel-padding-block` | `1.4rem` | Link vertical padding |
+| `--tab-nav-panel-padding-inline` | `1.5rem` | Link horizontal padding |
+| `--tab-nav-panel-slide-duration` | `350ms` | Panel open/close duration |
+| `--tab-nav-panel-slide-easing` | `cubic-bezier(0.4, 0, 0.2, 1)` | Panel easing |
+
+### Burger button
+
+| Token | Default | Controls |
+|---|---|---|
+| `--tab-nav-burger-color` | `var(--slate-01, currentColor)` | Bar colour |
+| `--tab-nav-burger-width` | `22px` | Bar width |
+| `--tab-nav-burger-height` | `1.5px` | Bar height |
+| `--tab-nav-burger-gap` | `5px` | Gap between bars |
+| `--tab-nav-burger-transition` | `300ms ease` | Open/close animation |
+
+### Backdrop
+
+| Token | Default | Controls |
+|---|---|---|
+| `--tab-nav-backdrop-bg` | `oklch(0% 0 0 / 55%)` | Overlay colour |
+| `--tab-nav-backdrop-blur` | `3px` | Overlay blur |
+| `--tab-nav-backdrop-duration` | `350ms` | Overlay fade duration |
+
+### Page-scoped theme example
+
+```css
+/* Unscoped <style> in the consuming page */
+.services-page {
+  .tab-navigation {
+    --tab-nav-decorator-indicator-color: var(--brand-accent);
+    --tab-nav-decorator-hovered-bg: oklch(from var(--brand-accent) l c h / 0.1);
+    --tab-nav-link-active-color: var(--brand-accent);
+    --tab-nav-panel-bg: var(--page-bg);
+  }
+}
+```
+
+---
+
+## Notes
+
+- Auto-imported in Nuxt — no manual import needed.
+- The indicator and hover pill use CSS Anchor Positioning and animate via `left`/`right` transitions
+  — set `--tab-nav-decorator-hovered-bg` to a semi-transparent colour to enable the pill; it is
+  invisible by default.
+- `--tab-nav-transition` controls only the link colour fade; the indicator slide animation is
+  internally managed and does not inherit this token.
+- The panel teleports its backdrop to `<body>` so it escapes any parent `overflow: hidden` or
+  stacking-context constraint.
+- `--tab-nav-panel-bg` should match `--page-bg` for a seamless panel appearance in the collapsed
+  state.

package/.claude/skills/composable-anchor-scroll.md

@@ -20,7 +20,8 @@ Auto-imported by Nuxt — **do not create a local copy**.
 
 | Option | Type | Default | Description |
 |---|---|---|---|
-| `offset` | `number \| (() => number)` | `0` | Pixels subtracted from the final scroll position. Pass a getter function to read a sticky element's height at scroll time rather than at composable init. |
+| `offset` | `number | (() => number)` | `0` | Pixels subtracted from the final scroll position. Pass a getter function to read a sticky element's height at scroll time rather than at composable init. |
+| `offsetElement` | `Ref<HTMLElement &#124; null>` | — | Convenience alternative to `offset`. Reads `element.offsetHeight` at scroll time. Takes priority over `offset` when both are supplied. |
 
 ### Returns
 
@@ -28,17 +29,69 @@ Auto-imported by Nuxt — **do not create a local copy**.
 |---|---|---|
 | `handleNavClick` | `(event: MouseEvent, href: string) => void` | Attach to click handlers. No-ops silently for non-`#` hrefs — safe on all links. |
 | `scrollToAnchor` | `(hash: string) => void` | Scroll programmatically. Accepts `"#section"` or `"section"`. Respects motion preference and offset. |
+| `activeHash` | `Ref<string>` | Reactive ref tracking the currently active hash. Starts `""` on server and after hydration is set from `window.location.hash`. Updated on every `handleNavClick` call. Use this to drive `is-active` classes — **do not use `route.hash`**, which is not updated by `history.pushState`. |
+
+---
+
+## Active state
+
+`activeHash` is the correct way to drive active-state styling on anchor nav links.
+
+**Why not `route.hash`?** `handleNavClick` calls `history.pushState` directly (to avoid triggering Vue Router's scroll behaviour). `pushState` does not update Vue Router's reactive `route.hash`, so `route.hash` stays stale after clicks.
+
+**Hydration safety:** `activeHash` is initialised to `""` on both server and client so the SSR-rendered HTML always matches the pre-mount client vdom. The real hash is applied in `onMounted`, after hydration, to avoid mismatches.
+
+**Default active item:** `activeHash` is empty until `onMounted` fires. If no hash is in the URL, set a default in the component's own `onMounted` (which runs after the composable's `onMounted`):
+
+```ts
+const { handleNavClick, activeHash } = useAnchorScroll({ offset: 64 });
+
+onMounted(() => {
+  // Default to first section when no hash is in the URL
+  if (!activeHash.value && sections[0]) activeHash.value = `#${sections[0].id}`;
+});
+```
+
+### Binding active state in a template
+
+```vue
+<a
+  v-for="section in sections"
+  :key="section.id"
+  :href="`#${section.id}`"
+  :class="{ 'is-active': `#${section.id}` === activeHash }"
+  @click="(e) => handleNavClick(e, `#${section.id}`)"
+>{{ section.label }}</a>
+```
+
+### Active state in TabNavigation
+
+`TabNavigation` handles `activeHash` internally for hash nav items. No extra work needed —
+just pass anchor hrefs in `navItemData` and the active indicator moves automatically on click
+and on initial load (defaulting to the first hash item when the URL has no hash).
 
 ---
 
 ## Usage patterns
 
-### 1. TabNavigation with anchor links (no extra code needed)
+### 1. TabNavigation with a sticky site header
 
-`TabNavigation` has `useAnchorScroll` wired up internally. Pass anchor hrefs in
-`navItemData.main` and smooth scrolling works automatically.
+`TabNavigation` accepts an `anchorScrollOffset` prop that is passed directly to `useAnchorScroll`.
+Pass a getter so the live header height is read at scroll time — this stays correct if the
+header resizes on different viewports.
+
+```vue
+<header ref="headerRef">
+  <TabNavigation
+    :nav-item-data="navItemData"
+    :anchor-scroll-offset="() => headerRef?.offsetHeight ?? 0"
+  />
+</header>
+```
 
 ```ts
+const headerRef = ref<HTMLElement | null>(null);
+
 const navItemData = {
   main: [
     { text: "About",    href: "#about" },
@@ -49,39 +102,55 @@ const navItemData = {
 };
 ```
 
-```vue
-<TabNavigation :nav-item-data="navItemData" />
+**CSS alternative** — if you want all anchor links site-wide to respect the sticky header
+(not just the ones inside `TabNavigation`), add `scroll-padding-top` to `html` instead and
+skip the prop:
+
+```css
+/* ─ app/assets/styles/setup/01.config/_head.css ─ */
+html {
+  scroll-padding-top: var(--sticky-header-height, 64px);
+}
 ```
 
-No offset is applied here. If your site header is fixed/sticky and obscures section headings,
-use pattern 2 below to build a custom nav with an explicit offset.
+```css
+/* ─ app/assets/styles/main.css ─ */
+:root {
+  --sticky-header-height: 64px; /* adjust to match actual header height */
+}
+```
+
+`scrollIntoView` respects `scroll-padding-top`, so this works with the no-offset code path.
 
 ---
 
-### 2. Sticky section nav with dynamic offset
+### 2. Sticky section nav with dynamic offset (using offsetElement)
 
-The most common single-page pattern: a sticky bar at the top of the content area, where
-each link scrolls to a section below it. Pass a getter for `offset` so the bar's live height
-is read at scroll time — this stays correct if the bar resizes (e.g. on viewport changes).
+The `offsetElement` option is the clearest way to derive an offset from an element ref.
+It reads `offsetHeight` at scroll time, so resize changes are always captured.
 
 ```ts
 const stickyNavRef = ref<HTMLElement | null>(null);
 
-const { handleNavClick } = useAnchorScroll({
-  offset: () => stickyNavRef.value?.offsetHeight ?? 0,
+const { handleNavClick, activeHash } = useAnchorScroll({ offsetElement: stickyNavRef });
+
+onMounted(() => {
+  if (!activeHash.value && sections[0]) activeHash.value = `#${sections[0].id}`;
 });
 ```
 
 ```vue
 <nav ref="stickyNavRef" class="sticky-section-nav">
-  <a href="#overview" @click="(e) => handleNavClick(e, '#overview')">Overview</a>
-  <a href="#pricing"  @click="(e) => handleNavClick(e, '#pricing')">Pricing</a>
-  <a href="#contact"  @click="(e) => handleNavClick(e, '#contact')">Contact</a>
+  <a
+    v-for="section in sections"
+    :key="section.id"
+    :href="`#${section.id}`"
+    :class="{ 'is-active': `#${section.id}` === activeHash }"
+    @click="(e) => handleNavClick(e, `#${section.id}`)"
+  >{{ section.label }}</a>
 </nav>
 
-<section id="overview">…</section>
-<section id="pricing">…</section>
-<section id="contact">…</section>
+<section v-for="section in sections" :key="section.id" :id="section.id">…</section>
 ```
 
 CSS to make the nav sticky:
@@ -102,7 +171,7 @@ Same pattern as above — useful for terms, privacy policy, or documentation pag
 sidebar links to in-document sections.
 
 ```ts
-const { handleNavClick } = useAnchorScroll({ offset: 24 }); // fixed header height
+const { handleNavClick, activeHash } = useAnchorScroll({ offset: 24 }); // fixed header height
 ```
 
 ```vue
@@ -110,6 +179,7 @@ const { handleNavClick } = useAnchorScroll({ offset: 24 }); // fixed header heig
   <nav>
     <a v-for="section in termsSections" :key="section.id"
        :href="`#${section.id}`"
+       :class="{ 'is-active': `#${section.id}` === activeHash }"
        @click="(e) => handleNavClick(e, `#${section.id}`)">
       {{ section.title }}
     </a>
@@ -156,10 +226,10 @@ onMounted(() => {
 
 ## How offset works
 
-Without `offset`, the composable calls `el.scrollIntoView({ behavior, block: "start" })` —
+Without `offset` or `offsetElement`, the composable calls `el.scrollIntoView({ behavior, block: "start" })` —
 the element's top edge aligns with the viewport top.
 
-With `offset`, it uses `window.scrollTo` with a calculated position:
+With an offset, it uses `window.scrollTo` with a calculated position:
 
 ```
 top = el.getBoundingClientRect().top + window.scrollY - offset
@@ -168,16 +238,19 @@ top = el.getBoundingClientRect().top + window.scrollY - offset
 This shifts the final resting position downward by `offset` pixels, so a sticky bar of that
 height does not overlap the section heading.
 
-**Use a getter when the bar can resize:**
+**`offsetElement` vs `offset` getter:**
 
 ```ts
-// ✅ Read height at click time
-const { handleNavClick } = useAnchorScroll({
+// ✅ offsetElement — reads offsetHeight at click time, no boilerplate
+const { handleNavClick, activeHash } = useAnchorScroll({ offsetElement: navRef });
+
+// ✅ offset getter — equivalent, useful when the offset is derived from more than one element
+const { handleNavClick, activeHash } = useAnchorScroll({
   offset: () => navRef.value?.offsetHeight ?? 0,
 });
 
-// ✗ Captured at init — stale if the bar changes height later
-const { handleNavClick } = useAnchorScroll({
+// ✗ Static offset — stale if the bar changes height later
+const { handleNavClick, activeHash } = useAnchorScroll({
   offset: navRef.value?.offsetHeight ?? 0,
 });
 ```
@@ -195,10 +268,19 @@ When `window.matchMedia("(prefers-reduced-motion: reduce)").matches` is `true`:
 No configuration needed — the check happens at call time, so toggling the OS preference mid-session
 takes effect immediately on the next click.
 
+> **Debugging tip:** If clicks produce an instant jump instead of smooth scroll, check whether
+> "Reduce Motion" is enabled in your OS accessibility settings (macOS: System Preferences →
+> Accessibility → Display → Reduce Motion). This is intentional behaviour, not a bug.
+
 ---
 
 ## Notes
 
+- **`activeHash` vs `route.hash`** — always use `activeHash` for active-state classes. `route.hash`
+  is not updated by `history.pushState` and will be stale after clicks.
+- **Hydration mismatches** — `activeHash` is always `""` at render time; the real value is set in
+  `onMounted`. Never initialise it from `window.location.hash` in setup — that causes a server/client
+  class mismatch.
 - **`history.pushState`** — `handleNavClick` pushes the hash into the URL so the back button and
   deep links work correctly. This runs after `preventDefault` stops Vue Router from navigating,
   so the URL stays in sync without triggering a router scroll.

package/.claude/skills/composable-dialog-controls.md

@@ -2,77 +2,89 @@
 
 ## Overview
 
-`useDialogControls` manages open/closed state for one or more named dialogs (modals, confirmation panels, etc.) with optional confirm/cancel callbacks. It is the standard pattern for dialog orchestration in consuming apps.
+`useDialogControls` manages open/closed state for one or more named dialogs with optional
+confirm/cancel callbacks. Pass all dialog IDs and their callbacks in a single config object
+at call time — no separate initialisation or registration step needed.
 
-**This composable ships inside the `srcdev-nuxt-components` layer** (`app/composables/useDialogControls.ts`). It is auto-imported via the Nuxt layer — **do not create a local copy** in the consuming app.
+**This composable ships inside the `srcdev-nuxt-components` layer** (`app/composables/useDialogControls.ts`).
+It is auto-imported via the Nuxt layer — **do not create a local copy** in the consuming app.
 
 ## Usage
 
-### 1. Initialise named dialogs
+### 1. Set up dialog controls
 
-Call `initialiseDialogs` with an array of string IDs — one per dialog you need to control:
+Call `useDialogControls` with a config object whose keys are dialog IDs:
 
 ```ts
-const { dialogsConfig, controlDialogs, initialiseDialogs, registerDialogCallbacks } = useDialogControls()
-
-initialiseDialogs(["confirmDelete", "editProfile"])
+const { dialogsConfig, openDialog, closeDialog } = useDialogControls({
+  confirmDelete: {
+    onConfirm: () => deleteItem(),
+    onCancel: () => console.log("Cancelled"),
+  },
+  editProfile: {
+    onConfirm: () => saveProfile(),
+  },
+})
 ```
 
-Each ID gets a reactive boolean in `dialogsConfig` (initially `false` = closed).
+Each key gets a reactive boolean in `dialogsConfig` (initially `false` = closed).
+Callbacks are optional — omit either or both.
 
 ### 2. Bind to a dialog component
 
-Use `dialogsConfig[id]` as the `v-model` or `:open` prop on your dialog:
+Use `v-if` + `v-model` with `dialogsConfig[id]`:
 
 ```vue
-<ExpandingPanel v-model="dialogsConfig.confirmDelete">
-  <template #summary>Confirm delete</template>
-  <template #content>
-    <p>Are you sure?</p>
-    <button @click="controlDialogs('confirmDelete', false, 'confirm')">Yes, delete</button>
-    <button @click="controlDialogs('confirmDelete', false, 'cancel')">Cancel</button>
+<DisplayDialog
+  v-if="dialogsConfig['confirmDelete']"
+  v-model="dialogsConfig['confirmDelete']"
+  variant="confirm"
+  data-dialog-id="confirmDelete"
+>
+  <template #dialogTitle>
+    <p>Confirm delete?</p>
+  </template>
+  <template #dialogContent>
+    <p>This action cannot be undone.</p>
   </template>
-</ExpandingPanel>
+  <template #actionButtonLeft>
+    <button @click="closeDialog('confirmDelete', 'cancel')">Cancel</button>
+  </template>
+  <template #actionButtonRight>
+    <button @click="closeDialog('confirmDelete', 'confirm')">Delete</button>
+  </template>
+</DisplayDialog>
 ```
 
 ### 3. Open and close dialogs
 
 ```ts
 // Open
-controlDialogs("confirmDelete", true)
+openDialog("confirmDelete")
 
-// Close without action
-controlDialogs("confirmDelete", false)
+// Close without firing a callback
+closeDialog("confirmDelete")
 
-// Close and fire a callback
-controlDialogs("confirmDelete", false, "confirm") // fires onConfirm if registered
-controlDialogs("confirmDelete", false, "cancel")  // fires onCancel if registered
-```
+// Close and fire onConfirm
+closeDialog("confirmDelete", "confirm")
 
-### 4. Register callbacks (optional)
-
-Register confirm/cancel callbacks before the dialog is opened:
-
-```ts
-registerDialogCallbacks("confirmDelete", {
-  onConfirm: () => deleteItem(),
-  onCancel: () => console.log("Cancelled"),
-})
+// Close and fire onCancel
+closeDialog("confirmDelete", "cancel")
 ```
 
-Callbacks fire when `controlDialogs` is called with a matching action string.
-
 ## API reference
 
-| Return value | Description |
-|---|---|
-| `dialogsConfig` | Reactive object — `{ [id]: boolean }`. Bind to dialog `v-model` or `:open`. |
-| `initialiseDialogs(ids)` | Seeds `dialogsConfig` with `false` for each ID. Call once in `<script setup>`. |
-| `controlDialogs(name, state, action?)` | Set `dialogsConfig[name]` to `state`. If `state` is `false` and `action` is provided, fires the registered callback before closing. |
-| `registerDialogCallbacks(id, { onConfirm?, onCancel? })` | Register lifecycle callbacks for a dialog ID. |
+| Return value | Type | Description |
+|---|---|---|
+| `dialogsConfig` | `Record<string, boolean>` | Reactive map of dialog ID → open state. Bind to `v-model` and `v-if`. |
+| `openDialog(name)` | `(name: string) => void` | Sets `dialogsConfig[name]` to `true`. |
+| `closeDialog(name, action?)` | `(name: string, action?: 'confirm' \| 'cancel') => void` | Sets `dialogsConfig[name]` to `false`. If `action` is provided, fires the registered callback first. |
 
 ## Notes
 
-- `useDialogControls` is scoped to the component instance — each component that calls it gets its own `dialogsConfig`. It is not a global store; do not expect state to persist across components.
-- For a single dialog, `initialiseDialogs(["myDialog"])` is still required — omitting it means `dialogsConfig.myDialog` is `undefined` and reactivity won't work.
-- `controlDialogs` checks for the callback before setting state, so the callback always runs before the dialog closes.
+- State is scoped to the component instance — each component that calls `useDialogControls` gets
+  its own `dialogsConfig`. It is not a global store.
+- `v-if="dialogsConfig['id']"` on the dialog component ensures it only mounts when open, which
+  triggers `onMounted` body-lock logic inside `DisplayDialog`.
+- Callbacks fire before the dialog closes — useful for async operations that need to run while
+  the dialog is still visible.

package/.claude/skills/index.md

@@ -48,7 +48,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── composable-whatsapp.md            — useWhatsApp: open pre-filled wa.me link from form payload; runtime config, security, usage
 ├── composable-zod-validation.md      — useZodValidation: schema-driven form validation, error binding, submit flow, API error push
 ├── composable-colour-scheme.md       — useColourScheme: reactive light/dark/auto switching, localStorage persistence, runtime config
-├── composable-dialog-controls.md     — useDialogControls: named dialog open/close state with confirm/cancel callbacks
+├── composable-dialog-controls.md     — useDialogControls: single-call setup with config object, openDialog/closeDialog API, confirm/cancel callbacks
 ├── composable-anchor-scroll.md       — useAnchorScroll: smooth anchor scrolling with reduced-motion support, dynamic offset, and TabNavigation integration
 ├── composable-tooltips-guide.md      — useTooltipsGuide: sequential popover guide with auto-start, dismiss-to-advance, manual controls
 └── components/
@@ -56,7 +56,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── eyebrow-text.md         — EyebrowText props, usage patterns, styling
     ├── hero-text.md            — HeroText props, usage patterns, styling
     ├── layout-grid-by-cols.md  — LayoutGridByCols dynamic slots (item-{n}), props, column/gap/breakpoint decisions
-    ├── layout-row.md           — LayoutRow variant guide, width/margin decisions, usage patterns
+    ├── 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
     ├── 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
@@ -74,12 +74,15 @@ 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
     ├── 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
     ├── display-qr-code.md      — DisplayQrCode: QR code SVG from a string value, colour/size/variant/radius props, currentColor default
     ├── capture-qr-code.md      — CaptureQrCode: live camera scanner, error state, visibility/route/KeepAlive lifecycle, media stream cleanup
     ├── decode-qr-code.md       — DecodeQrCode: file picker + drag-and-drop image decoder, shared results list, CSS override points
     ├── auto-grid.md            — AutoGrid: auto-fit responsive grid, $slots iteration, --auto-grid-min-col-size/gap tokens, semantic tag + aria
     ├── display-avatar.md       — DisplayAvatar: circular avatar with image/initials fallback, size variants, chip badge, icon slot, styleClassPassthrough
+    ├── card-core.md            — CardCore: generic card container, dynamic named slots as rows, 4 variants, blurred backdrop layer, full CSS token API
+    ├── display-dialog.md       — DisplayDialog: native <dialog> overlay, 5 variants (dialog/modal/confirm/alert/fullscreen), useDialogControls integration, CSS token API
     ├── display-chip.md         — DisplayChip: status indicator chip overlay, CSS trig positioning, circle/square shapes, status colours, icon/label content
     ├── display-pill.md         — DisplayPill: pill/badge label with icon slot, 6 variants, 3 sizes, reversible order, full CSS token API for border/outline/colour
     ├── carousel-flip.md        — CarouselFlip: FLIP-animated carousel, carouselDataIds slot API, buttonLayout variants (sides/controls-flanking/controls-grouped-right/overlay), CSS tokens