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

package/dist/assets/css/moo.css

@@ -144,6 +144,11 @@
   --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;
   color-scheme: light;
   color: var(--bs-body-color);
   background-color: var(--bs-body-bg);
@@ -735,7 +740,7 @@
     line-height: 1.42857;
     color: var(--bs-body-color);
     appearance: none;
-    background-color: transparent;
+    background-color: var(--moo-input-bg, transparent);
     background-clip: padding-box;
     border: var(--bs-border-width) solid var(--moo-border);
     border-radius: 0.625rem;
@@ -754,7 +759,7 @@
   }
   .form-control:focus {
     color: var(--bs-body-color);
-    background-color: transparent;
+    background-color: var(--moo-input-bg, transparent);
     border-color: #8b8b8b;
     outline: 0;
     box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.25);
@@ -885,7 +890,7 @@
     line-height: 1.42857;
     color: var(--bs-body-color);
     appearance: none;
-    background-color: transparent;
+    background-color: var(--moo-input-bg, transparent);
     background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
     background-repeat: no-repeat;
     background-position: right 0.625rem center;
@@ -956,7 +961,7 @@
     margin-left: 0;
   }
   .form-check-input {
-    --bs-form-check-bg: transparent;
+    --bs-form-check-bg: var(--moo-input-bg, transparent);
     flex-shrink: 0;
     width: 1rem;
     height: 1rem;
@@ -986,8 +991,8 @@
     box-shadow: 0 0 0 var(--bs-focus-ring-width) color-mix(in srgb, var(--moo-ring) 50%, transparent);
   }
   .form-check-input:checked {
-    background-color: #171717;
-    border-color: #171717;
+    background-color: var(--moo-primary);
+    border-color: var(--moo-primary);
   }
   .form-check-input:checked[type="checkbox"] {
     --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
@@ -996,8 +1001,8 @@
     --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
   }
   .form-check-input[type="checkbox"]:indeterminate {
-    background-color: #171717;
-    border-color: #171717;
+    background-color: var(--moo-primary);
+    border-color: var(--moo-primary);
     --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
   }
   .form-check-input:disabled {
@@ -1092,7 +1097,7 @@
     color: var(--bs-body-color);
     text-align: center;
     white-space: nowrap;
-    background-color: var(--bs-tertiary-bg);
+    background-color: var(--moo-input-bg, transparent);
     border: var(--bs-border-width) solid var(--moo-border);
     border-radius: 0.625rem;
   }
@@ -3853,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);
@@ -4100,6 +4109,24 @@
   .form-control {
     min-height: 2rem;
   }
+  .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);
@@ -4118,6 +4145,10 @@
   .input-group:not(:has(> .form-control[type="file"])) {
     border: var(--bs-border-width) solid var(--moo-border);
     border-radius: var(--moo-input-group-border-radius);
+    background-color: var(--moo-input-bg, transparent);
+  }
+  .input-group:not(:has(> .form-control[type="file"])):not(:has(> .dropdown-menu)) {
+    overflow: hidden;
   }
   .input-group.rounded-pill:not(:has(> .form-control[type="file"])) {
     --moo-input-group-border-radius: var(--bs-border-radius-pill);
@@ -4174,10 +4205,10 @@
     color: var(--bs-btn-active-color);
   }
   .input-group > .btn-ghost[aria-pressed="true"] {
-    color: var(--bs-primary);
+    color: var(--bs-btn-active-color);
   }
   .input-group > .btn-ghost[aria-pressed="true"]::before {
-    opacity: 0;
+    opacity: 1;
   }
   .input-group > .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
     transform: none;
@@ -4189,7 +4220,6 @@
   }
   .input-group > .input-group-text {
     color: var(--bs-secondary-color);
-    background-color: transparent;
   }
   .input-group > .input-group-text:first-child {
     padding-inline-end: 0;
@@ -4487,6 +4517,11 @@ label.btn {
   .toggle-group > .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
     transform: none;
   }
+  .toggle-group > .btn-check:checked + .btn {
+    --bs-btn-active-color: var(--moo-primary-foreground);
+    --bs-btn-active-bg: var(--moo-primary);
+    --bs-btn-active-border-color: var(--moo-primary);
+  }
   .toggle-group > .btn-check:focus-visible + .btn,
 .toggle-group > .btn-check:checked:focus-visible + .btn {
     border-color: var(--moo-ring);
@@ -4494,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);
@@ -4504,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);
@@ -4516,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;
   }
@@ -4552,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);
@@ -4711,7 +4751,7 @@ label.btn {
     }
   }
   @media (min-width: 992px) {
-    [data-slot="sidebar-header"] [data-moo-sidebar-dropdown-positioned] > .dropdown-menu {
+    [data-slot="sidebar-header"] [data-sidebar-dropdown-positioned] > .dropdown-menu {
       position: fixed !important;
       z-index: 1000;
       inset-block-start: var(--moo-sidebar-dropdown-block-start) !important;
@@ -4940,11 +4980,11 @@ label.btn {
       height: calc(100% - 1rem);
       max-height: calc(100% - 1rem);
     }
-    .sidebar-wrapper[data-moo-sidebar-state="collapsed"] .sidebar[data-variant="floating"][data-collapsible="icon"] {
+    .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar[data-variant="floating"][data-collapsible="icon"] {
       flex-basis: calc(var(--moo-sidebar-width-icon) + 1rem);
       width: calc(var(--moo-sidebar-width-icon) + 1rem);
     }
-    .sidebar-wrapper[data-moo-sidebar-state="collapsed"] .sidebar[data-variant="floating"][data-collapsible="icon"] .sidebar-inner {
+    .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar[data-variant="floating"][data-collapsible="icon"] .sidebar-inner {
       box-shadow: var(--bs-box-shadow);
     }
   }
@@ -5089,6 +5129,10 @@ label.btn {
     font-weight: 500;
     background: var(--moo-sidebar-accent);
   }
+  .sidebar-content:has(.sidebar-menu:is(:hover, :focus-within)) .sidebar-menu-button[aria-current="page"]:not(:hover):not(:focus-visible),
+.sidebar-content:has(.sidebar-menu-button:not([aria-current="page"]):is(:hover, :focus-visible)) .sidebar-menu-button[aria-current="page"]:not(:hover):not(:focus-visible) {
+    background: transparent;
+  }
   .sidebar-menu-button--lg {
     height: 3rem;
     padding: 0.5rem;
@@ -5298,14 +5342,14 @@ label.btn {
       border-radius: var(--bs-border-radius-xl);
       box-shadow: var(--bs-box-shadow-sm);
     }
-    .sidebar-wrapper[data-moo-sidebar-state="collapsed"]:has(.sidebar[data-variant="inset"]) .sidebar-inset {
+    .sidebar-wrapper[data-sidebar-state="collapsed"]:has(.sidebar[data-variant="inset"]) .sidebar-inset {
       margin-inline-start: 0.5rem;
     }
     .sidebar-wrapper:has(.sidebar[data-variant="inset"][data-side="right"]) .sidebar-inset {
       margin-inline-start: 0.5rem;
       margin-inline-end: 0;
     }
-    .sidebar-wrapper[data-moo-sidebar-state="collapsed"]:has(.sidebar[data-variant="inset"][data-side="right"]) .sidebar-inset {
+    .sidebar-wrapper[data-sidebar-state="collapsed"]:has(.sidebar[data-variant="inset"][data-side="right"]) .sidebar-inset {
       margin-inline-end: 0.5rem;
     }
   }
@@ -5340,27 +5384,27 @@ label.btn {
     .sidebar {
       position: relative;
     }
-    .sidebar-wrapper[data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] {
+    .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] {
       flex-basis: var(--moo-sidebar-width-icon);
       width: var(--moo-sidebar-width-icon);
     }
-    .sidebar-wrapper[data-moo-sidebar-state="collapsed"] .sidebar-inset {
+    .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar-inset {
       position: relative;
       z-index: 0;
     }
-    [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-group-label,
-[data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button__text,
-[data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button__subtitle,
-[data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button__end {
+    [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-group-label,
+[data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button__text,
+[data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button__subtitle,
+[data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button__end {
       display: none;
     }
-    [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-sub,
-[data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-action,
-[data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-group-action,
-[data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-badge {
+    [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-sub,
+[data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-action,
+[data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-group-action,
+[data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-badge {
       display: none !important;
     }
-    [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"]:has(.sidebar-menu-button[data-bs-toggle="dropdown"][aria-expanded="true"]) {
+    [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"]:has(.sidebar-menu-button[data-bs-toggle="dropdown"][aria-expanded="true"]) {
       z-index: 1000;
     }
     .sidebar-menu-flyout {
@@ -5394,48 +5438,48 @@ label.btn {
     .sidebar-menu-flyout .sidebar-menu-badge {
       display: flex !important;
     }
-    [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button {
+    [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button {
       justify-content: center;
       padding-inline: 0;
     }
-    [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--workspace:hover {
+    [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--workspace:hover {
       background: transparent;
     }
-    [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--workspace[aria-expanded="true"] {
+    [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--workspace[aria-expanded="true"] {
       background: transparent;
       outline: 0;
       box-shadow: none;
     }
-    [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--workspace:focus-visible {
+    [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--workspace:focus-visible {
       background: transparent;
       outline: 0;
       box-shadow: none;
     }
-    [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account {
+    [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account {
       padding: 0;
       overflow: visible;
     }
-    [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account:hover {
+    [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account:hover {
       background: transparent;
     }
-    [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account[aria-expanded="true"] {
+    [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account[aria-expanded="true"] {
       background: transparent;
       outline: 0;
       box-shadow: none;
     }
-    [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account:focus-visible {
+    [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account:focus-visible {
       background: transparent;
       outline: 0;
       box-shadow: none;
     }
-    [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--lg {
+    [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--lg {
       height: 2rem;
       padding: 0;
     }
-    [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-skeleton {
+    [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-skeleton {
       justify-content: center;
     }
-    [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-skeleton__line {
+    [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-skeleton__line {
       display: none;
     }
   }
@@ -5476,14 +5520,15 @@ label.btn {
     padding-right: 0;
     padding-left: 0;
     padding-inline-start: var(--bs-alert-padding-x);
-    padding-inline-end: calc(var(--bs-alert-padding-x) + 1.5rem);
+    padding-inline-end: calc(var(--bs-alert-padding-x) + 1.9375rem);
   }
   .alert-dismissible .btn-close {
     top: auto;
     right: auto;
-    inset-block-start: var(--bs-alert-padding-y);
+    inset-block-start: 50%;
     inset-inline-end: var(--bs-alert-padding-x);
     padding: 0.34375rem 0.34375rem;
+    transform: translateY(-50%);
   }
   .alert-danger {
     --bs-alert-bg: transparent;
@@ -5702,7 +5747,186 @@ label.btn {
     color: var(--moo-foreground) !important;
   }
   .progress {
-    --bs-progress-bar-bg: var(--moo-foreground);
+    --bs-progress-bar-color: var(--moo-primary-foreground);
+    --bs-progress-bar-bg: var(--moo-primary);
+  }
+  .slider {
+    display: grid;
+    gap: 0.5rem;
+    width: 100%;
+  }
+  .slider-track {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 0.75rem;
+    cursor: pointer;
+    touch-action: none;
+  }
+  .slider-track::before,
+.slider-range {
+    position: absolute;
+    inset-block-start: 50%;
+    height: 0.25rem;
+    border-radius: var(--bs-border-radius-pill);
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+  .slider-track::before {
+    content: "";
+    inset-inline: 0;
+    background-color: var(--bs-secondary-bg);
+    box-shadow: var(--bs-box-shadow-inset);
+  }
+  .slider-range {
+    inset-inline-start: var(--moo-slider-start, 0%);
+    inset-inline-end: calc(100% - var(--moo-slider-end, 0%));
+    background-color: var(--moo-primary);
+  }
+  .slider-input {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+  .slider-input::-webkit-slider-runnable-track {
+    height: 0.25rem;
+    background-color: transparent;
+    box-shadow: none;
+  }
+  .slider-input::-moz-range-track {
+    height: 0.25rem;
+    background-color: transparent;
+    box-shadow: none;
+  }
+  .slider-input::-webkit-slider-thumb {
+    position: relative;
+    z-index: 1;
+    width: 0.75rem;
+    height: 0.75rem;
+    margin-top: -0.25rem;
+    background-color: var(--bs-body-bg);
+    border-width: var(--bs-border-width);
+    border-style: solid;
+    border-color: var(--moo-primary);
+    box-shadow: var(--bs-box-shadow-sm);
+    pointer-events: auto;
+  }
+  .slider-input::-moz-range-thumb {
+    position: relative;
+    z-index: 1;
+    width: 0.75rem;
+    height: 0.75rem;
+    background-color: var(--bs-body-bg);
+    border-width: var(--bs-border-width);
+    border-style: solid;
+    border-color: var(--moo-primary);
+    box-shadow: var(--bs-box-shadow-sm);
+    pointer-events: auto;
+  }
+  .slider-input::-webkit-slider-thumb:active {
+    background-color: var(--bs-body-bg);
+    border-color: var(--moo-primary);
+  }
+  .slider-input::-moz-range-thumb:active {
+    background-color: var(--bs-body-bg);
+    border-color: var(--moo-primary);
+  }
+  .slider-input:focus-visible::-webkit-slider-thumb {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
+  }
+  .slider-input:focus-visible::-moz-range-thumb {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
+  }
+  .slider[data-slider-dragging] .slider-input::-webkit-slider-thumb {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
+  }
+  .slider[data-slider-dragging] .slider-input::-moz-range-thumb {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
+  }
+  .slider[data-slider-pointer-focus]:not([data-slider-dragging]) .slider-input:focus::-webkit-slider-thumb {
+    box-shadow: var(--bs-box-shadow-sm);
+  }
+  .slider[data-slider-pointer-focus]:not([data-slider-dragging]) .slider-input:focus::-moz-range-thumb {
+    box-shadow: var(--bs-box-shadow-sm);
+  }
+  .slider-input:disabled {
+    opacity: 1;
+  }
+  .slider-input:disabled::-webkit-slider-thumb {
+    background-color: var(--moo-muted-surface);
+    border-color: var(--moo-disabled-foreground);
+    box-shadow: none;
+    cursor: default;
+  }
+  .slider-input:disabled::-moz-range-thumb {
+    background-color: var(--moo-muted-surface);
+    border-color: var(--moo-disabled-foreground);
+    box-shadow: none;
+    cursor: default;
+  }
+  .slider-input:disabled:focus-visible::-webkit-slider-thumb,
+.slider[data-slider-dragging] .slider-input:disabled::-webkit-slider-thumb,
+.slider[data-slider-pointer-focus] .slider-input:disabled:focus-visible::-webkit-slider-thumb {
+    background-color: var(--moo-muted-surface);
+    border-color: var(--moo-disabled-foreground);
+    box-shadow: none;
+  }
+  .slider-input:disabled:focus-visible::-moz-range-thumb,
+.slider[data-slider-dragging] .slider-input:disabled::-moz-range-thumb,
+.slider[data-slider-pointer-focus] .slider-input:disabled:focus-visible::-moz-range-thumb {
+    background-color: var(--moo-muted-surface);
+    border-color: var(--moo-disabled-foreground);
+    box-shadow: none;
+  }
+  .slider:has(.slider-input:disabled) .slider-track {
+    cursor: default;
+  }
+  .slider:has(.slider-input:disabled) .slider-range {
+    background-color: var(--moo-disabled-foreground);
+  }
+  .slider--range .slider-input--upper {
+    z-index: 2;
+  }
+  .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;
+    width: 0.75rem;
+    height: 8rem;
+  }
+  .slider--vertical .slider-track::before {
+    inset-block: 0;
+    inset-inline: auto;
+    width: 0.25rem;
+    height: auto;
+    transform: none;
+  }
+  .slider--vertical .slider-range {
+    inset-block-start: calc(100% - var(--moo-slider-end, 0%));
+    inset-block-end: var(--moo-slider-start, 0%);
+    inset-inline-start: 50%;
+    inset-inline-end: auto;
+    width: 0.25rem;
+    height: auto;
+    transform: translateX(-50%);
+  }
+  .slider--vertical .slider-input {
+    width: 100%;
+    height: 100%;
+    writing-mode: vertical-lr;
+    direction: rtl;
   }
   hr {
     opacity: 1;
@@ -5712,12 +5936,35 @@ label.btn {
     opacity: 1;
     background-color: var(--moo-border);
   }
-  [data-bs-theme="dark"] .form-check-input:is(:checked, :indeterminate):not([role="switch"]) {
-    filter: invert(1);
-  }
   .form-check-input {
     margin-top: 0.125rem;
   }
+  .form-check-input[type="checkbox"]:checked:not([role="switch"]) {
+    --bs-form-check-bg-image: none;
+    position: relative;
+    overflow: hidden;
+  }
+  .form-check-input[type="checkbox"]:checked:not([role="switch"])::after {
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    width: 0.32em;
+    height: 0.58em;
+    border-color: var(--moo-primary-foreground);
+    border-style: solid;
+    border-width: 0 0.14em 0.14em 0;
+    content: "";
+    transform: translate(-50%, -55%) rotate(45deg);
+    transform-origin: center;
+  }
+  .form-check-input[type="checkbox"]:indeterminate:not([role="switch"]) {
+    --bs-form-check-bg-image: linear-gradient(var(--moo-primary-foreground), var(--moo-primary-foreground));
+    background-size: 62% 14%;
+    background-position: center;
+  }
+  .form-check-input[type="radio"]:checked {
+    --bs-form-check-bg-image: radial-gradient(circle at center, var(--moo-primary-foreground) 0 34%, transparent 36%);
+  }
   .form-check-input:is([type="checkbox"], [type="radio"]):not(.is-invalid):focus:active,
 .form-check-input:is([type="checkbox"], [type="radio"]):not(.is-invalid):focus:not(:focus-visible) {
     border-color: var(--bs-border-color);
@@ -5725,11 +5972,11 @@ label.btn {
   }
   .form-check-input:is([type="checkbox"], [type="radio"]):checked:not(.is-invalid):focus:active,
 .form-check-input:is([type="checkbox"], [type="radio"]):checked:not(.is-invalid):focus:not(:focus-visible) {
-    border-color: #171717;
+    border-color: var(--moo-primary);
   }
   .form-check-input[type="checkbox"]:not(.is-invalid):indeterminate:focus:active,
 .form-check-input[type="checkbox"]:not(.is-invalid):indeterminate:focus:not(:focus-visible) {
-    border-color: #171717;
+    border-color: var(--moo-primary);
   }
   .form-check-input.is-invalid {
     box-shadow: 0 0 0 3px var(--moo-form-invalid-ring-color);
@@ -5749,8 +5996,8 @@ label.btn {
   .form-check-input:is([type="checkbox"], [type="radio"]):not([role="switch"]).is-invalid:checked,
 .form-check-input:is([type="checkbox"], [type="radio"]):not([role="switch"]).is-invalid:checked:focus:active,
 .form-check-input:is([type="checkbox"], [type="radio"]):not([role="switch"]).is-invalid:checked:focus:not(:focus-visible) {
-    border-color: var(--bs-primary);
-    background-color: var(--bs-primary);
+    border-color: var(--moo-primary);
+    background-color: var(--moo-primary);
   }
   .radio-group legend.form-label {
     font-size: inherit;
@@ -5760,8 +6007,8 @@ label.btn {
   }
   :where([data-bs-theme="dark"]) .form-switch .form-check-input:checked {
     --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2318181b'/%3e%3c/svg%3e");
-    background-color: var(--moo-foreground);
-    border-color: var(--moo-foreground);
+    background-color: var(--moo-primary);
+    border-color: var(--moo-primary);
     filter: none;
   }
   .form-switch .form-check-input:focus:active:not(:checked),
@@ -6110,6 +6357,83 @@ label.btn {
   .toast-header strong {
     font-weight: 500;
   }
+  .toast-status-icon {
+    display: inline-flex;
+    flex: 0 0 auto;
+    margin-inline-end: 0.5rem;
+    color: var(--bs-secondary-color);
+  }
+  .toast-status-icon [data-icon] {
+    width: 1rem;
+    height: 1rem;
+  }
+  .toast[data-toast-variant="success"] .toast-status-icon {
+    color: var(--moo-success);
+  }
+  .toast[data-toast-variant="info"] .toast-status-icon {
+    color: var(--moo-info);
+  }
+  .toast[data-toast-variant="warning"] .toast-status-icon {
+    color: var(--moo-warning);
+  }
+  .toast[data-toast-variant="destructive"] .toast-status-icon {
+    color: var(--moo-destructive);
+  }
+  .toast[data-toast-variant="loading"] .toast-status-icon [data-icon] {
+    animation: moo-spinner-rotate 0.75s linear infinite;
+  }
+  .toast-container--stacked[data-toast-stack="deck"] {
+    --moo-toast-stack-gap: 0.75rem;
+    --moo-toast-stack-peek: 0.75rem;
+    --moo-toast-stack-scale-step: 0.1;
+    --moo-toast-stack-min-scale: 0.5;
+    --moo-toast-stack-enter-y: 150%;
+  }
+  .toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active] {
+    bottom: 1rem !important;
+    inset-inline-end: 1rem !important;
+    height: 0;
+    max-width: calc(100vw - 2rem);
+    padding: 0 !important;
+    width: min(24rem, calc(100vw - 2rem));
+  }
+  .toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active] > .toast[data-toast-stack-index] {
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    max-width: none;
+    margin-bottom: 0;
+    position: absolute;
+    width: 100%;
+    transform: translateY(var(--moo-toast-stack-collapsed-y, 0px)) scale(var(--moo-toast-stack-scale, 1));
+    transform-origin: bottom center;
+    z-index: var(--moo-toast-stack-z, 1);
+    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease, height 0.15s ease;
+  }
+  .toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active] > .toast[data-toast-stack-entering] {
+    transform: translateY(calc(var(--moo-toast-stack-collapsed-y, 0px) + var(--moo-toast-stack-enter-y, 150%))) scale(var(--moo-toast-stack-scale, 1));
+  }
+  .toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active] > .toast[data-toast-stack-limited] {
+    opacity: 0;
+    pointer-events: none;
+  }
+  .toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active]:hover > .toast[data-toast-stack-index],
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active]:focus-within > .toast[data-toast-stack-index],
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active][data-toast-stack-hovering] > .toast[data-toast-stack-index] {
+    transform: translateY(var(--moo-toast-stack-expanded-y, 0px)) scale(1);
+  }
+  .toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active]:hover > .toast[data-toast-stack-entering],
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active]:focus-within > .toast[data-toast-stack-entering],
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active][data-toast-stack-hovering] > .toast[data-toast-stack-entering] {
+    transform: translateY(calc(var(--moo-toast-stack-collapsed-y, 0px) + var(--moo-toast-stack-enter-y, 150%))) scale(var(--moo-toast-stack-scale, 1));
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .toast[data-toast-variant="loading"] .toast-status-icon [data-icon] {
+      animation: none;
+    }
+    .toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active] > .toast[data-toast-stack-index] {
+      transition: none;
+    }
+  }
   .field {
     display: flex;
     flex-direction: column;
@@ -6181,6 +6505,205 @@ label.btn {
   .field-fieldset + hr {
     opacity: 0.1;
   }
+  .moo-datepicker {
+    --moo-datepicker-width: 17.5rem;
+    --moo-datepicker-popover-offset: 0.375rem;
+    position: relative;
+    width: 100%;
+    max-width: var(--moo-datepicker-width);
+  }
+  .moo-datepicker__trigger {
+    width: 100%;
+    justify-content: flex-start;
+    text-align: start;
+  }
+  .moo-datepicker__trigger [data-datepicker-label] {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .moo-datepicker__trigger.is-invalid {
+    border-color: var(--bs-form-invalid-border-color);
+    color: var(--bs-form-invalid-color);
+  }
+  .moo-datepicker-time-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 0.75rem;
+    width: 100%;
+  }
+  .moo-datepicker-time-row > :first-child {
+    min-width: 0;
+  }
+  .moo-datepicker-time {
+    flex: 0 0 auto;
+    width: calc(17.5rem / 2);
+    max-width: 9rem;
+  }
+  .moo-datepicker__popover {
+    position: absolute;
+    inset-block-start: calc(100% + var(--moo-datepicker-popover-offset));
+    inset-inline-start: 0;
+    z-index: 1000;
+    width: max-content;
+    max-width: calc(100vw - 1rem);
+    padding: 0.75rem;
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius-lg);
+    background: var(--bs-body-bg);
+    color: var(--bs-body-color);
+    box-shadow: var(--bs-box-shadow-lg);
+  }
+  .moo-datepicker__popover[hidden] {
+    display: none !important;
+  }
+  .moo-datepicker__popover.show {
+    display: block;
+  }
+  .moo-datepicker__popover[data-datepicker-placement] {
+    inset: auto;
+  }
+  .moo-calendar {
+    --moo-datepicker-day-size: 2rem;
+    --moo-datepicker-gap: 0.25rem;
+    --moo-datepicker-padding: 0.75rem;
+    --moo-datepicker-preset-gap: 0.375rem;
+    --moo-datepicker-day-border-radius: var(--bs-border-radius-sm);
+    --moo-datepicker-day-range-joined-border-radius: 0;
+    width: calc(var(--moo-datepicker-day-size) * 7 + var(--moo-datepicker-gap) * 6);
+    max-width: 100%;
+    color: var(--bs-body-color);
+  }
+  .moo-calendar__header {
+    display: grid;
+    grid-template-columns: var(--moo-datepicker-day-size) minmax(0, 1fr) var(--moo-datepicker-day-size);
+    align-items: center;
+    gap: var(--moo-datepicker-gap);
+    margin-bottom: 0.75rem;
+  }
+  .moo-calendar__caption {
+    display: inline-flex;
+    min-width: 0;
+    align-items: center;
+    justify-content: center;
+    gap: var(--moo-datepicker-gap);
+    font-weight: 500;
+  }
+  .moo-calendar__select {
+    min-width: 0;
+    height: calc(1.42857em + 0.5rem + calc(var(--bs-border-width) * 2));
+    padding: 0 0.375rem;
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius-sm);
+    background: var(--bs-body-bg);
+    color: var(--bs-body-color);
+    font: inherit;
+  }
+  .moo-calendar__nav {
+    color: var(--bs-secondary-color);
+  }
+  .moo-calendar__nav:hover,
+.moo-calendar__nav:focus-visible {
+    color: var(--bs-body-color);
+  }
+  .moo-calendar__nav-icon {
+    font-size: 1.09375rem;
+    line-height: 1;
+  }
+  .moo-calendar__weekdays,
+.moo-calendar__week {
+    display: grid;
+    grid-template-columns: repeat(7, var(--moo-datepicker-day-size));
+    gap: var(--moo-datepicker-gap);
+  }
+  .moo-calendar__week + .moo-calendar__week {
+    margin-top: var(--moo-datepicker-gap);
+  }
+  .moo-calendar__weekdays {
+    margin-bottom: var(--moo-datepicker-gap);
+  }
+  .moo-calendar__weekday {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--moo-datepicker-day-size);
+    height: 1.5rem;
+    color: var(--bs-secondary-color);
+    font-size: 0.76562rem;
+    font-weight: 500;
+  }
+  .moo-calendar__cell {
+    position: relative;
+    width: var(--moo-datepicker-day-size);
+    height: var(--moo-datepicker-day-size);
+  }
+  .moo-calendar__day {
+    position: relative;
+    display: inline-flex;
+    width: var(--moo-datepicker-day-size);
+    height: var(--moo-datepicker-day-size);
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    border-radius: var(--moo-datepicker-day-border-radius);
+    background: transparent;
+    color: var(--bs-body-color);
+    font: inherit;
+    line-height: 1;
+  }
+  .moo-calendar__day:hover:not(:disabled),
+.moo-calendar__day:focus-visible {
+    background: var(--moo-muted-surface);
+    outline: 0;
+  }
+  .moo-calendar__day:focus-visible {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
+  }
+  .moo-calendar__day[data-calendar-selected="true"] {
+    background: var(--moo-primary);
+    color: var(--moo-primary-foreground);
+  }
+  .moo-calendar__day[data-calendar-selected="true"]:hover:not(:disabled),
+.moo-calendar__day[data-calendar-selected="true"]:focus-visible {
+    background: var(--moo-primary);
+    color: var(--moo-primary-foreground);
+  }
+  .moo-calendar__day[data-calendar-range="middle"] {
+    border-radius: var(--moo-datepicker-day-range-joined-border-radius);
+    background: color-mix(in srgb, var(--moo-primary) 14%, transparent);
+    color: var(--bs-body-color);
+  }
+  .moo-calendar__day[data-calendar-range="start"] {
+    border-start-end-radius: var(--moo-datepicker-day-range-joined-border-radius);
+    border-end-end-radius: var(--moo-datepicker-day-range-joined-border-radius);
+  }
+  .moo-calendar__day[data-calendar-range="end"] {
+    border-start-start-radius: var(--moo-datepicker-day-range-joined-border-radius);
+    border-end-start-radius: var(--moo-datepicker-day-range-joined-border-radius);
+  }
+  .moo-calendar__day[data-calendar-outside="true"] {
+    color: var(--bs-secondary-color);
+  }
+  .moo-calendar__day[data-calendar-today="true"]:not([data-calendar-selected="true"]) {
+    outline: var(--bs-border-width) solid var(--bs-border-color);
+    outline-offset: calc(-1 * var(--bs-border-width));
+  }
+  .moo-calendar__day:disabled {
+    color: var(--moo-disabled-foreground);
+    cursor: default;
+    opacity: var(--moo-disabled-control-opacity);
+  }
+  .moo-calendar__presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--moo-datepicker-preset-gap);
+    margin-top: 0.75rem;
+  }
+  .moo-calendar__preset {
+    flex: 0 0 auto;
+  }
   .combobox {
     --moo-combobox-width: 12.5rem;
     --moo-combobox-multiple-width: 20rem;
@@ -6328,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 {
@@ -6340,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;
   }
@@ -6364,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 {
@@ -6412,6 +6944,7 @@ label.btn {
     --moo-datatable-search-filter-menu-width: 12.5rem;
     --moo-datatable-search-filter-options-menu-width: 17rem;
     --moo-datatable-scrollbar-size: 0.375rem;
+    --moo-datatable-bulk-actions-bottom: 1rem;
   }
   .datatable-table {
     table-layout: fixed;
@@ -7114,7 +7647,7 @@ label.btn {
     --moo-datatable-bulk-actions-backdrop-blur: 8px;
     position: fixed;
     inset-inline-start: 50%;
-    inset-block-end: 1rem;
+    inset-block-end: var(--moo-datatable-bulk-actions-bottom);
     transform: translateX(-50%) scale(1);
     transition: transform 0.15s ease-out;
     z-index: var(--bs-zindex-fixed, 1030);
@@ -7251,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,
@@ -7270,8 +7799,8 @@ label.btn {
 :where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) .form-switch .form-check-input:checked,
 .moo-ui[data-bs-theme="dark"] .form-switch .form-check-input:checked {
   --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2318181b'/%3e%3c/svg%3e");
-  background-color: var(--moo-foreground);
-  border-color: var(--moo-foreground);
+  background-color: var(--moo-primary);
+  border-color: var(--moo-primary);
   filter: none;
 }
 
@@ -7282,11 +7811,6 @@ label.btn {
   --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
 }
 
-:where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) .form-check-input:checked:not([role="switch"]),
-.moo-ui[data-bs-theme="dark"] .form-check-input:checked:not([role="switch"]) {
-  filter: invert(1);
-}
-
 .modal-backdrop,
 .offcanvas-backdrop {
   --bs-backdrop-opacity: var(--moo-overlay-backdrop-opacity, 1);