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

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/_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/_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

@@ -188,15 +188,50 @@
   }
 }
 
+// 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;
+    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;
     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;
+  }
+
 }

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

@@ -12,7 +12,9 @@
   cursor: pointer;
 }
 
-[dir="rtl"] .sidebar-rail {
+// 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%);
 }
 
@@ -37,14 +39,25 @@
     position: relative;
   }
 
-  .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] {
-    flex-basis: var(--moo-sidebar-width-icon);
-    width: var(--moo-sidebar-width-icon);
+  .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;
   }
 
-  .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar-inset {
-    position: relative;
-    z-index: 0;
+  // 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,
@@ -62,14 +75,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;
@@ -162,15 +179,7 @@
     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 {
+  .wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar {
     position: relative;
     inset: auto;
     flex: 0 0 auto;
@@ -180,7 +189,7 @@
     transform: none;
   }
 
-  .sidebar-wrapper--contained .sidebar-inner {
+  .wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar-inner {
     height: auto;
     max-height: none;
   }

package/scss/components/sidebar/_inset.scss

@@ -1,59 +1,29 @@
-// Inset (content area) ---------------------------------------------------
-.sidebar-inset {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  min-width: 0;
-  background: var(--bs-body-bg);
-}
-
-.sidebar-inset__header {
-  position: sticky;
-  top: 0;
-  z-index: 20;
-  display: flex;
-  align-items: center;
-  gap: $spacer * 0.5;
-  height: $spacer * 4;
-  padding-inline: $spacer;
-  border-bottom: var(--bs-border-width) solid var(--bs-border-color);
-  background: var(--bs-body-bg);
-}
-
-.sidebar-inset__content {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-// Inset variant: the sidebar itself stays flush; the main content becomes a
-// rounded, shadowed card with a gap around it, and the page background
-// switches to the sidebar's own surface color so the card reads as inset.
-// Collapsing to the icon rail restores the inline-start gap. Scoped to
-// desktop, matching how the mobile offcanvas drawer ignores variant.
+// Inset Sidebar variant --------------------------------------------------
+// The Sidebar owns the navigation surface; the App root owns the sibling
+// page geometry. This variant only supplies the page-side visual treatment.
 @include media-breakpoint-up(lg) {
-  .sidebar-wrapper:has(.sidebar[data-variant="inset"]) {
+  .wrapper[data-layout="app"]:has(> .sidebar[data-variant="inset"]) {
     background: var(--moo-sidebar);
   }
 
-  .sidebar-wrapper:has(.sidebar[data-variant="inset"]) .sidebar-inset {
+  .wrapper[data-layout="app"]:has(> .sidebar[data-variant="inset"]) > [data-slot="page"] {
     margin: $spacer * 0.5;
-    margin-inline-start: 0;
+    margin-left: 0;
     border-radius: var(--bs-border-radius-xl);
     box-shadow: var(--bs-box-shadow-sm);
+    background: var(--bs-body-bg);
   }
 
-  .sidebar-wrapper[data-sidebar-state="collapsed"]:has(.sidebar[data-variant="inset"]) .sidebar-inset {
-    margin-inline-start: $spacer * 0.5;
+  .wrapper[data-layout="app"][data-sidebar-state="collapsed"]:has(> .sidebar[data-variant="inset"]) > [data-slot="page"] {
+    margin-left: $spacer * 0.5;
   }
 
-  // A right-side sidebar sits on the opposite edge, so the content card must
-  // flush against the end side instead of the start side.
-  .sidebar-wrapper:has(.sidebar[data-variant="inset"][data-side="right"]) .sidebar-inset {
-    margin-inline-start: $spacer * 0.5;
-    margin-inline-end: 0;
+  .wrapper[data-layout="app"]:has(> .sidebar[data-variant="inset"][data-side="right"]) > [data-slot="page"] {
+    margin-left: $spacer * 0.5;
+    margin-right: 0;
   }
 
-  .sidebar-wrapper[data-sidebar-state="collapsed"]:has(.sidebar[data-variant="inset"][data-side="right"]) .sidebar-inset {
-    margin-inline-end: $spacer * 0.5;
+  .wrapper[data-layout="app"][data-sidebar-state="collapsed"]:has(> .sidebar[data-variant="inset"][data-side="right"]) > [data-slot="page"] {
+    margin-right: $spacer * 0.5;
   }
 }

package/scss/components/sidebar/_layout.scss

@@ -3,15 +3,15 @@
 // Geometry rides the $moo-sidebar-* Sass knobs; every color consumes a
 // runtime --moo-* token.
 
-.sidebar-wrapper {
-  --moo-sidebar-width: #{$moo-sidebar-width};
-  --moo-sidebar-width-icon: #{$moo-sidebar-width-icon};
+.wrapper[data-layout="app"] {
   display: flex;
   width: 100%;
-  min-height: 100svh;
+  height: 100svh;
+  min-height: 0;
+  overflow: hidden;
 }
 
-.sidebar-wrapper--contained {
+.wrapper[data-layout="app"][data-shell-mode="contained"] {
   min-height: 0;
   height: 34rem;
   overflow: hidden;
@@ -21,6 +21,8 @@
 
 // Sidebar column ---------------------------------------------------------
 .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);
@@ -28,15 +30,28 @@
 }
 
 .sidebar[data-side="left"] .sidebar-inner {
-  border-inline-end: var(--bs-border-width) solid var(--moo-sidebar-border);
+  // `side` is a physical placement contract. Keep the divider on the
+  // Sidebar/Page boundary when the document direction is RTL as well.
+  border-right: var(--bs-border-width) solid var(--moo-sidebar-border);
 }
 
 .sidebar[data-side="right"] {
   order: 1;
 }
 
+// `side` is a physical placement contract. `:dir()` reads the wrapper's
+// computed direction inside the owner scope, whether it comes from html for a
+// document owner or from an embedded owner's own dir attribute.
+.wrapper[data-layout="app"]:dir(rtl) > .sidebar[data-side="left"] {
+  order: 1;
+}
+
+.wrapper[data-layout="app"]:dir(rtl) > .sidebar[data-side="right"] {
+  order: 0;
+}
+
 .sidebar[data-side="right"] .sidebar-inner {
-  border-inline-start: var(--bs-border-width) solid var(--moo-sidebar-border);
+  border-left: var(--bs-border-width) solid var(--moo-sidebar-border);
 }
 
 // Floating variant: the surface detaches from the viewport edge with a
@@ -58,7 +73,7 @@
     box-shadow: var(--bs-box-shadow-sm);
   }
 
-  .sidebar-wrapper--contained .sidebar[data-variant="floating"] .sidebar-inner {
+  .wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar[data-variant="floating"] .sidebar-inner {
     height: calc(100% - #{$spacer});
     max-height: calc(100% - #{$spacer});
   }
@@ -69,16 +84,22 @@
   // (still a shared token, no new value) and widen the column by the same
   // margin the card's sides consume, so the icon rail itself keeps its full
   // width instead of shrinking.
-  .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar[data-variant="floating"][data-collapsible="icon"] {
+  .wrapper[data-layout="app"][data-sidebar-state="collapsed"] .sidebar[data-variant="floating"][data-collapsible="icon"] {
     flex-basis: calc(var(--moo-sidebar-width-icon) + #{$spacer});
     width: calc(var(--moo-sidebar-width-icon) + #{$spacer});
   }
 
-  .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar[data-variant="floating"][data-collapsible="icon"] .sidebar-inner {
+  .wrapper[data-layout="app"][data-sidebar-state="collapsed"] .sidebar[data-variant="floating"][data-collapsible="icon"] .sidebar-inner {
     box-shadow: var(--bs-box-shadow);
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .sidebar {
+    transition: none;
+  }
+}
+
 .sidebar-inner {
   position: sticky;
   top: 0;
@@ -90,12 +111,66 @@
   background: var(--moo-sidebar);
 }
 
-.sidebar-wrapper--contained .sidebar-inner {
+.wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar-inner {
   position: relative;
   height: 100%;
   max-height: 100%;
 }
 
+.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;
+  }
+}
+
 .sidebar-header,
 .sidebar-footer {
   display: flex;