wave-ui 3.27.2 → 4.0.0

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

@@ -20,7 +20,8 @@
         :is="hasRouter ? 'router-link' : 'a'"
         :to="hasRouter && item[itemRouteKey]"
         :href="item[itemRouteKey]"
-        :class="color || null")
+        :class="breadcrumbLinkClasses"
+        @pointerdown="onRipple")
         slot(name="item" :item="item" :index="i + 1" :isLast="i === items.length - 1")
       component.w-breadcrumbs__item(
         v-else
@@ -29,7 +30,8 @@
         :to="hasRouter && item[itemRouteKey]"
         :href="item[itemRouteKey]"
         v-html="item[itemLabelKey]"
-        :class="color || null")
+        :class="breadcrumbLinkClasses"
+        @pointerdown="onRipple")
 
     //- Current page when linkLastItem is false.
     slot(
@@ -43,8 +45,13 @@
 </template>
 
 <script>
+import RippleMixin from '../mixins/ripple'
+
 export default {
   name: 'w-breadcrumbs',
+
+  mixins: [RippleMixin],
+
   props: {
     items: { type: Array, required: true },
     linkLastItem: { type: Boolean },
@@ -63,6 +70,10 @@ export default {
   emits: [],
 
   computed: {
+    breadcrumbLinkClasses () {
+      return [this.color || null, { 'w-ripple': this.rippleActive }]
+    },
+
     hasRouter () {
       return '$router' in this
     },
@@ -85,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

@@ -6,7 +6,8 @@ component.w-button(
   :class="classes"
   :disabled="!!disabled || null"
   v-bind="attrs"
-  :style="styles")
+  :style="styles"
+  @pointerdown="onPointerDownRipple")
   w-icon(v-if="icon" v-bind="iconProps || {}") {{ icon }}
   slot(v-else)
   transition(name="scale-fade")
@@ -22,11 +23,15 @@ component.w-button(
 </template>
 
 <script>
+import RippleMixin from '../../mixins/ripple'
+
 export default {
   // Fully handle the attrs and listeners manually for the case of a router link that has both a
   // route and onClick.
   inheritAttrs: false,
 
+  mixins: [RippleMixin],
+
   props: {
     color: { type: String },
     bgColor: { type: String },
@@ -67,6 +72,13 @@ export default {
 
   emits: [],
 
+  methods: {
+    onPointerDownRipple (e) {
+      if (this.disabled || this.loading || !this.rippleActive) return
+      this.onRipple(e)
+    }
+  },
+
   computed: {
     hasRouter () {
       return '$router' in this
@@ -112,6 +124,7 @@ export default {
     },
     classes () {
       return {
+        'w-ripple': this.rippleActive,
         // If no color / bg color is set, set a primary color by default.
         'primary--bg': !this.bgColor && !this.color && !(this.outline || this.text),
         primary: !this.bgColor && !this.color && !this.dark && (this.outline || this.text),
@@ -145,8 +158,6 @@ export default {
 </script>
 
 <style lang="scss">
-@use "sass:math";
-
 $spinner-size: 40;
 
 .w-button {
@@ -154,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;
@@ -173,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;
@@ -185,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);
@@ -204,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;
@@ -214,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;
@@ -228,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;}
 
@@ -246,6 +257,7 @@ $spinner-size: 40;
     content: '';
     position: absolute;
     inset: 0;
+    z-index: 0;
     opacity: 0;
     background-color: #000;
     border-radius: inherit;
@@ -290,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)
@@ -53,7 +53,8 @@ export default {
     sm: { type: Boolean },
     md: { type: Boolean },
     lg: { type: Boolean },
-    xl: { type: Boolean }
+    xl: { type: Boolean },
+    noRipple: { type: Boolean, default: undefined }
   },
 
   components: { ButtonPartial },

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>