wave-ui 3.18.0 → 3.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.18.0",
+  "version": "3.19.0",
   "description": "A UI framework for Vue.js 3 (and 2) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "homepage": "https://antoniandre.github.io/wave-ui",
@@ -18,14 +18,8 @@
   ],
   "exports": {
     ".": {
-      "import": {
-        "default": "./dist/wave-ui.es.js",
-        "types": "./dist/types/index.d.ts"
-      },
-      "require": {
-        "default": "./dist/wave-ui.umd.js",
-        "types": "./dist/types/index.d.ts"
-      }
+      "import": "./dist/wave-ui.es.js",
+      "require": "./dist/wave-ui.umd.js"
     },
     "./package.json": "./package.json",
     "./dist/*": "./dist/*",
@@ -49,39 +43,39 @@
     "ui"
   ],
   "devDependencies": {
-    "@eslint/js": "^9.14.0",
-    "@faker-js/faker": "^8.4.1",
+    "@eslint/js": "^9.21.0",
+    "@faker-js/faker": "^9.5.1",
     "@mdi/font": "^7.4.47",
     "@tsconfig/recommended": "^1.0.8",
-    "@typescript-eslint/eslint-plugin": "^8.12.2",
-    "@typescript-eslint/parser": "^8.12.2",
-    "@vitejs/plugin-vue": "^5.1.4",
+    "@typescript-eslint/eslint-plugin": "^8.25.0",
+    "@typescript-eslint/parser": "^8.25.0",
+    "@vitejs/plugin-vue": "^5.2.1",
     "autoprefixer": "^10.4.20",
-    "axios": "^1.7.7",
-    "eslint": "^9.14.0",
+    "axios": "^1.8.1",
+    "eslint": "^9.21.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-n": "^17.12.0",
-    "eslint-plugin-promise": "^7.1.0",
-    "eslint-plugin-vue": "^9.30.0",
+    "eslint-plugin-n": "^17.15.1",
+    "eslint-plugin-promise": "^7.2.1",
+    "eslint-plugin-vue": "^9.32.0",
     "font-awesome": "^4.7.0",
-    "globals": "^15.12.0",
-    "gsap": "^3.12.5",
+    "globals": "^16.0.0",
+    "gsap": "^3.12.7",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
-    "postcss": "^8.4.47",
+    "postcss": "^8.5.3",
     "pug": "^3.0.3",
-    "rollup-plugin-delete": "^2.1.0",
-    "sass": "^1.80.6",
-    "simple-syntax-highlighter": "^3.0.10",
-    "splitpanes": "^3.1.5",
-    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.12.2",
-    "vite": "^5.4.10",
+    "rollup-plugin-delete": "^3.0.0",
+    "sass": "^1.85.1",
+    "simple-syntax-highlighter": "^3.1.1",
+    "splitpanes": "^3.1.8",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.25.0",
+    "vite": "^6.2.0",
     "vite-svg-loader": "^5.1.0",
-    "vue": "^3.5.12",
-    "vue-router": "^4.4.5",
-    "vueperslides": "^3.5.1",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "vueperslides": "^3.6.0",
     "vuex": "^4.1.0"
   },
   "peerDependencies": {
@@ -95,7 +89,7 @@
     "dev": "vite",
     "build": "vite build --base /wave-ui/",
     "build-types": "tsc -p ./tsconfig.json",
-    "build-bundle": "BUNDLE=true vite build && npm run build-types && mv ./dist/style.css ./dist/wave-ui.css",
+    "build-bundle": "BUNDLE=true vite build && npm run build-types",
     "preview": "vite preview --base /wave-ui/",
     "lint": "vite lint",
     "publish-doc": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push --tag"

package/src/wave-ui/components/w-accordion/item.vue

@@ -117,6 +117,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-accordion__item {position: relative;}
 
 button.w-accordion__expand-icon {color: color-mix(in srgb, var(--w-base-color) 40%, transparent);}
@@ -135,7 +137,7 @@ button.w-accordion__expand-icon {color: color-mix(in srgb, var(--w-base-color) 4
   position: relative;
   display: flex;
   align-items: center;
-  font-size: round(1.2 * $base-font-size);
+  font-size: math.round(1.2 * $base-font-size);
   padding: 1 * $base-increment;
   user-select: none;
   cursor: pointer;
@@ -158,6 +160,7 @@ button.w-accordion__expand-icon {color: color-mix(in srgb, var(--w-base-color) 4
     background-color: currentColor;
     opacity: 0;
     transition: $fast-transition-duration;
+    pointer-events: none;
   }
 
   &:focus:before, &:hover:before {opacity: 0.03;}

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

@@ -131,6 +131,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-alert {
   position: relative;
   margin-top: 4 * $base-increment;
@@ -214,8 +216,8 @@ export default {
   &__dismiss.w-button {
     align-self: flex-start;
     margin-left: 2 * $base-increment;
-    margin-top: round(-0.5 * $base-increment);
-    margin-right: round(-0.5 * $base-increment);
+    margin-top: math.round(-0.5 * $base-increment);
+    margin-right: math.round(-0.5 * $base-increment);
   }
 
   & &__icon {
@@ -246,8 +248,8 @@ export default {
   // ------------------------------------------------------
   &.size--xs {padding-top: $base-increment;padding-bottom: $base-increment;}
   &.size--sm {padding-top: $base-increment;padding-bottom: $base-increment;}
-  &.size--md {padding-top: round(2 * $base-increment);padding-bottom: round(2 * $base-increment);}
-  &.size--lg {padding-top: round(3 * $base-increment);padding-bottom: round(2.5 * $base-increment);}
-  &.size--xl {padding-top: round(3 * $base-increment);padding-bottom: round(3 * $base-increment);}
+  &.size--md {padding-top: math.round(2 * $base-increment);padding-bottom: math.round(2 * $base-increment);}
+  &.size--lg {padding-top: math.round(3 * $base-increment);padding-bottom: math.round(2.5 * $base-increment);}
+  &.size--xl {padding-top: math.round(3 * $base-increment);padding-bottom: math.round(3 * $base-increment);}
 }
 </style>

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

@@ -92,6 +92,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-badge-wrap {
   position: relative;
   display: inline-flex;
@@ -105,9 +107,9 @@ export default {
   user-select: none;
   border-radius: 99em;
   // Always get an even number for better text vertical align.
-  height: round(1.1 * divide($base-font-size, 2)) * 2;
-  line-height: round(1.1 * divide($base-font-size, 2)) * 2;
-  min-width: round(1.1 * divide($base-font-size, 2)) * 2;
+  height: math.round(1.1 * divide($base-font-size, 2)) * 2;
+  line-height: math.round(1.1 * divide($base-font-size, 2)) * 2;
+  min-width: math.round(1.1 * divide($base-font-size, 2)) * 2;
   z-index: 1;
   padding: 0 $base-increment;
 
@@ -124,38 +126,38 @@ export default {
   // Sizes.
   &.size--xs {
     // Always get an even number for better text vertical alignment.
-    $height: round(divide($base-font-size, 2)) * 2;
-    font-size: round(0.67 * divide($base-font-size, 2)) * 2;
+    $height: math.round(divide($base-font-size, 2)) * 2;
+    font-size: math.round(0.67 * divide($base-font-size, 2)) * 2;
     height: $height;
     line-height: $height;
     min-width: $height;
 
-    &--round {width: $height;padding: 0 round(divide($height, 2));}
+    &--round {width: $height;padding: 0 math.round(divide($height, 2));}
   }
   &.size--sm {
-    $height: round(1.1 * divide($base-font-size, 2)) * 2;
-    font-size: round(0.75 * divide($base-font-size, 2)) * 2;
+    $height: math.round(1.1 * divide($base-font-size, 2)) * 2;
+    font-size: math.round(0.75 * divide($base-font-size, 2)) * 2;
     height: $height;
     line-height: $height;
     min-width: $height;
   }
   &.size--md {
-    $height: round(1.3 * divide($base-font-size, 2)) * 2;
-    font-size: round(0.9 * divide($base-font-size, 2)) * 2;
+    $height: math.round(1.3 * divide($base-font-size, 2)) * 2;
+    font-size: math.round(0.9 * divide($base-font-size, 2)) * 2;
     height: $height;
     line-height: $height;
     min-width: $height;
   }
   &.size--lg {
-    $height: round(1.5 * divide($base-font-size, 2)) * 2;
-    font-size: round(1.05 * divide($base-font-size, 2)) * 2;
+    $height: math.round(1.5 * divide($base-font-size, 2)) * 2;
+    font-size: math.round(1.05 * divide($base-font-size, 2)) * 2;
     height: $height;
     line-height: $height;
     min-width: $height;
   }
   &.size--xl {
-    $height: round(1.8 * divide($base-font-size, 2)) * 2;
-    font-size: round(1.2 * divide($base-font-size, 2)) * 2;
+    $height: math.round(1.8 * divide($base-font-size, 2)) * 2;
+    font-size: math.round(1.2 * divide($base-font-size, 2)) * 2;
     height: $height;
     line-height: $height;
     min-width: $height;
@@ -171,12 +173,12 @@ export default {
     &.w-badge--bottom {margin-bottom: -1 * $base-increment;}
     &.w-badge--left {margin-right: -3 * $base-increment;}
     &.w-badge--right {margin-left: -3 * $base-increment;}
-    &.w-badge--top.size--xs {margin-top: round(-0.5 * $base-increment);}
-    &.w-badge--bottom.size--xs {margin-bottom: round(-0.5 * $base-increment);}
-    &.w-badge--top.size--sm {margin-top: round(-0.75 * $base-increment);}
-    &.w-badge--bottom.size--sm {margin-bottom: round(-0.75 * $base-increment);}
-    &.w-badge--top.size--lg {margin-top: round(-1.5 * $base-increment);}
-    &.w-badge--bottom.size--lg {margin-bottom: round(-1.5 * $base-increment);}
+    &.w-badge--top.size--xs {margin-top: math.round(-0.5 * $base-increment);}
+    &.w-badge--bottom.size--xs {margin-bottom: math.round(-0.5 * $base-increment);}
+    &.w-badge--top.size--sm {margin-top: math.round(-0.75 * $base-increment);}
+    &.w-badge--bottom.size--sm {margin-bottom: math.round(-0.75 * $base-increment);}
+    &.w-badge--top.size--lg {margin-top: math.round(-1.5 * $base-increment);}
+    &.w-badge--bottom.size--lg {margin-bottom: math.round(-1.5 * $base-increment);}
     &.w-badge--top.size--xl {margin-top: -2 * $base-increment;}
     &.w-badge--bottom.size--xl {margin-bottom: -2 * $base-increment;}
   }
@@ -190,10 +192,10 @@ export default {
   &--shadow {box-shadow: $box-shadow;}
 
   &--dot.w-badge {min-width: 0;padding: 0;aspect-ratio: 1;}
-  &--dot.size--xs {height: round(1.35 * $base-increment);}
-  &--dot.size--sm {height: round(1.7 * $base-increment);}
-  &--dot.size--md {height: round(2.2 * $base-increment);}
-  &--dot.size--lg {height: round(2.75 * $base-increment);}
+  &--dot.size--xs {height: math.round(1.35 * $base-increment);}
+  &--dot.size--sm {height: math.round(1.7 * $base-increment);}
+  &--dot.size--md {height: math.round(2.2 * $base-increment);}
+  &--dot.size--lg {height: math.round(2.75 * $base-increment);}
   &--dot.size--xl {height: 3 * $base-increment;}
 }
 </style>

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

@@ -85,15 +85,17 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-breadcrumbs {
   display: flex;
   align-items: center;
 
-  &.size--xs {font-size: round(0.8 * $base-font-size);}
-  &.size--sm {font-size: round(0.9 * $base-font-size);}
-  &.size--md {font-size: round(1.05 * $base-font-size);}
-  &.size--lg {font-size: round(1.2 * $base-font-size);}
-  &.size--xl {font-size: round(1.4 * $base-font-size);}
+  &.size--xs {font-size: math.round(0.8 * $base-font-size);}
+  &.size--sm {font-size: math.round(0.9 * $base-font-size);}
+  &.size--md {font-size: math.round(1.05 * $base-font-size);}
+  &.size--lg {font-size: math.round(1.2 * $base-font-size);}
+  &.size--xl {font-size: math.round(1.4 * $base-font-size);}
 
   &__separator {
     margin-left: $base-increment;

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

@@ -145,6 +145,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 $spinner-size: 40;
 
 .w-button {
@@ -226,16 +228,16 @@ $spinner-size: 40;
   }
 
   // Sizes adjustments (always an even number for easier vertical alignments).
-  &.size--xs {height: round(1.25 * divide($base-font-size, 2)) * 2;}
-  &.size--sm {height: round(1.55 * divide($base-font-size, 2)) * 2;}
-  &.size--md {height: round(1.85 * divide($base-font-size, 2)) * 2;}
-  &.size--lg {height: round(2.2 * divide($base-font-size, 2)) * 2;}
-  &.size--xl {height: round(2.5 * divide($base-font-size, 2)) * 2;}
+  &.size--xs {height: math.round(1.25 * divide($base-font-size, 2)) * 2;}
+  &.size--sm {height: math.round(1.55 * divide($base-font-size, 2)) * 2;}
+  &.size--md {height: math.round(1.85 * divide($base-font-size, 2)) * 2;}
+  &.size--lg {height: math.round(2.2 * divide($base-font-size, 2)) * 2;}
+  &.size--xl {height: math.round(2.5 * divide($base-font-size, 2)) * 2;}
 
   &.size--xs {padding-left: $base-increment;padding-right: $base-increment;}
   &.size--xl {padding-left: 3 * $base-increment;padding-right: 3 * $base-increment;}
-  &--round.size--xs {padding-left: round(1.5 * $base-increment);padding-right: round(1.5 * $base-increment);}
-  &--round.size--xl {padding-left: round(4.5 * $base-increment);padding-right: round(4.5 * $base-increment);}
+  &--round.size--xs {padding-left: math.round(1.5 * $base-increment);padding-right: math.round(1.5 * $base-increment);}
+  &--round.size--xl {padding-left: math.round(4.5 * $base-increment);padding-right: math.round(4.5 * $base-increment);}
   &--icon.size--xs {padding-left: 0;padding-right: 0;}
   &--icon.size--xl {padding-left: 0;padding-right: 0;}
 

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

@@ -98,6 +98,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-icon {
   position: relative;
   display: inline-flex;
@@ -113,18 +115,18 @@ export default {
   // The aspect ratio will not work if the content overflows (needs overflow hidden, but we don't want that in the library).
   height: 1em;
 
-  &.size--xs {font-size: round(0.85 * $base-font-size);}
-  &.size--sm {font-size: round(1.15 * $base-font-size);}
-  &.size--md {font-size: round(1.4 * $base-font-size);}
-  &.size--lg {font-size: round(1.7 * $base-font-size);}
+  &.size--xs {font-size: math.round(0.85 * $base-font-size);}
+  &.size--sm {font-size: math.round(1.15 * $base-font-size);}
+  &.size--md {font-size: math.round(1.4 * $base-font-size);}
+  &.size--lg {font-size: math.round(1.7 * $base-font-size);}
   &.size--xl {font-size: 2 * $base-font-size;}
 
   // Always an even number to align well vertically in a button.
-  .w-button.size--xs & {font-size: round(0.95 * divide($base-font-size, 2)) * 2;}
+  .w-button.size--xs & {font-size: math.round(0.95 * divide($base-font-size, 2)) * 2;}
   .w-alert.size--xs & {font-size: $base-font-size;}
-  .w-button.size--sm &, .w-alert.size--sm & {font-size: round(1.15 * $base-font-size);}
-  // .w-button.size--md &, .w-alert.size--md & {font-size: round(1.4 * $base-font-size);}
-  .w-button.size--lg &, .w-alert.size--lg & {font-size: round(1.7 * $base-font-size);}
+  .w-button.size--sm &, .w-alert.size--sm & {font-size: math.round(1.15 * $base-font-size);}
+  // .w-button.size--md &, .w-alert.size--md & {font-size: math.round(1.4 * $base-font-size);}
+  .w-button.size--lg &, .w-alert.size--lg & {font-size: math.round(1.7 * $base-font-size);}
   .w-button.size--xl &, .w-alert.size--xl & {font-size: 2 * $base-font-size;}
 
   &:before {transition: transform $transition-duration;}

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

@@ -375,6 +375,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 $inactive-color: #777;
 
 .w-input {
@@ -602,8 +604,8 @@ $inactive-color: #777;
       padding-right: 0;
     }
     .w-input__input-wrap--round & {
-      padding-left: round(3 * $base-increment);
-      padding-right: round(3 * $base-increment);
+      padding-left: math.round(3 * $base-increment);
+      padding-right: math.round(3 * $base-increment);
     }
     .w-input--inner-icon-left & {left: 18px;}
     .w-input--no-padding.w-input--inner-icon-left & {left: 26px;}

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

@@ -282,6 +282,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-menu-wrap {display: none;}
 
 .w-menu {
@@ -296,7 +298,7 @@ export default {
   &--tile {border-radius: 0;}
   &--round {
     border-radius: 99em;
-    padding: $base-increment round(2.5 * $base-increment);
+    padding: $base-increment math.round(2.5 * $base-increment);
   }
   &--shadow {box-shadow: $box-shadow;}
 

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

@@ -163,6 +163,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-rating {
   display: inline-flex;
   align-items: center;
@@ -188,10 +190,10 @@ export default {
     .w-rating--readonly & {cursor: auto;}
 
     // Sizes.
-    &.size--xs {font-size: round(0.85 * $base-font-size);}
-    &.size--sm {font-size: round(1.15 * $base-font-size);}
-    &.size--md {font-size: round(1.4 * $base-font-size);}
-    &.size--lg {font-size: round(1.7 * $base-font-size);}
+    &.size--xs {font-size: math.round(0.85 * $base-font-size);}
+    &.size--sm {font-size: math.round(1.15 * $base-font-size);}
+    &.size--md {font-size: math.round(1.4 * $base-font-size);}
+    &.size--lg {font-size: math.round(1.7 * $base-font-size);}
     &.size--xl {font-size: 2 * $base-font-size;margin-left: 0;}
 
     &:before {font-size: 1.1em;}

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

@@ -424,6 +424,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-select {
   position: relative;
   display: flex;
@@ -620,7 +622,7 @@ export default {
       margin-left: 0;
     }
     .w-select__selection-wrap--round & {
-      margin-left: round(3 * $base-increment);
+      margin-left: math.round(3 * $base-increment);
     }
     .w-select--inner-icon-left & {left: 18px;}
     .w-select--no-padding.w-select--inner-icon-left & {left: 26px;}

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

@@ -262,6 +262,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-slider {
   position: relative;
   display: flex;
@@ -430,9 +432,9 @@ export default {
     position: absolute;
     left: 50%;
     bottom: 100%;
-    margin-bottom: round(3 * $base-increment);
+    margin-bottom: math.round(3 * $base-increment);
     transform: translateX(-50%);
-    padding: round(0.75 * $base-increment) (2 * $base-increment);
+    padding: math.round(0.75 * $base-increment) (2 * $base-increment);
     background-color: $slider-thumb-label-bg-color;
     border-radius: $border-radius;
     border: $border;

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

@@ -55,6 +55,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-spinner {
   position: relative;
   display: inline-flex;
@@ -64,10 +66,10 @@ export default {
   aspect-ratio: 1;
   min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
 
-  &.size--xs {font-size: round(0.9 * divide($base-font-size, 2)) * 2;}
-  &.size--sm {font-size: round(1.5 * $base-font-size);}
-  &.size--md {font-size: round(2 * $base-font-size);}
-  &.size--lg {font-size: round(2.5 * $base-font-size);}
+  &.size--xs {font-size: math.round(0.9 * divide($base-font-size, 2)) * 2;}
+  &.size--sm {font-size: math.round(1.5 * $base-font-size);}
+  &.size--md {font-size: math.round(2 * $base-font-size);}
+  &.size--lg {font-size: math.round(2.5 * $base-font-size);}
   &.size--xl {font-size: 3 * $base-font-size;}
 
   &:before, &:after {

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

@@ -154,6 +154,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 $outline-width: 2px;
 
 .w-switch {
@@ -207,7 +209,7 @@ $outline-width: 2px;
       box-sizing: border-box;
       border: none;
       width: 2 * $small-form-el-size;
-      height: round(0.7 * $small-form-el-size);
+      height: math.round(0.7 * $small-form-el-size);
     }
     .w-switch--thin :checked ~ & {background-color: $switch-inactive-color;}
 
@@ -248,7 +250,7 @@ $outline-width: 2px;
     .w-switch--on & {left: 100%;transform: translateX(-100%);}
 
     .w-switch--thin & {
-      top: - round(0.15 * $small-form-el-size);
+      top: - math.round(0.15 * $small-form-el-size);
       transform: scale(1.1);
       box-shadow: $box-shadow;
     }
@@ -278,7 +280,7 @@ $outline-width: 2px;
     :checked ~ & {transform: translateX(-100%) scale(0);left: 100%;}
 
     .w-switch[class^="bdrs"] &, .w-switch[class*=" bdrs"] & {border-radius: inherit;}
-    .w-switch--thin & {top: - round(0.15 * $small-form-el-size);}
+    .w-switch--thin & {top: - math.round(0.15 * $small-form-el-size);}
   }
 
   &--ripple &__input:before {

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

@@ -722,6 +722,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 $tr-border-top: 1px;
 
 .w-table {
@@ -882,7 +884,7 @@ $tr-border-top: 1px;
     pointer-events: none;
   }
 
-  &__cell {padding: round(divide($base-increment, 2)) $base-increment;}
+  &__cell {padding: math.round(divide($base-increment, 2)) $base-increment;}
   &__header:first-child, &__cell:first-child {padding-left: 2 * $base-increment;}
   &__header:last-child, &__cell:last-child {padding-right: 2 * $base-increment;}
 

package/src/wave-ui/components/w-tabs/index.vue

@@ -348,6 +348,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-tabs {
   z-index: 1;
   border-radius: $border-radius;
@@ -386,7 +388,7 @@ export default {
     align-items: center;
     padding: (2 * $base-increment) (3 * $base-increment);
     justify-content: center;
-    font-size: round(1.2 * $base-font-size);
+    font-size: math.round(1.2 * $base-font-size);
     transition: $transition-duration ease-in-out, flex-grow 0s, flex 0s; // `flex` for Safari.
     user-select: none;
     cursor: pointer;

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

@@ -79,6 +79,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-tag {
   position: relative;
   display: inline-flex;
@@ -103,37 +105,37 @@ export default {
   &--shadow {box-shadow: $box-shadow;}
 
   &.size--xs {
-    $font-size: round(0.7 * $base-font-size);
+    $font-size: math.round(0.7 * $base-font-size);
     font-size: $font-size;
     line-height: $font-size + 2px;
-    padding: round(0.25 * $base-increment) $base-increment;
+    padding: math.round(0.25 * $base-increment) $base-increment;
   }
   &.size--sm {
-    $font-size: round(0.82 * $base-font-size);
+    $font-size: math.round(0.82 * $base-font-size);
     font-size: $font-size;
     line-height: $font-size + 2px;
-    padding: round(0.25 * $base-increment) $base-increment;
+    padding: math.round(0.25 * $base-increment) $base-increment;
   }
   &.size--md {
-    $font-size: round(0.85 * $base-font-size);
+    $font-size: math.round(0.85 * $base-font-size);
     font-size: $font-size;
     line-height: $font-size + 4px;
-    padding-top: round(0.25 * $base-increment);
-    padding-bottom: round(0.25 * $base-increment);
+    padding-top: math.round(0.25 * $base-increment);
+    padding-bottom: math.round(0.25 * $base-increment);
   }
   &.size--lg {
-    $font-size: round(1.1 * $base-font-size);
+    $font-size: math.round(1.1 * $base-font-size);
     font-size: $font-size;
     line-height: $font-size + 4px;
-    padding-top: round(0.5 * $base-increment);
-    padding-bottom: round(0.5 * $base-increment);
+    padding-top: math.round(0.5 * $base-increment);
+    padding-bottom: math.round(0.5 * $base-increment);
   }
   &.size--xl {
-    $font-size: round(1.3 * $base-font-size);
+    $font-size: math.round(1.3 * $base-font-size);
     font-size: $font-size;
     line-height: $font-size + 4px;
-    padding-top: round(1 * $base-increment);
-    padding-bottom: round(1 * $base-increment);
+    padding-top: math.round(1 * $base-increment);
+    padding-bottom: math.round(1 * $base-increment);
   }
 
   &--clickable {

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

@@ -215,12 +215,14 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-tooltip {
   // Fix Safari where `width: max-content` does not take padding and border into consideration.
   display: table;
 
   position: absolute;
-  padding: $base-increment round(1.5 * $base-increment);
+  padding: $base-increment math.round(1.5 * $base-increment);
   border-radius: $border-radius;
   border: 1px solid $tooltip-border-color;
   background-color: $tooltip-bg-color;
@@ -238,7 +240,7 @@ export default {
   &--tile {border-radius: 0;}
   &--round {
     border-radius: 99em;
-    padding: $base-increment round(2.5 * $base-increment);
+    padding: $base-increment math.round(2.5 * $base-increment);
   }
   &--shadow {box-shadow: $box-shadow;}
   &--no-border {border: none;}

package/src/wave-ui/core.js

@@ -131,7 +131,7 @@ export default class WaveUI {
           else $waveui.switchTheme(config.theme, true)
 
           injectCSSInDOM($waveui)
-          injectNotifManagerInDOM(wApp, components, $waveui)
+          injectNotifManagerInDOM(app)
 
           // This mixin must only run once, we can delete it.
           app._context.mixins.find(mixin => mixin.mounted && delete mixin.mounted)