@wpmoo/ui 1.0.0-rc.8 → 1.0.0

package/scss/components/_breadcrumb.scss

@@ -1,7 +1,4 @@
-// Bootstrap mutes the active/current item and leaves prior items on default
-// link styling (colored, underlined); the design reference inverts this —
-// prior items are muted, the active item reads at full foreground
-// strength — verified against the live reference page.
+/* Breadcrumb */
 .breadcrumb {
   --bs-breadcrumb-item-active-color: var(--moo-foreground);
   --bs-breadcrumb-item-padding-x: #{$spacer * 0.375};
@@ -46,8 +43,6 @@
   line-height: 1;
 }
 
-// Bootstrap emits these RTL changes through RTLCSS. The catalog serves one
-// runtime CSS file, so scoped RTL demos bridge that generated output.
 :dir(rtl) .breadcrumb {
   --bs-breadcrumb-divider: "#{$breadcrumb-divider-flipped}";
 }
@@ -78,8 +73,6 @@
   text-decoration: none;
 }
 
-// A static collapsed-segment marker (no interactive behavior of its own,
-// matching the reference's ellipsis placeholder).
 .breadcrumb-ellipsis {
   display: inline-flex;
   align-items: center;
@@ -91,10 +84,6 @@
   height: 1rem;
 }
 
-// Bootstrap's dropdown wrapper is a plain block box; inside a breadcrumb
-// item that sits beside a floated divider, a block box wraps its content
-// onto its own line instead of flowing beside the float. Making this
-// wrapper an atomic inline-flex box keeps it on the breadcrumb's line.
 .breadcrumb-dropdown-item,
 .breadcrumb-dropdown-item .dropdown {
   display: inline-flex;

package/scss/components/_button.scss

@@ -1,5 +1,4 @@
-// Bootstrap owns button geometry through its --bs-btn-* consumption values.
-// Moo adds only icon composition and the missing xs/icon-only variants.
+/* Buttons */
 .btn {
   display: inline-flex;
   align-items: center;
@@ -23,8 +22,6 @@ label.btn {
   cursor: default;
 }
 
-// Bootstrap provides sm/lg; xs and icon-only variants reuse the same
-// consumption properties instead of introducing a parallel size system.
 .btn-xs,
 .btn-icon-xs {
   --bs-btn-padding-y: #{$spacer * 0.1875};
@@ -66,18 +63,7 @@ label.btn {
   padding-inline-end: $icon-link-gap;
 }
 
-// Icon-only buttons become squares whose side equals the token-driven
-// button height (line-height + 2*padding-y + 2*border), so they always match
-// the height of sibling text buttons. --bs-btn-line-height is a length in
-// Moo, making this calc valid. No hard-coded dimensions.
 .btn-icon {
-  // Icon-only buttons become squares whose side equals the token-driven
-  // button height (line-height + 2*padding-y + 2*border), so they always
-  // match the height of sibling text buttons. The default button exposes no
-  // --bs-btn-line-height / --bs-btn-padding-y custom properties (Bootstrap
-  // compiles those from Sass), so only the default size declares them here;
-  // xs/sm/lg already set their own values in their own blocks above and
-  // must not be overridden back to the default by this shared rule.
   --bs-btn-line-height: #{$btn-line-height};
   --bs-btn-padding-y: #{$btn-padding-y};
 }
@@ -86,8 +72,6 @@ label.btn {
 .btn-icon-xs,
 .btn-icon-sm,
 .btn-icon-lg {
-  // The side is computed once into --moo-btn-icon-size and consumed on both
-  // axes (and by .btn-group-vertical) so the two cannot diverge.
   --moo-btn-icon-size: #{$moo-btn-icon-size};
   padding-inline: 0;
   inline-size: var(--moo-btn-icon-size);
@@ -115,11 +99,6 @@ label.btn {
   height: $font-size-base;
 }
 
-// The loading state swaps icon_start for the same loader-circle icon the
-// standalone Spinner uses; aria-busy doubles as the accessible loading
-// signal and the hook that scopes the spin to only that icon. The
-// rotation uses Bootstrap's own spinner-border keyframe in the standalone
-// build and the namespaced Moo keyframe in the scoped core build.
 .btn[aria-busy="true"] > [data-icon="inline-start"] {
   animation: $moo-spinner-animation-name $spinner-animation-speed linear infinite;
 }
@@ -136,14 +115,10 @@ label.btn {
   opacity: var(--moo-disabled-control-opacity);
 }
 
-// Replaces Bootstrap's native inset active shadow disabled in
-// _bootstrap_overrides.scss; 0.5px keeps the press visible without shifting
-// adjacent inline controls.
 .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
   transform: translateY($moo-control-active-translate-y);
 }
 
-// Bootstrap consumes these properties; owned variants supply only exceptions.
 :is(.btn-primary, .btn-secondary, .btn-outline-secondary, .btn-outline-primary, .btn-ghost, .btn-danger) {
   --bs-btn-border-color: var(--bs-btn-bg);
   --bs-btn-hover-color: var(--bs-btn-color);
@@ -172,9 +147,6 @@ label.btn {
 
 .btn-secondary {
   --bs-btn-color: var(--moo-foreground);
-  // The reference's secondary button is the surface color (white in light)
-  // with a hairline border (bg-background + border-border), not a tinted
-  // fill; the shared muted surface stays the hover/active step.
   --bs-btn-bg: var(--moo-surface);
   --bs-btn-border-color: var(--moo-border);
   --bs-btn-hover-bg: color-mix(in srgb, var(--moo-muted-surface) 95%, var(--moo-foreground));

package/scss/components/_button_group.scss

@@ -1,7 +1,4 @@
-// Button Group adds no visual tokens of its own: Bootstrap's extend chain
-// (group sizes extend the button sizes) plus the grouped size selectors in
-// the button partial deliver one shared scale. Only RTL geometry lives here:
-// joined borders keep LTR order while labels render bidi-correctly.
+/* Button Group */
 [dir="rtl"] .btn-group,
 [dir="rtl"] .btn-toolbar {
   direction: ltr;
@@ -12,12 +9,6 @@
   unicode-bidi: plaintext;
 }
 
-// Bootstrap raises hovered, focused, and active group buttons above siblings
-// so the current border wins the shared seam. In a mixed-emphasis group (for
-// example primary + outline) pointer interaction paints one pixel into the
-// neighbor and reads like a width jump. Keep keyboard focus, active classes,
-// and checked inputs stacked, but let plain pointer hover/click use DOM order
-// so the joined edge stays visually stable.
 .btn-group > .btn:hover:not(:focus-visible):not(.active),
 .btn-group > .btn:focus:not(:focus-visible):not(.active),
 .btn-group > .btn:active:not(:focus-visible):not(.active),
@@ -34,16 +25,11 @@
   z-index: 1;
 }
 
-// A button group is one compound control surface; pressing one segment should
-// not translate that segment away from its joined border while siblings stay
-// still. The active color change remains as the press affordance.
 .btn-group > .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active,
 .btn-group-vertical > .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
   transform: none;
 }
 
-// Icon buttons in button groups should stay square, not stretch to fill
-// the group width (Bootstrap's flex: 1 1 auto makes them rectangular).
 .btn-group > .btn-icon,
 .btn-group > .btn-icon-xs,
 .btn-group > .btn-icon-sm,
@@ -55,8 +41,6 @@
   flex: 0 0 auto;
 }
 
-// Bootstrap's .btn-group-vertical > .btn { width: 100% } would stretch icon
-// buttons; re-assert the token-derived square so vertical rails stay square.
 .btn-group-vertical > .btn-icon,
 .btn-group-vertical > .btn-icon-xs,
 .btn-group-vertical > .btn-icon-sm,
@@ -64,14 +48,6 @@
   width: var(--moo-btn-icon-size);
 }
 
-// Select inside a button group: compact and content-sized, matching the
-// compact currency selector pattern. Bootstrap's flex defaults would shrink
-// it below its longest option; flex: 0 0 auto keeps the intrinsic (content)
-// width. The min-width floor derives from Bootstrap's form-select caret-space
-// token, not magic numbers. Focus keeps Bootstrap's default visible treatment.
-//
-// The input-group override matches Bootstrap's own `.input-group > .form-select`
-// specificity (0,2,0) which would otherwise stretch the select with flex: 1 1 auto.
 .btn-group-select,
 .input-group > .btn-group-select {
   flex: 0 0 auto;

package/scss/components/_card.scss

@@ -1,15 +1,8 @@
-// Card: bridge Bootstrap's consumption variables to shared primitives
-// (UI-wide shadow and radius) and runtime theme tokens, then add the minimal
-// structure that gives Bootstrap's native card the reference silhouette.
-// The reference card is a rounded surface with a hairline ring and a
-// theme-adaptive muted footer tint; its geometry is the source of the values
-// chosen here (verified against the live reference page).
+/* Card */
 .card {
   --bs-card-bg: color-mix(in srgb, var(--bs-secondary-bg) #{$moo-card-bg-mix}, var(--bs-body-bg));
   --bs-card-color: var(--moo-foreground);
   --bs-card-border-color: var(--moo-border);
-  // The reference uses a 14px corner; Bootstrap's shared radius-xl is the
-  // closest token and wins the delta (12px here) per the token-first rule.
   --bs-card-border-radius: var(--bs-border-radius-xl);
   --bs-card-inner-border-radius: calc(var(--bs-card-border-radius) - var(--bs-card-border-width));
   --bs-card-box-shadow: var(--bs-box-shadow-sm);
@@ -18,32 +11,19 @@
   --bs-card-title-color: var(--moo-foreground);
   --bs-card-subtitle-color: var(--moo-muted-foreground);
   --moo-card-footer-bg: #{$moo-card-footer-bg};
-  // The reference card lets consumers retune section rhythm and inset in one
-  // place; the default matches the 16px step Bootstrap's own spacer scale
-  // already carries. Declared on the selector that consumes it, like
-  // Bootstrap's own component custom properties.
   --moo-card-spacing: #{$moo-card-spacing};
 
-  // One vertical rhythm owned by the card; sections add only inline padding.
   gap: var(--moo-card-spacing);
   padding-block: var(--moo-card-spacing);
 
-  // A footer strip owns its own bottom padding; with one present the card
-  // drops its trailing rhythm so the muted strip touches the card edge
-  // (mirrors the reference's has-data-[slot=card-footer]:pb-0).
   &:has(.card-footer) {
     padding-block-end: 0;
   }
 
-  // A leading image frame owns the top edge; with one present the card drops
-  // its leading rhythm so the image touches the card corner (mirrors the
-  // reference's has-[>img:first-child]:pt-0).
   &:has(> .card-image) {
     padding-block-start: 0;
   }
 
-  // Keep the Bootstrap border box visible with a soft tokenized color, then
-  // let the shared shadow token supply the subtle card depth.
   border: var(--bs-card-border-width) solid var(--bs-card-border-color);
   box-shadow: var(--bs-card-box-shadow);
 
@@ -58,8 +38,6 @@
   --moo-card-spacing: #{$moo-card-spacing-sm};
 }
 
-// The reference header lays title/description in a grid; an optional action
-// occupies the trailing auto column on the same row as the title.
 .card-header {
   display: grid;
   grid-template-columns: 1fr auto;
@@ -92,8 +70,6 @@
   padding-inline: var(--moo-card-spacing);
 }
 
-// Use a separately mixed footer surface so tuning the main card fill does not
-// collapse the footer contrast.
 .card-footer {
   display: flex;
   align-items: center;
@@ -104,14 +80,10 @@
 }
 
 .card-img-top {
-  // The reference clips a leading image to the card's top corners; the shared
-  // radius keeps it aligned with the rounded surface.
   border-top-left-radius: var(--bs-card-border-radius);
   border-top-right-radius: var(--bs-card-border-radius);
 }
 
-// A leading image sits in a 16:9 frame; the frame owns a theme-adaptive
-// surface so a non-cover image never leaves an unstyled gap.
 .card-image {
   aspect-ratio: 16 / 9;
   overflow: hidden;

package/scss/components/_checkbox.scss

@@ -1,15 +1,8 @@
-// Bootstrap's margin-top (0.25rem = 4px) was computed for the old 1em
-// checkbox (14px at the catalog's 0.875rem body font). The override to
-// 1rem (16px) shifted the geometric center by 1px; tightening the top
-// margin to 0.125rem (2px) re-centres the 16px control within the
-// .form-check min-height so it aligns with the label text.
+/* Checkbox */
 .form-check-input {
   margin-top: 0.125rem;
 }
 
-// Bootstrap's checkbox/radio glyphs are SVG data URIs whose stroke/fill color
-// is fixed at compile time. Draw the checkbox mark as an overlay so it follows
-// the runtime primary foreground when Theme color changes.
 .form-check-input[type="checkbox"]:checked:not([role="switch"]) {
   --#{$prefix}form-check-bg-image: none;
 
@@ -42,11 +35,6 @@
   --#{$prefix}form-check-bg-image: radial-gradient(circle at center, var(--moo-primary-foreground) 0 34%, transparent 36%);
 }
 
-// Covers checkbox, switch (also type="checkbox"), and radio alike so
-// mouse-triggered focus never shows a ring on any form-check control,
-// matching Input/Textarea/Select's own :focus:not(:focus-visible) rule
-// in foundations/_focus.scss. Invalid checkboxes are excluded — their
-// persistent validation ring is restored by the rules at the bottom.
 .form-check-input:is([type="checkbox"], [type="radio"]):not(.is-invalid):focus:active,
 .form-check-input:is([type="checkbox"], [type="radio"]):not(.is-invalid):focus:not(:focus-visible) {
   border-color: var(--bs-border-color);
@@ -63,24 +51,10 @@
   border-color: $form-check-input-indeterminate-border-color;
 }
 
-// Invalid ("destructive") checkboxes are an exception to the mouse-click
-// focus-ring suppression above. The validation ring stays visible at all
-// times — not just on :focus — so the error state is never silently
-// dismissed. This matches the reference's aria-invalid ring pattern and
-// mirrors the destructive ring that foundations/_focus.scss already
-// paints on .form-control.is-invalid and .form-select.is-invalid. Border
-// color is left to Bootstrap's own native .is-invalid rule (compiled from
-// vendor/bootstrap/scss/mixins/_forms.scss's form-validation-state(),
-// already themed to --bs-form-invalid-border-color); only the ring is
-// added on top of it here.
 .form-check-input.is-invalid {
   box-shadow: 0 0 0 #{$moo-form-focus-ring-width} var(--moo-form-invalid-ring-color);
 }
 
-// The focus-suppression rules above have specificity (0,4,0) which
-// beats .is-invalid's (0,2,0). These :focus variants sit after the
-// suppression block and carry (0,5,0), so the destructive ring stays
-// visible during mouse click and programmatic focus alike.
 .form-check-input.is-invalid:focus:active,
 .form-check-input.is-invalid:focus:not(:focus-visible) {
   box-shadow: 0 0 0 #{$moo-form-focus-ring-width} var(--moo-form-invalid-ring-color);
@@ -96,17 +70,6 @@
   box-shadow: 0 0 0 #{$moo-form-focus-ring-width} var(--moo-form-invalid-ring-color);
 }
 
-// The reference keeps a checked control's own border and fill at the
-// normal checked color even inside an invalid group -- only unchecked
-// siblings' solid border and the ring (kept above) flag the error, so the
-// user's actual selection never reads as "wrong" by itself. Overrides two
-// separate Bootstrap native rules: the base .is-invalid border-color
-// above (which does not itself distinguish :checked) and .is-invalid:
-// checked's own background-color: var(--bs-form-invalid-color) (also
-// compiled from form-validation-state(), which paints a checked+invalid
-// control's fill destructive-red by default). Repeats the :focus variants
-// verbatim so this wins the same specificity tie by source order, focused
-// or not.
 .form-check-input:is([type="checkbox"], [type="radio"]):not([role="switch"]).is-invalid:checked,
 .form-check-input:is([type="checkbox"], [type="radio"]):not([role="switch"]).is-invalid:checked:focus:active,
 .form-check-input:is([type="checkbox"], [type="radio"]):not([role="switch"]).is-invalid:checked:focus:not(:focus-visible) {

package/scss/components/_close_button.scss

@@ -1,10 +1,9 @@
+/* Close Button */
 .btn-close {
   --bs-btn-close-color: var(--moo-foreground);
   --bs-btn-hover-color: var(--bs-btn-close-color);
   --bs-btn-hover-bg: var(--moo-muted-surface);
   --bs-btn-hover-border-color: #{$moo-close-button-border-color};
-  // Replace Bootstrap's filled-path X with a Lucide-style stroke-based icon
-  // (thinner, more delicate — matches the reference's feel).
   --bs-btn-close-bg: #{escape-svg($moo-close-button-bg-image)};
 
   display: inline-flex;
@@ -14,8 +13,6 @@
   border-width: var(--bs-border-width);
   border-style: var(--bs-border-style);
   border-color: $moo-close-button-border-color;
-  // Keep the square hit area visually circular in every context, including
-  // modal and offcanvas headers.
   border-radius: var(--bs-border-radius-pill);
   color: var(--bs-btn-close-color);
   background-image: none;
@@ -31,11 +28,6 @@
   mask: var(--bs-btn-close-bg) center / contain no-repeat;
 }
 
-// Bootstrap's dark rule filters the whole element to recolor its background
-// image. The glyph above uses currentColor through a mask, so filtering would
-// incorrectly invert the token-driven hover surface as well. Both resolved
-// owner modes override it so an outer dark owner cannot affect an inner light
-// owner through Bootstrap's global descendant selector.
 :scope[data-bs-theme="light"] .btn-close,
 :scope[data-bs-theme="dark"] .btn-close {
   filter: none;

package/scss/components/_collapsible.scss

@@ -1,3 +1,4 @@
+/* Collapsible */
 .collapsible {
   display: flex;
   flex-direction: column;

package/scss/components/_combobox.scss

@@ -1,6 +1,4 @@
-// Bootstrap has no native Combobox component. The Basic pass composes a
-// form-control with a dropdown-menu and keeps only the missing positioning
-// and inline affordance in this component namespace.
+/* Combobox */
 .combobox {
   --moo-combobox-width: #{$moo-combobox-width};
   --moo-combobox-multiple-width: #{$moo-combobox-multiple-width};
@@ -93,9 +91,6 @@
   cursor: text;
 }
 
-// .combobox-chips's focus-visible ring lives in foundations/_focus.scss,
-// next to the other compound-control rings, instead of here -- see that
-// file's comment for why.
 
 .combobox-value {
   display: flex;

package/scss/components/_context-menu.scss

@@ -1,8 +1,4 @@
-// Bootstrap has no native context-menu or "explicit fallback trigger"
-// concept, so there is no Bootstrap token to consume here: the fallback
-// button is a Moo-owned corner affordance layered over arbitrary surface
-// content, verified in the browser to otherwise fall into normal block flow
-// below the surface instead of reading as a menu trigger for it.
+/* Context Menu */
 .context-menu {
   position: relative;
 }
@@ -17,12 +13,6 @@
   inset-inline-end: 0.5rem;
 }
 
-// A pointer-driven open focuses the menu container itself, not an item, so
-// :hover carries the highlight instead of a focus ring competing with it
-// (verified in the browser: focusing the first item unconditionally left a
-// stray ring on it while a different item was hovered). The shared
-// [tabindex]:focus-visible ring in foundations/_focus.scss otherwise applies
-// here too, since a tabindex="-1" container still matches that selector.
 ul.context-menu-menu:focus-visible {
   outline: 0;
 }

package/scss/components/_datatable.scss

@@ -1,15 +1,5 @@
-// Bootstrap ships .table markup only, with no sort/filter/pagination
-// behavior and no faceted-filter or column-visibility concept, so this
-// partial covers only the pieces that have no Bootstrap token to consume:
-// the facet dropdown's own checkbox indicator (mirroring the shared
-// dropdown_toggle_item() indicator in scss/components/_dropdown.scss), the
-// sort-direction icon swap, and the hidden-column state the runtime drives.
-
-// A fixed layout keeps the table's overall width stable as sorting,
-// filtering, pagination, and column visibility change which rows and
-// columns are on screen; Bootstrap's own .table stays auto-layout (sized
-// to the current content), which is what let the table jump width as
-// visible content changed.
+/* Data Table */
+
 .datatable {
   --moo-datatable-min-width: #{$moo-datatable-min-width};
   --moo-datatable-actions-cell-bg: #{$moo-datatable-actions-cell-bg};
@@ -34,29 +24,42 @@
 }
 
 .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);
 }
 
-// Toggle mode renders both the table and the card list at once (unlike
-// cards mode, which swaps them by breakpoint) so a person, not a viewport,
-// can choose the layout the way Odoo's List/Kanban switcher works. Visibility
-// follows the root's own data-datatable-view state instead of a d-*-none
-// utility.
-.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;
 }
 
-// Bootstrap's .table has no bordered/rounded container variant of its own
-// (.table-bordered adds vertical column rules too, which the reference
-// doesn't have -- only an outer frame plus its own default row dividers).
-// The radius has to live on this wrapper, not the <table> itself: Bootstrap
-// resets every table to border-collapse: collapse, and a border-radius on a
-// collapsed-border table does not clip its own cell backgrounds.
+@each $name, $value in map-merge($grid-breakpoints, $moo-datatable-responsive-breakpoint) {
+  @if $value != 0 {
+    .datatable--responsive-auto[data-datatable-responsive-breakpoint="#{$name}"] {
+      --moo-datatable-responsive-breakpoint: #{$value};
+
+      &[data-datatable-view="auto"] .datatable-card-frame {
+        display: none;
+      }
+
+      @include media-breakpoint-down($name, map-merge($grid-breakpoints, $moo-datatable-responsive-breakpoint)) {
+        &[data-datatable-view="auto"] .datatable-frame {
+          display: none;
+        }
+        &[data-datatable-view="auto"] .datatable-card-frame {
+          display: block;
+        }
+      }
+    }
+  }
+}
+
 .datatable-frame {
   border: var(--bs-border-width) solid var(--bs-border-color);
   border-radius: var(--bs-border-radius);
@@ -69,10 +72,6 @@
   overflow: hidden;
 }
 
-// Pin the actions column to the inline-end edge so the menu trigger stays
-// in view at every scroll position; the opaque background hides the cells
-// sliding underneath. Row menus are temporarily moved under body while open
-// (see datatable.js), so the wrapper keeps its overflow and scroll offset.
 .datatable-frame [data-datatable-column="actions"] {
   position: sticky;
   inset-inline-end: 0;
@@ -93,8 +92,6 @@
   );
 }
 
-// Card menus still live inside the card frame, so lift that frame while a
-// card menu is open.
 .datatable-card-frame:has(.datatable-card .dropdown-menu.show) {
   position: relative;
   z-index: $zindex-dropdown;
@@ -127,11 +124,18 @@
   vertical-align: middle;
 }
 
-// The toolbar's flex layout belongs to the component itself, not to
-// Bootstrap layout utilities on the macro markup: the narrow-screen grid
-// override below can replace it without an !important fight against
-// .d-flex, and the trailing actions group owns its own
-// margin-inline-start: auto alignment instead of .ms-auto.
+.datatable-col > .btn-link,
+.datatable-card-title > .btn-link {
+  max-inline-size: 100%;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  text-align: inherit;
+}
+
+.datatable-table > :not(caption) > * > .datatable-col:nth-child(1 of :not(.datatable-col-hidden)) {
+  padding-inline-start: $spacer;
+}
+
 .datatable-toolbar {
   display: flex;
   flex-wrap: wrap;
@@ -147,11 +151,6 @@
   margin-inline-start: auto;
 }
 
-// Bootstrap's .form-control defaults to width: 100%, so inside the
-// toolbar's flex row the search input claims the entire line on its own
-// and pushes the Status/Priority facet triggers onto a wrapped second
-// line even when there is room beside it. A max-width (not a fixed width)
-// caps it on wide toolbars while still letting it shrink on narrow ones.
 .datatable-toolbar-query {
   display: flex;
   flex: 0 1 22rem;
@@ -177,11 +176,6 @@
   width: 100%;
 }
 
-// A filter menu is a direct child so Bootstrap can anchor it to the trigger.
-// Clip the joined control while the menu is closed, matching the normal
-// input-group surface; release that clipping only while the menu is open so
-// the positioned dropdown can escape the control without leaking focus or
-// child paint past its rounded border.
 .datatable-searchbar:not(:has(> .dropdown-menu.show)) {
   overflow: hidden;
 }
@@ -198,8 +192,6 @@
   position: absolute;
   inset-block-start: 50%;
   inset-inline-start: 0.625rem;
-  // Bootstrap raises a focused form control to z-index: 5. Keep the
-  // decorative icon above that opaque surface so focus does not hide it.
   z-index: 6;
   display: inline-flex;
   align-items: center;
@@ -273,11 +265,6 @@
   min-width: 0;
 }
 
-// Only the option rows scroll; the facet/back-button header and the search
-// box above them stay in normal flow outside this nested list, so they
-// never move. list-style/margin/padding reset because this <ul> nests
-// inside a .dropdown-menu <li>, which does not get Bootstrap's own
-// dropdown-menu list reset applied to it a second time.
 .datatable-facet-options,
 .datatable-filter-options {
   max-height: $moo-datatable-facet-options-max-height;
@@ -619,10 +606,6 @@
   display: inline-flex;
 }
 
-// A card view is a grid, not a stack: on md/lg/tablet-and-wider screens a
-// single edge-to-edge card reads as an oversized table row, not a card.
-// auto-fill + a minimum card width wraps into as many columns as the
-// viewport allows and falls back to one column once it can't.
 .datatable-cards {
   --moo-datatable-card-min-width: #{$moo-datatable-card-min-width};
 
@@ -647,7 +630,11 @@
   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 {
@@ -704,11 +691,6 @@
   padding: 0.375rem 0.875rem;
 }
 
-// .datatable-col-hidden is a single class (display: none) declared above
-// .datatable-card-row's own display: grid; a tied, later-wins cascade let
-// the row's grid display beat the hide, so the View dropdown's column
-// toggles never reached the card list. Two classes outrank one regardless
-// of source order.
 .datatable-card-row.datatable-col-hidden {
   display: none;
 }
@@ -751,9 +733,6 @@
   background-color: var(--moo-muted-surface);
 }
 
-// Sticky action cells paint a gradient instead of using the row's
-// background-color, so selected rows need the same surface at the opaque end
-// of that fade.
 .datatable-row-selected > [data-datatable-column="actions"] {
   --moo-datatable-actions-cell-bg: var(--moo-muted-surface);
   background: var(--moo-muted-surface);
@@ -821,12 +800,6 @@
   margin: 0;
 }
 
-// .datatable-facet-item__indicator is Data Table's own facet-dropdown item
-// (datatable_facet_item(), not the shared dropdown_toggle_item() macro), so
-// it can't inherit .dropdown-item-check__indicator's shared rule (scss/
-// components/_dropdown.scss) directly -- it restates the same
-// $form-check-input-* tokens and checked treatment so the facet dropdown and
-// the filter-picker (which does use the shared indicator) read identically.
 .datatable-facet-item__indicator {
   --moo-datatable-facet-item-border-radius: #{$moo-datatable-facet-item-border-radius};
 
@@ -852,10 +825,6 @@
   height: 0.75rem;
 }
 
-// Bootstrap has no "inactive filter" button variant, so the faceted-filter
-// trigger is unstyled `.btn.btn-sm` by default and gets its own dashed,
-// muted-token treatment here. Selected filters keep the same calm outline
-// while the inline summary carries the active value.
 .datatable-facet-trigger {
   --bs-btn-active-bg: var(--bs-body-bg);
   --bs-btn-active-border-color: var(--bs-border-color);
@@ -931,11 +900,6 @@
   white-space: nowrap;
 }
 
-// Bootstrap has no floating/overlay toolbar primitive, so the selection
-// bulk-actions bar (shown only once at least one row is selected) is a
-// Moo-owned fixed-position surface. It reuses Bootstrap's own shadow,
-// border, and radius tokens; only the fixed positioning, translucency, and
-// backdrop blur have no existing Bootstrap utility to consume.
 .datatable-bulk-actions {
   --moo-datatable-bulk-actions-hover-scale: #{$moo-datatable-bulk-actions-hover-scale};
   --moo-datatable-bulk-actions-backdrop-blur: #{$moo-datatable-bulk-actions-backdrop-blur};
@@ -970,9 +934,6 @@
   white-space: nowrap;
 }
 
-// Catalog preview chrome: caps the full-bleed release-review preview pages.
-// A Sass knob keeps the geometry on the ordered settings aggregate instead
-// of a component-local literal.
 .datatable-preview-shell {
   max-width: $moo-datatable-preview-shell-max-width;
 }

package/scss/components/_datepicker.scss

@@ -1,3 +1,4 @@
+/* Date Picker */
 .moo-datepicker {
   --moo-datepicker-width: #{$moo-datepicker-width};
   --moo-datepicker-popover-offset: #{$moo-datepicker-popover-offset};