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

package/dist/js/sidebar.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI sidebar.js v1.0.0-rc.4 (https://ui.wpmoo.org/)
+ * Moo UI sidebar.js v1.0.0-rc.5 (https://ui.wpmoo.org/)
  * Copyright 2026 WPMoo (https://wpmoo.org)
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/slider.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI slider.js v1.0.0-rc.4 (https://ui.wpmoo.org/)
+ * Moo UI slider.js v1.0.0-rc.5 (https://ui.wpmoo.org/)
  * Copyright 2026 WPMoo (https://wpmoo.org)
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpmoo/ui",
-  "version": "1.0.0-rc.4",
+  "version": "1.0.0-rc.5",
   "description": "Bootstrap markup. shadcn feel. A frontend-framework-free component system for server-rendered apps.",
   "license": "MIT",
   "author": "WPMoo (https://wpmoo.org)",
@@ -17,7 +17,11 @@
   "scripts": {
     "build": ".venv/bin/python build.py",
     "dev": ".venv/bin/python dev.py",
-    "test": ".venv/bin/python -m unittest discover -s tests -v",
+    "test": ".venv/bin/python scripts/run-test-tier.py run release",
+    "test:quick": ".venv/bin/python scripts/run-test-tier.py run quick",
+    "test:browser-smoke": ".venv/bin/python scripts/run-test-tier.py run browser-smoke",
+    "test:browser-full": ".venv/bin/python scripts/run-test-tier.py run browser-full",
+    "test:release": ".venv/bin/python scripts/run-test-tier.py run release",
     "deploy": "wrangler deploy",
     "preview": "wrangler dev"
   },
@@ -94,7 +98,7 @@
   "devDependencies": {
     "axe-core": "4.13.0",
     "chart.js": "4.5.1",
-    "esbuild": "0.28.1",
+    "esbuild": "0.28.2",
     "wrangler": "^4.120.0"
   }
 }

package/scss/components/_accordion.scss

@@ -57,3 +57,9 @@
 .accordion-flush .accordion-button {
   font-weight: $font-weight-medium;
 }
+
+// A card owns its own surface, so a nested accordion must let that surface
+// show through instead of painting Bootstrap's body background on top of it.
+.card .accordion {
+  --bs-accordion-bg: #{$moo-accordion-contained-bg};
+}

package/scss/components/_button_group.scss

@@ -12,6 +12,36 @@
   unicode-bidi: plaintext;
 }
 
+// Bootstrap raises hovered, focused, and active group buttons above siblings
+// so the current border wins the shared seam. In a mixed-emphasis group (for
+// example primary + outline) pointer interaction paints one pixel into the
+// neighbor and reads like a width jump. Keep keyboard focus, active classes,
+// and checked inputs stacked, but let plain pointer hover/click use DOM order
+// so the joined edge stays visually stable.
+.btn-group > .btn:hover:not(:focus-visible):not(.active),
+.btn-group > .btn:focus:not(:focus-visible):not(.active),
+.btn-group > .btn:active:not(:focus-visible):not(.active),
+.btn-group-vertical > .btn:hover:not(:focus-visible):not(.active),
+.btn-group-vertical > .btn:focus:not(:focus-visible):not(.active),
+.btn-group-vertical > .btn:active:not(:focus-visible):not(.active) {
+  z-index: auto;
+}
+
+.btn-group > .btn-check:checked + .btn:hover,
+.btn-group > .btn-check:focus + .btn:hover,
+.btn-group-vertical > .btn-check:checked + .btn:hover,
+.btn-group-vertical > .btn-check:focus + .btn:hover {
+  z-index: 1;
+}
+
+// A button group is one compound control surface; pressing one segment should
+// not translate that segment away from its joined border while siblings stay
+// still. The active color change remains as the press affordance.
+.btn-group > .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active,
+.btn-group-vertical > .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
+  transform: none;
+}
+
 // Icon buttons in button groups should stay square, not stretch to fill
 // the group width (Bootstrap's flex: 1 1 auto makes them rectangular).
 .btn-group > .btn-icon,

package/scss/components/_card.scss

@@ -7,7 +7,7 @@
 .card {
   --bs-card-bg: color-mix(in srgb, var(--bs-secondary-bg) #{$moo-card-bg-mix}, var(--bs-body-bg));
   --bs-card-color: var(--moo-foreground);
-  --bs-card-border-color: color-mix(in srgb, var(--bs-body-color) #{$moo-card-border-mix}, #{$moo-card-border-mix-base});
+  --bs-card-border-color: var(--moo-border);
   // The reference uses a 14px corner; Bootstrap's shared radius-xl is the
   // closest token and wins the delta (12px here) per the token-first rule.
   --bs-card-border-radius: var(--bs-border-radius-xl);

package/scss/components/_input_group.scss

@@ -102,7 +102,7 @@
   border-radius: var(--moo-input-group-border-radius);
   background-color: var(--moo-muted-surface);
   opacity: 0;
-  transition: opacity $transition-fade;
+  transition: $transition-fade;
 }
 
 .input-group > .btn-ghost:hover::before,

package/scss/moo-ui.scss

@@ -13,6 +13,7 @@
 
 // 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";
@@ -44,7 +45,6 @@
 // Bootstrap utilities
 @import "bootstrap/scss/utilities/api";
 
-@import "themes/standalone_root";
 @import "utilities/scroll_fade_primitives";
 @import "components";
 @import "foundations/overlay_backdrop";

package/scss/settings/_component_variables.scss

@@ -150,6 +150,10 @@ $moo-switch-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://ww
 // changes nothing but the chevron and revealed content.
 $accordion-button-active-bg: var(--bs-accordion-bg) !default;
 $accordion-button-active-color: var(--bs-accordion-color) !default;
+
+// A nested accordion inherits its Card surface by default, while remaining
+// configurable for Sass consumers that need a distinct contained surface.
+$moo-accordion-contained-bg: transparent !default;
 // Bootstrap's pills nav has no shared-track concept, so the segmented
 // control's track padding/gap and trigger padding have no Bootstrap
 // variable to override — they are private knobs instead of literals in
@@ -182,13 +186,10 @@ $card-title-letter-spacing: -0.01em !default;
 $moo-card-spacing: 1rem !default;
 $moo-card-spacing-sm: 0.75rem !default;
 
-// Card surface and border blends: mix the muted surface over the base surface
-// (and foreground over a transparent base) so cards keep a subtle tint that
-// tracks the runtime theme without hardcoding a color.
+// Card surface blends mix the muted surface over the base surface so cards keep
+// a subtle tint that tracks the runtime theme without hardcoding a color.
 $moo-card-bg-mix: 5% !default;
 $moo-card-bg-mix-dark: 30% !default;
-$moo-card-border-mix: 10% !default;
-$moo-card-border-mix-base: transparent !default;
 
 // Bootstrap exposes one card-cap background for both headers and footers, but
 // the reference needs no header fill and a separately tuned footer surface.
@@ -305,7 +306,7 @@ $moo-form-focus-ring-color: var(--moo-ring) !default;
 // .offcanvas-backdrop selectors; Moo keeps their visual treatment aligned via
 // one token set instead of per-component backdrop rules.
 $moo-overlay-backdrop-opacity: 1 !default;
-$moo-overlay-backdrop-bg: color-mix(in srgb, var(--bs-black) 10%, transparent) !default;
+$moo-overlay-backdrop-bg: color-mix(in srgb, #0a0a0a 10%, transparent) !default;
 $moo-overlay-backdrop-filter: blur(8px) !default;
 
 // A quieter elevation scale and the extra radius step, applied UI-wide through

package/scss/themes/_standalone_root.scss

@@ -62,6 +62,7 @@
   --bs-body-bg-rgb: #{to-rgb($moo-surface)};
   --bs-secondary-bg: var(--moo-muted-surface);
   --bs-secondary-bg-rgb: #{to-rgb($moo-muted-surface)};
+  --bs-border-color: var(--moo-border);
   --bs-tertiary-bg: #{$body-tertiary-bg};
   --bs-tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
   --bs-tertiary-color: #{$body-tertiary-color};
@@ -108,6 +109,7 @@
   --bs-body-bg-rgb: #{to-rgb($moo-surface-dark)};
   --bs-secondary-bg: var(--moo-muted-surface);
   --bs-secondary-bg-rgb: #{to-rgb($moo-muted-surface-dark)};
+  --bs-border-color: var(--moo-border);
   --bs-tertiary-bg: #{$body-tertiary-bg-dark};
   --bs-tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
   --bs-tertiary-color: #{$body-tertiary-color-dark};