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

package/dist/assets/css/moo.css

@@ -137,7 +137,7 @@
   --bs-focus-ring-opacity: 0.25;
   --bs-focus-ring-color: var(--moo-ring);
   --moo-overlay-backdrop-opacity: 1;
-  --moo-overlay-backdrop-bg: color-mix(in srgb, var(--bs-black) 10%, transparent);
+  --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;
@@ -4195,7 +4195,7 @@
     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,
 .input-group > .btn-ghost:is(.show, [aria-expanded="true"])::before {
@@ -4491,6 +4491,24 @@ label.btn {
 [dir="rtl"] .btn-toolbar > .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,
@@ -4531,7 +4549,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);
@@ -4623,6 +4641,9 @@ label.btn {
     font-size: 0.875rem;
     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;
   }
@@ -4734,6 +4755,24 @@ label.btn {
   }
   @media (max-width: 575.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: 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;
@@ -4751,16 +4790,29 @@ label.btn {
     }
   }
   @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 {
     gap: 0.125rem;
@@ -5384,6 +5436,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);
@@ -6069,6 +6128,9 @@ label.btn {
   .accordion-flush .accordion-button {
     font-weight: 500;
   }
+  .card .accordion {
+    --bs-accordion-bg: transparent;
+  }
   .tabs-list {
     display: inline-flex;
     gap: 0.125rem;
@@ -6935,6 +6997,7 @@ label.btn {
   }
   .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;
@@ -6946,6 +7009,9 @@ label.btn {
     --moo-datatable-scrollbar-size: 0.375rem;
     --moo-datatable-bulk-actions-bottom: 1rem;
   }
+  .card .datatable {
+    --moo-datatable-actions-cell-bg: var(--bs-card-bg);
+  }
   .datatable-table {
     table-layout: fixed;
   }
@@ -6973,11 +7039,11 @@ label.btn {
     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) {
     position: relative;
@@ -7041,6 +7107,9 @@ label.btn {
     min-block-size: var(--moo-datatable-toolbar-control-height);
     width: 100%;
   }
+  .datatable-searchbar:not(:has(> .dropdown-menu.show)) {
+    overflow: hidden;
+  }
   .datatable-searchbar .datatable-search {
     flex: 1 1 auto;
     max-width: none;
@@ -7052,7 +7121,7 @@ label.btn {
     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;
@@ -7503,6 +7572,10 @@ label.btn {
   .datatable-row-selected > td {
     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);
@@ -7814,7 +7887,7 @@ label.btn {
 .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));
 }