@pure-ds/core 0.7.62 → 0.7.63

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

@@ -11,7 +11,7 @@ export const defaultPDSEnhancerMetadata = [
     selector: ".accordion",
     description:
       "Ensures only one <details> element can be open at a time within the accordion.",
-    demoHtml: `
+    demoHtml: /*html*/`
       <div class="accordion">
         <details>
           <summary>Section 1</summary>
@@ -46,7 +46,7 @@ export const defaultPDSEnhancerMetadata = [
         appliesTo: "Any clickable element inside nav[data-dropdown] menu/panel content",
       },
     ],
-    demoHtml: `
+    demoHtml: /*html*/`
       <nav data-dropdown>
         <button class="btn-primary">Menu</button>
         <menu>
@@ -59,7 +59,7 @@ export const defaultPDSEnhancerMetadata = [
   {
     selector: "label[data-toggle]",
     description: "Creates a toggle switch element from a checkbox.",
-    demoHtml: `
+    demoHtml: /*html*/`
       <label data-toggle>
         <input type="checkbox">
         <span data-label>Enable notifications</span>
@@ -70,17 +70,66 @@ export const defaultPDSEnhancerMetadata = [
     selector: "label[data-color]",
     description:
       "Wraps color inputs with a styled control shell and synced hex output while keeping the native picker.",
-    demoHtml: `
+    demoHtml: /*html*/`
       <label data-color>
         <span>Brand color</span>
         <input type="color" value="#7c3aed">
       </label>
     `.trim(),
   },
+  {
+    selector: 'input[autocomplete="one-time-code"]',
+    description:
+      "Enhances a single text input into a segmented one-time-code / OTP field with numeric sanitizing, full-code paste support, and optional auto-submit when the expected length is reached.",
+    attributes: [
+      {
+        name: "data-otp-length",
+        description:
+          "Expected code length. Defaults to the input maxlength, or 6 when neither is provided.",
+        appliesTo: 'input[autocomplete="one-time-code"]',
+      },
+      {
+        name: 'data-otp-autosubmit="false"',
+        description:
+          "Opt out of automatically submitting the parent form when the code is complete.",
+        appliesTo: 'input[autocomplete="one-time-code"]',
+      },
+      {
+        name: "data-otp-submit-selector",
+        description:
+          "Optional selector for the preferred submit button passed to form.requestSubmit().",
+        appliesTo: 'input[autocomplete="one-time-code"]',
+      },
+    ],
+    demoHtml: /*html*/`
+      <form action="#verify" method="post">
+        <label>
+          <span data-label>Email address</span>
+          <input type="email" autocomplete="email" value="marc@example.com">
+        </label>
+        <label>
+          <span data-label>Verification code</span>
+          <input
+            autocomplete="one-time-code"
+            inputmode="numeric"
+            maxlength="6"
+            data-otp-length="6"
+            aria-describedby="otp-help"
+          >
+        </label>
+        <small id="otp-help" class="field-description">
+          We sent a 6-digit code to marc@example.com. You can paste the full code.
+        </small>
+        <nav class="form-actions">
+          <button type="submit" class="btn-primary">Verify</button>
+        </nav>
+      </form>
+    `.trim(),
+  },
   {
     selector: 'input[type="range"]',
     description: "Enhances range inputs with an attached <output>.",
-    demoHtml: `
+    demoHtml: /*html*/`
       <label class="range-output">
         <span data-label>Volume</span>
         <input type="range" min="0" max="100" value="40">
@@ -91,7 +140,7 @@ export const defaultPDSEnhancerMetadata = [
     selector: "form[data-required]",
     description:
       "Enhances required form fields using an asterisk in the label.",
-    demoHtml: `
+    demoHtml: /*html*/`
       <form data-required action="#" method="post">
       <label>
         <span>Field Label</span>
@@ -107,7 +156,7 @@ export const defaultPDSEnhancerMetadata = [
     selector: "fieldset[role=group][data-open]",
     description:
       "Enhances a checkbox/radio group to be open (have a way to add and remove items).",
-    demoHtml: `
+    demoHtml: /*html*/`
       <fieldset role="group" data-open>
         <label>
           <span data-label>Test</span>
@@ -120,7 +169,7 @@ export const defaultPDSEnhancerMetadata = [
     selector: "[data-clip]",
     description:
       "Enables click/keyboard toggling for line-clamped content blocks.",
-    demoHtml: `
+    demoHtml: /*html*/`
       <div data-clip="2" data-clip-more="more...">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
@@ -132,7 +181,7 @@ export const defaultPDSEnhancerMetadata = [
     selector: "button, a[class*='btn-']",
     description:
       "Automatically manages spinner icon for buttons with .btn-working class",
-    demoHtml: `
+    demoHtml: /*html*/`
       <button class="btn-primary btn-working">
         <span>Saving</span>
       </button>

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

@@ -18,6 +18,7 @@ const enhancerDefinitions = [
   { selector: "nav[data-dropdown]" },
   { selector: "label[data-toggle]" },
   { selector: "label[data-color]" },
+  { selector: 'input[autocomplete="one-time-code"]' },
   { selector: 'input[type="range"]' },
   { selector: "form[data-required]" },
   { selector: "fieldset[role=group][data-open]" },
@@ -566,6 +567,197 @@ function enhanceColorInput(elem) {
   input.addEventListener("change", setResolved, { passive: true });
 }
 
+function enhanceOneTimeCodeInput(elem) {
+  if (elem.dataset.enhancedOneTimeCode) return;
+  elem.dataset.enhancedOneTimeCode = "true";
+
+  const configuredLength = Number.parseInt(
+    elem.getAttribute("data-otp-length") || elem.getAttribute("maxlength") || "6",
+    10,
+  );
+  const length = Number.isFinite(configuredLength) && configuredLength > 0 ? configuredLength : 6;
+  const autoSubmit = elem.getAttribute("data-otp-autosubmit") !== "false";
+  const allowAlphanumeric = elem.getAttribute("data-otp-format") === "alphanumeric";
+  const statusId =
+    elem.getAttribute("data-otp-status-id") ||
+    `${elem.id || `otp-${Math.random().toString(36).slice(2, 9)}`}-status`;
+
+  const normalizeValue = (value) => {
+    const compact = String(value || "").replace(/\s+/g, "");
+    const filtered = allowAlphanumeric
+      ? compact.replace(/[^0-9a-z]/gi, "")
+      : compact.replace(/\D+/g, "");
+    return filtered.slice(0, length);
+  };
+
+  elem.classList.add("input-otp");
+  elem.dataset.otpLength = String(length);
+  elem.dataset.otpComplete = "false";
+  elem.style.setProperty("--otp-digits", String(length));
+  elem.style.setProperty("--_otp-digit", "0");
+
+  if (!elem.hasAttribute("type") || elem.getAttribute("type")?.toLowerCase() === "number") {
+    elem.setAttribute("type", "text");
+  }
+  elem.setAttribute("maxlength", String(length));
+  if (!elem.hasAttribute("inputmode")) {
+    elem.setAttribute("inputmode", allowAlphanumeric ? "text" : "numeric");
+  }
+  if (!elem.hasAttribute("enterkeyhint")) {
+    elem.setAttribute("enterkeyhint", "done");
+  }
+  if (!elem.hasAttribute("autocapitalize")) {
+    elem.setAttribute("autocapitalize", "off");
+  }
+  if (!elem.hasAttribute("spellcheck")) {
+    elem.setAttribute("spellcheck", "false");
+  }
+  if (!elem.hasAttribute("pattern")) {
+    elem.setAttribute(
+      "pattern",
+      allowAlphanumeric ? `[0-9A-Za-z]{${length}}` : `\\d{${length}}`,
+    );
+  }
+  if (!elem.hasAttribute("aria-label") && !elem.labels?.length) {
+    elem.setAttribute("aria-label", msg("One-time code"));
+  }
+
+  const form = elem.form || elem.closest("form");
+  let autoSubmitPending = false;
+  let status = null;
+
+  const syncActiveDigit = () => {
+    const selectionStart =
+      typeof elem.selectionStart === "number" ? elem.selectionStart : elem.value.length;
+    const clamped = Math.max(0, Math.min(selectionStart, Math.max(length - 1, 0)));
+    elem.style.setProperty("--_otp-digit", String(clamped));
+  };
+
+  const syncScrollPosition = () => {
+    if (typeof elem.scrollLeft === "number") {
+      elem.scrollLeft = 0;
+    }
+  };
+
+  if (typeof document !== "undefined") {
+    status = document.getElementById(statusId);
+    if (!status) {
+      status = document.createElement("span");
+      status.id = statusId;
+      status.className = "otp-status";
+      status.setAttribute("aria-live", "polite");
+      status.setAttribute("aria-atomic", "true");
+      elem.insertAdjacentElement("afterend", status);
+    }
+
+    const describedBy = new Set(
+      (elem.getAttribute("aria-describedby") || "")
+        .split(/\s+/)
+        .filter(Boolean),
+    );
+    describedBy.add(statusId);
+    elem.setAttribute("aria-describedby", Array.from(describedBy).join(" "));
+  }
+
+  const updateStatus = () => {
+    if (!status) return;
+    const count = elem.value.length;
+    status.textContent =
+      count === 0
+        ? msg("Enter the verification code")
+        : count >= length
+          ? msg("Code complete")
+          : `${count}/${length}`;
+  };
+
+  const attemptSubmit = () => {
+    if (!autoSubmit || autoSubmitPending || !form) return;
+    if (typeof form.checkValidity === "function" && !form.checkValidity()) return;
+    autoSubmitPending = true;
+    requestAnimationFrame(() => {
+      autoSubmitPending = false;
+      const submitSelector = elem.getAttribute("data-otp-submit-selector");
+      const submitter = submitSelector ? form.querySelector(submitSelector) : undefined;
+      if (typeof form.requestSubmit === "function") {
+        form.requestSubmit(submitter || undefined);
+      } else {
+        form.submit();
+      }
+    });
+  };
+
+  const syncValue = (nextValue, { dispatchChange = false } = {}) => {
+    const normalized = normalizeValue(nextValue);
+    if (elem.value !== normalized) {
+      elem.value = normalized;
+    }
+
+    const isComplete = normalized.length === length;
+    elem.dataset.otpComplete = isComplete ? "true" : "false";
+    updateStatus();
+    syncActiveDigit();
+    syncScrollPosition();
+
+    if (dispatchChange) {
+      elem.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+
+    if (isComplete) {
+      attemptSubmit();
+    }
+  };
+
+  elem.addEventListener("beforeinput", (event) => {
+    if (event.defaultPrevented) return;
+    if (event.inputType?.startsWith("delete")) return;
+    if (typeof event.data !== "string" || event.data.length === 0) return;
+
+    const normalized = normalizeValue(event.data);
+    if (!normalized && event.data.trim()) {
+      event.preventDefault();
+    }
+  });
+
+  elem.addEventListener("input", () => {
+    syncValue(elem.value);
+    try {
+      const end = elem.value.length;
+      elem.setSelectionRange(end, end);
+    } catch {
+      // Ignore selection API issues on unsupported input modes
+    }
+    syncActiveDigit();
+    syncScrollPosition();
+  });
+
+  ["focus", "click", "keyup", "select"].forEach((eventName) => {
+    elem.addEventListener(eventName, () => {
+      requestAnimationFrame(() => {
+        syncActiveDigit();
+        syncScrollPosition();
+      });
+    });
+  });
+
+  elem.addEventListener("paste", (event) => {
+    const pasted = event.clipboardData?.getData("text") || "";
+    if (!pasted) return;
+
+    event.preventDefault();
+    elem.value = normalizeValue(pasted);
+    elem.dispatchEvent(new Event("input", { bubbles: true }));
+    elem.dispatchEvent(new Event("change", { bubbles: true }));
+  });
+
+  elem.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" && elem.value.length === length) {
+      attemptSubmit();
+    }
+  });
+
+  syncValue(elem.value);
+}
+
 function enhanceRange(elem) {
   if (elem.dataset.enhancedRange) return;
 
@@ -891,6 +1083,7 @@ const enhancerRunners = new Map([
   ["nav[data-dropdown]", enhanceDropdown],
   ["label[data-toggle]", enhanceToggle],
   ["label[data-color]", enhanceColorInput],
+  ['input[autocomplete="one-time-code"]', enhanceOneTimeCodeInput],
   ['input[type="range"]', enhanceRange],
   ["form[data-required]", enhanceRequired],
   ["fieldset[role=group][data-open]", enhanceOpenGroup],

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

@@ -2628,6 +2628,124 @@ input, textarea, select {
   }
 }
 
+/* One-time-code / OTP input enhancement — single input, segmented visual style */
+input[autocomplete="one-time-code"],
+input.input-otp {
+  --otp-digits: 6;
+  --otp-ls: 1.6ch;
+  --otp-gap: 1.15;
+  --otp-edge-pad: max(var(--spacing-2), calc(var(--radius-md) * 0.8));
+  --otp-start-shift: calc((((var(--_otp-bgsz) - 1ch) / 2) * 0.98));
+  --otp-pad-start: calc(var(--otp-edge-pad) + var(--otp-start-shift));
+  --otp-pad-end: var(--otp-edge-pad);
+  --otp-cell-bg: color-mix(in oklab, var(--color-surface-subtle) 94%, var(--color-primary-fill) 6%);
+  --otp-active-bg: color-mix(in oklab, var(--color-primary-fill) 18%, var(--color-surface-base));
+  --_otp-bgsz: calc(var(--otp-ls) + 1ch);
+  --_otp-digit: 0;
+
+  all: unset;
+  display: block;
+  box-sizing: border-box;
+  inline-size: calc((var(--otp-digits) * var(--_otp-bgsz)) + var(--otp-pad-start) + var(--otp-pad-end));
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: auto;
+  padding-block: max(var(--spacing-3), 0.9ch);
+  padding-inline-start: var(--otp-pad-start);
+  padding-inline-end: var(--otp-pad-end);
+  border-radius: max(var(--radius-md), calc(var(--otp-edge-pad) * 0.9));
+  text-align: left;
+  text-indent: 0;
+  letter-spacing: var(--otp-ls);
+  font-family: var(--font-family-mono, monospace);
+  font-variant-numeric: tabular-nums;
+  font-size: clamp(var(--font-size-lg), 2vw, calc(var(--font-size-xl) + var(--font-size-xs)));
+  line-height: 1;
+  white-space: nowrap;
+  direction: ltr;
+  color: var(--color-text-primary);
+  caret-color: var(--color-text-primary);
+  cursor: text;
+  overflow: hidden;
+  scrollbar-width: none;
+  background:
+    linear-gradient(
+      90deg,
+      var(--otp-active-bg) 0 calc(var(--otp-gap) * var(--otp-ls)),
+      transparent calc(var(--otp-gap) * var(--otp-ls)) 100%
+    ) calc(var(--_otp-digit) * var(--_otp-bgsz)) 0 / var(--_otp-bgsz) 100% no-repeat,
+    repeating-linear-gradient(
+      90deg,
+      var(--otp-cell-bg) 0 calc(var(--otp-gap) * var(--otp-ls)),
+      transparent calc(var(--otp-gap) * var(--otp-ls)) var(--_otp-bgsz)
+    ) 0 0 / var(--_otp-bgsz) 100% repeat-x,
+    var(--color-input-bg);
+  background-origin: content-box, content-box, border-box;
+  background-clip: content-box, content-box, border-box;
+  box-shadow:
+    inset 0 0 0 var(--border-width-medium) var(--color-border),
+    var(--shadow-sm);
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &::placeholder {
+    color: transparent;
+  }
+
+  &:focus {
+    box-shadow:
+      inset 0 0 0 var(--border-width-medium) var(--color-focus-ring, var(--color-primary-500)),
+      0 0 0 ${focusWidth}px color-mix(in oklab, var(--color-focus-ring, var(--color-primary-500)) ${Math.round(
+        (focusRingOpacity || 0.3) * 100,
+      )}%, transparent);
+  }
+
+  &:invalid {
+    box-shadow:
+      inset 0 0 0 var(--border-width-medium) var(--color-border),
+      var(--shadow-sm);
+  }
+
+  &:invalid:focus {
+    box-shadow:
+      inset 0 0 0 var(--border-width-medium) var(--color-focus-ring, var(--color-primary-500)),
+      0 0 0 ${focusWidth}px color-mix(in oklab, var(--color-focus-ring, var(--color-primary-500)) ${Math.round(
+        (focusRingOpacity || 0.3) * 100,
+      )}%, transparent);
+  }
+
+  &[data-otp-complete="true"] {
+    --otp-active-bg: color-mix(in oklab, var(--color-success-fill, var(--color-primary-fill)) 18%, var(--color-surface-base));
+  }
+
+  &:disabled {
+    color: var(--color-input-disabled-text);
+    caret-color: transparent;
+    background:
+      linear-gradient(
+        90deg,
+        color-mix(in oklab, var(--color-input-disabled-bg) 90%, var(--color-border) 10%) calc(var(--otp-gap) * var(--otp-ls)),
+        transparent 0
+      ) 0 0 / var(--_otp-bgsz) 100% repeat-x;
+    box-shadow: inset 0 0 0 var(--border-width-medium) var(--color-border);
+  }
+}
+
+.otp-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
 input[type="range"] {
   padding: 0;
   background: transparent;