@wpmoo/ui 1.0.0-rc.8 → 1.0.0-rc.9

package/dist/js/sidebar.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI sidebar.js v1.0.0-rc.8 (https://ui.wpmoo.org/)
+ * Moo UI sidebar.js v1.0.0-rc.9 (https://ui.wpmoo.org/)
  * Copyright 2026 WPMoo (https://wpmoo.org)
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
@@ -8,7 +8,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 
 // src/js/theme-owner.js
 var OWNER_SELECTOR = '.moo-ui[data-bs-theme="light"], .moo-ui[data-bs-theme="dark"]';
-var PORTAL_SELECTOR = "[data-moo-overlay-portal-host]";
+var PORTAL_SELECTOR = "[data-moo-overlay-host]";
 function documentFor(node) {
   if (node?.nodeType === 9) return node;
   if (node?.ownerDocument) return node.ownerDocument;
@@ -249,7 +249,7 @@ var _Sidebar = class _Sidebar {
   _positionDropdown(control) {
     const item = control?.closest?.(".sidebar-menu-item");
     const isHeaderWorkspace = control?.classList.contains("sidebar-menu-button--workspace") && control.closest('[data-slot="sidebar-header"]');
-    const isFooterAccount = control?.classList.contains("sidebar-menu-button--account") && control.closest('[data-slot="sidebar-footer"]');
+    const isFooterAccount = control?.closest(".sidebar-menu-item--account") && control.closest('[data-slot="sidebar-footer"]');
     if (!control || !item || !(isHeaderWorkspace || isFooterAccount) || !this._isDesktop()) {
       this._clearDropdownPosition(control);
       return;

package/dist/js/slider.js

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

package/dist/js/state.js

@@ -0,0 +1,102 @@
+/*!
+ * Moo UI state bootstrap
+ * Copyright 2026 WPMoo (https://wpmoo.org)
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
+ */
+(() => {
+  const ownerDocument = typeof document === "undefined" ? null : document;
+  const owner = ownerDocument?.currentScript?.parentElement;
+  if (!owner) return;
+
+  const view =
+    ownerDocument?.defaultView ||
+    (typeof window === "undefined" ? null : window);
+
+  if (owner.matches?.('.moo-ui[data-bs-theme="light"], .moo-ui[data-bs-theme="dark"]')) {
+    const body = ownerDocument?.body;
+    const documentOwner =
+      owner.dataset?.mooDocumentOwner === "true" &&
+      owner.parentElement === body &&
+      owner === body?.firstElementChild;
+    const normalizeDirection = (value) =>
+      value === "ltr" || value === "rtl" ? value : null;
+    const ownerDirection = normalizeDirection(
+      owner.getAttribute?.("dir") || owner.dir,
+    );
+    const documentDirection = normalizeDirection(
+      ownerDocument?.documentElement?.getAttribute?.("dir") ||
+        ownerDocument?.documentElement?.dir,
+    );
+    owner.__mooStateBaseline = {
+      theme: owner.dataset.bsTheme === "dark" ? "dark" : "light",
+      direction: documentOwner ? documentDirection || "ltr" : ownerDirection,
+    };
+
+    const readPreference = (axis, allowed) => {
+      const dataKey = axis === "theme" ? "mooThemeKey" : "mooDirectionKey";
+      const explicit = owner.dataset?.[dataKey]?.trim();
+      const key = explicit || (documentOwner ? `moo:${axis}` : null);
+      if (!key) return null;
+      try {
+        const value = view?.localStorage?.getItem(key);
+        return allowed.includes(value) ? value : null;
+      } catch (_) {
+        return null;
+      }
+    };
+
+    const systemPrefersDark = () => {
+      try {
+        const matchMedia = view?.matchMedia;
+        if (typeof matchMedia !== "function") return null;
+        return Boolean(
+          matchMedia.call(view, "(prefers-color-scheme: dark)")?.matches,
+        );
+      } catch (_) {
+        return null;
+      }
+    };
+
+    try {
+      const storedTheme = readPreference("theme", ["light", "dark", "system"]);
+      const mediaPrefersDark =
+        storedTheme === "system" ? systemPrefersDark() : null;
+      const resolvedTheme =
+        storedTheme === "dark"
+          ? "dark"
+          : storedTheme === "light"
+            ? "light"
+            : storedTheme === "system" && mediaPrefersDark !== null
+              ? mediaPrefersDark
+                ? "dark"
+                : "light"
+              : owner.dataset.bsTheme === "dark"
+                ? "dark"
+                : "light";
+      owner.dataset.bsTheme = resolvedTheme;
+
+      const storedDirection = readPreference("direction", ["ltr", "rtl"]);
+      if (storedDirection) {
+        if (documentOwner) ownerDocument.documentElement.dir = storedDirection;
+        else owner.dir = storedDirection;
+      }
+    } finally {
+      owner.dataset.mooState = "ready";
+    }
+    return;
+  }
+
+  if (!owner.matches?.('[data-slot="sidebar-wrapper"][data-sidebar-key]')) return;
+  const key = owner.dataset?.sidebarKey;
+  if (!key) return;
+  try {
+    const state = view?.localStorage?.getItem(`moo-sidebar:${key}`);
+    if (state === "expanded" || state === "collapsed") {
+      owner.dataset.sidebarState = state;
+    }
+  } catch (_) {
+    // Restricted browsing contexts may deny localStorage.
+  } finally {
+    owner.dataset.sidebarStateReady = "";
+  }
+})();

package/dist/release-manifest.json

@@ -3,22 +3,22 @@
     {
       "export": "./moo.css",
       "path": "dist/assets/css/moo.css",
-      "sha256": "29c92bd75db1e4990745796aeef4d6a0b3313d1b9d2e3c929f559f8687a5fe6f"
+      "sha256": "9f5228c6387b728efe2f341aea9ff09c193f621e778ac413fee9f1cd84992791"
     },
     {
       "export": "./moo-ui.css",
       "path": "dist/assets/css/moo-ui.css",
-      "sha256": "00db81fad96811182874b9207746a3154adb0f457c965a08e639a04af83f95a4"
+      "sha256": "ca54a5ff1e8a1fa2ac704e3b55e63aa4517353aede35c0bf509c485e6d04a2c6"
     },
     {
-      "export": "./theme-prepaint.js",
-      "path": "dist/js/theme-prepaint.js",
-      "sha256": "e40ce7caa83112498c0819719e63ee8d0f23f58236f02ec038ccabf7a128121a"
+      "export": "./state.js",
+      "path": "dist/js/state.js",
+      "sha256": "094cc7bdce8934b846d77476727fd7627062538612f7fcfa8fbd873e44c5e264"
     }
   ],
   "package": {
     "name": "@wpmoo/ui",
-    "version": "1.0.0-rc.8"
+    "version": "1.0.0-rc.9"
   },
   "schemaVersion": 1
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpmoo/ui",
-  "version": "1.0.0-rc.8",
+  "version": "1.0.0-rc.9",
   "description": "Bootstrap markup. shadcn feel. A frontend-framework-free component system for server-rendered apps.",
   "license": "MIT",
   "author": "WPMoo (https://wpmoo.org)",
@@ -42,7 +42,7 @@
     "./chart.min.js": "./dist/js/chart.min.js",
     "./datepicker.js": "./dist/js/datepicker.js",
     "./datepicker.min.js": "./dist/js/datepicker.min.js",
-    "./theme-prepaint.js": "./dist/js/theme-prepaint.js",
+    "./state.js": "./dist/js/state.js",
     "./release-manifest.json": "./dist/release-manifest.json",
     "./scss/config": "./scss/_config.scss",
     "./scss/moo-ui": "./scss/moo-ui.scss",
@@ -68,7 +68,7 @@
     "dist/js/chart.min.js",
     "dist/js/datepicker.js",
     "dist/js/datepicker.min.js",
-    "dist/js/theme-prepaint.js",
+    "dist/js/state.js",
     "dist/release-manifest.json",
     "scss/*.scss",
     "scss/**/*.scss",

package/scss/components/_field.scss

@@ -74,6 +74,14 @@
   > hr {
     margin-block: 0;
   }
+
+  // A public Bootstrap .row is an explicit layout request from the consumer.
+  // Preserve its responsive columns and let Bootstrap's gutters own spacing
+  // instead of turning the row back into a vertical, gap-managed field stack.
+  &.row {
+    flex-direction: row;
+    gap: 0;
+  }
 }
 
 .field-form {

package/scss/foundations/_scope.scss

@@ -3,6 +3,11 @@
   @import "../foundations/focus";
   @import "../utilities/scroll_fade";
   @import "../layouts/app";
+  @import "../layouts/page_grid";
   @import "../themes/forms";
   @include moo-overlay-backdrop-scoped;
+  :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
+    .display-1, .display-2, .display-3, .display-4, .display-5, .display-6) {
+    font-family: var(--moo-heading-font-family, var(--bs-body-font-family));
+  }
 }

package/scss/layouts/_app.scss

@@ -28,7 +28,6 @@
   min-height: 0;
   flex: 1 1 auto;
   flex-direction: column;
-  overflow-y: auto;
 }
 
 .wrapper[data-layout="app"] > [data-slot="page"] > header,
@@ -46,6 +45,7 @@
   min-height: 0;
   flex: 1 1 auto;
   flex-direction: column;
+  overflow-y: auto;
 }
 
 .wrapper[data-layout="app"] > [data-slot="page"] > main > :is(
@@ -74,4 +74,8 @@
   .wrapper[data-layout="app"][data-shell-mode="contained"] > [data-slot="page"] {
     overflow: visible;
   }
+
+  .wrapper[data-layout="app"][data-shell-mode="contained"] > [data-slot="page"] > main {
+    overflow: visible;
+  }
 }

package/scss/layouts/_page_grid.scss

@@ -0,0 +1,30 @@
+// Opt-in Bootstrap row geometry keyed to the usable Moo Page rail, not the
+// viewport or the optional Sidebar state. The rail itself is the query owner.
+[data-page-container] {
+  container: moo-page / inline-size;
+}
+
+// Keep the compact branch usable in browsers without container queries.
+[data-page-container] [data-page-show-from] {
+  display: none !important;
+}
+
+@each $breakpoint, $min-width in $grid-breakpoints {
+  @if $breakpoint != xs {
+    @container moo-page (min-width: #{$min-width}) {
+      @for $span from 1 through $grid-columns {
+        [data-page-container] .row[data-layout="page-grid"] > [data-page-col-#{$breakpoint}="#{$span}"] {
+          width: percentage(divide($span, $grid-columns));
+        }
+      }
+
+      [data-page-container] [data-page-show-from="#{$breakpoint}"] {
+        display: block !important;
+      }
+
+      [data-page-container] [data-page-hide-from="#{$breakpoint}"] {
+        display: none !important;
+      }
+    }
+  }
+}

package/scss/layouts/app/sidebar/_default.scss

@@ -1,6 +1,6 @@
-// Default App Sidebar variant: attached to the shell edge with one divider.
+// Attached Sidebar variants keep a divider at the shell edge; Inset does not.
 
-.sidebar[data-side="left"] .sidebar-inner {
+.sidebar[data-side="left"]:not([data-variant="inset"]) .sidebar-inner {
   // `side` is a physical placement contract. Keep the divider on the
   // Sidebar/Page boundary when the document direction is RTL as well.
   border-right: var(--bs-border-width) solid var(--moo-sidebar-border);
@@ -21,6 +21,6 @@
   order: 0;
 }
 
-.sidebar[data-side="right"] .sidebar-inner {
+.sidebar[data-side="right"]:not([data-variant="inset"]) .sidebar-inner {
   border-left: var(--bs-border-width) solid var(--moo-sidebar-border);
 }

package/scss/layouts/app/sidebar/_floating.scss

@@ -2,7 +2,10 @@
 // the viewport edge with a margin, border, radius, and shadow.
 
 @include media-breakpoint-up(lg) {
-  .sidebar {
+  // Enable shell motion only after Sidebar has restored its initial state.
+  // Hosts that hydrate after first paint must not animate the correction from
+  // their server/default state to the persisted state.
+  :where(.wrapper[data-layout="app"][data-sidebar-ready]) > .sidebar {
     transition: flex-basis 0.2s ease, width 0.2s ease;
   }
 

package/scss/layouts/app/sidebar/_inset.scss

@@ -14,6 +14,11 @@
     background: var(--bs-body-bg);
   }
 
+  .wrapper[data-layout="app"]:has(> .sidebar[data-variant="inset"]) > [data-slot="page"] > header {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
   .wrapper[data-layout="app"][data-sidebar-state="collapsed"]:has(> .sidebar[data-variant="inset"]) > [data-slot="page"] {
     margin-left: $spacer * 0.5;
   }

package/scss/settings/_forms.scss

@@ -7,7 +7,7 @@ $input-height: 2rem !default;
 $input-line-height: 1.4285714286 !default;
 $input-bg: var(--moo-input-bg, transparent) !default;
 $input-border-color: var(--moo-border) !default;
-$input-border-radius: 0.625rem !default;
+$input-border-radius: var(--bs-border-radius-lg) !default;
 $input-placeholder-color: var(--bs-tertiary-color) !default;
 $input-focus-bg: var(--moo-input-bg, transparent) !default;
 // Bootstrap leaves disabled text-control foregrounds null by default

package/scss/themes/_root.scss

@@ -1,6 +1,7 @@
 .moo-ui[data-bs-theme] {
   @include moo-core-scales;
   @include moo-core-shared;
+  font-family: var(--bs-body-font-family);
 }
 
 .moo-ui[data-bs-theme="light"] {

package/scss/themes/_standalone.scss

@@ -1,5 +1,5 @@
-// A complete document places its resolved owner directly inside body. The
-// owner, rather than body, supplies the viewport-sized foreground surface.
-body > .moo-ui[data-bs-theme] {
+// A complete document's resolved owner supplies the viewport-sized surface.
+// Direct-body overlay hosts share its theme but are infrastructure, not roots.
+body > .moo-ui[data-bs-theme]:not([data-moo-overlay-host]) {
   min-block-size: 100dvh;
 }

package/scss/themes/_theme.scss

@@ -91,6 +91,9 @@ $moo-theme-colors-border-subtle-dark: (
   --moo-chart-3: #{$moo-chart-3};
   --moo-chart-4: #{$moo-chart-4};
   --moo-chart-5: #{$moo-chart-5};
+  // Resolved owners reset this token so nested Moo owners never inherit a
+  // parent owner's heading-font choice.
+  --moo-heading-font-family: var(--#{$prefix}body-font-family);
 }
 
 @mixin moo-core-light {

package/dist/js/theme-prepaint.js

@@ -1,91 +0,0 @@
-/*!
- * Moo UI theme prepaint
- * Copyright 2026 WPMoo (https://wpmoo.org)
- * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
- */
-(() => {
-  const ownerDocument =
-    typeof document === "undefined"
-      ? null
-      : document;
-  const owner = ownerDocument?.currentScript?.parentElement;
-  const ownerSelector =
-    '.moo-ui[data-bs-theme="light"], .moo-ui[data-bs-theme="dark"]';
-
-  if (!owner?.matches?.(ownerSelector)) return;
-
-  const body = ownerDocument?.body;
-  const documentOwner =
-    owner.dataset?.mooDocumentOwner === "true" &&
-    owner.parentElement === body &&
-    owner === body?.firstElementChild;
-  const view =
-    ownerDocument?.defaultView ||
-    (typeof window === "undefined" ? null : window);
-  const normalizeDirection = (value) =>
-    value === "ltr" || value === "rtl" ? value : null;
-  const ownerDirection = normalizeDirection(
-    owner.getAttribute?.("dir") || owner.dir,
-  );
-  const documentDirection = normalizeDirection(
-    ownerDocument?.documentElement?.getAttribute?.("dir") ||
-      ownerDocument?.documentElement?.dir,
-  );
-  owner.__mooPrepaintBaseline = {
-    theme: owner.dataset.bsTheme === "dark" ? "dark" : "light",
-    direction: documentOwner ? documentDirection || "ltr" : ownerDirection,
-  };
-
-  const readPreference = (axis, allowed) => {
-    const dataKey = axis === "theme" ? "mooThemeKey" : "mooDirectionKey";
-    const explicit = owner.dataset?.[dataKey]?.trim();
-    const key = explicit || (documentOwner ? `moo:${axis}` : null);
-    if (!key) return null;
-
-    try {
-      const value = view?.localStorage?.getItem(key);
-      return allowed.includes(value) ? value : null;
-    } catch (_) {
-      return null;
-    }
-  };
-
-  const systemPrefersDark = () => {
-    try {
-      const matchMedia = view?.matchMedia;
-      if (typeof matchMedia !== "function") return null;
-      return Boolean(
-        matchMedia.call(view, "(prefers-color-scheme: dark)")?.matches,
-      );
-    } catch (_) {
-      return null;
-    }
-  };
-
-  try {
-    const storedTheme = readPreference("theme", ["light", "dark", "system"]);
-    const mediaPrefersDark =
-      storedTheme === "system" ? systemPrefersDark() : null;
-    const resolvedTheme =
-      storedTheme === "dark"
-        ? "dark"
-        : storedTheme === "light"
-          ? "light"
-          : storedTheme === "system" && mediaPrefersDark !== null
-            ? mediaPrefersDark
-              ? "dark"
-              : "light"
-            : owner.dataset.bsTheme === "dark"
-              ? "dark"
-              : "light";
-    owner.dataset.bsTheme = resolvedTheme;
-
-    const storedDirection = readPreference("direction", ["ltr", "rtl"]);
-    if (storedDirection) {
-      if (documentOwner) ownerDocument.documentElement.dir = storedDirection;
-      else owner.dir = storedDirection;
-    }
-  } finally {
-    owner.dataset.mooPrepaint = "ready";
-  }
-})();