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

package/scss/components/_navigation.scss

@@ -1,7 +1,23 @@
+/* Navigation */
+$nav-step-icon-size: $spacer * 2 !default;
+$nav-step-gap: $spacer * 0.25 !default;
+$nav-step-border-color: var(--bs-border-color) !default;
+$nav-step-completed-border-color: var(--moo-primary) !default;
+$nav-link-description-color: color-mix(in srgb, var(--moo-muted-foreground) 95%, var(--moo-foreground)) !default;
+
 .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: #{$nav-link-description-color};
+}
+
+.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 {
@@ -24,12 +40,6 @@
   background-color: var(--moo-muted-surface);
 }
 
-// The active pill's own background (--bs-nav-pills-link-active-bg above)
-// is a persistent class-based state, so it stays lit even while a
-// different pill is hovered -- two pills highlighted at once, competing
-// for attention. Suppress it only while another pill in the same group is
-// hovered, so exactly one pill is ever highlighted: whichever the cursor
-// is over, or the active one when nothing is hovered.
 .nav-pills:has(.nav-link:hover) .nav-link.active:not(:hover) {
   background-color: transparent;
 }
@@ -39,3 +49,63 @@
   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: #{$nav-step-icon-size};
+  --bs-nav-step-gap: #{$nav-step-gap};
+
+  gap: var(--bs-nav-step-gap);
+
+  .nav-item {
+    position: relative;
+  }
+
+  .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 $nav-step-border-color;
+    content: "";
+    pointer-events: none;
+  }
+
+  .nav-item:first-child::before {
+    inset-block-start: 50%;
+  }
+
+  .nav-item:last-child::before {
+    inset-block-end: 50%;
+  }
+
+  .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 $nav-step-border-color;
+    border-radius: var(--bs-border-radius);
+  }
+
+  .nav-link.disabled .nav-link-icon {
+    color: var(--moo-disabled-foreground);
+  }
+
+  .nav-item[data-nav-completed="true"] .nav-link-icon {
+    color: var(--moo-primary-foreground);
+    background-color: var(--moo-primary);
+    border-color: $nav-step-completed-border-color;
+  }
+}

package/scss/components/_pagination.scss

@@ -1,16 +1,4 @@
-// Bootstrap's page-link class has no icon-sizing contract; unconstrained
-// SVGs render at an oversized default (~55px), breaking Previous/Next and
-// the ellipsis item. Size and align icons the same way other components
-// with inline icons already constrain their own [data-icon] children.
-//
-// Bootstrap's own padding is asymmetric (more horizontal than vertical), so
-// a single digit or icon renders narrower than it is tall -- a squashed
-// look next to the surrounding icon-only buttons. min-width/min-height (not
-// width/height) square up short content without constraining longer labels
-// like the optional "Previous"/"Next" text. Both are needed, not just
-// width: the 1rem icon glyph is shorter than a text digit's own line-height,
-// so icon-only page-links (Prev/Next/First/Last) would otherwise render a
-// couple pixels shorter than the numbered page-links next to them.
+/* Pagination */
 .page-link {
   $page-link-square-size: calc(
     #{$moo-chip-height} + #{$moo-pagination-square-inset} + var(--bs-pagination-border-width) * 2

package/scss/components/_popover.scss

@@ -1,9 +1,4 @@
-// Bootstrap's popover is fully token-driven already (see the vendored
-// Bootstrap popover partial), so this partial only retunes those same
-// --bs-popover-* custom properties toward the design reference: a single
-// borderless-feeling card (no two-tone header bar, no directional arrow,
-// larger radius, quieter shadow, uniform padding) instead of Bootstrap's
-// own outlined-header-plus-arrow look.
+/* Popover */
 .popover {
   --bs-popover-border-radius: var(--bs-border-radius-lg);
   --bs-popover-border-color: var(--moo-border);
@@ -13,23 +8,10 @@
   --bs-popover-header-padding-y: #{$spacer * 0.625};
   --bs-popover-body-padding-x: #{$spacer * 0.625};
   --bs-popover-body-padding-y: #{$spacer * 0.625};
-  // The reference popover body/title both sit at text-sm (14px); Bootstrap's
-  // own $popover-font-size default is $font-size-sm, a notch smaller here.
   --bs-popover-font-size: 0.875rem;
   line-height: 1.43;
-  // The reference always renders a fixed 320px panel regardless of content,
-  // unlike Bootstrap's own shrink-to-fit-up-to-max-width sizing; max-width
-  // must move too, or Bootstrap's own 276px default clips the wider fixed
-  // width straight back down.
   --bs-popover-max-width: 20rem;
   width: 20rem;
-  // $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. None of the shared tiers land
-  // exactly on the shadow-md weight the design reference uses; -lg is the
-  // closer of the two available neighbors (component styles may not
-  // hardcode raw color values, only reference existing --bs-*box-shadow*
-  // tokens, so a one-off value here is not an option).
   box-shadow: var(--bs-box-shadow-lg);
 }
 
@@ -39,9 +21,6 @@
   font-weight: $font-weight-medium;
 }
 
-// The design reference's popover has no directional arrow; Bootstrap ships
-// one by default, nested under .popover so it must be matched at the same
-// specificity here.
 .popover .popover-arrow {
   display: none;
 }

package/scss/components/_progress.scss

@@ -1,6 +1,4 @@
-// Bootstrap exposes progress fill as a component CSS variable. Keep the track
-// geometry native, but bind the fill to the same runtime primary token used by
-// buttons, checked controls, and active selection affordances.
+/* Progress */
 .progress {
   --bs-progress-bar-color: var(--moo-primary-foreground);
   --bs-progress-bar-bg: var(--moo-primary);

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/_toc.scss

@@ -0,0 +1,48 @@
+/* Table of contents */
+[data-toc] > .fw-semibold {
+  padding-inline-start: calc(#{$nav-link-padding-x} - var(--bs-border-width));
+}
+
+[data-toc]:has(> .nav) {
+  position: relative;
+  border-inline-start: calc(var(--bs-border-width) * 0.5) solid var(--bs-border-color);
+}
+
+[data-toc][data-toc-marker]::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: calc(var(--bs-border-width) * -1);
+  block-size: var(--moo-toc-marker-height);
+  border-inline-start: calc(var(--bs-border-width) * 3) solid var(--moo-primary);
+  transform: translateY(var(--moo-toc-marker-offset));
+  pointer-events: none;
+  @include transition($transition-base);
+}
+
+[data-toc] > .nav .nav-link {
+  display: flex;
+  position: relative;
+  margin-inline-start: calc(var(--bs-border-width) * -1);
+  color: var(--moo-muted-foreground);
+}
+
+[data-toc] > .nav .nav-link::before {
+  content: "";
+  position: absolute;
+  inset-block: var(--bs-nav-link-padding-y);
+  inset-inline-start: 0;
+  border-inline-start: calc(var(--bs-border-width) * 3) solid transparent;
+}
+
+[data-toc] > .nav .nav-link.active {
+  color: var(--moo-foreground);
+}
+
+[data-toc] > .nav .nav-link.active::before {
+  border-inline-start-color: var(--moo-primary);
+}
+
+[data-toc][data-toc-marker] > .nav .nav-link.active::before {
+  border-inline-start-color: transparent;
+}

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;