@wpmoo/ui 1.0.0-rc.8 → 1.0.0

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,12 +51,14 @@
   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;
   }
+
+  &.row {
+    flex-direction: row;
+    gap: 0;
+  }
 }
 
 .field-form {
@@ -82,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;
 }
@@ -117,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;

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