wave-ui 3.28.0 → 4.0.0

package/src/wave-ui/components/w-tag.vue

@@ -93,19 +93,17 @@ export default {
 </script>
 
 <style lang="scss">
-@use "sass:math";
-
 .w-tag {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   vertical-align: middle;
-  border-radius: $border-radius;
+  border-radius: var(--w-border-radius);
   border: 1px solid color-mix(in srgb, var(--w-contrast-bg-color) 8%, transparent);
   background-color: color-mix(in srgb, var(--w-base-bg-color) 85%, transparent);
-  padding-left: 2 * $base-increment;
-  padding-right: 2 * $base-increment;
+  padding-left: calc(var(--w-base-increment) * 2);
+  padding-right: calc(var(--w-base-increment) * 2);
   cursor: default;
   user-select: none;
 
@@ -116,40 +114,40 @@ export default {
   &--no-border {border-color: transparent;}
   &--round {border-radius: 99em;}
   &--tile {border-radius: initial;}
-  &--shadow {box-shadow: $box-shadow;}
+  &--shadow {box-shadow: var(--w-box-shadow);}
 
   &.size--xs {
-    $font-size: math.round(0.7 * $base-font-size);
-    font-size: $font-size;
-    line-height: $font-size + 2px;
-    padding: math.round(0.25 * $base-increment) $base-increment;
+    --w-tag-font-size: round(nearest, calc(0.7 * var(--w-base-font-size)), 1px);
+    font-size: var(--w-tag-font-size);
+    line-height: calc(var(--w-tag-font-size) + 2px);
+    padding: calc(var(--w-base-increment) * 0.25) var(--w-base-increment);
   }
   &.size--sm {
-    $font-size: math.round(0.82 * $base-font-size);
-    font-size: $font-size;
-    line-height: $font-size + 2px;
-    padding: math.round(0.25 * $base-increment) $base-increment;
+    --w-tag-font-size: round(nearest, calc(0.82 * var(--w-base-font-size)), 1px);
+    font-size: var(--w-tag-font-size);
+    line-height: calc(var(--w-tag-font-size) + 2px);
+    padding: calc(var(--w-base-increment) * 0.25) var(--w-base-increment);
   }
   &.size--md {
-    $font-size: math.round(0.85 * $base-font-size);
-    font-size: $font-size;
-    line-height: $font-size + 4px;
-    padding-top: math.round(0.25 * $base-increment);
-    padding-bottom: math.round(0.25 * $base-increment);
+    --w-tag-font-size: round(nearest, calc(0.85 * var(--w-base-font-size)), 1px);
+    font-size: var(--w-tag-font-size);
+    line-height: calc(var(--w-tag-font-size) + 4px);
+    padding-top: calc(var(--w-base-increment) * 0.25);
+    padding-bottom: calc(var(--w-base-increment) * 0.25);
   }
   &.size--lg {
-    $font-size: math.round(1.1 * $base-font-size);
-    font-size: $font-size;
-    line-height: $font-size + 4px;
-    padding-top: math.round(0.5 * $base-increment);
-    padding-bottom: math.round(0.5 * $base-increment);
+    --w-tag-font-size: round(nearest, calc(1.1 * var(--w-base-font-size)), 1px);
+    font-size: var(--w-tag-font-size);
+    line-height: calc(var(--w-tag-font-size) + 4px);
+    padding-top: calc(var(--w-base-increment) * 0.5);
+    padding-bottom: calc(var(--w-base-increment) * 0.5);
   }
   &.size--xl {
-    $font-size: math.round(1.3 * $base-font-size);
-    font-size: $font-size;
-    line-height: $font-size + 4px;
-    padding-top: math.round(1 * $base-increment);
-    padding-bottom: math.round(1 * $base-increment);
+    --w-tag-font-size: round(nearest, calc(1.3 * var(--w-base-font-size)), 1px);
+    font-size: var(--w-tag-font-size);
+    line-height: calc(var(--w-tag-font-size) + 4px);
+    padding-top: var(--w-base-increment);
+    padding-bottom: var(--w-base-increment);
   }
 
   &--clickable {
@@ -161,7 +159,7 @@ export default {
       margin-left: 3px;
       margin-right: -3px;
       padding: 1px;
-      transition: $transition-duration;
+      transition: var(--w-transition-duration);
     }
     &.size--lg .w-tag__closable,
     &.size--xl .w-tag__closable {
@@ -178,31 +176,30 @@ export default {
       content: '';
       position: absolute;
       inset: 0;
-      opacity: 0;
       background-color: transparent;
       // As this overlay is a smaller rectangle, the radius must be smaller to cover perfectly.
-      border-radius: $border-radius - 1;
+      border-radius: calc(var(--w-border-radius) - 1px);
       transition: 0.2s;
     }
     &.w-tag--round:before {border-radius: inherit;}
 
     // Hover state.
-    &:hover:before {background-color: currentColor;opacity: 0.06;}
+    &:hover:before {background-color: color-mix(in srgb, currentColor 6%, transparent);}
     &--dark:hover:before {background-color: color-mix(in srgb, var(--w-base-bg-color) 12%, transparent);opacity: 1;}
     &--outline:hover:before,
-    &--text:hover:before {background-color: currentColor;opacity: 0.12;}
+    &--text:hover:before {background-color: color-mix(in srgb, currentColor 12%, transparent);}
 
     // Focus state.
-    &:focus:before {background-color: currentColor;opacity: 0.2;}
+    &:focus:before {background-color: color-mix(in srgb, currentColor 20%, transparent);}
     &--dark:focus:before {background-color: color-mix(in srgb, var(--w-base-bg-color) 12%, transparent);}
     &--outline:focus:before,
-    &--text:focus:before {background-color: currentColor;opacity: 0.12;}
+    &--text:focus:before {background-color: color-mix(in srgb, currentColor 12%, transparent);}
 
     // Active state.
-    &:active:before {background-color: currentColor;opacity: 0.2;}
+    &:active:before {background-color: color-mix(in srgb, currentColor 20%, transparent);}
     &--dark:active:before {background-color: color-mix(in srgb, var(--w-base-bg-color) 20%, transparent);}
     &--outline:active:before,
-    &--text:active:before {background-color: currentColor;opacity: 0.2;}
+    &--text:active:before {background-color: color-mix(in srgb, currentColor 20%, transparent);}
   }
 }
 </style>

package/src/wave-ui/components/w-textarea.vue

@@ -237,7 +237,7 @@ $inactive-color: #777;
   display: flex;
   flex-grow: 1;
   flex-wrap: wrap;
-  font-size: $base-font-size;
+  font-size: var(--w-base-font-size);
 
   @include themeable;
 
@@ -247,15 +247,15 @@ $inactive-color: #777;
     position: relative;
     display: inline-flex;
     flex: 1 1 auto;
-    min-height: $form-field-height;
-    border-radius: $border-radius;
-    border: $border;
-    transition: border $transition-duration;
+    min-height: var(--w-form-field-height);
+    border-radius: var(--w-border-radius);
+    border: var(--w-border);
+    transition: border var(--w-transition-duration);
 
     .w-textarea[class^="bdrs"] &, .w-textarea[class*=" bdrs"] & {border-radius: inherit;}
   }
 
-  &--floating-label &__textarea-wrap {margin-top: 4 * $base-increment;}
+  &--floating-label &__textarea-wrap {margin-top: calc(var(--w-base-increment) * 4);}
 
   &__textarea-wrap--underline {
     border-bottom-left-radius: initial;
@@ -264,7 +264,7 @@ $inactive-color: #777;
   }
 
   &__textarea-wrap--tile {border-radius: initial;}
-  &__textarea-wrap--shadow {box-shadow: $box-shadow;}
+  &__textarea-wrap--shadow {box-shadow: var(--w-box-shadow);}
 
   &--focused &__textarea-wrap {border-color: currentColor;}
 
@@ -277,7 +277,7 @@ $inactive-color: #777;
     width: 100%;
     height: 0;
     border-bottom: 2px solid currentColor;
-    transition: $transition-duration;
+    transition: var(--w-transition-duration);
     transform: scaleX(0);
     pointer-events: none;
   }
@@ -290,12 +290,12 @@ $inactive-color: #777;
     width: 100%;
     height: 100%;
     font: inherit;
-    line-height: $textarea-line-height;
+    line-height: var(--w-textarea-line-height);
     color: inherit;
     background: none;
     border: none;
     outline: none;
-    padding: $base-increment (2 * $base-increment);
+    padding: var(--w-base-increment) calc(var(--w-base-increment) * 2);
     resize: none;
 
     .w-textarea--resizable & {resize: vertical;}
@@ -309,7 +309,7 @@ $inactive-color: #777;
     .w-textarea--inner-icon-right & {padding-right: 27px;}
 
     .w-textarea--disabled & {
-      color: $disabled-color;
+      color: var(--w-disabled-color);
       cursor: not-allowed;
       -webkit-tap-highlight-color: transparent;
     }
@@ -319,7 +319,7 @@ $inactive-color: #777;
 
   // Icons inside.
   // ------------------------------------------------------
-  &__icon {position: absolute;margin-top: $base-increment;}
+  &__icon {position: absolute;margin-top: var(--w-base-increment);}
   &__icon--inner-left {left: 6px;}
   &__icon--inner-right {right: 6px;}
   &--no-padding &__icon--inner-left {left: 1px;}
@@ -328,7 +328,7 @@ $inactive-color: #777;
   .w-textarea--focused &__icon {color: currentColor;}
 
   &--disabled &__icon {
-    color: $disabled-color;
+    color: var(--w-disabled-color);
     cursor: not-allowed;
     -webkit-tap-highlight-color: transparent;
   }
@@ -336,21 +336,21 @@ $inactive-color: #777;
   // Label.
   // ------------------------------------------------------
   &__label {
-    transition: color $transition-duration;
+    transition: color var(--w-transition-duration);
     cursor: pointer;
     align-self: flex-start;
     user-select: none;
 
     &--left {
-      margin-top: $base-increment;
-      margin-right: 2 * $base-increment;
+      margin-top: var(--w-base-increment);
+      margin-right: calc(var(--w-base-increment) * 2);
     }
     &--right {
-      margin-top: $base-increment;
-      margin-left: 2 * $base-increment;
+      margin-top: var(--w-base-increment);
+      margin-left: calc(var(--w-base-increment) * 2);
     }
     .w-textarea--disabled & {
-      color: $disabled-color;
+      color: var(--w-disabled-color);
       cursor: not-allowed;
       -webkit-tap-highlight-color: transparent;
     }
@@ -362,9 +362,9 @@ $inactive-color: #777;
 
   &__label--inside {
     position: absolute;
-    top: $base-increment;
+    top: var(--w-base-increment);
     left: 0;
-    padding-left: 2 * $base-increment;
+    padding-left: calc(var(--w-base-increment) * 2);
     white-space: nowrap;
     transform: translateY(0%);
     pointer-events: none;
@@ -379,7 +379,7 @@ $inactive-color: #777;
 
     .w-textarea--floating-label & {
       transform-origin: 0 0;
-      transition: $transition-duration ease;
+      transition: var(--w-transition-duration) ease;
     }
 
     // move label with underline style.

package/src/wave-ui/components/w-timeline.vue

@@ -43,14 +43,14 @@ export default {
 
 <style lang="scss">
 .w-timeline {
-  margin-left: $base-increment;
+  margin-left: var(--w-base-increment);
 
   @include themeable;
 }
 
 .w-timeline-item {
-  padding-left: 5 * $base-increment;
-  padding-bottom: 3 * $base-increment;
+  padding-left: calc(var(--w-base-increment) * 5);
+  padding-bottom: calc(var(--w-base-increment) * 3);
   list-style-type: none;
   position: relative;
 
@@ -61,10 +61,10 @@ export default {
     position: absolute;
     top: 2px;
     left: 0;
-    background-color: $timeline-bullet-color;
+    background-color: var(--w-timeline-bullet-color);
     border-radius: 1em;
     border: 1px solid currentColor;
-    width: $base-font-size;
+    width: var(--w-base-font-size);
     aspect-ratio: 1;
     min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
     transform: translateX(-50%);
@@ -80,7 +80,7 @@ export default {
     top: 2px;
     bottom: -2px;
     left: -1px;
-    border-left: 2px solid $timeline-bg-color;
+    border-left: 2px solid var(--w-timeline-bg-color);
   }
 }
 </style>

package/src/wave-ui/components/w-toolbar.vue

@@ -69,8 +69,8 @@ export default {
   display: flex;
   flex: 1 1 auto;
   align-items: center;
-  padding: (2 * $base-increment) (3 * $base-increment);
-  background-color: $toolbar-bg-color;
+  padding: calc(var(--w-base-increment) * 2) calc(var(--w-base-increment) * 3);
+  background-color: var(--w-toolbar-bg-color);
   z-index: 10;
 
   @include themeable;
@@ -83,30 +83,30 @@ export default {
   &--absolute.w-toolbar--right, &--fixed.w-toolbar--right {left: auto;right: 0;}
 
   // Horizontal.
-  &--top {border-bottom: $border;}
+  &--top {border-bottom: var(--w-border);}
   &--bottom {
     bottom: 0;
     top: auto;
-    border-top: $border;
+    border-top: var(--w-border);
   }
 
   // Vertical.
   &--vertical {
-    padding: (2 * $base-increment);
+    padding: calc(var(--w-base-increment) * 2);
     flex-direction: column;
     flex-grow: 0;
     flex-shrink: 0;
   }
 
-  &--left {border-right: $border;}
+  &--left {border-right: var(--w-border);}
   &--right {
     right: 0;
     left: auto;
-    border-left: $border;
+    border-left: var(--w-border);
   }
 
   &--no-border, &--shadow {border-width: 0;}
-  &--shadow {box-shadow: $box-shadow;}
+  &--shadow {box-shadow: var(--w-box-shadow);}
 
   .w-app > & {z-index: 200;}
 

package/src/wave-ui/components/w-tooltip.vue

@@ -1,13 +1,17 @@
 <template lang="pug">
-slot(name="activator" :on="activatorEventHandlers")
-transition(:name="transitionName" appear @after-leave="onAfterLeave")
-  .w-tooltip(
-    v-if="detachableVisible"
-    ref="detachable"
-    :key="tooltipInstanceId"
-    :class="classes"
-    :style="styles")
-    slot
+slot(name="activator")
+slot(v-if="!$slots.activator")
+teleport(:to="teleportTarget" :disabled="!teleportTarget")
+  transition(:name="transitionName" appear @after-leave="onAfterLeave")
+    .w-tooltip(
+      v-if="detachableVisible"
+      ref="detachable"
+      :key="tooltipInstanceId"
+      :class="classes"
+      :style="styles")
+      template(v-if="tooltip") {{ tooltip }}
+      slot(v-else-if="$slots.tooltip" name="tooltip")
+      slot(v-else-if="$slots.activator")
 </template>
 
 <script>
@@ -26,6 +30,7 @@ export default {
 
   props: {
     modelValue: {},
+    tooltip: { type: String }, // Simple string content shorthand; use the #tooltip slot for rich content.
     showOnClick: { type: Boolean },
     color: { type: String },
     bgColor: { type: String },
@@ -239,12 +244,12 @@ export default {
   display: table;
 
   position: absolute;
-  padding: $base-increment math.round(1.5 * $base-increment);
-  border-radius: $border-radius;
-  border: 1px solid $tooltip-border-color;
-  background-color: $tooltip-bg-color;
+  padding: var(--w-base-increment) calc(var(--w-base-increment) * 1.5);
+  border-radius: var(--w-border-radius);
+  border: 1px solid var(--w-tooltip-border-color);
+  background-color: var(--w-tooltip-bg-color);
   pointer-events: none;
-  color: $tooltip-color;
+  color: var(--w-tooltip-color);
   align-items: center;
   max-width: 300px;
   width: max-content; // Not supported in IE11. :/
@@ -257,15 +262,15 @@ export default {
   &--tile {border-radius: 0;}
   &--round {
     border-radius: 99em;
-    padding: $base-increment math.round(2.5 * $base-increment);
+    padding: var(--w-base-increment) calc(var(--w-base-increment) * 2.5);
   }
-  &--shadow {box-shadow: $box-shadow;}
+  &--shadow {box-shadow: var(--w-box-shadow);}
   &--no-border {border: none;}
 
-  &--top {margin-top: -3 * $base-increment;}
-  &--bottom {margin-top: 3 * $base-increment;}
-  &--left {margin-left: -3 * $base-increment;}
-  &--right {margin-left: 3 * $base-increment;}
+  &--top {margin-top: calc(var(--w-base-increment) * -3);}
+  &--bottom {margin-top: calc(var(--w-base-increment) * 3);}
+  &--left {margin-left: calc(var(--w-base-increment) * -3);}
+  &--right {margin-left: calc(var(--w-base-increment) * 3);}
 
   &.size--xs {font-size: 0.75rem;}
   &.size--sm {font-size: 0.83rem;}
@@ -292,30 +297,30 @@ export default {
 .w-tooltip-slide-fade-down-enter-active, .w-tooltip-slide-fade-down-leave-active,
 .w-tooltip-slide-fade-left-enter-active, .w-tooltip-slide-fade-left-leave-active,
 .w-tooltip-slide-fade-right-enter-active, .w-tooltip-slide-fade-right-leave-active {
-  transition: margin $transition-duration ease-in-out, opacity $transition-duration ease-in-out;
+  transition: margin var(--w-transition-duration) ease-in-out, opacity var(--w-transition-duration) ease-in-out;
 }
 
 // slide-fade-up.
 .w-tooltip-slide-fade-up-enter-from, .w-tooltip-slide-fade-up-leave-to {
-  margin-top: -2 * $base-increment;
+  margin-top: calc(var(--w-base-increment) * -2);
   opacity: 0;
 }
 
 // slide-fade-down.
 .w-tooltip-slide-fade-down-enter-from, .w-tooltip-slide-fade-down-leave-to {
-  margin-top: 2 * $base-increment;
+  margin-top: calc(var(--w-base-increment) * 2);
   opacity: 0;
 }
 
 // Slide-fade-left.
 .w-tooltip-slide-fade-left-enter-from, .w-tooltip-slide-fade-left-leave-to {
-  margin-left: -2 * $base-increment;
+  margin-left: calc(var(--w-base-increment) * -2);
   opacity: 0;
 }
 
 // Slide-fade-right.
 .w-tooltip-slide-fade-right-enter-from, .w-tooltip-slide-fade-right-leave-to {
-  margin-left: 2 * $base-increment;
+  margin-left: calc(var(--w-base-increment) * 2);
   opacity: 0;
 }
 // --------------------------------------------------------

package/src/wave-ui/components/w-tree.vue

@@ -9,7 +9,9 @@ ul.w-tree(:class="classes")
       :is="getTreeItemComponent(item)"
       v-bind="item.route && { [!$router || hasExternalLink(item) ? 'href' : 'to']: item.route }"
       @click="!disabled && !item.disabled && onLabelClick(item, $event)"
+      @pointerdown="onLabelPointerDown(item, $event)"
       @keydown="!disabled && !item.disabled && onLabelKeydown(item, $event)"
+      :class="itemLabelClasses(item)"
       :tabindex="getTreeItemTabindex(item)")
       //- @click.stop to not follow link if item is a link.
       w-button.w-tree__item-expand(
@@ -59,6 +61,7 @@ ul.w-tree(:class="classes")
 </template>
 
 <script>
+import RippleMixin from '../mixins/ripple'
 import { consoleWarn } from '../utils/console'
 /**
  * @todo:
@@ -67,6 +70,9 @@ import { consoleWarn } from '../utils/console'
 
 export default {
   name: 'w-tree',
+
+  mixins: [RippleMixin],
+
   props: {
     modelValue: { type: [Object, Array] },
     data: { type: [Object, Array], required: true },
@@ -200,6 +206,16 @@ export default {
       return true // Just to chain instructions.
     },
 
+    isItemRippleActive (item) {
+      return this.rippleActive && this.selectable && !this.disabled && !item.disabled
+    },
+
+    itemLabelClasses (item) {
+      return {
+        'w-ripple': this.isItemRippleActive(item)
+      }
+    },
+
     onLabelClick (item, e) {
       const route = item[this.itemRouteKey]
       if (route && this.$router && !this.hasExternalLink(item)) e.preventDefault()
@@ -212,6 +228,11 @@ export default {
       this.emitItemSelection(item, e) // Always emitting on click, but different event for selection.
     },
 
+    onLabelPointerDown (item, e) {
+      if (!this.isItemRippleActive(item) || e.target.closest?.('.w-tree__item-expand')) return
+      this.onRipple(e)
+    },
+
     onLabelKeydown (item, e) {
       // Keys: 13 enter, 32 space, 37 arrow left, 38 arrow up, 39 arrow right, 40 arrow down.
       if (!(e.metaKey || e.ctrlKey || e.altKey || e.shiftKey) && [13, 32, 37, 38, 39, 40].includes(e.keyCode)) {
@@ -339,16 +360,14 @@ export default {
 </script>
 
 <style lang="scss">
-$expand-icon-size: 20px;
-
 .w-tree {
+  --w-tree-expand-icon-size: 20px;
   margin: 0;
 
   // Tree items.
   // ------------------------------------------------------
   &__item {list-style-type: none;}
-  &__item--branch {}
-  &__item--leaf {margin-left: $base-increment * 5 + 2px;}
+  &__item--leaf {margin-left: calc(var(--w-base-increment) * 5 + 2px);}
   &--no-expand-button &__item--leaf {margin-left: 0;}
 
   // Tree item label.
@@ -364,21 +383,21 @@ $expand-icon-size: 20px;
       position: absolute;
       top: -1px;
       bottom: -1px;
-      left: - $base-increment + 2px;
-      right: - $base-increment - 2px;
-      border-radius: $border-radius;
+      left: calc(var(--w-base-increment) * -1 + 2px);
+      right: calc(var(--w-base-increment) * -1 - 2px);
+      border-radius: var(--w-border-radius);
     }
-    &:hover:before {background-color: $primary;opacity: 0.1;}
-    &:focus-visible:before {background-color: $primary;opacity: 0.15;}
+    &:hover:before {background-color: var(--w-primary-color);opacity: 0.1;}
+    &:focus-visible:before {background-color: var(--w-primary-color);opacity: 0.15;}
   }
   &.w-tree--selectable &__item-label {cursor: pointer;}
   &.w-tree--selectable &__item--disabled &__item-label {cursor: auto;}
   &__item--leaf &__item-label:before {
-    left: - $base-increment;
-    right: - $base-increment;
+    left: calc(var(--w-base-increment) * -1);
+    right: calc(var(--w-base-increment) * -1);
   }
   &__item--selected > &__item-label:before {
-    background-color: $primary;
+    background-color: var(--w-primary-color);
     opacity: 0.25;
   }
   &__item--disabled &__item-label {opacity: 0.5;}
@@ -388,21 +407,21 @@ $expand-icon-size: 20px;
 
   &__item--branch > &__item-label {cursor: pointer;}
   &__item--disabled > &__item-label {
-    color: $disabled-color;
+    color: var(--w-disabled-color);
     cursor: not-allowed;
     -webkit-tap-highlight-color: transparent;
   }
   &__item--unexpandable > &__item-label {
-    margin-left: $expand-icon-size + 2px;
+    margin-left: calc(var(--w-tree-expand-icon-size) + 2px);
     cursor: auto;
   }
   &--disabled &__item-label {cursor: auto;}
   &--disabled &__item--branch > &__item-label {opacity: 0.5;}
 
-  &__item-icon {margin-right: $base-increment;}
+  &__item-icon {margin-right: var(--w-base-increment);}
 
   // Recursive children.
   // ------------------------------------------------------
-  .w-tree {margin-left: $base-increment * 5;}
+  .w-tree {margin-left: calc(var(--w-base-increment) * 5);}
 }
 </style>

package/src/wave-ui/core.js

@@ -91,7 +91,7 @@ export default class WaveUI {
       document.documentElement.setAttribute('data-theme', theme)
       document.head.querySelector('#wave-ui-colors')?.remove?.()
       const themeColors = this.config.colors[this.theme]
-      injectColorsCSSInDOM(themeColors, this.config.css.colorShadeCssVariables)
+      injectColorsCSSInDOM(themeColors, colorPalette, this.config.css.colorShadeCssVariables)
       this.colors = flattenColors(themeColors, colorPalette)
     },
 
@@ -147,6 +147,14 @@ export default class WaveUI {
           const wApp = document.querySelector(config.on) || document.body
           wApp.classList.add('w-app')
 
+          // Add any custom app classes from config.
+          if (config.css.appClasses) {
+            const classesToAdd = typeof config.css.appClasses === 'string'
+              ? config.css.appClasses.split(' ').filter(c => c)
+              : config.css.appClasses
+            if (classesToAdd.length) wApp.classList.add(...classesToAdd)
+          }
+
           if (config.theme === 'auto') detectOSDarkMode($waveui) // Also switches the theme.
           else $waveui.switchTheme(config.theme, true)