@wpmoo/ui 0.9.0 → 1.0.0-rc.10

package/scss/components/_card.scss

@@ -0,0 +1,114 @@
+/* Card */
+.card {
+  --bs-card-bg: color-mix(in srgb, var(--bs-secondary-bg) #{$moo-card-bg-mix}, var(--bs-body-bg));
+  --bs-card-color: var(--moo-foreground);
+  --bs-card-border-color: var(--moo-border);
+  --bs-card-border-radius: var(--bs-border-radius-xl);
+  --bs-card-inner-border-radius: calc(var(--bs-card-border-radius) - var(--bs-card-border-width));
+  --bs-card-box-shadow: var(--bs-box-shadow-sm);
+  --bs-card-cap-bg: transparent;
+  --bs-card-cap-color: var(--moo-foreground);
+  --bs-card-title-color: var(--moo-foreground);
+  --bs-card-subtitle-color: var(--moo-muted-foreground);
+  --moo-card-footer-bg: #{$moo-card-footer-bg};
+  --moo-card-spacing: #{$moo-card-spacing};
+
+  gap: var(--moo-card-spacing);
+  padding-block: var(--moo-card-spacing);
+
+  &:has(.card-footer) {
+    padding-block-end: 0;
+  }
+
+  &:has(> .card-image) {
+    padding-block-start: 0;
+  }
+
+  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
+  box-shadow: var(--bs-card-box-shadow);
+
+}
+
+:scope[data-bs-theme="dark"] .card {
+  --bs-card-bg: color-mix(in srgb, var(--bs-secondary-bg) #{$moo-card-bg-mix-dark}, var(--bs-body-bg));
+  --moo-card-footer-bg: #{$moo-card-footer-bg-dark};
+}
+
+.card--sm {
+  --moo-card-spacing: #{$moo-card-spacing-sm};
+}
+
+.card-header {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  column-gap: var(--moo-card-spacing);
+  align-items: flex-start;
+  border-bottom: 0;
+}
+
+.card-header__text {
+  display: flex;
+  flex-direction: column;
+  gap: $spacer * 0.25;
+  min-width: 0;
+  grid-column: 1;
+}
+
+.card-action {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.card-header,
+.card-body,
+.card-footer {
+  padding-block: 0;
+}
+
+.card-header,
+.card-body {
+  padding-inline: var(--moo-card-spacing);
+}
+
+.card-footer {
+  display: flex;
+  align-items: center;
+  gap: $spacer * 0.5;
+  padding: var(--moo-card-spacing);
+  border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
+  background-color: var(--moo-card-footer-bg);
+}
+
+.card-img-top {
+  border-top-left-radius: var(--bs-card-border-radius);
+  border-top-right-radius: var(--bs-card-border-radius);
+}
+
+.card-image {
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-top-left-radius: var(--bs-card-border-radius);
+  border-top-right-radius: var(--bs-card-border-radius);
+  background-color: var(--moo-muted-surface);
+}
+
+.card-image .card-img-top {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 0;
+}
+
+.card-title {
+  margin-bottom: 0;
+  font-size: $card-title-font-size;
+  font-weight: $headings-font-weight;
+  line-height: $line-height-sm;
+  letter-spacing: $card-title-letter-spacing;
+}
+
+.card-subtitle {
+  margin-top: 0;
+  font-size: $font-size-base;
+  color: var(--moo-muted-foreground);
+}

package/scss/components/_checkbox.scss

@@ -0,0 +1,78 @@
+/* Checkbox */
+.form-check-input {
+  margin-top: 0.125rem;
+}
+
+.form-check-input[type="checkbox"]:checked:not([role="switch"]) {
+  --#{$prefix}form-check-bg-image: none;
+
+  position: relative;
+  overflow: hidden;
+}
+
+.form-check-input[type="checkbox"]:checked:not([role="switch"])::after {
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  width: 0.32em;
+  height: 0.58em;
+  border-color: var(--moo-primary-foreground);
+  border-style: solid;
+  border-width: $moo-form-checkmark-border-width;
+  content: "";
+  transform: translate(-50%, -55%) rotate(45deg);
+  transform-origin: center;
+}
+
+.form-check-input[type="checkbox"]:indeterminate:not([role="switch"]) {
+  --#{$prefix}form-check-bg-image: linear-gradient(var(--moo-primary-foreground), var(--moo-primary-foreground));
+
+  background-size: $moo-form-check-indeterminate-bg-size;
+  background-position: $moo-form-check-indeterminate-bg-position;
+}
+
+.form-check-input[type="radio"]:checked {
+  --#{$prefix}form-check-bg-image: radial-gradient(circle at center, var(--moo-primary-foreground) 0 34%, transparent 36%);
+}
+
+.form-check-input:is([type="checkbox"], [type="radio"]):not(.is-invalid):focus:active,
+.form-check-input:is([type="checkbox"], [type="radio"]):not(.is-invalid):focus:not(:focus-visible) {
+  border-color: var(--bs-border-color);
+  box-shadow: none;
+}
+
+.form-check-input:is([type="checkbox"], [type="radio"]):checked:not(.is-invalid):focus:active,
+.form-check-input:is([type="checkbox"], [type="radio"]):checked:not(.is-invalid):focus:not(:focus-visible) {
+  border-color: $form-check-input-checked-border-color;
+}
+
+.form-check-input[type="checkbox"]:not(.is-invalid):indeterminate:focus:active,
+.form-check-input[type="checkbox"]:not(.is-invalid):indeterminate:focus:not(:focus-visible) {
+  border-color: $form-check-input-indeterminate-border-color;
+}
+
+.form-check-input.is-invalid {
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} var(--moo-form-invalid-ring-color);
+}
+
+.form-check-input.is-invalid:focus:active,
+.form-check-input.is-invalid:focus:not(:focus-visible) {
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} var(--moo-form-invalid-ring-color);
+}
+
+.form-check-input:is([type="checkbox"], [type="radio"]).is-invalid:checked:focus:active,
+.form-check-input:is([type="checkbox"], [type="radio"]).is-invalid:checked:focus:not(:focus-visible) {
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} var(--moo-form-invalid-ring-color);
+}
+
+.form-check-input[type="checkbox"].is-invalid:indeterminate:focus:active,
+.form-check-input[type="checkbox"].is-invalid:indeterminate:focus:not(:focus-visible) {
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} var(--moo-form-invalid-ring-color);
+}
+
+.form-check-input:is([type="checkbox"], [type="radio"]):not([role="switch"]).is-invalid:checked,
+.form-check-input:is([type="checkbox"], [type="radio"]):not([role="switch"]).is-invalid:checked:focus:active,
+.form-check-input:is([type="checkbox"], [type="radio"]):not([role="switch"]).is-invalid:checked:focus:not(:focus-visible) {
+  border-color: var(--moo-primary);
+  background-color: var(--moo-primary);
+}

package/scss/components/_close_button.scss

@@ -0,0 +1,56 @@
+/* Close Button */
+.btn-close {
+  --bs-btn-close-color: var(--moo-foreground);
+  --bs-btn-hover-color: var(--bs-btn-close-color);
+  --bs-btn-hover-bg: var(--moo-muted-surface);
+  --bs-btn-hover-border-color: #{$moo-close-button-border-color};
+  --bs-btn-close-bg: #{escape-svg($moo-close-button-bg-image)};
+
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  border-width: var(--bs-border-width);
+  border-style: var(--bs-border-style);
+  border-color: $moo-close-button-border-color;
+  border-radius: var(--bs-border-radius-pill);
+  color: var(--bs-btn-close-color);
+  background-image: none;
+  transition: $btn-transition;
+}
+
+.btn-close::before {
+  width: $btn-close-width;
+  height: $btn-close-height;
+  content: "";
+  background-color: currentColor;
+  -webkit-mask: var(--bs-btn-close-bg) center / contain no-repeat;
+  mask: var(--bs-btn-close-bg) center / contain no-repeat;
+}
+
+:scope[data-bs-theme="light"] .btn-close,
+:scope[data-bs-theme="dark"] .btn-close {
+  filter: none;
+}
+
+.btn-close:hover {
+  border-color: var(--bs-btn-hover-border-color);
+  color: var(--bs-btn-hover-color);
+  background-color: var(--bs-btn-hover-bg);
+}
+
+.btn-close:focus-visible {
+  border-color: var(--moo-ring);
+  color: var(--bs-btn-hover-color);
+  background-color: var(--bs-btn-hover-bg);
+}
+
+.btn-close:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.btn-close:disabled,
+.btn-close.disabled {
+  pointer-events: none;
+  opacity: var(--moo-disabled-control-opacity);
+}

package/scss/components/_collapsible.scss

@@ -0,0 +1,44 @@
+/* Collapsible */
+.collapsible {
+  display: flex;
+  flex-direction: column;
+  gap: $spacer * 0.5;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.collapsible-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-inline: $spacer * 0.5;
+  gap: $spacer * 0.5;
+}
+
+.collapsible-title {
+  margin-bottom: 0;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
+  color: var(--moo-foreground);
+}
+
+.collapsible .btn[data-bs-toggle='collapse'] {
+  color: var(--moo-muted-foreground);
+  line-height: 1;
+}
+
+.collapsible .btn[data-bs-toggle='collapse'] [data-icon] {
+  width: $font-size-base;
+  height: $font-size-base;
+}
+
+
+.collapsible-content {
+  padding: $spacer * 0.5 $spacer * 0.75;
+  border: var(--bs-border-width) solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius);
+  font-size: $font-size-sm;
+  color: var(--moo-muted-foreground);
+  width: 100%;
+}

package/scss/components/_combobox.scss

@@ -0,0 +1,253 @@
+/* Combobox */
+.combobox {
+  --moo-combobox-width: #{$moo-combobox-width};
+  --moo-combobox-multiple-width: #{$moo-combobox-multiple-width};
+  --moo-combobox-menu-max-height: #{$moo-combobox-menu-max-height};
+  --moo-combobox-option-line-height: #{$moo-combobox-option-line-height};
+  --moo-combobox-description-font-size: #{$moo-combobox-description-font-size};
+
+  width: 100%;
+  max-width: var(--moo-combobox-width);
+}
+
+.combobox--multiple {
+  max-width: var(--moo-combobox-multiple-width);
+}
+
+.combobox-control {
+  position: relative;
+  width: 100%;
+}
+
+.combobox-control:has(.combobox-input:disabled) {
+  opacity: var(--moo-disabled-control-opacity);
+}
+
+.combobox-control:has(.combobox-input:disabled) .combobox-input:disabled {
+  opacity: 1;
+}
+
+.combobox-input {
+  padding-inline-end: calc(#{$input-padding-x} + #{$input-height});
+}
+
+.combobox-input.is-invalid {
+  padding-inline-end: calc(#{$input-padding-x} + #{$input-height});
+  background-image: none;
+}
+
+.combobox-indicator {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $input-height;
+  color: var(--bs-secondary-color);
+  pointer-events: none;
+}
+
+.combobox-indicator > [data-icon] {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+}
+
+.combobox-clear {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  display: flex;
+  width: $input-height;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--bs-secondary-color);
+  cursor: pointer;
+}
+
+.combobox-clear:hover,
+.combobox-clear:focus-visible {
+  color: var(--bs-body-color);
+}
+
+.combobox-clear > [data-icon] {
+  width: $small-font-size;
+  height: $small-font-size;
+  flex: 0 0 auto;
+}
+
+.combobox-chips {
+  display: flex;
+  min-height: $input-height;
+  align-items: center;
+  gap: $spacer * 0.25;
+  flex-wrap: wrap;
+  padding-block: $input-padding-y;
+  padding-inline: $input-padding-x;
+  cursor: text;
+}
+
+
+.combobox-value {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: $spacer * 0.25;
+  flex-wrap: wrap;
+}
+
+.combobox-chip {
+  display: inline-flex;
+  max-width: 100%;
+  align-items: center;
+  gap: $spacer * 0.25;
+  cursor: default;
+}
+
+.combobox-chip__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.combobox-chip__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: var(--bs-border-radius-pill);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.65;
+}
+
+.combobox-chip__remove:hover,
+.combobox-chip__remove:focus-visible {
+  opacity: 1;
+}
+
+.combobox-chip__remove > [data-icon] {
+  width: $font-size-base;
+  height: $font-size-base;
+  flex: 0 0 auto;
+}
+
+.combobox-chips-input {
+  min-width: $input-height * 2.5;
+  flex: 1 1 $input-height * 2.5;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+}
+
+.combobox-chips-input::placeholder {
+  color: var(--bs-tertiary-color);
+}
+
+.combobox-menu {
+  position: absolute;
+  inset-block-start: calc(100% + #{$dropdown-spacer});
+  inset-inline-start: 0;
+  z-index: $zindex-dropdown;
+  width: max-content;
+  min-width: 100%;
+  max-width: calc(100vw - #{$spacer});
+  max-height: var(--moo-combobox-menu-max-height);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+}
+
+.combobox-menu::-webkit-scrollbar {
+  display: none;
+}
+
+.combobox-option {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) $spacer;
+  align-items: center;
+  gap: $spacer * 0.5;
+  padding-inline-end: $dropdown-item-padding-x;
+  line-height: var(--moo-combobox-option-line-height);
+}
+
+.combobox-option__content {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+.combobox:not(.combobox--multiple) .combobox-option[aria-selected="true"],
+.combobox-option[aria-current="true"] {
+  background-color: var(--bs-dropdown-link-hover-bg);
+}
+
+.combobox:not(.combobox--multiple)
+  .combobox-menu:has(.combobox-option:not([aria-selected="true"]):hover)
+  .combobox-option[aria-selected="true"]:not(:hover):not([aria-current="true"]),
+.combobox:not(.combobox--multiple)
+  .combobox-menu:has(.combobox-option[aria-current="true"]:not([aria-selected="true"]))
+  .combobox-option[aria-selected="true"]:not([aria-current="true"]) {
+  background-color: transparent;
+}
+
+.combobox-option[aria-selected="true"] {
+  font-weight: $font-weight-medium;
+}
+
+.combobox-option__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.combobox--custom-items .combobox-option__label {
+  font-weight: $font-weight-medium;
+}
+
+.combobox-option__description {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--bs-secondary-color);
+  font-size: var(--moo-combobox-description-font-size);
+  line-height: $line-height-base;
+  text-overflow: ellipsis;
+}
+
+.combobox-option__check {
+  display: inline-flex;
+  justify-self: end;
+  visibility: hidden;
+}
+
+.combobox-option[aria-selected="true"] .combobox-option__check {
+  visibility: visible;
+}
+
+.combobox-option__check > [data-icon] {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+}
+
+.combobox-group-label {
+  padding: ($spacer * 0.375) ($spacer * 0.5);
+  font-size: var(--moo-combobox-description-font-size);
+  font-weight: $font-weight-normal;
+  line-height: $spacer;
+}
+
+.combobox-empty {
+  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+  color: var(--bs-secondary-color);
+  text-align: center;
+}

package/scss/components/_context-menu.scss

@@ -0,0 +1,18 @@
+/* Context Menu */
+.context-menu {
+  position: relative;
+}
+
+.context-menu-trigger:not([data-context-menu-fallback]) {
+  cursor: default;
+}
+
+.context-menu-trigger[data-context-menu-fallback] {
+  position: absolute;
+  inset-block-start: 0.5rem;
+  inset-inline-end: 0.5rem;
+}
+
+ul.context-menu-menu:focus-visible {
+  outline: 0;
+}