srcdev-nuxt-components 9.3.5 → 9.3.6

package/.claude/skills/components/expanding-panel.md

@@ -2,11 +2,11 @@
 
 ## Overview
 
-`ExpandingPanel` is a single expand/collapse panel built on the native `<details>`/`<summary>` element. It animates open/close by styling the `::details-content` pseudo-element (the browser's own anonymous box wrapping everything after `<summary>`), supports `v-model` for controlled state, and can be locked open with `forceOpened`. Multiple panels can be grouped into a native accordion by sharing the same `name` prop (see `AccordianCore`).
+`ExpandingPanel` is a single expand/collapse panel built on the native `<details>`/`<summary>` element. It animates open/close by styling the `::details-content` pseudo-element (the browser's own anonymous box wrapping everything after `<summary>`) where supported, supports `v-model` for controlled state, and can be locked open with `forceOpened`. Multiple panels can be grouped into a native accordion by sharing the same `name` prop (see `AccordianCore`).
 
-`::details-content` is Baseline "newly available" (Sept 2025) — Chrome, Firefox, and Safari all generate the box. The height *animation* itself depends on `interpolate-size: allow-keywords`, which as of 2026 only runs in Chromium; other browsers still open/close correctly, just without the transition (accepted progressive-enhancement trade-off, not a bug).
+**WebKit (Safari/iOS) does not support `::details-content`** as of 2026-08, confirmed via real-device testing — Chrome's device-emulation mode cannot catch this, since it's still the Blink engine underneath regardless of which browser UI it's simulating. WebKit silently drops the whole rule block: no console warning, no error, just no animation and (more seriously) `content-is-on-top`'s `position: absolute` never applying, so an overlay panel renders in normal document flow and can break the surrounding layout. Fixed 2026-08-22: `ExpandingPanel` now carries an `@supports not selector(::details-content)` fallback block that reproduces `ExpandingPanelClassic`'s `grid-template-rows` technique automatically — no consumer action needed, this works transparently on every browser. See pitfall #19 in the repo's `CLAUDE.md` for the full mechanism.
 
-If a consumer needs the animation to run identically in every browser today, use [`ExpandingPanelClassic`](expanding-panel-classic.md) instead — same props/model/slots API, older `grid-template-rows` implementation with no Baseline-2025 dependency.
+`ExpandingPanelClassic` still exists as a standalone option — same props/model/slots API, always uses the `grid-template-rows` implementation with no pseudo-element dependency at all — but there's no longer a compatibility reason to prefer it over `ExpandingPanel`.
 
 ---
 
@@ -145,7 +145,9 @@ Always supply a meaningful `name` prop when using multiple panels on the same pa
 
 ## Styling the content when contentIsOnTop
 
-`background-color`, `padding`, and a shadow can be set directly on `.expanding-panel-content` (or on a wrapper inside the `#content` slot — either works). The clipping boundary is now `::details-content` itself (`overflow: clip`, animated `height`), and `.expanding-panel-content` is a *child* of that box — so its own box, including padding/border/background, is correctly clipped to the animated height regardless of where the styling lives. This is a change from the previous `.inner`-based implementation, which had to clip its own box and so couldn't carry visual styling directly.
+`background-color`, `padding`, and a shadow can be set directly on `.expanding-panel-content` (or on a wrapper inside the `#content` slot — either works) in browsers that support `::details-content`: the clipping boundary there is `::details-content` itself (`overflow: clip`, animated `height`), and `.expanding-panel-content` is a *child* of that box, so its own box is correctly clipped regardless of where the styling lives.
+
+In the WebKit fallback path (no `::details-content` support), `.expanding-panel-content` itself is the animated grid track (`grid-template-rows: 0fr → 1fr`) and remains the element being sized — so styling placed directly on it is still clipped correctly there too. The one structural difference: the fallback wraps the `#content` slot in an internal `.inner` div (needed so a plain child's `min-height: auto` doesn't stop the row collapsing to true `0`) — this is purely an implementation detail for the collapse mechanism and isn't a styling hook; don't target `.inner` directly, style `.expanding-panel-content` or the slot's own markup instead, same as the `::details-content` path.
 
 ---
 
@@ -211,7 +213,7 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
 
 ## Notes
 
-- The open/close animation targets `::details-content` (`height: 0 → auto`, `overflow: clip`) — no JS height measurement needed. Requires `interpolate-size: allow-keywords` support (Chromium only as of 2026); other browsers still toggle correctly, just instantly.
+- The open/close animation targets `::details-content` (`height: 0 → auto`, `overflow: clip`) where supported — no JS height measurement needed. Requires `interpolate-size: allow-keywords` for the height transition itself (Chromium only as of 2026; other browsers with `::details-content` support still toggle correctly, just instantly). WebKit has neither, and falls back to `ExpandingPanelClassic`'s `grid-template-rows` technique automatically (see the Overview section above) — that path animates in every browser regardless of `interpolate-size`.
 - `content-is-on-top` is applied to the root `.expanding-panel` element, not `.expanding-panel-content` — style overrides must scope through it, e.g. `.expanding-panel.my-panel .expanding-panel-content { ... }`.
 - When `forceOpened` is `true`, `open` stays `true` regardless of `v-model`, but `v-model` still updates internally on clicks (useful if you later set `forceOpened` back to `false`).
 - Group panels into a native accordion (only one open at a time) by passing the same `name` to multiple panels or use `AccordianCore` which handles this automatically.

package/app/components/02.molecules/expandable/accordian/tests/__snapshots__/AccordianCore.spec.ts.snap

@@ -8,7 +8,7 @@ exports[`AccordianCore > renders correct HTML structure with all props set 1`] =
         <div class="label-wrapper"></div>
         <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
       </summary>
-      <div id="id-snapshot-accordian-content" class="expanding-panel-content" aria-labelledby="id-snapshot-accordian-trigger" role="region"></div>
+      <div id="id-snapshot-accordian-content" class="expanding-panel-content" aria-labelledby="id-snapshot-accordian-trigger" role="region"><div class="inner"></div></div>
     </details>
   </div>
   <div class="expanding-panel accordian-item" icon-size="medium">
@@ -17,7 +17,7 @@ exports[`AccordianCore > renders correct HTML structure with all props set 1`] =
         <div class="label-wrapper"></div>
         <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
       </summary>
-      <div id="id-snapshot-accordian-content" class="expanding-panel-content" aria-labelledby="id-snapshot-accordian-trigger" role="region"></div>
+      <div id="id-snapshot-accordian-content" class="expanding-panel-content" aria-labelledby="id-snapshot-accordian-trigger" role="region"><div class="inner"></div></div>
     </details>
   </div>
   <div class="expanding-panel accordian-item" icon-size="medium">
@@ -26,7 +26,7 @@ exports[`AccordianCore > renders correct HTML structure with all props set 1`] =
         <div class="label-wrapper"></div>
         <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
       </summary>
-      <div id="id-snapshot-accordian-content" class="expanding-panel-content" aria-labelledby="id-snapshot-accordian-trigger" role="region"></div>
+      <div id="id-snapshot-accordian-content" class="expanding-panel-content" aria-labelledby="id-snapshot-accordian-trigger" role="region"><div class="inner"></div></div>
     </details>
   </div>
 </div>"
@@ -40,7 +40,7 @@ exports[`AccordianCore > renders correct HTML structure with default props 1`] =
         <div class="label-wrapper"></div>
         <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
       </summary>
-      <div id="id-v-0-0-0-content" class="expanding-panel-content" aria-labelledby="id-v-0-0-0-trigger" role="region"></div>
+      <div id="id-v-0-0-0-content" class="expanding-panel-content" aria-labelledby="id-v-0-0-0-trigger" role="region"><div class="inner"></div></div>
     </details>
   </div>
   <div class="expanding-panel accordian-item" icon-size="medium">
@@ -49,7 +49,7 @@ exports[`AccordianCore > renders correct HTML structure with default props 1`] =
         <div class="label-wrapper"></div>
         <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
       </summary>
-      <div id="id-v-0-0-1-content" class="expanding-panel-content" aria-labelledby="id-v-0-0-1-trigger" role="region"></div>
+      <div id="id-v-0-0-1-content" class="expanding-panel-content" aria-labelledby="id-v-0-0-1-trigger" role="region"><div class="inner"></div></div>
     </details>
   </div>
 </div>"
@@ -63,7 +63,7 @@ exports[`AccordianCore > renders correct HTML structure with populated slots 1`]
         <div class="label-wrapper"><span>Summary 0</span></div>
         <div class="icon-wrapper"><span>Icon 0</span></div>
       </summary>
-      <div id="id-v-0-0-0-content" class="expanding-panel-content" aria-labelledby="id-v-0-0-0-trigger" role="region"><span>Content 0</span></div>
+      <div id="id-v-0-0-0-content" class="expanding-panel-content" aria-labelledby="id-v-0-0-0-trigger" role="region"><div class="inner"><span>Content 0</span></div></div>
     </details>
   </div>
   <div class="expanding-panel accordian-item" icon-size="medium">
@@ -72,7 +72,7 @@ exports[`AccordianCore > renders correct HTML structure with populated slots 1`]
         <div class="label-wrapper"><span>Summary 1</span></div>
         <div class="icon-wrapper"><span>Icon 1</span></div>
       </summary>
-      <div id="id-v-0-0-1-content" class="expanding-panel-content" aria-labelledby="id-v-0-0-1-trigger" role="region"><span>Content 1</span></div>
+      <div id="id-v-0-0-1-content" class="expanding-panel-content" aria-labelledby="id-v-0-0-1-trigger" role="region"><div class="inner"><span>Content 1</span></div></div>
     </details>
   </div>
 </div>"

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

@@ -90,11 +90,16 @@ visual style, pass a modifier class:
 - `--expanding-panel-content-gap` and `--expanding-panel-content-z-index` only take effect when
   `contentIsOnTop` is `true` — they're no-ops for the default (in-flow) layout.
 - `background-color`, `padding`, `border`, and shadow are all safe to set directly on
-  `.expanding-panel-content`. The open/close animation clips via `overflow: clip` on
-  `::details-content` (the native anonymous box wrapping everything after `<summary>`), and
-  `.expanding-panel-content` is a child of that box — so its own box is correctly clipped to the
-  animated height while closed/closing. A wrapper inside the `#content` slot works equally well
-  if you prefer to keep the styling scoped to your own markup.
+  `.expanding-panel-content`. Where `::details-content` is supported (not WebKit — see below), the
+  open/close animation clips via `overflow: clip` on that pseudo-element, and
+  `.expanding-panel-content` is a child of it, so its own box is correctly clipped to the animated
+  height while closed/closing. A wrapper inside the `#content` slot works equally well if you
+  prefer to keep the styling scoped to your own markup.
+- WebKit (Safari/iOS) doesn't support `::details-content` — `ExpandingPanel` falls back to
+  `ExpandingPanelClassic`'s `grid-template-rows` technique there automatically, no consumer action
+  needed. That path wraps the `#content` slot in an internal `.inner` div (an implementation
+  detail of the collapse mechanism, not a styling hook) but styling on `.expanding-panel-content`
+  itself still works correctly, same as the `::details-content` path.
 - Don't stack multiple `contentIsOnTop` panels as direct siblings (linked via a shared `name` or
   not). The overlay is absolutely positioned so it doesn't push the next element down — which
   means a sibling `ExpandingPanel` placed right after it sits exactly where the overlay renders,

package/app/components/02.molecules/expandable/expanding-panel/ExpandingPanel.vue

@@ -23,7 +23,9 @@
         :aria-labelledby="`id-${name}-trigger`"
         role="region"
       >
-        <slot name="content"></slot>
+        <div class="inner">
+          <slot name="content"></slot>
+        </div>
       </div>
     </details>
   </div>
@@ -187,6 +189,50 @@ const onDetailsToggle = (event: Event) => {
         }
       }
     }
+
+    /* ::details-content isn't supported in WebKit (Safari/iOS) as of 2026-08 — the two rule
+       blocks above are silently dropped there entirely (no error, no animation, and crucially
+       content-is-on-top's position: absolute never applies, so the overlay renders in normal
+       document flow instead). This reproduces both using ExpandingPanelClassic's
+       grid-template-rows technique (broadly supported, including Safari), targeting the real
+       .expanding-panel-content element (and its .inner child, matching Classic's structure —
+       .inner's own overflow:hidden is what lets the grid row actually collapse to 0, since a
+       plain block child's default min-height:auto would otherwise floor it at content height)
+       instead of the pseudo-element. */
+    @supports not selector(::details-content) {
+      .expanding-panel-details {
+        .expanding-panel-content {
+          display: grid;
+          grid-template-rows: 0fr;
+          transition: grid-template-rows v-bind(animationDurationStr) ease-in-out;
+          will-change: grid-template-rows;
+
+          .inner {
+            overflow: hidden;
+            margin-top: 0;
+          }
+        }
+
+        &[open] .expanding-panel-content {
+          grid-template-rows: 1fr;
+        }
+      }
+    }
+
+    &.content-is-on-top {
+      @supports not selector(::details-content) {
+        .expanding-panel-details {
+          position: relative;
+
+          .expanding-panel-content {
+            position: absolute;
+            top: calc(100% + var(--expanding-panel-content-gap, 0px));
+            inset-inline: 0;
+            z-index: var(--expanding-panel-content-z-index, 10);
+          }
+        }
+      }
+    }
   }
 }
 </style>

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

@@ -7,7 +7,9 @@ exports[`ExpandingPanel > renders correct HTML structure with all props set 1`]
       <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>
-    <div id="id-snap-all-content" class="expanding-panel-content" aria-labelledby="id-snap-all-trigger" role="region"></div>
+    <div id="id-snap-all-content" class="expanding-panel-content" aria-labelledby="id-snap-all-trigger" role="region">
+      <div class="inner"></div>
+    </div>
   </details>
 </div>"
 `;
@@ -19,7 +21,9 @@ exports[`ExpandingPanel > renders correct HTML structure with contentIsOnTop tru
       <div class="label-wrapper"></div>
       <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
     </summary>
-    <div id="id-snap-content-on-top-content" class="expanding-panel-content" aria-labelledby="id-snap-content-on-top-trigger" role="region"></div>
+    <div id="id-snap-content-on-top-content" class="expanding-panel-content" aria-labelledby="id-snap-content-on-top-trigger" role="region">
+      <div class="inner"></div>
+    </div>
   </details>
 </div>"
 `;
@@ -31,7 +35,9 @@ exports[`ExpandingPanel > renders correct HTML structure with default props 1`]
       <div class="label-wrapper"></div>
       <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
     </summary>
-    <div id="id-snap-default-content" class="expanding-panel-content" aria-labelledby="id-snap-default-trigger" role="region"></div>
+    <div id="id-snap-default-content" class="expanding-panel-content" aria-labelledby="id-snap-default-trigger" role="region">
+      <div class="inner"></div>
+    </div>
   </details>
 </div>"
 `;
@@ -44,7 +50,9 @@ exports[`ExpandingPanel > renders correct HTML structure with populated slots 1`
       <div class="icon-wrapper"><span>▸</span></div>
     </summary>
     <div id="id-snap-slots-content" class="expanding-panel-content" aria-labelledby="id-snap-slots-trigger" role="region">
-      <p>Content text</p>
+      <div class="inner">
+        <p>Content text</p>
+      </div>
     </div>
   </details>
 </div>"

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

@@ -13,12 +13,14 @@ exports[`NavigationItems > renders correct HTML structure with default props 1`]
             <div class="icon-wrapper"><span class="iconify i-mdi:chevron-down icon" aria-hidden="true"></span></div>
           </summary>
           <div id="id-overflow-navigation-group-content" class="expanding-panel-content" aria-labelledby="id-overflow-navigation-group-trigger" role="region">
-            <div class="overflow-navigation-sub-nav-inner">
-              <ul class="overflow-navigation-sub-nav-list">
-                <li class="overflow-navigation-sub-nav-item"><a href="/forms/examples/buttons" class="overflow-navigation-sub-nav-link" role="menuitem"><span class="overflow-navigation-sub-nav-text">Buttons</span></a></li>
-                <li class="overflow-navigation-sub-nav-item"><a href="/ui/tabs" class="overflow-navigation-sub-nav-link" role="menuitem"><span class="overflow-navigation-sub-nav-text">Tabs</span></a></li>
-              </ul>
-              <div aria-hidden="true" class="overflow-sub-nav-indicator-hovered"></div>
+            <div class="inner">
+              <div class="overflow-navigation-sub-nav-inner">
+                <ul class="overflow-navigation-sub-nav-list">
+                  <li class="overflow-navigation-sub-nav-item"><a href="/forms/examples/buttons" class="overflow-navigation-sub-nav-link" role="menuitem"><span class="overflow-navigation-sub-nav-text">Buttons</span></a></li>
+                  <li class="overflow-navigation-sub-nav-item"><a href="/ui/tabs" class="overflow-navigation-sub-nav-link" role="menuitem"><span class="overflow-navigation-sub-nav-text">Tabs</span></a></li>
+                </ul>
+                <div aria-hidden="true" class="overflow-sub-nav-indicator-hovered"></div>
+              </div>
             </div>
           </div>
         </details>

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

@@ -46,12 +46,14 @@ exports[`ResponsiveHeader > renders correct HTML structure with default props 1`
                     <div class="icon-wrapper"><span class="iconify i-mdi:chevron-down icon" aria-hidden="true"></span></div>
                   </summary>
                   <div id="id-overflow-navigation-group-content" class="expanding-panel-content" aria-labelledby="id-overflow-navigation-group-trigger" role="region">
-                    <div class="overflow-navigation-sub-nav-inner">
-                      <ul class="overflow-navigation-sub-nav-list">
-                        <li class="overflow-navigation-sub-nav-item"><a href="/forms/examples/buttons" class="overflow-navigation-sub-nav-link" role="menuitem"><span class="overflow-navigation-sub-nav-text">Buttons</span></a></li>
-                        <li class="overflow-navigation-sub-nav-item"><a href="/ui/tabs" class="overflow-navigation-sub-nav-link" role="menuitem"><span class="overflow-navigation-sub-nav-text">Tabs</span></a></li>
-                      </ul>
-                      <div aria-hidden="true" class="overflow-sub-nav-indicator-hovered"></div>
+                    <div class="inner">
+                      <div class="overflow-navigation-sub-nav-inner">
+                        <ul class="overflow-navigation-sub-nav-list">
+                          <li class="overflow-navigation-sub-nav-item"><a href="/forms/examples/buttons" class="overflow-navigation-sub-nav-link" role="menuitem"><span class="overflow-navigation-sub-nav-text">Buttons</span></a></li>
+                          <li class="overflow-navigation-sub-nav-item"><a href="/ui/tabs" class="overflow-navigation-sub-nav-link" role="menuitem"><span class="overflow-navigation-sub-nav-text">Tabs</span></a></li>
+                        </ul>
+                        <div aria-hidden="true" class="overflow-sub-nav-indicator-hovered"></div>
+                      </div>
                     </div>
                   </div>
                 </details>

package/app/components/03.organisms/services/services-section/tests/__snapshots__/ServicesSection.spec.ts.snap

@@ -67,12 +67,12 @@ exports[`ServicesSection > renders correct HTML structure 1`] = `
               <div class="label-wrapper">FAQ question?</div>
               <div class="icon-wrapper"><span class="iconify i-mdi:chevron-down" aria-hidden="true"></span></div>
             </summary>
-          </details>
-          <div id="id-faq-v-0-0-0-content" class="expanding-panel-content" aria-labelledby="id-faq-v-0-0-0-trigger" role="region">
-            <div class="inner">
-              <p class="services-section__faq-answer">FAQ answer.</p>
+            <div id="id-faq-v-0-0-0-content" class="expanding-panel-content" aria-labelledby="id-faq-v-0-0-0-trigger" role="region">
+              <div class="inner">
+                <p class="services-section__faq-answer">FAQ answer.</p>
+              </div>
             </div>
-          </div>
+          </details>
         </div>
       </div>
       <div class="glass-panel services-section__glass-panel p-24">

package/package.json

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