Merge remote-tracking branch 'origin/dev' into feature/package-globals

Author: iOvergaard

packages/uui-avatar/lib/uui-avatar.element.ts

@@ -15,6 +15,7 @@ export class UUIAvatarElement extends LitElement {
         display: inline-flex;
         align-items: center;
         justify-content: center;
+        flex-shrink: 0;
         position: relative;
         overflow: hidden;
         border-radius: 50%;

packages/uui-loader-circle/lib/uui-loader-circle.element.ts

@@ -1,6 +1,6 @@
-import { css, html, LitElement } from 'lit';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
-import { property, query } from 'lit/decorators.js';
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 /**
@@ -90,6 +90,9 @@ export class UUILoaderCircleElement extends LitElement {
         font-size: 0.3em;
         font-weight: 700;
         text-align: center;
+
+        /* Center the text */
+        padding-top: 0.09em;
       }
     `,
   ];
@@ -120,22 +123,19 @@ export class UUILoaderCircleElement extends LitElement {
   @property({ type: Boolean, reflect: true, attribute: 'show-progress' })
   showProgress = false;
 
-  @query('#svg-container')
-  private _container: any;
-
   private _resizeObserver = new ResizeObserver(() => this.onResize());
   private _isLarge = false;
 
   firstUpdated() {
-    this._resizeObserver.observe(this._container);
+    this._resizeObserver.observe(this);
   }
 
   disconnectedCallback() {
     this._resizeObserver.disconnect();
   }
 
   onResize() {
-    const newIsLarge = Number.parseFloat(this._container.clientHeight) >= 30;
+    const newIsLarge = this.clientHeight >= 30;
 
     if (this._isLarge != newIsLarge) {
       this._isLarge = newIsLarge;