wave-ui 3.8.1 → 3.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.8.1",
+  "version": "3.9.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",
@@ -50,30 +50,30 @@
     "publish-doc": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push --tag"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/eslint-parser": "^7.22.15",
-    "@faker-js/faker": "^8.2.0",
+    "@babel/core": "^7.23.7",
+    "@babel/eslint-parser": "^7.23.3",
+    "@faker-js/faker": "^8.3.1",
     "@mdi/font": "^6.9.96",
-    "@vitejs/plugin-vue": "^3.2.0",
-    "@vue/compiler-sfc": "3.3.4",
+    "@vitejs/plugin-vue": "^5.0.2",
+    "@vue/compiler-sfc": "3.4.4",
     "autoprefixer": "^10.4.16",
-    "axios": "^1.6.0",
-    "eslint": "^8.52.0",
-    "eslint-plugin-vue": "^9.18.1",
+    "axios": "^1.6.3",
+    "eslint": "^8.56.0",
+    "eslint-plugin-vue": "^9.19.2",
     "font-awesome": "^4.7.0",
-    "gsap": "^3.12.2",
+    "gsap": "^3.12.4",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.32",
     "pug": "^3.0.2",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.69.5",
+    "sass": "^1.69.7",
     "simple-syntax-highlighter": "^3.0.2",
     "splitpanes": "^3.1.5",
     "standard": "^17.1.0",
-    "vite": "^3.2.7",
-    "vite-svg-loader": "^4.0.0",
-    "vue": "^3.3.7",
+    "vite": "^5.0.10",
+    "vite-svg-loader": "^5.1.0",
+    "vue": "^3.4.4",
     "vue-router": "^4.2.5",
     "vueperslides": "^3.5.1",
     "vuex": "^4.1.0"

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

@@ -213,10 +213,7 @@ export default {
     &:before {
       content: '';
       position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+      inset: 0;
       background-color: currentColor;
       opacity: 0;
       transition: $fast-transition-duration;

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

@@ -162,10 +162,7 @@ export default {
   // ------------------------------------------------------
   &:before, &:after {
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset: 0;
     background-color: currentColor;
     pointer-events: none;
   }

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

@@ -2,26 +2,41 @@
 .w-autocomplete(:class="classes" @click="onClick")
   template(v-if="selection.length")
     .w-autocomplete__selection(v-for="(item, i) in selection")
-      span(v-html="item[itemLabelKey]")
-      w-button(@click.stop="unselectItem(i)" icon="wi-cross" xs text)
-  .w-autocomplete__placeholder(v-if="!selection.length && !keywords && placeholder" v-html="placeholder")
+      slot(name="selection" :item="item" :unselect="i => unselectItem(i)")
+        span(v-html="item[itemLabelKey]")
+        w-button(@click.stop="unselectItem(i)" icon="wi-cross" xs text color="currentColor")
+  .w-autocomplete__placeholder(
+    v-if="!selection.length && !keywords && placeholder"
+    v-html="placeholder")
   input.w-autocomplete__input(
     ref="input"
-    :model-value="keywords"
+    :value="keywords"
     v-on="inputEventListeners")
-  w-transition-slide-fade(y)
-    ul.w-autocomplete__menu(v-if="menuOpen" ref="menu")
+  w-transition-slide-fade
+    ul.w-autocomplete__menu(
+      v-if="menuOpen"
+      ref="menu"
+      @mousedown="menuIsBeingClicked = true"
+      @mouseup="setEndOfMenuClick"
+      @touchstart="menuIsBeingClicked = true"
+      @touchend="setEndOfMenuClick")
       li(
         v-for="(item, i) in filteredItems"
         :key="i"
-        @click.stop="selectItem(item)"
+        @click.stop="selectItem(item), $emit('item-click', item)"
         :class="{ highlighted: highlightedItem === item.uid }")
-        span(v-html="item[itemLabelKey]")
+        slot(name="item" :item="item" :highlighted="highlightedItem === item.uid")
+          span(v-html="item[itemLabelKey]")
       li.w-autocomplete__no-match(
         v-if="!filteredItems.length"
         :class="{ 'w-autocomplete__no-match--default': !$slots.noMatch }")
         slot(name="no-match")
           .caption(v-html="noMatch ?? 'No match.'")
+      li.w-autocomplete__extra-item(
+        v-if="$slots['extra-item']"
+        @click="selectExtraItem"
+        :class="{ highlighted: highlightedItem === 'extra-item' }")
+        slot(name="extra-item")
 </template>
 
 <script>
@@ -47,13 +62,17 @@ export default {
     itemSearchableKey: { type: String, default: 'searchable' }
   },
 
-  emits: ['input'],
+  // item-select is also from keyboard, 'item-click' may be useful for mouseenter mouseleave events.
+  emits: ['update:modelValue', 'input', 'focus', 'blur', 'keydown', 'item-click', 'item-select', 'extra-item-select'],
 
   data: () => ({
     keywords: '',
     selection: [],
     menuOpen: false,
-    highlightedItem: null
+    highlightedItem: null,
+    // The focus-blur events occur more times than it should emit to the outside due to the menu
+    // item clicking. So keep the focus on as long as the user is interacting with the autocomplete.
+    menuIsBeingClicked: false
   }),
 
   computed: {
@@ -97,6 +116,7 @@ export default {
 
     highlightedItemIndex () {
       if (this.highlightedItem === null) return -1
+      else if (this.highlightedItem === 'extra-item') return this.filteredItems.length
       return this.filteredItems.findIndex(item => item.uid === this.highlightedItem)
     },
 
@@ -105,10 +125,19 @@ export default {
         ...this.$attrs,
         input: e => {
           this.keywords = e.target.value
-          if (typeof this.$attrs.input === 'function') this.$attrs.input(this.keywords)
         },
-        focus: this.onFocus,
-        keydown: this.onKeydown,
+        focus: e => {
+          if (this.menuIsBeingClicked) return
+          this.onFocus(e)
+          this.$emit('focus', e)
+        },
+        blur: e => {
+          if (!this.menuIsBeingClicked) this.$emit('blur', e)
+        },
+        keydown: e => {
+          this.onKeydown(e)
+          this.$emit('keydown', e)
+        },
         drop: this.onDrop,
         compositionstart: this.onCompositionStart,
         compositionupdate: this.onCompositionUpdate
@@ -137,7 +166,11 @@ export default {
       this.selection.push(item)
       this.highlightedItem = item.uid
       this.keywords = ''
-      this.$emit('input', this.multiple ? this.selection.map(item => item[this.itemValueKey]) : item[this.itemValueKey])
+      const emitPayload = this.multiple ? this.selection.map(item => item[this.itemValueKey]) : item[this.itemValueKey]
+      // Unlike input, item-select is only emitted when selecting (not unselecting).
+      this.$emit('item-select', item)
+      this.$emit('update:modelValue', emitPayload)
+      this.$emit('input', emitPayload)
       this.$refs.input.focus()
       if (!this.multiple) this.closeMenu()
     },
@@ -145,10 +178,21 @@ export default {
     unselectItem (i) {
       this.selection.splice(i ?? this.selection.length - 1, 1)
       this.highlightedItem = null
+      this.$emit('update:modelValue', null)
       this.$emit('input', null)
       this.$refs.input.focus()
     },
 
+    selectExtraItem () {
+      this.keywords = ''
+      this.$emit('extra-item-select')
+      this.closeMenu()
+    },
+
+    setEndOfMenuClick () {
+      setTimeout(() => (this.menuIsBeingClicked = false), 100)
+    },
+
     onClick () {
       if (!this.openOnKeydown) this.openMenu()
       this.$refs.input.focus()
@@ -166,7 +210,7 @@ export default {
     // },
 
     onKeydown (e) {
-      const itemsCount = this.filteredItems.length
+      const itemsCount = this.filteredItems.length + (this.$slots['extra-item'] ? 1 : 0)
       // `e.key.length === 1`: is all the keyboard keys that generate a character.
       if (!this.openOnKeydown || ((this.keywords || e.key.length === 1) && !this.menuOpen)) this.openMenu()
 
@@ -181,7 +225,8 @@ export default {
       // Enter key.
       else if (e.keyCode === 13) {
         e.preventDefault() // Prevent form submissions.
-        if (this.highlightedItemIndex >= 0) this.selectItem(this.filteredItems[this.highlightedItemIndex])
+        if (this.highlightedItem === 'extra-item') this.selectExtraItem()
+        else if (this.highlightedItemIndex >= 0) this.selectItem(this.filteredItems[this.highlightedItemIndex])
       }
 
       // Up & down arrow keys.
@@ -191,16 +236,20 @@ export default {
         if (index === -1) index = e.keyCode === 38 ? itemsCount - 1 : 0
         else index = (index + (e.keyCode === 38 ? -1 : 1) + itemsCount) % itemsCount // Never out of range.
 
-        this.highlightedItem = this.filteredItems[index]?.uid || 0
+        if (this.$slots['extra-item'] && index === itemsCount - 1) this.highlightedItem = 'extra-item'
+        else this.highlightedItem = this.filteredItems[index]?.uid || 0
 
         // Scroll the container if highlighted item is not in view.
         const menuEl = this.$refs.menu
         if (menuEl) {
-          const { offsetHeight: itemElHeight, offsetTop: itemElTop } = menuEl.childNodes[index] || {}
-          if (menuEl.scrollTop + menuEl.offsetHeight - itemElHeight < itemElTop) {
-            menuEl.scrollTop = itemElTop - menuEl.offsetHeight + itemElHeight
+          if (this.$slots['extra-item'] && index === itemsCount - 1) menuEl.scrollTop = menuEl.scrollHeight
+          else {
+            const { offsetHeight: itemElHeight, offsetTop: itemElTop } = menuEl.childNodes[index] || {}
+            if (menuEl.scrollTop + menuEl.offsetHeight - itemElHeight < itemElTop) {
+              menuEl.scrollTop = itemElTop - menuEl.offsetHeight + itemElHeight
+            }
+            else if (menuEl.scrollTop > itemElTop) menuEl.scrollTop = itemElTop
           }
-          else if (menuEl.scrollTop > itemElTop) menuEl.scrollTop = itemElTop
         }
       }
 
@@ -249,6 +298,18 @@ export default {
 
   beforeUnmount () {
     document.removeEventListener('click', this.onDocumentClick)
+  },
+
+  watch: {
+    modelValue (value) {
+      this.selection = []
+      if (value) {
+        const arrayOfValues = Array.isArray(value) ? value : [value]
+        arrayOfValues.forEach(value => {
+          this.selection.push(this.optimizedItemsForSearch.find(item => item[this.itemValueKey] === +value))
+        })
+      }
+    }
   }
 }
 </script>
@@ -259,7 +320,7 @@ export default {
   flex-wrap: wrap;
   gap: 4px;
   position: relative;
-  border-radius: 4px;
+  border-radius: $border-radius;
   border: $border;
   padding: 2px 4px;
   user-select: none;
@@ -274,7 +335,7 @@ export default {
     align-items: center;
     background: rgba(var(--w-contrast-bg-color-rgb), 0.035);
     border: 1px solid rgba(var(--w-contrast-bg-color-rgb), 0.05);
-    border-radius: 4px;
+    border-radius: $border-radius;
     padding: 0 2px 0 4px;
     flex-shrink: 0;
 
@@ -306,8 +367,8 @@ export default {
     background-color: $base-bg-color;
     border: 1px solid rgba(var(--w-contrast-bg-color-rgb), 0.2);
     border-top: none;
-    border-bottom-left-radius: inherit;
-    border-bottom-right-radius: inherit;
+    border-bottom-left-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
     overflow: auto;
     z-index: 10;
 

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

@@ -117,6 +117,7 @@ export default {
 
   &--round {
     aspect-ratio: 1;
+    min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
     padding: 0;
   }
 

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

@@ -203,6 +203,7 @@ $spinner-size: 40;
     aspect-ratio: 1;
     border-radius: 99em;
     padding: 0;
+    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;}
@@ -236,10 +237,7 @@ $spinner-size: 40;
   &:before {
     content: '';
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     opacity: 0;
     background-color: #000;
     border-radius: inherit;
@@ -302,10 +300,7 @@ $spinner-size: 40;
 
   &__loader {
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;

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

@@ -204,10 +204,7 @@ export default {
 
   &--absolute {
     position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
+    inset: 0;
     overflow: hidden;
   }
 
@@ -223,10 +220,7 @@ export default {
 
     .w-overlay {
       position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
+      inset: 0;
       z-index: 2;
     }
     .w-drawer {position: absolute;}

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

@@ -111,7 +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.
+  // The aspect ratio will not work if the content overflows (needs overflow hidden, but we don't want that in the library).
   height: 1em;
 
   &.size--xs {font-size: round(0.85 * $base-font-size);}

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

@@ -196,19 +196,13 @@ export default {
   background-repeat: no-repeat;
   background-size: cover;
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
 
   &--contain {background-size: contain;}
 
   &__loader, &__content {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     display: flex;
     justify-content: center;
     align-items: center;

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

@@ -237,7 +237,7 @@ export default {
     overallFilesProgress () {
       const progress = +this.inputFiles.reduce((total, file) => total + file.progress, 0)
       const total = progress / this.inputFiles.length
-      this.$emit('update:overallProgress', this.inputFiles.length ? total : undefined)
+      this.$emit('update:overallProgress', this.inputFiles.length ? total : 0)
 
       return total
     },

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

@@ -449,10 +449,7 @@ export default {
       &:before {
         content: '';
         position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
+        inset: 0;
         background-color: currentColor;
         opacity: 0;
         transition: 0.2s;

package/src/wave-ui/components/w-notification-manager.vue

@@ -50,9 +50,7 @@ export default {
 <style lang="scss">
 .w-notification-manager {
   position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
+  inset: 0 0 0 auto;
   z-index: 1000;
   pointer-events: none;
   width: 280px;

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

@@ -154,10 +154,7 @@ $circle-size: 40;
     &.w-progress--default-bg:after {
       content: '';
       position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
+      inset: 0;
       border-radius: inherit;
       background-color: currentColor;
       opacity: 0.15;
@@ -188,10 +185,7 @@ $circle-size: 40;
       &:before, &:after {
         content: '';
         position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: -5%;
+        inset: 0 -5% 0 0;
         background: currentColor;
         z-index: 1;
         will-change: transform;

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

@@ -238,10 +238,7 @@ export default {
   &__button:after {
     content: "";
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     background-color: currentColor;
     border-radius: 100%;
     transform: translateX(100%) scale(0);

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

@@ -15,23 +15,23 @@
 <script>
 const domProps = {
   h: {
-    horizOrVert: 'horizontal',
+    direction: 'horizontal',
     topOrLeft: 'left',
-    widthOrHeight: 'width',
-    offsetWidthOrHeight: 'offsetWidth',
-    maxWidthOrHeight: 'max-width',
-    scrollWidthOrHeight: 'scrollWidth',
+    size: 'width',
+    offsetSize: 'offsetWidth',
+    maxSize: 'max-width',
+    scrollSize: 'scrollWidth',
     clientXorY: 'clientX',
     deltaXorY: 'deltaX',
     scrollTopOrLeft: 'scrollLeft'
   },
   v: {
-    horizOrVert: 'vertical',
+    direction: 'vertical',
     topOrLeft: 'top',
-    widthOrHeight: 'height',
-    offsetWidthOrHeight: 'offsetHeight',
-    maxWidthOrHeight: 'max-height',
-    scrollWidthOrHeight: 'scrollHeight',
+    size: 'height',
+    offsetSize: 'offsetHeight',
+    maxSize: 'max-height',
+    scrollSize: 'scrollHeight',
     clientXorY: 'clientY',
     deltaXorY: 'deltaY',
     scrollTopOrLeft: 'scrollTop'
@@ -72,27 +72,26 @@ export default {
 
     scrollableClasses () {
       return {
-        [`w-scrollable--${this.m.horizOrVert}`]: true
+        [`w-scrollable--${this.m.direction}`]: true
       }
     },
 
     scrollbarClasses () {
       return {
-        [`w-scrollbar--${this.m.horizOrVert}`]: true
+        [`w-scrollbar--${this.m.direction}`]: true
       }
     },
 
     thumbSizePercent () {
       if (!this.mounted) return 0
-      console.log('😒', this[this.m.widthOrHeight], this.$refs.scrollable[[this.m.offsetWidthOrHeight]])
-      const widthOrHeight = this[this.m.widthOrHeight] ?? this.$refs.scrollable[[this.m.offsetWidthOrHeight]]
-      // if (widthOrHeight === undefined) widthOrHeight = this.$refs.scrollable.offsetWidthOrHeight
-      return (widthOrHeight * 100 / this.$refs.scrollable?.[this.m.scrollWidthOrHeight]) || 0
+      const size = this[this.m.size] ?? this.$refs.scrollable[[this.m.offsetSize]]
+      // if (size === undefined) size = this.$refs.scrollable.offsetSize
+      return (size * 100 / this.$refs.scrollable?.[this.m.scrollSize]) || 0
     },
 
     scrollableStyles () {
       return {
-        [this.m.maxWidthOrHeight]: `${this[this.m.widthOrHeight]}px`
+        [this.m.maxSize]: `${this[this.m.size]}px`
       }
     },
 
@@ -100,7 +99,7 @@ export default {
       let topOrLeftValue = this.scrollValuePercent
       topOrLeftValue = Math.max(0, Math.min(topOrLeftValue, 100 - this.thumbSizePercent))
       return {
-        [this.m.widthOrHeight]: `${this.thumbSizePercent}%`,
+        [this.m.size]: `${this.thumbSizePercent}%`,
         [this.m.topOrLeft]: `${topOrLeftValue}%`
       }
     }
@@ -149,6 +148,9 @@ export default {
       this.scrollable.hovered = false
     },
 
+    onResize (e) {
+    },
+
     onMouseWheel (e) {
       if (!this.scrollable.hovered) return // Only scroll a w-scrollable element that is being hovered.
 
@@ -166,12 +168,12 @@ export default {
     computeScroll (cursorPositionXorY) {
       const { top, left, width, height } = this.$refs.scrollable.getBoundingClientRect()
       const topOrLeft = this.isHorizontal ? left : top
-      const widthOrHeight = this.isHorizontal ? width : height
-      this.scrollValuePercent = Math.max(0, Math.min(((cursorPositionXorY - topOrLeft) / widthOrHeight) * 100, 100))
+      const size = this.isHorizontal ? width : height
+      this.scrollValuePercent = Math.max(0, Math.min(((cursorPositionXorY - topOrLeft) / size) * 100, 100))
     },
 
     scroll () {
-      this.$refs.scrollable[this.m.scrollTopOrLeft] = this.scrollValuePercent * this.$refs.scrollable?.[this.m.scrollWidthOrHeight] / 100
+      this.$refs.scrollable[this.m.scrollTopOrLeft] = this.scrollValuePercent * this.$refs.scrollable?.[this.m.scrollSize] / 100
       this.updateThumbPosition()
     },
 
@@ -187,7 +189,9 @@ export default {
     this.scrollable.left = left
 
     this.$el.parentNode.style.position = 'relative'
-    this.$el.parentNode.style[this.m.maxWidthOrHeight] = `${this[this.m.widthOrHeight]}px`
+    this.$el.parentNode.style.padding = 0
+
+    window.addEventListener('resize', this.onResize)
   }
 }
 </script>
@@ -204,15 +208,11 @@ export default {
   user-select: none;
 
   &--horizontal {
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: auto 0 0;
     height: 8px;
   }
   &--vertical {
-    top: 0;
-    bottom: 0;
-    right: 0;
+    inset: 0 0 0 auto;
     width: 8px;
   }
 

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

@@ -302,6 +302,7 @@ export default {
       top: 0;
       width: $base-increment;
       aspect-ratio: 1;
+      min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
       background-color: $slider-step-label-bg-color;
       border-radius: 99em;
       // box-shadow: 0 0 0 1px #fff;
@@ -365,6 +366,7 @@ export default {
     position: absolute;
     width: 3 * $base-increment;
     aspect-ratio: 1;
+    min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
     left: 100%;
     top: 50%;
     transform: translate(-50%, -50%);
@@ -380,6 +382,7 @@ export default {
     top: 0;
     width: 100%;
     aspect-ratio: 1;
+    min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
     border: none;
     border-radius: 99em;
     cursor: pointer;
@@ -395,10 +398,7 @@ export default {
     }
     // Colored border on thumb when hover and active - but with a transparency.
     &:before {
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
+      inset: 0;
       opacity: 0.5;
       border: 1px solid currentColor;
     }
@@ -459,6 +459,7 @@ export default {
       border-radius: 99em 99em 99em 0;
       width: 2.8em;
       aspect-ratio: 1;
+      min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
 
       & > div {
         position: absolute;

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

@@ -62,6 +62,7 @@ export default {
   font-size: 2rem;
   width: 1em;
   aspect-ratio: 1;
+  min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
 
   &.size--xs {font-size: round(0.9 * divide($base-font-size, 2)) * 2;}
   &.size--sm {font-size: round(1.5 * $base-font-size);}
@@ -74,6 +75,7 @@ export default {
     position: absolute;
     width: 100%;
     aspect-ratio: 1;
+    min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
     top: 0;
     left: 0;
     background-color: currentColor;