wave-ui 3.28.0 → 4.0.1

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

@@ -92,8 +92,6 @@ export default {
 </script>
 
 <style lang="scss">
-@use "sass:math";
-
 .w-badge-wrap {
   position: relative;
   display: inline-flex;
@@ -106,12 +104,13 @@ export default {
   justify-content: center;
   user-select: none;
   border-radius: 99em;
-  // Always get an even number for better text vertical align.
-  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;
+  // Always get an even number for better text vertical align (matches former Sass rounding).
+  --w-badge-line: calc(2 * round(nearest, calc(1.1 * var(--w-base-font-size) / 2), 1px));
+  height: var(--w-badge-line);
+  line-height: var(--w-badge-line);
+  min-width: var(--w-badge-line);
   z-index: 1;
-  padding: 0 $base-increment;
+  padding: 0 var(--w-base-increment);
 
   @include themeable;
 
@@ -125,42 +124,44 @@ export default {
 
   // Sizes.
   &.size--xs {
-    // Always get an even number for better text vertical alignment.
-    $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 math.round(divide($height, 2));}
+    --w-badge-h: calc(2 * round(nearest, calc(var(--w-base-font-size) / 2), 1px));
+    font-size: calc(2 * round(nearest, calc(0.67 * var(--w-base-font-size) / 2), 1px));
+    height: var(--w-badge-h);
+    line-height: var(--w-badge-h);
+    min-width: var(--w-badge-h);
+
+    &--round {
+      width: var(--w-badge-h);
+      padding: 0 round(nearest, calc(var(--w-badge-h) / 2), 1px);
+    }
   }
   &.size--sm {
-    $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;
+    --w-badge-h: calc(2 * round(nearest, calc(1.1 * var(--w-base-font-size) / 2), 1px));
+    font-size: calc(2 * round(nearest, calc(0.75 * var(--w-base-font-size) / 2), 1px));
+    height: var(--w-badge-h);
+    line-height: var(--w-badge-h);
+    min-width: var(--w-badge-h);
   }
   &.size--md {
-    $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;
+    --w-badge-h: calc(2 * round(nearest, calc(1.3 * var(--w-base-font-size) / 2), 1px));
+    font-size: calc(2 * round(nearest, calc(0.9 * var(--w-base-font-size) / 2), 1px));
+    height: var(--w-badge-h);
+    line-height: var(--w-badge-h);
+    min-width: var(--w-badge-h);
   }
   &.size--lg {
-    $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;
+    --w-badge-h: calc(2 * round(nearest, calc(1.5 * var(--w-base-font-size) / 2), 1px));
+    font-size: calc(2 * round(nearest, calc(1.05 * var(--w-base-font-size) / 2), 1px));
+    height: var(--w-badge-h);
+    line-height: var(--w-badge-h);
+    min-width: var(--w-badge-h);
   }
   &.size--xl {
-    $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;
+    --w-badge-h: calc(2 * round(nearest, calc(1.8 * var(--w-base-font-size) / 2), 1px));
+    font-size: calc(2 * round(nearest, calc(1.2 * var(--w-base-font-size) / 2), 1px));
+    height: var(--w-badge-h);
+    line-height: var(--w-badge-h);
+    min-width: var(--w-badge-h);
   }
 
   // Position.
@@ -169,18 +170,18 @@ export default {
   &--left {right: 100%;}
   &--right {left: 100%;}
   &--overlap {
-    &.w-badge--top {margin-top: -1 * $base-increment;}
-    &.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: 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;}
+    &.w-badge--top {margin-top: calc(var(--w-base-increment) * -1);}
+    &.w-badge--bottom {margin-bottom: calc(var(--w-base-increment) * -1);}
+    &.w-badge--left {margin-right: calc(var(--w-base-increment) * -3);}
+    &.w-badge--right {margin-left: calc(var(--w-base-increment) * -3);}
+    &.w-badge--top.size--xs {margin-top: calc(var(--w-base-increment) * -0.5);}
+    &.w-badge--bottom.size--xs {margin-bottom: calc(var(--w-base-increment) * -0.5);}
+    &.w-badge--top.size--sm {margin-top: calc(var(--w-base-increment) * -0.75);}
+    &.w-badge--bottom.size--sm {margin-bottom: calc(var(--w-base-increment) * -0.75);}
+    &.w-badge--top.size--lg {margin-top: calc(var(--w-base-increment) * -1.5);}
+    &.w-badge--bottom.size--lg {margin-bottom: calc(var(--w-base-increment) * -1.5);}
+    &.w-badge--top.size--xl {margin-top: calc(var(--w-base-increment) * -2);}
+    &.w-badge--bottom.size--xl {margin-bottom: calc(var(--w-base-increment) * -2);}
   }
 
   // Look modifiers.
@@ -189,13 +190,13 @@ export default {
     background-color: transparent;
     border-color: currentColor;
   }
-  &--shadow {box-shadow: $box-shadow;}
+  &--shadow {box-shadow: var(--w-box-shadow);}
 
   &--dot.w-badge {min-width: 0;padding: 0;aspect-ratio: 1;}
-  &--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;}
+  &--dot.size--xs {height: calc(var(--w-base-increment) * 1.35);}
+  &--dot.size--sm {height: calc(var(--w-base-increment) * 1.7);}
+  &--dot.size--md {height: calc(var(--w-base-increment) * 2.2);}
+  &--dot.size--lg {height: calc(var(--w-base-increment) * 2.75);}
+  &--dot.size--xl {height: calc(var(--w-base-increment) * 3);}
 }
 </style>

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

@@ -96,21 +96,19 @@ export default {
 </script>
 
 <style lang="scss">
-@use "sass:math";
-
 .w-breadcrumbs {
   display: flex;
   align-items: center;
 
-  &.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);}
+  &.size--xs {font-size: round(nearest, calc(0.8 * var(--w-base-font-size)), 1px);}
+  &.size--sm {font-size: round(nearest, calc(0.9 * var(--w-base-font-size)), 1px);}
+  &.size--md {font-size: round(nearest, calc(1.05 * var(--w-base-font-size)), 1px);}
+  &.size--lg {font-size: round(nearest, calc(1.2 * var(--w-base-font-size)), 1px);}
+  &.size--xl {font-size: round(nearest, calc(1.4 * var(--w-base-font-size)), 1px);}
 
   &__separator {
-    margin-left: $base-increment;
-    margin-right: $base-increment;
+    margin-left: var(--w-base-increment);
+    margin-right: var(--w-base-increment);
   }
 }
 </style>

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

@@ -158,8 +158,6 @@ export default {
 </script>
 
 <style lang="scss">
-@use "sass:math";
-
 $spinner-size: 40;
 
 .w-button {
@@ -167,11 +165,11 @@ $spinner-size: 40;
   display: inline-flex;
   flex-shrink: 0;
   outline: none;
-  border-radius: $border-radius;
+  border-radius: var(--w-border-radius);
   background-color: rgba(0, 0, 0, 0.1);
   border: 1px solid rgba(0, 0, 0, 0.04);
-  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);
   box-shadow: 0 0 0 transparent;
   vertical-align: middle;
   align-self: center;
@@ -186,7 +184,7 @@ $spinner-size: 40;
   z-index: 1;
   // Background-color must not transition to not affect the hover & focus states
   // in :before & :after.
-  transition: all $transition-duration, background-color 0s, padding 0s;
+  transition: all var(--w-transition-duration), background-color 0s, padding 0s;
   -webkit-tap-highlight-color: transparent;
 
   @include themeable;
@@ -198,10 +196,10 @@ $spinner-size: 40;
   // Position.
   &--absolute {position: absolute;}
   &--fixed {position: fixed;}
-  &--top {top: 2 * $base-increment;}
-  &--bottom {bottom: 2 * $base-increment;}
-  &--left {left: 2 * $base-increment;}
-  &--right {right: 2 * $base-increment;}
+  &--top {top: calc(var(--w-base-increment) * 2);}
+  &--bottom {bottom: calc(var(--w-base-increment) * 2);}
+  &--left {left: calc(var(--w-base-increment) * 2);}
+  &--right {right: calc(var(--w-base-increment) * 2);}
 
   &--dark {
     color: rgba(255, 255, 255, 0.95);
@@ -217,8 +215,8 @@ $spinner-size: 40;
   }
   &--round {
     border-radius: 99em;
-    padding-left: 3 * $base-increment;
-    padding-right: 3 * $base-increment;
+    padding-left: calc(var(--w-base-increment) * 3);
+    padding-right: calc(var(--w-base-increment) * 3);
   }
   &--icon {
     aspect-ratio: 1;
@@ -227,7 +225,7 @@ $spinner-size: 40;
     min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
   }
   &--tile {border-radius: initial;}
-  &--shadow {box-shadow: $box-shadow;}
+  &--shadow {box-shadow: var(--w-box-shadow);}
   &--loading {cursor: wait;opacity: 0.8;}
   &[disabled] {
     cursor: not-allowed;
@@ -241,16 +239,16 @@ $spinner-size: 40;
   }
 
   // Sizes adjustments (always an even number for easier vertical alignments).
-  &.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 {height: calc(2 * round(nearest, calc(1.25 * var(--w-base-font-size) / 2), 1px));}
+  &.size--sm {height: calc(2 * round(nearest, calc(1.55 * var(--w-base-font-size) / 2), 1px));}
+  &.size--md {height: calc(2 * round(nearest, calc(1.85 * var(--w-base-font-size) / 2), 1px));}
+  &.size--lg {height: calc(2 * round(nearest, calc(2.2 * var(--w-base-font-size) / 2), 1px));}
+  &.size--xl {height: calc(2 * round(nearest, calc(2.5 * var(--w-base-font-size) / 2), 1px));}
 
-  &.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: 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);}
+  &.size--xs {padding-left: var(--w-base-increment);padding-right: var(--w-base-increment);}
+  &.size--xl {padding-left: calc(var(--w-base-increment) * 3);padding-right: calc(var(--w-base-increment) * 3);}
+  &--round.size--xs {padding-left: calc(var(--w-base-increment) * 1.5);padding-right: calc(var(--w-base-increment) * 1.5);}
+  &--round.size--xl {padding-left: calc(var(--w-base-increment) * 4.5);padding-right: calc(var(--w-base-increment) * 4.5);}
   &--icon.size--xs {padding-left: 0;padding-right: 0;}
   &--icon.size--xl {padding-left: 0;padding-right: 0;}
 
@@ -304,7 +302,7 @@ $spinner-size: 40;
   &:active {transform: scale(1.02);}
   &:active:before {
     opacity: 0.3;
-    @include default-transition($fast-transition-duration);
+    @include default-transition(var(--w-transition-duration-fast));
   }
   &--dark:active:before, &.primary--bg:active:before {opacity: 0.35;}
 

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

@@ -1,9 +1,9 @@
 <template lang="pug">
 component(v-if="tooltip" is="w-tooltip" v-bind="tooltipProps")
-  template(#activator="{ on }")
-    button-partial(v-bind="buttonProps" v-on="on")
-      slot
-  div(v-html="tooltip")
+  button-partial(v-bind="buttonProps")
+    slot
+  template(#tooltip)
+    div(v-html="tooltip")
 button-partial(v-else v-bind="buttonProps")
   slot
   template(#loading)

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

@@ -63,6 +63,7 @@ export default {
     imgProps () {
       return {
         tag: 'div',
+        maxWidth: '100%',
         ratio: 1 / 2,
         ...this.imageProps
       }
@@ -88,21 +89,21 @@ export default {
   position: relative;
   display: flex;
   flex-direction: column;
-  border-radius: $border-radius;
-  border: $border;
+  border-radius: var(--w-border-radius);
+  border: var(--w-border);
 
   @include themeable;
 
   &--tile {border-radius: 0;}
-  &--shadow {box-shadow: $box-shadow;}
+  &--shadow {box-shadow: var(--w-box-shadow);}
   &--no-border, &--shadow {border: none;}
 
   &__title {
     display: flex;
     align-items: center;
-    padding: (2 * $base-increment) (3 * $base-increment);
+    padding: calc(var(--w-base-increment) * 2) calc(var(--w-base-increment) * 3);
     font-size: 1.3em;
-    border-bottom: $border;
+    border-bottom: var(--w-border);
     border-top-left-radius: inherit;
     border-top-right-radius: inherit;
 
@@ -117,7 +118,7 @@ export default {
   }
 
   &__content {
-    padding: 3 * $base-increment;
+    padding: calc(var(--w-base-increment) * 3);
     flex-grow: 1;
 
     // Only if there is no title bar.
@@ -134,7 +135,7 @@ export default {
 
   &__actions {
     display: flex;
-    padding: (2 * $base-increment) (3 * $base-increment) (3 * $base-increment);
+    padding: calc(var(--w-base-increment) * 2) calc(var(--w-base-increment) * 3) calc(var(--w-base-increment) * 3);
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
 

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

@@ -75,6 +75,12 @@ export default {
     noRipple: { type: Boolean },
     indeterminate: { type: Boolean },
     round: { type: Boolean },
+    // Sizes.
+    xs: { type: Boolean },
+    sm: { type: Boolean },
+    md: { type: Boolean },
+    lg: { type: Boolean },
+    xl: { type: Boolean },
     dark: { type: Boolean },
     light: { type: Boolean }
     // Props from mixin: id, name, disabled, readonly, required, tabindex, validators.
@@ -98,6 +104,10 @@ export default {
     hasLabel () {
       return this.label || this.$slots.default
     },
+    presetSize () {
+      return (this.xs && 'xs') || (this.sm && 'sm') || (this.md && 'md') || (this.lg && 'lg') || (this.xl && 'xl') || null
+    },
+
     classes () {
       return {
         [`w-checkbox w-checkbox--${this.isChecked ? 'checked' : 'unchecked'}`]: true,
@@ -108,7 +118,8 @@ export default {
         'w-checkbox--rippled': this.ripple.end,
         'w-checkbox--round': this.round,
         'w-checkbox--dark': this.dark,
-        'w-checkbox--light': this.light
+        'w-checkbox--light': this.light,
+        [`size--${this.presetSize}`]: !!this.presetSize
       }
     }
   },
@@ -150,6 +161,8 @@ $outline-width: 2px;
 $inactive-color: #666;
 
 .w-checkbox {
+  // --_size resolves --w-size if set (e.g. via size class or inline style), otherwise the global default.
+  --_size: var(--w-size, var(--w-small-form-el-size));
   display: inline-flex;
   align-items: center;
   vertical-align: middle;
@@ -170,7 +183,7 @@ $inactive-color: #666;
   // The fake checkbox to substitute.
   &__input {
     position: relative;
-    width: $small-form-el-size;
+    width: var(--_size);
     aspect-ratio: 1;
     display: flex;
     flex: 0 0 auto; // Prevent stretching width or height.
@@ -188,12 +201,12 @@ $inactive-color: #666;
     aspect-ratio: 1;
     fill: none;
     stroke-width: 2;
-    stroke: $contrast-color;
+    stroke: var(--w-contrast-color);
     stroke-linecap: round;
     stroke-linejoin: round;
     stroke-dasharray: 16px;
     stroke-dashoffset: 16px;
-    transition: $transition-duration ease-out;
+    transition: var(--w-transition-duration) ease-out;
     opacity: 0;
     position: relative;
     z-index: 1;
@@ -214,25 +227,25 @@ $inactive-color: #666;
     width: 100%;
     aspect-ratio: 1;
     border: $outline-width solid $inactive-color;
-    border-radius: $border-radius;
-    transition: $transition-duration ease-in-out;
+    border-radius: var(--w-border-radius);
+    transition: var(--w-transition-duration) ease-in-out;
 
     .w-checkbox--round & {border-radius: 100%;}
-    .w-checkbox--disabled & {border-color: $disabled-color;}
+    .w-checkbox--disabled & {border-color: var(--w-disabled-color);}
 
     // Checked state.
     :checked ~ & {
-      border-width: divide($small-form-el-size, 2);
+      border-width: calc(var(--_size) / 2);
       border-color: currentColor;
       // Prevents a tiny hole while animating and in some browser zoom levels.
       background-color: currentColor;
     }
     .w-checkbox--indeterminate :checked ~ & {
-      border-width: ((divide($small-form-el-size, 2)) - 1px) 3px;
-      background-color: $contrast-color;
+      border-width: calc(var(--_size) / 2 - 1px) 3px;
+      background-color: var(--w-contrast-color);
     }
     .w-checkbox--disabled :checked ~ & {
-      border-color: $disabled-color;
+      border-color: var(--w-disabled-color);
       // Prevents a tiny hole while animating and in some browser zoom levels.
       background-color: color-mix(in srgb, var(--w-contrast-color) 40%, transparent);
     }
@@ -282,6 +295,13 @@ $inactive-color: #666;
       opacity: 0.7;
     }
   }
+
+  // Sizes.
+  // ------------------------------------------------------
+  &.size--xs {--w-size: round(nearest, calc(0.86 * var(--w-base-font-size)), 2px);}
+  &.size--sm {--w-size: round(nearest, calc(1.14 * var(--w-base-font-size)), 2px);}
+  &.size--lg {--w-size: round(nearest, calc(1.43 * var(--w-base-font-size)), 2px);}
+  &.size--xl {--w-size: round(nearest, calc(1.71 * var(--w-base-font-size)), 2px);}
 }
 
 @keyframes w-checkbox-ripple {

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

@@ -54,7 +54,13 @@ export default {
     inline: { type: Boolean },
     round: { type: Boolean },
     color: { type: String, default: 'primary' },
-    labelColor: { type: String, default: 'primary' }
+    labelColor: { type: String, default: 'primary' },
+    // Sizes.
+    xs: { type: Boolean },
+    sm: { type: Boolean },
+    md: { type: Boolean },
+    lg: { type: Boolean },
+    xl: { type: Boolean }
     // Props from mixin: id, name, disabled, readonly, required, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },
@@ -84,10 +90,15 @@ export default {
       })
     },
 
+    presetSize () {
+      return (this.xs && 'xs') || (this.sm && 'sm') || (this.md && 'md') || (this.lg && 'lg') || (this.xl && 'xl') || null
+    },
+
     classes () {
       return [
         'w-checkboxes',
-        `w-checkboxes--${this.inline ? 'inline' : 'column'}`
+        `w-checkboxes--${this.inline ? 'inline' : 'column'}`,
+        this.presetSize && `size--${this.presetSize}`
       ]
     }
   },
@@ -128,8 +139,15 @@ export default {
     flex-wrap: wrap;
     vertical-align: middle;
 
-    .w-checkbox {margin-right: 3 * $base-increment;}
+    .w-checkbox {margin-right: calc(var(--w-base-increment) * 3);}
     .w-checkbox:last-child {margin-right: 0;}
   }
+
+  // Sizes (cascades --w-small-form-el-size to child w-checkbox elements).
+  // ------------------------------------------------------
+  &.size--xs {--w-size: round(nearest, calc(0.86 * var(--w-base-font-size)), 2px);}
+  &.size--sm {--w-size: round(nearest, calc(1.14 * var(--w-base-font-size)), 2px);}
+  &.size--lg {--w-size: round(nearest, calc(1.43 * var(--w-base-font-size)), 2px);}
+  &.size--xl {--w-size: round(nearest, calc(1.71 * var(--w-base-font-size)), 2px);}
 }
 </style>

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

@@ -1,26 +1,26 @@
 <template lang="pug">
-w-menu(v-model="showPopup" v-bind="wMenuProps")
-  template(#activator="{ on }")
-    w-button.w-confirm(v-bind="{ ...$attrs, ...buttonProps }" v-on="disablePrompt ? {} : { ...on }")
-      slot
-  w-flex(:column="!inline" align-center)
-    div
-      slot(name="question") {{ question }}
-    .w-flex.justify-end(:class="inline ? 'ml2' : 'mt2'")
-      w-button.mr2(
-        v-if="cancel !== false"
-        v-bind="cancelButtonProps"
-        :bg-color="(cancelButton || {}).bgColor || 'error'"
-        @keyup.escape="!persistent && onCancel()"
-        @click="onCancel")
-        slot(name="cancel") {{ cancelButton.label }}
-      w-button(
-        v-bind="confirmButtonProps"
-        :bg-color="(confirmButton || {}).bgColor || 'success'"
-        v-focus
-        @keyup.escape="!persistent && onCancel()"
-        @click="onConfirm")
-        slot(name="confirm") {{ confirmButton.label }}
+w-menu(v-model="showPopup" v-bind="wMenuProps" :disable="disablePrompt")
+  w-button.w-confirm(v-bind="{ ...$attrs, ...buttonProps }")
+    slot
+  template(#content)
+    w-flex(:column="!inline" align-center)
+      div
+        slot(name="question") {{ question }}
+      .w-flex.justify-end(:class="inline ? 'ml2' : 'mt2'")
+        w-button.mr2(
+          v-if="cancel !== false"
+          v-bind="cancelButtonProps"
+          :bg-color="(cancelButton || {}).bgColor || 'error'"
+          @keyup.escape="!persistent && onCancel()"
+          @click="onCancel")
+          slot(name="cancel") {{ cancelButton.label }}
+        w-button(
+          v-bind="confirmButtonProps"
+          :bg-color="(confirmButton || {}).bgColor || 'success'"
+          v-focus
+          @keyup.escape="!persistent && onCancel()"
+          @click="onConfirm")
+          slot(name="confirm") {{ confirmButton.label }}
 </template>
 
 <script>

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

@@ -139,7 +139,7 @@ export default {
     flex-grow: 1;
     max-width: 95%;
     overflow: auto;
-    background-color: $dialog-bg-color;
+    background-color: var(--w-dialog-bg-color);
 
     @include themeable;
 

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

@@ -35,7 +35,7 @@ export default {
 
 <style lang="scss">
 .w-divider {
-  border: 0 solid $divider-color;
+  border: 0 solid var(--w-divider-color);
   border-top-width: 1px;
 
   @include themeable;
@@ -69,15 +69,15 @@ export default {
       display: flex;
       flex: 1 1 auto;
     }
-    &:before {margin-right: 2 * $base-increment;}
-    &:after {margin-left: 2 * $base-increment;}
+    &:before {margin-right: calc(var(--w-base-increment) * 2);}
+    &:after {margin-left: calc(var(--w-base-increment) * 2);}
 
     // Vertical.
     &.w-divider--vertical {
       flex-direction: column;
       &:before, &:after {border-top-width: 0;border-left-width: 1px;}
-      &:before {margin-right: 0;margin-bottom: 2 * $base-increment;}
-      &:after {margin-left: 0;margin-top: 2 * $base-increment;}
+      &:before {margin-right: 0;margin-bottom: calc(var(--w-base-increment) * 2);}
+      &:after {margin-left: 0;margin-top: calc(var(--w-base-increment) * 2);}
     }
   }
 }

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

@@ -245,7 +245,7 @@ export default {
   position: inherit;
   display: flex;
   z-index: 1;
-  background: $drawer-bg-color;
+  background: var(--w-drawer-bg-color);
   box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
 
   @include themeable;
@@ -254,13 +254,13 @@ export default {
     top: 0;
     bottom: 0;
     width: 100%;
-    max-width: $drawer-max-size;
+    max-width: var(--w-drawer-max-size);
   }
   &--top, &--bottom {
     left: 0;
     right: 0;
     height: 100%;
-    max-height: $drawer-max-size;
+    max-height: var(--w-drawer-max-size);
   }
   &--fit-content {width: auto;height: auto;}
 

package/src/wave-ui/components/w-form-element.vue

@@ -130,7 +130,7 @@ div.w-form-el {
   &--has-error input::placeholder {color: inherit;}
 
   &-shakable {position: relative;}
-  &--error &-shakable {animation: w-form-el-shake 0.3s $transition-duration ease-in-out;}
+  &--error &-shakable {animation: w-form-el-shake 0.3s var(--w-transition-duration) ease-in-out;}
 
   // Error message.
   // ------------------------------------------------------
@@ -138,7 +138,7 @@ div.w-form-el {
     width: 100%;
     flex-grow: 1;
     font-size: 0.775rem;
-    margin-top: $base-increment;
+    margin-top: var(--w-base-increment);
 
     .w-form--error-placeholders & {position: absolute;bottom: 0;}
   }