Merge branch 'next' into animated-image-icon

src/components/checkbox/checkbox.styles.ts

@@ -72,6 +72,10 @@ export default css`
     width: 100%;
   }
 
+  .checkbox__icon--invisible {
+    visibility: hidden;
+  }
+
   .checkbox__checked-icon,
   .checkbox__indeterminate-icon {
     display: inline-flex;

src/components/checkbox/checkbox.ts

@@ -212,6 +212,11 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
   render() {
     const hasHelpTextSlot = isServer ? true : this.hasSlotController.test('help-text');
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    const isIndeterminate = !this.checked && this.indeterminate;
+
+    const iconName = isIndeterminate ? 'indeterminate' : 'check';
+    const iconState = isIndeterminate ? 'indeterminate' : 'check';
+    const iconVisible = this.checked || this.indeterminate;
 
     //
     // NOTE: we use a `<div>` around the label slot because of this Chrome bug.
@@ -265,21 +270,12 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
               @focus=${this.handleFocus}
             />
 
-            ${this.checked
-              ? html`
-                  <wa-icon part="checked-icon" class="checkbox__checked-icon" library="system" name="check"></wa-icon>
-                `
-              : html``}
-            ${!this.checked && this.indeterminate
-              ? html`
-                  <wa-icon
-                    part="indeterminate-icon"
-                    class="checkbox__indeterminate-icon"
-                    library="system"
-                    name="indeterminate"
-                  ></wa-icon>
-                `
-              : html``}
+            <wa-icon
+              part=${`${iconState}-icon`}
+              class=${`checkbox__${iconState}-icon ${iconVisible ? '' : 'checkbox__icon--invisible'}`}
+              library="system"
+              name=${iconName}
+            ></wa-icon>
           </span>
 
           <div part="label" class="checkbox__label">

src/components/progress-ring/progress-ring.styles.ts

@@ -3,7 +3,7 @@ import { css } from 'lit';
 export default css`
   :host {
     --size: 8rem;
-    --track-width: 0.25rem;
+    --track-width: 0.25em; // avoid using rems here - https://github.com/shoelace-style/webawesome-alpha/issues/89
     --track-color: var(--wa-color-neutral-fill-normal);
     --indicator-width: var(--track-width);
     --indicator-color: var(--wa-color-brand-fill-loud);