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

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};

package/scss/components/_dialog.scss

@@ -1,8 +1,4 @@
-// Dialog is the Moo catalog name for Bootstrap's Modal component, so this
-// partial retunes Bootstrap's own --bs-modal-* custom properties toward the
-// design reference: a larger radius, a quieter border tone, a borderless
-// header, one shared surface, and a lighter-weight tightly-set title, instead
-// of Bootstrap's own sharper-cornered, divided, heavier-titled look.
+/* Dialog */
 .modal {
   --bs-modal-border-radius: var(--bs-border-radius-xl);
   --bs-modal-border-color: var(--moo-border);
@@ -13,9 +9,6 @@
 }
 
 .modal[tabindex]:focus-visible {
-  // Bootstrap focuses the modal root when it opens. The shared focus rule
-  // intentionally covers generic tabindex controls, so reset that container
-  // ring here without weakening focus treatment for actual controls.
   outline: none;
 }
 
@@ -24,8 +17,6 @@
 }
 
 .modal-title {
-  // A literal size, not $font-size-base: this project's own base is 14px,
-  // but the reference dialog title sits at a plain, un-scaled 16px regardless.
   font-size: 1rem;
   font-weight: $font-weight-medium;
 }
@@ -35,8 +26,6 @@
 }
 
 .modal-header:has(> .btn-close) {
-  // Keep the dismiss control in a stable top/end corner, like the reference
-  // dialog surface, while reserving room so long titles cannot run beneath it.
   position: relative;
   padding-inline-end: calc(
     var(--bs-modal-padding) + #{$btn-close-width} + #{$btn-close-padding-x * 2} + 0.5rem
@@ -76,7 +65,5 @@
 }
 
 .modal-footer {
-  // Bootstrap derives this from --bs-modal-padding minus half the button
-  // gap (12px here); the reference footer keeps the full 16px card padding.
   padding: $spacer;
 }

package/scss/components/_dropdown.scss

@@ -1,5 +1,4 @@
-// Dropdown uses Bootstrap's own consumption variables. These aliases give
-// the native menu the reference's surface without a private Moo token layer.
+/* Dropdown */
 .dropdown-menu {
   --bs-dropdown-bg: var(--moo-surface);
   --bs-dropdown-border-color: var(--moo-border);
@@ -13,8 +12,6 @@
   --bs-dropdown-link-disabled-color: var(--moo-disabled-foreground);
   --bs-dropdown-header-color: var(--moo-muted-foreground);
 
-  // Bootstrap gates dropdown shadow behind $enable-shadows, so apply the
-  // shared elevation token directly after bridging it to --bs-dropdown-box-shadow.
   box-shadow: var(--bs-dropdown-box-shadow);
 }
 
@@ -26,29 +23,21 @@
   gap: $spacer * 0.5;
 }
 
-// Bootstrap's own .dropdown-item bundles :hover and :focus into the same
-// highlight (vendor/bootstrap/scss/_dropdown.scss), so an item that still
-// holds DOM focus from a prior mouse click (clicking a button leaves it
-// focused) keeps its highlight after the mouse moves to hover a different
-// item -- two rows lit up at once. Resetting the stale, non-keyboard focus
-// back to resting style (only when the item isn't also genuinely hovered,
-// so real hover still wins) leaves exactly one item highlighted at a time;
-// real keyboard :focus-visible navigation is untouched, since it's a subset
-// of :focus and this selector explicitly excludes it.
 .dropdown-item:focus:not(:focus-visible):not(:hover) {
   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;
   flex: 0 0 auto;
 }
 
-// Destructive dropdown items use the shared --moo-destructive token so the
-// red stays in sync with every other destructive control. Matches the
-// reference pattern: red text at rest, destructive-tinted bg on hover.
 .dropdown-item[data-variant="destructive"] {
   color: var(--moo-destructive) !important;
 }
@@ -79,14 +68,6 @@
   background-color: var(--bs-dropdown-link-hover-bg);
 }
 
-// A checkbox-style menu item can't nest a real <input type="checkbox"> inside
-// its <button> (invalid, inaccessible markup), so this indicator stands in
-// for one. Sized off Bootstrap's own $form-check-input-* tokens and always
-// showing its box (not opacity-toggled to nothing) so it reads as the same
-// checkable control as Checkbox itself, wherever a menu uses it -- Menubar,
-// Context Menu, and Data Table's column-visibility, page-size, and faceted
-// filter menus all compose this one indicator rather than each inventing
-// their own checkbox-adjacent look.
 .dropdown-item-check__indicator {
   --moo-dropdown-item-check-border-radius: #{$moo-dropdown-item-check-border-radius};
 
@@ -101,9 +82,6 @@
   color: transparent;
 }
 
-// Matches Checkbox's own checked fill (scss/components/_checkbox.scss:
-// $form-check-input-checked-bg-color, resolved to --moo-foreground) so a
-// checked menu item and a checked Checkbox read as the same control.
 .dropdown-item-check.active .dropdown-item-check__indicator {
   background-color: var(--moo-foreground);
   border-color: var(--moo-foreground);
@@ -115,12 +93,6 @@
   height: 0.75rem;
 }
 
-// Single-choice ("radio") menu items reuse the same indicator markup as the
-// checkbox variant above but read as a plain checkmark-on-select instead: no
-// boxed square, since a box implies each item has its own independent on/off
-// state, which is wrong when only one item in the group can ever be active
-// (e.g. Data Table's page-size menu). The icon stays hidden until the item
-// is active, matching how the reference and native menus mark single-choice items.
 .dropdown-item-check--radio .dropdown-item-check__indicator {
   border-color: transparent;
   background-color: transparent;
@@ -150,28 +122,13 @@
   height: 0.875rem;
 }
 
-// The Sidebar header/footer triggers (team switcher, account menu) span
-// the sidebar's full width, and the design reference matches its menu
-// width to that trigger so it extends past the sidebar edge into the content
-// column. Bootstrap's own dropdown-menu only sizes to its own content, so
-// match the trigger via the shared positioned dropdown ancestor's width
-// instead. Scoped by data-slot attribute, not a sidebar class selector, so
-// this stays inside the dropdown component's own selector ownership.
 [data-slot="sidebar-header"] .dropdown-menu,
 [data-slot="sidebar-footer"] .dropdown-menu {
   --moo-dropdown-sidebar-min-width: #{$moo-dropdown-sidebar-min-width};
 
-  // unquote(): libsass resolves max() as its own Sass function and rejects
-  // var() as a non-numeric argument, so escape it through to plain CSS
-  // (same technique already used for clamp() in the catalog stylesheet).
   min-width: #{unquote("max(100%, var(--moo-dropdown-sidebar-min-width))")};
 }
 
-// Header identity menus reuse the Sidebar account-menu body. Keep the same
-// comfortable width when the shared body is hosted by the global navbar
-// instead of a Sidebar slot; ordinary Header dropdowns remain content-sized.
-// The trigger marker is the integration contract, so Dropdown does not reach
-// into Sidebar's private class namespace to identify the menu body.
 [data-identity-trigger="1"] + .dropdown-menu {
   --moo-dropdown-sidebar-min-width: #{$moo-dropdown-sidebar-min-width};
   min-width: var(--moo-dropdown-sidebar-min-width);
@@ -198,9 +155,6 @@
   }
 }
 
-// The lg Offcanvas breakpoint still renders the sidebar as a drawer on
-// tablets. Keep identity menus inside that drawer until the desktop fixed
-// overlay contract becomes active.
 @include media-breakpoint-between(sm, lg) {
   [data-slot="sidebar-header"] .dropend > .dropdown-menu,
   [data-slot="sidebar-footer"] .dropend > .dropdown-menu {

package/scss/components/_field.scss

@@ -1,22 +1,14 @@
+/* Field */
 .field {
   display: flex;
   flex-direction: column;
   gap: $moo-field-gap;
 
-  // Bootstrap's own .form-label carries a margin-bottom of its own
-  // (form-label-margin-bottom), which would stack on top of this flex gap
-  // and roughly double the real spacing the design reference's flat
-  // gap-only model produces.
   > .form-label {
     margin-bottom: 0;
-    // $form-label-font-weight is unset (inherits normal body weight); the
-    // reference's own field label sits at a medium weight instead.
     font-weight: $font-weight-medium;
   }
 
-  // Bootstrap owns the control and .invalid-feedback state. Field mirrors
-  // the reference's wrapper-level invalid state with data-invalid, so labels
-  // inherit the destructive color only when the field itself opts into that state.
   &[data-invalid="true"] {
     color: var(--bs-form-invalid-color);
   }
@@ -48,18 +40,9 @@
   pointer-events: none;
 }
 
-// field_description()/field_error() keep Bootstrap's own .form-text /
-// .invalid-feedback class alongside these (the latter is load-bearing:
-// Bootstrap's own validity sibling-selector CSS targets that exact class
-// name to show/hide it), so every default here is a token override on top
-// of Bootstrap's own rule rather than a full replacement of it.
 .field-description,
 .field-error {
   margin-top: 0;
-  // .form-text/.invalid-feedback both default to Bootstrap's smaller
-  // $font-size-sm scale; the reference's own description/error text sit
-  // at the same size as the label itself, which this project's own
-  // $font-size-base already matches exactly (0.875rem).
   font-size: $font-size-base;
 }
 
@@ -68,16 +51,10 @@
   flex-direction: column;
   gap: $moo-field-group-gap;
 
-  // Inside a gap-managed group a separator adds no spacing of its own;
-  // Bootstrap's default block margins on <hr> would otherwise stack on
-  // top of the group gap and double the visual distance.
   > hr {
     margin-block: 0;
   }
 
-  // A public Bootstrap .row is an explicit layout request from the consumer.
-  // Preserve its responsive columns and let Bootstrap's gutters own spacing
-  // instead of turning the row back into a vertical, gap-managed field stack.
   &.row {
     flex-direction: row;
     gap: 0;
@@ -90,29 +67,16 @@
   gap: $moo-field-form-gap;
 }
 
-// Bootstrap's own <legend> reboot rule (float/width/padding/line-height)
-// still applies here; this only retunes its type scale. A dedicated class
-// rather than reusing .form-label, since Field owns this legend's styling
-// independently of Radio Group's own separate <legend class="form-label">
-// choice.
 .field-legend {
   font-size: $moo-field-legend-font-size;
   font-weight: $font-weight-medium;
   margin-bottom: $moo-field-legend-margin-bottom;
 }
 
-// One standard, token-based gap between a fieldset's direct building
-// blocks (the legend/description header, field groups, lone fields).
-// Sibling margins rather than flex gap: Bootstrap's reboot floats
-// <legend> to give it native block flow, and turning the fieldset into a
-// flex container would silently opt out of that contract.
 .field-fieldset > * + * {
   margin-top: $moo-field-fieldset-gap;
 }
 
-// The optional description directly under the legend is part of the
-// header unit: it sits on the legend's own tight margin instead of the
-// standard section gap.
 .field-fieldset > .field-legend + .field-description {
   margin-top: 0;
 }
@@ -125,9 +89,6 @@
   margin-top: 0;
 }
 
-// A separator() placed between two fieldsets (or field-group sections) is
-// a much quieter division in the design reference than Bootstrap's own
-// default <hr> opacity renders.
 .field-fieldset + hr {
   opacity: $moo-field-separator-opacity;
 }

package/scss/components/_input.scss

@@ -1,9 +1,8 @@
+/* Input */
 .form-control {
   min-height: $input-height;
 }
 
-// Text inputs should visually match the outer box of an Input Group, whose
-// border is promoted to the parent wrapper.
 .form-control:not(textarea):not([type="file"]):not(.form-control-sm, .form-control-lg) {
   min-height: calc(#{$input-height} + #{$input-border-width} * 2);
 }
@@ -17,9 +16,6 @@
   position: relative;
 }
 
-// Chromium's clock icon is the primary pointer trigger for the native time
-// picker. Keep the indicator covering the whole control but visually hidden so
-// pointer users retain picker access without the icon showing.
 .form-control[type="time"]::-webkit-calendar-picker-indicator {
   position: absolute;
   inset: 0;

package/scss/components/_input_group.scss

@@ -1,16 +1,10 @@
-// Bootstrap's native input-group keeps borders/radii on each child and trims
-// only the inner-facing seams (see the Bootstrap 5.3.3 input-group Sass
-// source). Moo promotes the border to the parent so icon/text addons read as
-// regions inside one compound input, but still leaves each edge child's own
-// outer corner radius aligned with the parent instead of flattening it.
+/* Input Group */
 .input-group:not(:has(> .form-control[type="file"])) {
   border: $input-border-width solid $input-border-color;
   border-radius: var(--moo-input-group-border-radius);
   background-color: var(--moo-input-bg, transparent);
 }
 
-// Keep compound surfaces clipped, but let a directly attached menu escape so
-// Bootstrap's positioned dropdown remains visible outside the input row.
 .input-group:not(:has(> .form-control[type="file"])):not(:has(> .dropdown-menu)) {
   overflow: hidden;
 }
@@ -19,25 +13,6 @@
   --moo-input-group-border-radius: var(--bs-border-radius-pill);
 }
 
-// references/bootstrap/5.3.3/scss/forms/_input-group.scss:9 sets align-items:
-// stretch on .input-group by default (this previously overrode it to center;
-// restored here since stretch is what makes children fill the row with no
-// centering rounding). Bootstrap's own .input-group carries no border of its
-// own — border-height math lives entirely on each child, which is why a
-// plain $input-height "just works" there. Moo moves that border to the
-// parent instead, so the parent's own border needs its own extra space on
-// top of $input-height, or children sized to a full $input-height (as
-// .form-control and .btn both are here) overflow the parent's inner content
-// box by exactly 2 * $input-border-width — this is what actually poked past
-// the rounded corner, not the corner radius itself.
-//
-// Excludes groups with validation feedback (feedback wraps below the control)
-// and the block-align case (a [data-align] addon wrapping to its own row
-// below/above the control): the fixed single-row height here has higher
-// specificity than the auto-height override further down for that case
-// (:not(:has(...)) chains add specificity these two-class selectors don't),
-// so without this exclusion the parent stayed pinned to one row's height
-// and the wrapped addon rendered outside its own border box entirely.
 .input-group:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))):not(:has(textarea)):not(:has(> .form-control[type="file"])):not(:has(> [data-align])) {
   height: calc(#{$input-height} + #{$input-border-width} * 2);
 }
@@ -59,11 +34,6 @@
   border-radius: 0;
 }
 
-// Restore the outer corner Bootstrap's own edge child would already carry:
-// Bootstrap only zeros the inner-facing side of a non-edge child, never the
-// outer side of an edge one. The trailing side also matches when a dropdown
-// menu is the real last DOM child, since the visible trailing control sits
-// right before it.
 .input-group:not(:has(> .form-control[type="file"])) > :first-child:not(ul) {
   border-start-start-radius: var(--moo-input-group-border-radius);
   border-end-start-radius: var(--moo-input-group-border-radius);
@@ -78,10 +48,6 @@
   border: var(--bs-btn-border-width) var(--bs-border-style) var(--bs-btn-border-color);
 }
 
-// Ghost buttons inside a compound input should read as inline affordances, not
-// standalone buttons. Keep Bootstrap's --bs-btn-* contract, but scope the
-// hover/active surface to the small control instead of repainting the compound
-// input edge.
 .input-group > .btn-ghost {
   --bs-btn-hover-bg: transparent;
   --bs-btn-active-bg: transparent;
@@ -90,10 +56,6 @@
   border-radius: var(--moo-input-group-border-radius) !important;
 }
 
-// Match the reference input-group affordance: the compound input stays clear,
-// while the hovered control gets a small inset surface. The surface reuses
-// the existing Moo muted token and Bootstrap radius instead of adding a
-// component-specific color or geometry value.
 .input-group > .btn-ghost::before {
   position: absolute;
   inset: $spacer * 0.25;
@@ -134,8 +96,6 @@
 
 .input-group > .input-group-text {
   color: var(--bs-secondary-color);
-  // bg intentionally omitted — Bootstrap's addon token consumes the same
-  // --moo-input-bg surface as the parent compound input.
 }
 
 .input-group > .input-group-text:first-child {
@@ -184,17 +144,7 @@
   background-color: transparent;
 }
 
-// The input-group's own compound 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.
 
-// Scoped to the native form control itself, not "any focused child": the
-// input-group already carries its own compound glow from the rule above, so
-// only the .form-control/.form-select that would otherwise draw a second,
-// competing glow needs its own default suppressed. A bare > :focus also
-// matched dropdown-toggle buttons living in the same input-group (e.g. Data
-// Table's filter-picker trigger), and its (0,4,0) specificity beat those
-// buttons' own :focus-visible keyboard ring outright.
 .input-group:not(:has(> .form-control[type="file"])) > :is(.form-control, .form-select):focus {
   outline: 0;
   box-shadow: none;

package/scss/components/_kbd.scss

@@ -1,3 +1,4 @@
+/* Keyboard keys */
 kbd {
   display: inline-flex;
   height: $moo-chip-height;

package/scss/components/_menubar.scss

@@ -1,3 +1,4 @@
+/* Menubar */
 .menubar {
   gap: $moo-menubar-gap;
   padding: $moo-menubar-padding;