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

package/dist/js/sidebar.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI sidebar.js v1.0.0-rc.7 (https://ui.wpmoo.org/)
+ * Moo UI sidebar.js v1.0.0-rc.8 (https://ui.wpmoo.org/)
  * Copyright 2026 WPMoo (https://wpmoo.org)
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
@@ -115,7 +115,7 @@ var _Sidebar = class _Sidebar {
     return this._window.matchMedia(this._config.breakpoint).matches;
   }
   _isCollapsed() {
-    return this._isDesktop() && this._element.dataset.sidebarState === "collapsed";
+    return this._isDesktop() && this._sidebar?.dataset?.collapsible === "icon" && this._element.dataset.sidebarState === "collapsed";
   }
   _trigger(name, detail = {}) {
     return this._element.dispatchEvent(

package/dist/js/slider.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI slider.js v1.0.0-rc.7 (https://ui.wpmoo.org/)
+ * Moo UI slider.js v1.0.0-rc.8 (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/theme-prepaint.js

@@ -0,0 +1,91 @@
+/*!
+ * 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";
+  }
+})();

package/dist/release-manifest.json

@@ -0,0 +1,24 @@
+{
+  "artifacts": [
+    {
+      "export": "./moo.css",
+      "path": "dist/assets/css/moo.css",
+      "sha256": "29c92bd75db1e4990745796aeef4d6a0b3313d1b9d2e3c929f559f8687a5fe6f"
+    },
+    {
+      "export": "./moo-ui.css",
+      "path": "dist/assets/css/moo-ui.css",
+      "sha256": "00db81fad96811182874b9207746a3154adb0f457c965a08e639a04af83f95a4"
+    },
+    {
+      "export": "./theme-prepaint.js",
+      "path": "dist/js/theme-prepaint.js",
+      "sha256": "e40ce7caa83112498c0819719e63ee8d0f23f58236f02ec038ccabf7a128121a"
+    }
+  ],
+  "package": {
+    "name": "@wpmoo/ui",
+    "version": "1.0.0-rc.8"
+  },
+  "schemaVersion": 1
+}

package/package.json

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

package/scss/_components.scss

@@ -25,10 +25,6 @@
 @import "bootstrap/scss/offcanvas";
 @import "bootstrap/scss/helpers/color-bg";
 
-// Moo component support
-@import "foundations/focus";
-@import "utilities/scroll_fade";
-
 // Moo components
 @import "components/kbd";
 @import "components/input";
@@ -36,6 +32,7 @@
 @import "components/select";
 @import "components/input_group";
 @import "components/button";
+@import "components/search_trigger";
 @import "components/close_button";
 @import "components/button_group";
 @import "components/toggle_group";

package/scss/components/_dropdown.scss

@@ -167,6 +167,16 @@
   min-width: #{unquote("max(100%, var(--moo-dropdown-sidebar-min-width))")};
 }
 
+// Header identity menus reuse the Sidebar account-menu body. Keep the same
+// comfortable width when the shared body is hosted by the global navbar
+// instead of a Sidebar slot; ordinary Header dropdowns remain content-sized.
+// The trigger marker is the integration contract, so Dropdown does not reach
+// into Sidebar's private class namespace to identify the menu body.
+[data-identity-trigger="1"] + .dropdown-menu {
+  --moo-dropdown-sidebar-min-width: #{$moo-dropdown-sidebar-min-width};
+  min-width: var(--moo-dropdown-sidebar-min-width);
+}
+
 @include media-breakpoint-down(sm) {
   [data-slot="sidebar-header"] .dropend > .dropdown-menu,
   [data-slot="sidebar-footer"] .dropend > .dropdown-menu {

package/scss/components/_search_trigger.scss

@@ -0,0 +1,62 @@
+// Shared command/search trigger composition. The host supplies the semantic
+// button markup and behavior; Core owns only the reusable visual contract.
+.search-trigger {
+  width: $moo-search-trigger-width;
+  max-width: 100%;
+  flex: 0 1 $moo-search-trigger-width;
+  min-width: 0;
+  justify-content: space-between;
+  height: $moo-search-trigger-height;
+  padding: $moo-search-trigger-padding-y $moo-search-trigger-padding-x;
+  color: var(--bs-secondary-color);
+  border: var(--bs-border-width) solid $moo-search-trigger-border-color;
+  border-radius: var(--bs-border-radius);
+  background: color-mix(in srgb, var(--bs-secondary-bg) 55%, var(--bs-body-bg));
+  font-size: $font-size-base;
+  font-weight: $font-weight-normal;
+  box-shadow: none;
+}
+
+.search-trigger:hover {
+  color: var(--bs-secondary-color);
+  border-color: $moo-search-trigger-border-color;
+  background: color-mix(in srgb, var(--bs-secondary-bg) 78%, var(--bs-body-bg));
+}
+
+.search-trigger:focus-visible {
+  color: var(--bs-secondary-color);
+  border-color: $moo-search-trigger-border-color;
+  background: color-mix(in srgb, var(--bs-secondary-bg) 78%, var(--bs-body-bg));
+}
+
+.search-trigger__label {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: $moo-search-trigger-label-gap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.search-trigger__shortcut {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: $moo-search-trigger-shortcut-gap;
+  margin-inline-start: auto;
+}
+
+@include media-breakpoint-up(lg) {
+  .search-trigger {
+    width: $moo-search-trigger-width-lg;
+    flex-basis: $moo-search-trigger-width-lg;
+  }
+}
+
+@include media-breakpoint-up(xxl) {
+  .search-trigger {
+    width: $moo-search-trigger-width-xxl;
+    flex-basis: $moo-search-trigger-width-xxl;
+  }
+}

package/scss/components/_sidebar.scss

@@ -1,7 +1,6 @@
 // Bootstrap has no native sidebar, so this owned selector namespace is split
 // by responsibility while preserving one deterministic emission order.
-@import "sidebar/layout";
+@import "sidebar/base";
 @import "sidebar/menus";
 @import "sidebar/identity";
-@import "sidebar/inset";
 @import "sidebar/collapsed";

package/scss/components/sidebar/_base.scss

@@ -0,0 +1,93 @@
+// Bootstrap has no native sidebar, so this owned sidebar selector namespace
+// provides the inner surface and anatomy. The App layout owns the outer
+// <aside>, placement, width, visual variant, and collapse mode.
+
+.sidebar-inner {
+  position: sticky;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100svh;
+  max-height: 100svh;
+  background: var(--moo-sidebar);
+}
+
+.sidebar-header,
+.sidebar-footer {
+  display: flex;
+  flex-direction: column;
+  gap: $spacer * 0.25;
+  padding: $spacer * 0.5;
+}
+
+.sidebar-content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: $spacer * 0.5;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.sidebar-input {
+  width: 100%;
+  padding: $spacer * 0.25;
+}
+
+.sidebar-separator {
+  display: flex;
+}
+
+.sidebar-menu-skeleton {
+  display: flex;
+  align-items: center;
+  gap: $spacer * 0.25;
+  min-height: $spacer * 2;
+  padding-inline: $spacer * 0.5;
+}
+
+.sidebar-menu-skeleton__icon {
+  width: $spacer;
+  height: $spacer;
+}
+
+.sidebar-menu-skeleton__line {
+  flex: 1 1 auto;
+}
+
+.sidebar-group {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: $spacer * 0.5;
+}
+
+.sidebar-group-content {
+  display: block;
+}
+
+.sidebar-group-content--inline {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: $spacer * 0.25;
+}
+
+.sidebar-group-label {
+  display: flex;
+  align-items: center;
+  height: $spacer * 2;
+  padding-inline: $spacer * 0.5;
+  color: var(--moo-muted-foreground);
+  font-size: $font-size-base * 0.857;
+  font-weight: $font-weight-medium;
+}
+
+// Reserve room so a long label doesn't run under the absolutely positioned
+// group action button (see .sidebar-group-action below). A descendant match
+// covers both a group action placed directly in .sidebar-group and one
+// nested inside .sidebar-group-content alongside the label.
+.sidebar-group:has(.sidebar-group-action) .sidebar-group-label {
+  padding-inline-end: $spacer * 2.5;
+}

package/scss/components/sidebar/_collapsed.scss

@@ -1,65 +1,8 @@
-// Rail: a thin toggle strip straddling the sidebar's inline-end edge.
-.sidebar-rail {
-  position: absolute;
-  inset-block: 0;
-  inset-inline-end: 0;
-  z-index: 20;
-  width: $spacer;
-  padding: 0;
-  transform: translateX(50%);
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-}
-
-// Read the Sidebar's computed direction so this remains valid inside the
-// resolved-owner @scope as well as under a full-document html[dir] owner.
-.sidebar:dir(rtl) .sidebar-rail {
-  transform: translateX(-50%);
-}
-
-.sidebar-rail::after {
-  content: "";
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: 50%;
-  width: var(--bs-border-width);
-  background: transparent;
-  transition: background 0.15s ease;
-}
-
-.sidebar-rail:hover::after {
-  background: var(--moo-sidebar-border);
-}
+// Collapsed-to-icon inner state (desktop). App owns the outer shell width,
+// rail, stacking, and responsive placement; Sidebar owns the inner content
+// visibility and flyout anatomy.
 
-// Collapsed-to-icon rail (desktop). Text, labels, and the rail's disclosure
-// chevrons hide; every remaining control centers on its icon.
 @include media-breakpoint-up(lg) {
-  .sidebar {
-    position: relative;
-  }
-
-  .wrapper[data-layout="app"]:has([data-sidebar-dropdown-positioned] > .dropdown-menu.show) > .sidebar {
-    position: relative;
-    // Catalog page headers are sticky at $zindex-fixed. The Sidebar root must
-    // sit above that page-level stacking context while an identity menu is
-    // open, otherwise the workspace menu is painted underneath the header
-    // even though the menu itself is fixed and has dropdown z-index.
-    z-index: $zindex-fixed + 1;
-  }
-
-  // The sticky inner surface is its own stacking context. Elevate that
-  // context while an identity menu is open so the rail's hover indicator
-  // remains behind the fixed dropdown instead of painting across it.
-  .wrapper[data-layout="app"]:has([data-sidebar-dropdown-positioned] > .dropdown-menu.show) > .sidebar > .sidebar-inner {
-    z-index: $zindex-fixed + 1;
-  }
-
-  .wrapper[data-layout="app"][data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] {
-    flex-basis: var(--moo-sidebar-width-icon);
-    width: var(--moo-sidebar-width-icon);
-  }
-
   [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-group-label,
   [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button__text,
   [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button__subtitle,
@@ -173,24 +116,3 @@
     display: none;
   }
 }
-
-@include media-breakpoint-down(lg) {
-  .sidebar-rail {
-    display: none;
-  }
-
-  .wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar {
-    position: relative;
-    inset: auto;
-    flex: 0 0 auto;
-    width: 100%;
-    height: auto;
-    visibility: visible;
-    transform: none;
-  }
-
-  .wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar-inner {
-    height: auto;
-    max-height: none;
-  }
-}

package/scss/foundations/_scope.scss

@@ -1,5 +1,8 @@
 @scope (.moo-ui) to (:where(.moo-ui[data-bs-theme="light"], .moo-ui[data-bs-theme="dark"])) {
   @import "../components";
+  @import "../foundations/focus";
+  @import "../utilities/scroll_fade";
+  @import "../layouts/app";
   @import "../themes/forms";
   @include moo-overlay-backdrop-scoped;
 }

package/scss/layouts/_app.scss

@@ -0,0 +1,77 @@
+// Application layout owns the shell and page geometry.
+// It is intentionally separate from component surfaces such as Sidebar.
+
+@import "app/sidebar/base";
+@import "app/sidebar/default";
+@import "app/sidebar/floating";
+@import "app/sidebar/inset";
+
+.wrapper[data-layout="app"] {
+  display: flex;
+  width: 100%;
+  height: 100svh;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.wrapper[data-layout="app"][data-shell-mode="contained"] {
+  min-height: 0;
+  height: 34rem;
+  overflow: hidden;
+  border: var(--bs-border-width) solid var(--moo-border);
+  border-radius: var(--bs-border-radius-xl);
+}
+
+.wrapper[data-layout="app"] > [data-slot="page"] {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.wrapper[data-layout="app"] > [data-slot="page"] > header,
+.wrapper[data-layout="app"] > [data-slot="page"] > main,
+.wrapper[data-layout="app"] > [data-slot="page"] > footer {
+  flex: 0 0 auto;
+}
+
+// The page main region owns the space between the optional header and footer.
+// Keep the Bootstrap rail as the flex column too, so app previews and real
+// shells can give their caller content a full-height surface without adding
+// layout-specific height values.
+.wrapper[data-layout="app"] > [data-slot="page"] > main {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+.wrapper[data-layout="app"] > [data-slot="page"] > main > :is(
+  .container,
+  .container-sm,
+  .container-md,
+  .container-lg,
+  .container-xl,
+  .container-xxl,
+  .container-fluid
+) {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+@include media-breakpoint-down(lg) {
+  .wrapper[data-layout="app"][data-shell-mode="contained"] {
+    flex-direction: column;
+    height: auto;
+    min-height: 0;
+    overflow: visible;
+  }
+
+  .wrapper[data-layout="app"][data-shell-mode="contained"] > [data-slot="page"] {
+    overflow: visible;
+  }
+}

package/scss/layouts/app/sidebar/_base.scss

@@ -0,0 +1,117 @@
+// Shared App-owned Sidebar shell geometry. Sidebar's component partials own
+// only the inner surface and navigation anatomy.
+
+.sidebar {
+  --moo-sidebar-width: #{$moo-sidebar-width};
+  --moo-sidebar-width-icon: #{$moo-sidebar-width-icon};
+  --bs-offcanvas-width: var(--moo-sidebar-width);
+  flex: 0 0 var(--moo-sidebar-width);
+  width: var(--moo-sidebar-width);
+  color: var(--moo-sidebar-foreground);
+}
+
+// Rail: a thin toggle strip straddling the Sidebar's inline-end edge.
+.sidebar-rail {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  z-index: 20;
+  width: $spacer;
+  padding: 0;
+  transform: translateX(50%);
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+// Read the Sidebar's computed direction so this remains valid inside the
+// resolved-owner @scope as well as under a full-document html[dir] owner.
+.sidebar:dir(rtl) .sidebar-rail {
+  transform: translateX(-50%);
+}
+
+.sidebar-rail::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 50%;
+  width: var(--bs-border-width);
+  background: transparent;
+  transition: background 0.15s ease;
+}
+
+.sidebar-rail:hover::after {
+  background: var(--moo-sidebar-border);
+}
+
+.wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar-inner {
+  position: relative;
+  height: 100%;
+  max-height: 100%;
+}
+
+// The outer shell owns stacking, collapse width, and the contained-shell
+// geometry. Inner collapsed content remains in components/sidebar/_collapsed.
+@include media-breakpoint-up(lg) {
+  .sidebar {
+    position: relative;
+  }
+
+  // `offcanvas` is a collapsible mode, not a visual Sidebar variant. On
+  // desktop the App keeps the shell in normal flow and uses the shared App
+  // state attribute to collapse the column; below lg Bootstrap's native
+  // Offcanvas plugin continues to own the drawer transition.
+  .sidebar.offcanvas-lg[data-collapsible="offcanvas"] {
+    visibility: visible;
+    transform: none;
+  }
+
+  .wrapper[data-layout="app"][data-sidebar-state="collapsed"] > .sidebar.offcanvas-lg[data-collapsible="offcanvas"] {
+    flex-basis: 0;
+    width: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+
+  .wrapper[data-layout="app"]:has([data-sidebar-dropdown-positioned] > .dropdown-menu.show) > .sidebar {
+    position: relative;
+    // Catalog page headers are sticky at $zindex-fixed. The Sidebar root must
+    // sit above that page-level stacking context while an identity menu is
+    // open, otherwise the workspace menu is painted underneath the header
+    // even though the menu itself is fixed and has dropdown z-index.
+    z-index: $zindex-fixed + 1;
+  }
+
+  // The sticky inner surface is its own stacking context. Elevate that
+  // context while an identity menu is open so the rail's hover indicator
+  // remains behind the fixed dropdown instead of painting across it.
+  .wrapper[data-layout="app"]:has([data-sidebar-dropdown-positioned] > .dropdown-menu.show) > .sidebar > .sidebar-inner {
+    z-index: $zindex-fixed + 1;
+  }
+
+  .wrapper[data-layout="app"][data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] {
+    flex-basis: var(--moo-sidebar-width-icon);
+    width: var(--moo-sidebar-width-icon);
+  }
+}
+
+@include media-breakpoint-down(lg) {
+  .sidebar-rail {
+    display: none;
+  }
+
+  .wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar {
+    position: relative;
+    inset: auto;
+    flex: 0 0 auto;
+    width: 100%;
+    height: auto;
+    visibility: visible;
+    transform: none;
+  }
+
+  .wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar-inner {
+    height: auto;
+    max-height: none;
+  }
+}