@wpmoo/ui 1.0.0-rc.8 → 1.0.0

package/scss/foundations/_scope.scss

@@ -1,8 +1,27 @@
 @scope (.moo-ui) to (:where(.moo-ui[data-bs-theme="light"], .moo-ui[data-bs-theme="dark"])) {
   @import "../components";
+  /* Focus and keyboard navigation */
   @import "../foundations/focus";
+  /* Utilities */
+  @import "../utilities/border";
   @import "../utilities/scroll_fade";
+  /* Application layout */
   @import "../layouts/app";
+  @import "../layouts/page_grid";
+  /* Form themes */
   @import "../themes/forms";
+  /* Overlay backdrops */
   @include moo-overlay-backdrop-scoped;
+  /* Typography */
+  :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
+    .display-1, .display-2, .display-3, .display-4, .display-5, .display-6) {
+    font-family: var(--moo-heading-font-family, var(--bs-body-font-family));
+  }
+  :is(small, .small) {
+    font-size: var(--moo-small-font-size);
+  }
+  p {
+    margin-top: var(--moo-paragraph-margin-top);
+    margin-bottom: var(--moo-paragraph-margin-bottom);
+  }
 }

package/scss/layouts/_app.scss

@@ -1,5 +1,3 @@
-// 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";
@@ -28,7 +26,6 @@
   min-height: 0;
   flex: 1 1 auto;
   flex-direction: column;
-  overflow-y: auto;
 }
 
 .wrapper[data-layout="app"] > [data-slot="page"] > header,
@@ -37,15 +34,12 @@
   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;
+  overflow-y: auto;
 }
 
 .wrapper[data-layout="app"] > [data-slot="page"] > main > :is(
@@ -74,4 +68,8 @@
   .wrapper[data-layout="app"][data-shell-mode="contained"] > [data-slot="page"] {
     overflow: visible;
   }
+
+  .wrapper[data-layout="app"][data-shell-mode="contained"] > [data-slot="page"] > main {
+    overflow: visible;
+  }
 }

package/scss/layouts/_page_grid.scss

@@ -0,0 +1,27 @@
+[data-page-container] {
+  container: moo-page / inline-size;
+}
+
+[data-page-container] [data-page-show-from] {
+  display: none !important;
+}
+
+@each $breakpoint, $min-width in $grid-breakpoints {
+  @if $breakpoint != xs {
+    @container moo-page (min-width: #{$min-width}) {
+      @for $span from 1 through $grid-columns {
+        [data-page-container] .row[data-layout="page-grid"] > [data-page-col-#{$breakpoint}="#{$span}"] {
+          width: percentage(divide($span, $grid-columns));
+        }
+      }
+
+      [data-page-container] [data-page-show-from="#{$breakpoint}"] {
+        display: block !important;
+      }
+
+      [data-page-container] [data-page-hide-from="#{$breakpoint}"] {
+        display: none !important;
+      }
+    }
+  }
+}

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

@@ -1,5 +1,3 @@
-// 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};
@@ -10,7 +8,6 @@
   color: var(--moo-sidebar-foreground);
 }
 
-// Rail: a thin toggle strip straddling the Sidebar's inline-end edge.
 .sidebar-rail {
   position: absolute;
   inset-block: 0;
@@ -24,8 +21,6 @@
   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%);
 }
@@ -50,17 +45,11 @@
   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;
@@ -75,16 +64,9 @@
 
   .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;
   }
@@ -99,19 +81,4 @@
   .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

@@ -1,8 +1,5 @@
-// 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.
+.sidebar[data-side="left"]:not([data-variant="inset"]) .sidebar-inner {
   border-right: var(--bs-border-width) solid var(--moo-sidebar-border);
 }
 
@@ -10,9 +7,6 @@
   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;
 }
@@ -21,6 +15,6 @@
   order: 0;
 }
 
-.sidebar[data-side="right"] .sidebar-inner {
+.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

@@ -1,8 +1,6 @@
-// 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 {
+  :where(.wrapper[data-layout="app"][data-sidebar-ready]) > .sidebar {
     transition: flex-basis 0.2s ease, width 0.2s ease;
   }
 
@@ -21,12 +19,6 @@
     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});

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

@@ -1,5 +1,3 @@
-// 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"]) {
@@ -14,6 +12,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/mixins/_banner.scss

@@ -1,3 +1,9 @@
-@import "bootstrap/scss/mixins/banner";
-
-@include bsBanner("");
+/*!
+ * Moo UI v1.0.0 (https://wpmoo.org/)
+ * Copyright 2026 WPMoo Authors
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
+ *
+ * Bootstrap v5.3.3 (https://getbootstrap.com/)
+ * Copyright 2011-2024 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */

package/scss/moo-core.scss

@@ -1,9 +1,4 @@
-/*!
- * Moo UI core
- * Copyright (c) 2026 WPMoo (wpmoo.org)
- * Includes Bootstrap 5.3.3 component output
- * SPDX-License-Identifier: MIT
- */
+@import "mixins/banner";
 @import "settings/options";
 @import "bootstrap/scss/functions";
 @import "settings";
@@ -13,7 +8,9 @@
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
 @import "themes/theme";
+/* Global styles */
 @import "foundations/globals";
 @import "foundations/backdrop";
+/* Theme tokens */
 @import "themes/root";
 @import "foundations/scope";

package/scss/moo-ui.scss

@@ -1,7 +1,7 @@
-@import "settings";
 @import "mixins/banner";
+@import "settings";
 
-// Bootstrap configuration
+/* Bootstrap configuration */
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/variables-dark";
@@ -10,13 +10,16 @@
 @import "bootstrap/scss/utilities";
 @import "themes/theme";
 
-// Bootstrap layout and standalone-only components
+/* Bootstrap layout and standalone-only components */
 @import "bootstrap/scss/root";
+/* Theme tokens */
 @import "themes/root";
 @import "themes/standalone";
+/* Base styles and typography */
 @import "bootstrap/scss/reboot";
 @import "bootstrap/scss/type";
 @import "bootstrap/scss/images";
+/* Containers and grid */
 @import "bootstrap/scss/containers";
 @import "bootstrap/scss/grid";
 @import "bootstrap/scss/forms/form-range";
@@ -29,7 +32,7 @@
 @import "bootstrap/scss/spinners";
 @import "bootstrap/scss/placeholders";
 
-// Bootstrap helpers
+/* Bootstrap helpers */
 @import "bootstrap/scss/helpers/clearfix";
 @import "bootstrap/scss/helpers/colored-links";
 @import "bootstrap/scss/helpers/focus-ring";
@@ -42,7 +45,8 @@
 @import "bootstrap/scss/helpers/text-truncation";
 @import "bootstrap/scss/helpers/vr";
 
-// Bootstrap utilities
+/* Bootstrap utilities */
+@import "utilities/background_color";
 @import "bootstrap/scss/utilities/api";
 
 @import "utilities/scroll_fade_primitives";

package/scss/settings/_bootstrap_overrides.scss

@@ -1,15 +1,7 @@
-// Moo buttons use a subtle transform for the pressed state, so Bootstrap's
-// native inset shadow press effect is disabled at the source.
 $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
-// source while keeping .is-invalid/.invalid-feedback behavior.
 $enable-validation-icons: false !default;