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

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;
@@ -3858,6 +3858,10 @@
     color: #fff !important;
     background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important;
   }
+  .form-label,
+.form-check-label {
+    user-select: none;
+  }
   :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);
@@ -4108,6 +4112,21 @@
   .form-control:not(textarea):not([type="file"]):not(.form-control-sm, .form-control-lg) {
     min-height: calc(2rem + var(--bs-border-width) * 2);
   }
+  .form-control[type="file"]:not(.form-control-sm, .form-control-lg)::file-selector-button {
+    min-height: calc(2rem - var(--bs-border-width) * 2);
+  }
+  .form-control[type="time"] {
+    appearance: none;
+    position: relative;
+  }
+  .form-control[type="time"]::-webkit-calendar-picker-indicator {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+  }
   .form-control:disabled,
 .form-select:disabled {
     opacity: var(--moo-disabled-control-opacity);
@@ -4176,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 {
@@ -4472,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,
@@ -4510,7 +4547,7 @@ label.btn {
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
   }
   .card {
-    --bs-card-bg: var(--moo-surface);
+    --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: var(--moo-border);
     --bs-card-border-radius: var(--bs-border-radius-xl);
@@ -4520,6 +4557,7 @@ label.btn {
     --bs-card-cap-color: var(--moo-foreground);
     --bs-card-title-color: var(--moo-foreground);
     --bs-card-subtitle-color: var(--moo-muted-foreground);
+    --moo-card-footer-bg: color-mix(in srgb, var(--bs-secondary-bg) 20%, var(--bs-body-bg));
     --moo-card-spacing: 1rem;
     gap: var(--moo-card-spacing);
     padding-block: var(--moo-card-spacing);
@@ -4532,6 +4570,10 @@ label.btn {
   .card:has(> .card-image) {
     padding-block-start: 0;
   }
+  .card[data-bs-theme="dark"], :where([data-bs-theme="dark"]) .card:not([data-bs-theme="light"]):not([data-bs-theme="light"] *) {
+    --bs-card-bg: color-mix(in srgb, var(--bs-secondary-bg) 30%, var(--bs-body-bg));
+    --moo-card-footer-bg: color-mix(in srgb, var(--bs-secondary-bg) 50%, var(--bs-body-bg));
+  }
   .card--sm {
     --moo-card-spacing: 0.75rem;
   }
@@ -4568,7 +4610,7 @@ label.btn {
     gap: 0.5rem;
     padding: var(--moo-card-spacing);
     border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
-    background-color: var(--moo-muted-surface);
+    background-color: var(--moo-card-footer-bg);
   }
   .card-img-top {
     border-top-left-radius: var(--bs-card-border-radius);
@@ -5870,6 +5912,12 @@ label.btn {
   .slider--vertical {
     width: max-content;
   }
+  .slider--vertical [data-slider-output] {
+    display: inline-block;
+    min-width: 3ch;
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+  }
   .slider--vertical .slider-track {
     justify-content: center;
     justify-self: center;
@@ -6039,6 +6087,9 @@ label.btn {
   .accordion-flush .accordion-button {
     font-weight: 500;
   }
+  .card .accordion {
+    --bs-accordion-bg: transparent;
+  }
   .tabs-list {
     display: inline-flex;
     gap: 0.125rem;
@@ -6503,9 +6554,8 @@ label.btn {
     gap: 0.75rem;
     width: 100%;
   }
-  .moo-datepicker-time-row .moo-datepicker {
-    flex: 1 1 12rem;
-    width: auto;
+  .moo-datepicker-time-row > :first-child {
+    min-width: 0;
   }
   .moo-datepicker-time {
     flex: 0 0 auto;
@@ -6822,10 +6872,11 @@ label.btn {
     display: none;
   }
   .combobox-option {
-    display: flex;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 1rem;
     align-items: center;
     gap: 0.5rem;
-    padding-inline-end: 2rem;
+    padding-inline-end: 0.375rem;
     line-height: var(--moo-combobox-option-line-height);
   }
   .combobox-option__content {
@@ -6834,9 +6885,18 @@ label.btn {
     flex: 1 1 auto;
     flex-direction: column;
   }
-  .combobox-option[aria-current="true"] {
+  .combobox:not(.combobox--multiple) .combobox-option[aria-selected="true"],
+.combobox-option[aria-current="true"] {
     background-color: var(--bs-dropdown-link-hover-bg);
   }
+  .combobox:not(.combobox--multiple)
+.combobox-menu:has(.combobox-option:not([aria-selected="true"]):hover)
+.combobox-option[aria-selected="true"]:not(:hover):not([aria-current="true"]),
+.combobox:not(.combobox--multiple)
+.combobox-menu:has(.combobox-option[aria-current="true"]:not([aria-selected="true"]))
+.combobox-option[aria-selected="true"]:not([aria-current="true"]) {
+    background-color: transparent;
+  }
   .combobox-option[aria-selected="true"] {
     font-weight: 500;
   }
@@ -6858,8 +6918,7 @@ label.btn {
   }
   .combobox-option__check {
     display: inline-flex;
-    flex: 0 0 auto;
-    margin-inline-start: auto;
+    justify-self: end;
     visibility: hidden;
   }
   .combobox-option[aria-selected="true"] .combobox-option__check {
@@ -7746,10 +7805,6 @@ label.btn {
   .datatable--release-review {
     --moo-datatable-min-width: 64rem;
   }
-  .form-label,
-.form-check-label {
-    user-select: none;
-  }
 }
 
 :where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) .form-select,
@@ -7780,7 +7835,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));
 }