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

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 @@
+// Attached Sidebar variants keep a divider at the shell edge; Inset does not.
+
+.sidebar[data-side="left"]:not([data-variant="inset"]) .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"]:not([data-variant="inset"]) .sidebar-inner {
+  border-left: var(--bs-border-width) solid var(--moo-sidebar-border);
+}

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

@@ -0,0 +1,47 @@
+// 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) {
+  // Enable shell motion only after Sidebar has restored its initial state.
+  // Hosts that hydrate after first paint must not animate the correction from
+  // their server/default state to the persisted state.
+  :where(.wrapper[data-layout="app"][data-sidebar-ready]) > .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/{components → layouts/app}/sidebar/_inset.scss

@@ -1,6 +1,6 @@
-// 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.
+// 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);
@@ -14,6 +14,11 @@
     background: var(--bs-body-bg);
   }
 
+  .wrapper[data-layout="app"]:has(> .sidebar[data-variant="inset"]) > [data-slot="page"] > header {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
   .wrapper[data-layout="app"][data-sidebar-state="collapsed"]:has(> .sidebar[data-variant="inset"]) > [data-slot="page"] {
     margin-left: $spacer * 0.5;
   }

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

package/scss/settings/_forms.scss

@@ -7,7 +7,7 @@ $input-height: 2rem !default;
 $input-line-height: 1.4285714286 !default;
 $input-bg: var(--moo-input-bg, transparent) !default;
 $input-border-color: var(--moo-border) !default;
-$input-border-radius: 0.625rem !default;
+$input-border-radius: var(--bs-border-radius-lg) !default;
 $input-placeholder-color: var(--bs-tertiary-color) !default;
 $input-focus-bg: var(--moo-input-bg, transparent) !default;
 // Bootstrap leaves disabled text-control foregrounds null by default

package/scss/themes/_root.scss

@@ -1,6 +1,7 @@
 .moo-ui[data-bs-theme] {
   @include moo-core-scales;
   @include moo-core-shared;
+  font-family: var(--bs-body-font-family);
 }
 
 .moo-ui[data-bs-theme="light"] {

package/scss/themes/_standalone.scss

@@ -1,5 +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] {
+// A complete document's resolved owner supplies the viewport-sized surface.
+// Direct-body overlay hosts share its theme but are infrastructure, not roots.
+body > .moo-ui[data-bs-theme]:not([data-moo-overlay-host]) {
   min-block-size: 100dvh;
 }

package/scss/themes/_theme.scss

@@ -91,6 +91,9 @@ $moo-theme-colors-border-subtle-dark: (
   --moo-chart-3: #{$moo-chart-3};
   --moo-chart-4: #{$moo-chart-4};
   --moo-chart-5: #{$moo-chart-5};
+  // Resolved owners reset this token so nested Moo owners never inherit a
+  // parent owner's heading-font choice.
+  --moo-heading-font-family: var(--#{$prefix}body-font-family);
 }
 
 @mixin moo-core-light {

package/scss/components/sidebar/_layout.scss

@@ -1,251 +0,0 @@
-// Bootstrap has no native sidebar, so this owned sidebar selector namespace
-// styles the app-shell primitive (same precedent as the avatar component).
-// Geometry rides the $moo-sidebar-* Sass knobs; every color consumes a
-// runtime --moo-* token.
-
-.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);
-}
-
-// 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);
-  color: var(--moo-sidebar-foreground);
-}
-
-.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);
-}
-
-// Floating variant: the surface detaches from the viewport edge with a
-// margin gap on every side and gains a full rounded border and shadow,
-// replacing the flush single-edge border the default variant uses. Scoped
-// to desktop, matching how the mobile offcanvas drawer ignores variant.
-@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;
-  }
-}
-
-.sidebar-inner {
-  position: sticky;
-  top: 0;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100svh;
-  max-height: 100svh;
-  background: var(--moo-sidebar);
-}
-
-.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;
-  flex-direction: column;
-  gap: $spacer * 0.25;
-  padding: $spacer * 0.5;
-}
-
-.sidebar-content {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  gap: $spacer * 0.5;
-  min-height: 0;
-  overflow-y: auto;
-}
-
-.sidebar-input {
-  width: 100%;
-  padding: $spacer * 0.25;
-}
-
-.sidebar-separator {
-  display: flex;
-}
-
-.sidebar-menu-skeleton {
-  display: flex;
-  align-items: center;
-  gap: $spacer * 0.25;
-  min-height: $spacer * 2;
-  padding-inline: $spacer * 0.5;
-}
-
-.sidebar-menu-skeleton__icon {
-  width: $spacer;
-  height: $spacer;
-}
-
-.sidebar-menu-skeleton__line {
-  flex: 1 1 auto;
-}
-
-.sidebar-group {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  padding: $spacer * 0.5;
-}
-
-.sidebar-group-content {
-  display: block;
-}
-
-.sidebar-group-content--inline {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: $spacer * 0.25;
-}
-
-.sidebar-group-label {
-  display: flex;
-  align-items: center;
-  height: $spacer * 2;
-  padding-inline: $spacer * 0.5;
-  color: var(--moo-muted-foreground);
-  font-size: $font-size-base * 0.857;
-  font-weight: $font-weight-medium;
-}
-
-// Reserve room so a long label doesn't run under the absolutely positioned
-// group action button (see .sidebar-group-action below). A descendant match
-// covers both a group action placed directly in .sidebar-group and one
-// nested inside .sidebar-group-content alongside the label.
-.sidebar-group:has(.sidebar-group-action) .sidebar-group-label {
-  padding-inline-end: $spacer * 2.5;
-}