From 76e55f840a94642f436471b87b2d29a48dbf6b8a Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Thu, 27 Jun 2024 17:50:03 -0400
Subject: [PATCH 1/5] progress on vertical alignment of inline-block elements

---
 docs/docs/experimental/sandbox.md          | 122 ++++++++-------------
 src/components/checkbox/checkbox.styles.ts |   4 +-
 src/components/radio/radio.styles.ts       |   6 +-
 src/components/switch/switch.styles.ts     |   4 +-
 4 files changed, 54 insertions(+), 82 deletions(-)

diff --git a/docs/docs/experimental/sandbox.md b/docs/docs/experimental/sandbox.md
index 4884946f6..6a6ca8609 100644
--- a/docs/docs/experimental/sandbox.md
+++ b/docs/docs/experimental/sandbox.md
@@ -176,79 +176,51 @@ layout: page
 ## Tests
 
 ```html {.example}
-<wa-button size="medium" style="width: 100%;" caret>Medium</wa-button>
-<br /><br />
-<wa-select>
-  <wa-option value="option-1">Option 1</wa-option>
-  <wa-option value="option-2">Option 2</wa-option>
-</wa-select>
-<br /><br />
-<wa-input placeholder="Small" size="small">
-  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
-  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
-</wa-input>
-<wa-button size="small">
-  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
-  Settings
-</wa-button>
-<br /><br />
-<wa-input placeholder="Medium" size="medium">
-  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
-  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
-</wa-input>
-<wa-button size="medium">
-  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
-  Settings
-</wa-button>
-<br /><br />
-<wa-input placeholder="Large" size="large">
-  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
-  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
-</wa-input>
-<wa-button size="large">
-  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
-  Settings
-</wa-button>
-<br /><br />
-<wa-button size="medium">
-  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
-</wa-button>
-<br /><br />
-<wa-button-group label="Alignment">
-  <wa-button appearance="outlined" variant="brand">Left</wa-button>
-  <wa-button appearance="outlined" variant="brand">Center</wa-button>
-  <wa-button appearance="outlined" variant="brand">Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment">
-  <wa-button appearance="outlined" variant="success">Left</wa-button>
-  <wa-button appearance="outlined" variant="success">Center</wa-button>
-  <wa-button appearance="outlined" variant="success">Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment">
-  <wa-button appearance="outlined">Left</wa-button>
-  <wa-button appearance="outlined">Center</wa-button>
-  <wa-button appearance="outlined">Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment">
-  <wa-button appearance="outlined" variant="warning">Left</wa-button>
-  <wa-button appearance="outlined" variant="warning">Center</wa-button>
-  <wa-button appearance="outlined" variant="warning">Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment">
-  <wa-button appearance="outlined" variant="danger">Left</wa-button>
-  <wa-button appearance="outlined" variant="danger">Center</wa-button>
-  <wa-button appearance="outlined" variant="danger">Right</wa-button>
-</wa-button-group>
+<style>
+  div.alignment {
+    position: relative;
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+  }
+  div.alignment::after {
+    content: '';
+    position: absolute;
+    top: calc(50% - 1px);
+    width: 100%;
+    height: 2px;
+    background-color: red;
+  }
+</style>
+<div class="alignment">
+  <wa-switch size="small">OCBS</wa-switch>
+  <wa-checkbox size="small">OCBS</wa-checkbox>
+  <wa-radio value="1" size="small">OCBS</wa-radio>
+  <wa-button size="small">OCBS</wa-button>
+</div>
+<div class="alignment">
+  <wa-switch>OCBS</wa-switch>
+  <wa-checkbox>OCBS</wa-checkbox>
+  <wa-radio value="1">OCBS</wa-radio>
+  <wa-button>OCBS</wa-button>
+</div>
+<div class="alignment">
+  <wa-switch size="large">OCBS</wa-switch>
+  <wa-checkbox size="large">OCBS</wa-checkbox>
+  <wa-radio value="1" size="large">OCBS</wa-radio>
+  <wa-button size="large">OCBS</wa-button>
+</div>
+<div class="alignment">
+  <wa-input size="small"></wa-input>
+  <wa-button size="small">OCBS</wa-button>
+</div>
+<div class="alignment">
+  <wa-badge>OCBS</wa-badge>
+  <wa-button>OCBS</wa-button>
+  <wa-avatar style="--size: var(--wa-form-control-height-m)"></wa-avatar>
+</div>
+<div class="alignment">
+  <wa-badge size="large">OCBS</wa-badge>
+  <wa-button size="large">OCBS</wa-button>
+</div>
 ```
\ No newline at end of file
diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts
index 0b8ec0c89..829eded88 100644
--- a/src/components/checkbox/checkbox.styles.ts
+++ b/src/components/checkbox/checkbox.styles.ts
@@ -20,7 +20,7 @@ export default css`
 
   .checkbox {
     position: relative;
-    display: inline-flex;
+    display: flex;
     align-items: flex-start;
     font: inherit;
     color: var(--wa-form-control-value-color);
@@ -43,7 +43,7 @@ export default css`
   .checkbox__control {
     flex: 0 0 auto;
     position: relative;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     width: var(--toggle-size);
diff --git a/src/components/radio/radio.styles.ts b/src/components/radio/radio.styles.ts
index 4d90d989e..b94df82d2 100644
--- a/src/components/radio/radio.styles.ts
+++ b/src/components/radio/radio.styles.ts
@@ -21,7 +21,7 @@ export default css`
   }
 
   .radio {
-    display: inline-flex;
+    display: flex;
     align-items: top;
     font: inherit;
     color: var(--wa-form-control-value-color);
@@ -42,7 +42,7 @@ export default css`
   }
 
   .radio__checked-icon {
-    display: inline-flex;
+    display: flex;
     fill: currentColor;
     width: var(--toggle-size);
     height: var(--toggle-size);
@@ -52,7 +52,7 @@ export default css`
   .radio__control {
     flex: 0 0 auto;
     position: relative;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     width: var(--toggle-size);
diff --git a/src/components/switch/switch.styles.ts b/src/components/switch/switch.styles.ts
index ed995abb7..151e0cd32 100644
--- a/src/components/switch/switch.styles.ts
+++ b/src/components/switch/switch.styles.ts
@@ -33,7 +33,7 @@ export default css`
 
   .switch {
     position: relative;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     font: inherit;
     color: var(--wa-form-control-value-color);
@@ -44,7 +44,7 @@ export default css`
   .switch__control {
     flex: 0 0 auto;
     position: relative;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     width: var(--width);

From 7474a80ff99b74ab5e60470a2823fffb45bda1a1 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Wed, 3 Jul 2024 17:32:43 -0400
Subject: [PATCH 2/5] progress on color picker and range alignment

---
 docs/docs/experimental/sandbox.md             | 92 ++++++++++++-------
 .../color-picker/color-picker.styles.ts       | 12 +--
 src/components/range/range.styles.ts          |  8 +-
 3 files changed, 67 insertions(+), 45 deletions(-)

diff --git a/docs/docs/experimental/sandbox.md b/docs/docs/experimental/sandbox.md
index 6a6ca8609..1bbbc8785 100644
--- a/docs/docs/experimental/sandbox.md
+++ b/docs/docs/experimental/sandbox.md
@@ -177,7 +177,11 @@ layout: page
 
 ```html {.example}
 <style>
+  div.test-cases > * + * {
+    margin-top: 1rem;
+  }
   div.alignment {
+    background: linear-gradient(to bottom, lightblue, lightblue 1px, transparent 1px, transparent), linear-gradient(to top, lightblue, lightblue 1px, transparent 1px, transparent);
     position: relative;
     display: flex;
     gap: 1rem;
@@ -186,41 +190,65 @@ layout: page
   div.alignment::after {
     content: '';
     position: absolute;
-    top: calc(50% - 1px);
+    top: calc(50% - 0.5px);
     width: 100%;
-    height: 2px;
+    height: 1px;
     background-color: red;
   }
 </style>
-<div class="alignment">
-  <wa-switch size="small">OCBS</wa-switch>
-  <wa-checkbox size="small">OCBS</wa-checkbox>
-  <wa-radio value="1" size="small">OCBS</wa-radio>
-  <wa-button size="small">OCBS</wa-button>
-</div>
-<div class="alignment">
-  <wa-switch>OCBS</wa-switch>
-  <wa-checkbox>OCBS</wa-checkbox>
-  <wa-radio value="1">OCBS</wa-radio>
-  <wa-button>OCBS</wa-button>
-</div>
-<div class="alignment">
-  <wa-switch size="large">OCBS</wa-switch>
-  <wa-checkbox size="large">OCBS</wa-checkbox>
-  <wa-radio value="1" size="large">OCBS</wa-radio>
-  <wa-button size="large">OCBS</wa-button>
-</div>
-<div class="alignment">
-  <wa-input size="small"></wa-input>
-  <wa-button size="small">OCBS</wa-button>
-</div>
-<div class="alignment">
-  <wa-badge>OCBS</wa-badge>
-  <wa-button>OCBS</wa-button>
-  <wa-avatar style="--size: var(--wa-form-control-height-m)"></wa-avatar>
-</div>
-<div class="alignment">
-  <wa-badge size="large">OCBS</wa-badge>
-  <wa-button size="large">OCBS</wa-button>
+<div class="test-cases">
+  <div class="alignment">
+    <wa-switch size="small">OCBS</wa-switch>
+    <wa-checkbox size="small">OCBS</wa-checkbox>
+    <wa-radio value="1" size="small">OCBS</wa-radio>
+  </div>
+  <div class="alignment">
+    <wa-switch>OCBS</wa-switch>
+    <wa-checkbox>OCBS</wa-checkbox>
+    <wa-radio value="1">OCBS</wa-radio>
+  </div>
+  <div class="alignment">
+    <wa-switch size="large">OCBS</wa-switch>
+    <wa-checkbox size="large">OCBS</wa-checkbox>
+    <wa-radio value="1" size="large">OCBS</wa-radio>
+  </div>
+  <div class="alignment">
+    <wa-input size="small"></wa-input>
+    <wa-select size="small" value="ocbs" multiple>
+      <wa-option value="ocbs">OCBS</wa-option>
+    </wa-select>
+    <wa-color-picker size="small"></wa-color-picker>
+    <wa-button size="small">OCBS</wa-button>
+  </div>
+  <div class="alignment">
+    <wa-input size="medium"></wa-input>
+    <wa-select size="medium" value="ocbs" multiple>
+      <wa-option value="ocbs">OCBS</wa-option>
+    </wa-select>
+    <wa-color-picker size="medium"></wa-color-picker>
+    <wa-button size="medium">OCBS</wa-button>
+  </div>
+  <div class="alignment">
+    <wa-input size="large"></wa-input>
+    <wa-select size="large" value="ocbs" multiple>
+      <wa-option value="ocbs">OCBS</wa-option>
+    </wa-select>
+    <wa-color-picker size="large"></wa-color-picker>
+    <wa-button size="large">OCBS</wa-button>
+  </div>
+  <div class="alignment">
+    <wa-badge>OCBS</wa-badge>
+    <wa-avatar></wa-avatar>
+    <wa-rating></wa-rating>
+    <wa-range></wa-range>
+  </div>
+  <div class="alignment">
+    <wa-input label="AaBbCc" help-text="Lorem ipsum dolor"></wa-input>
+    <wa-select label="AaBbCc" value="ocbs" multiple help-text="Lorem ipsum dolor">
+      <wa-option value="ocbs">OCBS</wa-option>
+    </wa-select>
+    <wa-color-picker label="AaBbCc" help-text="Lorem ipsum dolor"></wa-color-picker>
+  </div>
+  <wa-range style="--track-height: 2rem; --thumb-size: 1.5rem; --track-color-active: slateblue;"></wa-range>
 </div>
 ```
\ No newline at end of file
diff --git a/src/components/color-picker/color-picker.styles.ts b/src/components/color-picker/color-picker.styles.ts
index f0fa21461..55f71e842 100644
--- a/src/components/color-picker/color-picker.styles.ts
+++ b/src/components/color-picker/color-picker.styles.ts
@@ -277,7 +277,7 @@ export default css`
   }
 
   .color-dropdown__trigger {
-    display: inline-block;
+    display: block;
     position: relative;
     background-color: transparent;
     border: none;
@@ -337,16 +337,6 @@ export default css`
 
   .form-control.form-control--has-label .form-control__label {
     cursor: pointer;
-    padding-bottom: 0.5em;
-    display: block;
-  }
-
-  .form-control__input {
     display: inline-block;
   }
-
-  .color-dropdown__container {
-    margin: 0 1em;
-    padding-bottom: 0.5em;
-  }
 `;
diff --git a/src/components/range/range.styles.ts b/src/components/range/range.styles.ts
index 00f772058..9257888db 100644
--- a/src/components/range/range.styles.ts
+++ b/src/components/range/range.styles.ts
@@ -6,7 +6,7 @@ export default css`
     --thumb-gap: calc(var(--thumb-size) * 0.125);
     --thumb-shadow: initial;
     --thumb-size: calc(1rem * var(--wa-form-control-value-line-height));
-    --tooltip-offset: calc(var(--wa-tooltip-arrow-size) * 2.5);
+    --tooltip-offset: var(--wa-tooltip-arrow-size);
     --track-color-active: var(--wa-color-neutral-fill-normal);
     --track-color-inactive: var(--wa-color-neutral-fill-normal);
     --track-active-offset: 0%;
@@ -17,6 +17,9 @@ export default css`
 
   .range {
     position: relative;
+    display: flex;
+    align-items: center;
+    height: max(var(--thumb-size), var(--track-height));
   }
 
   .range__control {
@@ -176,7 +179,8 @@ export default css`
 
   /* Tooltip on top */
   .range--tooltip-top .range__tooltip {
-    top: calc(-1 * var(--thumb-size) - var(--tooltip-offset));
+    /*top: calc(-1 * var(--thumb-size) - (var(--wa-tooltip-arrow-size) * 1.5) - var(--tooltip-offset));*/
+    top: calc(-1 * (var(--thumb-size) * 0.5) - var(--tooltip-offset));
   }
 
   .range--tooltip-top .range__tooltip:after {

From 9fddb4eb01d67237b42d2bc9dc2b9570a16fc92f Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Fri, 5 Jul 2024 17:52:05 -0400
Subject: [PATCH 3/5] fix range tooltip positioning

---
 src/components/range/range.styles.ts | 7 +++----
 src/components/range/range.ts        | 2 +-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/range/range.styles.ts b/src/components/range/range.styles.ts
index 9257888db..801346b78 100644
--- a/src/components/range/range.styles.ts
+++ b/src/components/range/range.styles.ts
@@ -6,7 +6,7 @@ export default css`
     --thumb-gap: calc(var(--thumb-size) * 0.125);
     --thumb-shadow: initial;
     --thumb-size: calc(1rem * var(--wa-form-control-value-line-height));
-    --tooltip-offset: var(--wa-tooltip-arrow-size);
+    --tooltip-offset: calc(var(--wa-tooltip-arrow-size) * 1.375);
     --track-color-active: var(--wa-color-neutral-fill-normal);
     --track-color-inactive: var(--wa-color-neutral-fill-normal);
     --track-active-offset: 0%;
@@ -179,8 +179,7 @@ export default css`
 
   /* Tooltip on top */
   .range--tooltip-top .range__tooltip {
-    /*top: calc(-1 * var(--thumb-size) - (var(--wa-tooltip-arrow-size) * 1.5) - var(--tooltip-offset));*/
-    top: calc(-1 * (var(--thumb-size) * 0.5) - var(--tooltip-offset));
+    bottom: calc(50% + (var(--thumb-size) / 2) + var(--tooltip-offset));
   }
 
   .range--tooltip-top .range__tooltip:after {
@@ -192,7 +191,7 @@ export default css`
 
   /* Tooltip on bottom */
   .range--tooltip-bottom .range__tooltip {
-    bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset));
+    top: calc(50% + (var(--thumb-size) / 2) + var(--tooltip-offset));
   }
 
   .range--tooltip-bottom .range__tooltip:after {
diff --git a/src/components/range/range.ts b/src/components/range/range.ts
index 018238622..e851b5e63 100644
--- a/src/components/range/range.ts
+++ b/src/components/range/range.ts
@@ -44,7 +44,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --thumb-gap - The visual gap between the edges of the thumb and the track.
  * @cssproperty --thumb-shadow - The shadow effects around the edges of the thumb.
  * @cssproperty --thumb-size - The size of the thumb.
- * @cssproperty --tooltip-offset - The vertical distance the tooltip is offset from the track.
+ * @cssproperty --tooltip-offset - The vertical distance the tooltip is offset from the thumb.
  * @cssproperty --track-color-active - The color of the portion of the track that represents the current value.
  * @cssproperty --track-color-inactive - The of the portion of the track that represents the remaining value.
  * @cssproperty --track-height - The height of the track.

From d026d5c7966c303a32e4960442378f79f33dee66 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Fri, 5 Jul 2024 18:58:31 -0400
Subject: [PATCH 4/5] add test cases

---
 docs/docs/experimental/sandbox.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/docs/experimental/sandbox.md b/docs/docs/experimental/sandbox.md
index 1bbbc8785..e466d7df5 100644
--- a/docs/docs/experimental/sandbox.md
+++ b/docs/docs/experimental/sandbox.md
@@ -241,6 +241,9 @@ layout: page
     <wa-avatar></wa-avatar>
     <wa-rating></wa-rating>
     <wa-range></wa-range>
+    <wa-icon-button name="gear" label="Settings"></wa-icon-button>
+    <wa-progress-bar value="50" style="width: 8rem;"></wa-progress-bar>
+    <wa-spinner></wa-spinner>
   </div>
   <div class="alignment">
     <wa-input label="AaBbCc" help-text="Lorem ipsum dolor"></wa-input>
@@ -249,6 +252,5 @@ layout: page
     </wa-select>
     <wa-color-picker label="AaBbCc" help-text="Lorem ipsum dolor"></wa-color-picker>
   </div>
-  <wa-range style="--track-height: 2rem; --thumb-size: 1.5rem; --track-color-active: slateblue;"></wa-range>
 </div>
 ```
\ No newline at end of file

From 3ecc14d3994ed15210a9283b5d4b775b52ddc289 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Fri, 5 Jul 2024 18:58:47 -0400
Subject: [PATCH 5/5] touch up color picker alignment

---
 src/components/color-picker/color-picker.styles.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/color-picker/color-picker.styles.ts b/src/components/color-picker/color-picker.styles.ts
index 55f71e842..1bd5da2e7 100644
--- a/src/components/color-picker/color-picker.styles.ts
+++ b/src/components/color-picker/color-picker.styles.ts
@@ -268,6 +268,10 @@ export default css`
    * Color dropdown
    */
 
+  .color-dropdown {
+    display: flex;
+  }
+
   .color-dropdown::part(panel) {
     max-height: none;
     background-color: var(--background-color);