srcdev-nuxt-components 9.2.9 → 9.2.10

package/app/assets/styles/setup/01.config/_head.css

@@ -24,7 +24,6 @@ html {
     color: var(--colour-text-default);
     font-family: var(--font-family);
     font-size: var(--step-4);
-    /* min-height: 100dvh; */
     transition:
       background-color 0.4s ease,
       color 0.4s ease;
@@ -33,12 +32,11 @@ html {
 
     #__nuxt {
       height: 100%;
-      div {
-        .page-layout {
-          min-block-size: 100svh;
-          display: grid;
-          grid-template-rows: auto 1fr auto;
-        }
+      .page-layout {
+        min-block-size: 100svh;
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        align-items: start;
       }
     }
   }

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="expanding-panel" :class="[elementClasses, { 'content-is-on-top': contentIsOnTop }]">
+  <div ref="rootEl" class="expanding-panel" :class="[elementClasses, { 'content-is-on-top': contentIsOnTop }]">
     <details class="expanding-panel-details" :name :open @toggle="onDetailsToggle">
       <summary
         :id="`id-${name}-trigger`"
@@ -32,6 +32,8 @@
 </template>
 
 <script setup lang="ts">
+import { onClickOutside } from "@vueuse/core";
+
 interface Props {
   name?: string;
   animationDuration?: number;
@@ -56,6 +58,17 @@ const open = computed(() => props.forceOpened || isPanelOpen.value);
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
+// contentIsOnTop panels behave like a dropdown/overlay (e.g. ContentDocs' mobile nav) rather
+// than an inline accordion — clicking outside is the expected way to dismiss those, matching
+// native <select>/menu behaviour. Not wanted for ordinary accordions (forceOpened is always
+// false here too — a forceOpened panel isn't meant to be dismissible by any interaction).
+const rootEl = ref<HTMLElement | null>(null);
+onClickOutside(rootEl, () => {
+  if (props.contentIsOnTop && !props.forceOpened && isPanelOpen.value) {
+    isPanelOpen.value = false;
+  }
+});
+
 if (import.meta.dev) {
   watch(
     () => props.contentIsOnTop,
@@ -97,10 +110,9 @@ const onDetailsToggle = (event: Event) => {
         cursor: pointer;
       }
       .expanding-panel-summary {
-        display: flex;
+        display: grid;
         align-items: center;
-        justify-content: space-between;
-        flex-direction: row;
+        grid-template-columns: 1fr auto;
         gap: var(--expanding-panel-summary-gap, 1rem);
         list-style: none;
         user-select: none;

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

@@ -427,6 +427,53 @@ describe("ExpandingPanel", () => {
     expect(vm.isPanelOpen).toBe(true);
   });
 
+  it("closes an open contentIsOnTop panel on outside click", async () => {
+    const wrapper = await mountSuspended(ExpandingPanel, {
+      props: { name: "content-on-top-outside-click", contentIsOnTop: true },
+      attachTo: document.body,
+    });
+    const vm = wrapper.vm as unknown as ExpandingPanelInstance;
+
+    await wrapper.find("summary").trigger("click");
+    expect(vm.isPanelOpen).toBe(true);
+
+    document.body.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await nextTick();
+
+    expect(vm.isPanelOpen).toBe(false);
+    wrapper.unmount();
+  });
+
+  it("does not close on outside click when contentIsOnTop is false (ordinary accordion)", async () => {
+    const wrapper = await mountSuspended(ExpandingPanel, {
+      props: { name: "content-on-top-outside-click-inline" },
+      attachTo: document.body,
+    });
+    const vm = wrapper.vm as unknown as ExpandingPanelInstance;
+
+    await wrapper.find("summary").trigger("click");
+    expect(vm.isPanelOpen).toBe(true);
+
+    document.body.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await nextTick();
+
+    expect(vm.isPanelOpen).toBe(true);
+    wrapper.unmount();
+  });
+
+  it("does not close a forceOpened contentIsOnTop panel on outside click", async () => {
+    const wrapper = await mountSuspended(ExpandingPanel, {
+      props: { name: "content-on-top-outside-click-forced", contentIsOnTop: true, forceOpened: true },
+      attachTo: document.body,
+    });
+
+    document.body.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await nextTick();
+
+    expect(wrapper.find("details").attributes("open")).toBeDefined();
+    wrapper.unmount();
+  });
+
   // ─── name prop / useId fallback ───────────────────────────────────────────
 
   it("uses the provided name in ARIA attributes", async () => {

package/package.json

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