@wpmoo/ui 0.9.0 → 1.0.0-rc.10

package/scss/components/_slider.scss

@@ -0,0 +1,213 @@
+/* Slider */
+$slider-thumb-size: $form-range-thumb-width * 0.75;
+$slider-thumb-margin-top: ($progress-height - $slider-thumb-size) * 0.5;
+
+.slider {
+  display: grid;
+  gap: $form-text-margin-top;
+  width: 100%;
+}
+
+.slider-track {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: $form-range-track-width;
+  height: $slider-thumb-size;
+  cursor: $form-range-track-cursor;
+  touch-action: none;
+}
+
+.slider-track::before,
+.slider-range {
+  position: absolute;
+  inset-block-start: 50%;
+  height: $progress-height;
+  border-radius: var(--bs-border-radius-pill);
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.slider-track::before {
+  content: "";
+  inset-inline: 0;
+  background-color: $form-range-track-bg;
+  box-shadow: var(--bs-box-shadow-inset);
+}
+
+.slider-range {
+  inset-inline-start: var(--moo-slider-start, 0%);
+  inset-inline-end: calc(100% - var(--moo-slider-end, 0%));
+  background-color: var(--moo-primary);
+}
+
+.slider-input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.slider-input::-webkit-slider-runnable-track {
+  height: $progress-height;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.slider-input::-moz-range-track {
+  height: $progress-height;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.slider-input::-webkit-slider-thumb {
+  position: relative;
+  z-index: 1;
+  width: $slider-thumb-size;
+  height: $slider-thumb-size;
+  margin-top: $slider-thumb-margin-top;
+  background-color: var(--bs-body-bg);
+  border-width: var(--bs-border-width);
+  border-style: solid;
+  border-color: var(--moo-primary);
+  box-shadow: var(--bs-box-shadow-sm);
+  pointer-events: auto;
+}
+
+.slider-input::-moz-range-thumb {
+  position: relative;
+  z-index: 1;
+  width: $slider-thumb-size;
+  height: $slider-thumb-size;
+  background-color: var(--bs-body-bg);
+  border-width: var(--bs-border-width);
+  border-style: solid;
+  border-color: var(--moo-primary);
+  box-shadow: var(--bs-box-shadow-sm);
+  pointer-events: auto;
+}
+
+.slider-input::-webkit-slider-thumb:active {
+  background-color: var(--bs-body-bg);
+  border-color: var(--moo-primary);
+}
+
+.slider-input::-moz-range-thumb:active {
+  background-color: var(--bs-body-bg);
+  border-color: var(--moo-primary);
+}
+
+.slider-input:focus-visible::-webkit-slider-thumb {
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
+}
+
+.slider-input:focus-visible::-moz-range-thumb {
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
+}
+
+.slider[data-slider-dragging] .slider-input::-webkit-slider-thumb {
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
+}
+
+.slider[data-slider-dragging] .slider-input::-moz-range-thumb {
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
+}
+
+.slider[data-slider-pointer-focus]:not([data-slider-dragging]) .slider-input:focus::-webkit-slider-thumb {
+  box-shadow: var(--bs-box-shadow-sm);
+}
+
+.slider[data-slider-pointer-focus]:not([data-slider-dragging]) .slider-input:focus::-moz-range-thumb {
+  box-shadow: var(--bs-box-shadow-sm);
+}
+
+.slider-input:disabled {
+  opacity: 1;
+}
+
+.slider-input:disabled::-webkit-slider-thumb {
+  background-color: var(--moo-muted-surface);
+  border-color: var(--moo-disabled-foreground);
+  box-shadow: none;
+  cursor: default;
+}
+
+.slider-input:disabled::-moz-range-thumb {
+  background-color: var(--moo-muted-surface);
+  border-color: var(--moo-disabled-foreground);
+  box-shadow: none;
+  cursor: default;
+}
+
+.slider-input:disabled:focus-visible::-webkit-slider-thumb,
+.slider[data-slider-dragging] .slider-input:disabled::-webkit-slider-thumb,
+.slider[data-slider-pointer-focus] .slider-input:disabled:focus-visible::-webkit-slider-thumb {
+  background-color: var(--moo-muted-surface);
+  border-color: var(--moo-disabled-foreground);
+  box-shadow: none;
+}
+
+.slider-input:disabled:focus-visible::-moz-range-thumb,
+.slider[data-slider-dragging] .slider-input:disabled::-moz-range-thumb,
+.slider[data-slider-pointer-focus] .slider-input:disabled:focus-visible::-moz-range-thumb {
+  background-color: var(--moo-muted-surface);
+  border-color: var(--moo-disabled-foreground);
+  box-shadow: none;
+}
+
+.slider:has(.slider-input:disabled) .slider-track {
+  cursor: default;
+}
+
+.slider:has(.slider-input:disabled) .slider-range {
+  background-color: var(--moo-disabled-foreground);
+}
+
+.slider--range .slider-input--upper {
+  z-index: 2;
+}
+
+.slider--vertical {
+  width: max-content;
+}
+
+.slider--vertical [data-slider-output] {
+  display: inline-block;
+  min-width: 3ch;
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+.slider--vertical .slider-track {
+  justify-content: center;
+  justify-self: center;
+  width: $slider-thumb-size;
+  height: $input-height * 4;
+}
+
+.slider--vertical .slider-track::before {
+  inset-block: 0;
+  inset-inline: auto;
+  width: $progress-height;
+  height: auto;
+  transform: none;
+}
+
+.slider--vertical .slider-range {
+  inset-block-start: calc(100% - var(--moo-slider-end, 0%));
+  inset-block-end: var(--moo-slider-start, 0%);
+  inset-inline-start: 50%;
+  inset-inline-end: auto;
+  width: $progress-height;
+  height: auto;
+  transform: translateX(-50%);
+}
+
+.slider--vertical .slider-input {
+  width: 100%;
+  height: 100%;
+  writing-mode: vertical-lr;
+  direction: rtl;
+}

package/scss/components/_spinner.scss

@@ -0,0 +1,11 @@
+/* Spinner */
+.spinner [data-icon] {
+  width: $spacer;
+  height: $spacer;
+  animation: $moo-spinner-animation-name $spinner-animation-speed linear infinite;
+}
+
+.spinner-sm [data-icon] {
+  width: $spacer * 0.75;
+  height: $spacer * 0.75;
+}

package/scss/components/_switch.scss

@@ -0,0 +1,30 @@
+/* Switch */
+.form-switch .form-check-input {
+  height: $moo-switch-height;
+}
+
+:scope[data-bs-theme="light"] .form-switch .form-check-input:checked {
+  --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
+
+  background-color: var(--moo-primary);
+  border-color: var(--moo-primary);
+  filter: none;
+}
+
+:scope[data-bs-theme="dark"] .form-switch .form-check-input:checked {
+  --#{$prefix}form-switch-bg: #{escape-svg($moo-switch-checked-bg-image-dark)};
+
+  background-color: var(--moo-primary);
+  border-color: var(--moo-primary);
+  filter: none;
+}
+
+:scope[data-bs-theme="light"] .form-switch .form-check-input:focus:active:not(:checked),
+:scope[data-bs-theme="light"] .form-switch .form-check-input:focus:not(:focus-visible):not(:checked) {
+  --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
+}
+
+:scope[data-bs-theme="dark"] .form-switch .form-check-input:focus:active:not(:checked),
+:scope[data-bs-theme="dark"] .form-switch .form-check-input:focus:not(:focus-visible):not(:checked) {
+  --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
+}

package/scss/components/_table.scss

@@ -0,0 +1,12 @@
+/* Table */
+.card .table {
+  --bs-table-bg: #{$moo-table-contained-bg};
+}
+
+.table-responsive:not(.scroll-fade-x):has(.table-row-actions > [aria-expanded="true"]) {
+  overflow: visible;
+}
+
+.table-row-actions:has(> [aria-expanded="true"]) {
+  z-index: $zindex-dropdown;
+}

package/scss/components/_tabs.scss

@@ -0,0 +1,116 @@
+/* Tabs */
+.tabs-list {
+  display: inline-flex;
+  gap: $moo-tabs-list-gap;
+  padding: $moo-tabs-list-padding;
+  background-color: var(--moo-muted-surface);
+  border-radius: var(--bs-border-radius-lg);
+}
+
+.tabs-list .nav-link {
+  padding: $moo-tabs-trigger-padding-y $moo-tabs-trigger-padding-x;
+  font-size: $font-size-base;
+  font-weight: 500;
+  color: var(--bs-secondary-text-emphasis);
+  border-radius: var(--bs-border-radius);
+  cursor: default;
+  @include transition($transition-base);
+}
+
+.tabs-list .nav-link:hover {
+  color: var(--moo-foreground);
+}
+
+.tabs-list .nav-link:not(.active, .disabled):hover {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.tabs-list .nav-link:focus:not(:focus-visible) {
+  outline: 0;
+  box-shadow: none;
+}
+
+.tabs-list .nav-link.active {
+  color: var(--moo-foreground);
+  background-color: var(--moo-surface);
+  box-shadow: var(--bs-box-shadow-sm);
+}
+
+.tabs-list .nav-link.active:focus-visible {
+  border-color: var(--moo-ring);
+  outline: 0;
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
+}
+
+.tabs-list:has(.nav-link:hover) .nav-link.active:not(:hover) {
+  background-color: var(--moo-surface);
+  box-shadow: var(--bs-box-shadow-sm);
+}
+
+.tabs--vertical {
+  display: flex;
+  align-items: flex-start;
+  gap: $spacer;
+  width: 100%;
+  max-width: 100%;
+}
+
+.tabs--vertical .tabs-list {
+  flex: 0 0 auto;
+}
+
+.tabs--vertical .nav-link {
+  justify-content: flex-start;
+  text-align: start;
+}
+
+.tabs--vertical .tab-content {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin-top: 0;
+}
+
+@include media-breakpoint-down(sm) {
+  .tabs--vertical {
+    flex-direction: column;
+  }
+
+  .tabs--vertical .tabs-list {
+    flex-direction: row !important;
+  }
+}
+
+.tabs-list .nav-link:disabled,
+.tabs-list .nav-link.disabled {
+  color: var(--moo-disabled-foreground);
+  opacity: var(--moo-disabled-control-opacity);
+  pointer-events: none;
+}
+
+.tab-content {
+  display: grid;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  margin-top: $moo-tabs-content-gap;
+}
+
+.tab-content > .tab-pane {
+  grid-area: 1 / 1;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.16s ease, visibility 0s linear 0.16s;
+}
+
+.tab-content > .active {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition-delay: 0s;
+}

package/scss/components/_textarea.scss

@@ -0,0 +1,8 @@
+/* Textarea */
+textarea.form-control:not(.form-control-sm, .form-control-lg) {
+  padding: $input-btn-padding-y-lg $input-btn-padding-x;
+}
+
+textarea.form-control:disabled {
+  resize: none;
+}

package/scss/components/_toast.scss

@@ -0,0 +1,116 @@
+/* Toast */
+.toast {
+  --bs-toast-border-radius: var(--bs-border-radius-lg);
+  --bs-toast-border-color: var(--moo-border);
+  --bs-toast-bg: var(--bs-body-bg);
+  --bs-toast-box-shadow: var(--bs-box-shadow-lg);
+  --bs-toast-header-bg: var(--bs-body-bg);
+  --bs-toast-padding-x: #{$spacer};
+}
+
+.toast-container {
+  z-index: var(--bs-toast-zindex, #{$zindex-toast});
+}
+
+.toast-header strong {
+  font-weight: $font-weight-medium;
+}
+
+.toast-status-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  margin-inline-end: $moo-toast-status-icon-gap;
+  color: var(--bs-secondary-color);
+}
+
+.toast-status-icon [data-icon] {
+  width: $moo-toast-status-icon-size;
+  height: $moo-toast-status-icon-size;
+}
+
+.toast[data-toast-variant="success"] .toast-status-icon {
+  color: var(--moo-success);
+}
+
+.toast[data-toast-variant="info"] .toast-status-icon {
+  color: var(--moo-info);
+}
+
+.toast[data-toast-variant="warning"] .toast-status-icon {
+  color: var(--moo-warning);
+}
+
+.toast[data-toast-variant="destructive"] .toast-status-icon {
+  color: var(--moo-destructive);
+}
+
+.toast[data-toast-variant="loading"] .toast-status-icon [data-icon] {
+  animation: $moo-spinner-animation-name $spinner-animation-speed linear infinite;
+}
+
+.toast-container--stacked[data-toast-stack="deck"] {
+  --moo-toast-stack-gap: #{$moo-toast-stack-gap};
+  --moo-toast-stack-peek: #{$moo-toast-stack-peek};
+  --moo-toast-stack-scale-step: #{$moo-toast-stack-scale-step};
+  --moo-toast-stack-min-scale: #{$moo-toast-stack-min-scale};
+  --moo-toast-stack-enter-y: #{$moo-toast-stack-enter-y};
+}
+
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active] {
+  bottom: 1rem !important;
+  inset-inline-end: 1rem !important;
+  height: 0;
+  max-width: calc(100vw - 2rem);
+  padding: 0 !important;
+  width: unquote("min(24rem, calc(100vw - 2rem))");
+}
+
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active] > .toast[data-toast-stack-index] {
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  max-width: none;
+  margin-bottom: 0;
+  position: absolute;
+  width: 100%;
+  transform: translateY(var(--moo-toast-stack-collapsed-y, 0px))
+    scale(var(--moo-toast-stack-scale, 1));
+  transform-origin: bottom center;
+  z-index: var(--moo-toast-stack-z, 1);
+  transition:
+    transform $moo-toast-stack-transition-duration $moo-toast-stack-transition-timing-function,
+    opacity $moo-toast-stack-transition-duration ease,
+    height $moo-toast-stack-height-transition-duration ease;
+}
+
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active] > .toast[data-toast-stack-entering] {
+  transform: translateY(calc(var(--moo-toast-stack-collapsed-y, 0px) + var(--moo-toast-stack-enter-y, 150%)))
+    scale(var(--moo-toast-stack-scale, 1));
+}
+
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active] > .toast[data-toast-stack-limited] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active]:hover > .toast[data-toast-stack-index],
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active]:focus-within > .toast[data-toast-stack-index],
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active][data-toast-stack-hovering] > .toast[data-toast-stack-index] {
+  transform: translateY(var(--moo-toast-stack-expanded-y, 0px)) scale(1);
+}
+
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active]:hover > .toast[data-toast-stack-entering],
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active]:focus-within > .toast[data-toast-stack-entering],
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active][data-toast-stack-hovering] > .toast[data-toast-stack-entering] {
+  transform: translateY(calc(var(--moo-toast-stack-collapsed-y, 0px) + var(--moo-toast-stack-enter-y, 150%)))
+    scale(var(--moo-toast-stack-scale, 1));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toast[data-toast-variant="loading"] .toast-status-icon [data-icon] {
+    animation: none;
+  }
+
+  .toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active] > .toast[data-toast-stack-index] {
+    transition: none;
+  }
+}

package/scss/components/_toggle_group.scss

@@ -0,0 +1,17 @@
+/* Toggle Group */
+.toggle-group > .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
+  transform: none;
+}
+
+.toggle-group > .btn-check:checked + .btn {
+  --bs-btn-active-color: var(--moo-primary-foreground);
+  --bs-btn-active-bg: var(--moo-primary);
+  --bs-btn-active-border-color: var(--moo-primary);
+}
+
+.toggle-group > .btn-check:focus-visible + .btn,
+.toggle-group > .btn-check:checked:focus-visible + .btn {
+  border-color: var(--moo-ring);
+  outline: 0;
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
+}

package/scss/components/_tooltip.scss

@@ -0,0 +1,64 @@
+/* Tooltip */
+.tooltip {
+  --bs-tooltip-max-width: 20rem;
+  --bs-tooltip-padding-x: 0.75rem;
+  --bs-tooltip-padding-y: 0.375rem;
+  --bs-tooltip-font-size: 0.75rem;
+  --bs-tooltip-opacity: 1;
+  --moo-tooltip-motion-duration: #{$moo-tooltip-motion-duration};
+  --moo-tooltip-motion-easing: #{$moo-tooltip-motion-easing};
+  --moo-tooltip-motion-scale: #{$moo-tooltip-motion-scale};
+  --moo-tooltip-motion-translate: #{$moo-tooltip-motion-translate};
+  line-height: 1.333;
+}
+
+.tooltip.fade .tooltip-inner {
+  transition: transform var(--moo-tooltip-motion-duration) var(--moo-tooltip-motion-easing);
+  transform: scale(var(--moo-tooltip-motion-scale));
+  transform-origin: center;
+  will-change: transform;
+}
+
+.tooltip.show .tooltip-inner {
+  transform: translate3d(0, 0, 0) scale(1);
+}
+
+.bs-tooltip-top.fade:not(.show) .tooltip-inner,
+.bs-tooltip-auto[data-popper-placement^="top"].fade:not(.show) .tooltip-inner {
+  transform: translate3d(0, var(--moo-tooltip-motion-translate), 0) scale(var(--moo-tooltip-motion-scale));
+}
+
+.bs-tooltip-bottom.fade:not(.show) .tooltip-inner,
+.bs-tooltip-auto[data-popper-placement^="bottom"].fade:not(.show) .tooltip-inner {
+  transform: translate3d(0, calc(var(--moo-tooltip-motion-translate) * -1), 0) scale(var(--moo-tooltip-motion-scale));
+}
+
+.bs-tooltip-start.fade:not(.show) .tooltip-inner,
+.bs-tooltip-auto[data-popper-placement^="left"].fade:not(.show) .tooltip-inner {
+  transform: translate3d(var(--moo-tooltip-motion-translate), 0, 0) scale(var(--moo-tooltip-motion-scale));
+}
+
+.bs-tooltip-end.fade:not(.show) .tooltip-inner,
+.bs-tooltip-auto[data-popper-placement^="right"].fade:not(.show) .tooltip-inner {
+  transform: translate3d(calc(var(--moo-tooltip-motion-translate) * -1), 0, 0) scale(var(--moo-tooltip-motion-scale));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tooltip.fade .tooltip-inner {
+    transition: none;
+    transform: none;
+    will-change: auto;
+  }
+}
+
+.tooltip-trigger {
+  color: var(--moo-foreground);
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: var(--moo-muted-foreground);
+  text-underline-offset: 0.2em;
+}
+
+.tooltip-inner kbd {
+  margin-inline-start: $kbd-padding-x;
+}

package/scss/components/sidebar/_base.scss

@@ -0,0 +1,86 @@
+
+.sidebar-inner {
+  position: sticky;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100svh;
+  max-height: 100svh;
+  background: var(--moo-sidebar);
+}
+
+.sidebar-header,
+.sidebar-footer {
+  display: flex;
+  flex-direction: column;
+  gap: $spacer * 0.25;
+  padding: $spacer * 0.5;
+}
+
+.sidebar-content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: $spacer * 0.5;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.sidebar-input {
+  width: 100%;
+  padding: $spacer * 0.25;
+}
+
+.sidebar-separator {
+  display: flex;
+}
+
+.sidebar-menu-skeleton {
+  display: flex;
+  align-items: center;
+  gap: $spacer * 0.25;
+  min-height: $spacer * 2;
+  padding-inline: $spacer * 0.5;
+}
+
+.sidebar-menu-skeleton__icon {
+  width: $spacer;
+  height: $spacer;
+}
+
+.sidebar-menu-skeleton__line {
+  flex: 1 1 auto;
+}
+
+.sidebar-group {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: $spacer * 0.5;
+}
+
+.sidebar-group-content {
+  display: block;
+}
+
+.sidebar-group-content--inline {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: $spacer * 0.25;
+}
+
+.sidebar-group-label {
+  display: flex;
+  align-items: center;
+  height: $spacer * 2;
+  padding-inline: $spacer * 0.5;
+  color: var(--moo-muted-foreground);
+  font-size: $font-size-base * 0.857;
+  font-weight: $font-weight-medium;
+}
+
+.sidebar-group:has(.sidebar-group-action) .sidebar-group-label {
+  padding-inline-end: $spacer * 2.5;
+}