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

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/{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);

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/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;
-}