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

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.6/THIRD_PARTY_NOTICES.md).
 Those notices are repository-only and are intentionally not shipped in the npm
 package.

package/README.md

@@ -40,9 +40,9 @@ 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
-npm tag is published, use npm's current published package or the floating
-quick demo below.
+This branch prepares `@wpmoo/ui@1.0.0-rc.6` for release. The published RC5
+package remains the CDN baseline for catalog CodePen exports until the RC6 npm
+tag exists.
 
 ## Try It in 30 Seconds
 
@@ -57,6 +57,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 +135,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.6` 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 +158,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.6/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.6",
   "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);
@@ -13330,6 +13353,10 @@ label.btn {
   color: var(--moo-muted-foreground);
 }
 
+.card .table {
+  --bs-table-bg: transparent;
+}
+
 .table-responsive:not(.scroll-fade-x):has(.table-row-actions > [aria-expanded="true"]) {
   overflow: visible;
 }
@@ -13478,17 +13505,49 @@ label.btn {
   }
 }
 
+@media (min-width: 576px) and (max-width: 991.98px) {
+  [data-slot="sidebar-header"] .dropend > .dropdown-menu,
+[data-slot="sidebar-footer"] .dropend > .dropdown-menu {
+    left: 0 !important;
+    right: 0 !important;
+    min-width: 100%;
+    margin: 0;
+    transform: none !important;
+  }
+  [data-slot="sidebar-header"] .dropend > .dropdown-menu {
+    top: calc(100% + 0.25rem) !important;
+    bottom: auto !important;
+  }
+  [data-slot="sidebar-footer"] .dropend > .dropdown-menu {
+    top: auto !important;
+    bottom: calc(100% + 0.25rem) !important;
+  }
+}
+
 @media (min-width: 992px) {
-  [data-slot="sidebar-header"] [data-sidebar-dropdown-positioned] > .dropdown-menu {
+  [data-slot="sidebar-header"] [data-sidebar-dropdown-positioned] > .dropdown-menu,
+[data-slot="sidebar-footer"] [data-sidebar-dropdown-positioned] > .dropdown-menu {
     position: fixed !important;
     z-index: 1000;
-    inset-block-start: var(--moo-sidebar-dropdown-block-start) !important;
-    inset-inline-start: var(--moo-sidebar-dropdown-inline-start) !important;
+    inset-inline-start: var(--moo-sidebar-dropdown-inline-start, auto) !important;
+    inset-inline-end: auto !important;
     width: var(--moo-dropdown-sidebar-min-width);
     min-width: var(--moo-dropdown-sidebar-min-width);
     margin: 0;
     transform: none !important;
   }
+  [data-slot="sidebar-header"] [data-sidebar-dropdown-positioned] > .dropdown-menu {
+    inset-block-start: var(--moo-sidebar-dropdown-block-start) !important;
+  }
+  [data-slot="sidebar-footer"] [data-sidebar-dropdown-positioned] > .dropdown-menu {
+    inset-block-start: auto !important;
+    inset-block-end: var(--moo-sidebar-dropdown-block-end) !important;
+  }
+  [data-slot="sidebar"][data-side="right"] [data-slot="sidebar-header"] [data-sidebar-dropdown-positioned] > .dropdown-menu,
+[data-slot="sidebar"][data-side="right"] [data-slot="sidebar-footer"] [data-sidebar-dropdown-positioned] > .dropdown-menu {
+    inset-inline-start: auto !important;
+    inset-inline-end: var(--moo-sidebar-dropdown-inline-end, auto) !important;
+  }
 }
 
 .menubar {
@@ -14220,6 +14279,13 @@ label.btn {
   .sidebar {
     position: relative;
   }
+  .sidebar-wrapper:has([data-sidebar-dropdown-positioned] > .dropdown-menu.show) > .sidebar {
+    position: relative;
+    z-index: 1000;
+  }
+  .sidebar-wrapper:has([data-sidebar-dropdown-positioned] > .dropdown-menu.show) > .sidebar > .sidebar-inner {
+    z-index: 1000;
+  }
   .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] {
     flex-basis: var(--moo-sidebar-width-icon);
     width: var(--moo-sidebar-width-icon);
@@ -15017,6 +15083,10 @@ hr {
   font-weight: 500;
 }
 
+.card .accordion {
+  --bs-accordion-bg: transparent;
+}
+
 .tabs-list {
   display: inline-flex;
   gap: 0.125rem;
@@ -16046,6 +16116,7 @@ ul.context-menu-menu:focus-visible {
 
 .datatable {
   --moo-datatable-min-width: 48rem;
+  --moo-datatable-actions-cell-bg: var(--bs-body-bg);
   --moo-datatable-actions-cell-fade-width: 1.25rem;
   --moo-datatable-card-label-width: 7rem;
   --moo-datatable-frame-header-min-height: 2.78125rem;
@@ -16058,6 +16129,10 @@ ul.context-menu-menu:focus-visible {
   --moo-datatable-bulk-actions-bottom: 1rem;
 }
 
+.card .datatable {
+  --moo-datatable-actions-cell-bg: var(--bs-card-bg);
+}
+
 .datatable-table {
   table-layout: fixed;
 }
@@ -16091,12 +16166,12 @@ ul.context-menu-menu:focus-visible {
   position: sticky;
   inset-inline-end: 0;
   z-index: 2;
-  background: linear-gradient(90deg, transparent 0, var(--bs-body-bg) var(--moo-datatable-actions-cell-fade-width));
+  background: linear-gradient(90deg, transparent 0, var(--moo-datatable-actions-cell-bg) var(--moo-datatable-actions-cell-fade-width));
 }
 
 [dir="rtl"] .datatable-frame [data-datatable-column="actions"],
 .datatable-frame [dir="rtl"] [data-datatable-column="actions"] {
-  background: linear-gradient(270deg, transparent 0, var(--bs-body-bg) var(--moo-datatable-actions-cell-fade-width));
+  background: linear-gradient(270deg, transparent 0, var(--moo-datatable-actions-cell-bg) var(--moo-datatable-actions-cell-fade-width));
 }
 
 .datatable-card-frame:has(.datatable-card .dropdown-menu.show) {
@@ -16171,6 +16246,10 @@ ul.context-menu-menu:focus-visible {
   width: 100%;
 }
 
+.datatable-searchbar:not(:has(> .dropdown-menu.show)) {
+  overflow: hidden;
+}
+
 .datatable-searchbar .datatable-search {
   flex: 1 1 auto;
   max-width: none;
@@ -16183,7 +16262,7 @@ ul.context-menu-menu:focus-visible {
   position: absolute;
   inset-block-start: 50%;
   inset-inline-start: 0.625rem;
-  z-index: 2;
+  z-index: 6;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -16717,6 +16796,11 @@ ul.context-menu-menu:focus-visible {
   background-color: var(--moo-muted-surface);
 }
 
+.datatable-row-selected > [data-datatable-column="actions"] {
+  --moo-datatable-actions-cell-bg: var(--moo-muted-surface);
+  background: var(--moo-muted-surface);
+}
+
 .datatable-card.datatable-row-selected {
   border-color: var(--moo-border);
   background-color: var(--moo-muted-surface);
@@ -17030,7 +17114,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));
 }