wave-ui 2.44.0 → 2.45.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "2.44.0",
+  "version": "2.45.1",
   "description": "An emerging UI framework for Vue.js (2 & 3) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "homepage": "https://antoniandre.github.io/wave-ui",
@@ -48,29 +48,29 @@
     "lint": "vite lint"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.6",
+    "@babel/core": "^7.20.2",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@mdi/font": "^5.9.55",
     "@vitejs/plugin-vue": "^3.2.0",
-    "@vue/compiler-sfc": "3.2.41",
+    "@vue/compiler-sfc": "3.2.45",
     "autoprefixer": "^10.4.13",
     "axios": "^0.25.0",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^9.6.0",
+    "eslint-plugin-vue": "^9.7.0",
     "font-awesome": "^4.7.0",
     "gsap": "^3.11.3",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
-    "postcss": "^8.4.18",
+    "postcss": "^8.4.19",
     "pug": "^3.0.2",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.55.0",
+    "sass": "^1.56.1",
     "simple-syntax-highlighter": "^2.2.5",
     "splitpanes": "^3.1.5",
     "standard": "^17.0.0",
-    "vite": "^3.2.1",
-    "vue": "^3.2.41",
+    "vite": "^3.2.3",
+    "vue": "^3.2.45",
     "vue-router": "^4.1.6",
     "vueperslides": "^3.5.1",
     "vuex": "^4.1.0"

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="$slots[`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="on")
+      slot
+  div(v-html="tooltip")
+button-partial(v-else v-bind="buttonProps")
+  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>
@@ -152,7 +162,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;
@@ -163,8 +173,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;
@@ -175,7 +185,6 @@ $inactive-color: #666;
     transition: $transition-duration ease-out;
     opacity: 0;
     position: relative;
-    top: -0.5px; // For browser zoom levels.
     z-index: 1;
 
     :checked ~ & {
@@ -190,7 +199,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;
@@ -221,7 +230,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-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-icon.vue

@@ -88,7 +88,7 @@ export default {
   methods: {
     readIcon () {
       const { default: slot } = this.$slots
-      const [fontName = '', icon = ''] = typeof slot === 'function' && slot()[0].children.trim().split(' ') || []
+      const [fontName = '', icon = ''] = (typeof slot === 'function' && slot()[0].children.trim().split(' ')) || []
       this.fontName = fontName
       this.icon = icon
 
@@ -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-input.vue

@@ -182,8 +182,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 () {
@@ -193,12 +193,6 @@ export default {
       return listeners
     },
 
-    attrs () {
-      // eslint-disable-next-line no-unused-vars
-      const { class: Class, ...htmlAttrs } = this.$attrs
-      return htmlAttrs
-    },
-
     hasValue () {
       switch (this.type) {
         case 'file': return !!this.inputFiles.length
@@ -387,6 +381,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

@@ -50,6 +50,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: {
     modelValue: {}, // Show or hide.

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

@@ -21,6 +21,7 @@ export default {
     modelValue: {},
     opacity: { type: [Number, String, Boolean] },
     bgColor: { type: String },
+    absolute: { type: Boolean },
     zIndex: { type: [Number, String, Boolean] },
     persistent: { type: Boolean },
     persistentNoAnimation: { type: Boolean }
@@ -47,7 +48,8 @@ export default {
     },
     classes () {
       return {
-        'w-overlay--persistent-animate': this.persistentAnimate
+        'w-overlay--persistent-animate': this.persistentAnimate,
+        'w-overlay--absolute': this.absolute
       }
     },
     styles () {
@@ -112,6 +114,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-rating.vue

@@ -165,7 +165,7 @@ export default {
   &__button {
     position: relative;
     width: 1.1em;
-    height: 1.1em;
+    aspect-ratio: 1;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -215,6 +215,7 @@ export default {
     position: absolute;
     left: 0;
     width: 100%;
+    height: 100%;
     font-size: 1em;
     justify-content: flex-start;
     overflow: hidden;

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

@@ -295,7 +295,7 @@ export default {
       transform: translateX(-50%);
       top: 0;
       width: $base-increment;
-      height: $base-increment;
+      aspect-ratio: 1;
       background-color: rgba(0, 0, 0, 0.2);
       border-radius: 99em;
       // box-shadow: 0 0 0 1px #fff;
@@ -358,7 +358,7 @@ export default {
   &__thumb {
     position: absolute;
     width: 3 * $base-increment;
-    height: 3 * $base-increment;
+    aspect-ratio: 1;
     left: 100%;
     top: 50%;
     transform: translate(-50%, -50%);
@@ -373,7 +373,7 @@ export default {
     left: 0;
     top: 0;
     width: 100%;
-    height: 100%;
+    aspect-ratio: 1;
     border: none;
     border-radius: 99em;
     cursor: pointer;
@@ -452,7 +452,7 @@ export default {
       transform: translateX(-50%) rotate(-45deg);
       border-radius: 99em 99em 99em 0;
       width: 2.8em;
-      height: 2.8em;
+      aspect-ratio: 1;
 
       & > div {
         position: absolute;

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

@@ -61,7 +61,7 @@ export default {
   align-self: center;
   font-size: 2rem;
   width: 1em;
-  height: 1em;
+  aspect-ratio: 1;
 
   &.size--xs {font-size: round(0.9 * divide($base-font-size, 2)) * 2;}
   &.size--sm {font-size: round(1.5 * $base-font-size);}
@@ -73,7 +73,7 @@ export default {
     content: '';
     position: absolute;
     width: 100%;
-    height: 100%;
+    aspect-ratio: 1;
     top: 0;
     left: 0;
     background-color: currentColor;