@wpmoo/ui 0.9.0 → 1.0.0-rc.10

package/scss/components/_datepicker.scss

@@ -0,0 +1,237 @@
+/* Date Picker */
+.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,69 @@
+/* Dialog */
+.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 {
+  outline: none;
+}
+
+.modal-content {
+  box-shadow: var(--bs-box-shadow-lg);
+}
+
+.modal-title {
+  font-size: 1rem;
+  font-weight: $font-weight-medium;
+}
+
+.modal-header {
+  gap: calc(var(--bs-modal-padding) * 0.75);
+}
+
+.modal-header:has(> .btn-close) {
+  position: relative;
+  padding-inline-end: calc(
+    var(--bs-modal-padding) + #{$btn-close-width} + #{$btn-close-padding-x * 2} + 0.5rem
+  );
+}
+
+.modal-header:has(> .btn-close) > .btn-close {
+  position: absolute;
+  inset-block-start: 0.5rem;
+  inset-inline-end: 0.5rem;
+  margin: 0;
+}
+
+.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 {
+  padding: $spacer;
+}

package/scss/components/_dropdown.scss

@@ -0,0 +1,201 @@
+/* Dropdown */
+.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);
+
+  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;
+}
+
+.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;
+}
+
+.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);
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+[data-slot="sidebar-header"] .dropdown-menu,
+[data-slot="sidebar-footer"] .dropdown-menu {
+  --moo-dropdown-sidebar-min-width: #{$moo-dropdown-sidebar-min-width};
+
+  min-width: #{unquote("max(100%, var(--moo-dropdown-sidebar-min-width))")};
+}
+
+[data-identity-trigger="1"] + .dropdown-menu {
+  --moo-dropdown-sidebar-min-width: #{$moo-dropdown-sidebar-min-width};
+  min-width: 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-between(sm, lg) {
+  [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,
+  [data-slot="sidebar-footer"] [data-sidebar-dropdown-positioned] > .dropdown-menu {
+    position: fixed !important;
+    z-index: $zindex-dropdown;
+    left: var(--moo-sidebar-dropdown-left, auto) !important;
+    right: var(--moo-sidebar-dropdown-right, auto) !important;
+    width: var(--moo-dropdown-sidebar-min-width);
+    min-width: var(--moo-dropdown-sidebar-min-width);
+    margin: 0;
+    transform: none !important;
+  }
+
+  [data-slot="sidebar-header"] [data-sidebar-dropdown-positioned] > .dropdown-menu {
+    inset-block-start: var(--moo-sidebar-dropdown-block-start) !important;
+  }
+
+  [data-slot="sidebar-footer"] [data-sidebar-dropdown-positioned] > .dropdown-menu {
+    inset-block-start: auto !important;
+    inset-block-end: var(--moo-sidebar-dropdown-block-end) !important;
+  }
+
+}

package/scss/components/_field.scss

@@ -0,0 +1,94 @@
+/* Field */
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: $moo-field-gap;
+
+  > .form-label {
+    margin-bottom: 0;
+    font-weight: $font-weight-medium;
+  }
+
+  &[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 {
+  margin-top: 0;
+  font-size: $font-size-base;
+}
+
+.field-group {
+  display: flex;
+  flex-direction: column;
+  gap: $moo-field-group-gap;
+
+  > hr {
+    margin-block: 0;
+  }
+
+  &.row {
+    flex-direction: row;
+    gap: 0;
+  }
+}
+
+.field-form {
+  display: flex;
+  flex-direction: column;
+  gap: $moo-field-form-gap;
+}
+
+.field-legend {
+  font-size: $moo-field-legend-font-size;
+  font-weight: $font-weight-medium;
+  margin-bottom: $moo-field-legend-margin-bottom;
+}
+
+.field-fieldset > * + * {
+  margin-top: $moo-field-fieldset-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;
+}
+
+.field-fieldset + hr {
+  opacity: $moo-field-separator-opacity;
+}

package/scss/components/_input.scss

@@ -0,0 +1,31 @@
+/* Input */
+.form-control {
+  min-height: $input-height;
+}
+
+.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;
+}
+
+.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);
+}