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

package/dist/assets/css/moo.css

@@ -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);
@@ -4510,9 +4529,9 @@ 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-color: color-mix(in srgb, var(--bs-body-color) 10%, transparent);
     --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);
@@ -4520,6 +4539,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 +4552,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 +4592,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 +5894,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;
@@ -6503,9 +6533,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 +6851,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 +6864,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 +6897,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 +7784,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,