@pure-ds/core 0.6.2 → 0.6.4

package/public/assets/pds/custom-elements.json

@@ -1256,6 +1256,327 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "public/assets/pds/components/pds-live-edit.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "EDITOR_TAG",
+          "type": {
+            "text": "string"
+          },
+          "default": "\"pds-live-edit\""
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PdsLiveEdit",
+          "members": [
+            {
+              "kind": "method",
+              "name": "_teardown"
+            },
+            {
+              "kind": "method",
+              "name": "_handleMouseOver",
+              "parameters": [
+                {
+                  "name": "event"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleMouseOut",
+              "parameters": [
+                {
+                  "name": "event"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_findEditableTarget",
+              "parameters": [
+                {
+                  "name": "node"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_showForTarget",
+              "parameters": [
+                {
+                  "name": "target"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_removeActiveUI"
+            },
+            {
+              "kind": "method",
+              "name": "_addDocumentListeners"
+            },
+            {
+              "kind": "method",
+              "name": "_removeDocumentListeners"
+            },
+            {
+              "kind": "method",
+              "name": "_handleDocumentPointer",
+              "parameters": [
+                {
+                  "name": "event"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleDocumentKeydown",
+              "parameters": [
+                {
+                  "name": "event"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_scheduleClose"
+            },
+            {
+              "kind": "method",
+              "name": "_clearCloseTimer"
+            },
+            {
+              "kind": "method",
+              "name": "_addRepositionListeners"
+            },
+            {
+              "kind": "method",
+              "name": "_removeRepositionListeners"
+            },
+            {
+              "kind": "method",
+              "name": "_repositionDropdown"
+            },
+            {
+              "kind": "method",
+              "name": "_positionDropdown",
+              "parameters": [
+                {
+                  "name": "target"
+                },
+                {
+                  "name": "dropdown"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleMouseMove",
+              "parameters": [
+                {
+                  "name": "event"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_isPointerWithinSafeZone"
+            },
+            {
+              "kind": "method",
+              "name": "_buildDropdown",
+              "parameters": [
+                {
+                  "name": "target"
+                },
+                {
+                  "name": "quickPaths"
+                },
+                {
+                  "name": "hints"
+                },
+                {
+                  "name": "debug"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_renderQuickForm",
+              "parameters": [
+                {
+                  "name": "container"
+                },
+                {
+                  "name": "paths"
+                },
+                {
+                  "name": "design"
+                },
+                {
+                  "name": "hints"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_openDrawer",
+              "parameters": [
+                {
+                  "name": "target"
+                },
+                {
+                  "name": "quickPaths"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleValueChange",
+              "parameters": [
+                {
+                  "name": "event"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_schedulePatch",
+              "parameters": [
+                {
+                  "name": "patch"
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_boundMouseOver"
+            },
+            {
+              "kind": "field",
+              "name": "_boundMouseOut"
+            },
+            {
+              "kind": "field",
+              "name": "_boundMouseMove"
+            },
+            {
+              "kind": "field",
+              "name": "_boundReposition"
+            },
+            {
+              "kind": "field",
+              "name": "_activeTarget",
+              "type": {
+                "text": "null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_activeDropdown",
+              "type": {
+                "text": "null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_holdOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_closeTimer",
+              "type": {
+                "text": "null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_drawer",
+              "type": {
+                "text": "null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_pendingPatch",
+              "type": {
+                "text": "null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_applyTimer",
+              "type": {
+                "text": "null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_selectors",
+              "type": {
+                "text": "null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_lastPointer",
+              "type": {
+                "text": "null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_boundDocPointer"
+            },
+            {
+              "kind": "field",
+              "name": "_boundDocKeydown"
+            },
+            {
+              "kind": "field",
+              "name": "_connected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "EDITOR_TAG",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "EDITOR_TAG",
+          "declaration": {
+            "name": "PdsLiveEdit",
+            "module": "public/assets/pds/components/pds-live-edit.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "public/assets/pds/components/pds-omnibox.js",
@@ -1306,6 +1627,10 @@
               "kind": "field",
               "name": "icon"
             },
+            {
+              "kind": "field",
+              "name": "itemGrid"
+            },
             {
               "kind": "method",
               "name": "formAssociatedCallback"
@@ -1382,6 +1707,9 @@
             },
             {
               "name": "icon"
+            },
+            {
+              "name": "item-grid"
             }
           ],
           "superclass": {
@@ -2240,23 +2568,7 @@
           "kind": "class",
           "description": "",
           "name": "PdsTheme",
-          "members": [
-            {
-              "kind": "field",
-              "name": "label",
-              "description": "Gets the legend/aria-label text to display.",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label"
-            }
-          ],
+          "members": [],
           "superclass": {
             "name": "HTMLElement"
           },

package/public/assets/pds/pds-css-complete.json

@@ -2292,7 +2292,7 @@
   ],
   "metadata": {
     "generator": "PDS CSS Data Generator",
-    "generatedAt": "2026-02-04T12:47:12.258Z",
+    "generatedAt": "2026-02-17T11:41:36.229Z",
     "totalProperties": 169,
     "totalClasses": 169,
     "totalAttributes": 4

package/public/assets/pds/vscode-custom-data.json

@@ -689,6 +689,10 @@
         }
       ]
     },
+    {
+      "name": "EDITOR_TAG",
+      "description": "PdsLiveEdit component"
+    },
     {
       "name": "pds-omnibox",
       "description": "PdsOmnibox component",
@@ -720,6 +724,10 @@
         {
           "name": "icon",
           "description": ""
+        },
+        {
+          "name": "item-grid",
+          "description": ""
         }
       ]
     },
@@ -839,13 +847,7 @@
     },
     {
       "name": "pds-theme",
-      "description": "PdsTheme component",
-      "attributes": [
-        {
-          "name": "label",
-          "description": ""
-        }
-      ]
+      "description": "PdsTheme component"
     },
     {
       "name": "pds-toaster",

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

@@ -1,6 +1,6 @@
 /**
  * PDS Enhancers - Single Source of Truth
- * 
+ *
  * This file defines all progressive enhancements for the Pure Design System.
  * Each enhancer has:
  * - selector: CSS selector to target elements
@@ -30,24 +30,28 @@ function enhanceAccordion(elem) {
   if (elem.dataset.enhancedAccordion) return;
   elem.dataset.enhancedAccordion = "true";
 
-  elem.addEventListener("toggle", (event) => {
-    // Only handle toggle events from direct child details elements
-    // to avoid closing parent details when nested accordions are used
-    if (event.target.open && event.target.parentElement === elem) {
-      elem.querySelectorAll(":scope > details[open]").forEach((details) => {
-        if (details !== event.target) {
-          details.open = false;
-        }
-      });
-    }
-  }, true);
+  elem.addEventListener(
+    "toggle",
+    (event) => {
+      // Only handle toggle events from direct child details elements
+      // to avoid closing parent details when nested accordions are used
+      if (event.target.open && event.target.parentElement === elem) {
+        elem.querySelectorAll(":scope > details[open]").forEach((details) => {
+          if (details !== event.target) {
+            details.open = false;
+          }
+        });
+      }
+    },
+    true,
+  );
 }
 
 function enhanceDropdown(elem) {
   if (elem.dataset.enhancedDropdown) return;
   elem.dataset.enhancedDropdown = "true";
-  const menu = elem.lastElementChild
-  
+  const menu = elem.lastElementChild;
+
   if (!menu) return;
 
   const trigger =
@@ -90,7 +94,7 @@ function enhanceDropdown(elem) {
       menu?.offsetHeight || 0,
       menu?.scrollHeight || 0,
       menuRect.height || 0,
-      200
+      200,
     );
     const spaceBelow = Math.max(0, window.innerHeight - rect.bottom);
     const spaceAbove = Math.max(0, rect.top);
@@ -105,7 +109,12 @@ function enhanceDropdown(elem) {
       elem.getAttribute("data-dropdown-align") ||
       "auto"
     ).toLowerCase();
-    if (align === "left" || align === "right" || align === "start" || align === "end") {
+    if (
+      align === "left" ||
+      align === "right" ||
+      align === "start" ||
+      align === "end"
+    ) {
       return align === "start" ? "left" : align === "end" ? "right" : align;
     }
     const rect = elem.getBoundingClientRect();
@@ -114,7 +123,7 @@ function enhanceDropdown(elem) {
       menu?.offsetWidth || 0,
       menu?.scrollWidth || 0,
       menuRect.width || 0,
-      240
+      240,
     );
     const spaceRight = Math.max(0, window.innerWidth - rect.left);
     const spaceLeft = Math.max(0, rect.right);
@@ -123,16 +132,42 @@ function enhanceDropdown(elem) {
     return spaceLeft > spaceRight ? "right" : "left";
   };
 
+  // Store click handler reference for cleanup
+  let clickHandler = null;
+
   const openMenu = () => {
     elem.dataset.dropdownDirection = resolveDirection();
     elem.dataset.dropdownAlign = resolveAlign();
     menu.setAttribute("aria-hidden", "false");
     trigger?.setAttribute("aria-expanded", "true");
+
+    // Add click-outside handler when opening
+    if (!clickHandler) {
+      clickHandler = (event) => {
+        // Use composedPath() to handle Shadow DOM
+        const path = event.composedPath ? event.composedPath() : [event.target];
+        const clickedInside = path.some((node) => node === elem);
+
+        if (!clickedInside) {
+          closeMenu();
+        }
+      };
+      // Use a slight delay to avoid closing immediately if this was triggered by a click
+      setTimeout(() => {
+        document.addEventListener("click", clickHandler);
+      }, 0);
+    }
   };
 
   const closeMenu = () => {
     menu.setAttribute("aria-hidden", "true");
     trigger?.setAttribute("aria-expanded", "false");
+
+    // Remove click-outside handler when closing
+    if (clickHandler) {
+      document.removeEventListener("click", clickHandler);
+      clickHandler = null;
+    }
   };
 
   const toggleMenu = () => {
@@ -149,12 +184,6 @@ function enhanceDropdown(elem) {
     toggleMenu();
   });
 
-  document.addEventListener("click", (event) => {
-    if (!elem.contains(event.target)) {
-      closeMenu();
-    }
-  });
-
   elem.addEventListener("keydown", (event) => {
     if (event.key === "Escape") {
       closeMenu();
@@ -163,8 +192,15 @@ function enhanceDropdown(elem) {
   });
 
   elem.addEventListener("focusout", (event) => {
-    if (!event.relatedTarget || !elem.contains(event.relatedTarget)) {
-      closeMenu();
+    // Only close if focus is explicitly moving to an element outside the dropdown
+    // Don't close if relatedTarget is null (which happens when clicking non-focusable elements inside)
+    // Use composedPath() to handle Shadow DOM properly
+    if (event.relatedTarget) {
+      const path = event.composedPath ? event.composedPath() : [event.relatedTarget];
+      const focusedInside = path.some((node) => node === elem);
+      if (!focusedInside) {
+        closeMenu();
+      }
     }
   });
 }
@@ -298,20 +334,18 @@ function enhanceRange(elem) {
 }
 
 function enhanceRequired(elem) {
-  
-   if (elem.dataset.enhancedRequired) return;
-    elem.dataset.enhancedRequired = "true";
-  
+  if (elem.dataset.enhancedRequired) return;
+  elem.dataset.enhancedRequired = "true";
+
   const enhanceRequiredField = (input) => {
     let label;
-    if(input.closest("[role$=group]")) { // Handles both radiogroup and group
+    if (input.closest("[role$=group]")) {
+      // Handles both radiogroup and group
       label = input.closest("[role$=group]").querySelector("legend");
-    }
-    else{
+    } else {
       label = input.closest("label");
     }
     if (!label) return;
-    
 
     if (label.querySelector(".required-asterisk")) return;
 
@@ -339,15 +373,14 @@ function enhanceRequired(elem) {
       legend.textContent = "* Required fields";
       form.insertBefore(
         legend,
-        form.querySelector(".form-actions") || form.lastElementChild
+        form.querySelector(".form-actions") || form.lastElementChild,
       );
     }
-  }
+  };
 
   elem.querySelectorAll("[required]").forEach((input) => {
     enhanceRequiredField(input);
   });
-  
 }
 
 function enhanceOpenGroup(elem) {
@@ -362,7 +395,7 @@ function enhanceOpenGroup(elem) {
   addInput.classList.add("input-text", "input-sm");
   addInput.style.width = "auto";
   const firstInput = elem.querySelector(
-    'input[type="radio"], input[type="checkbox"]'
+    'input[type="radio"], input[type="checkbox"]',
   );
 
   elem.appendChild(addInput);
@@ -373,9 +406,7 @@ function enhanceOpenGroup(elem) {
         event.preventDefault();
 
         const type = firstInput.type === "radio" ? "radio" : "checkbox";
-        const id = `open-group-${Math.random()
-          .toString(36)
-          .substring(2, 11)}`;
+        const id = `open-group-${Math.random().toString(36).substring(2, 11)}`;
         const label = document.createElement("label");
 
         const span = document.createElement("span");
@@ -510,7 +541,7 @@ const enhancerRunners = new Map([
 /**
  * Complete enhancers with runtime functions.
  * Used by PDS.enhancer() and AutoDefiner at runtime.
- * 
+ *
  * This is the canonical runtime array of enhancer objects.
  */
 export const defaultPDSEnhancers = enhancerDefinitions.map((meta) => ({