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

package/scss/components/_datepicker.scss

@@ -0,0 +1,236 @@
+.moo-datepicker {
+  --moo-datepicker-width: #{$moo-datepicker-width};
+  --moo-datepicker-popover-offset: #{$moo-datepicker-popover-offset};
+
+  position: relative;
+  width: 100%;
+  max-width: var(--moo-datepicker-width);
+}
+
+.moo-datepicker__trigger {
+  width: 100%;
+  justify-content: flex-start;
+  text-align: start;
+}
+
+.moo-datepicker__trigger [data-datepicker-label] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.moo-datepicker__trigger.is-invalid {
+  border-color: var(--bs-form-invalid-border-color);
+  color: var(--bs-form-invalid-color);
+}
+
+.moo-datepicker-time-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: $spacer * .75;
+  width: 100%;
+}
+
+.moo-datepicker-time-row > :first-child {
+  min-width: 0;
+}
+
+.moo-datepicker-time {
+  flex: 0 0 auto;
+  width: calc(#{$moo-datepicker-width} / 2);
+  max-width: 9rem;
+}
+
+.moo-datepicker__popover {
+  position: absolute;
+  inset-block-start: calc(100% + var(--moo-datepicker-popover-offset));
+  inset-inline-start: 0;
+  z-index: $zindex-dropdown;
+  width: max-content;
+  max-width: calc(100vw - #{$spacer});
+  padding: $moo-datepicker-padding;
+  border: var(--bs-border-width) solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius-lg);
+  background: var(--bs-body-bg);
+  color: var(--bs-body-color);
+  box-shadow: var(--bs-box-shadow-lg);
+}
+
+.moo-datepicker__popover[hidden] {
+  display: none !important;
+}
+
+.moo-datepicker__popover.show {
+  display: block;
+}
+
+.moo-datepicker__popover[data-datepicker-placement] {
+  inset: auto;
+}
+
+.moo-calendar {
+  --moo-datepicker-day-size: #{$moo-datepicker-day-size};
+  --moo-datepicker-gap: #{$moo-datepicker-gap};
+  --moo-datepicker-padding: #{$moo-datepicker-padding};
+  --moo-datepicker-preset-gap: #{$moo-datepicker-preset-gap};
+  --moo-datepicker-day-border-radius: #{$moo-datepicker-day-border-radius};
+  --moo-datepicker-day-range-joined-border-radius: #{$moo-datepicker-day-range-joined-border-radius};
+
+  width: calc(var(--moo-datepicker-day-size) * 7 + var(--moo-datepicker-gap) * 6);
+  max-width: 100%;
+  color: var(--bs-body-color);
+}
+
+.moo-calendar__header {
+  display: grid;
+  grid-template-columns: var(--moo-datepicker-day-size) minmax(0, 1fr) var(--moo-datepicker-day-size);
+  align-items: center;
+  gap: var(--moo-datepicker-gap);
+  margin-bottom: $spacer * 0.75;
+}
+
+.moo-calendar__caption {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: center;
+  gap: var(--moo-datepicker-gap);
+  font-weight: $font-weight-medium;
+}
+
+.moo-calendar__select {
+  min-width: 0;
+  height: $input-height-sm;
+  padding: 0 $spacer * 0.375;
+  border: var(--bs-border-width) solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius-sm);
+  background: var(--bs-body-bg);
+  color: var(--bs-body-color);
+  font: inherit;
+}
+
+.moo-calendar__nav {
+  color: var(--bs-secondary-color);
+}
+
+.moo-calendar__nav:hover,
+.moo-calendar__nav:focus-visible {
+  color: var(--bs-body-color);
+}
+
+.moo-calendar__nav-icon {
+  font-size: $font-size-lg;
+  line-height: 1;
+}
+
+.moo-calendar__weekdays,
+.moo-calendar__week {
+  display: grid;
+  grid-template-columns: repeat(7, var(--moo-datepicker-day-size));
+  gap: var(--moo-datepicker-gap);
+}
+
+.moo-calendar__week + .moo-calendar__week {
+  margin-top: var(--moo-datepicker-gap);
+}
+
+.moo-calendar__weekdays {
+  margin-bottom: var(--moo-datepicker-gap);
+}
+
+.moo-calendar__weekday {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--moo-datepicker-day-size);
+  height: $spacer * 1.5;
+  color: var(--bs-secondary-color);
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
+}
+
+.moo-calendar__cell {
+  position: relative;
+  width: var(--moo-datepicker-day-size);
+  height: var(--moo-datepicker-day-size);
+}
+
+.moo-calendar__day {
+  position: relative;
+  display: inline-flex;
+  width: var(--moo-datepicker-day-size);
+  height: var(--moo-datepicker-day-size);
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: var(--moo-datepicker-day-border-radius);
+  background: transparent;
+  color: var(--bs-body-color);
+  font: inherit;
+  line-height: 1;
+}
+
+.moo-calendar__day:hover:not(:disabled),
+.moo-calendar__day:focus-visible {
+  background: var(--moo-muted-surface);
+  outline: 0;
+}
+
+.moo-calendar__day:focus-visible {
+  box-shadow: $moo-datepicker-day-focus-ring-shadow;
+}
+
+.moo-calendar__day[data-calendar-selected="true"] {
+  background: var(--moo-primary);
+  color: var(--moo-primary-foreground);
+}
+
+.moo-calendar__day[data-calendar-selected="true"]:hover:not(:disabled),
+.moo-calendar__day[data-calendar-selected="true"]:focus-visible {
+  background: var(--moo-primary);
+  color: var(--moo-primary-foreground);
+}
+
+.moo-calendar__day[data-calendar-range="middle"] {
+  border-radius: var(--moo-datepicker-day-range-joined-border-radius);
+  background: color-mix(in srgb, var(--moo-primary) 14%, transparent);
+  color: var(--bs-body-color);
+}
+
+.moo-calendar__day[data-calendar-range="start"] {
+  border-start-end-radius: var(--moo-datepicker-day-range-joined-border-radius);
+  border-end-end-radius: var(--moo-datepicker-day-range-joined-border-radius);
+}
+
+.moo-calendar__day[data-calendar-range="end"] {
+  border-start-start-radius: var(--moo-datepicker-day-range-joined-border-radius);
+  border-end-start-radius: var(--moo-datepicker-day-range-joined-border-radius);
+}
+
+.moo-calendar__day[data-calendar-outside="true"] {
+  color: var(--bs-secondary-color);
+}
+
+.moo-calendar__day[data-calendar-today="true"]:not([data-calendar-selected="true"]) {
+  outline: var(--bs-border-width) solid var(--bs-border-color);
+  outline-offset: calc(-1 * var(--bs-border-width));
+}
+
+.moo-calendar__day:disabled {
+  color: var(--moo-disabled-foreground);
+  cursor: default;
+  opacity: var(--moo-disabled-control-opacity);
+}
+
+.moo-calendar__presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--moo-datepicker-preset-gap);
+  margin-top: $spacer * 0.75;
+}
+
+.moo-calendar__preset {
+  flex: 0 0 auto;
+}

package/scss/components/_dialog.scss

@@ -0,0 +1,66 @@
+// 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.
+.modal {
+  --bs-modal-border-radius: var(--bs-border-radius-xl);
+  --bs-modal-border-color: var(--moo-border);
+  --bs-modal-header-border-width: 0;
+  --bs-modal-footer-border-color: var(--moo-border);
+  --bs-modal-footer-bg: color-mix(in srgb, var(--bs-secondary-bg) 50%, transparent);
+  --bs-modal-title-line-height: 1;
+}
+
+.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;
+}
+
+.modal-content {
+  box-shadow: var(--bs-box-shadow-lg);
+}
+
+.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;
+}
+
+.modal-header {
+  gap: calc(var(--bs-modal-padding) * 0.75);
+}
+
+.modal--alert {
+  --bs-modal-width: 24rem;
+  --bs-modal-padding: 1rem;
+  --bs-modal-footer-bg: color-mix(in srgb, var(--bs-secondary-bg) 50%, transparent);
+}
+
+.modal-header--alert {
+  align-items: flex-start;
+  padding: var(--bs-modal-padding);
+}
+
+.modal-header__content {
+  min-width: 0;
+}
+
+.modal-description {
+  margin-top: calc(var(--bs-modal-padding) * 0.375);
+  margin-bottom: 0;
+  color: var(--bs-secondary-color);
+}
+
+.modal--alert .modal-footer {
+  padding: var(--bs-modal-padding);
+}
+
+.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

@@ -0,0 +1,202 @@
+// Dropdown uses Bootstrap's own consumption variables. These aliases give
+// the native menu the reference's surface without a private Moo token layer.
+.dropdown-menu {
+  --bs-dropdown-bg: var(--moo-surface);
+  --bs-dropdown-border-color: var(--moo-border);
+  --bs-dropdown-border-radius: var(--bs-border-radius-lg);
+  --bs-dropdown-box-shadow: var(--bs-box-shadow);
+  --bs-dropdown-link-color: var(--moo-foreground);
+  --bs-dropdown-link-hover-color: var(--moo-foreground);
+  --bs-dropdown-link-hover-bg: var(--moo-muted-surface);
+  --bs-dropdown-link-active-color: var(--moo-foreground);
+  --bs-dropdown-link-active-bg: var(--moo-muted-surface);
+  --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);
+}
+
+.dropdown-item {
+  --bs-dropdown-item-border-radius: var(--bs-border-radius);
+
+  display: flex;
+  align-items: center;
+  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-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;
+}
+
+.dropdown-item[data-variant="destructive"]:hover,
+.dropdown-item[data-variant="destructive"]:focus {
+  color: var(--moo-destructive) !important;
+  background-color: var(--moo-destructive-surface) !important;
+}
+
+.dropdown-item[data-variant="destructive"] > [data-icon] {
+  color: var(--moo-destructive) !important;
+}
+
+.dropdown-menu .dropdown-divider {
+  margin-inline: calc(-1 * var(--bs-dropdown-padding-x));
+  border-block-start: var(--bs-border-width) solid var(--bs-dropdown-divider-bg);
+}
+
+.dropdown-item-check.active {
+  color: var(--bs-dropdown-link-color);
+  background-color: transparent;
+}
+
+.dropdown-item-check.active:hover,
+.dropdown-item-check.active:focus {
+  color: var(--bs-dropdown-link-hover-color);
+  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};
+
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: $form-check-input-width;
+  height: $form-check-input-width;
+  border: var(--bs-border-width) solid var(--bs-border-color);
+  border-radius: var(--moo-dropdown-item-check-border-radius);
+  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);
+  color: var(--moo-surface);
+}
+
+.dropdown-item-check__indicator > [data-icon] {
+  width: 0.75rem;
+  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;
+}
+
+.dropdown-item-check--radio.active .dropdown-item-check__indicator {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--bs-dropdown-link-color);
+}
+
+.dropdown-item__icon-box {
+  --moo-dropdown-item-icon-size: #{$moo-dropdown-item-icon-size};
+
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: var(--moo-dropdown-item-icon-size);
+  height: var(--moo-dropdown-item-icon-size);
+  border: var(--bs-border-width) solid var(--moo-border);
+  border-radius: var(--bs-border-radius);
+}
+
+.dropdown-item__icon-box > [data-icon] {
+  width: 0.875rem;
+  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))")};
+}
+
+@include media-breakpoint-down(sm) {
+  [data-slot="sidebar-header"] .dropend > .dropdown-menu,
+  [data-slot="sidebar-footer"] .dropend > .dropdown-menu {
+    left: 0 !important;
+    right: 0 !important;
+    min-width: 100%;
+    margin: 0;
+    transform: none !important;
+  }
+
+  [data-slot="sidebar-header"] .dropend > .dropdown-menu {
+    top: calc(100% + #{$spacer * 0.25}) !important;
+    bottom: auto !important;
+  }
+
+  [data-slot="sidebar-footer"] .dropend > .dropdown-menu {
+    top: auto !important;
+    bottom: calc(100% + #{$spacer * 0.25}) !important;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  [data-slot="sidebar-header"] [data-sidebar-dropdown-positioned] > .dropdown-menu {
+    position: fixed !important;
+    z-index: $zindex-dropdown;
+    inset-block-start: var(--moo-sidebar-dropdown-block-start) !important;
+    inset-inline-start: var(--moo-sidebar-dropdown-inline-start) !important;
+    width: var(--moo-dropdown-sidebar-min-width);
+    min-width: var(--moo-dropdown-sidebar-min-width);
+    margin: 0;
+    transform: none !important;
+  }
+}

package/scss/components/_field.scss

@@ -0,0 +1,125 @@
+.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);
+  }
+}
+
+.field--switch {
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: $moo-field-switch-gap;
+
+  > :first-child {
+    min-width: 0;
+  }
+
+  > label {
+    flex: 0 0 auto;
+    margin: 0;
+  }
+
+  .form-label {
+    margin-bottom: $moo-field-gap * 0.5;
+    font-weight: $font-weight-medium;
+  }
+}
+
+.field--disabled {
+  opacity: $moo-disabled-control-opacity;
+  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;
+}
+
+.field-group {
+  display: flex;
+  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;
+  }
+}
+
+.field-form {
+  display: flex;
+  flex-direction: column;
+  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;
+}
+
+.field-fieldset + .field-fieldset {
+  margin-top: $moo-field-fieldset-sibling-gap;
+}
+
+.field-form > .field-fieldset + .field-fieldset {
+  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

@@ -0,0 +1,35 @@
+.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);
+}
+
+.form-control[type="file"]:not(.form-control-sm, .form-control-lg)::file-selector-button {
+  min-height: calc(#{$input-height} - #{$input-border-width} * 2);
+}
+
+.form-control[type="time"] {
+  appearance: none;
+  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;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.form-control:disabled,
+.form-select:disabled {
+  opacity: var(--moo-disabled-control-opacity);
+}