From 06360237977fd4850a29b3f927922cfe57b0a495 Mon Sep 17 00:00:00 2001
From: konnorrogers <konnor5456@gmail.com>
Date: Tue, 22 Oct 2024 16:46:17 -0400
Subject: [PATCH 1/4] fix checkbox layout shift

---
 src/components/checkbox/checkbox.styles.ts |  4 ++++
 src/components/checkbox/checkbox.ts        | 21 ++++++---------------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts
index 829eded88..59b026e74 100644
--- a/src/components/checkbox/checkbox.styles.ts
+++ b/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;
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index 608a723c5..23335f422 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/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,7 @@ 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">

From ce2141023372be97842a398e47058f3d9a72c63c Mon Sep 17 00:00:00 2001
From: konnorrogers <konnor5456@gmail.com>
Date: Tue, 22 Oct 2024 17:23:32 -0400
Subject: [PATCH 2/4] prettier

---
 src/components/checkbox/checkbox.ts | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index 23335f422..2328f1213 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -212,11 +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 isIndeterminate = !this.checked && this.indeterminate;
 
-    const iconName = isIndeterminate ? "indeterminate" : "check"
-    const iconState = isIndeterminate ? "indeterminate" : "check"
-    const iconVisible = 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.
@@ -270,7 +270,12 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
               @focus=${this.handleFocus}
             />
 
-            <wa-icon part=${`${iconState}-icon`} class=${`checkbox__${iconState}-icon ${iconVisible ? "" : "checkbox__icon--invisible"}`} library="system" name=${iconName}></wa-icon>
+            <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">

From 32a777e49ec0254dd06583e96e951772b1a096b3 Mon Sep 17 00:00:00 2001
From: konnorrogers <konnor5456@gmail.com>
Date: Thu, 24 Oct 2024 12:07:12 -0400
Subject: [PATCH 3/4] fix progress ring in safari

---
 src/components/progress-ring/progress-ring.styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/progress-ring/progress-ring.styles.ts b/src/components/progress-ring/progress-ring.styles.ts
index 84fa6925a..f5f7f002c 100644
--- a/src/components/progress-ring/progress-ring.styles.ts
+++ b/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;
     --track-color: var(--wa-color-neutral-fill-normal);
     --indicator-width: var(--track-width);
     --indicator-color: var(--wa-color-brand-fill-loud);

From 53d69774d3c1e7b817f74a9616660c73c17fef11 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 28 Oct 2024 11:58:42 -0400
Subject: [PATCH 4/4] Update
 src/components/progress-ring/progress-ring.styles.ts

---
 src/components/progress-ring/progress-ring.styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/progress-ring/progress-ring.styles.ts b/src/components/progress-ring/progress-ring.styles.ts
index f5f7f002c..f1fbd7615 100644
--- a/src/components/progress-ring/progress-ring.styles.ts
+++ b/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.25em;
+    --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);