@wpmoo/ui 0.9.0 → 1.0.0-rc.10

package/scss/components/_datatable.scss

@@ -0,0 +1,1067 @@
+/* Data Table */
+
+.datatable {
+  --moo-datatable-min-width: #{$moo-datatable-min-width};
+  --moo-datatable-actions-cell-bg: #{$moo-datatable-actions-cell-bg};
+  --moo-datatable-actions-cell-fade-width: #{$moo-datatable-actions-cell-fade-width};
+  --moo-datatable-card-label-width: #{$moo-datatable-card-label-width};
+  --moo-datatable-frame-header-min-height: #{$moo-datatable-frame-header-min-height};
+  --moo-datatable-select-cell-inset: #{$moo-datatable-select-cell-inset};
+  --moo-datatable-table-select-all-offset-y: #{$moo-datatable-table-select-all-offset-y};
+  --moo-datatable-toolbar-control-height: #{$moo-datatable-toolbar-control-height};
+  --moo-datatable-search-filter-menu-width: #{$moo-datatable-search-filter-menu-width};
+  --moo-datatable-search-filter-options-menu-width: #{$moo-datatable-search-filter-options-menu-width};
+  --moo-datatable-scrollbar-size: #{$moo-datatable-scrollbar-size};
+  --moo-datatable-bulk-actions-bottom: #{$moo-datatable-bulk-actions-bottom};
+}
+
+.card .datatable {
+  --moo-datatable-actions-cell-bg: var(--bs-card-bg);
+}
+
+.datatable-table {
+  table-layout: fixed;
+}
+
+.datatable--responsive-scroll .datatable-table,
+.datatable--responsive-toggle .datatable-table,
+.datatable--responsive-auto .datatable-table {
+  min-width: var(--moo-datatable-min-width);
+}
+
+.datatable--responsive-toggle[data-datatable-view="table"] .datatable-card-frame,
+.datatable--responsive-auto[data-datatable-view="table"] .datatable-card-frame {
+  display: none;
+}
+
+.datatable--responsive-toggle[data-datatable-view="cards"] .datatable-frame,
+.datatable--responsive-auto[data-datatable-view="cards"] .datatable-frame {
+  display: none;
+}
+
+@each $name, $value in map-merge($grid-breakpoints, $moo-datatable-responsive-breakpoint) {
+  @if $value != 0 {
+    .datatable--responsive-auto[data-datatable-responsive-breakpoint="#{$name}"] {
+      --moo-datatable-responsive-breakpoint: #{$value};
+
+      &[data-datatable-view="auto"] .datatable-card-frame {
+        display: none;
+      }
+
+      @include media-breakpoint-down($name, map-merge($grid-breakpoints, $moo-datatable-responsive-breakpoint)) {
+        &[data-datatable-view="auto"] .datatable-frame {
+          display: none;
+        }
+        &[data-datatable-view="auto"] .datatable-card-frame {
+          display: block;
+        }
+      }
+    }
+  }
+}
+
+.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 [data-datatable-column="actions"] {
+  position: sticky;
+  inset-inline-end: 0;
+  z-index: 2;
+  background: linear-gradient(
+    90deg,
+    transparent 0,
+    var(--moo-datatable-actions-cell-bg) var(--moo-datatable-actions-cell-fade-width)
+  );
+}
+
+[dir="rtl"] .datatable-frame [data-datatable-column="actions"],
+.datatable-frame [dir="rtl"] [data-datatable-column="actions"] {
+  background: linear-gradient(
+    270deg,
+    transparent 0,
+    var(--moo-datatable-actions-cell-bg) var(--moo-datatable-actions-cell-fade-width)
+  );
+}
+
+.datatable-card-frame:has(.datatable-card .dropdown-menu.show) {
+  position: relative;
+  z-index: $zindex-dropdown;
+  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-col > .btn-link,
+.datatable-card-title > .btn-link {
+  max-inline-size: 100%;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  text-align: inherit;
+}
+
+.datatable-table > :not(caption) > * > .datatable-col:nth-child(1 of :not(.datatable-col-hidden)) {
+  padding-inline-start: $spacer;
+}
+
+.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:not(:has(> .dropdown-menu.show)) {
+  overflow: hidden;
+}
+
+.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: 6;
+  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: $moo-datatable-facet-menu-min-width;
+}
+
+.datatable-filter-panel {
+  min-width: 0;
+}
+
+.datatable-facet-options,
+.datatable-filter-options {
+  max-height: $moo-datatable-facet-options-max-height;
+  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: $font-size-sm;
+  font-weight: 600;
+  line-height: 1.25rem;
+}
+
+.datatable-search-filter-menu .dropdown-item,
+.datatable-facet-menu .dropdown-item {
+  min-height: $moo-datatable-facet-item-height;
+  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: $font-size-sm;
+  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-toggle .btn-check:focus-visible + .datatable-view-option {
+  z-index: 3;
+  border-color: var(--moo-ring);
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
+}
+
+.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"]) {
+  padding-inline: $btn-padding-x-sm;
+}
+
+.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: $table-cell-padding-x;
+  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: $moo-datatable-icon-label-gap;
+}
+
+.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: #{$moo-datatable-card-min-width};
+
+  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-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: color-mix(in srgb, var(--moo-surface) 50%, var(--moo-muted-surface));
+}
+
+.datatable-card-header:not(:has(> .datatable-card-select)) {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.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-row-selected > [data-datatable-column="actions"] {
+  --moo-datatable-actions-cell-bg: var(--moo-muted-surface);
+  background: 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: $moo-datatable-page-size-trigger-min-width;
+  justify-content: space-between;
+}
+
+.datatable-page-size-menu {
+  min-width: $moo-datatable-page-size-menu-min-width;
+}
+
+.datatable-results-summary {
+  justify-self: center;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.datatable-page-nav {
+  max-width: 100%;
+  justify-self: end;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -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: #{$moo-datatable-facet-item-border-radius};
+
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: $form-check-input-width;
+  height: $form-check-input-width;
+  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: #{$moo-datatable-facet-trigger-font-size};
+  --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: #{$spacer * 0.625};
+  --bs-btn-padding-y: 0;
+
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-height: $moo-datatable-facet-trigger-min-height;
+  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: $spacer * 1.5;
+  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: $font-size-base * 0.857;
+  font-weight: var(--bs-body-font-weight);
+  line-height: $spacer;
+  white-space: nowrap;
+}
+
+.datatable-bulk-actions {
+  --moo-datatable-bulk-actions-hover-scale: #{$moo-datatable-bulk-actions-hover-scale};
+  --moo-datatable-bulk-actions-backdrop-blur: #{$moo-datatable-bulk-actions-backdrop-blur};
+
+  position: fixed;
+  inset-inline-start: 50%;
+  inset-block-end: var(--moo-datatable-bulk-actions-bottom);
+  transform: translateX(-50%) scale(1);
+  @include 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);
+}
+
+.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: $moo-datatable-preview-shell-max-width;
+}
+
+@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: $font-size-sm;
+  }
+
+  .datatable-search-filter-menu .dropdown-item {
+    min-height: 1.875rem;
+    padding-block: 0.3125rem;
+    font-size: $font-size-sm;
+  }
+
+  .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: $btn-padding-x-sm;
+  }
+
+  .datatable-toolbar-actions .btn.btn-sm.datatable-view-trigger:has(> [data-icon="inline-start"]) {
+    padding-inline: $btn-padding-x-sm;
+  }
+
+  .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: #{$moo-datatable-release-review-min-width};
+}