@wpmoo/ui 0.7.1 → 0.8.0

package/dist/assets/css/moo-ui.css

@@ -606,74 +606,74 @@ progress {
 }
 
 .display-1 {
-  font-size: calc(1.625rem + 4.5vw);
-  font-weight: 300;
+  font-size: calc(1.475rem + 2.7vw);
+  font-weight: 600;
   line-height: 1.2;
 }
 
 @media (min-width: 1200px) {
   .display-1 {
-    font-size: 5rem;
+    font-size: 3.5rem;
   }
 }
 
 .display-2 {
-  font-size: calc(1.575rem + 3.9vw);
-  font-weight: 300;
+  font-size: calc(1.425rem + 2.1vw);
+  font-weight: 600;
   line-height: 1.2;
 }
 
 @media (min-width: 1200px) {
   .display-2 {
-    font-size: 4.5rem;
+    font-size: 3rem;
   }
 }
 
 .display-3 {
-  font-size: calc(1.525rem + 3.3vw);
-  font-weight: 300;
+  font-size: calc(1.375rem + 1.5vw);
+  font-weight: 600;
   line-height: 1.2;
 }
 
 @media (min-width: 1200px) {
   .display-3 {
-    font-size: 4rem;
+    font-size: 2.5rem;
   }
 }
 
 .display-4 {
-  font-size: calc(1.475rem + 2.7vw);
-  font-weight: 300;
+  font-size: calc(1.35rem + 1.2vw);
+  font-weight: 600;
   line-height: 1.2;
 }
 
 @media (min-width: 1200px) {
   .display-4 {
-    font-size: 3.5rem;
+    font-size: 2.25rem;
   }
 }
 
 .display-5 {
-  font-size: calc(1.425rem + 2.1vw);
-  font-weight: 300;
+  font-size: calc(1.3125rem + 0.75vw);
+  font-weight: 600;
   line-height: 1.2;
 }
 
 @media (min-width: 1200px) {
   .display-5 {
-    font-size: 3rem;
+    font-size: 1.875rem;
   }
 }
 
 .display-6 {
-  font-size: calc(1.375rem + 1.5vw);
-  font-weight: 300;
+  font-size: calc(1.275rem + 0.3vw);
+  font-weight: 600;
   line-height: 1.2;
 }
 
 @media (min-width: 1200px) {
   .display-6 {
-    font-size: 2.5rem;
+    font-size: 1.5rem;
   }
 }
 
@@ -2208,7 +2208,7 @@ progress {
 }
 
 .form-control:disabled {
-  color: var(--bs-tertiary-color);
+  color: var(--moo-disabled-foreground);
   background-color: color-mix(in srgb, var(--moo-border) 40%, transparent);
   opacity: 1;
 }
@@ -2369,7 +2369,7 @@ textarea.form-control-lg {
 }
 
 .form-select:disabled {
-  color: var(--bs-tertiary-color);
+  color: var(--moo-disabled-foreground);
   background-color: color-mix(in srgb, var(--moo-border) 40%, transparent);
 }
 
@@ -2458,9 +2458,9 @@ textarea.form-control-lg {
 }
 
 .form-check-input:focus {
-  border-color: #8b8b8b;
+  border-color: var(--moo-border);
   outline: 0;
-  box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.25);
+  box-shadow: 0 0 0 var(--bs-focus-ring-width) color-mix(in srgb, var(--moo-ring) 50%, transparent);
 }
 
 .form-check-input:checked {
@@ -4960,7 +4960,7 @@ textarea.form-control-lg {
   --bs-pagination-active-color: var(--bs-body-color);
   --bs-pagination-active-bg: var(--moo-muted-surface);
   --bs-pagination-active-border-color: var(--moo-border);
-  --bs-pagination-disabled-color: var(--bs-secondary-color);
+  --bs-pagination-disabled-color: var(--moo-disabled-foreground);
   --bs-pagination-disabled-bg: var(--bs-secondary-bg);
   --bs-pagination-disabled-border-color: transparent;
   display: flex;
@@ -12324,6 +12324,7 @@ textarea.form-control-lg {
   --moo-border: #e4e4e7;
   --moo-foreground: #18181b;
   --moo-muted-foreground: #71717a;
+  --moo-disabled-foreground: #a1a1aa;
   --moo-ring: #18181b;
   --moo-destructive: #dc2626;
   --moo-destructive-foreground: #fff;
@@ -12340,6 +12341,7 @@ textarea.form-control-lg {
   --moo-border: #3f3f46;
   --moo-foreground: #fafafa;
   --moo-muted-foreground: #a1a1aa;
+  --moo-disabled-foreground: #71717a;
   --moo-ring: #fafafa;
   --moo-destructive: #f87171;
   --moo-destructive-foreground: #18181b;
@@ -12570,6 +12572,32 @@ textarea.form-control-lg {
   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 {
@@ -12600,6 +12628,7 @@ kbd {
   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;
+  border: var(--bs-border-width) solid var(--bs-border-color);
 }
 
 .form-control {
@@ -12765,7 +12794,7 @@ textarea.form-control:disabled {
   box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.25);
 }
 
-.input-group:not(:has(> .form-control[type="file"])) > :focus {
+.input-group:not(:has(> .form-control[type="file"])) > :is(.form-control, .form-select):focus {
   outline: 0;
   box-shadow: none;
 }
@@ -12943,7 +12972,7 @@ label.btn {
   --bs-btn-active-bg: var(--bs-btn-hover-bg);
   --bs-btn-active-color: var(--bs-btn-color);
   --bs-btn-active-border-color: transparent;
-  --bs-btn-disabled-color: var(--moo-muted-foreground);
+  --bs-btn-disabled-color: var(--moo-disabled-foreground);
 }
 
 .btn-danger {
@@ -13028,7 +13057,7 @@ label.btn {
   --bs-dropdown-link-hover-bg: var(--moo-muted-surface);
   --bs-dropdown-link-active-color: var(--moo-foreground);
   --bs-dropdown-link-active-bg: var(--moo-muted-surface);
-  --bs-dropdown-link-disabled-color: var(--moo-muted-foreground);
+  --bs-dropdown-link-disabled-color: var(--moo-disabled-foreground);
   --bs-dropdown-header-color: var(--moo-muted-foreground);
   box-shadow: var(--bs-dropdown-box-shadow);
 }
@@ -13040,12 +13069,22 @@ label.btn {
   gap: 0.5rem;
 }
 
+.dropdown-item:focus:not(:focus-visible):not(:hover) {
+  color: var(--bs-dropdown-link-color);
+  background-color: transparent;
+}
+
 .dropdown-item > [data-icon] {
   width: 1rem;
   height: 1rem;
   flex: 0 0 auto;
 }
 
+.dropdown-menu .dropdown-divider {
+  margin-inline: calc(-1 * var(--bs-dropdown-padding-x));
+  border-block-start: var(--bs-border-width) solid var(--bs-dropdown-divider-bg);
+}
+
 .dropdown-item-check.active {
   color: var(--bs-dropdown-link-color);
   background-color: transparent;
@@ -13058,22 +13097,27 @@ label.btn {
 }
 
 .dropdown-item-check__indicator {
+  --moo-dropdown-item-check-border-radius: 0.25em;
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
-  width: 1rem;
-  height: 1rem;
-  opacity: 0;
+  width: 1em;
+  height: 1em;
+  border: var(--bs-border-width) solid var(--bs-border-color);
+  border-radius: var(--moo-dropdown-item-check-border-radius);
+  color: transparent;
 }
 
 .dropdown-item-check.active .dropdown-item-check__indicator {
-  opacity: 1;
+  background-color: var(--moo-foreground);
+  border-color: var(--moo-foreground);
+  color: var(--moo-surface);
 }
 
 .dropdown-item-check__indicator > [data-icon] {
-  width: 1rem;
-  height: 1rem;
+  width: 0.75rem;
+  height: 0.75rem;
 }
 
 .dropdown-item__icon-box {
@@ -13268,7 +13312,7 @@ label.btn {
 .nav {
   --bs-nav-link-color: var(--moo-foreground);
   --bs-nav-link-hover-color: var(--moo-foreground);
-  --bs-nav-link-disabled-color: var(--moo-muted-foreground);
+  --bs-nav-link-disabled-color: var(--moo-disabled-foreground);
 }
 
 .nav-pills {
@@ -13291,6 +13335,10 @@ label.btn {
   background-color: var(--moo-muted-surface);
 }
 
+.nav-pills:has(.nav-link:hover) .nav-link.active:not(:hover) {
+  background-color: transparent;
+}
+
 .nav-link [data-icon] {
   width: 1rem;
   height: 1rem;
@@ -14061,7 +14109,10 @@ label.btn {
 .page-link {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 0.25rem;
+  min-width: calc( 1em * var(--bs-body-line-height, 1.5) + var(--bs-pagination-padding-y) * 2 + var(--bs-pagination-border-width) * 2);
+  min-height: calc( 1em * var(--bs-body-line-height, 1.5) + var(--bs-pagination-padding-y) * 2 + var(--bs-pagination-border-width) * 2);
 }
 
 .page-link [data-icon] {
@@ -14077,10 +14128,36 @@ label.btn {
   --bs-progress-bar-bg: var(--moo-foreground);
 }
 
+hr {
+  opacity: 1;
+  border-top: var(--bs-border-width) solid var(--moo-border);
+}
+
+.vr {
+  opacity: 1;
+  background-color: var(--moo-border);
+}
+
 [data-bs-theme="dark"] .form-check-input:checked {
   filter: invert(1);
 }
 
+.form-check-input[type="checkbox"]:focus:active,
+.form-check-input[type="checkbox"]:focus:not(:focus-visible) {
+  border-color: var(--bs-border-color);
+  box-shadow: none;
+}
+
+.form-check-input[type="checkbox"]:checked:focus:active,
+.form-check-input[type="checkbox"]:checked:focus:not(:focus-visible) {
+  border-color: #171717;
+}
+
+.form-check-input[type="checkbox"]:indeterminate:focus:active,
+.form-check-input[type="checkbox"]:indeterminate:focus:not(:focus-visible) {
+  border-color: #171717;
+}
+
 .radio-group legend.form-label {
   font-size: inherit;
 }
@@ -14089,6 +14166,11 @@ label.btn {
   height: 1.15rem;
 }
 
+.form-switch .form-check-input:focus:active:not(:checked),
+.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");
+}
+
 .spinner [data-icon] {
   width: 1rem;
   height: 1rem;
@@ -14130,7 +14212,7 @@ label.btn {
 }
 
 .accordion-button:disabled {
-  color: var(--moo-muted-foreground);
+  color: var(--moo-disabled-foreground);
   opacity: var(--moo-disabled-control-opacity);
   pointer-events: none;
 }
@@ -14185,7 +14267,7 @@ label.btn {
 
 .tabs-list .nav-link:disabled,
 .tabs-list .nav-link.disabled {
-  color: var(--moo-muted-foreground);
+  color: var(--moo-disabled-foreground);
   opacity: var(--moo-disabled-control-opacity);
   pointer-events: none;
 }
@@ -14702,6 +14784,994 @@ label.btn {
   text-align: center;
 }
 
+.context-menu {
+  position: relative;
+}
+
+.context-menu-trigger:not([data-context-menu-fallback]) {
+  cursor: default;
+}
+
+.context-menu-trigger[data-context-menu-fallback] {
+  position: absolute;
+  inset-block-start: 0.5rem;
+  inset-inline-end: 0.5rem;
+}
+
+ul.context-menu-menu:focus-visible {
+  outline: 0;
+}
+
+.datatable {
+  --moo-datatable-min-width: 48rem;
+  --moo-datatable-card-label-width: 7rem;
+  --moo-datatable-frame-header-min-height: 2.78125rem;
+  --moo-datatable-select-cell-inset: 0.89062rem;
+  --moo-datatable-table-select-all-offset-y: 0.04688rem;
+  --moo-datatable-toolbar-control-height: calc(2rem + var(--bs-border-width) * 2);
+  --moo-datatable-search-filter-menu-width: 12.5rem;
+  --moo-datatable-search-filter-options-menu-width: 17rem;
+  --moo-datatable-scrollbar-size: 0.375rem;
+}
+
+.datatable-table {
+  table-layout: fixed;
+}
+
+.datatable--responsive-scroll .datatable-table,
+.datatable--responsive-toggle .datatable-table {
+  min-width: var(--moo-datatable-min-width);
+}
+
+.datatable--responsive-toggle[data-datatable-view="table"] .datatable-card-frame {
+  display: none;
+}
+
+.datatable--responsive-toggle[data-datatable-view="cards"] .datatable-frame {
+  display: none;
+}
+
+.datatable-frame {
+  border: var(--bs-border-width) solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius);
+  overflow: hidden;
+}
+
+.datatable-card-frame {
+  border: var(--bs-border-width) solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius);
+  overflow: hidden;
+}
+
+.datatable-frame:has(.table-row-actions .dropdown-menu.show),
+.datatable-frame .table-responsive:has(.table-row-actions .dropdown-menu.show) {
+  overflow: visible;
+}
+
+.datatable-frame-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.625rem;
+  min-block-size: var(--moo-datatable-frame-header-min-height);
+  padding-block: 0.375rem;
+  padding-inline-start: var(--moo-datatable-select-cell-inset);
+  padding-inline-end: 0.5rem;
+  border-bottom: var(--bs-border-width) solid var(--bs-border-color);
+  background-color: var(--bs-body-bg);
+}
+
+.datatable-frame .table-responsive {
+  position: relative;
+  margin-bottom: 0;
+}
+
+.datatable-frame .datatable-table {
+  margin-bottom: 0;
+}
+
+.datatable-table > :not(caption) > * > * {
+  vertical-align: middle;
+}
+
+.datatable-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.datatable-toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-inline-start: auto;
+}
+
+.datatable-toolbar-query {
+  display: flex;
+  flex: 0 1 22rem;
+  gap: 0.5rem;
+  align-items: center;
+  min-width: 20rem;
+  max-width: 100%;
+}
+
+.datatable-search-filter {
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.datatable-searchbar {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: nowrap;
+  align-items: center;
+  min-block-size: var(--moo-datatable-toolbar-control-height);
+  width: 100%;
+}
+
+.datatable-searchbar .datatable-search {
+  flex: 1 1 auto;
+  max-width: none;
+  min-width: 0;
+  width: 1%;
+  padding-inline-start: 2rem;
+}
+
+.datatable-search-icon {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 0.625rem;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--bs-secondary-color);
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.datatable-search-icon > [data-icon] {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.datatable-filter-picker-trigger {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2rem;
+  block-size: 2rem;
+  padding: 0;
+  margin-inline-end: 0;
+  border-radius: var(--bs-border-radius-sm);
+  gap: 0;
+}
+
+.btn.datatable-filter-picker-trigger:focus:not(:focus-visible) {
+  outline: 0;
+  box-shadow: none;
+}
+
+.btn.datatable-filter-picker-trigger:focus-visible {
+  z-index: 3;
+  outline: var(--bs-focus-ring-width) solid var(--moo-ring);
+  outline-offset: 0;
+  box-shadow: none;
+}
+
+.input-group > .btn-ghost.datatable-filter-picker-trigger:focus-visible::before {
+  opacity: 1;
+}
+
+.datatable-filter-picker-trigger > [data-icon] {
+  width: 0.875rem;
+  height: 0.875rem;
+  margin: 0;
+}
+
+.datatable-search-filter-menu {
+  --bs-dropdown-border-radius: var(--bs-border-radius);
+  width: var(--moo-datatable-search-filter-menu-width);
+  max-width: calc(100vw - 1.5rem);
+  max-height: calc(100vh - 8rem);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.datatable-search-filter-menu[data-datatable-filter-menu-panel="options"] {
+  width: var(--moo-datatable-search-filter-options-menu-width);
+}
+
+.datatable-facet-menu {
+  --bs-dropdown-border-radius: var(--bs-border-radius);
+  min-width: 12.5rem;
+}
+
+.datatable-filter-panel {
+  min-width: 0;
+}
+
+.datatable-facet-options,
+.datatable-filter-options {
+  max-height: 20rem;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  list-style: none;
+}
+
+.datatable-search-filter-menu .dropdown-header {
+  padding-block: 0.125rem 0.375rem;
+  padding-inline: 0.5rem;
+  color: var(--bs-secondary-color);
+  font-size: 0.76562rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+}
+
+.datatable-search-filter-menu .dropdown-item,
+.datatable-facet-menu .dropdown-item {
+  min-height: 2rem;
+  padding-block: 0.375rem;
+  padding-inline: 0.5rem;
+  border-radius: var(--bs-border-radius-sm);
+  gap: 0.5rem;
+  cursor: default;
+  line-height: 1.25rem;
+}
+
+.datatable-search-filter-menu .dropdown-item.active,
+.datatable-facet-menu .dropdown-item.active {
+  color: var(--bs-dropdown-link-color);
+  background-color: transparent;
+}
+
+.datatable-search-filter-menu .dropdown-item:hover,
+.datatable-search-filter-menu .dropdown-item:focus-visible,
+.datatable-facet-menu .dropdown-item:hover,
+.datatable-facet-menu .dropdown-item:focus-visible {
+  color: var(--bs-dropdown-link-hover-color);
+  background-color: var(--bs-dropdown-link-hover-bg);
+  outline: 0;
+  box-shadow: none;
+}
+
+.datatable-search-filter-menu .dropdown-item:focus:not(:focus-visible, :hover),
+.datatable-facet-menu .dropdown-item:focus:not(:focus-visible, :hover) {
+  color: var(--bs-dropdown-link-color);
+  background-color: transparent;
+  outline: 0;
+  box-shadow: none;
+}
+
+.datatable-filter-group,
+.datatable-filter-panel-back {
+  gap: 0.5rem;
+}
+
+.datatable-filter-group {
+  justify-content: flex-start;
+}
+
+.datatable-filter-group-summary {
+  color: var(--bs-secondary-color);
+  font-size: 0.76562rem;
+  font-weight: var(--bs-body-font-weight);
+  font-variant-numeric: tabular-nums;
+}
+
+.datatable-filter-group > [data-icon],
+.datatable-filter-panel-back > [data-icon] {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--bs-secondary-color);
+}
+
+.datatable-filter-panel-back {
+  color: var(--bs-secondary-color);
+  font-weight: var(--bs-body-font-weight);
+}
+
+.datatable-filter-panel-back span {
+  color: var(--bs-body-color);
+}
+
+.datatable-filter-picker-item .text-body-secondary,
+.datatable-facet-item .text-body-secondary {
+  flex: 0 0 auto;
+  font-variant-numeric: tabular-nums;
+}
+
+.datatable-filter-picker-item > [data-datatable-filter-option-label],
+.datatable-facet-item > [data-datatable-facet-option-label] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.datatable-filter-option-search-wrap,
+.datatable-facet-search-wrap {
+  position: relative;
+  display: flex;
+  min-height: 2.25rem;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 0.75rem;
+}
+
+.datatable-filter-option-search-wrap::after,
+.datatable-facet-search-wrap::after {
+  position: absolute;
+  inset-inline: calc(-1 * var(--bs-dropdown-padding-x, 0));
+  inset-block-end: 0;
+  border-bottom: var(--bs-border-width) solid var(--bs-border-color);
+  content: "";
+}
+
+.datatable-dropdown-search-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  color: var(--bs-secondary-color);
+}
+
+.datatable-dropdown-search-icon > [data-icon] {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.datatable-filter-option-search,
+.datatable-facet-search {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 2.25rem;
+  min-height: 2.25rem;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
+  color: var(--bs-body-color);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.datatable-filter-option-search::placeholder,
+.datatable-facet-search::placeholder {
+  color: var(--bs-secondary-color);
+}
+
+.datatable-filter-option-search:focus,
+.datatable-facet-search:focus {
+  border-color: transparent;
+  background-color: transparent;
+  box-shadow: none;
+  outline: 0;
+}
+
+.datatable-filter-option-search-hidden,
+.datatable-facet-search-hidden {
+  display: none;
+}
+
+.datatable-toolbar-filters {
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.datatable-layout-switch {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.datatable-view-option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  min-block-size: var(--moo-datatable-toolbar-control-height);
+  min-width: 2rem;
+  padding-inline: 0.5rem;
+}
+
+.datatable .datatable-layout-switch .btn-group-sm > .btn.datatable-view-option:has(> [data-icon="inline-start"]) {
+  padding-inline: 0.5rem;
+}
+
+.datatable-view-option > [data-icon] {
+  width: 1rem;
+  height: 1rem;
+}
+
+.datatable-view-toggle .btn-check:checked + .datatable-view-option {
+  border-color: var(--moo-border);
+  color: var(--bs-body-color);
+  background-color: var(--moo-muted-surface);
+}
+
+.datatable-view-trigger {
+  min-block-size: var(--moo-datatable-toolbar-control-height);
+}
+
+.datatable .datatable-toolbar-actions .btn.btn-sm.datatable-view-trigger:has(> [data-icon="inline-start"]), .datatable .datatable-toolbar-actions .btn-group-sm > .btn.datatable-view-trigger:has(> [data-icon="inline-start"]) {
+  padding-inline: 0.625rem;
+}
+
+.datatable-select-all {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  margin: 0;
+  padding-inline-start: 0;
+  color: var(--bs-secondary-color);
+  white-space: nowrap;
+}
+
+.datatable-select-all .form-check-input {
+  float: none;
+  margin: 0;
+}
+
+.datatable-select-all-table {
+  transform: translateY(var(--moo-datatable-table-select-all-offset-y));
+}
+
+.datatable-checkbox-target {
+  position: relative;
+  display: grid;
+  width: 1rem;
+  height: 1rem;
+  min-height: 1rem;
+  padding-inline-start: 0;
+  margin: 0;
+  place-items: center;
+  cursor: pointer;
+}
+
+.datatable-checkbox-target::before {
+  position: absolute;
+  inset: -0.5625rem;
+  border-radius: var(--bs-border-radius);
+  content: "";
+}
+
+.datatable-checkbox-target .form-check-input {
+  position: relative;
+  z-index: 1;
+  float: none;
+  margin: 0;
+}
+
+@media (pointer: coarse) {
+  .datatable-checkbox-target::before {
+    inset: -0.8125rem;
+  }
+}
+
+.datatable-table > :not(caption) > * > .datatable-col-select {
+  width: 2.75rem;
+  padding-inline-start: var(--moo-datatable-select-cell-inset);
+  padding-inline-end: 0.5rem;
+  white-space: nowrap;
+}
+
+.datatable-col-hidden {
+  display: none;
+}
+
+.datatable-item-cell {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.datatable-item-cell > .text-truncate {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.datatable-item-cell > .badge {
+  flex: 0 0 auto;
+}
+
+.datatable-icon-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.datatable-sort-trigger {
+  margin-inline-start: calc(-1 * var(--bs-btn-padding-x, 0.5rem));
+  gap: 0.5rem;
+}
+
+.datatable-sort-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.datatable-sort-icon-asc,
+.datatable-sort-icon-desc {
+  display: none;
+}
+
+.datatable-sort-icon > [data-icon],
+.datatable-icon-label > [data-icon] {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+  margin: 0;
+}
+
+[data-datatable-sort-direction="asc"] .datatable-sort-icon-none,
+[data-datatable-sort-direction="desc"] .datatable-sort-icon-none {
+  display: none;
+}
+
+[data-datatable-sort-direction="asc"] .datatable-sort-icon-asc {
+  display: inline-flex;
+}
+
+[data-datatable-sort-direction="desc"] .datatable-sort-icon-desc {
+  display: inline-flex;
+}
+
+.datatable-cards {
+  --moo-datatable-card-min-width: 20rem;
+  display: grid;
+  gap: 0.625rem;
+  grid-template-columns: repeat(auto-fill, minmax(var(--moo-datatable-card-min-width), 1fr));
+  padding: 0.625rem;
+}
+
+.datatable-card {
+  position: relative;
+  overflow: hidden;
+  border: var(--bs-border-width) solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius);
+  background-color: var(--bs-body-bg);
+}
+
+.datatable-card-frame:has(.datatable-card .dropdown-menu.show),
+.datatable-card:has(.dropdown-menu.show) {
+  overflow: visible;
+}
+
+.datatable-card:has(.dropdown-menu.show) {
+  z-index: 2;
+}
+
+.datatable-card-header {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 0.75rem;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  border-bottom: var(--bs-border-width) solid var(--bs-border-color);
+  background-color: var(--bs-tertiary-bg);
+}
+
+.datatable-card-select {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.datatable-card-select .form-check-input {
+  margin: 0;
+}
+
+.datatable-card-heading {
+  min-width: 0;
+}
+
+.datatable-card-title {
+  overflow: hidden;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.datatable-card-code {
+  overflow: hidden;
+  color: var(--bs-secondary-color);
+  font-family: var(--bs-font-monospace);
+  font-size: var(--bs-body-font-size);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.datatable-card-actions {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.datatable-card-actions .btn {
+  min-width: 2rem;
+  min-height: 2rem;
+  padding: 0.25rem;
+}
+
+.datatable-card-list {
+  margin: 0;
+}
+
+.datatable-card-row {
+  display: grid;
+  grid-template-columns: minmax(var(--moo-datatable-card-label-width), 30%) minmax(0, 1fr);
+  gap: 0.75rem;
+  align-items: center;
+  padding: 0.375rem 0.875rem;
+}
+
+.datatable-card-row.datatable-col-hidden {
+  display: none;
+}
+
+.datatable-card-row:first-child {
+  padding-top: 0.875rem;
+}
+
+.datatable-card-row:last-child {
+  padding-bottom: 0.875rem;
+}
+
+.datatable-card-row dt,
+.datatable-card-row dd {
+  min-width: 0;
+  margin: 0;
+}
+
+.datatable-card-row dt {
+  font-weight: var(--bs-body-font-weight);
+  color: var(--bs-secondary-color);
+}
+
+.datatable-card-value {
+  display: flex;
+  min-width: 0;
+  justify-content: flex-start;
+  text-align: start;
+}
+
+.datatable-card-value .datatable-item-cell {
+  justify-content: flex-start;
+}
+
+.datatable-card-value .datatable-item-cell > .text-truncate {
+  flex: 0 1 auto;
+}
+
+.datatable-row-selected > td {
+  background-color: var(--moo-muted-surface);
+}
+
+.datatable-card.datatable-row-selected {
+  border-color: var(--moo-border);
+  background-color: var(--moo-muted-surface);
+}
+
+.datatable-empty {
+  padding: 2rem 1rem;
+  border-width: var(--bs-border-width);
+  border-style: dashed;
+  border-color: var(--bs-border-color);
+  border-radius: var(--bs-border-radius);
+  text-align: center;
+}
+
+.datatable-empty-title {
+  font-weight: var(--bs-font-weight-semibold, 600);
+}
+
+.datatable-pagination {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  gap: 0.75rem 1rem;
+}
+
+.datatable-page-size {
+  justify-self: start;
+}
+
+.datatable-page-size-trigger {
+  min-width: 3.25rem;
+  justify-content: space-between;
+}
+
+.datatable-page-size-menu {
+  min-width: 4rem;
+}
+
+.datatable-results-summary {
+  justify-self: center;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.datatable-page-nav {
+  max-width: 100%;
+  justify-self: end;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.datatable-page-nav .pagination {
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  min-width: max-content;
+}
+
+.datatable-card-row--selection .form-check-input {
+  margin: 0;
+}
+
+.datatable-facet-item__indicator {
+  --moo-datatable-facet-item-border-radius: 0.25em;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  height: 1em;
+  border: var(--bs-border-width) solid var(--bs-border-color);
+  border-radius: var(--moo-datatable-facet-item-border-radius);
+  color: transparent;
+}
+
+.datatable-facet-item.active .datatable-facet-item__indicator {
+  background-color: var(--moo-foreground);
+  border-color: var(--moo-foreground);
+  color: var(--moo-surface);
+}
+
+.datatable-facet-item__indicator > [data-icon] {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.datatable-facet-trigger {
+  --bs-btn-active-bg: var(--bs-body-bg);
+  --bs-btn-active-border-color: var(--bs-border-color);
+  --bs-btn-active-color: var(--bs-body-color);
+  --bs-btn-border-color: var(--bs-border-color);
+  --bs-btn-border-radius: var(--bs-border-radius);
+  --bs-btn-border-width: var(--bs-border-width);
+  --bs-btn-font-size: 0.8rem;
+  --bs-btn-hover-bg: var(--moo-muted-surface);
+  --bs-btn-hover-border-color: var(--bs-border-color);
+  --bs-btn-hover-color: var(--bs-body-color);
+  --bs-btn-line-height: 1.25rem;
+  --bs-btn-padding-x: 0.625rem;
+  --bs-btn-padding-y: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-height: 2rem;
+  border-style: dashed;
+  color: var(--bs-secondary-color);
+}
+
+.datatable-facet-trigger:hover,
+.datatable-facet-trigger:focus,
+.datatable-facet-trigger:focus-visible,
+.datatable-facet-trigger:active,
+.datatable-facet-trigger.show {
+  border-color: var(--bs-border-color);
+  color: var(--bs-body-color);
+}
+
+.btn.datatable-facet-trigger:focus:not(:focus-visible) {
+  outline: 0;
+  box-shadow: none;
+}
+
+.btn.datatable-facet-trigger:focus-visible,
+.btn.datatable-facet-trigger.show:focus-visible,
+.btn.datatable-facet-trigger-active:focus-visible {
+  box-shadow: none;
+}
+
+.datatable-facet-trigger-active {
+  border-style: dashed;
+  border-color: var(--bs-border-color);
+  color: var(--bs-body-color);
+}
+
+.datatable-facet-summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding-inline-start: 0.5rem;
+  margin-inline-start: 0.5rem;
+  border-inline-start: var(--bs-border-width) solid var(--bs-border-color);
+}
+
+.datatable-facet-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 1.5rem;
+  padding-block: 0;
+  padding-inline: 0.5rem;
+  border: 0;
+  border-radius: var(--bs-border-radius-sm);
+  background-color: var(--moo-muted-surface);
+  color: var(--bs-body-color);
+  font-size: 0.74987rem;
+  font-weight: var(--bs-body-font-weight);
+  line-height: 1rem;
+  white-space: nowrap;
+}
+
+.datatable-bulk-actions {
+  --moo-datatable-bulk-actions-hover-scale: 1.02;
+  --moo-datatable-bulk-actions-backdrop-blur: 8px;
+  position: fixed;
+  inset-inline-start: 50%;
+  inset-block-end: 1rem;
+  transform: translateX(-50%) scale(1);
+  transition: transform 0.15s ease-out;
+  z-index: var(--bs-zindex-fixed, 1030);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border: var(--bs-border-width) solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius-xl);
+  background-color: var(--bs-body-bg);
+  background-color: color-mix(in srgb, var(--bs-body-bg) 95%, transparent);
+  backdrop-filter: blur(var(--moo-datatable-bulk-actions-backdrop-blur));
+  box-shadow: var(--bs-box-shadow-lg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .datatable-bulk-actions {
+    transition: none;
+  }
+}
+
+.datatable-bulk-actions:hover,
+.datatable-bulk-actions:focus-within {
+  transform: translateX(-50%) scale(var(--moo-datatable-bulk-actions-hover-scale));
+}
+
+.datatable-bulk-summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  white-space: nowrap;
+}
+
+.datatable-preview-shell {
+  max-width: 82rem;
+}
+
+@media (max-width: 991.98px) {
+  .datatable-pagination {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+  .datatable-results-summary {
+    justify-self: end;
+    text-align: end;
+  }
+  .datatable-page-nav {
+    grid-column: 1 / -1;
+    justify-self: start;
+    margin-block-start: 0.25rem;
+  }
+  .datatable-page-nav .pagination {
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .datatable-toolbar {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: start;
+  }
+  .datatable-search-filter {
+    grid-column: 1 / -1;
+    min-width: 0;
+  }
+  .datatable-toolbar-query {
+    grid-column: 1 / -1;
+    min-width: 0;
+  }
+  .datatable-toolbar-query .datatable-search-filter {
+    flex: 1 1 auto;
+  }
+  .datatable-searchbar .datatable-search {
+    max-width: none;
+  }
+  .datatable-search-filter-menu {
+    max-width: calc(100vw - 2rem);
+  }
+  .datatable-search-filter-menu .dropdown-header {
+    padding-block-end: 0.25rem;
+    font-size: 0.76562rem;
+  }
+  .datatable-search-filter-menu .dropdown-item {
+    min-height: 1.875rem;
+    padding-block: 0.3125rem;
+    font-size: 0.76562rem;
+  }
+  .datatable-toolbar-filters {
+    display: flex;
+    grid-column: 1 / -1;
+    flex-direction: column;
+    align-items: flex-start;
+    min-width: 0;
+  }
+  .datatable-layout-switch {
+    grid-column: 2;
+    justify-self: end;
+  }
+  .datatable-select-all {
+    grid-column: 1;
+  }
+  .datatable-toolbar-actions {
+    grid-column: 1 / -1;
+    margin-inline-start: 0;
+    justify-self: end;
+  }
+  .datatable-toolbar-actions .datatable-view-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    flex: 0 0 auto;
+    min-width: 0;
+    min-height: var(--moo-datatable-toolbar-control-height);
+    inline-size: auto;
+    block-size: var(--moo-datatable-toolbar-control-height);
+    padding-inline: 0.625rem;
+  }
+  .datatable-toolbar-actions .btn.btn-sm.datatable-view-trigger:has(> [data-icon="inline-start"]), .datatable-toolbar-actions .btn-group-sm > .btn.datatable-view-trigger:has(> [data-icon="inline-start"]) {
+    padding-inline: 0.625rem;
+  }
+  .datatable-toolbar-actions .datatable-view-trigger > [data-icon] {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .datatable-view-trigger-label {
+    display: inline;
+  }
+  .datatable-pagination {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+  .datatable-page-nav {
+    grid-column: 1 / -1;
+    justify-self: start;
+  }
+  .datatable-page-nav .pagination {
+    justify-content: flex-start;
+  }
+}
+
+.datatable--release-review {
+  --moo-datatable-min-width: 64rem;
+}
+
 .form-label,
 .form-check-label {
   user-select: none;