srcdev-nuxt-components 9.6.18 → 9.6.19

package/app/components/02.molecules/expandable/expanding-panel-classic/tests/__snapshots__/ExpandingPanelClassic.spec.ts.snap

@@ -3,12 +3,12 @@
 exports[`ExpandingPanelClassic > renders correct HTML structure with all props set 1`] = `
 "<div class="expanding-panel-classic extra-class">
   <details class="expanding-panel-classic-details" name="snap-all" open="">
-    <summary id="id-snap-all-trigger" class="expanding-panel-classic-summary" aria-controls="id-snap-all-content" aria-expanded="true">
+    <summary id="v-0-1-trigger" class="expanding-panel-classic-summary" aria-controls="v-0-1-content" aria-expanded="true">
       <div class="label-wrapper"></div>
       <div class="icon-wrapper icon-wrapper--hidden"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
     </summary>
   </details>
-  <div id="id-snap-all-content" class="expanding-panel-classic-content" aria-labelledby="id-snap-all-trigger" role="region">
+  <div id="v-0-1-content" class="expanding-panel-classic-content" aria-labelledby="v-0-1-trigger" role="region">
     <div class="inner"></div>
   </div>
 </div>"
@@ -17,12 +17,12 @@ exports[`ExpandingPanelClassic > renders correct HTML structure with all props s
 exports[`ExpandingPanelClassic > renders correct HTML structure with contentIsOnTop true 1`] = `
 "<div class="expanding-panel-classic content-is-on-top">
   <details class="expanding-panel-classic-details" name="snap-content-on-top">
-    <summary id="id-snap-content-on-top-trigger" class="expanding-panel-classic-summary" aria-controls="id-snap-content-on-top-content" aria-expanded="false">
+    <summary id="v-0-1-trigger" class="expanding-panel-classic-summary" aria-controls="v-0-1-content" aria-expanded="false">
       <div class="label-wrapper"></div>
       <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
     </summary>
   </details>
-  <div id="id-snap-content-on-top-content" class="expanding-panel-classic-content" aria-labelledby="id-snap-content-on-top-trigger" role="region">
+  <div id="v-0-1-content" class="expanding-panel-classic-content" aria-labelledby="v-0-1-trigger" role="region">
     <div class="inner"></div>
   </div>
 </div>"
@@ -31,12 +31,12 @@ exports[`ExpandingPanelClassic > renders correct HTML structure with contentIsOn
 exports[`ExpandingPanelClassic > renders correct HTML structure with default props 1`] = `
 "<div class="expanding-panel-classic">
   <details class="expanding-panel-classic-details" name="snap-default">
-    <summary id="id-snap-default-trigger" class="expanding-panel-classic-summary" aria-controls="id-snap-default-content" aria-expanded="false">
+    <summary id="v-0-1-trigger" class="expanding-panel-classic-summary" aria-controls="v-0-1-content" aria-expanded="false">
       <div class="label-wrapper"></div>
       <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
     </summary>
   </details>
-  <div id="id-snap-default-content" class="expanding-panel-classic-content" aria-labelledby="id-snap-default-trigger" role="region">
+  <div id="v-0-1-content" class="expanding-panel-classic-content" aria-labelledby="v-0-1-trigger" role="region">
     <div class="inner"></div>
   </div>
 </div>"
@@ -45,12 +45,12 @@ exports[`ExpandingPanelClassic > renders correct HTML structure with default pro
 exports[`ExpandingPanelClassic > renders correct HTML structure with populated slots 1`] = `
 "<div class="expanding-panel-classic">
   <details class="expanding-panel-classic-details" name="snap-slots">
-    <summary id="id-snap-slots-trigger" class="expanding-panel-classic-summary" aria-controls="id-snap-slots-content" aria-expanded="false">
+    <summary id="v-0-1-trigger" class="expanding-panel-classic-summary" aria-controls="v-0-1-content" aria-expanded="false">
       <div class="label-wrapper"><span>Summary text</span></div>
       <div class="icon-wrapper"><span>▸</span></div>
     </summary>
   </details>
-  <div id="id-snap-slots-content" class="expanding-panel-classic-content" aria-labelledby="id-snap-slots-trigger" role="region">
+  <div id="v-0-1-content" class="expanding-panel-classic-content" aria-labelledby="v-0-1-trigger" role="region">
     <div class="inner">
       <p>Content text</p>
     </div>

package/app/components/03.organisms/responsive-header/tests/__snapshots__/NavigationItems.spec.ts.snap

@@ -8,12 +8,12 @@ exports[`NavigationItems > renders correct HTML structure with default props 1`]
     <li class="overflow-navigation-item visible" style="--_main-navigation-item-width: 0px;" data-group-key="firstNav" data-local-index="2" role="none">
       <div class="expanding-panel-classic overflow-navigation-details">
         <details class="expanding-panel-classic-details" name="overflow-navigation-group">
-          <summary id="id-overflow-navigation-group-trigger" class="expanding-panel-classic-summary" aria-controls="id-overflow-navigation-group-content" aria-expanded="false">
+          <summary id="v-0-0-1-trigger" class="expanding-panel-classic-summary" aria-controls="v-0-0-1-content" aria-expanded="false">
             <div class="label-wrapper"><span class="overflow-navigation-text" aria-label="UI Components submenu" role="menuitem" aria-haspopup="true">UI Components</span></div>
             <div class="icon-wrapper"><span class="iconify i-mdi:chevron-down icon" aria-hidden="true"></span></div>
           </summary>
         </details>
-        <div id="id-overflow-navigation-group-content" class="expanding-panel-classic-content" aria-labelledby="id-overflow-navigation-group-trigger" role="region">
+        <div id="v-0-0-1-content" class="expanding-panel-classic-content" aria-labelledby="v-0-0-1-trigger" role="region">
           <div class="inner">
             <div class="overflow-navigation-sub-nav-inner">
               <ul class="overflow-navigation-sub-nav-list">

package/app/components/03.organisms/responsive-header/tests/__snapshots__/ResponsiveHeader.spec.ts.snap

@@ -41,12 +41,12 @@ exports[`ResponsiveHeader > renders correct HTML structure with default props 1`
             <li class="overflow-navigation-item visible" data-group-key="firstNav" data-local-index="2" role="none">
               <div class="expanding-panel-classic overflow-navigation-details">
                 <details class="expanding-panel-classic-details" name="overflow-navigation-group">
-                  <summary id="id-overflow-navigation-group-trigger" class="expanding-panel-classic-summary" aria-controls="id-overflow-navigation-group-content" aria-expanded="false">
+                  <summary id="v-0-0-1-trigger" class="expanding-panel-classic-summary" aria-controls="v-0-0-1-content" aria-expanded="false">
                     <div class="label-wrapper"><span class="overflow-navigation-text" aria-label="UI Components submenu" role="menuitem" aria-haspopup="true">UI Components</span></div>
                     <div class="icon-wrapper"><span class="iconify i-mdi:chevron-down icon" aria-hidden="true"></span></div>
                   </summary>
                 </details>
-                <div id="id-overflow-navigation-group-content" class="expanding-panel-classic-content" aria-labelledby="id-overflow-navigation-group-trigger" role="region">
+                <div id="v-0-0-1-content" class="expanding-panel-classic-content" aria-labelledby="v-0-0-1-trigger" role="region">
                   <div class="inner">
                     <div class="overflow-navigation-sub-nav-inner">
                       <ul class="overflow-navigation-sub-nav-list">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.6.18",
+  "version": "9.6.19",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",

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

@@ -1,180 +0,0 @@
-# AccordianCore Component
-
-## Overview
-
-`AccordianCore` renders a group of `ExpandingPanel` components (or `ExpandingPanelClassic`, via the `variant` prop). When a shared `name` prop is supplied, the native `<details>` behaviour ensures only one panel can be open at a time. Content is filled via **indexed dynamic slots** — one set per panel, driven by `itemCount`.
-
----
-
-## Dynamic slot pattern
-
-For `itemCount="3"` the following slots exist:
-
-| Slot | Purpose |
-|------|---------|
-| `#accordian-0-summary` | Clickable label for panel 0 |
-| `#accordian-0-icon` | Custom toggle icon for panel 0 (optional) |
-| `#accordian-0-content` | Expandable content for panel 0 |
-| `#accordian-1-summary` | Clickable label for panel 1 |
-| `#accordian-1-icon` | Custom toggle icon for panel 1 (optional) |
-| `#accordian-1-content` | Expandable content for panel 1 |
-| … | … |
-
-**Rules:**
-- Slots are **zero-indexed**: first panel = `accordian-0-*`, last = `accordian-{itemCount - 1}-*`.
-- `accordian-{n}-summary` and `accordian-{n}-content` are the primary slots — always provide these.
-- `accordian-{n}-icon` is optional. When omitted, the default `ExpandingPanel` caret icon is used.
-- Always keep `itemCount` in sync with the number of slot sets you provide.
-
----
-
-## Props reference
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `name` | `string` | `undefined` | Shared `name` passed to every `ExpandingPanel`. When set, native `<details>` grouping means only one panel can be open at a time. Omit for independent panels. |
-| `itemCount` | `number` | `0` | Number of `ExpandingPanel` components to render. |
-| `animationDuration` | `number` | `300` | Expand/collapse animation duration in ms, forwarded to every panel. |
-| `variant` | `"modern" \| "classic"` | `"classic"` | `"classic"` renders each panel as `ExpandingPanelClassic` (`grid-template-rows`-based, animates identically in every browser). `"modern"` renders `ExpandingPanel` instead (`::details-content`-based) — **known not to work correctly on WebKit (Safari/iOS)**, confirmed via real-device testing (2026-08); the animation silently fails and, worse, `contentIsOnTop` positioning never applies there. `"modern"` is opt-in for consumers who've confirmed it works for their audience, not the safe default. Applies to every panel in the group — mixing variants within one `AccordianCore` isn't supported. See [expanding-panel-classic.md](expanding-panel-classic.md) and CLAUDE.md pitfall #19. |
-| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root `.display-accordian` element. |
-
----
-
-## Usage examples
-
-### Basic accordion (exclusive open)
-
-```vue
-<AccordianCore name="faq" :item-count="3" :animation-duration="300">
-  <template #accordian-0-summary><span>What is your returns policy?</span></template>
-  <template #accordian-0-content>
-    <p>You can return any item within 30 days of purchase.</p>
-  </template>
-
-  <template #accordian-1-summary><span>How long does delivery take?</span></template>
-  <template #accordian-1-content>
-    <p>Standard delivery takes 3–5 working days.</p>
-  </template>
-
-  <template #accordian-2-summary><span>Do you ship internationally?</span></template>
-  <template #accordian-2-content>
-    <p>Yes — we ship to over 40 countries.</p>
-  </template>
-</AccordianCore>
-```
-
-Passing `name="faq"` groups all panels so only one can be open at a time.
-
-### Independent panels (no name — each opens freely)
-
-```vue
-<AccordianCore :item-count="2">
-  <template #accordian-0-summary><span>Panel A</span></template>
-  <template #accordian-0-content><p>Content A</p></template>
-
-  <template #accordian-1-summary><span>Panel B</span></template>
-  <template #accordian-1-content><p>Content B</p></template>
-</AccordianCore>
-```
-
-### Custom icons per panel
-
-```vue
-<AccordianCore :item-count="2">
-  <template #accordian-0-summary><span>Section one</span></template>
-  <template #accordian-0-icon><span>＋</span></template>
-  <template #accordian-0-content><p>Content one</p></template>
-
-  <template #accordian-1-summary><span>Section two</span></template>
-  <template #accordian-1-icon><span>＋</span></template>
-  <template #accordian-1-content><p>Content two</p></template>
-</AccordianCore>
-```
-
-### Modern variant (opt-in, not WebKit-safe)
-
-```vue
-<AccordianCore name="faq" :item-count="2" variant="modern">
-  <template #accordian-0-summary><span>Question one?</span></template>
-  <template #accordian-0-content><p>Answer one.</p></template>
-
-  <template #accordian-1-summary><span>Question two?</span></template>
-  <template #accordian-1-content><p>Answer two.</p></template>
-</AccordianCore>
-```
-
-### Programmatic slot rendering (many items)
-
-```vue
-<AccordianCore :item-count="items.length">
-  <template v-for="(item, i) in items" #[`accordian-${i}-summary`] :key="i">
-    <span>{{ item.title }}</span>
-  </template>
-  <template v-for="(item, i) in items" #[`accordian-${i}-content`] :key="i">
-    <p>{{ item.body }}</p>
-  </template>
-</AccordianCore>
-```
-
----
-
-## CSS custom properties
-
-`AccordianCore` has no `--accordian-*` tokens of its own — its panels are `ExpandingPanel`
-(or `ExpandingPanelClassic`, per `variant`) underneath, so `--expanding-panel-*` tokens apply
-directly. See `CONSUMER-STYLING.md` in the component directory for the full override reference,
-including the `.accordian-item` hook and the variant-dependent root class.
-
-Override in a consuming component or theme block:
-
-| Property | Effect |
-|----------|--------|
-| Applied via `accordian-item` class on each panel | Panels animate `margin-block-end` and `border-radius` alongside the expand transition — duration follows `animationDuration`. |
-
----
-
-## Local style override scaffold
-
-When consuming this component, scaffold a style block using `styleClassPassthrough`. Delete the block if unused.
-
-See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
-
-```vue
-<AccordianCore :style-class-passthrough="['my-accordian']" :item-count="3">
-  ...
-</AccordianCore>
-
-<style>
-/* ─── AccordianCore local overrides ────────────────────────────────
-   Colours, borders, geometry only — do not override behaviour.
-   Delete this block if no overrides are needed.
-   ─────────────────────────────────────────────────────────────────── */
-.display-accordian {
-  &.my-accordian {
-    /* Geometry */
-    /* max-width: none; */ /* default is 600px — remove the width cap */
-
-    /* Panel-level overrides via the .accordian-item hook — .expanding-panel-classic is
-       the root class rendered by the default "classic" variant; swap in .expanding-panel
-       if this instance uses variant="modern" */
-    .accordian-item.expanding-panel-classic {
-      /* Border */
-      /* border-block-end: 1px solid currentColor; */
-
-      /* Geometry */
-      /* border-radius: 0.8rem; */
-    }
-  }
-}
-</style>
-```
-
----
-
-## Notes
-
-- `AccordianCore` always passes `style-class-passthrough="['accordian-item']"` to every inner panel — use `.accordian-item` as the hook for per-panel styling overrides.
-- `variant` applies to the whole group — every panel in a given `AccordianCore` renders as the same component. Switching `variant` at runtime swaps every panel's underlying component (via `<component :is>`), which resets each panel's open/closed state.
-- For a single standalone expand/collapse panel, use `ExpandingPanel` (or `ExpandingPanelClassic`) directly instead.
-- Auto-imported in Nuxt — no manual import needed.
-- File: `app/components/02.molecules/expandable/accordian/AccordianCore.vue`

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

@@ -1,74 +0,0 @@
-{
-  "SRCDEV AccordianCore Basic": {
-    "description": "AccordianCore grouped into an exclusive-open accordion (shared name)",
-    "scope": "vue,html",
-    "body": [
-      "<AccordianCore name=\"$1faq\" :item-count=\"$2\">",
-      "  <template #accordian-0-summary>",
-      "    <span>$3Question one?</span>",
-      "  </template>",
-      "  <template #accordian-0-content>",
-      "    <p>$4Answer one.</p>",
-      "  </template>",
-      "",
-      "  <template #accordian-1-summary>",
-      "    <span>$5Question two?</span>",
-      "  </template>",
-      "  <template #accordian-1-content>",
-      "    <p>$6Answer two.</p>",
-      "  </template>",
-      "</AccordianCore>"
-    ]
-  },
-  "SRCDEV AccordianCore Classic Variant": {
-    "description": "AccordianCore using ExpandingPanelClassic panels (animation runs in every browser)",
-    "scope": "vue,html",
-    "body": [
-      "<AccordianCore name=\"$1faq\" :item-count=\"$2\" variant=\"classic\">",
-      "  <template #accordian-0-summary>",
-      "    <span>$3Question one?</span>",
-      "  </template>",
-      "  <template #accordian-0-content>",
-      "    <p>$4Answer one.</p>",
-      "  </template>",
-      "",
-      "  <template #accordian-1-summary>",
-      "    <span>$5Question two?</span>",
-      "  </template>",
-      "  <template #accordian-1-content>",
-      "    <p>$6Answer two.</p>",
-      "  </template>",
-      "</AccordianCore>"
-    ]
-  },
-  "SRCDEV AccordianCore Programmatic Slots": {
-    "description": "AccordianCore with slots generated from an items array via v-for",
-    "scope": "vue,html",
-    "body": [
-      "<AccordianCore :item-count=\"$1items.length\">",
-      "  <template v-for=\"(item, i) in $1items\" #[`accordian-\\${i}-summary`] :key=\"i\">",
-      "    <span>{{ item.$2title }}</span>",
-      "  </template>",
-      "  <template v-for=\"(item, i) in $1items\" #[`accordian-\\${i}-content`] :key=\"i\">",
-      "    <p>{{ item.$3body }}</p>",
-      "  </template>",
-      "</AccordianCore>"
-    ]
-  },
-  "SRCDEV AccordianCore CSS Override": {
-    "description": "CSS override scaffold for AccordianCore panel-level styling",
-    "scope": "css",
-    "body": [
-      ".$1my-accordian {",
-      "  .display-accordian {",
-      "    /* max-width: none; */",
-      "",
-      "    .accordian-item.expanding-panel {",
-      "      /* border-block-end: 1px solid currentColor; */",
-      "      /* border-radius: $2; */",
-      "    }",
-      "  }",
-      "}"
-    ]
-  }
-}

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

@@ -1,100 +0,0 @@
-# AccordianCore — Consumer Styling Guide
-
-## No tokens of its own
-
-`AccordianCore` doesn't define any `--accordian-*` custom properties. It's a thin wrapper that
-renders `itemCount` copies of a panel component (`ExpandingPanel` by default, or
-`ExpandingPanelClassic` when `variant="classic"`) and forwards `name`/`animationDuration` to each
-one — all real styling surface lives on whichever panel component is active. See that
-component's own `CONSUMER-STYLING.md`:
-
-- [../expanding-panel/CONSUMER-STYLING.md](../expanding-panel/CONSUMER-STYLING.md) (default, `variant="modern"`)
-- [../expanding-panel-classic/CONSUMER-STYLING.md](../expanding-panel-classic/CONSUMER-STYLING.md) (`variant="classic"`)
-
-`--expanding-panel-*` tokens set at any scope (global, page) apply to `AccordianCore`'s panels
-too, since they're the same underlying component — no `AccordianCore`-specific override is
-needed for summary gap, icon size, etc.
-
----
-
-## The `.accordian-item` hook
-
-Every panel gets `style-class-passthrough="['accordian-item']"` automatically — this is the one
-`AccordianCore`-specific override surface, used to target *all* panels in the group without
-reaching into `ExpandingPanel`/`ExpandingPanelClassic` internals.
-
-```css
-/* In the consuming page's unscoped <style> block */
-.display-accordian {
-  .accordian-item.expanding-panel {
-    /* modern variant (default) */
-    border-block-end: 1px solid var(--theme-border, #e0e0e0);
-  }
-
-  /* If this instance uses variant="classic", target the classic root class instead: */
-  .accordian-item.expanding-panel-classic {
-    border-block-end: 1px solid var(--theme-border, #e0e0e0);
-  }
-}
-```
-
-Note the root class differs by variant (`.expanding-panel` vs `.expanding-panel-classic`) — a
-selector written for one won't match the other. If you switch `variant` on an existing instance,
-check any `.accordian-item.expanding-panel*` overrides still target the right class.
-
----
-
-## Local overrides
-
-There are no public tokens, so override the classes above with direct properties, scoped to an
-element you own (a page or section class, or a class added with `:style-class-passthrough`). Keep
-the block **unlayered** (no `@layer` wrapper) so it beats the library's `@layer components`. If your
-own file uses `<style scoped>`, selectors that reach inside the component need `:deep()`. Patterns
-and examples: `.claude/skills/component-local-style-override.md`.
-
-### Page or section
-
-No `:deep()` is required (component styles are unscoped).
-
-```css
-.faq-section {
-  .display-accordian {
-    max-width: 480px;
-
-    .accordian-item.expanding-panel {
-      --expanding-panel-summary-padding-block: 1.6rem;
-    }
-  }
-}
-```
-
-### One instance
-
-Use sparingly — prefer global or page-scoped CSS. `styleClassPassthrough` on `AccordianCore`
-targets the root `.display-accordian` element, not the individual panels (those already get
-`.accordian-item` automatically):
-
-```vue
-<AccordianCore name="faq" :item-count="3" :style-class-passthrough="['compact-faq']">
-  ...
-</AccordianCore>
-```
-
-```css
-.display-accordian.compact-faq {
-  max-width: 400px;
-}
-```
-
----
-
-## Notes
-
-- `variant` is group-wide: every panel in one `AccordianCore` renders the same component, so
-  there's no per-panel styling divergence caused by variant — just remember which root class
-  (`.expanding-panel` vs `.expanding-panel-classic`) your `.accordian-item` selectors need.
-- `contentIsOnTop` isn't exposed on `AccordianCore` — it isn't meaningful for a grouped accordion
-  (see `ExpandingPanel`'s own docs for why: it's for a single panel overlaying trailing page
-  content, not stacked/grouped panels). Use `ExpandingPanel`/`ExpandingPanelClassic` directly if
-  you need an overlay panel.
-