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

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.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;
@@ -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(
@@ -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.7 (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

@@ -0,0 +1,24 @@
+{
+  "artifacts": [
+    {
+      "export": "./moo.css",
+      "path": "dist/assets/css/moo.css",
+      "sha256": "9f5228c6387b728efe2f341aea9ff09c193f621e778ac413fee9f1cd84992791"
+    },
+    {
+      "export": "./moo-ui.css",
+      "path": "dist/assets/css/moo-ui.css",
+      "sha256": "ca54a5ff1e8a1fa2ac704e3b55e63aa4517353aede35c0bf509c485e6d04a2c6"
+    },
+    {
+      "export": "./state.js",
+      "path": "dist/js/state.js",
+      "sha256": "094cc7bdce8934b846d77476727fd7627062538612f7fcfa8fbd873e44c5e264"
+    }
+  ],
+  "package": {
+    "name": "@wpmoo/ui",
+    "version": "1.0.0-rc.9"
+  },
+  "schemaVersion": 1
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpmoo/ui",
-  "version": "1.0.0-rc.7",
+  "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,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",
+    "./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",
     "./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/state.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/_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/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,13 @@
 @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 "../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

@@ -0,0 +1,81 @@
+// 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;
+}
+
+.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;
+  overflow-y: auto;
+}
+
+.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;
+  }
+
+  .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;
+      }
+    }
+  }
+}