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

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.6",
+  "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)",
@@ -15,13 +15,13 @@
   "private": false,
   "type": "module",
   "scripts": {
-    "build": ".venv/bin/python build.py",
-    "dev": ".venv/bin/python dev.py",
-    "test": ".venv/bin/python scripts/run-test-tier.py run release",
-    "test:quick": ".venv/bin/python scripts/run-test-tier.py run quick",
-    "test:browser-smoke": ".venv/bin/python scripts/run-test-tier.py run browser-smoke",
-    "test:browser-full": ".venv/bin/python scripts/run-test-tier.py run browser-full",
-    "test:release": ".venv/bin/python scripts/run-test-tier.py run release",
+    "build": ".venv/bin/python3 build.py",
+    "dev": ".venv/bin/python3 dev.py",
+    "test": ".venv/bin/python3 scripts/run-test-tier.py run release",
+    "test:quick": ".venv/bin/python3 scripts/run-test-tier.py run quick",
+    "test:browser-smoke": ".venv/bin/python3 scripts/run-test-tier.py run browser-smoke",
+    "test:browser-full": ".venv/bin/python3 scripts/run-test-tier.py run browser-full",
+    "test:release": ".venv/bin/python3 scripts/run-test-tier.py run release",
     "deploy": "wrangler deploy",
     "preview": "wrangler dev"
   },
@@ -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/_alert.scss

@@ -24,10 +24,9 @@ $moo-alert-dismissible-close-space: $btn-close-width + ($btn-close-padding-x * 2
 .alert-dismissible .btn-close {
   top: auto;
   right: auto;
-  inset-block-start: 50%;
+  inset-block-start: var(--bs-alert-padding-y);
   inset-inline-end: var(--bs-alert-padding-x);
   padding: $btn-close-padding-y $btn-close-padding-x;
-  transform: translateY(-50%);
 }
 
 // The reference's destructive alert keeps the same neutral surface and

package/scss/components/_card.scss

@@ -47,11 +47,11 @@
   border: var(--bs-card-border-width) solid var(--bs-card-border-color);
   box-shadow: var(--bs-card-box-shadow);
 
-  &[data-bs-theme="dark"],
-  :where([data-bs-theme="dark"]) &:not([data-bs-theme="light"]):not([data-bs-theme="light"] *) {
-    --bs-card-bg: color-mix(in srgb, var(--bs-secondary-bg) #{$moo-card-bg-mix-dark}, var(--bs-body-bg));
-    --moo-card-footer-bg: #{$moo-card-footer-bg-dark};
-  }
+}
+
+:scope[data-bs-theme="dark"] .card {
+  --bs-card-bg: color-mix(in srgb, var(--bs-secondary-bg) #{$moo-card-bg-mix-dark}, var(--bs-body-bg));
+  --moo-card-footer-bg: #{$moo-card-footer-bg-dark};
 }
 
 .card--sm {

package/scss/components/_close_button.scss

@@ -14,7 +14,9 @@
   border-width: var(--bs-border-width);
   border-style: var(--bs-border-style);
   border-color: $moo-close-button-border-color;
-  border-radius: var(--bs-border-radius-xl);
+  // Keep the square hit area visually circular in every context, including
+  // modal and offcanvas headers.
+  border-radius: var(--bs-border-radius-pill);
   color: var(--bs-btn-close-color);
   background-image: none;
   transition: $btn-transition;
@@ -31,8 +33,11 @@
 
 // Bootstrap's dark rule filters the whole element to recolor its background
 // image. The glyph above uses currentColor through a mask, so filtering would
-// incorrectly invert the token-driven hover surface as well.
-[data-bs-theme="dark"] .btn-close {
+// incorrectly invert the token-driven hover surface as well. Both resolved
+// owner modes override it so an outer dark owner cannot affect an inner light
+// owner through Bootstrap's global descendant selector.
+:scope[data-bs-theme="light"] .btn-close,
+:scope[data-bs-theme="dark"] .btn-close {
   filter: none;
 }
 

package/scss/components/_dialog.scss

@@ -34,6 +34,22 @@
   gap: calc(var(--bs-modal-padding) * 0.75);
 }
 
+.modal-header:has(> .btn-close) {
+  // Keep the dismiss control in a stable top/end corner, like the reference
+  // dialog surface, while reserving room so long titles cannot run beneath it.
+  position: relative;
+  padding-inline-end: calc(
+    var(--bs-modal-padding) + #{$btn-close-width} + #{$btn-close-padding-x * 2} + 0.5rem
+  );
+}
+
+.modal-header:has(> .btn-close) > .btn-close {
+  position: absolute;
+  inset-block-start: 0.5rem;
+  inset-inline-end: 0.5rem;
+  margin: 0;
+}
+
 .modal--alert {
   --bs-modal-width: 24rem;
   --bs-modal-padding: 1rem;

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 {
@@ -217,8 +227,8 @@
   [data-slot="sidebar-footer"] [data-sidebar-dropdown-positioned] > .dropdown-menu {
     position: fixed !important;
     z-index: $zindex-dropdown;
-    inset-inline-start: var(--moo-sidebar-dropdown-inline-start, auto) !important;
-    inset-inline-end: auto !important;
+    left: var(--moo-sidebar-dropdown-left, auto) !important;
+    right: var(--moo-sidebar-dropdown-right, auto) !important;
     width: var(--moo-dropdown-sidebar-min-width);
     min-width: var(--moo-dropdown-sidebar-min-width);
     margin: 0;
@@ -234,9 +244,4 @@
     inset-block-end: var(--moo-sidebar-dropdown-block-end) !important;
   }
 
-  [data-slot="sidebar"][data-side="right"] [data-slot="sidebar-header"] [data-sidebar-dropdown-positioned] > .dropdown-menu,
-  [data-slot="sidebar"][data-side="right"] [data-slot="sidebar-footer"] [data-sidebar-dropdown-positioned] > .dropdown-menu {
-    inset-inline-start: auto !important;
-    inset-inline-end: var(--moo-sidebar-dropdown-inline-end, auto) !important;
-  }
 }

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/_switch.scss

@@ -6,7 +6,15 @@
   height: $moo-switch-height;
 }
 
-:where([data-bs-theme="dark"]) .form-switch .form-check-input:checked {
+:scope[data-bs-theme="light"] .form-switch .form-check-input:checked {
+  --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
+
+  background-color: var(--moo-primary);
+  border-color: var(--moo-primary);
+  filter: none;
+}
+
+:scope[data-bs-theme="dark"] .form-switch .form-check-input:checked {
   --#{$prefix}form-switch-bg: #{escape-svg($moo-switch-checked-bg-image-dark)};
 
   background-color: var(--moo-primary);
@@ -14,12 +22,12 @@
   filter: none;
 }
 
-.form-switch .form-check-input:focus:active:not(:checked),
-.form-switch .form-check-input:focus:not(:focus-visible):not(:checked) {
+:scope[data-bs-theme="light"] .form-switch .form-check-input:focus:active:not(:checked),
+:scope[data-bs-theme="light"] .form-switch .form-check-input:focus:not(:focus-visible):not(:checked) {
   --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
 }
 
-:where([data-bs-theme="dark"]) .form-switch .form-check-input:focus:active:not(:checked),
-:where([data-bs-theme="dark"]) .form-switch .form-check-input:focus:not(:focus-visible):not(:checked) {
+:scope[data-bs-theme="dark"] .form-switch .form-check-input:focus:active:not(:checked),
+:scope[data-bs-theme="dark"] .form-switch .form-check-input:focus:not(:focus-visible):not(:checked) {
   --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
 }

package/scss/components/_tabs.scss

@@ -21,7 +21,7 @@
   // minimum for normal text (axe caught this in the certification fixture).
   // var(--bs-secondary-color) is not a usable substitute here -- Moo UI's
   // own theme sets --bs-secondary-color: var(--moo-muted-foreground)
-  // (scss/themes/_standalone_root.scss), so it resolves to the exact same
+  // (scss/themes/_root.scss), so it resolves to the exact same
   // failing color. var(--bs-secondary-text-emphasis) is a different,
   // untouched Bootstrap token (Moo UI does not override it) built for
   // accessible colored text against a tinted "subtle" surface -- the same

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,64 +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;
-}
-
-[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;
-}
+// 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.
 
-.sidebar-rail:hover::after {
-  background: var(--moo-sidebar-border);
-}
-
-// 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;
-  }
-
-  .sidebar-wrapper:has([data-sidebar-dropdown-positioned] > .dropdown-menu.show) > .sidebar {
-    position: relative;
-    z-index: $zindex-dropdown;
-  }
-
-  // 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.
-  .sidebar-wrapper:has([data-sidebar-dropdown-positioned] > .dropdown-menu.show) > .sidebar > .sidebar-inner {
-    z-index: $zindex-dropdown;
-  }
-
-  .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] {
-    flex-basis: var(--moo-sidebar-width-icon);
-    width: var(--moo-sidebar-width-icon);
-  }
-
-  .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar-inset {
-    position: relative;
-    z-index: 0;
-  }
-
   [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,
@@ -74,14 +18,18 @@
   }
 
   [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"]:has(.sidebar-menu-button[data-bs-toggle="dropdown"][aria-expanded="true"]) {
-    z-index: $zindex-dropdown;
+    // Keep the collapsed identity trigger above sticky page chrome too. This
+    // selector is more specific than the app-root rule above and otherwise
+    // would lower the Sidebar back to the dropdown layer.
+    z-index: $zindex-fixed + 1;
   }
 
   .sidebar-menu-flyout {
     position: fixed;
     z-index: $zindex-dropdown;
     inset-block-start: var(--moo-sidebar-flyout-block-start);
-    inset-inline-start: var(--moo-sidebar-flyout-inline-start);
+    left: var(--moo-sidebar-flyout-left);
+    right: auto;
     display: flex;
     flex-direction: column;
     min-width: $spacer * 10;
@@ -168,32 +116,3 @@
     display: none;
   }
 }
-
-@include media-breakpoint-down(lg) {
-  .sidebar-rail {
-    display: none;
-  }
-
-  // Contained demos stay inside their preview instead of becoming viewport drawers.
-  .sidebar-wrapper--contained {
-    flex-direction: column;
-    height: auto;
-    min-height: 34rem;
-    overflow: visible;
-  }
-
-  .sidebar-wrapper--contained .sidebar {
-    position: relative;
-    inset: auto;
-    flex: 0 0 auto;
-    width: 100%;
-    height: auto;
-    visibility: visible;
-    transform: none;
-  }
-
-  .sidebar-wrapper--contained .sidebar-inner {
-    height: auto;
-    max-height: none;
-  }
-}