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

package/dist/js/sidebar.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI sidebar.js v1.0.0-rc.5 (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.5 (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.5",
+  "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)",

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/_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/settings/_component_variables.scss

@@ -400,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;
@@ -409,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;