@pure-ds/core 0.6.9 → 0.6.10

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]" },
@@ -272,9 +273,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 +413,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 +450,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 +519,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 +530,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 +542,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 +657,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],

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

@@ -805,7 +805,6 @@ export class Generator {
 
   #generateLayoutTokens(layoutConfig) {
     const {
-      maxWidth = 1200,
       containerPadding = 16,
       breakpoints = {
         sm: 640,
@@ -815,10 +814,19 @@ export class Generator {
       },
     } = layoutConfig;
 
-    const resolvedMaxWidths = this.#resolveLayoutMaxWidths(layoutConfig);
+    const hasExplicitMaxWidth =
+      this.#hasDefinedConfigValue(layoutConfig, "maxWidth");
+
+    const explicitMaxWidthValue = layoutConfig.maxWidth;
+
+    const resolvedMaxWidths = this.#resolveLayoutMaxWidths(layoutConfig, {
+      emitFallbacks: false,
+    });
 
     return {
-      maxWidth: this.#formatLength(maxWidth, "1200px"),
+      maxWidth: hasExplicitMaxWidth
+        ? this.#formatLength(explicitMaxWidthValue, "1200px")
+        : undefined,
       maxWidthSm: resolvedMaxWidths.sm,
       maxWidthMd: resolvedMaxWidths.md,
       maxWidthLg: resolvedMaxWidths.lg,
@@ -841,7 +849,8 @@ export class Generator {
     };
   }
 
-  #resolveLayoutMaxWidths(layoutConfig = {}) {
+  #resolveLayoutMaxWidths(layoutConfig = {}, options = {}) {
+    const { emitFallbacks = true } = options;
     const defaultBreakpoints = {
       sm: 640,
       md: 768,
@@ -849,15 +858,29 @@ export class Generator {
       xl: 1280,
     };
 
-    const {
-      maxWidths = {},
-      maxWidth = 1200,
-      containerPadding = 16,
-      breakpoints = defaultBreakpoints,
-    } = layoutConfig || {};
+    const { maxWidths = {}, containerPadding = 16, breakpoints = defaultBreakpoints } =
+      layoutConfig || {};
+
+    const hasExplicitMaxWidth =
+      this.#hasDefinedConfigValue(layoutConfig, "maxWidth");
+
+    const hasExplicitMaxWidths = ["sm", "md", "lg", "xl"].some((key) =>
+      this.#hasDefinedConfigValue(maxWidths, key),
+    );
+
+    if (!emitFallbacks && !hasExplicitMaxWidth && !hasExplicitMaxWidths) {
+      return {
+        sm: undefined,
+        md: undefined,
+        lg: undefined,
+        xl: undefined,
+      };
+    }
+
+    const maxWidthValue = layoutConfig?.maxWidth;
 
     const paddingValue = this.#toNumber(containerPadding, 16);
-    const baseMaxWidth = this.#toNumber(maxWidth, defaultBreakpoints.xl);
+    const baseMaxWidth = this.#toNumber(maxWidthValue, defaultBreakpoints.xl);
 
     const resolvedBreakpoints = {
       sm: this.#toNumber(breakpoints.sm, defaultBreakpoints.sm),
@@ -888,6 +911,15 @@ export class Generator {
     };
   }
 
+  #hasDefinedConfigValue(source, key) {
+    if (!source || typeof source !== "object") return false;
+    if (!Object.prototype.hasOwnProperty.call(source, key)) return false;
+    const value = source[key];
+    if (value === undefined || value === null) return false;
+    if (typeof value === "string" && value.trim().length === 0) return false;
+    return true;
+  }
+
   #formatLength(value, fallback) {
     if (typeof value === "number" && Number.isFinite(value)) {
       return `${value}px`;
@@ -1186,6 +1218,10 @@ export class Generator {
       // Convert camelCase keys to kebab-case
       const kebabKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
 
+      if (value === undefined || value === null) {
+        return;
+      }
+
       // Skip breakpoints object - it's used in JS but doesn't belong in CSS variables
       // Breakpoints are used in @media queries, not as CSS custom properties
       if (key === "breakpoints") {
@@ -1945,7 +1981,7 @@ html[data-theme="dark"] .liquid-glass {
   #generateFormStyles() {
     const {
       shape = {},
-      gap,
+      spatialRhythm = {},
       inputPadding,
       buttonPadding,
       focusRingWidth,
@@ -1963,13 +1999,14 @@ html[data-theme="dark"] .liquid-glass {
           ? (enums.BorderWidths[shape.borderWidth] ?? null)
           : null;
 
-    const inputPaddingValue = inputPadding || 0.75;
-    const buttonPaddingValue = buttonPadding || 1.0;
+    const inputPaddingValue = spatialRhythm.inputPadding ?? inputPadding ?? 0.75;
+    const buttonPaddingValue =
+      spatialRhythm.buttonPadding ?? buttonPadding ?? 1.0;
     const focusWidth = focusRingWidth || 3;
     const borderWidth =
       borderWidthThin || shapeBorderWidth || enums.BorderWidths.thin;
-    const gapValue = gap || 1.0;
-    const sectionSpacingValue = sectionSpacing || 2.0;
+    const sectionSpacingValue =
+      spatialRhythm.sectionSpacing ?? sectionSpacing ?? 2.0;
     const minButtonHeight = buttonMinHeight || 44;
     const minInputHeight = inputMinHeight || 40;
 
@@ -2235,24 +2272,31 @@ input[type="range"]:active::-moz-range-thumb {
 
 input[type="color"] {
   -webkit-appearance: none;
+  appearance: none;
   padding: 0;
-  width: 3rem;
-  height: 3rem;
-  border-radius: 0.75rem; /* your radius */
-  overflow: hidden; /* important */
+  width: calc(var(--spacing-8) + var(--spacing-1));
+  height: calc(var(--spacing-8) + var(--spacing-1));
+  min-height: auto;
+  border-radius: var(--radius-sm);
+  border: var(--border-width-thin) solid var(--color-border);
+  overflow: hidden;
   cursor: pointer;
+  background: transparent;
 
-  /* The wrapper */
   &::-webkit-color-swatch-wrapper {
     padding: 0;
     border-radius: inherit;
   }
 
-  /* The swatch (the actual color box) */
   &::-webkit-color-swatch {
     border: none;
     border-radius: inherit;
   }
+
+  &::-moz-color-swatch {
+    border: none;
+    border-radius: inherit;
+  }
 }
 
 /* Button-style checkbox inputs outside of fieldsets */
@@ -2555,6 +2599,116 @@ label[data-toggle] {
   }
 }
 
+/* Color input enhancement shell - applied by enhanceColorInput on label[data-color] */
+label[data-color] {
+  display: grid;
+  gap: var(--spacing-2);
+
+  .color-control {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-3);
+    width: fit-content;
+    min-height: var(--input-min-height, 40px);
+    padding: var(--spacing-2) var(--spacing-3);
+    border: var(--border-width-thin) solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-surface-base);
+    color: var(--color-text-primary);
+    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
+  }
+
+  .color-control .color-swatch {
+    position: relative;
+    display: inline-flex;
+    width: calc(var(--spacing-8) + var(--spacing-1));
+    height: calc(var(--spacing-8) + var(--spacing-1));
+    border-radius: var(--radius-sm);
+  }
+
+  .color-control output {
+    margin: 0;
+    min-width: 8ch;
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-sm);
+    line-height: var(--font-line-height-tight);
+    color: var(--color-text-secondary);
+    text-transform: lowercase;
+  }
+
+  .color-control[data-unset="1"] output {
+    font-style: italic;
+    color: var(--color-text-muted);
+  }
+
+  .color-control input[type="color"] {
+    width: calc(var(--spacing-8) + var(--spacing-1));
+    height: calc(var(--spacing-8) + var(--spacing-1));
+    border-radius: var(--radius-sm);
+    border: var(--border-width-thin) solid var(--color-border);
+    background: transparent;
+    padding: 0;
+  }
+
+  .color-control input[type="color"]::-webkit-color-swatch {
+    border: none;
+    border-radius: calc(var(--radius-sm) - var(--border-width-thin));
+  }
+
+  .color-control input[type="color"]::-moz-color-swatch {
+    border: none;
+    border-radius: calc(var(--radius-sm) - var(--border-width-thin));
+  }
+
+  .color-control .color-swatch[data-unset="1"]::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: var(--radius-sm);
+    border: var(--border-width-thin) solid var(--color-border);
+    background-color: color-mix(in oklab, var(--color-surface-subtle) 78%, var(--color-text-primary) 22%);
+    background-image:
+      linear-gradient(
+        45deg,
+        color-mix(in oklab, var(--color-surface-base) 88%, var(--color-text-primary) 12%) 25%,
+        transparent 25%,
+        transparent 75%,
+        color-mix(in oklab, var(--color-surface-base) 88%, var(--color-text-primary) 12%) 75%,
+        color-mix(in oklab, var(--color-surface-base) 88%, var(--color-text-primary) 12%)
+      ),
+      linear-gradient(
+        45deg,
+        color-mix(in oklab, var(--color-surface-base) 88%, var(--color-text-primary) 12%) 25%,
+        transparent 25%,
+        transparent 75%,
+        color-mix(in oklab, var(--color-surface-base) 88%, var(--color-text-primary) 12%) 75%,
+        color-mix(in oklab, var(--color-surface-base) 88%, var(--color-text-primary) 12%)
+      );
+    background-size: calc(var(--spacing-2) * 1.25) calc(var(--spacing-2) * 1.25);
+    background-position:
+      0 0,
+      calc(var(--spacing-2) * 0.625) calc(var(--spacing-2) * 0.625);
+    pointer-events: none;
+  }
+
+  .color-control .color-swatch[data-unset="1"] input[type="color"] {
+    opacity: 0;
+  }
+
+  &:focus-within .color-control {
+    border-color: var(--color-primary-500);
+    box-shadow: 0 0 0 ${focusWidth}px color-mix(in oklab, var(--color-primary-500) ${Math.round(
+      (focusRingOpacity || 0.3) * 100,
+    )}%, transparent);
+  }
+
+  &:has(input[type="color"]:disabled) .color-control {
+    background: var(--color-input-disabled-bg);
+    color: var(--color-input-disabled-text);
+    cursor: not-allowed;
+  }
+}
+
 input[type="file"] {
   padding: var(--spacing-2) var(--spacing-4);
   cursor: pointer;
@@ -2762,7 +2916,7 @@ a.btn-working {
   color: var(--color-text-secondary);
   padding: var(--spacing-6) var(--spacing-4);
   background-color: var(--color-surface-subtle);
-  max-width: var(--layout-max-width-md);
+  max-width: var(--layout-max-width-md, 736px);
   border-radius: var(--radius-md);
   nav {
     margin-top: var(--spacing-4);
@@ -3508,6 +3662,12 @@ 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) {
+ overflow: hidden;
+ scrollbar-gutter: stable;
+}
+
+
 `;
   }