@wpmoo/ui 1.0.0-rc.6 → 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/_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

@@ -217,8 +217,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 +234,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/_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/_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,28 +39,27 @@
     position: relative;
   }
 
-  .sidebar-wrapper:has([data-sidebar-dropdown-positioned] > .dropdown-menu.show) > .sidebar {
+  .wrapper[data-layout="app"]:has([data-sidebar-dropdown-positioned] > .dropdown-menu.show) > .sidebar {
     position: relative;
-    z-index: $zindex-dropdown;
+    // 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.
-  .sidebar-wrapper:has([data-sidebar-dropdown-positioned] > .dropdown-menu.show) > .sidebar > .sidebar-inner {
-    z-index: $zindex-dropdown;
+  .wrapper[data-layout="app"]:has([data-sidebar-dropdown-positioned] > .dropdown-menu.show) > .sidebar > .sidebar-inner {
+    z-index: $zindex-fixed + 1;
   }
 
-  .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] {
+  .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);
   }
 
-  .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 +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;
@@ -174,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;
@@ -192,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;

package/scss/foundations/_backdrop.scss

@@ -0,0 +1,128 @@
+// Bootstrap owns the overlay lifecycle for Dialog / Alert Dialog (Modal) and
+// Sheet (Offcanvas). Moo only retunes the native backdrop appearance through a
+// shared token primitive, so every opening surface gets the same treatment
+// without component-specific backdrop selectors.
+//
+// Modal waits for the real `.modal-backdrop` transition before it starts the
+// dialog panel. Keep that lifecycle element visually inert and animate a
+// pseudo-element instead: the panel and visible blur/dim can then start from
+// the same Bootstrap motion token, while the native backdrop is still retained
+// long enough to fade the visual layer out on close. Use keyframe animation
+// rather than a pseudo-element transition: transitionend events from a pseudo
+// element bubble to its originating backdrop and would make Bootstrap wait for
+// the visual layer before showing the panel.
+@mixin moo-overlay-backdrop-appearance {
+  --#{$prefix}backdrop-opacity: var(--moo-overlay-backdrop-opacity, #{$moo-overlay-backdrop-opacity});
+  opacity: 1;
+  color: transparent;
+  background-color: transparent;
+
+  &.fade,
+  &.fade:not(.show) {
+    opacity: 1;
+  }
+
+  // Bootstrap reads this duration to decide when to reveal a Modal panel.
+  // Keep entry instant; the visual transition below belongs to ::before.
+  &.show {
+    transition: none;
+  }
+
+  // On close, Bootstrap keeps the lifecycle layer in the DOM for this token
+  // duration while ::before fades out. Color has no visible effect on the
+  // empty backdrop but supplies Bootstrap's native transition lifecycle
+  // without multiplying the pseudo-element's visual fade.
+  &.fade:not(.show) {
+    color: var(--bs-body-color, currentcolor);
+    transition: color var(--moo-overlay-motion-duration, #{$moo-overlay-motion-duration}) ease-out;
+  }
+
+  &::before {
+    position: absolute;
+    inset: 0;
+    content: "";
+    opacity: 0;
+    background-color: var(--moo-overlay-backdrop-bg, #{$moo-overlay-backdrop-bg});
+    -webkit-backdrop-filter: blur(0);
+    backdrop-filter: blur(0);
+    animation: moo-overlay-backdrop-exit var(--moo-overlay-motion-duration, #{$moo-overlay-motion-duration}) ease-out both;
+  }
+}
+
+@mixin moo-overlay-backdrop-shown {
+  // Bootstrap Modal routes opacity through --bs-backdrop-opacity, but
+  // Offcanvas 5.3 compiles the same state to a literal .5. Restate the shared
+  // token on both native show selectors so Dialog and Sheet dim equally.
+  &::before {
+    animation: moo-overlay-backdrop-enter var(--moo-overlay-motion-duration, #{$moo-overlay-motion-duration}) ease-out both;
+  }
+}
+
+@mixin moo-overlay-backdrop-reduced-motion {
+  transition: none;
+
+  &::before {
+    animation: none;
+  }
+}
+
+@keyframes moo-overlay-backdrop-enter {
+  from {
+    opacity: 0;
+    -webkit-backdrop-filter: blur(0);
+    backdrop-filter: blur(0);
+  }
+
+  to {
+    opacity: var(--moo-overlay-backdrop-opacity, #{$moo-overlay-backdrop-opacity});
+    -webkit-backdrop-filter: var(--moo-overlay-backdrop-filter, #{$moo-overlay-backdrop-filter});
+    backdrop-filter: var(--moo-overlay-backdrop-filter, #{$moo-overlay-backdrop-filter});
+  }
+}
+
+@keyframes moo-overlay-backdrop-exit {
+  from {
+    opacity: var(--moo-overlay-backdrop-opacity, #{$moo-overlay-backdrop-opacity});
+    -webkit-backdrop-filter: var(--moo-overlay-backdrop-filter, #{$moo-overlay-backdrop-filter});
+    backdrop-filter: var(--moo-overlay-backdrop-filter, #{$moo-overlay-backdrop-filter});
+  }
+
+  to {
+    opacity: 0;
+    -webkit-backdrop-filter: blur(0);
+    backdrop-filter: blur(0);
+  }
+}
+
+.modal-backdrop,
+.offcanvas-backdrop {
+  @include moo-overlay-backdrop-appearance;
+}
+
+.modal-backdrop.show,
+.offcanvas-backdrop.show {
+  @include moo-overlay-backdrop-shown;
+}
+
+// Backdrops that are portaled into a resolved owner still need to outrank
+// Bootstrap's scoped `.fade` and `.show` rules. Entry points include this
+// mixin inside their single native Moo scope; the global rules above remain
+// available for hosts that intentionally keep Bootstrap's body-level portal.
+@mixin moo-overlay-backdrop-scoped {
+  .modal-backdrop,
+  .offcanvas-backdrop {
+    @include moo-overlay-backdrop-appearance;
+  }
+
+  .modal-backdrop.show,
+  .offcanvas-backdrop.show {
+    @include moo-overlay-backdrop-shown;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .modal-backdrop,
+  .offcanvas-backdrop {
+    @include moo-overlay-backdrop-reduced-motion;
+  }
+}

package/scss/foundations/_scope.scss

@@ -0,0 +1,5 @@
+@scope (.moo-ui) to (:where(.moo-ui[data-bs-theme="light"], .moo-ui[data-bs-theme="dark"])) {
+  @import "../components";
+  @import "../themes/forms";
+  @include moo-overlay-backdrop-scoped;
+}

package/scss/mixins/_banner.scss

@@ -0,0 +1,3 @@
+@import "bootstrap/scss/mixins/banner";
+
+@include bsBanner("");

package/scss/moo-core.scss

@@ -4,9 +4,7 @@
  * Includes Bootstrap 5.3.3 component output
  * SPDX-License-Identifier: MIT
  */
-$enable-dark-mode: false;
-$moo-spinner-animation-name: moo-spinner-rotate;
-
+@import "settings/options";
 @import "bootstrap/scss/functions";
 @import "settings";
 @import "bootstrap/scss/variables";
@@ -14,34 +12,8 @@ $moo-spinner-animation-name: moo-spinner-rotate;
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
-@import "themes/scoped_core";
-@import "foundations/core_global_primitives";
-
-.moo-ui {
-  @include moo-core-scales;
-  @include moo-core-shared;
-  @include moo-core-light;
-}
-
-:where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) {
-  @include moo-core-dark;
-}
-
-.moo-ui[data-bs-theme="light"] {
-  @include moo-core-light;
-}
-
-.moo-ui[data-bs-theme="dark"] {
-  @include moo-core-dark;
-}
-
-.moo-ui[dir="rtl"] {
-  direction: rtl;
-}
-
-@scope (.moo-ui) {
-  @import "components";
-}
-
-@import "foundations/core_state_layer";
-@import "foundations/overlay_backdrop";
+@import "themes/theme";
+@import "foundations/globals";
+@import "foundations/backdrop";
+@import "themes/root";
+@import "foundations/scope";

package/scss/moo-ui.scss

@@ -1,7 +1,5 @@
 @import "settings";
-
-@import "bootstrap/scss/mixins/banner";
-@include bsBanner("");
+@import "mixins/banner";
 
 // Bootstrap configuration
 @import "bootstrap/scss/functions";
@@ -10,10 +8,12 @@
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
+@import "themes/theme";
 
 // Bootstrap layout and standalone-only components
 @import "bootstrap/scss/root";
-@import "themes/standalone_root";
+@import "themes/root";
+@import "themes/standalone";
 @import "bootstrap/scss/reboot";
 @import "bootstrap/scss/type";
 @import "bootstrap/scss/images";
@@ -46,5 +46,5 @@
 @import "bootstrap/scss/utilities/api";
 
 @import "utilities/scroll_fade_primitives";
-@import "components";
-@import "foundations/overlay_backdrop";
+@import "foundations/backdrop";
+@import "foundations/scope";