@pure-ds/core 0.7.60 → 0.7.62

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/common/localization-resource-provider.js

@@ -221,6 +221,7 @@ function buildCandidateLocales({ locale, effectiveLocale, defaultLocale, aliases
  *   locale?: string,
  *   locales?: string[],
  *   basePath?: string,
+ *   loadDefaultLocale?: boolean,
  *   aliases?: Record<string, string[]>,
  *   requestInit?: RequestInit,
  *   cache?: Map<string, Record<string, string | { content?: string }>>,
@@ -239,6 +240,7 @@ export function createJSONLocalization(options = {}) {
   const defaultLocale = normalizeLocaleTag(options?.locale || "en") || "en";
   const locales = toLocaleList(options?.locales, defaultLocale);
   const localeSet = new Set(locales);
+  const loadDefaultLocale = options?.loadDefaultLocale === true;
   const aliases = normalizeAliasMap(options?.aliases || {});
   const aliasLookup = createAliasLookup({ aliases, localeSet });
   const cache = options?.cache instanceof Map ? options.cache : new Map();
@@ -261,7 +263,7 @@ export function createJSONLocalization(options = {}) {
       return cache.get(effectiveLocale) || {};
     }
 
-    if (effectiveLocale === defaultLocale) {
+    if (effectiveLocale === defaultLocale && !loadDefaultLocale) {
       const defaultBundle = {};
       cache.set(effectiveLocale, defaultBundle);
       return defaultBundle;

package/src/js/common/localization-resource-provider.test.mjs

@@ -0,0 +1,91 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+
+import { createJSONLocalization } from "./localization-resource-provider.js";
+
+test("createJSONLocalization skips default locale fetch by default", async () => {
+  let fetchCalls = 0;
+  const originalFetch = globalThis.fetch;
+
+  globalThis.fetch = async () => {
+    fetchCalls += 1;
+    return {
+      ok: true,
+      async json() {
+        return { greeting: "Hello" };
+      },
+    };
+  };
+
+  try {
+    const localization = createJSONLocalization({
+      locale: "en",
+      locales: ["en", "nl"],
+      aliases: {
+        en: ["en", "en-US"],
+      },
+    });
+
+    const bundle = await localization.provider.loadLocale({ locale: "en-US" });
+
+    assert.deepEqual(bundle, {});
+    assert.equal(fetchCalls, 0);
+  } finally {
+    globalThis.fetch = originalFetch;
+  }
+});
+
+test("createJSONLocalization can load the default locale bundle for code keys", async () => {
+  const requestedPaths = [];
+  const originalFetch = globalThis.fetch;
+
+  globalThis.fetch = async (resourcePath) => {
+    requestedPaths.push(resourcePath);
+
+    if (resourcePath === "/assets/locales/en-US.json") {
+      return {
+        ok: true,
+        async json() {
+          return {
+            "my-long-string-code": {
+              content: "English source copy",
+            },
+          };
+        },
+      };
+    }
+
+    return {
+      ok: false,
+      async json() {
+        return {};
+      },
+    };
+  };
+
+  try {
+    const localization = createJSONLocalization({
+      locale: "en",
+      locales: ["en", "nl"],
+      loadDefaultLocale: true,
+      aliases: {
+        en: ["en", "en-US"],
+      },
+    });
+
+    const bundle = await localization.provider.loadLocale({ locale: "en-US" });
+
+    assert.deepEqual(bundle, {
+      "my-long-string-code": {
+        content: "English source copy",
+      },
+    });
+    assert.deepEqual(requestedPaths, ["/assets/locales/en-US.json"]);
+
+    const cachedBundle = await localization.provider.loadLocale({ locale: "en" });
+    assert.deepEqual(cachedBundle, bundle);
+    assert.deepEqual(requestedPaths, ["/assets/locales/en-US.json"]);
+  } finally {
+    globalThis.fetch = originalFetch;
+  }
+});

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);

package/src/js/pds.d.ts

@@ -164,6 +164,7 @@ export interface PDSJSONLocalizationOptions {
   locale?: string;
   locales?: string[];
   basePath?: string;
+  loadDefaultLocale?: boolean;
   aliases?: Record<string, string[]>;
   requestInit?: RequestInit;
   cache?: Map<string, PDSLocalizationMessages>;