@wpmoo/ui 1.0.0-rc.9 → 1.0.0

package/scss/foundations/_scope.scss

@@ -1,13 +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";
@@ -36,10 +34,6 @@
   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;

package/scss/layouts/_page_grid.scss

@@ -1,10 +1,7 @@
-// Opt-in Bootstrap row geometry keyed to the usable Moo Page rail, not the
-// viewport or the optional Sidebar state. The rail itself is the query owner.
 [data-page-container] {
   container: moo-page / inline-size;
 }
 
-// Keep the compact branch usable in browsers without container queries.
 [data-page-container] [data-page-show-from] {
   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 @@
-// 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);
 }
 
@@ -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;
 }

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

@@ -1,10 +1,5 @@
-// 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;
   }
@@ -24,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"]) {

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;