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

package/scss/components/_combobox.scss

@@ -0,0 +1,258 @@
+// Bootstrap has no native Combobox component. The Basic pass composes a
+// form-control with a dropdown-menu and keeps only the missing positioning
+// and inline affordance in this component namespace.
+.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-chips's 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.
+
+.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,28 @@
+// Bootstrap has no native context-menu or "explicit fallback trigger"
+// concept, so there is no Bootstrap token to consume here: the fallback
+// button is a Moo-owned corner affordance layered over arbitrary surface
+// content, verified in the browser to otherwise fall into normal block flow
+// below the surface instead of reading as a menu trigger for it.
+.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;
+}
+
+// A pointer-driven open focuses the menu container itself, not an item, so
+// :hover carries the highlight instead of a focus ring competing with it
+// (verified in the browser: focusing the first item unconditionally left a
+// stray ring on it while a different item was hovered). The shared
+// [tabindex]:focus-visible ring in foundations/_focus.scss otherwise applies
+// here too, since a tabindex="-1" container still matches that selector.
+ul.context-menu-menu:focus-visible {
+  outline: 0;
+}