srcdev-nuxt-components 9.2.5 → 9.2.6

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="expanding-panel" :class="[elementClasses]">
+  <div class="expanding-panel" :class="[elementClasses, { 'content-is-on-top': contentIsOnTop }]">
     <details class="expanding-panel-details" :name :open @toggle="onDetailsToggle">
       <summary
         :id="`id-${name}-trigger`"
@@ -8,14 +8,14 @@
         :aria-expanded="open"
         @click.prevent.stop="handleToggle"
       >
-        <span class="label-wrapper">
+        <div class="label-wrapper">
           <slot name="summary"></slot>
-        </span>
-        <span v-if="!forceOpened" class="icon-wrapper">
+        </div>
+        <div class="icon-wrapper" :class="{ 'icon-wrapper--hidden': forceOpened }">
           <slot name="icon">
             <Icon name="bi:caret-down-fill" class="icon mi-12" />
           </slot>
-        </span>
+        </div>
       </summary>
     </details>
     <div
@@ -36,6 +36,7 @@ interface Props {
   name?: string;
   animationDuration?: number;
   forceOpened?: boolean;
+  contentIsOnTop?: boolean;
   styleClassPassthrough?: string | string[];
 }
 
@@ -43,16 +44,35 @@ const props = withDefaults(defineProps<Props>(), {
   name: undefined,
   animationDuration: 400,
   forceOpened: false,
+  contentIsOnTop: false,
   styleClassPassthrough: () => [],
 });
 
-const name = props.name || useId();
+const fallbackName = useId();
+const name = computed(() => props.name || fallbackName);
 const isPanelOpen = defineModel<boolean>({ default: false });
 const animationDurationStr = computed(() => `${props.animationDuration}ms`);
 const open = computed(() => props.forceOpened || isPanelOpen.value);
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
+if (import.meta.dev) {
+  watch(
+    () => props.contentIsOnTop,
+    (value) => {
+      if (!value) return;
+      console.warn(
+        `ExpandingPanel${props.name ? ` "${props.name}"` : ""}: contentIsOnTop is enabled. ` +
+          "The content overlay is absolutely positioned and does not reserve space, so a sibling " +
+          "element (e.g. another ExpandingPanel) placed directly after this one will be visually " +
+          "covered when this panel opens. Intended for a single panel overlaying unrelated trailing " +
+          "page content — avoid stacking multiple contentIsOnTop panels as direct siblings."
+      );
+    },
+    { immediate: true }
+  );
+}
+
 const handleToggle = (event: Event) => {
   if (props.forceOpened) {
     event.preventDefault();
@@ -61,80 +81,101 @@ const handleToggle = (event: Event) => {
 };
 
 const onDetailsToggle = (event: Event) => {
+  // forceOpened drives the native `open` attribute directly, which fires its own
+  // 'toggle' event — ignore it here or it leaks into isPanelOpen and gets stuck
+  // once forceOpened later reverts to false.
+  if (props.forceOpened) return;
   isPanelOpen.value = (event.target as HTMLDetailsElement).open;
 };
 </script>
 
 <style lang="css">
 @layer components {
-.expanding-panel {
-  .expanding-panel-details {
-    &:hover {
-      cursor: pointer;
-    }
-    .expanding-panel-summary {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      flex-direction: row;
-      gap: 1rem;
-      list-style: none;
-
-      padding-block: 0.5rem;
-
-      &::-webkit-details-marker,
-      &::marker {
-        display: none;
-      }
-
-      overflow: hidden;
-
-      .label-wrapper {
-        display: inline-block;
+  .expanding-panel {
+    .expanding-panel-details {
+      &:hover {
+        cursor: pointer;
       }
-      .icon-wrapper {
+      .expanding-panel-summary {
         display: flex;
         align-items: center;
         justify-content: space-between;
+        flex-direction: row;
+        gap: var(--expanding-panel-summary-gap, 1rem);
+        list-style: none;
 
-        aspect-ratio: 1;
-        overflow: hidden;
+        padding-block: var(--expanding-panel-summary-padding-block, 0.5rem);
 
-        .icon {
-          display: block;
-          transform: scaleY(1);
-          transition: transform v-bind(animationDurationStr) ease-in-out;
-          font-size: 1.2rem;
-          will-change: transform;
+        &::-webkit-details-marker,
+        &::marker {
+          display: none;
         }
-      }
-    }
 
-    &[open] {
-      .expanding-panel-summary {
+        overflow: hidden;
+
+        .label-wrapper {
+          display: inline-block;
+        }
         .icon-wrapper {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          aspect-ratio: 1;
+          overflow: hidden;
+
+          /* Space is always reserved (not v-if'd away) so a forceOpened panel's summary
+             row stays the same height as a toggleable sibling's — only the glyph hides. */
+          &.icon-wrapper--hidden {
+            visibility: hidden;
+          }
+
           .icon {
-            transform: scaleY(-1);
+            display: block;
+            transform: scaleY(1);
+            transition: transform v-bind(animationDurationStr) ease-in-out;
+            font-size: var(--expanding-panel-icon-size, 1.2rem);
+            will-change: transform;
           }
         }
       }
-      + .expanding-panel-content {
-        grid-template-rows: 1fr;
+
+      &[open] {
+        .expanding-panel-summary {
+          .icon-wrapper {
+            .icon {
+              transform: scaleY(-1);
+            }
+          }
+        }
+        + .expanding-panel-content {
+          grid-template-rows: 1fr;
+        }
       }
     }
-  }
 
-  .expanding-panel-content {
-    display: grid;
-    grid-template-rows: 0fr;
-    transition: grid-template-rows v-bind(animationDurationStr) ease-in-out;
-    will-change: grid-template-rows;
+    .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;
+      .inner {
+        overflow: hidden;
+        margin-top: 0;
+      }
+    }
+
+    &.content-is-on-top {
+      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/stories/ExpandingPanel.stories.ts

@@ -7,8 +7,7 @@ const meta: Meta<typeof ExpandingPanel> = {
   argTypes: {
     name: {
       control: { type: "text" },
-      description:
-        "Unique name used for ARIA attributes and to group panels in a native <details> accordion",
+      description: "Unique name used for ARIA attributes and to group panels in a native <details> accordion",
     },
     animationDuration: {
       control: { type: "number", min: 0, step: 50 },
@@ -18,6 +17,11 @@ const meta: Meta<typeof ExpandingPanel> = {
       control: { type: "boolean" },
       description: "When true, the panel is always open and the toggle icon is hidden",
     },
+    contentIsOnTop: {
+      control: { type: "boolean" },
+      description:
+        "When true, the content region is positioned absolutely below the summary and raised above surrounding page content via z-index, instead of pushing layout down",
+    },
     styleClassPassthrough: {
       control: "object",
       description: "Additional CSS classes applied to the root element",
@@ -27,6 +31,7 @@ const meta: Meta<typeof ExpandingPanel> = {
     name: "panel-demo",
     animationDuration: 400,
     forceOpened: false,
+    contentIsOnTop: false,
     styleClassPassthrough: [],
   },
 };
@@ -218,6 +223,49 @@ export const RichContent: Story = {
   }),
 };
 
+export const ContentIsOnTop: Story = {
+  name: "Content Is On Top",
+  args: {
+    name: "content-is-on-top",
+    contentIsOnTop: true,
+  },
+  render: (args) => ({
+    components: { ExpandingPanel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="position:relative;padding-bottom:4rem">
+        <ExpandingPanel v-bind="args">
+          <template #summary>
+            <span>Open me — content overlays what's below</span>
+          </template>
+          <template #content>
+            <!--
+              The background/border/shadow live on this wrapper — never on .inner
+              itself. .inner has no explicit height when collapsed (grid-template-rows: 0fr)
+              and relies on overflow:hidden to clip its children to 0px; but padding/border/
+              background set directly on .inner are part of ITS OWN box, not overflow content,
+              so they'd still render as a visible gap under the summary while closed. Styling
+              a wrapper *inside* the slot keeps it clipped correctly by .inner's overflow:hidden.
+            -->
+            <div style="color: #808080; background-color:#fff;border:1px solid #ddd;border-radius:0.4rem;padding:1rem;box-shadow:0 4px 12px rgb(0 0 0 / 15%)">
+              <p style="margin:0">
+                With <code>contentIsOnTop</code>, this content is absolutely positioned below the
+                summary and raised above surrounding page content via <code>z-index</code>,
+                instead of pushing the "Page content below" text further down.
+              </p>
+            </div>
+          </template>
+        </ExpandingPanel>
+        <p style="margin-top:1rem;padding:1rem;">
+          Page content below — stays in place when the panel opens.
+        </p>
+      </div>
+    `,
+  }),
+};
+
 export const WithStyleClassPassthrough: Story = {
   name: "With styleClassPassthrough",
   args: {

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

@@ -41,6 +41,13 @@ describe("ExpandingPanel", () => {
     expect(wrapper.html()).toMatchSnapshot();
   });
 
+  it("renders correct HTML structure with contentIsOnTop true", async () => {
+    const wrapper = await mountSuspended(ExpandingPanel, {
+      props: { name: "snap-content-on-top", contentIsOnTop: true },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
   it("renders correct HTML structure with populated slots", async () => {
     const wrapper = await mountSuspended(ExpandingPanel, {
       props: { name: "snap-slots" },
@@ -91,6 +98,7 @@ describe("ExpandingPanel", () => {
     });
     expect(wrapper.props("animationDuration")).toBe(400);
     expect(wrapper.props("forceOpened")).toBe(false);
+    expect(wrapper.props("contentIsOnTop")).toBe(false);
     expect(wrapper.props("styleClassPassthrough")).toEqual([]);
   });
 
@@ -286,11 +294,14 @@ describe("ExpandingPanel", () => {
 
   // ─── forceOpened ──────────────────────────────────────────────────────────
 
-  it("hides the icon-wrapper when forceOpened is true", async () => {
+  it("visually hides the icon-wrapper when forceOpened is true, without removing it from layout", async () => {
     const wrapper = await mountSuspended(ExpandingPanel, {
       props: { name: "force-icon", forceOpened: true },
     });
-    expect(wrapper.find(".icon-wrapper").exists()).toBe(false);
+    // Kept in the DOM (not v-if'd away) so the summary row height stays consistent
+    // with a toggleable sibling panel's — only visually hidden via the modifier class.
+    expect(wrapper.find(".icon-wrapper").exists()).toBe(true);
+    expect(wrapper.find(".icon-wrapper").classes()).toContain("icon-wrapper--hidden");
   });
 
   it("shows the icon-wrapper when forceOpened is false", async () => {
@@ -298,6 +309,7 @@ describe("ExpandingPanel", () => {
       props: { name: "icon-visible", forceOpened: false },
     });
     expect(wrapper.find(".icon-wrapper").exists()).toBe(true);
+    expect(wrapper.find(".icon-wrapper").classes()).not.toContain("icon-wrapper--hidden");
   });
 
   it("keeps open true after click when forceOpened is true", async () => {
@@ -309,6 +321,23 @@ describe("ExpandingPanel", () => {
     expect(vm.open).toBe(true);
   });
 
+  it("does not leak forceOpened into isPanelOpen, so open reverts to false when forceOpened turns back off", async () => {
+    const wrapper = await mountSuspended(ExpandingPanel, {
+      props: { name: "force-then-unforce", forceOpened: true },
+    });
+    const vm = wrapper.vm as unknown as ExpandingPanelInstance;
+    expect(vm.open).toBe(true);
+
+    // The <details> element's `open` attribute changing (driven by forceOpened) fires
+    // its own native 'toggle' event, independent of any user click.
+    await wrapper.find("details").trigger("toggle");
+    await nextTick();
+    expect(vm.isPanelOpen).toBe(false);
+
+    await wrapper.setProps({ forceOpened: false });
+    expect(vm.open).toBe(false);
+  });
+
   // ─── Slots ────────────────────────────────────────────────────────────────
 
   it("renders summary slot content inside .label-wrapper", async () => {
@@ -364,6 +393,40 @@ describe("ExpandingPanel", () => {
     expect(wrapper.find(".expanding-panel").classes()).toContain("single-class");
   });
 
+  // ─── contentIsOnTop ───────────────────────────────────────────────────────
+
+  it("does not apply content-is-on-top class to root by default", async () => {
+    const wrapper = await mountSuspended(ExpandingPanel, {
+      props: { name: "content-on-top-default" },
+    });
+    expect(wrapper.find(".expanding-panel").classes()).not.toContain("content-is-on-top");
+  });
+
+  it("applies content-is-on-top class to root when contentIsOnTop is true", async () => {
+    const wrapper = await mountSuspended(ExpandingPanel, {
+      props: { name: "content-on-top-true", contentIsOnTop: true },
+    });
+    expect(wrapper.find(".expanding-panel").classes()).toContain("content-is-on-top");
+  });
+
+  it("does not apply content-is-on-top class to the content region itself", async () => {
+    const wrapper = await mountSuspended(ExpandingPanel, {
+      props: { name: "content-on-top-scope", contentIsOnTop: true },
+    });
+    expect(wrapper.find(".expanding-panel-content").classes()).not.toContain("content-is-on-top");
+  });
+
+  it("still toggles open state when summary is clicked with contentIsOnTop true", async () => {
+    const wrapper = await mountSuspended(ExpandingPanel, {
+      props: { name: "content-on-top-click", contentIsOnTop: true },
+    });
+    const vm = wrapper.vm as unknown as ExpandingPanelInstance;
+    expect(vm.isPanelOpen).toBe(false);
+
+    await wrapper.find("summary").trigger("click");
+    expect(vm.isPanelOpen).toBe(true);
+  });
+
   // ─── name prop / useId fallback ───────────────────────────────────────────
 
   it("uses the provided name in ARIA attributes", async () => {
@@ -381,4 +444,18 @@ describe("ExpandingPanel", () => {
     expect(summaryId).toMatch(/^id-.+-trigger$/);
     expect(contentId).toMatch(/^id-.+-content$/);
   });
+
+  it("updates the details name and ARIA ids when the name prop changes after mount", async () => {
+    const wrapper = await mountSuspended(ExpandingPanel, {
+      props: { name: "panel-a" },
+    });
+    expect(wrapper.find("details").attributes("name")).toBe("panel-a");
+    expect(wrapper.find("summary").attributes("id")).toBe("id-panel-a-trigger");
+
+    await wrapper.setProps({ name: "panel-b" });
+
+    expect(wrapper.find("details").attributes("name")).toBe("panel-b");
+    expect(wrapper.find("summary").attributes("id")).toBe("id-panel-b-trigger");
+    expect(wrapper.find(".expanding-panel-content").attributes("id")).toBe("id-panel-b-content");
+  });
 });

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

@@ -3,8 +3,9 @@
 exports[`ExpandingPanel > renders correct HTML structure with all props set 1`] = `
 "<div class="expanding-panel extra-class">
   <details class="expanding-panel-details" name="snap-all" open="">
-    <summary id="id-snap-all-trigger" class="expanding-panel-summary" aria-controls="id-snap-all-content" aria-expanded="true"><span class="label-wrapper"></span>
-      <!--v-if-->
+    <summary id="id-snap-all-trigger" class="expanding-panel-summary" aria-controls="id-snap-all-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 mi-12" aria-hidden="true"></span></div>
     </summary>
   </details>
   <div id="id-snap-all-content" class="expanding-panel-content" aria-labelledby="id-snap-all-trigger" role="region">
@@ -13,10 +14,27 @@ exports[`ExpandingPanel > renders correct HTML structure with all props set 1`]
 </div>"
 `;
 
+exports[`ExpandingPanel > renders correct HTML structure with contentIsOnTop true 1`] = `
+"<div class="expanding-panel content-is-on-top">
+  <details class="expanding-panel-details" name="snap-content-on-top">
+    <summary id="id-snap-content-on-top-trigger" class="expanding-panel-summary" aria-controls="id-snap-content-on-top-content" aria-expanded="false">
+      <div class="label-wrapper"></div>
+      <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></div>
+    </summary>
+  </details>
+  <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>
+</div>"
+`;
+
 exports[`ExpandingPanel > renders correct HTML structure with default props 1`] = `
 "<div class="expanding-panel">
   <details class="expanding-panel-details" name="snap-default">
-    <summary id="id-snap-default-trigger" class="expanding-panel-summary" aria-controls="id-snap-default-content" aria-expanded="false"><span class="label-wrapper"></span><span class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></span></summary>
+    <summary id="id-snap-default-trigger" class="expanding-panel-summary" aria-controls="id-snap-default-content" aria-expanded="false">
+      <div class="label-wrapper"></div>
+      <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></div>
+    </summary>
   </details>
   <div id="id-snap-default-content" class="expanding-panel-content" aria-labelledby="id-snap-default-trigger" role="region">
     <div class="inner"></div>
@@ -27,7 +45,10 @@ exports[`ExpandingPanel > renders correct HTML structure with default props 1`]
 exports[`ExpandingPanel > renders correct HTML structure with populated slots 1`] = `
 "<div class="expanding-panel">
   <details class="expanding-panel-details" name="snap-slots">
-    <summary id="id-snap-slots-trigger" class="expanding-panel-summary" aria-controls="id-snap-slots-content" aria-expanded="false"><span class="label-wrapper"><span>Summary text</span></span><span class="icon-wrapper"><span>▸</span></span></summary>
+    <summary id="id-snap-slots-trigger" class="expanding-panel-summary" aria-controls="id-snap-slots-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-content" aria-labelledby="id-snap-slots-trigger" role="region">
     <div class="inner">

package/app/components/02.molecules/pricing-card/tests/PricingCard.spec.ts

@@ -109,7 +109,8 @@ describe("PricingCard", () => {
     });
 
     const button = wrapper.find("button");
-    expect(button.attributes("disabled")).toBeDefined();
+    expect(button.attributes("readonly")).toBeDefined();
+    expect(button.attributes("aria-disabled")).toBe("true");
   });
 
   it("renders custom features via slot", () => {

package/app/components/layout-grids/LayoutGridA.vue

@@ -23,83 +23,83 @@ const props = defineProps({
     type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
-})
+});
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough)
+    resetElementClasses(props.styleClassPassthrough);
   }
-)
+);
 </script>
 
 <style lang="css">
 @layer components {
-.layout-grid-a-wrapper {
-  container-type: inline-size;
+  .layout-grid-a-wrapper {
+    container-type: inline-size;
 
-  .layout-grid-a {
-    display: grid;
-    gap: 20px;
+    .layout-grid-a {
+      display: grid;
+      gap: 20px;
 
-    & > div {
-      padding: 20px;
-      outline: 1px solid light-dark(black, white);
-      border-radius: 5px;
-    }
-
-    @container (min-width: 768px) {
-      grid-template-columns: repeat(2, auto);
-      grid-template-rows: repeat(3, auto);
-
-      .slot1 {
-        grid-column: 1 / span 2;
-        grid-row: 1;
-      }
-
-      .slot2 {
-        grid-column: 1 / span 2;
-        grid-row: 2;
-      }
-
-      .slot3 {
-        grid-column: 1;
-        grid-row: 3;
-      }
-
-      .slot4 {
-        grid-column: 2;
-        grid-row: 3;
-      }
-    }
-
-    @container (min-width: 1060px) {
-      grid-template-columns: repeat(3, auto);
-      grid-template-rows: repeat(2, auto);
-
-      .slot1 {
-        grid-column: 1;
-        grid-row: 1 / span 2;
-      }
-
-      .slot2 {
-        grid-column: 2 / span 2;
-        grid-row: 1;
+      & > div {
+        padding: 20px;
+        outline: 1px solid light-dark(black, white);
+        border-radius: 5px;
       }
 
-      .slot3 {
-        grid-column: 2;
-        grid-row: 2;
+      @container (min-width: 768px) {
+        grid-template-columns: repeat(2, auto);
+        grid-template-rows: repeat(3, auto);
+
+        .slot1 {
+          grid-column: 1 / span 2;
+          grid-row: 1;
+        }
+
+        .slot2 {
+          grid-column: 1 / span 2;
+          grid-row: 2;
+        }
+
+        .slot3 {
+          grid-column: 1;
+          grid-row: 3;
+        }
+
+        .slot4 {
+          grid-column: 2;
+          grid-row: 3;
+        }
       }
 
-      .slot4 {
-        grid-column: 3;
-        grid-row: 2;
+      @container (min-width: 1060px) {
+        grid-template-columns: repeat(3, auto);
+        grid-template-rows: repeat(2, auto);
+
+        .slot1 {
+          grid-column: 1;
+          grid-row: 1 / span 2;
+        }
+
+        .slot2 {
+          grid-column: 2 / span 2;
+          grid-row: 1;
+        }
+
+        .slot3 {
+          grid-column: 2;
+          grid-row: 2;
+        }
+
+        .slot4 {
+          grid-column: 3;
+          grid-row: 2;
+        }
       }
     }
   }
 }
-}
 </style>