wave-ui 1.58.0 → 1.60.0

package/package.json

@@ -1,31 +1,35 @@
 {
   "name": "wave-ui",
-  "version": "1.58.0",
+  "version": "1.60.0",
   "description": "An emerging UI framework for Vue.js (2 & 3) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
-  "license": "MIT",
+  "homepage": "https://antoniandre.github.io/wave-ui",
   "repository": "https://github.com/antoniandre/wave-ui",
+  "license": "MIT",
   "funding": "https://github.com/sponsors/antoniandre",
-  "main": "./dist/wave-ui.umd.js",
+  "main": "./dist/wave-ui.es.js",
   "unpkg": "dist/wave-ui.umd.js",
   "jsdelivr": "dist/wave-ui.umd.js",
   "module": "./dist/wave-ui.es.js",
+  "files": [
+    "dist",
+    "src/wave-ui"
+  ],
   "exports": {
-    "./dist/wave-ui.css": "./dist/wave-ui.css",
-    "./dist/wave-ui.cjs.js": "./dist/wave-ui.cjs.js",
-    "./src/wave-ui": "./src/wave-ui/index.js",
-    "./src/wave-ui/scss/_variables.scss": "./src/wave-ui/scss/_variables.scss",
     ".": {
       "import": "./dist/wave-ui.es.js",
       "require": "./dist/wave-ui.umd.js"
     },
     "./package.json": "./package.json",
     "./dist/*": "./dist/*",
+    "./src/wave-ui": "./src/wave-ui/index.js",
     "./src/wave-ui/*": "./src/wave-ui/*"
   },
-  "files": [
-    "dist",
-    "src/wave-ui"
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss",
+    "*.vue"
   ],
   "keywords": [
     "wave ui",
@@ -43,19 +47,15 @@
     "serve": "vite preview --base /wave-ui/",
     "lint": "vite lint"
   },
-  "sideEffects": [
-    "*.css",
-    "*.scss",
-    "*.vue"
-  ],
   "devDependencies": {
-    "@babel/core": "^7.19.0",
-    "@babel/eslint-parser": "^7.18.9",
+    "@babel/core": "^7.20.2",
+    "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@mdi/font": "^6.9.96",
     "@vitejs/plugin-vue": "^1.10.2",
-    "autoprefixer": "^10.4.8",
+    "autoprefixer": "^10.4.13",
     "axios": "^0.21.4",
-    "core-js": "^3.25.0",
+    "core-js": "^3.26.1",
     "eslint": "^7.32.0",
     "eslint-config-standard": "^16.0.3",
     "eslint-plugin-import": "^2.26.0",
@@ -64,25 +64,22 @@
     "eslint-plugin-vue": "^7.20.0",
     "font-awesome": "^4.7.0",
     "ghspa": "^1.0.0",
-    "gsap": "^3.11.1",
+    "gsap": "^3.11.3",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
-    "postcss": "^8.4.16",
+    "postcss": "^8.4.19",
+    "pug": "^3.0.2",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.54.8",
+    "sass": "^1.56.1",
     "simple-syntax-highlighter": "^1.5.1",
     "splitpanes": "^2.4.1",
     "vite": "^2.9.15",
-    "vite-plugin-pug": "^0.3.1",
     "vite-plugin-vue2": "^1.9.3",
-    "vue": "^2.7.10",
+    "vue": "^2.7.14",
     "vue-router": "^3.6.5",
     "vue-svg-loader": "^0.16.0",
-    "vue-template-compiler": "^2.7.10",
-    "vueperslides": "^2.15.3",
+    "vue-template-compiler": "^2.7.14",
+    "vueperslides": "^2.16.0",
     "vuex": "^3.6.2"
-  },
-  "dependencies": {
-    "@mdi/font": "^6.9.96"
   }
 }

package/src/wave-ui/components/index.js

@@ -4,7 +4,7 @@ export { default as WAlert } from './w-alert.vue'
 export { default as WApp } from './w-app.vue'
 export { default as WBadge } from './w-badge.vue'
 export { default as WBreadcrumbs } from './w-breadcrumbs.vue'
-export { default as WButton } from './w-button.vue'
+export { default as WButton } from './w-button/index.vue'
 export { default as WCard } from './w-card.vue'
 export { default as WCheckbox } from './w-checkbox.vue'
 export { default as WCheckboxes } from './w-checkboxes.vue'

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

@@ -15,12 +15,13 @@
       w-button.w-accordion__expand-icon(
         v-if="expandIcon && !expandIconRight"
         :icon="(item._expanded && collapseIcon) || expandIcon"
+        :icon-props="expandIconProps"
         :disabled="item._disabled || null"
         :tabindex="-1"
         text
         @keypress.stop
         @click.stop="!item._disabled && toggleItem(item, $event)"
-        :class="{ 'w-accordion__expand-icon--expanded': item._expanded }")
+        :class="{ 'w-accordion__expand-icon--expanded': item._expanded, 'w-accordion__expand-icon--rotate90': expandIconRotate90 }")
       //- Title.
       slot(
         v-if="$scopedSlots[`item-title.${item.id || i + 1}`]"
@@ -36,7 +37,7 @@
         text
         @keypress.stop
         @click.stop="!item._disabled && toggleItem(item, $event)"
-        :class="{ 'w-accordion__expand-icon--expanded': item._expanded }")
+        :class="{ 'w-accordion__expand-icon--expanded': item._expanded, 'w-accordion__expand-icon--rotate90': expandIconRotate90 }")
     //- Content.
     w-transition-expand(
       y
@@ -77,6 +78,8 @@ export default {
     contentClass: { type: String },
     expandIcon: { type: [String, Boolean], default: 'wi-triangle-down' },
     expandIconRight: { type: Boolean },
+    expandIconRotate90: { type: Boolean },
+    expandIconProps: { type: Object, default: () => ({}) },
     expandSingle: { type: Boolean },
     collapseIcon: { type: String },
     shadow: { type: Boolean },
@@ -174,8 +177,9 @@ export default {
     margin-right: $base-increment;
 
     .w-accordion--rotate-icon & {@include default-transition;}
+    &--rotate90 {transform: rotate(-90deg);}
     &--expanded {transform: rotate(-180deg);}
-    .w-accordion--icon-right &--expanded {transform: rotate(180deg);}
+    &--expanded.w-accordion__expand-icon--rotate90 {transform: rotate(0deg);}
 
     .w-icon:before {font-size: 1.1em;}
   }

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

@@ -112,8 +112,8 @@ export default {
   &--inline {position: static;}
 
   &--round {
-    width: round(1.1 * divide($base-font-size, 2)) * 2;
-    padding: 0 (round(1.1 * divide($base-font-size, 4)) * 2);
+    aspect-ratio: 1;
+    padding: 0;
   }
 
   // Sizes.
@@ -184,11 +184,11 @@ export default {
   }
   &--shadow {box-shadow: $box-shadow;}
 
-  &--dot.w-badge {min-width: 0;padding: 0;}
-  &--dot.size--xs {width: round(1.35 * $base-increment);height: round(1.35 * $base-increment);}
-  &--dot.size--sm {width: round(1.7 * $base-increment);height: round(1.7 * $base-increment);}
-  &--dot.size--md {width: round(2.2 * $base-increment);height: round(2.2 * $base-increment);}
-  &--dot.size--lg {width: round(2.75 * $base-increment);height: round(2.75 * $base-increment);}
-  &--dot.size--xl {width: 3 * $base-increment;height: 3 * $base-increment;}
+  &--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--xl {height: 3 * $base-increment;}
 }
 </style>

package/src/wave-ui/components/{w-button.vue → w-button/button.vue}

@@ -6,7 +6,6 @@ component.w-button(
   :class="classes"
   :disabled="!!disabled || null"
   v-on="listeners"
-  v-bind="$attrs"
   :style="styles")
   w-icon(v-if="icon" v-bind="iconProps || {}") {{ icon }}
   slot(v-else)
@@ -24,8 +23,6 @@ component.w-button(
 
 <script>
 export default {
-  name: 'w-button',
-
   props: {
     color: { type: String },
     bgColor: { type: String },
@@ -199,6 +196,7 @@ $spinner-size: 40;
     padding-right: 3 * $base-increment;
   }
   &--icon {
+    aspect-ratio: 1;
     border-radius: 99em;
     padding: 0;
   }
@@ -227,11 +225,8 @@ $spinner-size: 40;
   &.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);}
-  &--icon.size--xs {width: round(1.25 * divide($base-font-size, 2)) * 2;padding-left: 0;padding-right: 0;}
-  &--icon.size--sm {width: round(1.55 * divide($base-font-size, 2)) * 2;}
-  &--icon.size--md {width: round(1.85 * divide($base-font-size, 2)) * 2;}
-  &--icon.size--lg {width: round(2.2 * divide($base-font-size, 2)) * 2;}
-  &--icon.size--xl {width: round(2.5 * divide($base-font-size, 2)) * 2;padding-left: 0;padding-right: 0;}
+  &--icon.size--xs {padding-left: 0;padding-right: 0;}
+  &--icon.size--xl {padding-left: 0;padding-right: 0;}
 
   // Overlay to mark the focus, hover and active state.
   &:before {

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

@@ -0,0 +1,68 @@
+<template lang="pug">
+component(v-if="tooltip" is="w-tooltip" v-bind="tooltipProps || {}")
+  template(#activator="{ on }")
+    button-partial(v-bind="buttonProps" v-on="{ ...$listeners, ...on }")
+      slot
+  div(v-html="tooltip")
+button-partial(v-else v-bind="buttonProps" v-on="$listeners")
+  slot
+</template>
+
+<script>
+import ButtonPartial from './button.vue'
+
+export default {
+  name: 'w-button',
+  inheritAttrs: false, // The attrs are only bound to the button-partial, not the root.
+
+  props: {
+    color: { type: String },
+    bgColor: { type: String },
+    dark: { type: Boolean },
+    outline: { type: Boolean },
+    text: { type: Boolean },
+    round: { type: Boolean },
+    shadow: { type: Boolean },
+    tile: { type: Boolean },
+    tooltip: { type: String },
+    tooltipProps: { type: Object, default: () => ({}) },
+    route: { type: [String, Object] }, // Creates a link.
+    // Force use of `a` instead of router-link.
+    // Router link does not go to a url starting with `#` with history mode.
+    forceLink: { type: Boolean },
+    type: { type: String, default: 'button' },
+    disabled: { type: Boolean },
+    loading: { type: Boolean },
+    // If an icon is passed, no text will display.
+    icon: { type: String, default: null },
+    iconProps: { type: Object, default: () => ({}) },
+    // Positions.
+    absolute: { type: Boolean },
+    fixed: { type: Boolean },
+    top: { type: Boolean },
+    bottom: { type: Boolean },
+    left: { type: Boolean },
+    right: { type: Boolean },
+    zIndex: { type: [Number, String] },
+    // Sizes.
+    width: { type: [Number, String] },
+    height: { type: [Number, String] },
+    xs: { type: Boolean },
+    sm: { type: Boolean },
+    md: { type: Boolean },
+    lg: { type: Boolean },
+    xl: { type: Boolean }
+  },
+
+  components: { ButtonPartial },
+
+  emits: [],
+
+  computed: {
+    buttonProps () {
+      const { tooltip, tooltipProps, ...props } = this.$props
+      return { ...props, ...this.$attrs }
+    }
+  }
+}
+</script>

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

@@ -23,19 +23,29 @@ component(
     role="checkbox")
   template(v-if="hasLabel && labelOnLeft")
     label.w-checkbox__label.w-form-el-shakable.pr2(
-      v-if="$slots.default || label"
+      v-if="$slots.default"
       :for="`w-checkbox--${_uid}`"
       :class="labelClasses")
       slot {{ label }}
+    label.w-checkbox__label.w-form-el-shakable.pr2(
+      v-else-if="label"
+      :for="`w-checkbox--${_uid}`"
+      :class="labelClasses"
+      v-html="label")
   .w-checkbox__input(@click="$refs.input.focus();$refs.input.click()" :class="this.color")
-    svg(width="11px" height="9px" viewbox="0 0 12 9")
+    svg(viewBox="-0.5 0 12 10")
       polyline(points="1 5 4 8 10 2")
   template(v-if="hasLabel && !labelOnLeft")
     label.w-checkbox__label.w-form-el-shakable.pl2(
-      v-if="$slots.default || label"
+      v-if="$slots.default"
       :for="`w-checkbox--${_uid}`"
       :class="labelClasses")
       slot {{ label }}
+    label.w-checkbox__label.w-form-el-shakable.pl2(
+      v-else-if="label"
+      :for="`w-checkbox--${_uid}`"
+      :class="labelClasses"
+      v-html="label")
 </template>
 
 <script>
@@ -149,7 +159,7 @@ $inactive-color: #666;
   &__input {
     position: relative;
     width: $small-form-el-size;
-    height: $small-form-el-size;
+    aspect-ratio: 1;
     display: flex;
     flex: 0 0 auto; // Prevent stretching width or height.
     align-items: center;
@@ -160,8 +170,8 @@ $inactive-color: #666;
 
   // The checkmark - visible when checked.
   &__input svg {
-    width: auto;
-    height: auto;
+    width: 70%;
+    aspect-ratio: 1;
     fill: none;
     stroke-width: 2;
     stroke: white;
@@ -172,7 +182,6 @@ $inactive-color: #666;
     transition: $transition-duration ease-out;
     opacity: 0;
     position: relative;
-    top: -0.5px; // For browser zoom levels.
     z-index: 1;
 
     :checked ~ & {
@@ -187,7 +196,7 @@ $inactive-color: #666;
     content: '';
     position: absolute;
     width: 100%;
-    height: 100%;
+    aspect-ratio: 1;
     border: $outline-width solid $inactive-color;
     border-radius: $border-radius;
     transition: $transition-duration ease-in-out;
@@ -218,7 +227,7 @@ $inactive-color: #666;
     content: "";
     position: absolute;
     width: inherit;
-    height: inherit;
+    aspect-ratio: 1;
     background-color: currentColor;
     border-radius: 100%;
     transform: scale(0);

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

@@ -20,8 +20,8 @@ component(
     :readonly="isReadonly || null"
     :class="{ mt1: !inline && i }")
     slot(
-      v-if="$slots[`item.${i + 1}`] || $slots.item"
-      :name="$slots[`item.${i + 1}`] ? `item.${i + 1}` : 'item'"
+      v-if="$scopedSlots[`item.${i + 1}`] || $scopedSlots.item"
+      :name="$scopedSlots[`item.${i + 1}`] ? `item.${i + 1}` : 'item'"
       :item="getOriginalItem(item)"
       :checked="!!item._isChecked"
       :index="i + 1")

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

@@ -12,11 +12,14 @@
           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>
@@ -45,7 +48,11 @@ export default {
     inline: { type: Boolean }, // The layout inside the menu.
 
     // W-menu props.
-    menu: { type: Object }, // Allow passing down an object of props to the w-menu component.
+    // Allow passing down an object of props to the w-menu component.
+    menu: { type: Object, default: () => ({}) },
+    // Allow passing down an object of props to the w-tooltip component.
+    // If a string is given, that will be the label of the tooltip.
+    tooltip: { type: [Boolean, Object, String] },
     // All the menu props shorthands, as long as they don't conflict with the button props.
     noArrow: { type: Boolean }, // Adds a directional triangle to the edge of the menu, like a tooltip.
     top: { type: Boolean },
@@ -104,11 +111,20 @@ export default {
         ...this.menu
       }
     },
+    tooltipObject () {
+      let tooltip = { label: typeof this.tooltip === 'string' ? this.tooltip : '' }
+      if (typeof this.tooltip === 'object') tooltip = Object.assign({}, tooltip, this.tooltip)
+      return tooltip
+    },
     buttonProps () {
+      const { label, ...tooltipProps } = this.tooltipObject
+
       return {
         bgColor: this.bgColor,
         color: this.color,
         icon: this.icon,
+        tooltip: label,
+        tooltipProps,
         ...this.mainButton
       }
     }

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

@@ -7,7 +7,7 @@ div(:class="classes")
   w-transition-expand(y)
     template(v-if="Validation.message")
       .w-form-el__error(
-        v-if="$slots['error-message']"
+        v-if="$scopedSlots['error-message']"
         :class="formProps.validationColor")
         slot(name="error-message" :message="Validation.message")
       .w-form-el__error.error(

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

@@ -111,6 +111,7 @@ export default {
   line-height: 1;
   font-size: 1.2em;
   width: 1em;
+  // The aspect ratio will not work if the content is the content overflows.
   height: 1em;
 
   &.size--xs {font-size: round(0.85 * $base-font-size);}

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

@@ -175,6 +175,8 @@ export default {
 .w-image-wrap {
   position: relative;
   display: inline-flex;
+  flex-grow: 0;
+  flex-shrink: 0;
   width: 4em;
 
   &--has-ratio {width: 100%;}

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

@@ -177,8 +177,8 @@ export default {
     attrs () {
       // Keep the `class` attribute bound to the wrapper and not the input.
       // eslint-disable-next-line no-unused-vars
-      const { class: classes, ...attrs } = this.$attrs
-      return attrs
+      const { class: classes, ...htmlAttrs } = this.$attrs
+      return htmlAttrs
     },
 
     listeners () {
@@ -377,6 +377,8 @@ $inactive-color: #777;
     span.fade-leave-to {position: absolute;}
   }
 
+  &--loading {cursor: wait;}
+
   // Input field wrapper.
   // ------------------------------------------------------
   &__input-wrap {

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

@@ -60,6 +60,7 @@ import DetachableMixin from '../mixins/detachable'
 export default {
   name: 'w-menu',
   mixins: [DetachableMixin],
+  inheritAttrs: false, // The attrs are only bound to the button-partial, not the root.
 
   props: {
     value: {}, // Show or hide.

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

@@ -20,6 +20,7 @@ export default {
     value: {},
     opacity: { type: [Number, String, Boolean] },
     bgColor: { type: String },
+    absolute: { type: Boolean },
     zIndex: { type: [Number, String, Boolean] },
     persistent: { type: Boolean },
     persistentNoAnimation: { type: Boolean }
@@ -46,7 +47,8 @@ export default {
     },
     classes () {
       return {
-        'w-overlay--persistent-animate': this.persistentAnimate
+        'w-overlay--persistent-animate': this.persistentAnimate,
+        'w-overlay--absolute': this.absolute
       }
     },
     styles () {
@@ -111,6 +113,7 @@ export default {
   justify-content: center;
   background-color: rgba(0, 0, 0, 0.3);
 
+  &--absolute {position: absolute;}
   &--persistent-animate {animation: 0.15s w-overlay-pop cubic-bezier(0.6, -0.28, 0.74, 0.05);}
   &--no-pointer-event {pointer-events: none;}
 }

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

@@ -7,8 +7,8 @@
     :style="`width: ${progressValue}%`")
 
   //- Circular progress.
-  template(v-else)
-    svg(:viewBox="`${circleCenter / 2} ${circleCenter / 2} ${circleCenter} ${circleCenter}`")
+  svg(v-else :viewBox="`${circleCenter / 2} ${circleCenter / 2} ${circleCenter} ${circleCenter}`")
+      //- Background first, in SVG there is no z-index.
       circle.bg(
         v-if="bgColor || this.progressValue > -1"
         :class="bgColor"
@@ -18,30 +18,21 @@
         fill="transparent"
         :stroke-dasharray="circleCircumference"
         :stroke-width="stroke")
-    svg.w-progress__progress(
-      :viewBox="`${circleCenter / 2} ${circleCenter / 2} ${circleCenter} ${circleCenter}`"
-      :style="`stroke-dashoffset: ${(1 - (progressValue / 100)) * circleCircumference}`")
-      circle(
+      circle.w-progress__progress(
         :cx="circleCenter"
         :cy="circleCenter"
         :r="circleRadius"
         fill="transparent"
         :stroke-width="stroke"
         :stroke-linecap="roundCap && 'round'"
-        :stroke-dasharray="circleCircumference")
+        :stroke-dasharray="circleCircumference"
+        :style="`stroke-dashoffset: ${(1 - (progressValue / 100)) * circleCircumference}`")
 
   .w-progress__label(v-if="label || $slots.default" :class="labelColor || false")
     slot {{ Math.round(progressValue) }}{{ circle ? '' : '%' }}
 </template>
 
 <script>
-/**
- * This component (circular) is hacked to work on Edge as it does not support transform on svg elements.
- * https://caniuse.com/#feat=mdn-css_properties_transform-origin_support_in_svg
- * It is meant to be 2 circles in 1 svg, with animation on the circle, now instead, there are 2 svgs,
- * and the animation is on the second svg itself.
- */
-
 // For circular progress.
 const circleSize = 40
 const circleRadius = circleSize / 2
@@ -256,7 +247,7 @@ $circle-size: 40;
   &--circular {
     display: inline-flex;
     width: 3em;
-    height: auto;
+    aspect-ratio: 1;
     font-size: $base-font-size;
 
     svg {display: block;width: 100%;}
@@ -264,19 +255,10 @@ $circle-size: 40;
     &.w-progress--default-bg circle.bg {stroke: rgba(0, 0, 0, 0.1);}
 
     .w-progress__progress {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-
-      circle {
-        stroke: currentColor;
-        stroke-dashoffset: inherit;
-        will-change: stroke-dashoffset;
-      }
+      transform-origin: 100% 100%;
       transform: rotate(-90deg);
-      will-change: transform;
+      stroke: currentColor;
+      will-change: stroke-dashoffset;
       @include default-transition;
     }
     &.w-progress--round-cap .w-progress__progress {stroke-linecap: round;}

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

@@ -21,19 +21,29 @@ component(
     role="radio")
   template(v-if="hasLabel && labelOnLeft")
     label.w-radio__label.w-form-el-shakable.pr2(
-      v-if="$slots.default || label"
+      v-if="$slots.default"
       :for="`w-radio--${_uid}`"
       :class="labelClasses")
       slot {{ label }}
+    label.w-radio__label.w-form-el-shakable.pr2(
+      v-else-if="label"
+      :for="`w-radio--${_uid}`"
+      :class="labelClasses"
+      v-html="label")
   .w-radio__input(
     @click="$refs.input.focus();$refs.input.click()"
     :class="this.color")
   template(v-if="hasLabel && !labelOnLeft")
     label.w-radio__label.w-form-el-shakable.pl2(
-      v-if="$slots.default || label"
+      v-if="$slots.default"
       :for="`w-radio--${_uid}`"
       :class="labelClasses")
       slot {{ label }}
+    label.w-radio__label.w-form-el-shakable.pl2(
+      v-else-if="label"
+      :for="`w-radio--${_uid}`"
+      :class="labelClasses"
+      v-html="label")
 </template>
 
 <script>
@@ -154,7 +164,7 @@ $inactive-color: #666;
     position: relative;
     border-radius: 100%;
     width: $small-form-el-size;
-    height: $small-form-el-size;
+    aspect-ratio: 1;
     display: flex;
     flex: 0 0 auto; // Prevent stretching width or height.
     align-items: center;
@@ -198,7 +208,7 @@ $inactive-color: #666;
     content: "";
     position: absolute;
     width: inherit;
-    height: inherit;
+    aspect-ratio: 1;
     background-color: currentColor;
     border-radius: 100%;
     transform: scale(0);

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

@@ -20,8 +20,8 @@ component(
     :readonly="isReadonly || null"
     :class="{ mt1: !inline && i }")
     slot(
-      v-if="$slots[`item.${i + 1}`] || $slots.item"
-      :name="$slots[`item.${i + 1}`] ? `item.${i + 1}` : 'item'"
+      v-if="$scopedSlots[`item.${i + 1}`] || $scopedSlots.item"
+      :name="$scopedSlots[`item.${i + 1}`] ? `item.${i + 1}` : 'item'"
       :item="getOriginalItem(item)"
       :index="i + 1"
       :checked="item.value === value")