@wpmoo/ui 1.0.0-rc.3 → 1.0.0-rc.5

package/scss/components/sidebar/_menus.scss

@@ -0,0 +1,236 @@
+// Menus ------------------------------------------------------------------
+.sidebar-menu {
+  display: flex;
+  flex-direction: column;
+  gap: $spacer * 0.25;
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sidebar-menu-item {
+  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;
+}
+
+.sidebar-menu-button {
+  display: flex;
+  align-items: center;
+  gap: $spacer * 0.5;
+  width: 100%;
+  min-width: 0;
+  height: $spacer * 2;
+  padding-inline: $spacer * 0.5;
+  overflow: hidden;
+  color: var(--moo-sidebar-foreground);
+  font-size: $font-size-base;
+  text-align: start;
+  text-decoration: none;
+  border: 0;
+  border-radius: var(--bs-border-radius);
+  background: transparent;
+}
+
+.sidebar-menu-button:hover {
+  color: var(--moo-sidebar-foreground);
+  background: var(--moo-sidebar-accent);
+}
+
+.sidebar-menu-button--account[aria-expanded="true"] {
+  color: var(--moo-sidebar-foreground);
+  background: var(--moo-sidebar-accent);
+}
+
+.sidebar-menu-button--account[aria-expanded="true"] .sidebar-menu-button__end [data-icon] {
+  color: var(--moo-sidebar-foreground);
+}
+
+.sidebar-menu-button.sidebar-menu-button--account,
+.sidebar-menu-button.sidebar-menu-button--workspace {
+  cursor: default;
+}
+
+.sidebar-menu-item--account {
+  padding-inline: 0;
+}
+
+.sidebar-menu-item--account > .sidebar-menu-button--account {
+  height: $spacer * 3;
+  min-height: $spacer * 3;
+  padding: $spacer * 0.5;
+}
+
+// A fixed brand lockup, not an interactive control: no hover affordance.
+.sidebar-menu-button--static:hover {
+  background: transparent;
+}
+
+.sidebar-menu-button[aria-current="page"] {
+  font-weight: $font-weight-medium;
+  background: var(--moo-sidebar-accent);
+}
+
+.sidebar-content:has(.sidebar-menu:is(:hover, :focus-within)) .sidebar-menu-button[aria-current="page"]:not(:hover):not(:focus-visible),
+.sidebar-content:has(.sidebar-menu-button:not([aria-current="page"]):is(:hover, :focus-visible)) .sidebar-menu-button[aria-current="page"]:not(:hover):not(:focus-visible) {
+  background: transparent;
+}
+
+.sidebar-menu-button--lg {
+  height: $spacer * 3;
+  padding: $spacer * 0.5;
+}
+
+.sidebar-menu-button__lead {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+}
+
+.sidebar-menu-button__lead [data-icon] {
+  width: $font-size-base;
+  height: $font-size-base;
+}
+
+.sidebar-menu-button[aria-current="page"] .sidebar-menu-button__lead [data-icon] {
+  color: var(--moo-sidebar-foreground);
+}
+
+.sidebar-menu-button__text {
+  display: grid;
+  flex: 1 1 auto;
+  min-width: 0;
+  line-height: 1.2;
+}
+
+.sidebar-menu-button__title {
+  overflow: hidden;
+  font-size: $font-size-base;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidebar-menu-button--lg .sidebar-menu-button__title {
+  font-weight: $font-weight-medium;
+}
+
+.sidebar-menu-button__subtitle {
+  overflow: hidden;
+  color: var(--moo-muted-foreground);
+  font-size: $font-size-base * 0.857;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidebar-menu-button__end {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  margin-inline-start: auto;
+}
+
+.sidebar-menu-button__end [data-icon] {
+  width: $font-size-base;
+  height: $font-size-base;
+  color: var(--moo-muted-foreground);
+}
+
+.sidebar-menu-button--disclosure[aria-expanded="true"] .sidebar-menu-button__end [data-icon] {
+  transform: rotate(90deg);
+}
+
+.sidebar-menu-button__end [data-icon] {
+  transition: transform 0.15s ease;
+}
+
+.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);
+  list-style: none;
+}
+
+.sidebar-menu-sub-button {
+  height: $spacer * 1.75;
+  font-size: $font-size-base * 0.929;
+}
+
+.sidebar-menu-sub-item {
+  position: relative;
+}
+
+.sidebar-menu-action {
+  position: absolute;
+  inset-inline-end: $spacer * 0.25;
+  inset-block: 0;
+  display: flex;
+  align-items: center;
+  z-index: 1;
+}
+
+.sidebar-menu-action:has(> [data-popper-placement]) {
+  z-index: 2;
+}
+
+.sidebar-menu-action > button {
+  color: var(--moo-muted-foreground);
+}
+
+.sidebar-menu-action > button:hover {
+  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;
+  top: $spacer * 0.75;
+  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;
+  inset-block: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  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;
+}
+
+.sidebar-menu-sub-item:has(> .sidebar-menu-badge) > .sidebar-menu-button {
+  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;
+}
+
+.sidebar-menu-item:has(> .sidebar-menu-action):has(> .sidebar-menu-badge) > .sidebar-menu-button {
+  padding-inline-end: $spacer * 4.5;
+}

package/scss/foundations/_core_global_primitives.scss

@@ -0,0 +1,5 @@
+@import "../utilities/scroll_fade_primitives";
+
+@keyframes moo-spinner-rotate {
+  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
+}

package/scss/foundations/_core_state_layer.scss

@@ -0,0 +1,25 @@
+:where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) .form-select,
+.moo-ui[data-bs-theme="dark"] .form-select {
+  --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
+}
+
+:where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) .form-switch .form-check-input:not(:checked):not(:focus),
+.moo-ui[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked):not(:focus) {
+  --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
+}
+
+:where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) .form-switch .form-check-input:checked,
+.moo-ui[data-bs-theme="dark"] .form-switch .form-check-input:checked {
+  --#{$prefix}form-switch-bg: #{escape-svg($moo-switch-checked-bg-image-dark)};
+
+  background-color: var(--moo-primary);
+  border-color: var(--moo-primary);
+  filter: none;
+}
+
+:where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) .form-switch .form-check-input:focus:active:not(:checked),
+:where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) .form-switch .form-check-input:focus:not(:focus-visible):not(:checked),
+.moo-ui[data-bs-theme="dark"] .form-switch .form-check-input:focus:active:not(:checked),
+.moo-ui[data-bs-theme="dark"] .form-switch .form-check-input:focus:not(:focus-visible):not(:checked) {
+  --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
+}

package/scss/foundations/_focus.scss

@@ -0,0 +1,139 @@
+// 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);
+  outline: 0;
+  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;
+}
+
+.page-item:not(.active) > .page-link:focus:not(:focus-visible) {
+  color: var(--bs-pagination-color);
+  background-color: var(--bs-pagination-bg);
+  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,
+.was-validated .form-control:invalid:focus,
+.form-select.is-invalid,
+.form-select.is-invalid:focus,
+.was-validated .form-select:invalid,
+.was-validated .form-select:invalid:focus {
+  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;
+}
+
+.btn-check:focus-visible + .btn {
+  border-color: var(--moo-ring);
+  outline: 0;
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
+}
+
+.input-group > .dropdown-toggle[aria-expanded="true"]:focus-visible {
+  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;
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
+}
+
+.input-group:has(> .form-control:focus):not(:has(> .form-control[type="file"])) {
+  border-color: var(--moo-ring);
+  outline: 0;
+  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);
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} var(--moo-form-invalid-ring-color);
+}
+
+.input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))) > :is(.form-control, .form-select).is-invalid,
+.was-validated .input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))) > :is(.form-control, .form-select):invalid {
+  box-shadow: none;
+}

package/scss/foundations/_overlay_backdrop.scss

@@ -0,0 +1,19 @@
+// 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-backdrop,
+.offcanvas-backdrop {
+  --#{$prefix}backdrop-opacity: var(--moo-overlay-backdrop-opacity, #{$moo-overlay-backdrop-opacity});
+  background-color: var(--moo-overlay-backdrop-bg, #{$moo-overlay-backdrop-bg});
+  -webkit-backdrop-filter: var(--moo-overlay-backdrop-filter, #{$moo-overlay-backdrop-filter});
+  backdrop-filter: var(--moo-overlay-backdrop-filter, #{$moo-overlay-backdrop-filter});
+}
+
+.modal-backdrop.show,
+.offcanvas-backdrop.show {
+  // 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.
+  opacity: var(--moo-overlay-backdrop-opacity, #{$moo-overlay-backdrop-opacity});
+}

package/scss/moo-core.scss

@@ -0,0 +1,47 @@
+/*!
+ * Moo UI core
+ * Copyright (c) 2026 WPMoo (wpmoo.org)
+ * Includes Bootstrap 5.3.3 component output
+ * SPDX-License-Identifier: MIT
+ */
+$enable-dark-mode: false;
+$moo-spinner-animation-name: moo-spinner-rotate;
+
+@import "bootstrap/scss/functions";
+@import "settings";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+@import "themes/scoped_core";
+@import "foundations/core_global_primitives";
+
+.moo-ui {
+  @include moo-core-scales;
+  @include moo-core-shared;
+  @include moo-core-light;
+}
+
+:where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) {
+  @include moo-core-dark;
+}
+
+.moo-ui[data-bs-theme="light"] {
+  @include moo-core-light;
+}
+
+.moo-ui[data-bs-theme="dark"] {
+  @include moo-core-dark;
+}
+
+.moo-ui[dir="rtl"] {
+  direction: rtl;
+}
+
+@scope (.moo-ui) {
+  @import "components";
+}
+
+@import "foundations/core_state_layer";
+@import "foundations/overlay_backdrop";

package/scss/moo-ui.scss

@@ -0,0 +1,50 @@
+@import "settings";
+
+@import "bootstrap/scss/mixins/banner";
+@include bsBanner("");
+
+// Bootstrap configuration
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+
+// Bootstrap layout and standalone-only components
+@import "bootstrap/scss/root";
+@import "themes/standalone_root";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/forms/form-range";
+@import "bootstrap/scss/forms/floating-labels";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/spinners";
+@import "bootstrap/scss/placeholders";
+
+// Bootstrap helpers
+@import "bootstrap/scss/helpers/clearfix";
+@import "bootstrap/scss/helpers/colored-links";
+@import "bootstrap/scss/helpers/focus-ring";
+@import "bootstrap/scss/helpers/icon-link";
+@import "bootstrap/scss/helpers/ratio";
+@import "bootstrap/scss/helpers/position";
+@import "bootstrap/scss/helpers/stacks";
+@import "bootstrap/scss/helpers/visually-hidden";
+@import "bootstrap/scss/helpers/stretched-link";
+@import "bootstrap/scss/helpers/text-truncation";
+@import "bootstrap/scss/helpers/vr";
+
+// Bootstrap utilities
+@import "bootstrap/scss/utilities/api";
+
+@import "utilities/scroll_fade_primitives";
+@import "components";
+@import "foundations/overlay_backdrop";

package/scss/settings/_bootstrap_overrides.scss

@@ -0,0 +1,11 @@
+// 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;
+
+// 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;