@wpmoo/ui 1.0.0-rc.8 → 1.0.0

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.0.0 (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;
@@ -229,6 +235,14 @@
   --moo-chart-3: #a1a1aa;
   --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"] {
@@ -406,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;
@@ -656,7 +672,7 @@
     background-color: var(--moo-input-bg, transparent);
     background-clip: padding-box;
     border: var(--bs-border-width) solid var(--moo-border);
-    border-radius: 0.625rem;
+    border-radius: var(--bs-border-radius-lg);
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   }
   @media (prefers-reduced-motion: reduce) {
@@ -781,11 +797,11 @@
   }
   .form-control-color::-moz-color-swatch {
     border: 0 !important;
-    border-radius: 0.625rem;
+    border-radius: var(--bs-border-radius-lg);
   }
   .form-control-color::-webkit-color-swatch {
     border: 0 !important;
-    border-radius: 0.625rem;
+    border-radius: var(--bs-border-radius-lg);
   }
   .form-control-color.form-control-sm {
     height: calc(1.42857em + 0.5rem + calc(var(--bs-border-width) * 2));
@@ -809,7 +825,7 @@
     background-position: right 0.625rem center;
     background-size: 16px 12px;
     border: var(--bs-border-width) solid var(--moo-border);
-    border-radius: 0.625rem;
+    border-radius: var(--bs-border-radius-lg);
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   }
   @media (prefers-reduced-motion: reduce) {
@@ -1012,7 +1028,7 @@
     white-space: nowrap;
     background-color: var(--moo-input-bg, transparent);
     border: var(--bs-border-width) solid var(--moo-border);
-    border-radius: 0.625rem;
+    border-radius: var(--bs-border-radius-lg);
   }
   .input-group-lg > .form-control,
 .input-group-lg > .form-select,
@@ -3057,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));
@@ -3068,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));
@@ -3077,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));
@@ -3088,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);
@@ -3174,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));
@@ -3191,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));
@@ -3216,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));
@@ -3233,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);
@@ -3771,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;
@@ -3781,6 +3809,8 @@
     line-height: 1rem;
     font-weight: 500;
   }
+
+  /* Input */
   .form-control {
     min-height: 2rem;
   }
@@ -3806,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);
@@ -3937,6 +3973,8 @@
     outline: 0;
     box-shadow: none;
   }
+
+  /* Buttons */
   .btn {
     display: inline-flex;
     align-items: center;
@@ -4111,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%;
@@ -4165,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);
@@ -4213,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;
@@ -4262,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;
   }
@@ -4276,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);
@@ -4371,6 +4419,8 @@ label.btn {
     font-size: 0.875rem;
     color: var(--moo-muted-foreground);
   }
+
+  /* Table */
   .card .table {
     --bs-table-bg: transparent;
   }
@@ -4380,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);
@@ -4404,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;
@@ -4543,6 +4598,8 @@ label.btn {
       inset-block-end: var(--moo-sidebar-dropdown-block-end) !important;
     }
   }
+
+  /* Menubar */
   .menubar {
     gap: 0.125rem;
     padding: 0.1875rem;
@@ -4556,6 +4613,8 @@ label.btn {
     color: var(--bs-btn-color);
     font-weight: 500;
   }
+
+  /* Avatar */
   .avatar {
     position: relative;
     display: inline-flex;
@@ -4678,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);
@@ -4707,6 +4775,58 @@ 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);
+  }
+
+  /* Skeleton */
   .skeleton {
     color: var(--moo-border);
     border-radius: var(--bs-border-radius);
@@ -4715,6 +4835,8 @@ label.btn {
   .skeleton > .placeholder {
     display: block;
   }
+
+  /* Sidebar */
   .sidebar-inner {
     position: sticky;
     top: 0;
@@ -5124,6 +5246,8 @@ label.btn {
       display: none;
     }
   }
+
+  /* Alert */
   .alert {
     --bs-alert-border-color: var(--moo-border);
     --bs-alert-color: var(--moo-foreground);
@@ -5190,6 +5314,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;
@@ -5289,6 +5415,8 @@ label.btn {
     width: 0.875rem;
     height: 0.875rem;
   }
+
+  /* Pagination */
   .page-link {
     display: inline-flex;
     align-items: center;
@@ -5334,6 +5462,8 @@ label.btn {
   .page-item.disabled {
     opacity: var(--moo-disabled-control-opacity);
   }
+
+  /* Badge */
   .badge {
     display: inline-flex;
     height: 1.25rem;
@@ -5362,10 +5492,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;
@@ -5544,6 +5678,8 @@ label.btn {
     writing-mode: vertical-lr;
     direction: rtl;
   }
+
+  /* Separator */
   hr {
     opacity: 1;
     border-top: var(--bs-border-width) solid var(--moo-border);
@@ -5552,6 +5688,8 @@ label.btn {
     opacity: 1;
     background-color: var(--moo-border);
   }
+
+  /* Checkbox */
   .form-check-input {
     margin-top: 0.125rem;
   }
@@ -5615,9 +5753,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;
   }
@@ -5641,6 +5870,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;
@@ -5650,6 +5881,8 @@ label.btn {
     width: 0.75rem;
     height: 0.75rem;
   }
+
+  /* Accordion */
   .accordion-button::after {
     content: none;
   }
@@ -5694,6 +5927,8 @@ label.btn {
   .card .accordion {
     --bs-accordion-bg: transparent;
   }
+
+  /* Tabs */
   .tabs-list {
     display: inline-flex;
     gap: 0.125rem;
@@ -5797,6 +6032,8 @@ label.btn {
     pointer-events: auto;
     transition-delay: 0s;
   }
+
+  /* Collapsible */
   .collapsible {
     display: flex;
     flex-direction: column;
@@ -5834,6 +6071,8 @@ label.btn {
     color: var(--moo-muted-foreground);
     width: 100%;
   }
+
+  /* Tooltip */
   .tooltip {
     --bs-tooltip-max-width: 20rem;
     --bs-tooltip-padding-x: 0.75rem;
@@ -5888,6 +6127,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);
@@ -5911,6 +6152,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);
@@ -5965,6 +6208,8 @@ label.btn {
   .modal-footer {
     padding: 1rem;
   }
+
+  /* Sheet */
   .offcanvas.sheet {
     --bs-offcanvas-width: 24rem;
     --bs-offcanvas-border-color: var(--moo-border);
@@ -5978,6 +6223,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);
@@ -6069,6 +6316,8 @@ label.btn {
       transition: none;
     }
   }
+
+  /* Field */
   .field {
     display: flex;
     flex-direction: column;
@@ -6115,6 +6364,10 @@ label.btn {
   .field-group > hr {
     margin-block: 0;
   }
+  .field-group.row {
+    flex-direction: row;
+    gap: 0;
+  }
   .field-form {
     display: flex;
     flex-direction: column;
@@ -6140,6 +6393,8 @@ label.btn {
   .field-fieldset + hr {
     opacity: 0.1;
   }
+
+  /* Date Picker */
   .moo-datepicker {
     --moo-datepicker-width: 17.5rem;
     --moo-datepicker-popover-offset: 0.375rem;
@@ -6339,6 +6594,8 @@ label.btn {
   .moo-calendar__preset {
     flex: 0 0 auto;
   }
+
+  /* Combobox */
   .combobox {
     --moo-combobox-width: 12.5rem;
     --moo-combobox-multiple-width: 20rem;
@@ -6554,6 +6811,8 @@ label.btn {
     color: var(--bs-secondary-color);
     text-align: center;
   }
+
+  /* Context Menu */
   .context-menu {
     position: relative;
   }
@@ -6568,6 +6827,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);
@@ -6589,15 +6850,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-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;
+  }
+  @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);
@@ -6645,6 +6979,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;
@@ -7065,7 +7409,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;
@@ -7430,6 +7777,8 @@ label.btn {
   .datatable--release-review {
     --moo-datatable-min-width: 64rem;
   }
+
+  /* Focus and keyboard navigation */
   .form-label,
 .form-check-label {
     user-select: none;
@@ -7500,6 +7849,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;
@@ -7668,6 +8024,8 @@ label.btn {
       --moo-scroll-fade-e: var(--moo-scroll-fade-e-size);
     }
   }
+
+  /* Application layout */
   .sidebar {
     --moo-sidebar-width: 16rem;
     --moo-sidebar-width-icon: 3rem;
@@ -7738,21 +8096,8 @@ 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"] .sidebar-inner {
+  .sidebar[data-side="left"]:not([data-variant="inset"]) .sidebar-inner {
     border-right: var(--bs-border-width) solid var(--moo-sidebar-border);
   }
   .sidebar[data-side="right"] {
@@ -7764,11 +8109,11 @@ label.btn {
   .wrapper[data-layout="app"]:dir(rtl) > .sidebar[data-side="right"] {
     order: 0;
   }
-  .sidebar[data-side="right"] .sidebar-inner {
+  .sidebar[data-side="right"]:not([data-variant="inset"]) .sidebar-inner {
     border-left: var(--bs-border-width) solid var(--moo-sidebar-border);
   }
   @media (min-width: 992px) {
-    .sidebar {
+    :where(.wrapper[data-layout="app"][data-sidebar-ready]) > .sidebar {
       transition: flex-basis 0.2s ease, width 0.2s ease;
     }
     .sidebar[data-variant="floating"] .sidebar-inner {
@@ -7808,6 +8153,10 @@ label.btn {
       box-shadow: var(--bs-box-shadow-sm);
       background: var(--bs-body-bg);
     }
+    .wrapper[data-layout="app"]:has(> .sidebar[data-variant="inset"]) > [data-slot="page"] > header {
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+    }
     .wrapper[data-layout="app"][data-sidebar-state="collapsed"]:has(> .sidebar[data-variant="inset"]) > [data-slot="page"] {
       margin-left: 0.5rem;
     }
@@ -7839,7 +8188,6 @@ label.btn {
     min-height: 0;
     flex: 1 1 auto;
     flex-direction: column;
-    overflow-y: auto;
   }
   .wrapper[data-layout="app"] > [data-slot="page"] > header,
 .wrapper[data-layout="app"] > [data-slot="page"] > main,
@@ -7851,6 +8199,7 @@ label.btn {
     min-height: 0;
     flex: 1 1 auto;
     flex-direction: column;
+    overflow-y: auto;
   }
   .wrapper[data-layout="app"] > [data-slot="page"] > main > :is( .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-fluid ) {
     display: flex;
@@ -7868,7 +8217,238 @@ label.btn {
     .wrapper[data-layout="app"][data-shell-mode="contained"] > [data-slot="page"] {
       overflow: visible;
     }
+    .wrapper[data-layout="app"][data-shell-mode="contained"] > [data-slot="page"] > main {
+      overflow: visible;
+    }
+  }
+  [data-page-container] {
+    container: moo-page / inline-size;
+  }
+  [data-page-container] [data-page-show-from] {
+    display: none !important;
+  }
+  @container moo-page (min-width: 576px) {
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="1"] {
+      width: 8.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="2"] {
+      width: 16.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="3"] {
+      width: 25%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="4"] {
+      width: 33.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="5"] {
+      width: 41.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="6"] {
+      width: 50%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="7"] {
+      width: 58.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="8"] {
+      width: 66.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="9"] {
+      width: 75%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="10"] {
+      width: 83.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="11"] {
+      width: 91.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="12"] {
+      width: 100%;
+    }
+    [data-page-container] [data-page-show-from="sm"] {
+      display: block !important;
+    }
+    [data-page-container] [data-page-hide-from="sm"] {
+      display: none !important;
+    }
+  }
+  @container moo-page (min-width: 768px) {
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="1"] {
+      width: 8.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="2"] {
+      width: 16.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="3"] {
+      width: 25%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="4"] {
+      width: 33.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="5"] {
+      width: 41.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="6"] {
+      width: 50%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="7"] {
+      width: 58.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="8"] {
+      width: 66.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="9"] {
+      width: 75%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="10"] {
+      width: 83.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="11"] {
+      width: 91.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="12"] {
+      width: 100%;
+    }
+    [data-page-container] [data-page-show-from="md"] {
+      display: block !important;
+    }
+    [data-page-container] [data-page-hide-from="md"] {
+      display: none !important;
+    }
+  }
+  @container moo-page (min-width: 992px) {
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="1"] {
+      width: 8.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="2"] {
+      width: 16.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="3"] {
+      width: 25%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="4"] {
+      width: 33.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="5"] {
+      width: 41.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="6"] {
+      width: 50%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="7"] {
+      width: 58.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="8"] {
+      width: 66.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="9"] {
+      width: 75%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="10"] {
+      width: 83.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="11"] {
+      width: 91.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="12"] {
+      width: 100%;
+    }
+    [data-page-container] [data-page-show-from="lg"] {
+      display: block !important;
+    }
+    [data-page-container] [data-page-hide-from="lg"] {
+      display: none !important;
+    }
   }
+  @container moo-page (min-width: 1200px) {
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="1"] {
+      width: 8.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="2"] {
+      width: 16.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="3"] {
+      width: 25%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="4"] {
+      width: 33.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="5"] {
+      width: 41.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="6"] {
+      width: 50%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="7"] {
+      width: 58.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="8"] {
+      width: 66.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="9"] {
+      width: 75%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="10"] {
+      width: 83.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="11"] {
+      width: 91.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="12"] {
+      width: 100%;
+    }
+    [data-page-container] [data-page-show-from="xl"] {
+      display: block !important;
+    }
+    [data-page-container] [data-page-hide-from="xl"] {
+      display: none !important;
+    }
+  }
+  @container moo-page (min-width: 1400px) {
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="1"] {
+      width: 8.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="2"] {
+      width: 16.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="3"] {
+      width: 25%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="4"] {
+      width: 33.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="5"] {
+      width: 41.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="6"] {
+      width: 50%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="7"] {
+      width: 58.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="8"] {
+      width: 66.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="9"] {
+      width: 75%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="10"] {
+      width: 83.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="11"] {
+      width: 91.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="12"] {
+      width: 100%;
+    }
+    [data-page-container] [data-page-show-from="xxl"] {
+      display: block !important;
+    }
+    [data-page-container] [data-page-hide-from="xxl"] {
+      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");
   }
@@ -7881,6 +8461,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);
@@ -7917,4 +8499,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);
+  }
 }