@pure-ds/core 0.7.60 → 0.7.61

package/public/assets/pds/icons/pds-icons.svg

@@ -164,6 +164,14 @@
     <path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"/>
   </symbol>
 
+  <symbol id="corners-out" viewBox="0 0 256 256">
+    <path d="M216,48V88a8,8,0,0,1-16,0V56H168a8,8,0,0,1,0-16h40A8,8,0,0,1,216,48ZM88,200H56V168a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H88a8,8,0,0,0,0-16Zm120-40a8,8,0,0,0-8,8v32H168a8,8,0,0,0,0,16h40a8,8,0,0,0,8-8V168A8,8,0,0,0,208,160ZM88,40H48a8,8,0,0,0-8,8V88a8,8,0,0,0,16,0V56H88a8,8,0,0,0,0-16Z"/>
+  </symbol>
+
+  <symbol id="corners-in" viewBox="0 0 256 256">
+    <path d="M152,96V48a8,8,0,0,1,16,0V88h40a8,8,0,0,1,0,16H160A8,8,0,0,1,152,96ZM96,152H48a8,8,0,0,0,0,16H88v40a8,8,0,0,0,16,0V160A8,8,0,0,0,96,152Zm112,0H160a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V168h40a8,8,0,0,0,0-16ZM96,40a8,8,0,0,0-8,8V88H48a8,8,0,0,0,0,16H96a8,8,0,0,0,8-8V48A8,8,0,0,0,96,40Z"/>
+  </symbol>
+
   <symbol id="envelope" viewBox="0 0 256 256">
     <path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-96,85.15L52.57,64H203.43ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z"/>
   </symbol>

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

@@ -2607,6 +2607,8 @@ presets.default = {
         "clipboard",
         "magic-wand",
         "sparkle",
+        "corners-out",
+        "corners-in"
       ],
       communication: [
         "envelope",

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

@@ -33,6 +33,12 @@ export const defaultPDSEnhancerMetadata = [
     description:
       "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: "split-button",
+        description:
+          "Class that creates a split-button layout by mirroring the default menu item into a primary action button. Uses the first <li> by default, or <li data-default> when present.",
+        appliesTo: "nav[data-dropdown]",
+      },
       {
         name: "data-dropdown-close",
         description:

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

@@ -54,6 +54,7 @@ function enhanceDropdown(elem) {
   if (elem.dataset.enhancedDropdown) return;
   elem.dataset.enhancedDropdown = "true";
   const menu = elem.lastElementChild;
+  const usesDefaultAction = elem.classList.contains("split-button");
 
   if (!menu) return;
 
@@ -89,6 +90,63 @@ function enhanceDropdown(elem) {
     trigger.setAttribute("aria-expanded", "false");
   }
 
+  const resolveDefaultItem = () => {
+    if (!usesDefaultAction || !isMenu) return null;
+    return menu.querySelector(":scope > li[data-default]") || menu.querySelector(":scope > li");
+  };
+
+  const resolveDefaultAction = (item) => {
+    if (!item) return null;
+    return item.querySelector(":scope > a, :scope > button") || item.firstElementChild;
+  };
+
+  const createOrResolveDefaultButton = () => {
+    if (!usesDefaultAction || !trigger) return null;
+    let button = elem.querySelector(":scope > [data-dropdown-default]");
+    if (button) return button;
+    button = document.createElement("button");
+    button.setAttribute("type", "button");
+    button.setAttribute("data-dropdown-default", "");
+    button.className = trigger.className;
+    elem.insertBefore(button, trigger);
+    return button;
+  };
+
+  const syncDefaultButton = (button, action) => {
+    if (!button || !action) return;
+
+    button.replaceChildren(...Array.from(action.childNodes).map((node) => node.cloneNode(true)));
+
+    const label =
+      action.getAttribute("aria-label") ||
+      action.textContent?.replace(/\s+/g, " ").trim() ||
+      msg("Default action");
+    button.setAttribute("aria-label", label);
+    button.title = label;
+  };
+
+  const setupDefaultAction = () => {
+    if (!usesDefaultAction) return;
+    const defaultButton = createOrResolveDefaultButton();
+    const defaultItem = resolveDefaultItem();
+    const defaultAction = resolveDefaultAction(defaultItem);
+    if (!defaultButton || !defaultAction) return;
+
+    syncDefaultButton(defaultButton, defaultAction);
+
+    const executeDefault = () => {
+      if (!defaultAction) return;
+      if (typeof defaultAction.click === "function") {
+        defaultAction.click();
+      }
+    };
+
+    defaultButton.addEventListener("click", (event) => {
+      event.preventDefault();
+      executeDefault();
+    });
+  };
+
   if (!supportsPopover) {
     const warnKey = "__PDS_DROPDOWN_POPOVER_WARNED__";
     if (!globalThis[warnKey]) {
@@ -100,6 +158,8 @@ function enhanceDropdown(elem) {
     return;
   }
 
+  setupDefaultAction();
+
   menu.setAttribute("popover", "auto");
 
   const measureMenuSize = () => {

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

@@ -4547,6 +4547,41 @@ nav[data-dropdown] {
   display: flex;
   padding: 0;
 
+  &.split-button {
+    display: inline-flex;
+    align-items: stretch;
+    gap: 0;
+
+    & > [data-dropdown-default],
+    & > [data-dropdown-toggle] {
+      border-radius: 0;
+      position: relative;
+    }
+
+    & > [data-dropdown-default] {
+      border-start-start-radius: var(--radius-md);
+      border-end-start-radius: var(--radius-md);
+      border-inline-end: 0;
+      padding-inline: var(--spacing-3);
+      min-inline-size: 9.5rem;
+      justify-content: center;
+    }
+
+    & > [data-dropdown-toggle] {
+      border-start-end-radius: var(--radius-md);
+      border-end-end-radius: var(--radius-md);
+      inline-size: 2.5rem;
+      min-inline-size: 2.5rem;
+      padding-inline: 0;
+      justify-content: center;
+    }
+
+    & > [data-dropdown-toggle] pds-icon,
+    & > [data-dropdown-default] pds-icon {
+      pointer-events: none;
+    }
+  }
+
   & > :last-child {
     position: absolute;
     padding: 0 var(--spacing-2);