@wpmoo/ui 1.0.0-rc.3 → 1.0.0-rc.4

package/scss/components/_input_group.scss

@@ -0,0 +1,201 @@
+// 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: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;
+}
+
+.input-group.rounded-pill:not(:has(> .form-control[type="file"])) {
+  --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);
+}
+
+.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])) > .form-control {
+  min-height: 0;
+}
+
+.input-group > textarea.form-control {
+  resize: none;
+}
+
+.input-group:not(:has(> .form-control[type="file"])) > :not(:first-child):not([class~="dropdown-menu"]):not([class~="valid-tooltip"]):not([class~="valid-feedback"]):not([class~="invalid-tooltip"]):not([class~="invalid-feedback"]) {
+  margin: 0;
+}
+
+.input-group:not(:has(> .form-control[type="file"])) > :not(ul) {
+  border: 0;
+  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);
+}
+
+.input-group:not(:has(> .form-control[type="file"])) > :is(:last-child, :nth-last-child(2):has(+ .dropdown-menu)):not(ul) {
+  border-start-end-radius: var(--moo-input-group-border-radius);
+  border-end-end-radius: var(--moo-input-group-border-radius);
+}
+
+.input-group > :is(button, a) {
+  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;
+  position: relative;
+  isolation: isolate;
+  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;
+  z-index: -1;
+  content: "";
+  border-radius: var(--moo-input-group-border-radius);
+  background-color: var(--moo-muted-surface);
+  opacity: 0;
+  transition: opacity $transition-fade;
+}
+
+.input-group > .btn-ghost:hover::before,
+.input-group > .btn-ghost:is(.show, [aria-expanded="true"])::before {
+  opacity: 1;
+}
+
+.input-group > .btn-ghost:is(.show, [aria-expanded="true"]) {
+  color: var(--bs-btn-active-color);
+}
+
+.input-group > .btn-ghost[aria-pressed="true"] {
+  color: var(--bs-btn-active-color);
+}
+
+.input-group > .btn-ghost[aria-pressed="true"]::before {
+  opacity: 1;
+}
+
+.input-group > .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
+  transform: none;
+}
+
+.input-group > :is(.btn-xs, .btn-icon-xs) {
+  --bs-btn-padding-y: #{$spacer * 0.125};
+  --bs-btn-padding-x: #{$spacer * 0.375};
+  --bs-btn-line-height: #{$spacer * 0.875};
+}
+
+.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 {
+  padding-inline-end: 0;
+}
+
+.input-group > .input-group-text:first-child + .form-control {
+  padding-inline-start: $input-btn-padding-y;
+}
+
+.input-group > .input-group-text:last-child {
+  padding-inline-start: 0;
+}
+
+.input-group > .form-control:has(+ .input-group-text:last-child) {
+  padding-inline-end: $input-btn-padding-y;
+}
+
+.input-group-text > [data-icon] {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+  color: var(--bs-secondary-color);
+}
+
+.input-group:has(> [data-align]) {
+  height: auto;
+}
+
+.input-group > [data-align] {
+  display: flex;
+  flex-basis: 100%;
+  align-items: center;
+  width: 100%;
+  padding: $input-btn-padding-y $input-padding-x $input-padding-y-lg;
+}
+
+.input-group > [data-align="block-start"] {
+  order: -1;
+}
+
+.input-group > [data-align] > .input-group-text {
+  padding: 0;
+  color: var(--bs-secondary-color);
+  border: 0;
+  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

@@ -0,0 +1,10 @@
+kbd {
+  display: inline-flex;
+  height: $moo-chip-height;
+  min-width: $moo-chip-height;
+  align-items: center;
+  justify-content: center;
+  font-family: $font-family-sans-serif;
+  line-height: $spacer;
+  font-weight: $font-weight-medium;
+}

package/scss/components/_menubar.scss

@@ -0,0 +1,16 @@
+.menubar {
+  gap: $moo-menubar-gap;
+  padding: $moo-menubar-padding;
+}
+
+.menubar .dropdown-menu {
+  z-index: $zindex-dropdown;
+}
+
+.menubar [data-bs-toggle="dropdown"].show,
+.menubar .dropdown-toggle.show {
+  --bs-btn-color: var(--moo-foreground);
+
+  color: var(--bs-btn-color);
+  font-weight: $font-weight-medium;
+}

package/scss/components/_navigation.scss

@@ -0,0 +1,41 @@
+.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);
+}
+
+.nav-pills {
+  --bs-nav-pills-border-radius: var(--bs-border-radius);
+  --bs-nav-pills-link-active-color: var(--moo-foreground);
+  --bs-nav-pills-link-active-bg: var(--moo-muted-surface);
+}
+
+.nav-link {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacer * 0.5;
+}
+
+.nav.flex-column .nav-link {
+  width: 100%;
+}
+
+.nav-pills .nav-link:not(.active, .disabled):hover {
+  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;
+}
+
+.nav-link [data-icon] {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+}

package/scss/components/_pagination.scss

@@ -0,0 +1,70 @@
+// 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.
+.page-link {
+  $page-link-square-size: calc(
+    #{$moo-chip-height} + #{$moo-pagination-square-inset} + var(--bs-pagination-border-width) * 2
+  );
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  gap: $spacer * 0.375;
+  min-width: $page-link-square-size;
+  min-height: $page-link-square-size;
+  line-height: 1.25rem;
+  font-weight: 500;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.page-link[aria-label]:has(> span:not(.visually-hidden):not(.d-none)):has([data-icon="inline-start"]) {
+  padding-inline-start: $spacer * 0.375;
+  padding-inline-end: $spacer * 0.625;
+}
+
+.page-link[aria-label]:has(> span:not(.visually-hidden):not(.d-none)):has([data-icon="inline-end"]) {
+  padding-inline-start: $spacer * 0.625;
+  padding-inline-end: $spacer * 0.375;
+}
+
+@include media-breakpoint-up(sm) {
+  .page-link[aria-label]:has(> .d-sm-inline):has([data-icon="inline-start"]) {
+    padding-inline-start: $spacer * 0.375;
+    padding-inline-end: $spacer * 0.625;
+  }
+
+  .page-link[aria-label]:has(> .d-sm-inline):has([data-icon="inline-end"]) {
+    padding-inline-start: $spacer * 0.625;
+    padding-inline-end: $spacer * 0.375;
+  }
+}
+
+.page-link:has([data-icon]):not(:has(> span:not(.visually-hidden))) {
+  padding-inline: 0;
+}
+
+.page-link [data-icon] {
+  width: $spacer;
+  height: $spacer;
+  flex: 0 0 auto;
+}
+
+.page-item:not(.disabled) .page-link:active {
+  transform: translateY($moo-control-active-translate-y);
+}
+
+.page-item.disabled {
+  opacity: var(--moo-disabled-control-opacity);
+}

package/scss/components/_popover.scss

@@ -0,0 +1,47 @@
+// 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 {
+  --bs-popover-border-radius: var(--bs-border-radius-lg);
+  --bs-popover-border-color: var(--moo-border);
+  --bs-popover-header-bg: var(--bs-popover-bg);
+  --bs-popover-header-color: var(--bs-popover-body-color);
+  --bs-popover-header-padding-x: #{$spacer * 0.625};
+  --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);
+}
+
+.popover-header {
+  padding-bottom: 0;
+  border-bottom: 0;
+  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

@@ -0,0 +1,7 @@
+// 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 {
+  --bs-progress-bar-color: var(--moo-primary-foreground);
+  --bs-progress-bar-bg: var(--moo-primary);
+}

package/scss/components/_radio_group.scss

@@ -0,0 +1,9 @@
+// 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 legend.form-label {
+  font-size: inherit;
+}

package/scss/components/_select.scss

@@ -0,0 +1,7 @@
+.form-select {
+  option,
+  optgroup {
+    color: var(--bs-body-color);
+    background-color: var(--bs-body-bg);
+  }
+}

package/scss/components/_separator.scss

@@ -0,0 +1,15 @@
+// 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.
+hr {
+  opacity: 1;
+  border-top: var(--bs-border-width) solid var(--moo-border);
+}
+
+.vr {
+  opacity: 1;
+  background-color: var(--moo-border);
+}

package/scss/components/_sheet.scss

@@ -0,0 +1,32 @@
+// 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.
+.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

@@ -0,0 +1,7 @@
+// Bootstrap has no native sidebar, so this owned selector namespace is split
+// by responsibility while preserving one deterministic emission order.
+@import "sidebar/layout";
+@import "sidebar/menus";
+@import "sidebar/identity";
+@import "sidebar/inset";
+@import "sidebar/collapsed";

package/scss/components/_skeleton.scss

@@ -0,0 +1,17 @@
+.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;
+}