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

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,8 @@
+@scope (.moo-ui) to (:where(.moo-ui[data-bs-theme="light"], .moo-ui[data-bs-theme="dark"])) {
+  @import "../components";
+  @import "../foundations/focus";
+  @import "../utilities/scroll_fade";
+  @import "../layouts/app";
+  @import "../themes/forms";
+  @include moo-overlay-backdrop-scoped;
+}

package/scss/layouts/_app.scss

@@ -0,0 +1,77 @@
+// Application layout owns the shell and page geometry.
+// It is intentionally separate from component surfaces such as Sidebar.
+
+@import "app/sidebar/base";
+@import "app/sidebar/default";
+@import "app/sidebar/floating";
+@import "app/sidebar/inset";
+
+.wrapper[data-layout="app"] {
+  display: flex;
+  width: 100%;
+  height: 100svh;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.wrapper[data-layout="app"][data-shell-mode="contained"] {
+  min-height: 0;
+  height: 34rem;
+  overflow: hidden;
+  border: var(--bs-border-width) solid var(--moo-border);
+  border-radius: var(--bs-border-radius-xl);
+}
+
+.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;
+  }
+}

package/scss/layouts/app/sidebar/_base.scss

@@ -0,0 +1,117 @@
+// Shared App-owned Sidebar shell geometry. Sidebar's component partials own
+// only the inner surface and navigation anatomy.
+
+.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);
+  color: var(--moo-sidebar-foreground);
+}
+
+// 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;
+}
+
+// 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%);
+}
+
+.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;
+}
+
+.sidebar-rail:hover::after {
+  background: var(--moo-sidebar-border);
+}
+
+.wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar-inner {
+  position: relative;
+  height: 100%;
+  max-height: 100%;
+}
+
+// The outer shell owns stacking, collapse width, and the contained-shell
+// geometry. Inner collapsed content remains in components/sidebar/_collapsed.
+@include media-breakpoint-up(lg) {
+  .sidebar {
+    position: relative;
+  }
+
+  // `offcanvas` is a collapsible mode, not a visual Sidebar variant. On
+  // desktop the App keeps the shell in normal flow and uses the shared App
+  // state attribute to collapse the column; below lg Bootstrap's native
+  // Offcanvas plugin continues to own the drawer transition.
+  .sidebar.offcanvas-lg[data-collapsible="offcanvas"] {
+    visibility: visible;
+    transform: none;
+  }
+
+  .wrapper[data-layout="app"][data-sidebar-state="collapsed"] > .sidebar.offcanvas-lg[data-collapsible="offcanvas"] {
+    flex-basis: 0;
+    width: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+
+  .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;
+  }
+
+  // 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);
+  }
+}
+
+@include media-breakpoint-down(lg) {
+  .sidebar-rail {
+    display: none;
+  }
+
+  .wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar {
+    position: relative;
+    inset: auto;
+    flex: 0 0 auto;
+    width: 100%;
+    height: auto;
+    visibility: visible;
+    transform: none;
+  }
+
+  .wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar-inner {
+    height: auto;
+    max-height: none;
+  }
+}

package/scss/layouts/app/sidebar/_default.scss

@@ -0,0 +1,26 @@
+// Default App Sidebar variant: attached to the shell edge with one divider.
+
+.sidebar[data-side="left"] .sidebar-inner {
+  // `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-left: var(--bs-border-width) solid var(--moo-sidebar-border);
+}

package/scss/layouts/app/sidebar/_floating.scss

@@ -0,0 +1,44 @@
+// Floating App Sidebar variant: the shell detaches the inner surface from
+// the viewport edge with a margin, border, radius, and shadow.
+
+@include media-breakpoint-up(lg) {
+  .sidebar {
+    transition: flex-basis 0.2s ease, width 0.2s ease;
+  }
+
+  .sidebar[data-variant="floating"] .sidebar-inner {
+    width: auto;
+    height: calc(100svh - #{$spacer});
+    max-height: calc(100svh - #{$spacer});
+    margin: $spacer * 0.5;
+    border: var(--bs-border-width) solid var(--moo-sidebar-border);
+    border-radius: var(--bs-border-radius-lg);
+    box-shadow: var(--bs-box-shadow-sm);
+  }
+
+  .wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar[data-variant="floating"] .sidebar-inner {
+    height: calc(100% - #{$spacer});
+    max-height: calc(100% - #{$spacer});
+  }
+
+  // At icon-rail width the detached card reads as floating mostly through
+  // elevation and breathing room, since the margin/border alone are hard to
+  // read at the base icon width; step up to Bootstrap's base shadow scale
+  // (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.
+  .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});
+  }
+
+  .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;
+  }
+}

package/scss/layouts/app/sidebar/_inset.scss

@@ -0,0 +1,29 @@
+// Inset App variant: the App shell owns the background and makes the Page a
+// sibling inset surface. Sidebar keeps only its inner navigation anatomy.
+
+@include media-breakpoint-up(lg) {
+  .wrapper[data-layout="app"]:has(> .sidebar[data-variant="inset"]) {
+    background: var(--moo-sidebar);
+  }
+
+  .wrapper[data-layout="app"]:has(> .sidebar[data-variant="inset"]) > [data-slot="page"] {
+    margin: $spacer * 0.5;
+    margin-left: 0;
+    border-radius: var(--bs-border-radius-xl);
+    box-shadow: var(--bs-box-shadow-sm);
+    background: var(--bs-body-bg);
+  }
+
+  .wrapper[data-layout="app"][data-sidebar-state="collapsed"]:has(> .sidebar[data-variant="inset"]) > [data-slot="page"] {
+    margin-left: $spacer * 0.5;
+  }
+
+  .wrapper[data-layout="app"]:has(> .sidebar[data-variant="inset"][data-side="right"]) > [data-slot="page"] {
+    margin-left: $spacer * 0.5;
+    margin-right: 0;
+  }
+
+  .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/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";

package/scss/settings/_bootstrap_overrides.scss

@@ -4,6 +4,10 @@ $btn-box-shadow: none !default;
 $btn-focus-box-shadow: none !default;
 $btn-active-box-shadow: none !default;
 
+// Keep Bootstrap's CSS Grid utility layer available alongside the Flexbox
+// grid so native .grid and .g-col-* markup works in Moo UI hosts.
+$enable-cssgrid: true !default;
+
 // Bootstrap validation icons are background images injected by the native
 // validation mixin. Reference-style invalid fields use border/ring + error text
 // without a trailing status glyph, so disable the Bootstrap icon branch at the

package/scss/settings/_component_variables.scss

@@ -255,6 +255,20 @@ $btn-padding-y-sm: 0.3125rem !default;
 $btn-padding-x-sm: 0.625rem !default;
 $btn-padding-y-lg: 0.4375rem !default;
 $btn-padding-x-lg: 0.625rem !default;
+
+// Bootstrap exposes button padding, but it has no command/search-trigger
+// composition or responsive width scale. Keep this shared control's geometry
+// on private knobs so Catalog and Odoo consume one Core contract instead of
+// copying chrome-specific literals into their own stylesheets.
+$moo-search-trigger-height: 2rem !default;
+$moo-search-trigger-width: 10rem !default;
+$moo-search-trigger-width-lg: 13rem !default;
+$moo-search-trigger-width-xxl: 16rem !default;
+$moo-search-trigger-padding-y: 0.5rem !default;
+$moo-search-trigger-padding-x: 0.75rem !default;
+$moo-search-trigger-border-color: transparent !default;
+$moo-search-trigger-label-gap: 0.5rem !default;
+$moo-search-trigger-shortcut-gap: 0.25rem !default;
 // Icon-only buttons are squares whose side equals the token-driven button
 // height (line-height + 2*padding-y + 2*border), matching sibling text
 // buttons. Bootstrap exposes no single icon-button size knob; the side is a
@@ -305,9 +319,14 @@ $moo-form-focus-ring-color: var(--moo-ring) !default;
 // backdrops. Bootstrap exposes separate .modal-backdrop and
 // .offcanvas-backdrop selectors; Moo keeps their visual treatment aligned via
 // one token set instead of per-component backdrop rules.
+// Bootstrap defaults both native panels to .3s; retain that default while
+// exposing one runtime duration token for the panel and its backdrop.
+$moo-overlay-motion-duration: .3s !default;
+$modal-transition: transform var(--moo-overlay-motion-duration, #{$moo-overlay-motion-duration}) ease-out !default;
+$offcanvas-transition-duration: var(--moo-overlay-motion-duration, #{$moo-overlay-motion-duration}) !default;
 $moo-overlay-backdrop-opacity: 1 !default;
 $moo-overlay-backdrop-bg: color-mix(in srgb, #0a0a0a 10%, transparent) !default;
-$moo-overlay-backdrop-filter: blur(8px) !default;
+$moo-overlay-backdrop-filter: blur(6px) !default;
 
 // A quieter elevation scale and the extra radius step, applied UI-wide through
 // Bootstrap's own scales so every component consumes one shared primitive.

package/scss/settings/_options.scss

@@ -0,0 +1,2 @@
+$enable-dark-mode: false;
+$moo-spinner-animation-name: moo-spinner-rotate;

package/scss/settings/_palette.scss

@@ -112,7 +112,7 @@ $moo-sidebar-dark: #1c1c1f !default;
 $moo-input-bg-dark: color-mix(in srgb, $moo-muted-surface-dark 50%, $moo-surface-dark) !default;
 
 // Bootstrap root variables consumed by the scoped core build. Define them
-// here so themes/_scoped_core.scss can emit Bootstrap's root contract without
+// here so themes/_theme.scss can emit Bootstrap's root contract without
 // hardcoded consumer-side literals.
 $body-tertiary-color: #a1a1aa !default;
 $body-tertiary-bg: $light !default;

package/scss/themes/_forms.scss

@@ -0,0 +1,15 @@
+:scope[data-bs-theme="light"] .form-select {
+  --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
+}
+
+:scope[data-bs-theme="dark"] .form-select {
+  --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
+}
+
+:scope[data-bs-theme="light"] .form-switch .form-check-input:not(:checked):not(:focus) {
+  --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
+}
+
+:scope[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked):not(:focus) {
+  --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
+}

package/scss/themes/_root.scss

@@ -0,0 +1,16 @@
+.moo-ui[data-bs-theme] {
+  @include moo-core-scales;
+  @include moo-core-shared;
+}
+
+.moo-ui[data-bs-theme="light"] {
+  @include moo-core-light;
+}
+
+.moo-ui[data-bs-theme="dark"] {
+  @include moo-core-dark;
+}
+
+.moo-ui[data-bs-theme][dir="rtl"] {
+  direction: rtl;
+}

package/scss/themes/_standalone.scss

@@ -0,0 +1,5 @@
+// A complete document places its resolved owner directly inside body. The
+// owner, rather than body, supplies the viewport-sized foreground surface.
+body > .moo-ui[data-bs-theme] {
+  min-block-size: 100dvh;
+}

package/scss/themes/{_scoped_core.scss → _theme.scss}

@@ -77,6 +77,7 @@ $moo-theme-colors-border-subtle-dark: (
 }
 
 @mixin moo-core-shared {
+  --moo-overlay-motion-duration: #{$moo-overlay-motion-duration};
   --moo-overlay-backdrop-opacity: #{$moo-overlay-backdrop-opacity};
   --moo-overlay-backdrop-bg: #{$moo-overlay-backdrop-bg};
   --moo-overlay-backdrop-filter: #{$moo-overlay-backdrop-filter};