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

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;
@@ -12430,6 +12432,11 @@ textarea.form-control-lg {
   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);
@@ -12717,6 +12724,24 @@ kbd {
   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);
@@ -12801,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,
@@ -13153,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,
@@ -13197,7 +13243,7 @@ label.btn {
 }
 
 .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);
@@ -13207,6 +13253,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);
@@ -13222,6 +13269,11 @@ label.btn {
   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;
 }
@@ -13264,7 +13316,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 {
@@ -14777,6 +14829,13 @@ label.btn {
   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;
@@ -14981,6 +15040,10 @@ hr {
   font-weight: 500;
 }
 
+.card .accordion {
+  --bs-accordion-bg: transparent;
+}
+
 .tabs-list {
   display: inline-flex;
   gap: 0.125rem;
@@ -15537,9 +15600,8 @@ hr {
   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 {
@@ -15910,10 +15972,11 @@ hr {
 }
 
 .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);
 }
 
@@ -15924,10 +15987,20 @@ hr {
   flex-direction: column;
 }
 
+.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;
 }
@@ -15953,8 +16026,7 @@ hr {
 
 .combobox-option__check {
   display: inline-flex;
-  flex: 0 0 auto;
-  margin-inline-start: auto;
+  justify-self: end;
   visibility: hidden;
 }
 
@@ -16982,15 +17054,10 @@ ul.context-menu-menu:focus-visible {
   --moo-datatable-min-width: 64rem;
 }
 
-.form-label,
-.form-check-label {
-  user-select: none;
-}
-
 .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));
 }