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

package/dist/assets/css/moo.css

@@ -70,7 +70,86 @@
   }
 }
 
-.moo-ui {
+@keyframes moo-overlay-backdrop-enter {
+  from {
+    opacity: 0;
+    -webkit-backdrop-filter: blur(0);
+    backdrop-filter: blur(0);
+  }
+  to {
+    opacity: var(--moo-overlay-backdrop-opacity, 1);
+    -webkit-backdrop-filter: var(--moo-overlay-backdrop-filter, blur(6px));
+    backdrop-filter: var(--moo-overlay-backdrop-filter, blur(6px));
+  }
+}
+
+@keyframes moo-overlay-backdrop-exit {
+  from {
+    opacity: var(--moo-overlay-backdrop-opacity, 1);
+    -webkit-backdrop-filter: var(--moo-overlay-backdrop-filter, blur(6px));
+    backdrop-filter: var(--moo-overlay-backdrop-filter, blur(6px));
+  }
+  to {
+    opacity: 0;
+    -webkit-backdrop-filter: blur(0);
+    backdrop-filter: blur(0);
+  }
+}
+
+.modal-backdrop,
+.offcanvas-backdrop {
+  --bs-backdrop-opacity: var(--moo-overlay-backdrop-opacity, 1);
+  opacity: 1;
+  color: transparent;
+  background-color: transparent;
+}
+
+.modal-backdrop.fade, .modal-backdrop.fade:not(.show),
+.offcanvas-backdrop.fade,
+.offcanvas-backdrop.fade:not(.show) {
+  opacity: 1;
+}
+
+.modal-backdrop.show,
+.offcanvas-backdrop.show {
+  transition: none;
+}
+
+.modal-backdrop.fade:not(.show),
+.offcanvas-backdrop.fade:not(.show) {
+  color: var(--bs-body-color, currentcolor);
+  transition: color var(--moo-overlay-motion-duration, 0.3s) ease-out;
+}
+
+.modal-backdrop::before,
+.offcanvas-backdrop::before {
+  position: absolute;
+  inset: 0;
+  content: "";
+  opacity: 0;
+  background-color: var(--moo-overlay-backdrop-bg, color-mix(in srgb, #0a0a0a 10%, transparent));
+  -webkit-backdrop-filter: blur(0);
+  backdrop-filter: blur(0);
+  animation: moo-overlay-backdrop-exit var(--moo-overlay-motion-duration, 0.3s) ease-out both;
+}
+
+.modal-backdrop.show::before,
+.offcanvas-backdrop.show::before {
+  animation: moo-overlay-backdrop-enter var(--moo-overlay-motion-duration, 0.3s) ease-out both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .modal-backdrop,
+.offcanvas-backdrop {
+    transition: none;
+  }
+  .modal-backdrop::before,
+.offcanvas-backdrop::before {
+    animation: none;
+  }
+}
+
+.moo-ui[data-bs-theme] {
   --bs-blue: #0d6efd;
   --bs-indigo: #6610f2;
   --bs-purple: #6f42c1;
@@ -136,9 +215,10 @@
   --bs-focus-ring-width: 2px;
   --bs-focus-ring-opacity: 0.25;
   --bs-focus-ring-color: var(--moo-ring);
+  --moo-overlay-motion-duration: 0.3s;
   --moo-overlay-backdrop-opacity: 1;
   --moo-overlay-backdrop-bg: color-mix(in srgb, #0a0a0a 10%, transparent);
-  --moo-overlay-backdrop-filter: blur(8px);
+  --moo-overlay-backdrop-filter: blur(6px);
   --moo-input-group-border-radius: var(--bs-border-radius-lg);
   --moo-disabled-control-opacity: 0.5;
   --moo-sidebar-foreground: var(--moo-foreground);
@@ -149,173 +229,6 @@
   --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);
-  --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-body-bg: var(--moo-surface);
-  --bs-body-bg-rgb: 255, 255, 255;
-  --bs-emphasis-color: var(--moo-foreground);
-  --bs-emphasis-color-rgb: 24, 24, 27;
-  --bs-secondary-color: var(--moo-muted-foreground);
-  --bs-secondary-color-rgb: 113, 113, 122;
-  --bs-secondary-bg: var(--moo-muted-surface);
-  --bs-secondary-bg-rgb: 244, 244, 245;
-  --bs-tertiary-color: #a1a1aa;
-  --bs-tertiary-color-rgb: 161, 161, 170;
-  --bs-tertiary-bg: #fafafa;
-  --bs-tertiary-bg-rgb: 250, 250, 250;
-  --bs-heading-color: var(--moo-foreground);
-  --bs-link-color: var(--moo-foreground);
-  --bs-link-color-rgb: 24, 24, 27;
-  --bs-link-hover-color: var(--moo-muted-foreground);
-  --bs-link-hover-color-rgb: 113, 113, 122;
-  --bs-code-color: #d63384;
-  --bs-highlight-color: var(--moo-foreground);
-  --bs-highlight-bg: #fff3cd;
-  --bs-border-color: var(--moo-border);
-  --bs-border-color-translucent: rgba(24, 24, 27, 0.175);
-  --bs-form-valid-color: #047857;
-  --bs-form-valid-border-color: #047857;
-  --bs-form-invalid-color: var(--moo-destructive);
-  --bs-form-invalid-border-color: #e7000b;
-  --bs-primary-text-emphasis: #090909;
-  --bs-secondary-text-emphasis: #626262;
-  --bs-success-text-emphasis: #023023;
-  --bs-info-text-emphasis: #012a40;
-  --bs-warning-text-emphasis: #482104;
-  --bs-danger-text-emphasis: #5c0004;
-  --bs-light-text-emphasis: #495057;
-  --bs-dark-text-emphasis: #495057;
-  --bs-primary-bg-subtle: #d1d1d1;
-  --bs-secondary-bg-subtle: #fdfdfd;
-  --bs-success-bg-subtle: #cde4dd;
-  --bs-info-bg-subtle: #cde1ec;
-  --bs-warning-bg-subtle: #f0ddce;
-  --bs-danger-bg-subtle: #faccce;
-  --bs-light-bg-subtle: #fcfcfd;
-  --bs-dark-bg-subtle: #ced4da;
-  --bs-primary-border-subtle: #a2a2a2;
-  --bs-secondary-border-subtle: #fbfbfb;
-  --bs-success-border-subtle: #9bc9bc;
-  --bs-info-border-subtle: #9ac3d9;
-  --bs-warning-border-subtle: #e1ba9d;
-  --bs-danger-border-subtle: #f5999d;
-  --bs-light-border-subtle: #e9ecef;
-  --bs-dark-border-subtle: #adb5bd;
-}
-
-:where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) {
-  color-scheme: dark;
-  color: var(--bs-body-color);
-  background-color: var(--bs-body-bg);
-  --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;
-  --bs-body-color: var(--moo-foreground);
-  --bs-body-color-rgb: 250, 250, 250;
-  --bs-body-bg: var(--moo-surface);
-  --bs-body-bg-rgb: 10, 10, 10;
-  --bs-emphasis-color: var(--moo-foreground);
-  --bs-emphasis-color-rgb: 250, 250, 250;
-  --bs-secondary-color: var(--moo-muted-foreground);
-  --bs-secondary-color-rgb: 161, 161, 170;
-  --bs-secondary-bg: var(--moo-muted-surface);
-  --bs-secondary-bg-rgb: 39, 39, 42;
-  --bs-tertiary-color: #71717a;
-  --bs-tertiary-color-rgb: 113, 113, 122;
-  --bs-tertiary-bg: #202024;
-  --bs-tertiary-bg-rgb: 32, 32, 36;
-  --bs-heading-color: var(--moo-foreground);
-  --bs-link-color: var(--moo-foreground);
-  --bs-link-color-rgb: 250, 250, 250;
-  --bs-link-hover-color: var(--moo-muted-foreground);
-  --bs-link-hover-color-rgb: 161, 161, 170;
-  --bs-code-color: #e685b5;
-  --bs-highlight-color: var(--moo-foreground);
-  --bs-highlight-bg: #664d03;
-  --bs-border-color: var(--moo-border);
-  --bs-border-color-translucent: rgba(250, 250, 250, 0.15);
-  --bs-form-valid-color: #75b798;
-  --bs-form-valid-border-color: #75b798;
-  --bs-form-invalid-color: var(--moo-destructive);
-  --bs-form-invalid-border-color: color-mix(in srgb, #ff6467 50%, transparent);
-  --bs-primary-text-emphasis: #747474;
-  --bs-secondary-text-emphasis: #f8f8f9;
-  --bs-success-text-emphasis: #68ae9a;
-  --bs-info-text-emphasis: #68a5c7;
-  --bs-warning-text-emphasis: #d2986b;
-  --bs-danger-text-emphasis: #f1666d;
-  --bs-light-text-emphasis: #f8f9fa;
-  --bs-dark-text-emphasis: #dee2e6;
-  --bs-primary-bg-subtle: #050505;
-  --bs-secondary-bg-subtle: #313131;
-  --bs-success-bg-subtle: #011811;
-  --bs-info-bg-subtle: #011520;
-  --bs-warning-bg-subtle: #241102;
-  --bs-danger-bg-subtle: #2e0002;
-  --bs-light-bg-subtle: #343a40;
-  --bs-dark-bg-subtle: #1f2225;
-  --bs-primary-border-subtle: #0e0e0e;
-  --bs-secondary-border-subtle: #929293;
-  --bs-success-border-subtle: #024834;
-  --bs-info-border-subtle: #023f61;
-  --bs-warning-border-subtle: #6c3205;
-  --bs-danger-border-subtle: #8b0007;
-  --bs-light-border-subtle: #495057;
-  --bs-dark-border-subtle: #343a40;
 }
 
 .moo-ui[data-bs-theme="light"] {
@@ -488,11 +401,11 @@
   --bs-dark-border-subtle: #343a40;
 }
 
-.moo-ui[dir="rtl"] {
+.moo-ui[data-bs-theme][dir="rtl"] {
   direction: rtl;
 }
 
-@scope (.moo-ui) {
+@scope (.moo-ui) to (:where(.moo-ui[data-bs-theme="light"], .moo-ui[data-bs-theme="dark"])) {
   .table {
     --bs-table-color-type: initial;
     --bs-table-bg-type: initial;
@@ -2843,7 +2756,7 @@
     pointer-events: none;
   }
   .modal.fade .modal-dialog {
-    transition: transform 0.3s ease-out;
+    transition: transform var(--moo-overlay-motion-duration, 0.3s) ease-out;
     transform: translate(0, -50px);
   }
   @media (prefers-reduced-motion: reduce) {
@@ -3349,7 +3262,7 @@
     --bs-offcanvas-border-width: var(--bs-border-width);
     --bs-offcanvas-border-color: var(--bs-border-color-translucent);
     --bs-offcanvas-box-shadow: var(--bs-box-shadow-sm);
-    --bs-offcanvas-transition: transform 0.3s ease-in-out;
+    --bs-offcanvas-transition: transform var(--moo-overlay-motion-duration, 0.3s) ease-in-out;
     --bs-offcanvas-title-line-height: 1.5;
   }
   @media (max-width: 575.98px) {
@@ -3858,274 +3771,36 @@
     color: #fff !important;
     background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important;
   }
-  .form-label,
-.form-check-label {
-    user-select: none;
+  kbd {
+    display: inline-flex;
+    height: 1.25rem;
+    min-width: 1.25rem;
+    align-items: center;
+    justify-content: center;
+    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    line-height: 1rem;
+    font-weight: 500;
   }
-  :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);
-    outline: 0;
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
+  .form-control {
+    min-height: 2rem;
   }
-  .btn:focus-visible:hover,
-.btn.show:focus-visible {
-    border-color: var(--bs-btn-hover-border-color);
-    box-shadow: none;
+  .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:focus:not(:focus-visible),
-.form-select:focus:not(:focus-visible) {
-    border-color: var(--moo-border);
-    box-shadow: none;
+  .form-control[type="file"]:not(.form-control-sm, .form-control-lg)::file-selector-button {
+    min-height: calc(2rem - var(--bs-border-width) * 2);
   }
-  .page-link:focus:not(:focus-visible) {
-    outline: 0;
-    box-shadow: none;
+  .form-control[type="time"] {
+    appearance: none;
+    position: relative;
   }
-  .page-item:not(.active) > .page-link:focus:not(:focus-visible) {
-    color: var(--bs-pagination-color);
-    background-color: var(--bs-pagination-bg);
-    border-color: var(--bs-pagination-border-color);
-  }
-  .form-control.is-invalid,
-.form-control.is-invalid:focus,
-.was-validated .form-control:invalid,
-.was-validated .form-control:invalid:focus,
-.form-select.is-invalid,
-.form-select.is-invalid:focus,
-.was-validated .form-select:invalid,
-.was-validated .form-select:invalid:focus {
-    box-shadow: 0 0 0 3px var(--moo-form-invalid-ring-color);
-  }
-  .btn-check:focus:not(:focus-visible) + .btn {
-    outline: 0;
-    box-shadow: none;
-  }
-  .btn-check:focus-visible + .btn {
-    border-color: var(--moo-ring);
-    outline: 0;
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
-  }
-  .input-group > .dropdown-toggle[aria-expanded="true"]:focus-visible {
-    box-shadow: none;
-  }
-  .combobox-chips:focus-within {
-    border-color: var(--moo-ring);
-    outline: 0;
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
-  }
-  .input-group:has(> .form-control:focus):not(:has(> .form-control[type="file"])) {
-    border-color: var(--moo-ring);
-    outline: 0;
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
-  }
-  .input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))):has(> :is(.form-control, .form-select).is-invalid),
-.was-validated .input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))):has(> :is(.form-control, .form-select):invalid) {
-    border-color: var(--bs-form-invalid-border-color);
-    box-shadow: 0 0 0 3px var(--moo-form-invalid-ring-color);
-  }
-  .input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))) > :is(.form-control, .form-select).is-invalid,
-.was-validated .input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))) > :is(.form-control, .form-select):invalid {
-    box-shadow: none;
-  }
-  :where( .scroll-fade, .scroll-fade-y, .scroll-fade-x, .scroll-fade-t, .scroll-fade-b, .scroll-fade-l, .scroll-fade-r, .scroll-fade-s, .scroll-fade-e ) {
-    --scroll-fade-size: min(12%, 2.5rem);
-    --scroll-fade-reveal: 6rem;
-    --moo-scroll-fade-t-size: var(--scroll-fade-size);
-    --moo-scroll-fade-b-size: var(--scroll-fade-size);
-    --moo-scroll-fade-s-size: var(--scroll-fade-size);
-    --moo-scroll-fade-e-size: var(--scroll-fade-size);
-    --moo-scroll-fade-mask: linear-gradient(
-    to bottom,
-    transparent 0,
-    #000 var(--moo-scroll-fade-t),
-    #000 calc(100% - var(--moo-scroll-fade-b)),
-    transparent 100%
-  );
-    mask-image: var(--moo-scroll-fade-mask);
-  }
-  .scroll-fade,
-.scroll-fade-y {
-    animation-name: moo-scroll-fade-reveal-t, moo-scroll-fade-reveal-b;
-    animation-duration: 1ms, 1ms;
-    animation-fill-mode: both, both;
-    animation-timing-function: linear, linear;
-    animation-timeline: scroll(self y), scroll(self y);
-    animation-range: 0 var(--scroll-fade-reveal), calc(100% - var(--scroll-fade-reveal)) 100%;
-  }
-  .scroll-fade-t {
-    animation-name: moo-scroll-fade-reveal-t;
-    animation-duration: 1ms;
-    animation-fill-mode: both;
-    animation-timing-function: linear;
-    animation-timeline: scroll(self y);
-    animation-range: 0 var(--scroll-fade-reveal);
-  }
-  .scroll-fade-b {
-    animation-name: moo-scroll-fade-reveal-b;
-    animation-duration: 1ms;
-    animation-fill-mode: both;
-    animation-timing-function: linear;
-    animation-timeline: scroll(self y);
-    animation-range: calc(100% - var(--scroll-fade-reveal)) 100%;
-  }
-  .scroll-fade-x,
-.scroll-fade-s,
-.scroll-fade-e {
-    --moo-scroll-fade-mask: linear-gradient(
-    to right,
-    transparent 0,
-    #000 var(--moo-scroll-fade-s),
-    #000 calc(100% - var(--moo-scroll-fade-e)),
-    transparent 100%
-  );
-  }
-  .scroll-fade-x {
-    animation-name: moo-scroll-fade-reveal-s, moo-scroll-fade-reveal-e;
-    animation-duration: 1ms, 1ms;
-    animation-fill-mode: both, both;
-    animation-timing-function: linear, linear;
-    animation-timeline: scroll(self inline), scroll(self inline);
-    animation-range: 0 var(--scroll-fade-reveal), calc(100% - var(--scroll-fade-reveal)) 100%;
-  }
-  .scroll-fade-s {
-    animation-name: moo-scroll-fade-reveal-s;
-    animation-duration: 1ms;
-    animation-fill-mode: both;
-    animation-timing-function: linear;
-    animation-timeline: scroll(self inline);
-    animation-range: 0 var(--scroll-fade-reveal);
-  }
-  .scroll-fade-e {
-    animation-name: moo-scroll-fade-reveal-e;
-    animation-duration: 1ms;
-    animation-fill-mode: both;
-    animation-timing-function: linear;
-    animation-timeline: scroll(self inline);
-    animation-range: calc(100% - var(--scroll-fade-reveal)) 100%;
-  }
-  .scroll-fade-x:where([dir="rtl"], [dir="rtl"] *),
-.scroll-fade-s:where([dir="rtl"], [dir="rtl"] *),
-.scroll-fade-e:where([dir="rtl"], [dir="rtl"] *) {
-    --moo-scroll-fade-mask: linear-gradient(
-    to left,
-    transparent 0,
-    #000 var(--moo-scroll-fade-s),
-    #000 calc(100% - var(--moo-scroll-fade-e)),
-    transparent 100%
-  );
-  }
-  .scroll-fade-l,
-.scroll-fade-r {
-    --moo-scroll-fade-mask: linear-gradient(
-    to right,
-    transparent 0,
-    #000 var(--moo-scroll-fade-s),
-    #000 calc(100% - var(--moo-scroll-fade-e)),
-    transparent 100%
-  );
-  }
-  .scroll-fade-l {
-    animation-name: moo-scroll-fade-reveal-s;
-    animation-duration: 1ms;
-    animation-fill-mode: both;
-    animation-timing-function: linear;
-    animation-timeline: scroll(self x);
-    animation-range: 0 var(--scroll-fade-reveal);
-  }
-  .scroll-fade-r {
-    animation-name: moo-scroll-fade-reveal-e;
-    animation-duration: 1ms;
-    animation-fill-mode: both;
-    animation-timing-function: linear;
-    animation-timeline: scroll(self x);
-    animation-range: calc(100% - var(--scroll-fade-reveal)) 100%;
-  }
-  .scroll-fade-none {
-    --moo-scroll-fade-mask: none;
-  }
-  .no-scrollbar {
-    scrollbar-width: none;
-  }
-  .no-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
-  .scrollbar-thin {
-    --moo-scrollbar-thin-size: 0.375rem;
-    --moo-scrollbar-thin-thumb-bg: color-mix(in srgb, var(--bs-secondary-color) 28%, transparent);
-    --moo-scrollbar-thin-thumb-hover-bg: color-mix(in srgb, var(--bs-secondary-color) 45%, transparent);
-    scrollbar-color: var(--moo-scrollbar-thin-thumb-bg) transparent;
-    scrollbar-width: thin;
-  }
-  .scrollbar-thin::-webkit-scrollbar {
-    width: var(--moo-scrollbar-thin-size);
-    height: var(--moo-scrollbar-thin-size);
-  }
-  .scrollbar-thin::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  .scrollbar-thin::-webkit-scrollbar-thumb {
-    border-radius: var(--bs-border-radius-pill);
-    background-color: var(--moo-scrollbar-thin-thumb-bg);
-  }
-  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
-    background-color: var(--moo-scrollbar-thin-thumb-hover-bg);
-  }
-  @supports not (animation-timeline: scroll()) {
-    .scroll-fade,
-.scroll-fade-y {
-      --moo-scroll-fade-t: var(--moo-scroll-fade-t-size);
-      --moo-scroll-fade-b: var(--moo-scroll-fade-b-size);
-    }
-    .scroll-fade-x {
-      --moo-scroll-fade-s: var(--moo-scroll-fade-s-size);
-      --moo-scroll-fade-e: var(--moo-scroll-fade-e-size);
-    }
-    .scroll-fade-t {
-      --moo-scroll-fade-t: var(--moo-scroll-fade-t-size);
-    }
-    .scroll-fade-b {
-      --moo-scroll-fade-b: var(--moo-scroll-fade-b-size);
-    }
-    .scroll-fade-l,
-.scroll-fade-s {
-      --moo-scroll-fade-s: var(--moo-scroll-fade-s-size);
-    }
-    .scroll-fade-r,
-.scroll-fade-e {
-      --moo-scroll-fade-e: var(--moo-scroll-fade-e-size);
-    }
-  }
-  kbd {
-    display: inline-flex;
-    height: 1.25rem;
-    min-width: 1.25rem;
-    align-items: center;
-    justify-content: center;
-    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    line-height: 1rem;
-    font-weight: 500;
-  }
-  .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[type="time"]::-webkit-calendar-picker-indicator {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
   }
   .form-control:disabled,
 .form-select:disabled {
@@ -4436,33 +4111,88 @@ label.btn {
     --bs-btn-hover-color: var(--moo-muted-foreground);
     text-underline-offset: 0.25rem;
   }
-  .btn-close {
-    --bs-btn-close-color: var(--moo-foreground);
-    --bs-btn-hover-color: var(--bs-btn-close-color);
-    --bs-btn-hover-bg: var(--moo-muted-surface);
-    --bs-btn-hover-border-color: transparent;
-    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M18 6 6 18'/%3e%3cpath d='m6 6 12 12'/%3e%3c/svg%3e");
-    display: inline-flex;
-    flex: 0 0 auto;
-    align-items: center;
-    justify-content: center;
-    border-width: var(--bs-border-width);
-    border-style: var(--bs-border-style);
-    border-color: transparent;
-    border-radius: var(--bs-border-radius-xl);
-    color: var(--bs-btn-close-color);
-    background-image: none;
-    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  }
-  .btn-close::before {
-    width: 0.75rem;
-    height: 0.75rem;
+  .search-trigger {
+    width: 10rem;
+    max-width: 100%;
+    flex: 0 1 10rem;
+    min-width: 0;
+    justify-content: space-between;
+    height: 2rem;
+    padding: 0.5rem 0.75rem;
+    color: var(--bs-secondary-color);
+    border: var(--bs-border-width) solid transparent;
+    border-radius: var(--bs-border-radius);
+    background: color-mix(in srgb, var(--bs-secondary-bg) 55%, var(--bs-body-bg));
+    font-size: 0.875rem;
+    font-weight: 400;
+    box-shadow: none;
+  }
+  .search-trigger:hover {
+    color: var(--bs-secondary-color);
+    border-color: transparent;
+    background: color-mix(in srgb, var(--bs-secondary-bg) 78%, var(--bs-body-bg));
+  }
+  .search-trigger:focus-visible {
+    color: var(--bs-secondary-color);
+    border-color: transparent;
+    background: color-mix(in srgb, var(--bs-secondary-bg) 78%, var(--bs-body-bg));
+  }
+  .search-trigger__label {
+    display: inline-flex;
+    min-width: 0;
+    align-items: center;
+    gap: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .search-trigger__shortcut {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: 0.25rem;
+    margin-inline-start: auto;
+  }
+  @media (min-width: 992px) {
+    .search-trigger {
+      width: 13rem;
+      flex-basis: 13rem;
+    }
+  }
+  @media (min-width: 1400px) {
+    .search-trigger {
+      width: 16rem;
+      flex-basis: 16rem;
+    }
+  }
+  .btn-close {
+    --bs-btn-close-color: var(--moo-foreground);
+    --bs-btn-hover-color: var(--bs-btn-close-color);
+    --bs-btn-hover-bg: var(--moo-muted-surface);
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M18 6 6 18'/%3e%3cpath d='m6 6 12 12'/%3e%3c/svg%3e");
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    border-width: var(--bs-border-width);
+    border-style: var(--bs-border-style);
+    border-color: transparent;
+    border-radius: var(--bs-border-radius-pill);
+    color: var(--bs-btn-close-color);
+    background-image: none;
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  }
+  .btn-close::before {
+    width: 0.75rem;
+    height: 0.75rem;
     content: "";
     background-color: currentColor;
     -webkit-mask: var(--bs-btn-close-bg) center/contain no-repeat;
     mask: var(--bs-btn-close-bg) center/contain no-repeat;
   }
-  [data-bs-theme="dark"] .btn-close {
+  :scope[data-bs-theme="light"] .btn-close,
+:scope[data-bs-theme="dark"] .btn-close {
     filter: none;
   }
   .btn-close:hover {
@@ -4570,7 +4300,7 @@ 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"] *) {
+  :scope[data-bs-theme="dark"] .card {
     --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));
   }
@@ -4753,6 +4483,10 @@ label.btn {
     --moo-dropdown-sidebar-min-width: 14rem;
     min-width: max(100%, var(--moo-dropdown-sidebar-min-width));
   }
+  [data-identity-trigger="1"] + .dropdown-menu {
+    --moo-dropdown-sidebar-min-width: 14rem;
+    min-width: var(--moo-dropdown-sidebar-min-width);
+  }
   @media (max-width: 575.98px) {
     [data-slot="sidebar-header"] .dropend > .dropdown-menu,
 [data-slot="sidebar-footer"] .dropend > .dropdown-menu {
@@ -4794,8 +4528,8 @@ label.btn {
 [data-slot="sidebar-footer"] [data-sidebar-dropdown-positioned] > .dropdown-menu {
       position: fixed !important;
       z-index: 1000;
-      inset-inline-start: var(--moo-sidebar-dropdown-inline-start, auto) !important;
-      inset-inline-end: auto !important;
+      left: var(--moo-sidebar-dropdown-left, auto) !important;
+      right: var(--moo-sidebar-dropdown-right, auto) !important;
       width: var(--moo-dropdown-sidebar-min-width);
       min-width: var(--moo-dropdown-sidebar-min-width);
       margin: 0;
@@ -4808,11 +4542,6 @@ label.btn {
       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;
@@ -4986,60 +4715,6 @@ label.btn {
   .skeleton > .placeholder {
     display: block;
   }
-  .sidebar-wrapper {
-    --moo-sidebar-width: 16rem;
-    --moo-sidebar-width-icon: 3rem;
-    display: flex;
-    width: 100%;
-    min-height: 100svh;
-  }
-  .sidebar-wrapper--contained {
-    min-height: 0;
-    height: 34rem;
-    overflow: hidden;
-    border: var(--bs-border-width) solid var(--moo-border);
-    border-radius: var(--bs-border-radius-xl);
-  }
-  .sidebar {
-    --bs-offcanvas-width: var(--moo-sidebar-width);
-    flex: 0 0 var(--moo-sidebar-width);
-    width: var(--moo-sidebar-width);
-    color: var(--moo-sidebar-foreground);
-  }
-  .sidebar[data-side="left"] .sidebar-inner {
-    border-inline-end: var(--bs-border-width) solid var(--moo-sidebar-border);
-  }
-  .sidebar[data-side="right"] {
-    order: 1;
-  }
-  .sidebar[data-side="right"] .sidebar-inner {
-    border-inline-start: var(--bs-border-width) solid var(--moo-sidebar-border);
-  }
-  @media (min-width: 992px) {
-    .sidebar {
-      transition: flex-basis 0.2s ease, width 0.2s ease;
-    }
-    .sidebar[data-variant="floating"] .sidebar-inner {
-      width: auto;
-      height: calc(100svh - 1rem);
-      max-height: calc(100svh - 1rem);
-      margin: 0.5rem;
-      border: var(--bs-border-width) solid var(--moo-sidebar-border);
-      border-radius: var(--bs-border-radius-lg);
-      box-shadow: var(--bs-box-shadow-sm);
-    }
-    .sidebar-wrapper--contained .sidebar[data-variant="floating"] .sidebar-inner {
-      height: calc(100% - 1rem);
-      max-height: calc(100% - 1rem);
-    }
-    .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-sidebar-state="collapsed"] .sidebar[data-variant="floating"][data-collapsible="icon"] .sidebar-inner {
-      box-shadow: var(--bs-box-shadow);
-    }
-  }
   .sidebar-inner {
     position: sticky;
     top: 0;
@@ -5050,11 +4725,6 @@ label.btn {
     max-height: 100svh;
     background: var(--moo-sidebar);
   }
-  .sidebar-wrapper--contained .sidebar-inner {
-    position: relative;
-    height: 100%;
-    max-height: 100%;
-  }
   .sidebar-header,
 .sidebar-footer {
     display: flex;
@@ -5361,96 +5031,7 @@ label.btn {
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .sidebar-inset {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    min-width: 0;
-    background: var(--bs-body-bg);
-  }
-  .sidebar-inset__header {
-    position: sticky;
-    top: 0;
-    z-index: 20;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    height: 4rem;
-    padding-inline: 1rem;
-    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
-    background: var(--bs-body-bg);
-  }
-  .sidebar-inset__content {
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-  @media (min-width: 992px) {
-    .sidebar-wrapper:has(.sidebar[data-variant="inset"]) {
-      background: var(--moo-sidebar);
-    }
-    .sidebar-wrapper:has(.sidebar[data-variant="inset"]) .sidebar-inset {
-      margin: 0.5rem;
-      margin-inline-start: 0;
-      border-radius: var(--bs-border-radius-xl);
-      box-shadow: var(--bs-box-shadow-sm);
-    }
-    .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-sidebar-state="collapsed"]:has(.sidebar[data-variant="inset"][data-side="right"]) .sidebar-inset {
-      margin-inline-end: 0.5rem;
-    }
-  }
-  .sidebar-rail {
-    position: absolute;
-    inset-block: 0;
-    inset-inline-end: 0;
-    z-index: 20;
-    width: 1rem;
-    padding: 0;
-    transform: translateX(50%);
-    border: 0;
-    background: transparent;
-    cursor: pointer;
-  }
-  [dir="rtl"] .sidebar-rail {
-    transform: translateX(-50%);
-  }
-  .sidebar-rail::after {
-    content: "";
-    position: absolute;
-    inset-block: 0;
-    inset-inline-start: 50%;
-    width: var(--bs-border-width);
-    background: transparent;
-    transition: background 0.15s ease;
-  }
-  .sidebar-rail:hover::after {
-    background: var(--moo-sidebar-border);
-  }
   @media (min-width: 992px) {
-    .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);
-    }
-    .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar-inset {
-      position: relative;
-      z-index: 0;
-    }
     [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,
@@ -5464,13 +5045,14 @@ label.btn {
       display: none !important;
     }
     [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"]:has(.sidebar-menu-button[data-bs-toggle="dropdown"][aria-expanded="true"]) {
-      z-index: 1000;
+      z-index: 1031;
     }
     .sidebar-menu-flyout {
       position: fixed;
       z-index: 1000;
       inset-block-start: var(--moo-sidebar-flyout-block-start);
-      inset-inline-start: var(--moo-sidebar-flyout-inline-start);
+      left: var(--moo-sidebar-flyout-left);
+      right: auto;
       display: flex;
       flex-direction: column;
       min-width: 10rem;
@@ -5542,30 +5124,6 @@ label.btn {
       display: none;
     }
   }
-  @media (max-width: 991.98px) {
-    .sidebar-rail {
-      display: none;
-    }
-    .sidebar-wrapper--contained {
-      flex-direction: column;
-      height: auto;
-      min-height: 34rem;
-      overflow: visible;
-    }
-    .sidebar-wrapper--contained .sidebar {
-      position: relative;
-      inset: auto;
-      flex: 0 0 auto;
-      width: 100%;
-      height: auto;
-      visibility: visible;
-      transform: none;
-    }
-    .sidebar-wrapper--contained .sidebar-inner {
-      height: auto;
-      max-height: none;
-    }
-  }
   .alert {
     --bs-alert-border-color: var(--moo-border);
     --bs-alert-color: var(--moo-foreground);
@@ -5584,10 +5142,9 @@ label.btn {
   .alert-dismissible .btn-close {
     top: auto;
     right: auto;
-    inset-block-start: 50%;
+    inset-block-start: var(--bs-alert-padding-y);
     inset-inline-end: var(--bs-alert-padding-x);
     padding: 0.34375rem 0.34375rem;
-    transform: translateY(-50%);
   }
   .alert-danger {
     --bs-alert-bg: transparent;
@@ -6064,18 +5621,24 @@ label.btn {
   .form-switch .form-check-input {
     height: 1.15rem;
   }
-  :where([data-bs-theme="dark"]) .form-switch .form-check-input:checked {
+  :scope[data-bs-theme="light"] .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='%23fff'/%3e%3c/svg%3e");
+    background-color: var(--moo-primary);
+    border-color: var(--moo-primary);
+    filter: none;
+  }
+  :scope[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-primary);
     border-color: var(--moo-primary);
     filter: none;
   }
-  .form-switch .form-check-input:focus:active:not(:checked),
-.form-switch .form-check-input:focus:not(:focus-visible):not(:checked) {
+  :scope[data-bs-theme="light"] .form-switch .form-check-input:focus:active:not(:checked),
+:scope[data-bs-theme="light"] .form-switch .form-check-input:focus:not(:focus-visible):not(: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='rgba%2810, 10, 10, 0.25%29'/%3e%3c/svg%3e");
   }
-  :where([data-bs-theme="dark"]) .form-switch .form-check-input:focus:active:not(:checked),
-:where([data-bs-theme="dark"]) .form-switch .form-check-input:focus:not(:focus-visible):not(:checked) {
+  :scope[data-bs-theme="dark"] .form-switch .form-check-input:focus:active:not(:checked),
+:scope[data-bs-theme="dark"] .form-switch .form-check-input:focus:not(:focus-visible):not(: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='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
   }
   .spinner [data-icon] {
@@ -6369,6 +5932,16 @@ label.btn {
   .modal-header {
     gap: calc(var(--bs-modal-padding) * 0.75);
   }
+  .modal-header:has(> .btn-close) {
+    position: relative;
+    padding-inline-end: calc( var(--bs-modal-padding) + 0.75rem + 0.6875rem + 0.5rem);
+  }
+  .modal-header:has(> .btn-close) > .btn-close {
+    position: absolute;
+    inset-block-start: 0.5rem;
+    inset-inline-end: 0.5rem;
+    margin: 0;
+  }
   .modal--alert {
     --bs-modal-width: 24rem;
     --bs-modal-padding: 1rem;
@@ -7857,42 +7430,491 @@ label.btn {
   .datatable--release-review {
     --moo-datatable-min-width: 64rem;
   }
-}
-
-:where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) .form-select,
-.moo-ui[data-bs-theme="dark"] .form-select {
-  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
-}
-
-:where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) .form-switch .form-check-input:not(:checked):not(:focus),
-.moo-ui[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked):not(:focus) {
-  --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-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-primary);
-  border-color: var(--moo-primary);
-  filter: none;
-}
-
-:where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) .form-switch .form-check-input:focus:active:not(:checked),
-:where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) .form-switch .form-check-input:focus:not(:focus-visible):not(:checked),
-.moo-ui[data-bs-theme="dark"] .form-switch .form-check-input:focus:active:not(:checked),
-.moo-ui[data-bs-theme="dark"] .form-switch .form-check-input:focus:not(:focus-visible):not(: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='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
-}
-
-.modal-backdrop,
-.offcanvas-backdrop {
-  --bs-backdrop-opacity: var(--moo-overlay-backdrop-opacity, 1);
-  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));
-}
-
-.modal-backdrop.show,
-.offcanvas-backdrop.show {
-  opacity: var(--moo-overlay-backdrop-opacity, 1);
+  .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);
+    outline: 0;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
+  }
+  .btn:focus-visible:hover,
+.btn.show:focus-visible {
+    border-color: var(--bs-btn-hover-border-color);
+    box-shadow: none;
+  }
+  .form-control:focus:not(:focus-visible),
+.form-select:focus:not(:focus-visible) {
+    border-color: var(--moo-border);
+    box-shadow: none;
+  }
+  .page-link:focus:not(:focus-visible) {
+    outline: 0;
+    box-shadow: none;
+  }
+  .page-item:not(.active) > .page-link:focus:not(:focus-visible) {
+    color: var(--bs-pagination-color);
+    background-color: var(--bs-pagination-bg);
+    border-color: var(--bs-pagination-border-color);
+  }
+  .form-control.is-invalid,
+.form-control.is-invalid:focus,
+.was-validated .form-control:invalid,
+.was-validated .form-control:invalid:focus,
+.form-select.is-invalid,
+.form-select.is-invalid:focus,
+.was-validated .form-select:invalid,
+.was-validated .form-select:invalid:focus {
+    box-shadow: 0 0 0 3px var(--moo-form-invalid-ring-color);
+  }
+  .btn-check:focus:not(:focus-visible) + .btn {
+    outline: 0;
+    box-shadow: none;
+  }
+  .btn-check:focus-visible + .btn {
+    border-color: var(--moo-ring);
+    outline: 0;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
+  }
+  .input-group > .dropdown-toggle[aria-expanded="true"]:focus-visible {
+    box-shadow: none;
+  }
+  .combobox-chips:focus-within {
+    border-color: var(--moo-ring);
+    outline: 0;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
+  }
+  .input-group:has(> .form-control:focus):not(:has(> .form-control[type="file"])) {
+    border-color: var(--moo-ring);
+    outline: 0;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
+  }
+  .input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))):has(> :is(.form-control, .form-select).is-invalid),
+.was-validated .input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))):has(> :is(.form-control, .form-select):invalid) {
+    border-color: var(--bs-form-invalid-border-color);
+    box-shadow: 0 0 0 3px var(--moo-form-invalid-ring-color);
+  }
+  .input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))) > :is(.form-control, .form-select).is-invalid,
+.was-validated .input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))) > :is(.form-control, .form-select):invalid {
+    box-shadow: none;
+  }
+  :where( .scroll-fade, .scroll-fade-y, .scroll-fade-x, .scroll-fade-t, .scroll-fade-b, .scroll-fade-l, .scroll-fade-r, .scroll-fade-s, .scroll-fade-e ) {
+    --scroll-fade-size: min(12%, 2.5rem);
+    --scroll-fade-reveal: 6rem;
+    --moo-scroll-fade-t-size: var(--scroll-fade-size);
+    --moo-scroll-fade-b-size: var(--scroll-fade-size);
+    --moo-scroll-fade-s-size: var(--scroll-fade-size);
+    --moo-scroll-fade-e-size: var(--scroll-fade-size);
+    --moo-scroll-fade-mask: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--moo-scroll-fade-t),
+    #000 calc(100% - var(--moo-scroll-fade-b)),
+    transparent 100%
+  );
+    mask-image: var(--moo-scroll-fade-mask);
+  }
+  .scroll-fade,
+.scroll-fade-y {
+    animation-name: moo-scroll-fade-reveal-t, moo-scroll-fade-reveal-b;
+    animation-duration: 1ms, 1ms;
+    animation-fill-mode: both, both;
+    animation-timing-function: linear, linear;
+    animation-timeline: scroll(self y), scroll(self y);
+    animation-range: 0 var(--scroll-fade-reveal), calc(100% - var(--scroll-fade-reveal)) 100%;
+  }
+  .scroll-fade-t {
+    animation-name: moo-scroll-fade-reveal-t;
+    animation-duration: 1ms;
+    animation-fill-mode: both;
+    animation-timing-function: linear;
+    animation-timeline: scroll(self y);
+    animation-range: 0 var(--scroll-fade-reveal);
+  }
+  .scroll-fade-b {
+    animation-name: moo-scroll-fade-reveal-b;
+    animation-duration: 1ms;
+    animation-fill-mode: both;
+    animation-timing-function: linear;
+    animation-timeline: scroll(self y);
+    animation-range: calc(100% - var(--scroll-fade-reveal)) 100%;
+  }
+  .scroll-fade-x,
+.scroll-fade-s,
+.scroll-fade-e {
+    --moo-scroll-fade-mask: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--moo-scroll-fade-s),
+    #000 calc(100% - var(--moo-scroll-fade-e)),
+    transparent 100%
+  );
+  }
+  .scroll-fade-x {
+    animation-name: moo-scroll-fade-reveal-s, moo-scroll-fade-reveal-e;
+    animation-duration: 1ms, 1ms;
+    animation-fill-mode: both, both;
+    animation-timing-function: linear, linear;
+    animation-timeline: scroll(self inline), scroll(self inline);
+    animation-range: 0 var(--scroll-fade-reveal), calc(100% - var(--scroll-fade-reveal)) 100%;
+  }
+  .scroll-fade-s {
+    animation-name: moo-scroll-fade-reveal-s;
+    animation-duration: 1ms;
+    animation-fill-mode: both;
+    animation-timing-function: linear;
+    animation-timeline: scroll(self inline);
+    animation-range: 0 var(--scroll-fade-reveal);
+  }
+  .scroll-fade-e {
+    animation-name: moo-scroll-fade-reveal-e;
+    animation-duration: 1ms;
+    animation-fill-mode: both;
+    animation-timing-function: linear;
+    animation-timeline: scroll(self inline);
+    animation-range: calc(100% - var(--scroll-fade-reveal)) 100%;
+  }
+  .scroll-fade-x:where([dir="rtl"], [dir="rtl"] *),
+.scroll-fade-s:where([dir="rtl"], [dir="rtl"] *),
+.scroll-fade-e:where([dir="rtl"], [dir="rtl"] *) {
+    --moo-scroll-fade-mask: linear-gradient(
+    to left,
+    transparent 0,
+    #000 var(--moo-scroll-fade-s),
+    #000 calc(100% - var(--moo-scroll-fade-e)),
+    transparent 100%
+  );
+  }
+  .scroll-fade-l,
+.scroll-fade-r {
+    --moo-scroll-fade-mask: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--moo-scroll-fade-s),
+    #000 calc(100% - var(--moo-scroll-fade-e)),
+    transparent 100%
+  );
+  }
+  .scroll-fade-l {
+    animation-name: moo-scroll-fade-reveal-s;
+    animation-duration: 1ms;
+    animation-fill-mode: both;
+    animation-timing-function: linear;
+    animation-timeline: scroll(self x);
+    animation-range: 0 var(--scroll-fade-reveal);
+  }
+  .scroll-fade-r {
+    animation-name: moo-scroll-fade-reveal-e;
+    animation-duration: 1ms;
+    animation-fill-mode: both;
+    animation-timing-function: linear;
+    animation-timeline: scroll(self x);
+    animation-range: calc(100% - var(--scroll-fade-reveal)) 100%;
+  }
+  .scroll-fade-none {
+    --moo-scroll-fade-mask: none;
+  }
+  .no-scrollbar {
+    scrollbar-width: none;
+  }
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .scrollbar-thin {
+    --moo-scrollbar-thin-size: 0.375rem;
+    --moo-scrollbar-thin-thumb-bg: color-mix(in srgb, var(--bs-secondary-color) 28%, transparent);
+    --moo-scrollbar-thin-thumb-hover-bg: color-mix(in srgb, var(--bs-secondary-color) 45%, transparent);
+    scrollbar-color: var(--moo-scrollbar-thin-thumb-bg) transparent;
+    scrollbar-width: thin;
+  }
+  .scrollbar-thin::-webkit-scrollbar {
+    width: var(--moo-scrollbar-thin-size);
+    height: var(--moo-scrollbar-thin-size);
+  }
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    border-radius: var(--bs-border-radius-pill);
+    background-color: var(--moo-scrollbar-thin-thumb-bg);
+  }
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background-color: var(--moo-scrollbar-thin-thumb-hover-bg);
+  }
+  @supports not (animation-timeline: scroll()) {
+    .scroll-fade,
+.scroll-fade-y {
+      --moo-scroll-fade-t: var(--moo-scroll-fade-t-size);
+      --moo-scroll-fade-b: var(--moo-scroll-fade-b-size);
+    }
+    .scroll-fade-x {
+      --moo-scroll-fade-s: var(--moo-scroll-fade-s-size);
+      --moo-scroll-fade-e: var(--moo-scroll-fade-e-size);
+    }
+    .scroll-fade-t {
+      --moo-scroll-fade-t: var(--moo-scroll-fade-t-size);
+    }
+    .scroll-fade-b {
+      --moo-scroll-fade-b: var(--moo-scroll-fade-b-size);
+    }
+    .scroll-fade-l,
+.scroll-fade-s {
+      --moo-scroll-fade-s: var(--moo-scroll-fade-s-size);
+    }
+    .scroll-fade-r,
+.scroll-fade-e {
+      --moo-scroll-fade-e: var(--moo-scroll-fade-e-size);
+    }
+  }
+  .sidebar {
+    --moo-sidebar-width: 16rem;
+    --moo-sidebar-width-icon: 3rem;
+    --bs-offcanvas-width: var(--moo-sidebar-width);
+    flex: 0 0 var(--moo-sidebar-width);
+    width: var(--moo-sidebar-width);
+    color: var(--moo-sidebar-foreground);
+  }
+  .sidebar-rail {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    z-index: 20;
+    width: 1rem;
+    padding: 0;
+    transform: translateX(50%);
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+  }
+  .sidebar:dir(rtl) .sidebar-rail {
+    transform: translateX(-50%);
+  }
+  .sidebar-rail::after {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 50%;
+    width: var(--bs-border-width);
+    background: transparent;
+    transition: background 0.15s ease;
+  }
+  .sidebar-rail:hover::after {
+    background: var(--moo-sidebar-border);
+  }
+  .wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar-inner {
+    position: relative;
+    height: 100%;
+    max-height: 100%;
+  }
+  @media (min-width: 992px) {
+    .sidebar {
+      position: relative;
+    }
+    .sidebar.offcanvas-lg[data-collapsible="offcanvas"] {
+      visibility: visible;
+      transform: none;
+    }
+    .wrapper[data-layout="app"][data-sidebar-state="collapsed"] > .sidebar.offcanvas-lg[data-collapsible="offcanvas"] {
+      flex-basis: 0;
+      width: 0;
+      overflow: hidden;
+      visibility: hidden;
+    }
+    .wrapper[data-layout="app"]:has([data-sidebar-dropdown-positioned] > .dropdown-menu.show) > .sidebar {
+      position: relative;
+      z-index: 1031;
+    }
+    .wrapper[data-layout="app"]:has([data-sidebar-dropdown-positioned] > .dropdown-menu.show) > .sidebar > .sidebar-inner {
+      z-index: 1031;
+    }
+    .wrapper[data-layout="app"][data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] {
+      flex-basis: var(--moo-sidebar-width-icon);
+      width: var(--moo-sidebar-width-icon);
+    }
+  }
+  @media (max-width: 991.98px) {
+    .sidebar-rail {
+      display: none;
+    }
+    .wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar {
+      position: relative;
+      inset: auto;
+      flex: 0 0 auto;
+      width: 100%;
+      height: auto;
+      visibility: visible;
+      transform: none;
+    }
+    .wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar-inner {
+      height: auto;
+      max-height: none;
+    }
+  }
+  .sidebar[data-side="left"] .sidebar-inner {
+    border-right: var(--bs-border-width) solid var(--moo-sidebar-border);
+  }
+  .sidebar[data-side="right"] {
+    order: 1;
+  }
+  .wrapper[data-layout="app"]:dir(rtl) > .sidebar[data-side="left"] {
+    order: 1;
+  }
+  .wrapper[data-layout="app"]:dir(rtl) > .sidebar[data-side="right"] {
+    order: 0;
+  }
+  .sidebar[data-side="right"] .sidebar-inner {
+    border-left: var(--bs-border-width) solid var(--moo-sidebar-border);
+  }
+  @media (min-width: 992px) {
+    .sidebar {
+      transition: flex-basis 0.2s ease, width 0.2s ease;
+    }
+    .sidebar[data-variant="floating"] .sidebar-inner {
+      width: auto;
+      height: calc(100svh - 1rem);
+      max-height: calc(100svh - 1rem);
+      margin: 0.5rem;
+      border: var(--bs-border-width) solid var(--moo-sidebar-border);
+      border-radius: var(--bs-border-radius-lg);
+      box-shadow: var(--bs-box-shadow-sm);
+    }
+    .wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar[data-variant="floating"] .sidebar-inner {
+      height: calc(100% - 1rem);
+      max-height: calc(100% - 1rem);
+    }
+    .wrapper[data-layout="app"][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);
+    }
+    .wrapper[data-layout="app"][data-sidebar-state="collapsed"] .sidebar[data-variant="floating"][data-collapsible="icon"] .sidebar-inner {
+      box-shadow: var(--bs-box-shadow);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .sidebar {
+      transition: none;
+    }
+  }
+  @media (min-width: 992px) {
+    .wrapper[data-layout="app"]:has(> .sidebar[data-variant="inset"]) {
+      background: var(--moo-sidebar);
+    }
+    .wrapper[data-layout="app"]:has(> .sidebar[data-variant="inset"]) > [data-slot="page"] {
+      margin: 0.5rem;
+      margin-left: 0;
+      border-radius: var(--bs-border-radius-xl);
+      box-shadow: var(--bs-box-shadow-sm);
+      background: var(--bs-body-bg);
+    }
+    .wrapper[data-layout="app"][data-sidebar-state="collapsed"]:has(> .sidebar[data-variant="inset"]) > [data-slot="page"] {
+      margin-left: 0.5rem;
+    }
+    .wrapper[data-layout="app"]:has(> .sidebar[data-variant="inset"][data-side="right"]) > [data-slot="page"] {
+      margin-left: 0.5rem;
+      margin-right: 0;
+    }
+    .wrapper[data-layout="app"][data-sidebar-state="collapsed"]:has(> .sidebar[data-variant="inset"][data-side="right"]) > [data-slot="page"] {
+      margin-right: 0.5rem;
+    }
+  }
+  .wrapper[data-layout="app"] {
+    display: flex;
+    width: 100%;
+    height: 100svh;
+    min-height: 0;
+    overflow: hidden;
+  }
+  .wrapper[data-layout="app"][data-shell-mode="contained"] {
+    min-height: 0;
+    height: 34rem;
+    overflow: hidden;
+    border: var(--bs-border-width) solid var(--moo-border);
+    border-radius: var(--bs-border-radius-xl);
+  }
+  .wrapper[data-layout="app"] > [data-slot="page"] {
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    overflow-y: auto;
+  }
+  .wrapper[data-layout="app"] > [data-slot="page"] > header,
+.wrapper[data-layout="app"] > [data-slot="page"] > main,
+.wrapper[data-layout="app"] > [data-slot="page"] > footer {
+    flex: 0 0 auto;
+  }
+  .wrapper[data-layout="app"] > [data-slot="page"] > main {
+    display: flex;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+  }
+  .wrapper[data-layout="app"] > [data-slot="page"] > main > :is( .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-fluid ) {
+    display: flex;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+  }
+  @media (max-width: 991.98px) {
+    .wrapper[data-layout="app"][data-shell-mode="contained"] {
+      flex-direction: column;
+      height: auto;
+      min-height: 0;
+      overflow: visible;
+    }
+    .wrapper[data-layout="app"][data-shell-mode="contained"] > [data-slot="page"] {
+      overflow: visible;
+    }
+  }
+  :scope[data-bs-theme="light"] .form-select {
+    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+  }
+  :scope[data-bs-theme="dark"] .form-select {
+    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+  }
+  :scope[data-bs-theme="light"] .form-switch .form-check-input:not(:checked):not(:focus) {
+    --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%2810, 10, 10, 0.25%29'/%3e%3c/svg%3e");
+  }
+  :scope[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked):not(:focus) {
+    --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");
+  }
+  .modal-backdrop,
+.offcanvas-backdrop {
+    --bs-backdrop-opacity: var(--moo-overlay-backdrop-opacity, 1);
+    opacity: 1;
+    color: transparent;
+    background-color: transparent;
+  }
+  .modal-backdrop.fade, .modal-backdrop.fade:not(.show),
+.offcanvas-backdrop.fade,
+.offcanvas-backdrop.fade:not(.show) {
+    opacity: 1;
+  }
+  .modal-backdrop.show,
+.offcanvas-backdrop.show {
+    transition: none;
+  }
+  .modal-backdrop.fade:not(.show),
+.offcanvas-backdrop.fade:not(.show) {
+    color: var(--bs-body-color, currentcolor);
+    transition: color var(--moo-overlay-motion-duration, 0.3s) ease-out;
+  }
+  .modal-backdrop::before,
+.offcanvas-backdrop::before {
+    position: absolute;
+    inset: 0;
+    content: "";
+    opacity: 0;
+    background-color: var(--moo-overlay-backdrop-bg, color-mix(in srgb, #0a0a0a 10%, transparent));
+    -webkit-backdrop-filter: blur(0);
+    backdrop-filter: blur(0);
+    animation: moo-overlay-backdrop-exit var(--moo-overlay-motion-duration, 0.3s) ease-out both;
+  }
+  .modal-backdrop.show::before,
+.offcanvas-backdrop.show::before {
+    animation: moo-overlay-backdrop-enter var(--moo-overlay-motion-duration, 0.3s) ease-out both;
+  }
 }