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

package/ASSET_LICENSE.md

@@ -14,6 +14,6 @@ product, site, template, library, training dataset, or marketing asset without
 prior written permission from WPMoo.
 
 Third-party assets remain under their own licenses. See the
-[version-pinned third-party notices](https://github.com/wpmoo-org/ui/blob/v1.0.0-rc.4/THIRD_PARTY_NOTICES.md).
+[version-pinned third-party notices](https://github.com/wpmoo-org/ui/blob/v1.0.0-rc.5/THIRD_PARTY_NOTICES.md).
 Those notices are repository-only and are intentionally not shipped in the npm
 package.

package/README.md

@@ -40,9 +40,10 @@ language needs to feel more current.
 - **Explicit runtime.** Optional Moo UI behavior loads through ESM entrypoints
   only when a component needs behavior Bootstrap does not provide.
 
-This branch prepares `@wpmoo/ui@1.0.0-rc.4` for release. Until that
+This branch prepares `@wpmoo/ui@1.0.0-rc.5` for release. Until that
 npm tag is published, use npm's current published package or the floating
-quick demo below.
+quick demo below. Catalog CodePen exports remain pinned to the latest
+published package until the RC5 npm tag exists.
 
 ## Try It in 30 Seconds
 
@@ -57,6 +58,9 @@ The quick demo intentionally follows the floating npm tag:
 
 `moo-ui.css` is a complete Bootstrap CSS build with Moo UI defaults. Use it
 instead of another Bootstrap stylesheet, not in addition to one.
+It emits Moo UI's root/body theme tokens before Bootstrap's reboot body rules;
+if you persist dark or system mode, set `data-bs-theme` synchronously in the
+head before this stylesheet loads.
 
 ## Install
 
@@ -132,7 +136,7 @@ calm.
 
 ## Status And Support
 
-Moo UI is preparing the `1.0.0-rc.4` release candidate. Public exports, package boundaries, browser support, and release evidence live in [Support & Evidence](https://ui.wpmoo.org/support/).
+Moo UI is preparing the `1.0.0-rc.5` release candidate. Public exports, package boundaries, browser support, and release evidence live in [Support & Evidence](https://ui.wpmoo.org/support/).
 Complete release notes are on
 [GitHub Releases](https://github.com/wpmoo-org/ui/releases).
 
@@ -155,4 +159,4 @@ Moo UI source code is MIT licensed. License details live in
 [LICENSE](LICENSE) and the [License page](https://ui.wpmoo.org/license/).
 Asset terms live in [ASSET_LICENSE.md](ASSET_LICENSE.md); dependency notices
 live in the
-[version-pinned third-party notices](https://github.com/wpmoo-org/ui/blob/v1.0.0-rc.4/THIRD_PARTY_NOTICES.md).
+[version-pinned third-party notices](https://github.com/wpmoo-org/ui/blob/v1.0.0-rc.5/THIRD_PARTY_NOTICES.md).

package/certification.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "0.1",
   "status": "preview",
-  "coreVersion": "1.0.0-rc.4",
+  "coreVersion": "1.0.0-rc.5",
   "bootstrap": {
     "canonicalVersion": "5.3.3",
     "targetRange": ">=5.3.0 <5.4",

package/dist/assets/css/moo-ui.css

@@ -180,6 +180,114 @@
   --bs-form-invalid-border-color: #ea868f;
 }
 
+:root {
+  --moo-overlay-backdrop-opacity: 1;
+  --moo-overlay-backdrop-bg: color-mix(in srgb, #0a0a0a 10%, transparent);
+  --moo-overlay-backdrop-filter: blur(8px);
+  --moo-input-group-border-radius: var(--bs-border-radius-lg);
+  --moo-disabled-control-opacity: 0.5;
+  --moo-sidebar-foreground: var(--moo-foreground);
+  --moo-sidebar-accent: var(--moo-muted-surface);
+  --moo-sidebar-border: var(--moo-border);
+  --moo-chart-1: #52525b;
+  --moo-chart-2: #71717a;
+  --moo-chart-3: #a1a1aa;
+  --moo-chart-4: #3f3f46;
+  --moo-chart-5: #27272a;
+}
+
+:root,
+[data-bs-theme="light"] {
+  --moo-surface: #fff;
+  --moo-muted-surface: #f4f4f5;
+  --moo-border: #e4e4e7;
+  --moo-primary: #171717;
+  --moo-primary-foreground: #fafafa;
+  --moo-foreground: #18181b;
+  --moo-muted-foreground: #71717a;
+  --moo-disabled-foreground: #a1a1aa;
+  --moo-ring: color-mix(in srgb, #fff 60%, #171717);
+  --moo-destructive: #e7000b;
+  --moo-destructive-surface: color-mix(in srgb, #e7000b 3%, transparent);
+  --moo-destructive-surface-hover: color-mix(in srgb, #e7000b 6%, transparent);
+  --moo-destructive-foreground: #e7000b;
+  --moo-form-invalid-ring-color: color-mix(in srgb, #e7000b 20%, transparent);
+  --moo-warning: #b45309;
+  --moo-warning-surface: color-mix(in srgb, #b45309 10%, transparent);
+  --moo-warning-surface-hover: color-mix(in srgb, #b45309 20%, transparent);
+  --moo-warning-foreground: #b45309;
+  --moo-success: #047857;
+  --moo-success-surface: color-mix(in srgb, #047857 10%, transparent);
+  --moo-success-surface-hover: color-mix(in srgb, #047857 20%, transparent);
+  --moo-success-foreground: #047857;
+  --moo-info: #0369a1;
+  --moo-info-surface: color-mix(in srgb, #0369a1 10%, transparent);
+  --moo-info-surface-hover: color-mix(in srgb, #0369a1 20%, transparent);
+  --moo-info-foreground: #0369a1;
+  --moo-sidebar: #fafafa;
+  --bs-body-color: var(--moo-foreground);
+  --bs-body-color-rgb: 24, 24, 27;
+  --bs-heading-color: var(--moo-foreground);
+  --bs-secondary-color: var(--moo-muted-foreground);
+  --bs-body-bg: var(--moo-surface);
+  --bs-body-bg-rgb: 255, 255, 255;
+  --bs-secondary-bg: var(--moo-muted-surface);
+  --bs-secondary-bg-rgb: 244, 244, 245;
+  --bs-border-color: var(--moo-border);
+  --bs-tertiary-bg: #fafafa;
+  --bs-tertiary-bg-rgb: 250, 250, 250;
+  --bs-tertiary-color: #a1a1aa;
+  --bs-tertiary-color-rgb: 161, 161, 170;
+  --bs-form-invalid-color: var(--moo-destructive);
+  --bs-form-invalid-border-color: #e7000b;
+}
+
+[data-bs-theme="dark"] {
+  --moo-surface: #0a0a0a;
+  --moo-muted-surface: #27272a;
+  --moo-border: #3f3f46;
+  --moo-primary: #e4e4e7;
+  --moo-primary-foreground: #18181b;
+  --moo-foreground: #fafafa;
+  --moo-muted-foreground: #a1a1aa;
+  --moo-disabled-foreground: #71717a;
+  --moo-ring: color-mix(in srgb, #fff 40%, #171717);
+  --moo-destructive: #ff6467;
+  --moo-destructive-surface: color-mix(in srgb, #ff6467 20%, transparent);
+  --moo-destructive-surface-hover: color-mix(in srgb, #ff6467 30%, transparent);
+  --moo-destructive-foreground: #ff6467;
+  --moo-form-invalid-ring-color: color-mix(in srgb, #ff6467 40%, transparent);
+  --moo-warning: color-mix(in srgb, #fafafa 60%, #b45309);
+  --moo-warning-surface: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #b45309) 20%, transparent);
+  --moo-warning-surface-hover: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #b45309) 30%, transparent);
+  --moo-warning-foreground: color-mix(in srgb, #fafafa 60%, #b45309);
+  --moo-success: color-mix(in srgb, #fafafa 60%, #047857);
+  --moo-success-surface: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #047857) 20%, transparent);
+  --moo-success-surface-hover: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #047857) 30%, transparent);
+  --moo-success-foreground: color-mix(in srgb, #fafafa 60%, #047857);
+  --moo-info: color-mix(in srgb, #fafafa 60%, #0369a1);
+  --moo-info-surface: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #0369a1) 20%, transparent);
+  --moo-info-surface-hover: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #0369a1) 30%, transparent);
+  --moo-info-foreground: color-mix(in srgb, #fafafa 60%, #0369a1);
+  --moo-sidebar: #1c1c1f;
+  --moo-input-bg: color-mix(in srgb, #27272a 50%, #0a0a0a);
+  --bs-body-color: var(--moo-foreground);
+  --bs-body-color-rgb: 250, 250, 250;
+  --bs-heading-color: var(--moo-foreground);
+  --bs-secondary-color: var(--moo-muted-foreground);
+  --bs-body-bg: var(--moo-surface);
+  --bs-body-bg-rgb: 10, 10, 10;
+  --bs-secondary-bg: var(--moo-muted-surface);
+  --bs-secondary-bg-rgb: 39, 39, 42;
+  --bs-border-color: var(--moo-border);
+  --bs-tertiary-bg: #202024;
+  --bs-tertiary-bg-rgb: 32, 32, 36;
+  --bs-tertiary-color: #71717a;
+  --bs-tertiary-color-rgb: 113, 113, 122;
+  --bs-form-invalid-color: var(--moo-destructive);
+  --bs-form-invalid-border-color: color-mix(in srgb, #ff6467 50%, transparent);
+}
+
 *,
 *::before,
 *::after {
@@ -8425,112 +8533,6 @@ progress {
   }
 }
 
-:root {
-  --moo-overlay-backdrop-opacity: 1;
-  --moo-overlay-backdrop-bg: color-mix(in srgb, var(--bs-black) 10%, transparent);
-  --moo-overlay-backdrop-filter: blur(8px);
-  --moo-input-group-border-radius: var(--bs-border-radius-lg);
-  --moo-disabled-control-opacity: 0.5;
-  --moo-sidebar-foreground: var(--moo-foreground);
-  --moo-sidebar-accent: var(--moo-muted-surface);
-  --moo-sidebar-border: var(--moo-border);
-  --moo-chart-1: #52525b;
-  --moo-chart-2: #71717a;
-  --moo-chart-3: #a1a1aa;
-  --moo-chart-4: #3f3f46;
-  --moo-chart-5: #27272a;
-}
-
-:root,
-[data-bs-theme="light"] {
-  --moo-surface: #fff;
-  --moo-muted-surface: #f4f4f5;
-  --moo-border: #e4e4e7;
-  --moo-primary: #171717;
-  --moo-primary-foreground: #fafafa;
-  --moo-foreground: #18181b;
-  --moo-muted-foreground: #71717a;
-  --moo-disabled-foreground: #a1a1aa;
-  --moo-ring: color-mix(in srgb, #fff 60%, #171717);
-  --moo-destructive: #e7000b;
-  --moo-destructive-surface: color-mix(in srgb, #e7000b 3%, transparent);
-  --moo-destructive-surface-hover: color-mix(in srgb, #e7000b 6%, transparent);
-  --moo-destructive-foreground: #e7000b;
-  --moo-form-invalid-ring-color: color-mix(in srgb, #e7000b 20%, transparent);
-  --moo-warning: #b45309;
-  --moo-warning-surface: color-mix(in srgb, #b45309 10%, transparent);
-  --moo-warning-surface-hover: color-mix(in srgb, #b45309 20%, transparent);
-  --moo-warning-foreground: #b45309;
-  --moo-success: #047857;
-  --moo-success-surface: color-mix(in srgb, #047857 10%, transparent);
-  --moo-success-surface-hover: color-mix(in srgb, #047857 20%, transparent);
-  --moo-success-foreground: #047857;
-  --moo-info: #0369a1;
-  --moo-info-surface: color-mix(in srgb, #0369a1 10%, transparent);
-  --moo-info-surface-hover: color-mix(in srgb, #0369a1 20%, transparent);
-  --moo-info-foreground: #0369a1;
-  --moo-sidebar: #fafafa;
-  --bs-body-color: var(--moo-foreground);
-  --bs-body-color-rgb: 24, 24, 27;
-  --bs-heading-color: var(--moo-foreground);
-  --bs-secondary-color: var(--moo-muted-foreground);
-  --bs-body-bg: var(--moo-surface);
-  --bs-body-bg-rgb: 255, 255, 255;
-  --bs-secondary-bg: var(--moo-muted-surface);
-  --bs-secondary-bg-rgb: 244, 244, 245;
-  --bs-tertiary-bg: #fafafa;
-  --bs-tertiary-bg-rgb: 250, 250, 250;
-  --bs-tertiary-color: #a1a1aa;
-  --bs-tertiary-color-rgb: 161, 161, 170;
-  --bs-form-invalid-color: var(--moo-destructive);
-  --bs-form-invalid-border-color: #e7000b;
-}
-
-[data-bs-theme="dark"] {
-  --moo-surface: #0a0a0a;
-  --moo-muted-surface: #27272a;
-  --moo-border: #3f3f46;
-  --moo-primary: #e4e4e7;
-  --moo-primary-foreground: #18181b;
-  --moo-foreground: #fafafa;
-  --moo-muted-foreground: #a1a1aa;
-  --moo-disabled-foreground: #71717a;
-  --moo-ring: color-mix(in srgb, #fff 40%, #171717);
-  --moo-destructive: #ff6467;
-  --moo-destructive-surface: color-mix(in srgb, #ff6467 20%, transparent);
-  --moo-destructive-surface-hover: color-mix(in srgb, #ff6467 30%, transparent);
-  --moo-destructive-foreground: #ff6467;
-  --moo-form-invalid-ring-color: color-mix(in srgb, #ff6467 40%, transparent);
-  --moo-warning: color-mix(in srgb, #fafafa 60%, #b45309);
-  --moo-warning-surface: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #b45309) 20%, transparent);
-  --moo-warning-surface-hover: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #b45309) 30%, transparent);
-  --moo-warning-foreground: color-mix(in srgb, #fafafa 60%, #b45309);
-  --moo-success: color-mix(in srgb, #fafafa 60%, #047857);
-  --moo-success-surface: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #047857) 20%, transparent);
-  --moo-success-surface-hover: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #047857) 30%, transparent);
-  --moo-success-foreground: color-mix(in srgb, #fafafa 60%, #047857);
-  --moo-info: color-mix(in srgb, #fafafa 60%, #0369a1);
-  --moo-info-surface: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #0369a1) 20%, transparent);
-  --moo-info-surface-hover: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #0369a1) 30%, transparent);
-  --moo-info-foreground: color-mix(in srgb, #fafafa 60%, #0369a1);
-  --moo-sidebar: #1c1c1f;
-  --moo-input-bg: color-mix(in srgb, #27272a 50%, #0a0a0a);
-  --bs-body-color: var(--moo-foreground);
-  --bs-body-color-rgb: 250, 250, 250;
-  --bs-heading-color: var(--moo-foreground);
-  --bs-secondary-color: var(--moo-muted-foreground);
-  --bs-body-bg: var(--moo-surface);
-  --bs-body-bg-rgb: 10, 10, 10;
-  --bs-secondary-bg: var(--moo-muted-surface);
-  --bs-secondary-bg-rgb: 39, 39, 42;
-  --bs-tertiary-bg: #202024;
-  --bs-tertiary-bg-rgb: 32, 32, 36;
-  --bs-tertiary-color: #71717a;
-  --bs-tertiary-color-rgb: 113, 113, 122;
-  --bs-form-invalid-color: var(--moo-destructive);
-  --bs-form-invalid-border-color: color-mix(in srgb, #ff6467 50%, transparent);
-}
-
 @property --moo-scroll-fade-t {
   syntax: "<length-percentage>";
   inherits: false;
@@ -12824,7 +12826,7 @@ textarea.form-control:disabled {
   border-radius: var(--moo-input-group-border-radius);
   background-color: var(--moo-muted-surface);
   opacity: 0;
-  transition: opacity opacity 0.15s linear;
+  transition: opacity 0.15s linear;
 }
 
 .input-group > .btn-ghost:hover::before,
@@ -13176,6 +13178,27 @@ label.btn {
   unicode-bidi: plaintext;
 }
 
+.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;
+}
+
+.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;
+}
+
 .btn-group > .btn-icon,
 .btn-group > .btn-icon-xs,
 .btn-group > .btn-icon-sm,
@@ -13222,7 +13245,7 @@ label.btn {
 .card {
   --bs-card-bg: color-mix(in srgb, var(--bs-secondary-bg) 5%, var(--bs-body-bg));
   --bs-card-color: var(--moo-foreground);
-  --bs-card-border-color: color-mix(in srgb, var(--bs-body-color) 10%, transparent);
+  --bs-card-border-color: var(--moo-border);
   --bs-card-border-radius: var(--bs-border-radius-xl);
   --bs-card-inner-border-radius: calc(var(--bs-card-border-radius) - var(--bs-card-border-width));
   --bs-card-box-shadow: var(--bs-box-shadow-sm);
@@ -15017,6 +15040,10 @@ hr {
   font-weight: 500;
 }
 
+.card .accordion {
+  --bs-accordion-bg: transparent;
+}
+
 .tabs-list {
   display: inline-flex;
   gap: 0.125rem;
@@ -17030,7 +17057,7 @@ ul.context-menu-menu:focus-visible {
 .modal-backdrop,
 .offcanvas-backdrop {
   --bs-backdrop-opacity: var(--moo-overlay-backdrop-opacity, 1);
-  background-color: var(--moo-overlay-backdrop-bg, color-mix(in srgb, var(--bs-black) 10%, transparent));
+  background-color: var(--moo-overlay-backdrop-bg, color-mix(in srgb, #0a0a0a 10%, transparent));
   -webkit-backdrop-filter: var(--moo-overlay-backdrop-filter, blur(8px));
   backdrop-filter: var(--moo-overlay-backdrop-filter, blur(8px));
 }