@wpmoo/ui 0.9.0 → 1.0.0-rc.10

package/scss/components/_alert.scss

@@ -0,0 +1,82 @@
+/* Alert */
+$moo-alert-dismissible-close-space: $btn-close-width + ($btn-close-padding-x * 2) + 0.5rem !default;
+
+.alert {
+  --bs-alert-border-color: var(--moo-border);
+  --bs-alert-color: var(--moo-foreground);
+  --bs-alert-padding-x: 0.625rem;
+  --bs-alert-padding-y: 0.5rem;
+
+  display: flex;
+  align-items: flex-start;
+  gap: 0.375rem;
+}
+
+.alert-dismissible {
+  padding-right: 0;
+  padding-left: 0;
+  padding-inline-start: var(--bs-alert-padding-x);
+  padding-inline-end: calc(var(--bs-alert-padding-x) + #{$moo-alert-dismissible-close-space});
+}
+
+.alert-dismissible .btn-close {
+  top: auto;
+  right: auto;
+  inset-block-start: var(--bs-alert-padding-y);
+  inset-inline-end: var(--bs-alert-padding-x);
+  padding: $btn-close-padding-y $btn-close-padding-x;
+}
+
+.alert-danger {
+  --bs-alert-bg: transparent;
+  --bs-alert-border-color: var(--moo-border);
+  --bs-alert-color: var(--moo-destructive);
+}
+
+.alert-warning {
+  --bs-alert-bg: var(--moo-warning-surface);
+  --bs-alert-border-color: var(--moo-border);
+  --bs-alert-color: var(--moo-warning);
+}
+
+.alert-success {
+  --bs-alert-bg: var(--moo-success-surface);
+  --bs-alert-border-color: var(--moo-border);
+  --bs-alert-color: var(--moo-success);
+}
+
+.alert-info {
+  --bs-alert-bg: var(--moo-info-surface);
+  --bs-alert-border-color: var(--moo-border);
+  --bs-alert-color: var(--moo-info);
+}
+
+.alert-icon {
+  display: flex;
+  flex: 0 0 auto;
+  margin-top: 0.125rem;
+}
+
+.alert-icon [data-icon] {
+  width: 1rem;
+  height: 1rem;
+}
+
+.alert-body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.alert-body p {
+  color: color-mix(in srgb, var(--bs-alert-color) 60%, var(--bs-secondary-color));
+}
+
+.alert-heading {
+  margin-bottom: $spacer * 0.25;
+  font-size: $font-size-base;
+  font-weight: $headings-font-weight;
+}
+
+.alert-action {
+  flex: 0 0 auto;
+}

package/scss/components/_avatar.scss

@@ -0,0 +1,139 @@
+/* Avatar */
+.avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: $avatar-size;
+  height: $avatar-size;
+  flex: 0 0 auto;
+  overflow: visible;
+  border: 0;
+  border-radius: var(--bs-border-radius-pill);
+  background-color: var(--moo-muted-surface);
+  color: var(--moo-foreground);
+  font-size: $font-size-base;
+  font-weight: $font-weight-medium;
+  line-height: $avatar-line-height;
+  text-transform: uppercase;
+}
+
+.avatar::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border: var(--bs-border-width) solid var(--moo-border);
+  border-radius: var(--bs-border-radius-pill);
+  pointer-events: none;
+  opacity: 0.8;
+}
+
+.avatar > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: var(--bs-border-radius-pill);
+}
+
+.avatar-fallback {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  text-align: center;
+  padding: 0 0.15rem;
+}
+
+.avatar--has-image > .avatar-fallback {
+  display: none;
+}
+
+.avatar-badge {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 0.9375rem;
+  min-width: 0.9375rem;
+  padding-inline: 0.2rem;
+  border: 0;
+  border-radius: var(--bs-border-radius-pill);
+  box-shadow: $avatar-badge-ring-shadow;
+  background-color: var(--moo-muted-surface);
+  color: var(--moo-foreground);
+  font-size: 0.625rem;
+  font-weight: $font-weight-medium;
+  line-height: 1;
+}
+
+.avatar-badge [data-icon] {
+  width: 0.625rem;
+  height: 0.625rem;
+}
+
+.avatar-badge--dot {
+  height: $avatar-badge-dot-size;
+  min-width: $avatar-badge-dot-size;
+  padding-inline: 0;
+}
+
+.avatar-badge--icon {
+  width: $avatar-badge-icon-size;
+  height: $avatar-badge-icon-size;
+  min-width: $avatar-badge-icon-size;
+  padding-inline: 0;
+}
+
+.avatar-badge--icon [data-icon] {
+  width: $avatar-badge-icon-glyph-size;
+  height: $avatar-badge-icon-glyph-size;
+}
+
+.avatar-sm {
+  width: $avatar-size-sm;
+  height: $avatar-size-sm;
+  font-size: $avatar-font-size-sm;
+}
+
+.avatar-lg {
+  width: $avatar-size-lg;
+  height: $avatar-size-lg;
+  font-size: $avatar-font-size-lg;
+}
+
+.avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+
+.avatar-group > .avatar {
+  box-shadow: $avatar-group-ring-shadow;
+  z-index: 0;
+}
+
+.avatar-group .avatar + .avatar,
+.avatar-group .avatar + .avatar-count,
+.avatar-group .avatar-count + .avatar {
+  margin-inline-start: $avatar-group-overlap;
+}
+
+.avatar-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: $avatar-size;
+  height: $avatar-size;
+  flex: 0 0 auto;
+  border-radius: var(--bs-border-radius-pill);
+  font-size: 0.75rem;
+  font-weight: $font-weight-medium;
+}
+
+.avatar-count::before {
+  content: "+";
+  margin-inline-end: -0.1rem;
+}

package/scss/components/_badge.scss

@@ -0,0 +1,34 @@
+/* Badge */
+.badge {
+  display: inline-flex;
+  height: $moo-chip-height;
+  align-items: center;
+  justify-content: center;
+  border: var(--bs-border-width) solid var(--bs-border-color);
+  border-color: $badge-border-color;
+  gap: 0.25rem;
+  line-height: 1rem;
+}
+
+.badge[class~="border"] {
+  border-color: var(--moo-border) !important;
+}
+
+.badge[class~="text-bg-primary"] {
+  color: var(--moo-primary-foreground) !important;
+  background-color: var(--moo-primary) !important;
+}
+
+.badge[class~="text-bg-secondary"] {
+  color: var(--moo-foreground) !important;
+  background-color: var(--moo-muted-surface) !important;
+}
+
+.badge[class~="text-bg-danger"] {
+  color: var(--moo-destructive) !important;
+  background-color: var(--moo-destructive-surface) !important;
+}
+
+.badge[class~="text-body-secondary"] {
+  color: var(--moo-foreground) !important;
+}

package/scss/components/_breadcrumb.scss

@@ -0,0 +1,119 @@
+/* Breadcrumb */
+.breadcrumb {
+  --bs-breadcrumb-item-active-color: var(--moo-foreground);
+  --bs-breadcrumb-item-padding-x: #{$spacer * 0.375};
+
+  column-gap: var(--bs-breadcrumb-item-padding-x);
+  line-height: 1.25rem;
+}
+
+.breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.breadcrumb-item + .breadcrumb-item::before {
+  float: none;
+  flex: 0 0 auto;
+}
+
+.breadcrumb-item + .breadcrumb-item {
+  padding-left: 0;
+}
+
+.breadcrumb:not(.breadcrumb--custom-divider) .breadcrumb-item + .breadcrumb-item::before {
+  width: 0.875rem;
+  height: 0.875rem;
+  padding-right: 0;
+  margin-inline-end: var(--bs-breadcrumb-item-padding-x);
+  background-color: var(--moo-muted-foreground);
+  content: "";
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
+}
+
+.breadcrumb--custom-divider .breadcrumb-item + .breadcrumb-item::before {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.875rem;
+  height: 0.875rem;
+  padding-right: 0;
+  margin-inline-end: var(--bs-breadcrumb-item-padding-x);
+  line-height: 1;
+}
+
+:dir(rtl) .breadcrumb {
+  --bs-breadcrumb-divider: "#{$breadcrumb-divider-flipped}";
+}
+
+:dir(rtl) .breadcrumb-item + .breadcrumb-item {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+:dir(rtl) .breadcrumb-item + .breadcrumb-item::before {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+:dir(rtl) .breadcrumb:not(.breadcrumb--custom-divider) .breadcrumb-item + .breadcrumb-item::before {
+  padding-left: 0;
+  transform: scaleX(-1);
+}
+
+.breadcrumb-item a {
+  color: var(--moo-muted-foreground);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.breadcrumb-item a:hover {
+  color: var(--moo-foreground);
+  text-decoration: none;
+}
+
+.breadcrumb-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  color: var(--moo-muted-foreground);
+}
+
+.breadcrumb-ellipsis [data-icon] {
+  width: 1rem;
+  height: 1rem;
+}
+
+.breadcrumb-dropdown-item,
+.breadcrumb-dropdown-item .dropdown {
+  display: inline-flex;
+  align-items: center;
+}
+
+.breadcrumb-dropdown-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacer * 0.25;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--moo-muted-foreground);
+  font: inherit;
+  line-height: 1.25rem;
+  text-decoration: none;
+}
+
+.breadcrumb-dropdown-trigger:hover,
+.breadcrumb-dropdown-trigger:focus {
+  color: var(--moo-foreground);
+}
+
+.breadcrumb .breadcrumb-dropdown-trigger:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
+}
+
+.breadcrumb-dropdown-trigger > [data-icon] {
+  width: 0.875rem;
+  height: 0.875rem;
+}

package/scss/components/_button.scss

@@ -0,0 +1,200 @@
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  gap: $icon-link-gap;
+  white-space: nowrap;
+}
+
+.btn:not(.btn-icon, .btn-icon-xs, .btn-icon-sm, .btn-icon-lg):has(> [data-icon="inline-start"]) {
+  padding-inline-start: $spacer * 0.5;
+}
+
+.btn:not(.btn-icon, .btn-icon-xs, .btn-icon-sm, .btn-icon-lg):has(> [data-icon="inline-end"]) {
+  padding-inline-end: $spacer * 0.5;
+}
+
+button.btn:not(:disabled),
+input.btn:not(:disabled),
+label.btn {
+  cursor: default;
+}
+
+.btn-xs,
+.btn-icon-xs {
+  --bs-btn-padding-y: #{$spacer * 0.1875};
+  --bs-btn-padding-x: #{$spacer * 0.5};
+  --bs-btn-font-size: #{$spacer * 0.75};
+  --bs-btn-line-height: #{$spacer};
+  --bs-btn-border-radius: var(--bs-border-radius-sm);
+  gap: #{$spacer * 0.25};
+}
+
+.btn-sm,
+.btn-icon-sm,
+.btn-group-sm > .btn,
+.btn-group-sm > .btn-group > .btn {
+  --bs-btn-padding-y: #{$btn-padding-y-sm};
+  --bs-btn-padding-x: #{$btn-padding-x-sm};
+  --bs-btn-font-size: #{$btn-font-size-sm};
+  --bs-btn-line-height: #{$spacer};
+  --bs-btn-border-radius: var(--bs-border-radius-sm);
+  gap: #{$spacer * 0.25};
+}
+
+.btn-lg,
+.btn-icon-lg,
+.btn-group-lg > .btn,
+.btn-group-lg > .btn-group > .btn {
+  --bs-btn-padding-y: #{$btn-padding-y-lg};
+  --bs-btn-padding-x: #{$btn-padding-x-lg};
+  --bs-btn-font-size: #{$btn-font-size-lg};
+  --bs-btn-line-height: #{$btn-line-height};
+  --bs-btn-border-radius: var(--bs-border-radius-lg);
+}
+
+:is(.btn-xs, .btn-sm, .btn-group-sm > .btn, .btn-group-sm > .btn-group > .btn):not(.btn-icon, .btn-icon-xs, .btn-icon-sm, .btn-icon-lg):has(> [data-icon="inline-start"]) {
+  padding-inline-start: $icon-link-gap;
+}
+
+:is(.btn-xs, .btn-sm, .btn-group-sm > .btn, .btn-group-sm > .btn-group > .btn):not(.btn-icon, .btn-icon-xs, .btn-icon-sm, .btn-icon-lg):has(> [data-icon="inline-end"]) {
+  padding-inline-end: $icon-link-gap;
+}
+
+.btn-icon {
+  --bs-btn-line-height: #{$btn-line-height};
+  --bs-btn-padding-y: #{$btn-padding-y};
+}
+
+.btn-icon,
+.btn-icon-xs,
+.btn-icon-sm,
+.btn-icon-lg {
+  --moo-btn-icon-size: #{$moo-btn-icon-size};
+  padding-inline: 0;
+  inline-size: var(--moo-btn-icon-size);
+  block-size: var(--moo-btn-icon-size);
+}
+
+:is(.btn-icon, .btn-icon-xs, .btn-icon-sm, .btn-icon-lg)::after {
+  display: none;
+}
+
+.btn > [data-icon="inline-start"],
+.btn > [data-icon="inline-end"] {
+  width: $spacer;
+  height: $spacer;
+  flex: 0 0 auto;
+}
+
+:is(.btn-xs, .btn-icon-xs) > [data-icon] {
+  width: $spacer * 0.75;
+  height: $spacer * 0.75;
+}
+
+:is(.btn-sm, .btn-icon-sm, .btn-group-sm > .btn, .btn-group-sm > .btn-group > .btn) > [data-icon] {
+  width: $font-size-base;
+  height: $font-size-base;
+}
+
+.btn[aria-busy="true"] > [data-icon="inline-start"] {
+  animation: $moo-spinner-animation-name $spinner-animation-speed linear infinite;
+}
+
+.btn:disabled,
+.btn.disabled,
+.btn[aria-disabled="true"] {
+  pointer-events: none;
+  opacity: var(--moo-disabled-control-opacity);
+}
+
+.btn-check:disabled + .btn {
+  pointer-events: none;
+  opacity: var(--moo-disabled-control-opacity);
+}
+
+.btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
+  transform: translateY($moo-control-active-translate-y);
+}
+
+:is(.btn-primary, .btn-secondary, .btn-outline-secondary, .btn-outline-primary, .btn-ghost, .btn-danger) {
+  --bs-btn-border-color: var(--bs-btn-bg);
+  --bs-btn-hover-color: var(--bs-btn-color);
+  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
+  --bs-btn-active-color: var(--bs-btn-hover-color);
+  --bs-btn-active-bg: var(--bs-btn-hover-bg);
+  --bs-btn-active-border-color: var(--bs-btn-active-bg);
+  --bs-btn-disabled-color: var(--bs-btn-color);
+  --bs-btn-disabled-border-color: var(--bs-btn-border-color);
+}
+
+:is(.btn-primary, .btn-secondary, .btn-danger) {
+  --bs-btn-disabled-bg: var(--bs-btn-bg);
+}
+
+:is(.btn-outline-secondary, .btn-outline-primary, .btn-ghost) {
+  --bs-btn-disabled-bg: transparent;
+}
+
+.btn-primary {
+  --bs-btn-color: var(--moo-primary-foreground);
+  --bs-btn-bg: var(--moo-primary);
+  --bs-btn-hover-bg: color-mix(in srgb, var(--moo-primary) 80%, var(--moo-surface));
+  --bs-btn-active-bg: color-mix(in srgb, var(--moo-primary) 72%, var(--moo-surface));
+}
+
+.btn-secondary {
+  --bs-btn-color: var(--moo-foreground);
+  --bs-btn-bg: var(--moo-surface);
+  --bs-btn-border-color: var(--moo-border);
+  --bs-btn-hover-bg: color-mix(in srgb, var(--moo-muted-surface) 95%, var(--moo-foreground));
+  --bs-btn-hover-border-color: color-mix(in srgb, var(--moo-border) 90%, var(--moo-foreground));
+  --bs-btn-active-bg: color-mix(in srgb, var(--moo-muted-surface) 88%, var(--moo-foreground));
+  --bs-btn-active-border-color: color-mix(in srgb, var(--moo-border) 82%, var(--moo-foreground));
+}
+
+.btn-outline-secondary {
+  --bs-btn-color: var(--moo-foreground);
+  --bs-btn-border-color: var(--moo-border);
+  --bs-btn-hover-bg: var(--moo-muted-surface);
+  --bs-btn-hover-border-color: var(--moo-border);
+  --bs-btn-active-border-color: var(--moo-border);
+}
+
+.btn-outline-primary {
+  --bs-btn-color: var(--moo-foreground);
+  --bs-btn-border-color: var(--moo-foreground);
+  --bs-btn-hover-color: var(--moo-surface);
+  --bs-btn-hover-bg: var(--moo-foreground);
+}
+
+.btn-ghost {
+  --bs-btn-color: var(--moo-foreground);
+  --bs-btn-bg: transparent;
+  --bs-btn-hover-bg: var(--moo-muted-surface);
+  --bs-btn-hover-border-color: transparent;
+  --bs-btn-active-bg: var(--bs-btn-hover-bg);
+  --bs-btn-active-color: var(--bs-btn-color);
+  --bs-btn-active-border-color: transparent;
+  --bs-btn-disabled-color: var(--moo-disabled-foreground);
+}
+
+.btn-danger {
+  --bs-btn-color: var(--moo-destructive-foreground);
+  --bs-btn-bg: var(--moo-destructive-surface);
+  --bs-btn-border-color: transparent;
+  --bs-btn-hover-color: var(--moo-destructive-foreground);
+  --bs-btn-hover-bg: var(--moo-destructive-surface-hover);
+  --bs-btn-hover-border-color: transparent;
+  --bs-btn-active-color: var(--moo-destructive-foreground);
+  --bs-btn-active-bg: var(--moo-destructive-surface-hover);
+  --bs-btn-active-border-color: transparent;
+}
+
+.btn-link {
+  --bs-btn-color: var(--moo-foreground);
+  --bs-btn-hover-color: var(--moo-muted-foreground);
+  text-underline-offset: $spacer * 0.25;
+}

package/scss/components/_button_group.scss

@@ -0,0 +1,57 @@
+/* Button Group */
+[dir="rtl"] .btn-group,
+[dir="rtl"] .btn-toolbar {
+  direction: ltr;
+}
+
+[dir="rtl"] .btn-group > .btn,
+[dir="rtl"] .btn-toolbar > .btn {
+  unicode-bidi: plaintext;
+}
+
+.btn-group > .btn:hover:not(:focus-visible):not(.active),
+.btn-group > .btn:focus:not(:focus-visible):not(.active),
+.btn-group > .btn:active:not(:focus-visible):not(.active),
+.btn-group-vertical > .btn:hover:not(:focus-visible):not(.active),
+.btn-group-vertical > .btn:focus:not(:focus-visible):not(.active),
+.btn-group-vertical > .btn:active:not(:focus-visible):not(.active) {
+  z-index: auto;
+}
+
+.btn-group > .btn-check:checked + .btn:hover,
+.btn-group > .btn-check:focus + .btn:hover,
+.btn-group-vertical > .btn-check:checked + .btn:hover,
+.btn-group-vertical > .btn-check:focus + .btn:hover {
+  z-index: 1;
+}
+
+.btn-group > .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active,
+.btn-group-vertical > .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
+  transform: none;
+}
+
+.btn-group > .btn-icon,
+.btn-group > .btn-icon-xs,
+.btn-group > .btn-icon-sm,
+.btn-group > .btn-icon-lg,
+.btn-group-vertical > .btn-icon,
+.btn-group-vertical > .btn-icon-xs,
+.btn-group-vertical > .btn-icon-sm,
+.btn-group-vertical > .btn-icon-lg {
+  flex: 0 0 auto;
+}
+
+.btn-group-vertical > .btn-icon,
+.btn-group-vertical > .btn-icon-xs,
+.btn-group-vertical > .btn-icon-sm,
+.btn-group-vertical > .btn-icon-lg {
+  width: var(--moo-btn-icon-size);
+}
+
+.btn-group-select,
+.input-group > .btn-group-select {
+  flex: 0 0 auto;
+  width: auto;
+  min-width: calc(#{$form-select-indicator-padding} + #{$spacer});
+  padding-inline-end: $form-select-indicator-padding;
+}