@wpmoo/ui 1.0.0-rc.8 → 1.0.0

package/scss/components/_radio_group.scss

@@ -1,9 +1,108 @@
-// Bootstrap's <legend> ships a heading-sized (1.5rem) default font-size
-// that .form-label doesn't reset: form-label's own font-size is null
-// (inherit) by default, which only works for bare <label> elements that
-// never had a UA font-size of their own. Reset it explicitly, the same
-// fix Bootstrap's own horizontal-form label class applies for the same
-// reason (see vendor Bootstrap's forms/labels partial).
+/* Radio Group */
 .radio-group legend.form-label {
   font-size: inherit;
 }
+
+.form-check-card {
+  position: relative;
+  padding: 0;
+  margin-bottom: 0;
+
+  + .form-check-card {
+    margin-block-start: $spacer * 0.5;
+  }
+
+  > .form-check-input:not(.visually-hidden) {
+    position: absolute;
+    inset-block-start: $spacer * 0.75;
+    inset-inline-end: $spacer * 0.75;
+    float: none;
+    margin: 0;
+  }
+
+  > .form-check-label {
+    display: flex;
+    align-items: center;
+    gap: $spacer * 0.75;
+    padding: $spacer * 0.75;
+    padding-inline-end: $spacer * 1.5 + $form-check-input-width;
+    border: var(--bs-border-width) solid var(--moo-border);
+    border-radius: var(--bs-border-radius);
+    color: var(--moo-foreground);
+    cursor: pointer;
+  }
+
+  &.form-check-card--no-control > .form-check-label {
+    padding-inline-end: $spacer * 0.75;
+  }
+
+  > .form-check-input:not(:disabled) ~ .form-check-label:hover,
+  > .form-check-input:checked ~ .form-check-label {
+    background-color: var(--moo-muted-surface);
+  }
+
+  > .form-check-input:checked ~ .form-check-label {
+    border-color: var(--moo-foreground);
+  }
+
+  > .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-input:focus-visible ~ .form-check-label {
+    border-color: var(--moo-ring);
+    box-shadow: $form-check-input-focus-box-shadow;
+  }
+
+  > .form-check-input.is-invalid ~ .form-check-label {
+    border-color: var(--bs-form-invalid-border-color);
+  }
+
+  > .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: $spacer * 0.25;
+  min-width: 0;
+  line-height: $line-height-sm;
+  overflow-wrap: anywhere;
+
+  > .form-text {
+    margin: 0;
+    font-size: $font-size-sm;
+    line-height: inherit;
+    color: $moo-form-check-card-description-color;
+  }
+}
+
+.form-check-card-title {
+  font-weight: $font-weight-medium;
+}
+
+.form-check-card-media {
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  inline-size: ($font-size-base + $font-size-sm) * $line-height-sm + $spacer * 0.25;
+  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);
+
+  > span {
+    font-size: $font-size-sm;
+    font-weight: $font-weight-semibold;
+  }
+
+  > [data-icon] {
+    width: $font-size-base;
+    height: $font-size-base;
+  }
+}

package/scss/components/_search_trigger.scss

@@ -1,5 +1,4 @@
-// Shared command/search trigger composition. The host supplies the semantic
-// button markup and behavior; Core owns only the reusable visual contract.
+/* Search Trigger */
 .search-trigger {
   width: $moo-search-trigger-width;
   max-width: 100%;

package/scss/components/_select.scss

@@ -1,3 +1,4 @@
+/* Select */
 .form-select {
   option,
   optgroup {

package/scss/components/_separator.scss

@@ -1,9 +1,4 @@
-// Bootstrap's own hr/.vr fake a light divider with a 25%-opacity trick
-// over an inherited/currentColor value (vendor/bootstrap/scss/_reboot.scss,
-// helpers/_vr.scss) instead of a flat border-color fill. That renders
-// visibly darker than --moo-border, the flat divider color already used at
-// full opacity everywhere else a hairline border appears and the closest
-// match to the reference's own flat border-token separator fill.
+/* Separator */
 hr {
   opacity: 1;
   border-top: var(--bs-border-width) solid var(--moo-border);

package/scss/components/_sheet.scss

@@ -1,32 +1,16 @@
-// Sheet is the Moo catalog name for Bootstrap's Offcanvas component, so this
-// partial retunes Bootstrap's own --bs-offcanvas-* custom properties toward
-// the design reference: a narrower fixed width, a quieter border tone, and
-// a real elevation shadow, instead of Bootstrap's own wider, shadowless
-// panel. Scoped to .offcanvas.sheet (see the "sheet" marker class in the
-// sheet() macro) rather than the bare .offcanvas Bootstrap ships, because
-// the Sidebar component's own mobile drawer also carries that bare class
-// and already sets its own --bs-offcanvas-width; a bare-class rule here
-// would silently win or lose depending on import order instead of losing
-// predictably to Sidebar's own more specific root selector.
+/* Sheet */
 .offcanvas.sheet {
   --bs-offcanvas-width: 24rem;
   --bs-offcanvas-border-color: var(--moo-border);
-  // $enable-shadows is off project-wide, which turns Bootstrap's own
-  // box-shadow() mixin into a no-op, so this must be a literal property
-  // consuming a shared token directly.
   box-shadow: var(--bs-box-shadow-lg);
 }
 
 .offcanvas.sheet[tabindex]:focus-visible {
-  // Bootstrap moves focus to the open panel. Preserve its elevation instead
-  // of letting the generic tabindex focus reset flatten the panel.
   outline: none;
   box-shadow: var(--bs-box-shadow-lg);
 }
 
 .offcanvas.sheet .offcanvas-title {
-  // A literal size, not $font-size-base: this project's own base is 14px,
-  // but the reference sheet title sits at a plain, un-scaled 16px regardless.
   font-size: 1rem;
   font-weight: $font-weight-medium;
 }

package/scss/components/_sidebar.scss

@@ -1,5 +1,4 @@
-// Bootstrap has no native sidebar, so this owned selector namespace is split
-// by responsibility while preserving one deterministic emission order.
+/* Sidebar */
 @import "sidebar/base";
 @import "sidebar/menus";
 @import "sidebar/identity";

package/scss/components/_skeleton.scss

@@ -1,17 +1,10 @@
+/* Skeleton */
 .skeleton {
-  // Bootstrap's placeholder utility paints via currentcolor; recolor it here
-  // (border token keeps contrast in both themes) instead of fighting bg directly.
   color: var(--moo-border);
   border-radius: var(--bs-border-radius);
   overflow: hidden;
 }
 
-// Bootstrap's .placeholder is inline-block with vertical-align:middle, meant
-// to sit inline within a line of real text it's replacing. Here it's the
-// sole content of a fixed-size block wrapper instead, where that inline
-// vertical alignment leaves a gap at the top of the wrapper and pushes the
-// bar's own bottom edge past it, clipped by the wrapper's overflow:hidden.
-// Block-level sizing removes the line-box alignment entirely.
 .skeleton > .placeholder {
   display: block;
 }

package/scss/components/_slider.scss

@@ -1,3 +1,4 @@
+/* Slider */
 $slider-thumb-size: $form-range-thumb-width * 0.75;
 $slider-thumb-margin-top: ($progress-height - $slider-thumb-size) * 0.5;
 
@@ -114,8 +115,6 @@ $slider-thumb-margin-top: ($progress-height - $slider-thumb-size) * 0.5;
   box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
 }
 
-// Safari can keep pointer-driven range focus out of :focus-visible, while
-// Bootstrap's native .form-range:focus thumb halo still applies.
 .slider[data-slider-pointer-focus]:not([data-slider-dragging]) .slider-input:focus::-webkit-slider-thumb {
   box-shadow: var(--bs-box-shadow-sm);
 }

package/scss/components/_spinner.scss

@@ -1,10 +1,4 @@
-// The design reference's Spinner is the Lucide loader-circle icon spun with
-// CSS, not Bootstrap's thicker spinner-border ring — render_icon already
-// emits the same stroke-width and line-cap Lucide markup the reference
-// uses, so only sizing
-// and rotation are needed here. The animation name is supplied by the active
-// build entry: Bootstrap's spinner-border for standalone, namespaced Moo for
-// the scoped core.
+/* Spinner */
 .spinner [data-icon] {
   width: $spacer;
   height: $spacer;

package/scss/components/_switch.scss

@@ -1,7 +1,4 @@
-// Bootstrap's .form-switch only overrides width; height still comes from
-// the shared $form-check-input-width (also used by Checkbox and Radio
-// Group), so matching the design reference's taller track needs an
-// explicit height here instead of a shared Bootstrap variable.
+/* Switch */
 .form-switch .form-check-input {
   height: $moo-switch-height;
 }

package/scss/components/_table.scss

@@ -1,6 +1,5 @@
+/* Table */
 .card .table {
-  // Keep the table surface transparent so a table composed inside a card
-  // inherits the card's light/dark surface.
   --bs-table-bg: #{$moo-table-contained-bg};
 }
 

package/scss/components/_tabs.scss

@@ -1,9 +1,4 @@
-// The reference TabsList is a segmented control: a muted rounded track with an
-// inset, shadowed pill marking the active tab. Bootstrap's pills nav has
-// no shared track and colors the active pill with $primary directly, so
-// this styling is scoped to the tabs-list wrapper instead of the shared
-// pills class — Navigation's own pills variant already owns that class
-// and must keep its plain Bootstrap look.
+/* Tabs */
 .tabs-list {
   display: inline-flex;
   gap: $moo-tabs-list-gap;
@@ -16,17 +11,6 @@
   padding: $moo-tabs-trigger-padding-y $moo-tabs-trigger-padding-x;
   font-size: $font-size-base;
   font-weight: 500;
-  // var(--moo-muted-foreground) on the track's own var(--moo-muted-surface)
-  // background measures 4.40:1 in light mode, under the 4.5:1 WCAG AA
-  // minimum for normal text (axe caught this in the certification fixture).
-  // var(--bs-secondary-color) is not a usable substitute here -- Moo UI's
-  // own theme sets --bs-secondary-color: var(--moo-muted-foreground)
-  // (scss/themes/_root.scss), so it resolves to the exact same
-  // failing color. var(--bs-secondary-text-emphasis) is a different,
-  // untouched Bootstrap token (Moo UI does not override it) built for
-  // accessible colored text against a tinted "subtle" surface -- the same
-  // category of fix the Kbd contrast defect used -- and measures 5.55:1
-  // light / 14.03:1 dark against this track's own background.
   color: var(--bs-secondary-text-emphasis);
   border-radius: var(--bs-border-radius);
   cursor: default;
@@ -104,11 +88,6 @@
   pointer-events: none;
 }
 
-// Bootstrap hides inactive panes with display:none, so the pane height
-// changes the moment a shorter or taller tab becomes active — the
-// surrounding page jumps to the new height on every switch. Stacking every
-// pane in the same grid cell sizes the row to the tallest pane once, so
-// switching only toggles visibility, never the container's height.
 .tab-content {
   display: grid;
   width: 100%;
@@ -126,8 +105,6 @@
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
-  // Slightly longer than Bootstrap's .15s fade so the content handoff feels
-  // intentional without adding any positional movement.
   transition: opacity 0.16s ease, visibility 0s linear 0.16s;
 }
 

package/scss/components/_textarea.scss

@@ -1,3 +1,4 @@
+/* Textarea */
 textarea.form-control:not(.form-control-sm, .form-control-lg) {
   padding: $input-btn-padding-y-lg $input-btn-padding-x;
 }

package/scss/components/_toast.scss

@@ -1,6 +1,4 @@
-// Bootstrap owns Toast markup, lifecycle classes, placement utilities, and
-// autohide behavior. This partial only retunes the native surface and opts
-// an explicitly indexed bottom-end container into the catalog deck layout.
+/* Toast */
 .toast {
   --bs-toast-border-radius: var(--bs-border-radius-lg);
   --bs-toast-border-color: var(--moo-border);
@@ -58,7 +56,6 @@
   --moo-toast-stack-enter-y: #{$moo-toast-stack-enter-y};
 }
 
-// Without runtime indexes, the container remains readable Bootstrap flow.
 .toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active] {
   bottom: 1rem !important;
   inset-inline-end: 1rem !important;

package/scss/components/_toggle_group.scss

@@ -1,6 +1,4 @@
-// Toggle Group uses Bootstrap's native .btn-check + label.btn contract, but
-// selected state should change in place instead of using the generic button
-// press nudge.
+/* Toggle Group */
 .toggle-group > .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
   transform: none;
 }

package/scss/components/_tooltip.scss

@@ -1,9 +1,4 @@
-// Retuned against the design reference's tooltip (bg-foreground
-// text-background, px-3 py-1.5, text-xs, rounded-md, fully opaque,
-// max-w-xs): Bootstrap's own
-// defaults are narrower, tighter, and dimmed to 90% opacity. All four
-// overrides route through Bootstrap's existing custom properties, so no new
-// selectors or hardcoded colors are introduced.
+/* Tooltip */
 .tooltip {
   --bs-tooltip-max-width: 20rem;
   --bs-tooltip-padding-x: 0.75rem;
@@ -17,9 +12,6 @@
   line-height: 1.333;
 }
 
-// Popper owns the wrapper transform for placement. Animate only the bubble
-// surface so the tooltip opens with the reference's subtle zoom/slide without
-// disturbing Bootstrap positioning.
 .tooltip.fade .tooltip-inner {
   transition: transform var(--moo-tooltip-motion-duration) var(--moo-tooltip-motion-easing);
   transform: scale(var(--moo-tooltip-motion-scale));
@@ -59,12 +51,6 @@
   }
 }
 
-// Bootstrap's tooltip bubble is fully token-driven already (see the vendored
-// Bootstrap tooltip partial), so this partial only owns the plain link
-// trigger's own text color. Unstyled, it falls through to Bootstrap's
-// un-themed --bs-link-color, which reads too low-contrast on dark surfaces;
-// a dotted underline also reads as "hover for more info" rather than a real
-// navigational link.
 .tooltip-trigger {
   color: var(--moo-foreground);
   text-decoration-line: underline;
@@ -73,11 +59,6 @@
   text-underline-offset: 0.2em;
 }
 
-// Tooltip shortcut hints render the Kbd component's native <kbd> element.
-// The catalog tooltip initializer extends Bootstrap's sanitizer allowlist
-// with the kbd tag so it survives data-bs-html sanitization; styling comes
-// from the shared Kbd component and Bootstrap's own reboot. A shortcut chip
-// after trailing prose keeps a readable gap from the surrounding text.
 .tooltip-inner kbd {
   margin-inline-start: $kbd-padding-x;
 }

package/scss/components/sidebar/_base.scss

@@ -1,6 +1,3 @@
-// Bootstrap has no native sidebar, so this owned sidebar selector namespace
-// provides the inner surface and anatomy. The App layout owns the outer
-// <aside>, placement, width, visual variant, and collapse mode.
 
 .sidebar-inner {
   position: sticky;
@@ -84,10 +81,6 @@
   font-weight: $font-weight-medium;
 }
 
-// Reserve room so a long label doesn't run under the absolutely positioned
-// group action button (see .sidebar-group-action below). A descendant match
-// covers both a group action placed directly in .sidebar-group and one
-// nested inside .sidebar-group-content alongside the label.
 .sidebar-group:has(.sidebar-group-action) .sidebar-group-label {
   padding-inline-end: $spacer * 2.5;
 }

package/scss/components/sidebar/_collapsed.scss

@@ -1,6 +1,3 @@
-// Collapsed-to-icon inner state (desktop). App owns the outer shell width,
-// rail, stacking, and responsive placement; Sidebar owns the inner content
-// visibility and flyout anatomy.
 
 @include media-breakpoint-up(lg) {
   [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-group-label,
@@ -18,9 +15,6 @@
   }
 
   [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"]:has(.sidebar-menu-button[data-bs-toggle="dropdown"][aria-expanded="true"]) {
-    // Keep the collapsed identity trigger above sticky page chrome too. This
-    // selector is more specific than the app-root rule above and otherwise
-    // would lower the Sidebar back to the dropdown layer.
     z-index: $zindex-fixed + 1;
   }
 

package/scss/components/sidebar/_identity.scss

@@ -1,4 +1,3 @@
-// Leading brand/avatar tiles for the team switcher and user rows.
 .sidebar-brand-mark {
   display: inline-grid;
   place-items: center;

package/scss/components/sidebar/_menus.scss

@@ -1,4 +1,3 @@
-// Menus ------------------------------------------------------------------
 .sidebar-menu {
   display: flex;
   flex-direction: column;
@@ -14,8 +13,6 @@
   position: relative;
 }
 
-// Auto-detect a trailing action so a public consumer doesn't need to
-// remember an extra class for the button to reserve room for it.
 .sidebar-menu-item:has(> .sidebar-menu-action) > .sidebar-menu-button {
   padding-inline-end: $spacer * 2.5;
 }
@@ -67,7 +64,6 @@
   padding: $spacer * 0.5;
 }
 
-// A fixed brand lockup, not an interactive control: no hover affordance.
 .sidebar-menu-button--static:hover {
   background: transparent;
 }
@@ -153,10 +149,6 @@
 .sidebar-menu-sub {
   gap: 0;
   margin: 0;
-  // Aligns the indent line with the center of the parent disclosure
-  // button's icon (padding-inline-start + half the icon width), so the
-  // line reads as a continuation of the icon column above it instead of
-  // sitting flush with the group edge.
   margin-inline-start: $spacer * 0.5 + $font-size-base * 0.5;
   padding-inline-start: $spacer * 0.5;
   border-inline-start: var(--bs-border-width) solid var(--moo-border);
@@ -193,8 +185,6 @@
   color: var(--moo-sidebar-foreground);
 }
 
-// Overlays the group's top-right corner, vertically centered against the
-// group label row ($moo group padding + half the label/button height delta).
 .sidebar-group-action {
   position: absolute;
   z-index: 1;
@@ -202,8 +192,6 @@
   inset-inline-end: $spacer * 0.5;
 }
 
-// Overlays the trailing edge of the menu row it belongs to, matching
-// .sidebar-menu-action's slot so both compose the same visual contract.
 .sidebar-menu-badge {
   position: absolute;
   inset-inline-end: $spacer * 0.25;
@@ -214,7 +202,6 @@
   pointer-events: none;
 }
 
-// Reserve room so a long title doesn't run under the badge.
 .sidebar-menu-item:has(> .sidebar-menu-badge) > .sidebar-menu-button {
   padding-inline-end: $spacer * 2.5;
 }
@@ -223,10 +210,6 @@
   padding-inline-end: $spacer * 2.5;
 }
 
-// A menu item can combine a trailing action with a badge, such as an unread
-// count beside a "..." overflow menu. Both default to the same trailing
-// slot, so shift the badge inward past the action's footprint and reserve
-// extra title space for the pair instead of just one accessory's width.
 .sidebar-menu-item:has(> .sidebar-menu-action) > .sidebar-menu-badge {
   inset-inline-end: $spacer * 2;
 }

package/scss/foundations/_backdrop.scss

@@ -1,16 +1,3 @@
-// Bootstrap owns the overlay lifecycle for Dialog / Alert Dialog (Modal) and
-// Sheet (Offcanvas). Moo only retunes the native backdrop appearance through a
-// shared token primitive, so every opening surface gets the same treatment
-// without component-specific backdrop selectors.
-//
-// Modal waits for the real `.modal-backdrop` transition before it starts the
-// dialog panel. Keep that lifecycle element visually inert and animate a
-// pseudo-element instead: the panel and visible blur/dim can then start from
-// the same Bootstrap motion token, while the native backdrop is still retained
-// long enough to fade the visual layer out on close. Use keyframe animation
-// rather than a pseudo-element transition: transitionend events from a pseudo
-// element bubble to its originating backdrop and would make Bootstrap wait for
-// the visual layer before showing the panel.
 @mixin moo-overlay-backdrop-appearance {
   --#{$prefix}backdrop-opacity: var(--moo-overlay-backdrop-opacity, #{$moo-overlay-backdrop-opacity});
   opacity: 1;
@@ -22,16 +9,10 @@
     opacity: 1;
   }
 
-  // Bootstrap reads this duration to decide when to reveal a Modal panel.
-  // Keep entry instant; the visual transition below belongs to ::before.
   &.show {
     transition: none;
   }
 
-  // On close, Bootstrap keeps the lifecycle layer in the DOM for this token
-  // duration while ::before fades out. Color has no visible effect on the
-  // empty backdrop but supplies Bootstrap's native transition lifecycle
-  // without multiplying the pseudo-element's visual fade.
   &.fade:not(.show) {
     color: var(--bs-body-color, currentcolor);
     transition: color var(--moo-overlay-motion-duration, #{$moo-overlay-motion-duration}) ease-out;
@@ -50,9 +31,6 @@
 }
 
 @mixin moo-overlay-backdrop-shown {
-  // Bootstrap Modal routes opacity through --bs-backdrop-opacity, but
-  // Offcanvas 5.3 compiles the same state to a literal .5. Restate the shared
-  // token on both native show selectors so Dialog and Sheet dim equally.
   &::before {
     animation: moo-overlay-backdrop-enter var(--moo-overlay-motion-duration, #{$moo-overlay-motion-duration}) ease-out both;
   }
@@ -104,10 +82,6 @@
   @include moo-overlay-backdrop-shown;
 }
 
-// Backdrops that are portaled into a resolved owner still need to outrank
-// Bootstrap's scoped `.fade` and `.show` rules. Entry points include this
-// mixin inside their single native Moo scope; the global rules above remain
-// available for hosts that intentionally keep Bootstrap's body-level portal.
 @mixin moo-overlay-backdrop-scoped {
   .modal-backdrop,
   .offcanvas-backdrop {

package/scss/foundations/_focus.scss

@@ -1,24 +1,8 @@
-// Bootstrap form labels and check/radio/switch labels sit inside clickable
-// control surfaces in Moo UI, so keep them from selecting text during pointer
-// interaction without making Field own every label selector.
 .form-label,
 .form-check-label {
   user-select: none;
 }
 
-// One shared focus-visible recipe for essentially every focusable surface --
-// border swaps to the ring color and a 3px/50%-opacity ring surrounds the
-// control. Matches the reference exactly, which repeats this same
-// identical recipe (border-ring + ring-[3px] + ring-ring/50) across buttons,
-// links, dialog/dropdown/popover/select triggers, tabs, and toggle-group
-// items as well as native form controls, rather than a different treatment
-// per component family. Placed ahead of the is-invalid rule below so that
-// invalid controls can keep the same ring width while swapping only the
-// color. The explicit
-// outline: 0 replaces the browser's own default focus ring (an amber
-// auto-style outline on Chromium) that would otherwise show through on any
-// element -- plain sidebar/nav <a> tags included -- that Bootstrap doesn't
-// already reset at the .btn level.
 :is(.btn, a, button, summary, [tabindex]):not(input, textarea, select):focus-visible,
 :is(.form-control, .form-select, .form-check-input):focus-visible {
   border-color: var(--moo-ring);
@@ -26,36 +10,18 @@
   box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
 }
 
-// Buttons keep their hover/open treatment after pointer clicks; the ring is
-// reserved for keyboard focus on the resting control.
 .btn:focus-visible:hover,
 .btn.show:focus-visible {
   border-color: var(--bs-btn-hover-border-color);
   box-shadow: none;
 }
 
-// Mouse-triggered focus keeps the resting border and shows no ring, same
-// as every other interactive surface on the site (.form-check-input's own
-// equivalent lives in components/_checkbox.scss, next to its checked/
-// indeterminate border-color variants).
 .form-control:focus:not(:focus-visible),
 .form-select:focus:not(:focus-visible) {
   border-color: var(--moo-border);
   box-shadow: none;
 }
 
-// Bootstrap's own .page-link:focus (vendor/bootstrap/scss/_pagination.scss)
-// applies its background/color/outline/box-shadow on any focus, including
-// mouse clicks -- unlike every other control here, it was never gated
-// behind :focus-visible, so clicking a page number (which also makes it the
-// active page) showed a ring the reference only shows for keyboard focus.
-// The ring/outline never carries active-state meaning (Bootstrap's own
-// ".active > &" rule never sets box-shadow), so it's always safe to drop on
-// non-keyboard focus, active page included. color/bg/border only revert to
-// resting when the page isn't the current one, so the active page keeps its
-// own look while it holds mouse focus. Real keyboard focus still gets the
-// shared ring above, since .page-link is a <button> and already matches
-// that selector.
 .page-link:focus:not(:focus-visible) {
   outline: 0;
   box-shadow: none;
@@ -67,10 +33,6 @@
   border-color: var(--bs-pagination-border-color);
 }
 
-// Bootstrap shows validation glow only on :focus, while the reference keeps a
-// subtle destructive ring visible for invalid controls. Keep it on native
-// form-control/form-select classes so Input, Select, Field, and Combobox share
-// the same validation affordance.
 .form-control.is-invalid,
 .form-control.is-invalid:focus,
 .was-validated .form-control:invalid,
@@ -82,12 +44,6 @@
   box-shadow: 0 0 0 #{$moo-form-focus-ring-width} var(--moo-form-invalid-ring-color);
 }
 
-// .btn-check toggle buttons (Toggle Group) put focus on the hidden input,
-// never the visible label, so the rule above can never match them; only
-// variants generated through Bootstrap's button-variant mixin (real theme
-// colors) get a working native focus glow, so btn-ghost/outline consumers
-// would otherwise show no ring at all. Share the same ring here instead of
-// patching --bs-btn-focus-box-shadow per variant.
 .btn-check:focus:not(:focus-visible) + .btn {
   outline: 0;
   box-shadow: none;
@@ -103,15 +59,6 @@
   box-shadow: none;
 }
 
-// Compound controls whose native input isn't the outer visual box (Combobox's
-// chip row, Input Group's addon-wrapped control) need the same ring painted
-// on the wrapper instead of the child. Kept here rather than in each
-// component's own partial so every focus-ring declaration in the project
-// stays in one file instead of the recipe being copy-pasted per component --
-// component partials contract-test that their own box-shadow declarations
-// stick to Bootstrap's native primitives (test_catalog.py's
-// test_component_styles_use_bootstrap_visual_primitives), and this recipe
-// isn't one of those.
 .combobox-chips:focus-within {
   border-color: var(--moo-ring);
   outline: 0;
@@ -124,9 +71,6 @@
   box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
 }
 
-// Validation input groups are also one visual control. Keep feedback outside the
-// grouped control, then paint the destructive ring on the wrapper and suppress
-// the child ring.
 .input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))):has(> :is(.form-control, .form-select).is-invalid),
 .was-validated .input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))):has(> :is(.form-control, .form-select):invalid) {
   border-color: var(--bs-form-invalid-border-color);