@wpmoo/ui 0.7.1 → 0.8.1

package/dist/assets/css/moo.css

@@ -152,6 +152,7 @@
   --moo-border: #e4e4e7;
   --moo-foreground: #18181b;
   --moo-muted-foreground: #71717a;
+  --moo-disabled-foreground: #a1a1aa;
   --moo-ring: #18181b;
   --moo-destructive: #dc2626;
   --moo-destructive-foreground: #fff;
@@ -219,6 +220,7 @@
   --moo-border: #3f3f46;
   --moo-foreground: #fafafa;
   --moo-muted-foreground: #a1a1aa;
+  --moo-disabled-foreground: #71717a;
   --moo-ring: #fafafa;
   --moo-destructive: #f87171;
   --moo-destructive-foreground: #18181b;
@@ -286,6 +288,7 @@
   --moo-border: #e4e4e7;
   --moo-foreground: #18181b;
   --moo-muted-foreground: #71717a;
+  --moo-disabled-foreground: #a1a1aa;
   --moo-ring: #18181b;
   --moo-destructive: #dc2626;
   --moo-destructive-foreground: #fff;
@@ -353,6 +356,7 @@
   --moo-border: #3f3f46;
   --moo-foreground: #fafafa;
   --moo-muted-foreground: #a1a1aa;
+  --moo-disabled-foreground: #71717a;
   --moo-ring: #fafafa;
   --moo-destructive: #f87171;
   --moo-destructive-foreground: #18181b;
@@ -701,7 +705,7 @@
     opacity: 1;
   }
   .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;
   }
@@ -837,7 +841,7 @@
     background-image: none;
   }
   .form-select:disabled {
-    color: var(--bs-tertiary-color);
+    color: var(--moo-disabled-foreground);
     background-color: color-mix(in srgb, var(--moo-border) 40%, transparent);
   }
   .form-select:-moz-focusring {
@@ -909,9 +913,9 @@
     filter: brightness(90%);
   }
   .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 {
     background-color: #171717;
@@ -2483,7 +2487,7 @@
     --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;
@@ -3958,6 +3962,27 @@
   .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 {
@@ -3987,6 +4012,7 @@
     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 {
     min-height: 2rem;
@@ -4118,7 +4144,7 @@
     border-color: #8b8b8b;
     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;
   }
@@ -4270,7 +4296,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 {
     --bs-btn-color: var(--moo-destructive-foreground);
@@ -4344,7 +4370,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);
   }
@@ -4354,11 +4380,19 @@ label.btn {
     align-items: center;
     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;
@@ -4369,20 +4403,34 @@ label.btn {
     background-color: var(--bs-dropdown-link-hover-bg);
   }
   .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-check--radio .dropdown-item-check__indicator {
+    border-color: transparent;
+    background-color: transparent;
+  }
+  .dropdown-item-check--radio.active .dropdown-item-check__indicator {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--bs-dropdown-link-color);
   }
   .dropdown-item__icon-box {
     --moo-dropdown-item-icon-size: 1.5rem;
@@ -4552,7 +4600,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 {
     --bs-nav-pills-border-radius: var(--bs-border-radius);
@@ -4570,6 +4618,9 @@ label.btn {
   .nav-pills .nav-link:not(.active, .disabled):hover {
     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;
@@ -5239,7 +5290,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] {
     width: 1rem;
@@ -5251,15 +5305,40 @@ label.btn {
   .progress {
     --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;
   }
   .form-switch .form-check-input {
     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;
@@ -5294,7 +5373,7 @@ label.btn {
     text-decoration: underline;
   }
   .accordion-button:disabled {
-    color: var(--moo-muted-foreground);
+    color: var(--moo-disabled-foreground);
     opacity: var(--moo-disabled-control-opacity);
     pointer-events: none;
   }
@@ -5340,7 +5419,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;
   }
@@ -5776,6 +5855,859 @@ label.btn {
     color: var(--bs-secondary-color);
     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;