@wpmoo/ui 1.0.0-rc.9 → 1.1.0-dev.1

package/dist/assets/css/moo.css

@@ -1,9 +1,14 @@
 /*!
- * Moo UI core
- * Copyright (c) 2026 WPMoo (wpmoo.org)
- * Includes Bootstrap 5.3.3 component output
- * SPDX-License-Identifier: MIT
+ * Moo UI v1.1.0-dev.1 (https://wpmoo.org/)
+ * Copyright 2026 WPMoo Authors
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
+ *
+ * Bootstrap v5.3.3 (https://getbootstrap.com/)
+ * Copyright 2011-2024 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
+
+/* Global styles */
 @property --moo-scroll-fade-t {
   syntax: "<length-percentage>";
   inherits: false;
@@ -149,6 +154,7 @@
   }
 }
 
+/* Theme tokens */
 .moo-ui[data-bs-theme] {
   --bs-blue: #0d6efd;
   --bs-indigo: #6610f2;
@@ -230,7 +236,13 @@
   --moo-chart-4: #3f3f46;
   --moo-chart-5: #27272a;
   --moo-heading-font-family: var(--bs-body-font-family);
+  --moo-small-font-size: 0.75rem;
+  --moo-paragraph-margin-top: 0;
+  --moo-paragraph-margin-bottom: 1rem;
   font-family: var(--bs-body-font-family);
+  font-size: var(--bs-body-font-size);
+  font-weight: var(--bs-body-font-weight);
+  line-height: var(--bs-body-line-height);
 }
 
 .moo-ui[data-bs-theme="light"] {
@@ -408,6 +420,8 @@
 }
 
 @scope (.moo-ui) to (:where(.moo-ui[data-bs-theme="light"], .moo-ui[data-bs-theme="dark"])) {
+
+  /* Bootstrap Components */
   .table {
     --bs-table-color-type: initial;
     --bs-table-bg-type: initial;
@@ -3059,6 +3073,7 @@
     border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;
     border-top-color: var(--bs-tooltip-bg);
   }
+
   /* rtl:begin:ignore */
   .bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow {
     left: calc(-1 * var(--bs-tooltip-arrow-height));
@@ -3070,6 +3085,7 @@
     border-width: calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;
     border-right-color: var(--bs-tooltip-bg);
   }
+
   /* rtl:end:ignore */
   .bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow {
     top: calc(-1 * var(--bs-tooltip-arrow-height));
@@ -3079,6 +3095,7 @@
     border-width: 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);
     border-bottom-color: var(--bs-tooltip-bg);
   }
+
   /* rtl:begin:ignore */
   .bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow {
     right: calc(-1 * var(--bs-tooltip-arrow-height));
@@ -3090,6 +3107,7 @@
     border-width: calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);
     border-left-color: var(--bs-tooltip-bg);
   }
+
   /* rtl:end:ignore */
   .tooltip-inner {
     max-width: var(--bs-tooltip-max-width);
@@ -3176,6 +3194,7 @@
     bottom: var(--bs-popover-border-width);
     border-top-color: var(--bs-popover-bg);
   }
+
   /* rtl:begin:ignore */
   .bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow {
     left: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
@@ -3193,6 +3212,7 @@
     left: var(--bs-popover-border-width);
     border-right-color: var(--bs-popover-bg);
   }
+
   /* rtl:end:ignore */
   .bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow {
     top: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
@@ -3218,6 +3238,7 @@
     content: "";
     border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-header-bg);
   }
+
   /* rtl:begin:ignore */
   .bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow {
     right: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
@@ -3235,6 +3256,7 @@
     right: var(--bs-popover-border-width);
     border-left-color: var(--bs-popover-bg);
   }
+
   /* rtl:end:ignore */
   .popover-header {
     padding: var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);
@@ -3773,6 +3795,10 @@
     color: #fff !important;
     background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important;
   }
+
+  /* Moo Components */
+
+  /* Keyboard keys */
   kbd {
     display: inline-flex;
     height: 1.25rem;
@@ -3783,6 +3809,8 @@
     line-height: 1rem;
     font-weight: 500;
   }
+
+  /* Input */
   .form-control {
     min-height: 2rem;
   }
@@ -3808,17 +3836,23 @@
 .form-select:disabled {
     opacity: var(--moo-disabled-control-opacity);
   }
+
+  /* Textarea */
   textarea.form-control:not(.form-control-sm, .form-control-lg) {
     padding: 0.5rem 0.75rem;
   }
   textarea.form-control:disabled {
     resize: none;
   }
+
+  /* Select */
   .form-select option,
 .form-select optgroup {
     color: var(--bs-body-color);
     background-color: var(--bs-body-bg);
   }
+
+  /* Input Group */
   .input-group:not(:has(> .form-control[type="file"])) {
     border: var(--bs-border-width) solid var(--moo-border);
     border-radius: var(--moo-input-group-border-radius);
@@ -3939,6 +3973,8 @@
     outline: 0;
     box-shadow: none;
   }
+
+  /* Buttons */
   .btn {
     display: inline-flex;
     align-items: center;
@@ -4113,6 +4149,8 @@ label.btn {
     --bs-btn-hover-color: var(--moo-muted-foreground);
     text-underline-offset: 0.25rem;
   }
+
+  /* Search Trigger */
   .search-trigger {
     width: 10rem;
     max-width: 100%;
@@ -4167,6 +4205,8 @@ label.btn {
       flex-basis: 16rem;
     }
   }
+
+  /* Close Button */
   .btn-close {
     --bs-btn-close-color: var(--moo-foreground);
     --bs-btn-hover-color: var(--bs-btn-close-color);
@@ -4215,6 +4255,8 @@ label.btn {
     pointer-events: none;
     opacity: var(--moo-disabled-control-opacity);
   }
+
+  /* Button Group */
   [dir="rtl"] .btn-group,
 [dir="rtl"] .btn-toolbar {
     direction: ltr;
@@ -4264,6 +4306,8 @@ label.btn {
     min-width: calc(1.875rem + 1rem);
     padding-inline-end: 1.875rem;
   }
+
+  /* Toggle Group */
   .toggle-group > .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
     transform: none;
   }
@@ -4278,6 +4322,8 @@ label.btn {
     outline: 0;
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
   }
+
+  /* Card */
   .card {
     --bs-card-bg: color-mix(in srgb, var(--bs-secondary-bg) 5%, var(--bs-body-bg));
     --bs-card-color: var(--moo-foreground);
@@ -4373,6 +4419,8 @@ label.btn {
     font-size: 0.875rem;
     color: var(--moo-muted-foreground);
   }
+
+  /* Table */
   .card .table {
     --bs-table-bg: transparent;
   }
@@ -4382,6 +4430,8 @@ label.btn {
   .table-row-actions:has(> [aria-expanded="true"]) {
     z-index: 1000;
   }
+
+  /* Dropdown */
   .dropdown-menu {
     --bs-dropdown-bg: var(--moo-surface);
     --bs-dropdown-border-color: var(--moo-border);
@@ -4406,6 +4456,9 @@ label.btn {
     color: var(--bs-dropdown-link-color);
     background-color: transparent;
   }
+  .dropdown-menu:has(.dropdown-item:hover) .dropdown-item.active:not(:hover) {
+    background-color: transparent;
+  }
   .dropdown-item > [data-icon] {
     width: 1rem;
     height: 1rem;
@@ -4545,6 +4598,8 @@ label.btn {
       inset-block-end: var(--moo-sidebar-dropdown-block-end) !important;
     }
   }
+
+  /* Menubar */
   .menubar {
     gap: 0.125rem;
     padding: 0.1875rem;
@@ -4558,6 +4613,8 @@ label.btn {
     color: var(--bs-btn-color);
     font-weight: 500;
   }
+
+  /* Avatar */
   .avatar {
     position: relative;
     display: inline-flex;
@@ -4680,10 +4737,19 @@ label.btn {
     content: "+";
     margin-inline-end: -0.1rem;
   }
+
+  /* Navigation */
   .nav {
     --bs-nav-link-color: var(--moo-foreground);
     --bs-nav-link-hover-color: var(--moo-foreground);
     --bs-nav-link-disabled-color: var(--moo-disabled-foreground);
+    --bs-nav-link-description-color: color-mix(in srgb, var(--moo-muted-foreground) 95%, var(--moo-foreground));
+  }
+  .nav-link-description {
+    color: var(--bs-nav-link-description-color);
+  }
+  .nav-link.disabled .nav-link-description {
+    color: var(--bs-nav-link-disabled-color);
   }
   .nav-pills {
     --bs-nav-pills-border-radius: var(--bs-border-radius);
@@ -4709,6 +4775,105 @@ label.btn {
     height: 1rem;
     flex: 0 0 auto;
   }
+  .nav-link-icon {
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .nav-steps {
+    --bs-nav-step-icon-size: 2rem;
+    --bs-nav-step-gap: 0.25rem;
+    gap: var(--bs-nav-step-gap);
+  }
+  .nav-steps .nav-item {
+    position: relative;
+  }
+  .nav-steps .nav-item:not(:only-child)::before {
+    position: absolute;
+    z-index: 1;
+    inset-inline-start: calc(var(--bs-nav-link-padding-x) + var(--bs-nav-step-icon-size) / 2);
+    inset-block: calc(var(--bs-nav-step-gap) / -2);
+    border-inline-start: var(--bs-border-width) solid var(--bs-border-color);
+    content: "";
+    pointer-events: none;
+  }
+  .nav-steps .nav-item:first-child::before {
+    inset-block-start: 50%;
+  }
+  .nav-steps .nav-item:last-child::before {
+    inset-block-end: 50%;
+  }
+  .nav-steps .nav-link-icon {
+    position: relative;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 var(--bs-nav-step-icon-size);
+    inline-size: var(--bs-nav-step-icon-size);
+    block-size: var(--bs-nav-step-icon-size);
+    color: var(--moo-foreground);
+    background-color: var(--moo-muted-surface);
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius);
+  }
+  .nav-steps .nav-link.disabled .nav-link-icon {
+    color: var(--moo-disabled-foreground);
+  }
+  .nav-steps .nav-item[data-nav-completed="true"] .nav-link-icon {
+    color: var(--moo-primary-foreground);
+    background-color: var(--moo-primary);
+    border-color: var(--moo-primary);
+  }
+
+  /* Table of contents */
+  [data-toc] > .fw-semibold {
+    padding-inline-start: calc(0.75rem - var(--bs-border-width));
+  }
+  [data-toc]:has(> .nav) {
+    position: relative;
+    border-inline-start: calc(var(--bs-border-width) * 0.5) solid var(--bs-border-color);
+  }
+  [data-toc][data-toc-marker]::after {
+    content: "";
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(var(--bs-border-width) * -1);
+    block-size: var(--moo-toc-marker-height);
+    border-inline-start: calc(var(--bs-border-width) * 3) solid var(--moo-primary);
+    transform: translateY(var(--moo-toc-marker-offset));
+    pointer-events: none;
+    transition: all 0.2s ease-in-out;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [data-toc][data-toc-marker]::after {
+      transition: none;
+    }
+  }
+  [data-toc] > .nav .nav-link {
+    display: flex;
+    position: relative;
+    margin-inline-start: calc(var(--bs-border-width) * -1);
+    color: var(--moo-muted-foreground);
+  }
+  [data-toc] > .nav .nav-link::before {
+    content: "";
+    position: absolute;
+    inset-block: var(--bs-nav-link-padding-y);
+    inset-inline-start: 0;
+    border-inline-start: calc(var(--bs-border-width) * 3) solid transparent;
+  }
+  [data-toc] > .nav .nav-link.active {
+    color: var(--moo-foreground);
+  }
+  [data-toc] > .nav .nav-link.active::before {
+    border-inline-start-color: var(--moo-primary);
+  }
+  [data-toc][data-toc-marker] > .nav .nav-link.active::before {
+    border-inline-start-color: transparent;
+  }
+
+  /* Skeleton */
   .skeleton {
     color: var(--moo-border);
     border-radius: var(--bs-border-radius);
@@ -4717,6 +4882,8 @@ label.btn {
   .skeleton > .placeholder {
     display: block;
   }
+
+  /* Sidebar */
   .sidebar-inner {
     position: sticky;
     top: 0;
@@ -5126,6 +5293,8 @@ label.btn {
       display: none;
     }
   }
+
+  /* Alert */
   .alert {
     --bs-alert-border-color: var(--moo-border);
     --bs-alert-color: var(--moo-foreground);
@@ -5192,6 +5361,8 @@ label.btn {
   .alert-action {
     flex: 0 0 auto;
   }
+
+  /* Breadcrumb */
   .breadcrumb {
     --bs-breadcrumb-item-active-color: var(--moo-foreground);
     --bs-breadcrumb-item-padding-x: 0.375rem;
@@ -5291,6 +5462,8 @@ label.btn {
     width: 0.875rem;
     height: 0.875rem;
   }
+
+  /* Pagination */
   .page-link {
     display: inline-flex;
     align-items: center;
@@ -5336,6 +5509,8 @@ label.btn {
   .page-item.disabled {
     opacity: var(--moo-disabled-control-opacity);
   }
+
+  /* Badge */
   .badge {
     display: inline-flex;
     height: 1.25rem;
@@ -5364,10 +5539,14 @@ label.btn {
   .badge[class~="text-body-secondary"] {
     color: var(--moo-foreground) !important;
   }
+
+  /* Progress */
   .progress {
     --bs-progress-bar-color: var(--moo-primary-foreground);
     --bs-progress-bar-bg: var(--moo-primary);
   }
+
+  /* Slider */
   .slider {
     display: grid;
     gap: 0.5rem;
@@ -5546,6 +5725,8 @@ label.btn {
     writing-mode: vertical-lr;
     direction: rtl;
   }
+
+  /* Separator */
   hr {
     opacity: 1;
     border-top: var(--bs-border-width) solid var(--moo-border);
@@ -5554,6 +5735,8 @@ label.btn {
     opacity: 1;
     background-color: var(--moo-border);
   }
+
+  /* Checkbox */
   .form-check-input {
     margin-top: 0.125rem;
   }
@@ -5617,9 +5800,100 @@ label.btn {
     border-color: var(--moo-primary);
     background-color: var(--moo-primary);
   }
+
+  /* Radio Group */
   .radio-group legend.form-label {
     font-size: inherit;
   }
+  .form-check-card {
+    position: relative;
+    padding: 0;
+    margin-bottom: 0;
+  }
+  .form-check-card + .form-check-card {
+    margin-block-start: 0.5rem;
+  }
+  .form-check-card > .form-check-input:not(.visually-hidden) {
+    position: absolute;
+    inset-block-start: 0.75rem;
+    inset-inline-end: 0.75rem;
+    float: none;
+    margin: 0;
+  }
+  .form-check-card > .form-check-label {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    padding-inline-end: 2.5rem;
+    border: var(--bs-border-width) solid var(--moo-border);
+    border-radius: var(--bs-border-radius);
+    color: var(--moo-foreground);
+    cursor: pointer;
+  }
+  .form-check-card.form-check-card--no-control > .form-check-label {
+    padding-inline-end: 0.75rem;
+  }
+  .form-check-card > .form-check-input:not(:disabled) ~ .form-check-label:hover,
+.form-check-card > .form-check-input:checked ~ .form-check-label {
+    background-color: var(--moo-muted-surface);
+  }
+  .form-check-card > .form-check-input:checked ~ .form-check-label {
+    border-color: var(--moo-foreground);
+  }
+  .form-check-card > .form-check-input:checked ~ .form-check-label .form-check-card-media {
+    border-color: var(--moo-primary);
+    background-color: var(--moo-primary);
+    color: var(--moo-primary-foreground);
+  }
+  .form-check-card > .form-check-input:focus-visible ~ .form-check-label {
+    border-color: var(--moo-ring);
+    box-shadow: 0 0 0 var(--bs-focus-ring-width) color-mix(in srgb, var(--moo-ring) 50%, transparent);
+  }
+  .form-check-card > .form-check-input.is-invalid ~ .form-check-label {
+    border-color: var(--bs-form-invalid-border-color);
+  }
+  .form-check-card > .form-check-input.is-invalid:focus-visible ~ .form-check-label {
+    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--moo-form-invalid-ring-color);
+  }
+  .form-check-card-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 0;
+    line-height: 1.25;
+    overflow-wrap: anywhere;
+  }
+  .form-check-card-content > .form-text {
+    margin: 0;
+    font-size: 0.76562rem;
+    line-height: inherit;
+    color: color-mix(in srgb, var(--moo-muted-foreground) 95%, var(--moo-foreground));
+  }
+  .form-check-card-title {
+    font-weight: 500;
+  }
+  .form-check-card-media {
+    display: grid;
+    place-items: center;
+    flex: 0 0 auto;
+    inline-size: 2.30078rem;
+    aspect-ratio: 1;
+    border: var(--bs-border-width) solid var(--moo-border);
+    border-radius: var(--bs-border-radius-sm);
+    background-color: var(--moo-muted-surface);
+    color: var(--moo-foreground);
+  }
+  .form-check-card-media > span {
+    font-size: 0.76562rem;
+    font-weight: 600;
+  }
+  .form-check-card-media > [data-icon] {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  /* Switch */
   .form-switch .form-check-input {
     height: 1.15rem;
   }
@@ -5643,6 +5917,8 @@ label.btn {
 :scope[data-bs-theme="dark"] .form-switch .form-check-input:focus:not(:focus-visible):not(:checked) {
     --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
   }
+
+  /* Spinner */
   .spinner [data-icon] {
     width: 1rem;
     height: 1rem;
@@ -5652,6 +5928,8 @@ label.btn {
     width: 0.75rem;
     height: 0.75rem;
   }
+
+  /* Accordion */
   .accordion-button::after {
     content: none;
   }
@@ -5696,6 +5974,8 @@ label.btn {
   .card .accordion {
     --bs-accordion-bg: transparent;
   }
+
+  /* Tabs */
   .tabs-list {
     display: inline-flex;
     gap: 0.125rem;
@@ -5799,6 +6079,8 @@ label.btn {
     pointer-events: auto;
     transition-delay: 0s;
   }
+
+  /* Collapsible */
   .collapsible {
     display: flex;
     flex-direction: column;
@@ -5836,6 +6118,8 @@ label.btn {
     color: var(--moo-muted-foreground);
     width: 100%;
   }
+
+  /* Tooltip */
   .tooltip {
     --bs-tooltip-max-width: 20rem;
     --bs-tooltip-padding-x: 0.75rem;
@@ -5890,6 +6174,8 @@ label.btn {
   .tooltip-inner kbd {
     margin-inline-start: 0.25rem;
   }
+
+  /* Popover */
   .popover {
     --bs-popover-border-radius: var(--bs-border-radius-lg);
     --bs-popover-border-color: var(--moo-border);
@@ -5913,6 +6199,8 @@ label.btn {
   .popover .popover-arrow {
     display: none;
   }
+
+  /* Dialog */
   .modal {
     --bs-modal-border-radius: var(--bs-border-radius-xl);
     --bs-modal-border-color: var(--moo-border);
@@ -5967,6 +6255,8 @@ label.btn {
   .modal-footer {
     padding: 1rem;
   }
+
+  /* Sheet */
   .offcanvas.sheet {
     --bs-offcanvas-width: 24rem;
     --bs-offcanvas-border-color: var(--moo-border);
@@ -5980,6 +6270,8 @@ label.btn {
     font-size: 1rem;
     font-weight: 500;
   }
+
+  /* Toast */
   .toast {
     --bs-toast-border-radius: var(--bs-border-radius-lg);
     --bs-toast-border-color: var(--moo-border);
@@ -6071,6 +6363,8 @@ label.btn {
       transition: none;
     }
   }
+
+  /* Field */
   .field {
     display: flex;
     flex-direction: column;
@@ -6146,6 +6440,8 @@ label.btn {
   .field-fieldset + hr {
     opacity: 0.1;
   }
+
+  /* Date Picker */
   .moo-datepicker {
     --moo-datepicker-width: 17.5rem;
     --moo-datepicker-popover-offset: 0.375rem;
@@ -6345,6 +6641,8 @@ label.btn {
   .moo-calendar__preset {
     flex: 0 0 auto;
   }
+
+  /* Combobox */
   .combobox {
     --moo-combobox-width: 12.5rem;
     --moo-combobox-multiple-width: 20rem;
@@ -6560,6 +6858,8 @@ label.btn {
     color: var(--bs-secondary-color);
     text-align: center;
   }
+
+  /* Context Menu */
   .context-menu {
     position: relative;
   }
@@ -6574,6 +6874,8 @@ label.btn {
   ul.context-menu-menu:focus-visible {
     outline: 0;
   }
+
+  /* Data Table */
   .datatable {
     --moo-datatable-min-width: 48rem;
     --moo-datatable-actions-cell-bg: var(--bs-body-bg);
@@ -6595,15 +6897,88 @@ label.btn {
     table-layout: fixed;
   }
   .datatable--responsive-scroll .datatable-table,
-.datatable--responsive-toggle .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-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;
+  }
+  .datatable--responsive-auto[data-datatable-responsive-breakpoint="sm"] {
+    --moo-datatable-responsive-breakpoint: 576px;
+  }
+  .datatable--responsive-auto[data-datatable-responsive-breakpoint="sm"][data-datatable-view="auto"] .datatable-card-frame {
+    display: none;
+  }
+  @media (max-width: 575.98px) {
+    .datatable--responsive-auto[data-datatable-responsive-breakpoint="sm"][data-datatable-view="auto"] .datatable-frame {
+      display: none;
+    }
+    .datatable--responsive-auto[data-datatable-responsive-breakpoint="sm"][data-datatable-view="auto"] .datatable-card-frame {
+      display: block;
+    }
+  }
+  .datatable--responsive-auto[data-datatable-responsive-breakpoint="md"] {
+    --moo-datatable-responsive-breakpoint: 768px;
+  }
+  .datatable--responsive-auto[data-datatable-responsive-breakpoint="md"][data-datatable-view="auto"] .datatable-card-frame {
     display: none;
   }
-  .datatable--responsive-toggle[data-datatable-view="cards"] .datatable-frame {
+  @media (max-width: 767.98px) {
+    .datatable--responsive-auto[data-datatable-responsive-breakpoint="md"][data-datatable-view="auto"] .datatable-frame {
+      display: none;
+    }
+    .datatable--responsive-auto[data-datatable-responsive-breakpoint="md"][data-datatable-view="auto"] .datatable-card-frame {
+      display: block;
+    }
+  }
+  .datatable--responsive-auto[data-datatable-responsive-breakpoint="lg"] {
+    --moo-datatable-responsive-breakpoint: 992px;
+  }
+  .datatable--responsive-auto[data-datatable-responsive-breakpoint="lg"][data-datatable-view="auto"] .datatable-card-frame {
     display: none;
   }
+  @media (max-width: 991.98px) {
+    .datatable--responsive-auto[data-datatable-responsive-breakpoint="lg"][data-datatable-view="auto"] .datatable-frame {
+      display: none;
+    }
+    .datatable--responsive-auto[data-datatable-responsive-breakpoint="lg"][data-datatable-view="auto"] .datatable-card-frame {
+      display: block;
+    }
+  }
+  .datatable--responsive-auto[data-datatable-responsive-breakpoint="xl"] {
+    --moo-datatable-responsive-breakpoint: 1200px;
+  }
+  .datatable--responsive-auto[data-datatable-responsive-breakpoint="xl"][data-datatable-view="auto"] .datatable-card-frame {
+    display: none;
+  }
+  @media (max-width: 1199.98px) {
+    .datatable--responsive-auto[data-datatable-responsive-breakpoint="xl"][data-datatable-view="auto"] .datatable-frame {
+      display: none;
+    }
+    .datatable--responsive-auto[data-datatable-responsive-breakpoint="xl"][data-datatable-view="auto"] .datatable-card-frame {
+      display: block;
+    }
+  }
+  .datatable--responsive-auto[data-datatable-responsive-breakpoint="xxl"] {
+    --moo-datatable-responsive-breakpoint: 1400px;
+  }
+  .datatable--responsive-auto[data-datatable-responsive-breakpoint="xxl"][data-datatable-view="auto"] .datatable-card-frame {
+    display: none;
+  }
+  @media (max-width: 1399.98px) {
+    .datatable--responsive-auto[data-datatable-responsive-breakpoint="xxl"][data-datatable-view="auto"] .datatable-frame {
+      display: none;
+    }
+    .datatable--responsive-auto[data-datatable-responsive-breakpoint="xxl"][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);
@@ -6651,6 +7026,16 @@ label.btn {
   .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: 1rem;
+  }
   .datatable-toolbar {
     display: flex;
     flex-wrap: wrap;
@@ -7071,7 +7456,10 @@ label.btn {
     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);
+    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;
@@ -7436,6 +7824,8 @@ label.btn {
   .datatable--release-review {
     --moo-datatable-min-width: 64rem;
   }
+
+  /* Focus and keyboard navigation */
   .form-label,
 .form-check-label {
     user-select: none;
@@ -7506,6 +7896,13 @@ label.btn {
 .was-validated .input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))) > :is(.form-control, .form-select):invalid {
     box-shadow: none;
   }
+
+  /* Utilities */
+
+  /* Border utilities */
+  .border-dashed {
+    border-style: dashed !important;
+  }
   :where( .scroll-fade, .scroll-fade-y, .scroll-fade-x, .scroll-fade-t, .scroll-fade-b, .scroll-fade-l, .scroll-fade-r, .scroll-fade-s, .scroll-fade-e ) {
     --scroll-fade-size: min(12%, 2.5rem);
     --scroll-fade-reveal: 6rem;
@@ -7674,6 +8071,16 @@ label.btn {
       --moo-scroll-fade-e: var(--moo-scroll-fade-e-size);
     }
   }
+  .scroll-smooth {
+    scroll-behavior: smooth;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .scroll-smooth {
+      scroll-behavior: auto;
+    }
+  }
+
+  /* Application layout */
   .sidebar {
     --moo-sidebar-width: 16rem;
     --moo-sidebar-width-icon: 3rem;
@@ -7706,9 +8113,6 @@ label.btn {
     background: transparent;
     transition: background 0.15s ease;
   }
-  .sidebar-rail:hover::after {
-    background: var(--moo-sidebar-border);
-  }
   .wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar-inner {
     position: relative;
     height: 100%;
@@ -7744,19 +8148,6 @@ label.btn {
     .sidebar-rail {
       display: none;
     }
-    .wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar {
-      position: relative;
-      inset: auto;
-      flex: 0 0 auto;
-      width: 100%;
-      height: auto;
-      visibility: visible;
-      transform: none;
-    }
-    .wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar-inner {
-      height: auto;
-      max-height: none;
-    }
   }
   .sidebar[data-side="left"]:not([data-variant="inset"]) .sidebar-inner {
     border-right: var(--bs-border-width) solid var(--moo-sidebar-border);
@@ -8108,6 +8499,8 @@ label.btn {
       display: none !important;
     }
   }
+
+  /* Form themes */
   :scope[data-bs-theme="light"] .form-select {
     --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
   }
@@ -8120,6 +8513,8 @@ label.btn {
   :scope[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked):not(:focus) {
     --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
   }
+
+  /* Overlay backdrops */
   .modal-backdrop,
 .offcanvas-backdrop {
     --bs-backdrop-opacity: var(--moo-overlay-backdrop-opacity, 1);
@@ -8156,7 +8551,16 @@ label.btn {
 .offcanvas-backdrop.show::before {
     animation: moo-overlay-backdrop-enter var(--moo-overlay-motion-duration, 0.3s) ease-out both;
   }
+
+  /* Typography */
   :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6) {
     font-family: var(--moo-heading-font-family, var(--bs-body-font-family));
   }
+  :is(small, .small) {
+    font-size: var(--moo-small-font-size);
+  }
+  p {
+    margin-top: var(--moo-paragraph-margin-top);
+    margin-bottom: var(--moo-paragraph-margin-bottom);
+  }
 }