@wpmoo/ui 2.0.0 → 2.1.1

package/dist/js/password-requirements.js

@@ -1,10 +1,18 @@
 /*!
- * Moo UI password-requirements.js v2.0.0 (https://wpmoo.org/)
+ * Moo UI password-requirements.js v2.1.1 (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;
@@ -45,10 +53,11 @@ class PasswordRequirements {
     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") {
+    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 = [];
@@ -137,7 +146,7 @@ class PasswordRequirements {
       lastTitle = title;
     };
     const show = (node, label, met, warning = false, active = Boolean(input.value)) => {
-      node.textContent = warning ? label : (met ? "\u2713 " : "\u2014 ") + label;
+      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);
@@ -161,7 +170,7 @@ class PasswordRequirements {
       }
       if (options.analyze) states.push({
         key: "analysis",
-        label: "Host password analysis must pass.",
+        label: messages.analysis,
         met: Boolean(analysis?.met),
         warning: true
       });
@@ -180,7 +189,7 @@ class PasswordRequirements {
       );
       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 ? `Remaining: ${missing} ${warnings}`.trim() : "Shown checks met. Final validation happens on submit.";
+      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);

package/dist/js/sheet.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI sheet.js v2.0.0 (https://wpmoo.org/)
+ * Moo UI sheet.js v2.1.1 (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 v2.0.0 (https://wpmoo.org/)
+ * Moo UI sidebar.js v2.1.1 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
@@ -45,6 +45,14 @@ __name(ownerPortalRoot, "ownerPortalRoot");
 
 // src/js/components/sidebar.js
 var instances = /* @__PURE__ */ new WeakMap();
+var FLYOUT_FOCUSABLE_SELECTOR = "a[href], button, input, select, textarea, [tabindex]";
+function flyoutFocusables(flyout) {
+  const view = flyout.ownerDocument.defaultView;
+  return [...flyout.querySelectorAll(FLYOUT_FOCUSABLE_SELECTOR)].filter(
+    (element) => !element.matches(":disabled") && element.tabIndex >= 0 && !element.closest("[hidden], [inert]") && element.getClientRects().length > 0 && view.getComputedStyle(element).visibility === "visible"
+  );
+}
+__name(flyoutFocusables, "flyoutFocusables");
 var _Sidebar = class _Sidebar {
   static getInstance(element) {
     return element?.nodeType === 1 ? instances.get(element) || null : null;
@@ -472,8 +480,38 @@ var _Sidebar = class _Sidebar {
       this._closeFlyouts();
     } else {
       this._openFlyout(item);
+      if (event.detail === 0) {
+        if (this._flyout) {
+          flyoutFocusables(this._flyout)[0]?.focus();
+        }
+      }
     }
   }
+  // The flyout lives in a portal, away from its trigger, so Escape and Tab
+  // out of it return to the trigger instead of wandering. Tab between its
+  // items stays native; a key a flyout control already handled is left alone.
+  _handleFlyoutKeydown(event) {
+    const owner = this._flyoutOwner;
+    if (event.defaultPrevented || !this._flyout || !owner || !(event.key === "Escape" || event.key === "Tab")) {
+      return false;
+    }
+    const inFlyout = this._flyout.contains(event.target);
+    if (!inFlyout && !(event.key === "Escape" && owner.contains(event.target))) {
+      return false;
+    }
+    if (event.key === "Tab") {
+      const items = flyoutFocusables(this._flyout);
+      const edge = event.shiftKey ? items[0] : items[items.length - 1];
+      if (edge && event.target !== edge) {
+        return false;
+      }
+    }
+    event.preventDefault();
+    const trigger = owner.querySelector(":scope > .sidebar-menu-sub-trigger");
+    this._closeFlyouts();
+    trigger?.focus();
+    return true;
+  }
   _handleOutsideFlyoutClick(event) {
     if (!this._flyout) {
       return;
@@ -485,6 +523,9 @@ var _Sidebar = class _Sidebar {
     }
   }
   _handleShortcut(event) {
+    if (this._handleFlyoutKeydown(event)) {
+      return;
+    }
     const target = event.target;
     const isEditable = target instanceof this._window.Element && (target.matches("input, textarea, select") || target.isContentEditable);
     if (event.defaultPrevented || event.isComposing || isEditable || !this._config.keyboard || !(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== "b" || !this._isDesktop()) {

package/dist/js/slider.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI slider.js v2.0.0 (https://wpmoo.org/)
+ * Moo UI slider.js v2.1.1 (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 v2.0.0 (https://wpmoo.org/)
+ * Moo UI state.js v2.1.1 (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 v2.0.0 (https://wpmoo.org/)
+ * Moo UI table-of-contents.js v2.1.1 (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 v2.0.0 (https://wpmoo.org/)
+ * Moo UI toc.js v2.1.1 (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": "d11bbace049bdcc51c609e7c3cfc255aa51cd8ae0ca67861abe632b5403d48d0"
+      "sha256": "2c98f8a15fdd14b6749831dbe78edfeb8998f5cfc017733164efacf93b16db11"
     },
     {
       "export": "./moo-ui.css",
       "path": "dist/assets/css/moo-ui.css",
-      "sha256": "9cecb108344be63165a063e6a088657f7714ea7305aa0cc0e85e58474066f154"
+      "sha256": "afca34860a8a9cb3bc3ebf4b5d22d687b26d7cadac0dace6224e44da28f24874"
     },
     {
       "export": "./state.js",
       "path": "dist/js/state.js",
-      "sha256": "58307028fc5f06a83620a335f2de13fea3ad3959b6a9f9794d0d443b43b48acd"
+      "sha256": "adb29ff6ee521414f8975d7b4240f7aeb39dc7c6a59349fc6c95591b5b1f109d"
     }
   ],
   "package": {
     "name": "@wpmoo/ui",
-    "version": "2.0.0"
+    "version": "2.1.1"
   },
   "schemaVersion": 1
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpmoo/ui",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "Bootstrap markup. shadcn feel. A frontend-framework-free component system for server-rendered apps.",
   "license": "MIT",
   "author": "WPMoo (https://wpmoo.org)",

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 v2.0.0 (https://wpmoo.org/)
+ * Moo UI v2.1.1 (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};