@wpmoo/ui 1.5.0 → 2.1.0

package/dist/js/password-requirements.js

@@ -0,0 +1,266 @@
+/*!
+ * Moo UI password-requirements.js v2.1.0 (https://wpmoo.org/)
+ * Copyright 2026 WPMoo Authors
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
+ */
+
+const instances = /* @__PURE__ */ new WeakMap();
+const MESSAGES = {
+  met: "\u2713 %s",
+  missing: "\u2014 %s",
+  remaining: "Remaining: %s",
+  complete: "Shown checks met. Final validation happens on submit.",
+  analysis: "Host password analysis must pass."
+};
+const format = (message, value) => message.replace("%s", () => String(value));
+function strip(value, characters) {
+  const points = Array.from(value);
+  let start = 0;
+  let end = points.length;
+  while (start < end && characters.includes(points[start])) start++;
+  while (end > start && characters.includes(points[end - 1])) end--;
+  return points.slice(start, end).join("");
+}
+function passwordRequirementStates(value, policy) {
+  const normalized = strip(value.normalize("NFKC"), policy.whitespace);
+  const maximum = Math.max(Array.from(value).length, Array.from(value.normalize("NFKC")).length) <= policy.maxlength;
+  const checks = {
+    length: Math.min(Array.from(strip(value, policy.whitespace)).length, Array.from(normalized).length) >= policy.minlength,
+    case: /\p{Uppercase}/u.test(normalized) && /\p{Lowercase}/u.test(normalized),
+    number: /\p{Nd}/u.test(normalized),
+    symbol: /[\p{P}\p{S}]/u.test(normalized),
+    maximum
+  };
+  return policy.rules.map((rule) => ({ key: rule.key, label: rule.label, warning: Boolean(rule.warning), met: Boolean(checks[rule.key]) }));
+}
+class PasswordRequirements {
+  static getInstance(element) {
+    return instances.get(element) || null;
+  }
+  static getOrCreateInstance(element, options) {
+    return this.getInstance(element) || new this(element, options);
+  }
+  constructor(element, options = {}) {
+    if (!element?.matches("fieldset[data-password-requirements]") || !element.id) {
+      throw new TypeError("PasswordRequirements requires an identified Fieldset.");
+    }
+    const existing = instances.get(element);
+    if (existing) return existing;
+    const configuration = JSON.parse(element.dataset.passwordRequirements);
+    const document = element.ownerDocument;
+    const owner = element.closest(".moo-ui");
+    const input = document.getElementById(configuration.input);
+    const confirmation = configuration.confirmation && document.getElementById(configuration.confirmation);
+    const localControl = (node) => node?.matches('input[type="password"]') && node.closest(".moo-ui") === owner && node.form === element.closest("form");
+    const policy = configuration.policy;
+    if (!owner || !localControl(input) || configuration.confirmation && (!localControl(confirmation) || confirmation === input) || policy?.version !== 3 || !Number.isInteger(policy.minlength) || policy.minlength < 1 || !Number.isInteger(policy.maxlength) || policy.maxlength < policy.minlength || policy.maxlength > 128 || !Array.isArray(policy.rules) || !policy.rules.length || policy.rules.some((rule) => !["length", "case", "number", "symbol", "maximum"].includes(rule.key) || typeof rule.label !== "string" || rule.warning !== void 0 && typeof rule.warning !== "boolean") || new Set(policy.rules.map((rule) => rule.key)).size !== policy.rules.length || !["length", "maximum"].every((key) => policy.rules.some((rule) => rule.key === key)) || typeof policy.whitespace !== "string" || options.analyze !== void 0 && typeof options.analyze !== "function" || options.messages !== void 0 && (!options.messages || typeof options.messages !== "object" || Object.entries(options.messages).some(([key, value]) => !Object.hasOwn(MESSAGES, key) || typeof value !== "string"))) {
+      throw new TypeError("PasswordRequirements requires same-owner controls and a versioned public policy.");
+    }
+    this._element = element;
+    const messages = { ...MESSAGES, ...options.messages };
+    this._initialReady = element.getAttribute("data-requirements-ready");
+    this._originals = /* @__PURE__ */ new Map();
+    this._listeners = [];
+    const local = (suffix) => {
+      const node = document.getElementById(element.id + "-" + suffix);
+      if (!node || !element.contains(node)) throw new TypeError("Missing local requirement description.");
+      this._originals.set(node, {
+        text: node.textContent,
+        className: node.className,
+        hidden: node.hidden,
+        met: node.getAttribute("data-requirement-met")
+      });
+      return node;
+    };
+    const rows = new Map(policy.rules.map((rule) => [rule.key, local(rule.key)]));
+    const summary = local("summary");
+    const match = confirmation && local("confirmation");
+    const hint = configuration.submit && document.getElementById(element.id + "-submit-hint");
+    const submit = configuration.submit && document.getElementById(configuration.submit);
+    if (configuration.submit && (!input.form || !hint?.matches('[data-bs-toggle="tooltip"]') || !element.contains(hint) || !submit?.matches('button[type="submit"], input[type="submit"]') || submit.closest(".moo-ui") !== owner || submit.form !== input.form)) {
+      throw new TypeError("PasswordRequirements requires a same-form submit Tooltip.");
+    }
+    const initialDisabled = submit?.disabled;
+    const initialTabIndex = hint?.getAttribute("tabindex");
+    const initialTitle = hint?.getAttribute("data-bs-title");
+    const initialRole = hint?.getAttribute("role");
+    const initialLabel = hint?.getAttribute("aria-label");
+    const initialHidden = hint?.hidden;
+    const restoreAttribute = (name, value) => {
+      if (value === null) hint.removeAttribute(name);
+      else hint.setAttribute(name, value);
+    };
+    const submitParent = submit?.parentNode;
+    const submitNext = submit?.nextSibling;
+    const hintParent = hint?.parentNode;
+    const hintNext = hint?.nextSibling;
+    const hintChildren = hint && [...hint.childNodes];
+    const view = document.defaultView;
+    const Tooltip = view.bootstrap?.Tooltip || view.Tooltip;
+    if (submit && (!Tooltip || typeof Tooltip.getInstance !== "function" || typeof Tooltip.getOrCreateInstance !== "function")) {
+      throw new TypeError("PasswordRequirements submit binding requires Bootstrap Tooltip.");
+    }
+    const previousTooltip = hint && Tooltip?.getInstance(hint);
+    const previousTooltipWasEnabled = previousTooltip?._isEnabled;
+    const previousTooltipContent = previousTooltip?._newContent;
+    let tooltip;
+    let gateReady = !submit;
+    let lastTitle;
+    if (submit) {
+      this._listeners.push(() => {
+        submit.disabled = initialDisabled;
+        if (initialTabIndex === null) hint.removeAttribute("tabindex");
+        else hint.setAttribute("tabindex", initialTabIndex);
+        restoreAttribute("data-bs-title", initialTitle);
+        restoreAttribute("role", initialRole);
+        restoreAttribute("aria-label", initialLabel);
+        tooltip?.hide();
+        if (!previousTooltip) tooltip?.dispose();
+        else {
+          tooltip.setContent(previousTooltipContent);
+          if (previousTooltipWasEnabled) tooltip.enable();
+          else tooltip.disable();
+        }
+        submitParent.insertBefore(submit, submitNext?.parentNode === submitParent ? submitNext : null);
+        hintParent.insertBefore(hint, hintNext?.parentNode === hintParent ? hintNext : null);
+        hint.replaceChildren(...hintChildren);
+        hint.hidden = initialHidden;
+      });
+    }
+    const updateSubmit = (states) => {
+      if (!submit) return;
+      gateReady = Boolean(input.value) && states.every((state) => state.met);
+      submit.disabled = !gateReady;
+      hint.tabIndex = gateReady ? -1 : 0;
+      restoreAttribute("role", gateReady ? null : initialRole);
+      restoreAttribute("aria-label", gateReady ? null : initialLabel);
+      const title = states.filter((state) => !state.met && (input.value || !state.warning || state.key === "confirmation")).map((state) => state.label).join(" ");
+      hint.setAttribute("data-bs-title", title || initialTitle);
+      if (gateReady) {
+        tooltip?.hide();
+        tooltip?.disable();
+      } else {
+        tooltip?.enable();
+        if (title !== lastTitle) tooltip?.setContent({ ".tooltip-inner": title || initialTitle });
+      }
+      lastTitle = title;
+    };
+    const show = (node, label, met, warning = false, active = Boolean(input.value)) => {
+      node.textContent = warning ? label : format(met ? messages.met : messages.missing, label);
+      node.hidden = warning && (!active || met);
+      node.classList.toggle("text-body", !warning && met);
+      node.classList.toggle("text-danger", warning);
+      node.dataset.requirementMet = String(met);
+    };
+    const update = () => {
+      gateReady = !submit;
+      if (submit) submit.disabled = true;
+      const states = passwordRequirementStates(input.value, policy);
+      const withinMaximum = Math.max(
+        Array.from(input.value).length,
+        Array.from(input.value.normalize("NFKC")).length
+      ) <= policy.maxlength;
+      let analysis = null;
+      const analysisValue = strip(input.value.normalize("NFKC"), policy.whitespace);
+      if (options.analyze && analysisValue && withinMaximum) {
+        analysis = options.analyze(analysisValue);
+        if (!analysis || typeof analysis.met !== "boolean" || !Number.isInteger(analysis.score) || analysis.score < 0 || analysis.score > 4) {
+          throw new TypeError("Password analysis must synchronously return {met: boolean, score: 0..4}.");
+        }
+      }
+      if (options.analyze) states.push({
+        key: "analysis",
+        label: messages.analysis,
+        met: Boolean(analysis?.met),
+        warning: true
+      });
+      if (confirmation) states.push({
+        key: "confirmation",
+        label: this._originals.get(match).text,
+        warning: true,
+        met: Boolean(confirmation.value) && confirmation.value === input.value
+      });
+      for (const state of states.filter((state2) => state2.key !== "analysis")) show(
+        state.key === "confirmation" ? match : rows.get(state.key),
+        state.label,
+        Boolean(input.value) && state.met,
+        state.warning,
+        state.key === "confirmation" ? Boolean(confirmation.value) : Boolean(input.value)
+      );
+      const missing = states.filter((state) => !state.met).length;
+      const warnings = states.filter((state) => state.warning && !state.met).map((state) => state.label).join(" ");
+      const summaryText = !input.value ? this._originals.get(summary).text : missing ? `${format(messages.remaining, missing)} ${warnings}`.trim() : messages.complete;
+      if (summary.textContent !== summaryText) summary.textContent = summaryText;
+      options.onChange?.(states.map(({ key, met }) => ({ key, met: Boolean(input.value) && met })), Boolean(input.value), analysis?.score ?? null);
+      updateSubmit(states);
+    };
+    instances.set(element, this);
+    try {
+      if (submit) {
+        submitParent.insertBefore(hint, submit);
+        hint.replaceChildren(submit);
+        hint.hidden = false;
+        submit.disabled = true;
+        tooltip = Tooltip?.getOrCreateInstance(hint, { container: owner, html: false, trigger: "hover focus" });
+      }
+      for (const node of [input, confirmation].filter(Boolean)) {
+        for (const event of ["input", "change"]) {
+          node.addEventListener(event, update);
+          this._listeners.push(() => node.removeEventListener(event, update));
+        }
+      }
+      if (input.form) {
+        if (submit) {
+          const guard = (event) => {
+            try {
+              update();
+            } catch (error) {
+              event.preventDefault();
+              event.stopImmediatePropagation();
+              throw error;
+            }
+            if (!gateReady) {
+              event.preventDefault();
+              event.stopImmediatePropagation();
+              hint.focus();
+            }
+          };
+          input.form.addEventListener("submit", guard, true);
+          this._listeners.push(() => input.form.removeEventListener("submit", guard, true));
+        }
+        const reset = () => {
+          clearTimeout(this._resetTimer);
+          this._resetTimer = setTimeout(update, 0);
+        };
+        input.form.addEventListener("reset", reset);
+        this._listeners.push(() => input.form.removeEventListener("reset", reset));
+      }
+      update();
+      element.dataset.requirementsReady = "true";
+      this.ready = Promise.resolve(this);
+    } catch (error) {
+      this.dispose();
+      throw error;
+    }
+  }
+  dispose() {
+    if (instances.get(this._element) !== this) return;
+    clearTimeout(this._resetTimer);
+    for (const remove of this._listeners.splice(0)) remove();
+    for (const [node, original] of this._originals) {
+      node.textContent = original.text;
+      node.className = original.className;
+      node.hidden = original.hidden;
+      if (original.met === null) node.removeAttribute("data-requirement-met");
+      else node.setAttribute("data-requirement-met", original.met);
+    }
+    if (this._initialReady === null) this._element.removeAttribute("data-requirements-ready");
+    else this._element.setAttribute("data-requirements-ready", this._initialReady);
+    instances.delete(this._element);
+    this._originals.clear();
+  }
+}
+export {
+  PasswordRequirements as default,
+  passwordRequirementStates
+};

package/dist/js/sheet.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI sheet.js v1.5.0 (https://wpmoo.org/)
+ * Moo UI sheet.js v2.1.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/sidebar.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI sidebar.js v1.5.0 (https://wpmoo.org/)
+ * Moo UI sidebar.js v2.1.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/slider.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI slider.js v1.5.0 (https://wpmoo.org/)
+ * Moo UI slider.js v2.1.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/state.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI state.js v1.5.0 (https://wpmoo.org/)
+ * Moo UI state.js v2.1.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/table-of-contents.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI table-of-contents.js v1.5.0 (https://wpmoo.org/)
+ * Moo UI table-of-contents.js v2.1.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/toc.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI toc.js v1.5.0 (https://wpmoo.org/)
+ * Moo UI toc.js v2.1.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/release-manifest.json

@@ -3,22 +3,22 @@
     {
       "export": "./moo.css",
       "path": "dist/assets/css/moo.css",
-      "sha256": "7b1796b32d96ab627d055e7bd7b78cf234f7531ba749a5fc9830da5b75bb8667"
+      "sha256": "b59eab8eb8321379f5995c831b17de2984cb90711dbe4fb4cf6ddc879962cb59"
     },
     {
       "export": "./moo-ui.css",
       "path": "dist/assets/css/moo-ui.css",
-      "sha256": "ff0f81860d16e6a36d71eae87c3a51882e937a58de4f77d04f84327d68d9f594"
+      "sha256": "2a898c1c05759626168d736cd999a9abc26ebc675e47187e70b5e0d84d91b85e"
     },
     {
       "export": "./state.js",
       "path": "dist/js/state.js",
-      "sha256": "edddb4704c201edcecc09774457e21a65ac98d7f83be49f791cfb2defbdc2a52"
+      "sha256": "d02e78a71a624a0c8d36f33efc4b5a4fa0d2ac49b329e53994c20ff60c386713"
     }
   ],
   "package": {
     "name": "@wpmoo/ui",
-    "version": "1.5.0"
+    "version": "2.1.0"
   },
   "schemaVersion": 1
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpmoo/ui",
-  "version": "1.5.0",
+  "version": "2.1.0",
   "description": "Bootstrap markup. shadcn feel. A frontend-framework-free component system for server-rendered apps.",
   "license": "MIT",
   "author": "WPMoo (https://wpmoo.org)",
@@ -25,6 +25,7 @@
   },
   "style": "dist/assets/css/moo-ui.css",
   "exports": {
+    "./password-requirements.js": "./dist/js/password-requirements.js",
     "./moo-ui.css": "./dist/assets/css/moo-ui.css",
     "./moo-ui.min.css": "./dist/assets/css/moo-ui.min.css",
     "./moo.css": "./dist/assets/css/moo.css",
@@ -56,6 +57,7 @@
     "./package.json": "./package.json"
   },
   "files": [
+    "dist/js/password-requirements.js",
     "dist/assets/css/moo-ui.css",
     "dist/assets/css/moo-ui.min.css",
     "dist/assets/css/moo.css",
@@ -83,14 +85,18 @@
     "certification.json",
     "README.md",
     "LICENSE",
-    "ASSET_LICENSE.md"
+    "THIRD_PARTY_NOTICES.md"
   ],
   "peerDependencies": {
-    "bootstrap": ">=5.3.0 <5.4"
+    "bootstrap": ">=5.3.0 <5.4",
+    "chart.js": ">=4.6.1 <5"
   },
   "peerDependenciesMeta": {
     "bootstrap": {
       "optional": true
+    },
+    "chart.js": {
+      "optional": true
     }
   },
   "sideEffects": [
@@ -109,7 +115,7 @@
   },
   "devDependencies": {
     "axe-core": "4.14.0",
-    "chart.js": "4.5.1",
+    "chart.js": "4.6.1",
     "esbuild": "0.28.2"
   }
 }

package/scss/layouts/_app.scss

@@ -20,6 +20,12 @@
   border-radius: var(--bs-border-radius-xl);
 }
 
+.wrapper[data-layout="app"][data-shell-mode="document"] {
+  height: auto;
+  min-height: 100svh;
+  overflow: visible;
+}
+
 .wrapper[data-layout="app"] > [data-slot="page"] {
   display: flex;
   min-width: 0;
@@ -75,6 +81,10 @@
   overflow-y: auto;
 }
 
+.wrapper[data-layout="app"][data-shell-mode="document"] > [data-slot="page"] > main {
+  overflow: visible;
+}
+
 .wrapper[data-layout="app"] > [data-slot="page"] > main > :is(
   .container,
   .container-sm,

package/scss/mixins/_banner.scss

@@ -1,5 +1,5 @@
 /*!
- * Moo UI v1.5.0 (https://wpmoo.org/)
+ * Moo UI v2.1.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  *

package/scss/settings/_palette.scss

@@ -1,7 +1,8 @@
 $white: #fff !default;
 $black: #0a0a0a !default;
 
-$headings-font-weight: 600 !default;
+$moo-heading-font-weight: 600 !default;
+$headings-font-weight: var(--moo-heading-font-weight, #{$moo-heading-font-weight}) !default;
 $lead-font-size: 1.125rem !default;
 $lead-font-weight: 400 !default;
 $display-font-sizes: (

package/scss/themes/_theme.scss

@@ -92,6 +92,7 @@ $moo-theme-colors-border-subtle-dark: (
   --moo-chart-4: #{$moo-chart-4};
   --moo-chart-5: #{$moo-chart-5};
   --moo-heading-font-family: var(--#{$prefix}body-font-family);
+  --moo-heading-font-weight: #{$moo-heading-font-weight};
   --moo-small-font-size: #{$moo-small-font-size};
   --moo-paragraph-margin-top: #{$moo-paragraph-margin-top};
   --moo-paragraph-margin-bottom: #{$paragraph-margin-bottom};

package/ASSET_LICENSE.md

@@ -1,19 +0,0 @@
-# WPMoo Visual Asset License
-
-WPMoo-generated visual assets are copyright (c) 2026 WPMoo
-(`wpmoo.org`). All rights reserved.
-
-These assets are not licensed under the repository's MIT source code license
-unless an individual file or directory states otherwise. This includes brand
-assets, component preview images, marketing images, screenshots, generated
-artwork, and other WPMoo-owned image assets under `site/static/images/`.
-
-You may view these assets as part of the Moo UI documentation and demo site.
-You may not copy, redistribute, modify, sell, sublicense, or use them in another
-product, site, template, library, training dataset, or marketing asset without
-prior written permission from WPMoo.
-
-Third-party assets remain under their own licenses. See the
-[version-pinned third-party notices](https://github.com/wpmoo-org/ui/blob/v1.5.0/THIRD_PARTY_NOTICES.md).
-Those notices are repository-only and are intentionally not shipped in the npm
-package.