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

package/dist/js/sidebar.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI sidebar.js v1.0.0-rc.4 (https://ui.wpmoo.org/)
+ * Moo UI sidebar.js v1.0.0-rc.6 (https://ui.wpmoo.org/)
  * Copyright 2026 WPMoo (https://wpmoo.org)
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
@@ -230,7 +230,9 @@ export default class Sidebar {
     }
     delete item.dataset.sidebarDropdownPositioned;
     item.style.removeProperty("--moo-sidebar-dropdown-block-start");
+    item.style.removeProperty("--moo-sidebar-dropdown-block-end");
     item.style.removeProperty("--moo-sidebar-dropdown-inline-start");
+    item.style.removeProperty("--moo-sidebar-dropdown-inline-end");
   }
 
   _closeDropdowns(exceptControl = null) {
@@ -259,7 +261,10 @@ export default class Sidebar {
     const isHeaderWorkspace =
       control?.classList.contains("sidebar-menu-button--workspace") &&
       control.closest('[data-slot="sidebar-header"]');
-    if (!control || !item || !isHeaderWorkspace || !this._isDesktop()) {
+    const isFooterAccount =
+      control?.classList.contains("sidebar-menu-button--account") &&
+      control.closest('[data-slot="sidebar-footer"]');
+    if (!control || !item || !(isHeaderWorkspace || isFooterAccount) || !this._isDesktop()) {
       this._clearDropdownPosition(control);
       return;
     }
@@ -267,18 +272,41 @@ export default class Sidebar {
     this._closeFlyouts();
     const rect = control.getBoundingClientRect();
     const gap = 4;
-    const inlineStart =
-      this._root.dir === "rtl"
+    const sidebar = control.closest('[data-slot="sidebar"]');
+    const side = sidebar?.dataset.side || "left";
+    const isRtl = this._root.dir === "rtl";
+    if (side === "right") {
+      const inlineEnd = isRtl
+        ? rect.right + gap
+        : this._window.innerWidth - rect.left + gap;
+      item.style.setProperty(
+        "--moo-sidebar-dropdown-inline-end",
+        `${Math.round(inlineEnd)}px`
+      );
+      item.style.removeProperty("--moo-sidebar-dropdown-inline-start");
+    } else {
+      const inlineStart = isRtl
         ? this._window.innerWidth - rect.left + gap
         : rect.right + gap;
-    item.style.setProperty(
-      "--moo-sidebar-dropdown-block-start",
-      `${Math.round(rect.bottom + gap)}px`
-    );
-    item.style.setProperty(
-      "--moo-sidebar-dropdown-inline-start",
-      `${Math.round(inlineStart)}px`
-    );
+      item.style.setProperty(
+        "--moo-sidebar-dropdown-inline-start",
+        `${Math.round(inlineStart)}px`
+      );
+      item.style.removeProperty("--moo-sidebar-dropdown-inline-end");
+    }
+    if (isHeaderWorkspace) {
+      item.style.setProperty(
+        "--moo-sidebar-dropdown-block-start",
+        `${Math.round(rect.bottom + gap)}px`
+      );
+      item.style.removeProperty("--moo-sidebar-dropdown-block-end");
+    } else {
+      item.style.setProperty(
+        "--moo-sidebar-dropdown-block-end",
+        `${Math.round(this._window.innerHeight - rect.top + gap)}px`
+      );
+      item.style.removeProperty("--moo-sidebar-dropdown-block-start");
+    }
     item.dataset.sidebarDropdownPositioned = "";
   }
 

package/dist/js/slider.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpmoo/ui",
-  "version": "1.0.0-rc.4",
+  "version": "1.0.0-rc.6",
   "description": "Bootstrap markup. shadcn feel. A frontend-framework-free component system for server-rendered apps.",
   "license": "MIT",
   "author": "WPMoo (https://wpmoo.org)",
@@ -17,7 +17,11 @@
   "scripts": {
     "build": ".venv/bin/python build.py",
     "dev": ".venv/bin/python dev.py",
-    "test": ".venv/bin/python -m unittest discover -s tests -v",
+    "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",
     "deploy": "wrangler deploy",
     "preview": "wrangler dev"
   },
@@ -94,7 +98,7 @@
   "devDependencies": {
     "axe-core": "4.13.0",
     "chart.js": "4.5.1",
-    "esbuild": "0.28.1",
+    "esbuild": "0.28.2",
     "wrangler": "^4.120.0"
   }
 }

package/scss/components/_accordion.scss

@@ -57,3 +57,9 @@
 .accordion-flush .accordion-button {
   font-weight: $font-weight-medium;
 }
+
+// A card owns its own surface, so a nested accordion must let that surface
+// show through instead of painting Bootstrap's body background on top of it.
+.card .accordion {
+  --bs-accordion-bg: #{$moo-accordion-contained-bg};
+}

package/scss/components/_button_group.scss

@@ -12,6 +12,36 @@
   unicode-bidi: plaintext;
 }
 
+// Bootstrap raises hovered, focused, and active group buttons above siblings
+// so the current border wins the shared seam. In a mixed-emphasis group (for
+// example primary + outline) pointer interaction paints one pixel into the
+// neighbor and reads like a width jump. Keep keyboard focus, active classes,
+// and checked inputs stacked, but let plain pointer hover/click use DOM order
+// so the joined edge stays visually stable.
+.btn-group > .btn:hover:not(:focus-visible):not(.active),
+.btn-group > .btn:focus:not(:focus-visible):not(.active),
+.btn-group > .btn:active:not(:focus-visible):not(.active),
+.btn-group-vertical > .btn:hover:not(:focus-visible):not(.active),
+.btn-group-vertical > .btn:focus:not(:focus-visible):not(.active),
+.btn-group-vertical > .btn:active:not(:focus-visible):not(.active) {
+  z-index: auto;
+}
+
+.btn-group > .btn-check:checked + .btn:hover,
+.btn-group > .btn-check:focus + .btn:hover,
+.btn-group-vertical > .btn-check:checked + .btn:hover,
+.btn-group-vertical > .btn-check:focus + .btn:hover {
+  z-index: 1;
+}
+
+// A button group is one compound control surface; pressing one segment should
+// not translate that segment away from its joined border while siblings stay
+// still. The active color change remains as the press affordance.
+.btn-group > .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active,
+.btn-group-vertical > .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
+  transform: none;
+}
+
 // Icon buttons in button groups should stay square, not stretch to fill
 // the group width (Bootstrap's flex: 1 1 auto makes them rectangular).
 .btn-group > .btn-icon,

package/scss/components/_card.scss

@@ -7,7 +7,7 @@
 .card {
   --bs-card-bg: color-mix(in srgb, var(--bs-secondary-bg) #{$moo-card-bg-mix}, var(--bs-body-bg));
   --bs-card-color: var(--moo-foreground);
-  --bs-card-border-color: color-mix(in srgb, var(--bs-body-color) #{$moo-card-border-mix}, #{$moo-card-border-mix-base});
+  --bs-card-border-color: var(--moo-border);
   // The reference uses a 14px corner; Bootstrap's shared radius-xl is the
   // closest token and wins the delta (12px here) per the token-first rule.
   --bs-card-border-radius: var(--bs-border-radius-xl);

package/scss/components/_datatable.scss

@@ -12,6 +12,7 @@
 // visible content changed.
 .datatable {
   --moo-datatable-min-width: #{$moo-datatable-min-width};
+  --moo-datatable-actions-cell-bg: #{$moo-datatable-actions-cell-bg};
   --moo-datatable-actions-cell-fade-width: #{$moo-datatable-actions-cell-fade-width};
   --moo-datatable-card-label-width: #{$moo-datatable-card-label-width};
   --moo-datatable-frame-header-min-height: #{$moo-datatable-frame-header-min-height};
@@ -24,6 +25,10 @@
   --moo-datatable-bulk-actions-bottom: #{$moo-datatable-bulk-actions-bottom};
 }
 
+.card .datatable {
+  --moo-datatable-actions-cell-bg: var(--bs-card-bg);
+}
+
 .datatable-table {
   table-layout: fixed;
 }
@@ -75,7 +80,7 @@
   background: linear-gradient(
     90deg,
     transparent 0,
-    var(--bs-body-bg) var(--moo-datatable-actions-cell-fade-width)
+    var(--moo-datatable-actions-cell-bg) var(--moo-datatable-actions-cell-fade-width)
   );
 }
 
@@ -84,7 +89,7 @@
   background: linear-gradient(
     270deg,
     transparent 0,
-    var(--bs-body-bg) var(--moo-datatable-actions-cell-fade-width)
+    var(--moo-datatable-actions-cell-bg) var(--moo-datatable-actions-cell-fade-width)
   );
 }
 
@@ -172,6 +177,15 @@
   width: 100%;
 }
 
+// A filter menu is a direct child so Bootstrap can anchor it to the trigger.
+// Clip the joined control while the menu is closed, matching the normal
+// input-group surface; release that clipping only while the menu is open so
+// the positioned dropdown can escape the control without leaking focus or
+// child paint past its rounded border.
+.datatable-searchbar:not(:has(> .dropdown-menu.show)) {
+  overflow: hidden;
+}
+
 .datatable-searchbar .datatable-search {
   flex: 1 1 auto;
   max-width: none;
@@ -184,7 +198,9 @@
   position: absolute;
   inset-block-start: 50%;
   inset-inline-start: 0.625rem;
-  z-index: 2;
+  // Bootstrap raises a focused form control to z-index: 5. Keep the
+  // decorative icon above that opaque surface so focus does not hide it.
+  z-index: 6;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -735,6 +751,14 @@
   background-color: var(--moo-muted-surface);
 }
 
+// Sticky action cells paint a gradient instead of using the row's
+// background-color, so selected rows need the same surface at the opaque end
+// of that fade.
+.datatable-row-selected > [data-datatable-column="actions"] {
+  --moo-datatable-actions-cell-bg: var(--moo-muted-surface);
+  background: var(--moo-muted-surface);
+}
+
 .datatable-card.datatable-row-selected {
   border-color: var(--moo-border);
   background-color: var(--moo-muted-surface);

package/scss/components/_dropdown.scss

@@ -188,15 +188,55 @@
   }
 }
 
+// The lg Offcanvas breakpoint still renders the sidebar as a drawer on
+// tablets. Keep identity menus inside that drawer until the desktop fixed
+// overlay contract becomes active.
+@include media-breakpoint-between(sm, lg) {
+  [data-slot="sidebar-header"] .dropend > .dropdown-menu,
+  [data-slot="sidebar-footer"] .dropend > .dropdown-menu {
+    left: 0 !important;
+    right: 0 !important;
+    min-width: 100%;
+    margin: 0;
+    transform: none !important;
+  }
+
+  [data-slot="sidebar-header"] .dropend > .dropdown-menu {
+    top: calc(100% + #{$spacer * 0.25}) !important;
+    bottom: auto !important;
+  }
+
+  [data-slot="sidebar-footer"] .dropend > .dropdown-menu {
+    top: auto !important;
+    bottom: calc(100% + #{$spacer * 0.25}) !important;
+  }
+}
+
 @include media-breakpoint-up(lg) {
-  [data-slot="sidebar-header"] [data-sidebar-dropdown-positioned] > .dropdown-menu {
+  [data-slot="sidebar-header"] [data-sidebar-dropdown-positioned] > .dropdown-menu,
+  [data-slot="sidebar-footer"] [data-sidebar-dropdown-positioned] > .dropdown-menu {
     position: fixed !important;
     z-index: $zindex-dropdown;
-    inset-block-start: var(--moo-sidebar-dropdown-block-start) !important;
-    inset-inline-start: var(--moo-sidebar-dropdown-inline-start) !important;
+    inset-inline-start: var(--moo-sidebar-dropdown-inline-start, auto) !important;
+    inset-inline-end: auto !important;
     width: var(--moo-dropdown-sidebar-min-width);
     min-width: var(--moo-dropdown-sidebar-min-width);
     margin: 0;
     transform: none !important;
   }
+
+  [data-slot="sidebar-header"] [data-sidebar-dropdown-positioned] > .dropdown-menu {
+    inset-block-start: var(--moo-sidebar-dropdown-block-start) !important;
+  }
+
+  [data-slot="sidebar-footer"] [data-sidebar-dropdown-positioned] > .dropdown-menu {
+    inset-block-start: auto !important;
+    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/_input_group.scss

@@ -102,7 +102,7 @@
   border-radius: var(--moo-input-group-border-radius);
   background-color: var(--moo-muted-surface);
   opacity: 0;
-  transition: opacity $transition-fade;
+  transition: $transition-fade;
 }
 
 .input-group > .btn-ghost:hover::before,

package/scss/components/_table.scss

@@ -1,3 +1,9 @@
+.card .table {
+  // Keep the table surface transparent so a table composed inside a card
+  // inherits the card's light/dark surface.
+  --bs-table-bg: #{$moo-table-contained-bg};
+}
+
 .table-responsive:not(.scroll-fade-x):has(.table-row-actions > [aria-expanded="true"]) {
   overflow: visible;
 }

package/scss/components/sidebar/_collapsed.scss

@@ -37,6 +37,18 @@
     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);

package/scss/moo-ui.scss

@@ -13,6 +13,7 @@
 
 // Bootstrap layout and standalone-only components
 @import "bootstrap/scss/root";
+@import "themes/standalone_root";
 @import "bootstrap/scss/reboot";
 @import "bootstrap/scss/type";
 @import "bootstrap/scss/images";
@@ -44,7 +45,6 @@
 // Bootstrap utilities
 @import "bootstrap/scss/utilities/api";
 
-@import "themes/standalone_root";
 @import "utilities/scroll_fade_primitives";
 @import "components";
 @import "foundations/overlay_backdrop";

package/scss/settings/_component_variables.scss

@@ -150,6 +150,10 @@ $moo-switch-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://ww
 // changes nothing but the chevron and revealed content.
 $accordion-button-active-bg: var(--bs-accordion-bg) !default;
 $accordion-button-active-color: var(--bs-accordion-color) !default;
+
+// A nested accordion inherits its Card surface by default, while remaining
+// configurable for Sass consumers that need a distinct contained surface.
+$moo-accordion-contained-bg: transparent !default;
 // Bootstrap's pills nav has no shared-track concept, so the segmented
 // control's track padding/gap and trigger padding have no Bootstrap
 // variable to override — they are private knobs instead of literals in
@@ -182,13 +186,10 @@ $card-title-letter-spacing: -0.01em !default;
 $moo-card-spacing: 1rem !default;
 $moo-card-spacing-sm: 0.75rem !default;
 
-// Card surface and border blends: mix the muted surface over the base surface
-// (and foreground over a transparent base) so cards keep a subtle tint that
-// tracks the runtime theme without hardcoding a color.
+// Card surface blends mix the muted surface over the base surface so cards keep
+// a subtle tint that tracks the runtime theme without hardcoding a color.
 $moo-card-bg-mix: 5% !default;
 $moo-card-bg-mix-dark: 30% !default;
-$moo-card-border-mix: 10% !default;
-$moo-card-border-mix-base: transparent !default;
 
 // Bootstrap exposes one card-cap background for both headers and footers, but
 // the reference needs no header fill and a separately tuned footer surface.
@@ -305,7 +306,7 @@ $moo-form-focus-ring-color: var(--moo-ring) !default;
 // .offcanvas-backdrop selectors; Moo keeps their visual treatment aligned via
 // one token set instead of per-component backdrop rules.
 $moo-overlay-backdrop-opacity: 1 !default;
-$moo-overlay-backdrop-bg: color-mix(in srgb, var(--bs-black) 10%, transparent) !default;
+$moo-overlay-backdrop-bg: color-mix(in srgb, #0a0a0a 10%, transparent) !default;
 $moo-overlay-backdrop-filter: blur(8px) !default;
 
 // A quieter elevation scale and the extra radius step, applied UI-wide through
@@ -399,6 +400,10 @@ $moo-datatable-bulk-actions-backdrop-blur: 8px !default;
 // chrome. Keep the default component position unchanged while giving host
 // surfaces a scoped override hook.
 $moo-datatable-bulk-actions-bottom: 1rem !default;
+// Bootstrap's table surface is opaque by default and has no context-aware
+// Card composition knob, so card-contained tables consume this scoped Sass
+// setting instead of hardcoding their transparent surface in the partial.
+$moo-table-contained-bg: transparent !default;
 // Bootstrap has no Data Table layout/card primitive, so these scoped knobs
 // describe the generated table/card frames without becoming global widths.
 $moo-datatable-min-width: 48rem !default;
@@ -408,6 +413,9 @@ $moo-datatable-card-label-width: 7rem !default;
 // Sticky row-action cells need just enough opaque surface for the trigger;
 // this fade prevents the pinned cell from reading as a dominant blank column.
 $moo-datatable-actions-cell-fade-width: 1.25rem !default;
+// Bootstrap has no Data Table action-cell surface token; keep this scoped
+// knob aligned with the native body surface and override it for Card context.
+$moo-datatable-actions-cell-bg: var(--bs-body-bg) !default;
 // Bootstrap has no Data Table frame-header or layout-toggle row primitive, so
 // these scoped knobs align Moo's table/card header controls to Bootstrap inputs.
 $moo-datatable-frame-header-min-height: 2.78125rem !default;

package/scss/themes/_standalone_root.scss

@@ -62,6 +62,7 @@
   --bs-body-bg-rgb: #{to-rgb($moo-surface)};
   --bs-secondary-bg: var(--moo-muted-surface);
   --bs-secondary-bg-rgb: #{to-rgb($moo-muted-surface)};
+  --bs-border-color: var(--moo-border);
   --bs-tertiary-bg: #{$body-tertiary-bg};
   --bs-tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
   --bs-tertiary-color: #{$body-tertiary-color};
@@ -108,6 +109,7 @@
   --bs-body-bg-rgb: #{to-rgb($moo-surface-dark)};
   --bs-secondary-bg: var(--moo-muted-surface);
   --bs-secondary-bg-rgb: #{to-rgb($moo-muted-surface-dark)};
+  --bs-border-color: var(--moo-border);
   --bs-tertiary-bg: #{$body-tertiary-bg-dark};
   --bs-tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
   --bs-tertiary-color: #{$body-tertiary-color-dark};