@wpmoo/ui 1.0.0-rc.9 → 1.1.0-dev.1

package/scss/components/sidebar/_menus.scss

@@ -1,4 +1,3 @@
-// Menus ------------------------------------------------------------------
 .sidebar-menu {
   display: flex;
   flex-direction: column;
@@ -14,8 +13,6 @@
   position: relative;
 }
 
-// Auto-detect a trailing action so a public consumer doesn't need to
-// remember an extra class for the button to reserve room for it.
 .sidebar-menu-item:has(> .sidebar-menu-action) > .sidebar-menu-button {
   padding-inline-end: $spacer * 2.5;
 }
@@ -67,7 +64,6 @@
   padding: $spacer * 0.5;
 }
 
-// A fixed brand lockup, not an interactive control: no hover affordance.
 .sidebar-menu-button--static:hover {
   background: transparent;
 }
@@ -153,10 +149,6 @@
 .sidebar-menu-sub {
   gap: 0;
   margin: 0;
-  // Aligns the indent line with the center of the parent disclosure
-  // button's icon (padding-inline-start + half the icon width), so the
-  // line reads as a continuation of the icon column above it instead of
-  // sitting flush with the group edge.
   margin-inline-start: $spacer * 0.5 + $font-size-base * 0.5;
   padding-inline-start: $spacer * 0.5;
   border-inline-start: var(--bs-border-width) solid var(--moo-border);
@@ -193,8 +185,6 @@
   color: var(--moo-sidebar-foreground);
 }
 
-// Overlays the group's top-right corner, vertically centered against the
-// group label row ($moo group padding + half the label/button height delta).
 .sidebar-group-action {
   position: absolute;
   z-index: 1;
@@ -202,8 +192,6 @@
   inset-inline-end: $spacer * 0.5;
 }
 
-// Overlays the trailing edge of the menu row it belongs to, matching
-// .sidebar-menu-action's slot so both compose the same visual contract.
 .sidebar-menu-badge {
   position: absolute;
   inset-inline-end: $spacer * 0.25;
@@ -214,7 +202,6 @@
   pointer-events: none;
 }
 
-// Reserve room so a long title doesn't run under the badge.
 .sidebar-menu-item:has(> .sidebar-menu-badge) > .sidebar-menu-button {
   padding-inline-end: $spacer * 2.5;
 }
@@ -223,10 +210,6 @@
   padding-inline-end: $spacer * 2.5;
 }
 
-// A menu item can combine a trailing action with a badge, such as an unread
-// count beside a "..." overflow menu. Both default to the same trailing
-// slot, so shift the badge inward past the action's footprint and reserve
-// extra title space for the pair instead of just one accessory's width.
 .sidebar-menu-item:has(> .sidebar-menu-action) > .sidebar-menu-badge {
   inset-inline-end: $spacer * 2;
 }

package/scss/foundations/_backdrop.scss

@@ -1,16 +1,3 @@
-// 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;
@@ -22,16 +9,10 @@
     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;
@@ -50,9 +31,6 @@
 }
 
 @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;
   }
@@ -104,10 +82,6 @@
   @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 {

package/scss/foundations/_focus.scss

@@ -1,24 +1,8 @@
-// Bootstrap form labels and check/radio/switch labels sit inside clickable
-// control surfaces in Moo UI, so keep them from selecting text during pointer
-// interaction without making Field own every label selector.
 .form-label,
 .form-check-label {
   user-select: none;
 }
 
-// One shared focus-visible recipe for essentially every focusable surface --
-// border swaps to the ring color and a 3px/50%-opacity ring surrounds the
-// control. Matches the reference exactly, which repeats this same
-// identical recipe (border-ring + ring-[3px] + ring-ring/50) across buttons,
-// links, dialog/dropdown/popover/select triggers, tabs, and toggle-group
-// items as well as native form controls, rather than a different treatment
-// per component family. Placed ahead of the is-invalid rule below so that
-// invalid controls can keep the same ring width while swapping only the
-// color. The explicit
-// outline: 0 replaces the browser's own default focus ring (an amber
-// auto-style outline on Chromium) that would otherwise show through on any
-// element -- plain sidebar/nav <a> tags included -- that Bootstrap doesn't
-// already reset at the .btn level.
 :is(.btn, a, button, summary, [tabindex]):not(input, textarea, select):focus-visible,
 :is(.form-control, .form-select, .form-check-input):focus-visible {
   border-color: var(--moo-ring);
@@ -26,36 +10,18 @@
   box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
 }
 
-// Buttons keep their hover/open treatment after pointer clicks; the ring is
-// reserved for keyboard focus on the resting control.
 .btn:focus-visible:hover,
 .btn.show:focus-visible {
   border-color: var(--bs-btn-hover-border-color);
   box-shadow: none;
 }
 
-// Mouse-triggered focus keeps the resting border and shows no ring, same
-// as every other interactive surface on the site (.form-check-input's own
-// equivalent lives in components/_checkbox.scss, next to its checked/
-// indeterminate border-color variants).
 .form-control:focus:not(:focus-visible),
 .form-select:focus:not(:focus-visible) {
   border-color: var(--moo-border);
   box-shadow: none;
 }
 
-// Bootstrap's own .page-link:focus (vendor/bootstrap/scss/_pagination.scss)
-// applies its background/color/outline/box-shadow on any focus, including
-// mouse clicks -- unlike every other control here, it was never gated
-// behind :focus-visible, so clicking a page number (which also makes it the
-// active page) showed a ring the reference only shows for keyboard focus.
-// The ring/outline never carries active-state meaning (Bootstrap's own
-// ".active > &" rule never sets box-shadow), so it's always safe to drop on
-// non-keyboard focus, active page included. color/bg/border only revert to
-// resting when the page isn't the current one, so the active page keeps its
-// own look while it holds mouse focus. Real keyboard focus still gets the
-// shared ring above, since .page-link is a <button> and already matches
-// that selector.
 .page-link:focus:not(:focus-visible) {
   outline: 0;
   box-shadow: none;
@@ -67,10 +33,6 @@
   border-color: var(--bs-pagination-border-color);
 }
 
-// Bootstrap shows validation glow only on :focus, while the reference keeps a
-// subtle destructive ring visible for invalid controls. Keep it on native
-// form-control/form-select classes so Input, Select, Field, and Combobox share
-// the same validation affordance.
 .form-control.is-invalid,
 .form-control.is-invalid:focus,
 .was-validated .form-control:invalid,
@@ -82,12 +44,6 @@
   box-shadow: 0 0 0 #{$moo-form-focus-ring-width} var(--moo-form-invalid-ring-color);
 }
 
-// .btn-check toggle buttons (Toggle Group) put focus on the hidden input,
-// never the visible label, so the rule above can never match them; only
-// variants generated through Bootstrap's button-variant mixin (real theme
-// colors) get a working native focus glow, so btn-ghost/outline consumers
-// would otherwise show no ring at all. Share the same ring here instead of
-// patching --bs-btn-focus-box-shadow per variant.
 .btn-check:focus:not(:focus-visible) + .btn {
   outline: 0;
   box-shadow: none;
@@ -103,15 +59,6 @@
   box-shadow: none;
 }
 
-// Compound controls whose native input isn't the outer visual box (Combobox's
-// chip row, Input Group's addon-wrapped control) need the same ring painted
-// on the wrapper instead of the child. Kept here rather than in each
-// component's own partial so every focus-ring declaration in the project
-// stays in one file instead of the recipe being copy-pasted per component --
-// component partials contract-test that their own box-shadow declarations
-// stick to Bootstrap's native primitives (test_catalog.py's
-// test_component_styles_use_bootstrap_visual_primitives), and this recipe
-// isn't one of those.
 .combobox-chips:focus-within {
   border-color: var(--moo-ring);
   outline: 0;
@@ -124,9 +71,6 @@
   box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
 }
 
-// Validation input groups are also one visual control. Keep feedback outside the
-// grouped control, then paint the destructive ring on the wrapper and suppress
-// the child ring.
 .input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))):has(> :is(.form-control, .form-select).is-invalid),
 .was-validated .input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))):has(> :is(.form-control, .form-select):invalid) {
   border-color: var(--bs-form-invalid-border-color);

package/scss/foundations/_scope.scss

@@ -1,13 +1,28 @@
 @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";
+  @import "../utilities/scroll_smooth";
+  /* 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%);
 }
@@ -40,27 +35,17 @@
   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;
@@ -75,16 +60,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 +77,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.1.0-dev.1 (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;