@pure-ds/core 0.7.43 → 0.7.44

package/readme.md

@@ -469,6 +469,7 @@ Features:
 - Horizontal alignment (`.align-right` class)
 - Keyboard support (Escape to close)
 - Click-outside to close
+- Declarative close on selection via `data-dropdown-close` on clickable menu/panel items
 - Scrollable when content exceeds viewport
 - Panel can be any last child element (menu, card, form, etc.)
 

package/src/js/pds-core/pds-enhancers-meta.js

@@ -31,17 +31,22 @@ export const defaultPDSEnhancerMetadata = [
   {
     selector: "nav[data-dropdown]",
     description:
-      "Enhances a nav element with data-dropdown to toggle its last child as a dropdown panel (menu, card, form, etc.).",
+      "Enhances a nav element with data-dropdown to toggle its last child as a dropdown panel (menu, card, form, etc.). Add data-dropdown-close to any clickable descendant that should close the menu on selection.",
+    attributes: [
+      {
+        name: "data-dropdown-close",
+        description:
+          "When clicked (or when a descendant is clicked), closes the currently open dropdown popover.",
+        appliesTo: "Any clickable element inside nav[data-dropdown] menu/panel content",
+      },
+    ],
     demoHtml: `
       <nav data-dropdown>
         <button class="btn-primary">Menu</button>
-        <div class="card surface-overlay stack-sm">
-          <strong>Quick actions</strong>
-          <div class="flex gap-sm">
-            <button class="btn-primary btn-sm">Ship now</button>
-            <button class="btn-outline btn-sm">Schedule</button>
-          </div>
-        </div>
+        <menu>
+          <li><a href="#open">Open</a></li>
+          <li><a href="#settings" data-dropdown-close>Open settings and close</a></li>
+        </menu>
       </nav>
     `.trim(),
   },

package/src/js/pds-core/pds-enhancers.js

@@ -370,6 +370,14 @@ function enhanceDropdown(elem) {
 
   syncClosedState();
 
+  menu.addEventListener("click", (event) => {
+    const target =
+      event.target instanceof Element ? event.target : event.target?.parentElement;
+    if (!target) return;
+    if (!target.closest("[data-dropdown-close]")) return;
+    closeMenu();
+  });
+
   trigger?.addEventListener("click", (event) => {
     event.preventDefault();
     event.stopPropagation();

package/src/js/pds-core/pds-generator.js

@@ -3527,11 +3527,6 @@ dialog[open] {
   animation: pds-dialog-enter var(--transition-normal) ease;
 }
 
-html:has(dialog[open]:modal) {
- overflow: hidden;
- scrollbar-gutter: stable;
-}
-
 @keyframes pds-dialog-enter {
   from {
     opacity: 0;
@@ -3748,7 +3743,8 @@ dialog.dialog-full { width: calc(100vw - var(--spacing-8)); max-width: calc(100v
   dialog, dialog::backdrop { transition-duration: 0.01s !important; }
 }
 
-html:has(dialog[open]:modal) {
+html:has(dialog[open]:modal),
+html:has(pds-drawer[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
 }

package/src/js/pds-core/pds-live.js

@@ -319,8 +319,12 @@ async function ensureLiveEditToggleButton() {
     };
 
     menu.appendChild(createItem("toggle", msg("Toggle live editing"), "pencil"));
-    menu.appendChild(createItem("open-settings", msg("Open Settings"), "gear"));
-    menu.appendChild(createSeparator());
+
+    const settingsItem = createItem("open-settings", msg("Open Settings"), "gear");
+    settingsItem.setAttribute("data-dropdown-close", "");
+
+    menu.appendChild(settingsItem);
+    
     menu.appendChild(createItem("reset-config", msg("Reset Config"), "arrow-counter-clockwise"));
 
     await ensureSharedQuickModeToggleMenuItem(menu);

package/src/js/pds-core/pds-ontology.js

@@ -452,8 +452,14 @@ export const ontology = {
     {
       id: "dropdown",
       selector: "nav[data-dropdown]",
-      description: "Dropdown menu from nav element",
-      tags: ["menu", "interactive", "navigation"]
+      description: "Dropdown menu from nav element. Use data-dropdown-close on clickable descendants to dismiss on selection.",
+      tags: ["menu", "interactive", "navigation", "dismiss", "close"]
+    },
+    {
+      id: "dropdown-close",
+      selector: "[data-dropdown-close]",
+      description: "Declarative close marker for nav[data-dropdown] panels; clicking marked targets closes the open dropdown.",
+      tags: ["dropdown", "menu", "dismiss", "close", "attribute"]
     },
     {
       id: "toggle",