@pure-ds/core 0.6.9 → 0.6.11

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

@@ -55,6 +55,17 @@ export const defaultPDSEnhancerMetadata = [
       </label>
     `.trim(),
   },
+  {
+    selector: "label[data-color]",
+    description:
+      "Wraps color inputs with a styled control shell and synced hex output while keeping the native picker.",
+    demoHtml: `
+      <label data-color>
+        <span>Brand color</span>
+        <input type="color" value="#7c3aed">
+      </label>
+    `.trim(),
+  },
   {
     selector: 'input[type="range"]',
     description: "Enhances range inputs with an attached <output>.",

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

@@ -15,6 +15,7 @@ const enhancerDefinitions = [
   { selector: ".accordion" },
   { selector: "nav[data-dropdown]" },
   { selector: "label[data-toggle]" },
+  { selector: "label[data-color]" },
   { selector: 'input[type="range"]' },
   { selector: "form[data-required]" },
   { selector: "fieldset[role=group][data-open]" },
@@ -67,6 +68,7 @@ function enhanceDropdown(elem) {
   }
 
   const isMenu = menu.tagName?.toLowerCase() === "menu";
+  const VIEWPORT_PADDING = 8;
   if (isMenu && !menu.hasAttribute("role")) {
     menu.setAttribute("role", "menu");
   }
@@ -151,6 +153,145 @@ function enhanceDropdown(elem) {
     return spaceForRightAligned > spaceForLeftAligned ? "right" : "left";
   };
 
+  const readLengthToken = (tokenName, fallback = 8) => {
+    const raw = getComputedStyle(elem).getPropertyValue(tokenName).trim();
+    if (!raw) return fallback;
+    const probe = document.createElement("span");
+    probe.style.position = "fixed";
+    probe.style.visibility = "hidden";
+    probe.style.pointerEvents = "none";
+    probe.style.height = raw;
+    document.body.appendChild(probe);
+    const parsed = Number.parseFloat(getComputedStyle(probe).height);
+    probe.remove();
+    return Number.isFinite(parsed) ? parsed : fallback;
+  };
+
+  const clearFloatingMenuPosition = () => {
+    menu.style.removeProperty("position");
+    menu.style.removeProperty("left");
+    menu.style.removeProperty("top");
+    menu.style.removeProperty("right");
+    menu.style.removeProperty("bottom");
+    menu.style.removeProperty("margin-top");
+    menu.style.removeProperty("margin-bottom");
+    menu.style.removeProperty("max-width");
+    menu.style.removeProperty("max-inline-size");
+    menu.style.removeProperty("max-height");
+    menu.style.removeProperty("overflow");
+  };
+
+  const reattachFloatingMenu = () => {
+    if (menu.getAttribute("aria-hidden") !== "false") return;
+    clearFloatingMenuPosition();
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        positionFloatingMenu();
+      });
+    });
+  };
+
+  const positionFloatingMenu = () => {
+    if (menu.getAttribute("aria-hidden") !== "false") return;
+    const anchorRect = (trigger || elem).getBoundingClientRect();
+    const viewport = window.visualViewport;
+    const viewportWidth =
+      viewport?.width || document.documentElement?.clientWidth || window.innerWidth;
+    const viewportHeight =
+      viewport?.height || document.documentElement?.clientHeight || window.innerHeight;
+    const viewportOffsetLeft = viewport?.offsetLeft || 0;
+    const viewportOffsetTop = viewport?.offsetTop || 0;
+    const maxMenuWidth = Math.max(1, viewportWidth - VIEWPORT_PADDING * 2);
+    const maxMenuHeight = Math.max(1, viewportHeight - VIEWPORT_PADDING * 2);
+
+    menu.style.maxWidth = `${Math.round(maxMenuWidth)}px`;
+    menu.style.maxInlineSize = `${Math.round(maxMenuWidth)}px`;
+    menu.style.maxHeight = `${Math.round(maxMenuHeight)}px`;
+    menu.style.overflow = "auto";
+
+    const { width: menuWidth, height: menuHeight } = measureMenuSize();
+    const spacing = readLengthToken("--spacing-2", 8);
+    const direction = resolveDirection();
+    const align = resolveAlign();
+
+    elem.dataset.dropdownDirection = direction;
+    elem.dataset.dropdownAlign = align;
+
+    let left = align === "right" ? anchorRect.right - menuWidth : anchorRect.left;
+    if (menuWidth >= maxMenuWidth - 1) {
+      left = viewportOffsetLeft + VIEWPORT_PADDING;
+    } else {
+      left = Math.max(
+        viewportOffsetLeft + VIEWPORT_PADDING,
+        Math.min(
+          left,
+          viewportOffsetLeft + viewportWidth - menuWidth - VIEWPORT_PADDING,
+        ),
+      );
+    }
+
+    let top =
+      direction === "up"
+        ? anchorRect.top - spacing - menuHeight
+        : anchorRect.bottom + spacing;
+    top = Math.max(
+      viewportOffsetTop + VIEWPORT_PADDING,
+      Math.min(
+        top,
+        viewportOffsetTop + viewportHeight - menuHeight - VIEWPORT_PADDING,
+      ),
+    );
+
+    menu.style.position = "fixed";
+    menu.style.left = `${Math.round(left)}px`;
+    menu.style.top = `${Math.round(top)}px`;
+    menu.style.right = "auto";
+    menu.style.bottom = "auto";
+    menu.style.marginTop = "0";
+    menu.style.marginBottom = "0";
+  };
+
+  let repositionHandler = null;
+  const bindReposition = () => {
+    if (repositionHandler) return;
+    repositionHandler = () => positionFloatingMenu();
+    window.addEventListener("resize", repositionHandler);
+    window.addEventListener("scroll", repositionHandler, true);
+  };
+
+  const unbindReposition = () => {
+    if (!repositionHandler) return;
+    window.removeEventListener("resize", repositionHandler);
+    window.removeEventListener("scroll", repositionHandler, true);
+    repositionHandler = null;
+  };
+
+  let configChangedHandler = null;
+  const bindConfigChanged = () => {
+    if (configChangedHandler || typeof document === "undefined") return;
+    configChangedHandler = () => {
+      if (menu.getAttribute("aria-hidden") !== "false") return;
+      elem.dataset.dropdownDirection = resolveDirection();
+      elem.dataset.dropdownAlign = resolveAlign();
+      reattachFloatingMenu();
+      setTimeout(() => {
+        if (menu.getAttribute("aria-hidden") !== "false") return;
+        reattachFloatingMenu();
+      }, 50);
+      setTimeout(() => {
+        if (menu.getAttribute("aria-hidden") !== "false") return;
+        reattachFloatingMenu();
+      }, 150);
+    };
+    document.addEventListener("pds:config-changed", configChangedHandler);
+  };
+
+  const unbindConfigChanged = () => {
+    if (!configChangedHandler || typeof document === "undefined") return;
+    document.removeEventListener("pds:config-changed", configChangedHandler);
+    configChangedHandler = null;
+  };
+
   // Store click handler reference for cleanup
   let clickHandler = null;
 
@@ -159,6 +300,9 @@ function enhanceDropdown(elem) {
     elem.dataset.dropdownAlign = resolveAlign();
     menu.setAttribute("aria-hidden", "false");
     trigger?.setAttribute("aria-expanded", "true");
+    bindReposition();
+    bindConfigChanged();
+    reattachFloatingMenu();
 
     // Add click-outside handler when opening
     if (!clickHandler) {
@@ -181,6 +325,9 @@ function enhanceDropdown(elem) {
   const closeMenu = () => {
     menu.setAttribute("aria-hidden", "true");
     trigger?.setAttribute("aria-expanded", "false");
+    unbindReposition();
+    unbindConfigChanged();
+    clearFloatingMenuPosition();
 
     // Remove click-outside handler when closing
     if (clickHandler) {
@@ -272,9 +419,109 @@ function enhanceToggle(elem) {
   checkbox.addEventListener("change", updateAria);
 }
 
+function enhanceColorInput(elem) {
+  if (elem.dataset.enhancedColorInput) return;
+
+  const input = elem.querySelector('input[type="color"]');
+  if (!input) return;
+
+  elem.dataset.enhancedColorInput = "true";
+
+  let control = elem.querySelector(':scope > .color-control');
+  let swatch = elem.querySelector(':scope > .color-control > .color-swatch');
+  let output = elem.querySelector(':scope > .color-control > output');
+
+  if (!control) {
+    control = document.createElement("span");
+    control.className = "color-control";
+    input.before(control);
+  }
+
+  if (!swatch) {
+    swatch = document.createElement("span");
+    swatch.className = "color-swatch";
+    control.appendChild(swatch);
+  }
+
+  if (input.parentElement !== swatch) {
+    swatch.appendChild(input);
+  }
+
+  if (!output) {
+    output = document.createElement("output");
+    control.appendChild(output);
+  }
+
+  const sync = () => {
+    const isUnset = input.dataset.colorUnset === "1";
+
+    if (isUnset) {
+      output.value = "";
+      output.textContent = "not set";
+      control.dataset.value = "";
+      control.dataset.unset = "1";
+      swatch.dataset.unset = "1";
+      return;
+    }
+
+    output.value = input.value;
+    output.textContent = input.value;
+    control.dataset.value = input.value;
+    delete control.dataset.unset;
+    delete swatch.dataset.unset;
+  };
+
+  sync();
+
+  const setResolved = () => {
+    if (input.dataset.colorUnset === "1") {
+      input.dataset.colorUnset = "0";
+    }
+    sync();
+  };
+
+  input.addEventListener("input", setResolved, { passive: true });
+  input.addEventListener("change", setResolved, { passive: true });
+}
+
 function enhanceRange(elem) {
   if (elem.dataset.enhancedRange) return;
 
+  const wireProgrammaticUpdates = (updateFn) => {
+    if (elem.dataset.enhancedRangeProgrammatic) return;
+    elem.dataset.enhancedRangeProgrammatic = "1";
+
+    const descriptor =
+      Object.getOwnPropertyDescriptor(Object.getPrototypeOf(elem), "value") ||
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");
+
+    if (descriptor?.get && descriptor?.set) {
+      Object.defineProperty(elem, "value", {
+        configurable: true,
+        enumerable: descriptor.enumerable,
+        get() {
+          return descriptor.get.call(this);
+        },
+        set(nextValue) {
+          descriptor.set.call(this, nextValue);
+          updateFn();
+        },
+      });
+    }
+
+    const attrObserver = new MutationObserver((mutations) => {
+      const shouldUpdate = mutations.some((mutation) => {
+        const attr = mutation.attributeName;
+        return attr === "value" || attr === "min" || attr === "max";
+      });
+      if (shouldUpdate) updateFn();
+    });
+    attrObserver.observe(elem, {
+      attributes: true,
+      attributeFilter: ["value", "min", "max"],
+    });
+  };
+
   const label = elem.closest("label");
   const hasRangeOutputClass = label?.classList.contains("range-output");
 
@@ -312,6 +559,9 @@ function enhanceRange(elem) {
         output.textContent = elem.value;
       };
       elem.addEventListener("input", updateOutput);
+      elem.addEventListener("change", updateOutput);
+      wireProgrammaticUpdates(updateOutput);
+      updateOutput();
     }
   } else {
     let container = elem.closest(".range-container");
@@ -346,6 +596,8 @@ function enhanceRange(elem) {
     elem.addEventListener("pointerleave", hide);
     elem.addEventListener("focus", show);
     elem.addEventListener("blur", hide);
+    elem.addEventListener("change", updateBubble);
+    wireProgrammaticUpdates(updateBubble);
     updateBubble();
   }
 
@@ -413,9 +665,9 @@ function enhanceOpenGroup(elem) {
   addInput.placeholder = "Add item...";
   addInput.classList.add("input-text", "input-sm");
   addInput.style.width = "auto";
-  const firstInput = elem.querySelector(
-    'input[type="radio"], input[type="checkbox"]',
-  );
+
+  const getFirstInput = () =>
+    elem.querySelector('input[type="radio"], input[type="checkbox"]');
 
   elem.appendChild(addInput);
   addInput.addEventListener("keydown", (event) => {
@@ -424,7 +676,8 @@ function enhanceOpenGroup(elem) {
       if (value) {
         event.preventDefault();
 
-        const type = firstInput.type === "radio" ? "radio" : "checkbox";
+        const firstInput = getFirstInput();
+        const type = firstInput?.type === "radio" ? "radio" : "checkbox";
         const id = `open-group-${Math.random().toString(36).substring(2, 11)}`;
         const label = document.createElement("label");
 
@@ -435,7 +688,7 @@ function enhanceOpenGroup(elem) {
         const input = document.createElement("input");
         input.type = type;
         input.name =
-          firstInput.name || elem.getAttribute("data-name") || "open-group";
+          firstInput?.name || elem.getAttribute("data-name") || "open-group";
         input.value = value;
         input.id = id;
 
@@ -550,6 +803,7 @@ const enhancerRunners = new Map([
   [".accordion", enhanceAccordion],
   ["nav[data-dropdown]", enhanceDropdown],
   ["label[data-toggle]", enhanceToggle],
+  ["label[data-color]", enhanceColorInput],
   ['input[type="range"]', enhanceRange],
   ["form[data-required]", enhanceRequired],
   ["fieldset[role=group][data-open]", enhanceOpenGroup],