From 24389e5ab9a3d47e73bd7d5bad464f01b7088611 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Thu, 20 Jun 2024 16:40:13 -0400
Subject: [PATCH 1/2] rename 'outline' buttons to 'outlined'

---
 docs/_includes/base.njk                     |  2 +-
 docs/docs/components/button.md              | 10 +++---
 docs/docs/experimental/sandbox.md           | 40 ++++++++++-----------
 docs/docs/patterns/ecommerce.md             |  4 +--
 docs/index.md                               |  2 +-
 src/components/button/button.styles.ts      | 16 ++++-----
 src/components/button/button.ts             |  4 +--
 src/components/radio-button/radio-button.ts |  2 +-
 src/themes/brutalist.css                    |  2 +-
 src/themes/depth_4_glossy.css               |  2 +-
 src/themes/fa.css                           |  2 +-
 src/themes/glassy.css                       |  2 +-
 src/themes/mellow.css                       |  2 +-
 src/themes/playful.css                      |  4 +--
 src/themes/premium.css                      |  2 +-
 15 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk
index f6935b7df..79f2498bd 100644
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -75,7 +75,7 @@
           </wa-dropdown>
 
           {# Search #}
-          <wa-button id="search-trigger" appearance="outline" size="small" data-search>
+          <wa-button id="search-trigger" appearance="outlined" size="small" data-search>
             <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
             Search
             <kbd slot="suffix" class="only-desktop">/</kbd>
diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md
index f31f0b6c7..eec2e4bb2 100644
--- a/docs/docs/components/button.md
+++ b/docs/docs/components/button.md
@@ -30,31 +30,31 @@ Use the `appearance` attribute to change the button's visual appearance.
 <div style="margin-block-end: 1rem;">
   <wa-button appearance="filled" variant="neutral">Filled</wa-button>
   <wa-button appearance="tinted" variant="neutral">Tinted</wa-button>
-  <wa-button appearance="outline" variant="neutral">Outline</wa-button>
+  <wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
   <wa-button appearance="text" variant="neutral">Text</wa-button>
 </div>
 <div style="margin-block-end: 1rem;">
   <wa-button appearance="filled" variant="brand">Filled</wa-button>
   <wa-button appearance="tinted" variant="brand">Tinted</wa-button>
-  <wa-button appearance="outline" variant="brand">Outline</wa-button>
+  <wa-button appearance="outlined" variant="brand">Outlined</wa-button>
   <wa-button appearance="text" variant="brand">Text</wa-button>
 </div>
 <div style="margin-block-end: 1rem;">
   <wa-button appearance="filled" variant="success">Filled</wa-button>
   <wa-button appearance="tinted" variant="success">Tinted</wa-button>
-  <wa-button appearance="outline" variant="success">Outline</wa-button>
+  <wa-button appearance="outlined" variant="success">Outlined</wa-button>
   <wa-button appearance="text" variant="success">Text</wa-button>
 </div>
 <div style="margin-block-end: 1rem;">
   <wa-button appearance="filled" variant="warning">Filled</wa-button>
   <wa-button appearance="tinted" variant="warning">Tinted</wa-button>
-  <wa-button appearance="outline" variant="warning">Outline</wa-button>
+  <wa-button appearance="outlined" variant="warning">Outlined</wa-button>
   <wa-button appearance="text" variant="warning">Text</wa-button>
 </div>
 <div>
   <wa-button appearance="filled" variant="danger">Filled</wa-button>
   <wa-button appearance="tinted" variant="danger">Tinted</wa-button>
-  <wa-button appearance="outline" variant="danger">Outline</wa-button>
+  <wa-button appearance="outlined" variant="danger">Outlined</wa-button>
   <wa-button appearance="text" variant="danger">Text</wa-button>
 </div>
 ```
diff --git a/docs/docs/experimental/sandbox.md b/docs/docs/experimental/sandbox.md
index 4361fd90e..4884946f6 100644
--- a/docs/docs/experimental/sandbox.md
+++ b/docs/docs/experimental/sandbox.md
@@ -100,11 +100,11 @@ layout: page
 <wa-button variant="warning">Warning</wa-button>
 <wa-button variant="danger">Danger</wa-button>
 <br /><br />
-<wa-button variant="brand" appearance="outline">Brand</wa-button>
-<wa-button variant="success" appearance="outline">Success</wa-button>
-<wa-button variant="neutral" appearance="outline">Neutral</wa-button>
-<wa-button variant="warning" appearance="outline">Warning</wa-button>
-<wa-button variant="danger" appearance="outline">Danger</wa-button>
+<wa-button variant="brand" appearance="outlined">Brand</wa-button>
+<wa-button variant="success" appearance="outlined">Success</wa-button>
+<wa-button variant="neutral" appearance="outlined">Neutral</wa-button>
+<wa-button variant="warning" appearance="outlined">Warning</wa-button>
+<wa-button variant="danger" appearance="outlined">Danger</wa-button>
 <br /><br />
 <wa-button appearance="text">Text</wa-button>
 <br /><br />
@@ -215,40 +215,40 @@ layout: page
 </wa-button>
 <br /><br />
 <wa-button-group label="Alignment">
-  <wa-button appearance="outline" variant="brand">Left</wa-button>
-  <wa-button appearance="outline" variant="brand">Center</wa-button>
-  <wa-button appearance="outline" variant="brand">Right</wa-button>
+  <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="outline" variant="success">Left</wa-button>
-  <wa-button appearance="outline" variant="success">Center</wa-button>
-  <wa-button appearance="outline" variant="success">Right</wa-button>
+  <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="outline">Left</wa-button>
-  <wa-button appearance="outline">Center</wa-button>
-  <wa-button appearance="outline">Right</wa-button>
+  <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="outline" variant="warning">Left</wa-button>
-  <wa-button appearance="outline" variant="warning">Center</wa-button>
-  <wa-button appearance="outline" variant="warning">Right</wa-button>
+  <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="outline" variant="danger">Left</wa-button>
-  <wa-button appearance="outline" variant="danger">Center</wa-button>
-  <wa-button appearance="outline" variant="danger">Right</wa-button>
+  <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>
 ```
\ No newline at end of file
diff --git a/docs/docs/patterns/ecommerce.md b/docs/docs/patterns/ecommerce.md
index ad63b34e8..29d5298f0 100644
--- a/docs/docs/patterns/ecommerce.md
+++ b/docs/docs/patterns/ecommerce.md
@@ -469,8 +469,8 @@ TODO Page Description
       <span>$95.00</span>
     </span>
       <span style="display: grid;grid-template-columns: 1fr 1fr;column-gap: 1rem;">
-        <wa-button variant="neutral" appearance="outline">View Order</wa-button>
-        <wa-button variant="neutral" appearance="outline">View Invoice</wa-button>
+        <wa-button variant="neutral" appearance="outlined">View Order</wa-button>
+        <wa-button variant="neutral" appearance="outlined">View Invoice</wa-button>
       </span>
   </div>
   <div>
diff --git a/docs/index.md b/docs/index.md
index a77442f8f..b28fdf2bb 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -282,7 +282,7 @@ layout: page
       </wa-callout>
     </div>
     <div>
-      <wa-button href="/docs/installation" appearance="outline" class="tile">
+      <wa-button href="/docs/installation" appearance="outlined" class="tile">
         <div style="display: flex; justify-content: space-between; align-items: center; margin-block-end: 1rem;">
           <div class="icon-heading" style="margin-block-end: 0;">
             <wa-icon name="pen-ruler" fixed-width></wa-icon>
diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
index 30d4df8b6..0d30b8926 100644
--- a/src/components/button/button.styles.ts
+++ b/src/components/button/button.styles.ts
@@ -84,41 +84,41 @@ export default css`
   }
 
   /*
-   * Outline buttons
+   * Outlined buttons
    */
 
-  :host([appearance='outline']),
+  :host([appearance='outlined']),
   :host(.wa-button-group__button--radio:not([checked])) {
     --background-color: transparent;
     --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
   }
 
-  :host([appearance='outline'][variant='neutral']),
+  :host([appearance='outlined'][variant='neutral']),
   :host(.wa-button-group__button--radio:not([checked])) {
     --background-color-hover: var(--wa-color-neutral-fill-quiet);
     --border-color: var(--wa-color-neutral-border-loud);
     --label-color: var(--wa-color-neutral-on-quiet);
   }
 
-  :host([appearance='outline'][variant='brand']) {
+  :host([appearance='outlined'][variant='brand']) {
     --background-color-hover: var(--wa-color-brand-fill-quiet);
     --border-color: var(--wa-color-brand-border-loud);
     --label-color: var(--wa-color-brand-on-quiet);
   }
 
-  :host([appearance='outline'][variant='success']) {
+  :host([appearance='outlined'][variant='success']) {
     --background-color-hover: var(--wa-color-success-fill-quiet);
     --border-color: var(--wa-color-success-border-loud);
     --label-color: var(--wa-color-success-on-quiet);
   }
 
-  :host([appearance='outline'][variant='warning']) {
+  :host([appearance='outlined'][variant='warning']) {
     --background-color-hover: var(--wa-color-warning-fill-quiet);
     --border-color: var(--wa-color-warning-border-loud);
     --label-color: var(--wa-color-warning-on-quiet);
   }
 
-  :host([appearance='outline'][variant='danger']) {
+  :host([appearance='outlined'][variant='danger']) {
     --background-color-hover: var(--wa-color-danger-fill-quiet);
     --border-color: var(--wa-color-danger-border-loud);
     --label-color: var(--wa-color-danger-on-quiet);
@@ -265,7 +265,7 @@ export default css`
   }
 
   @media (forced-colors: active) {
-    .button.button--outline.button--checked:not(.button--disabled) {
+    .button.button--outlined.button--checked:not(.button--disabled) {
       outline: solid 2px transparent;
     }
   }
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 61b8887b0..716b65d46 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -75,7 +75,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
   @property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
 
   /** The button's visual appearance. */
-  @property({ reflect: true }) appearance: 'filled' | 'tinted' | 'outline' | 'text' = 'filled';
+  @property({ reflect: true }) appearance: 'filled' | 'tinted' | 'outlined' | 'text' = 'filled';
 
   /** The button's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
@@ -267,7 +267,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
           'button--loading': this.loading,
           'button--filled': this.appearance === 'filled',
           'button--tinted': this.appearance === 'tinted',
-          'button--outline': this.appearance === 'outline',
+          'button--outlined': this.appearance === 'outlined',
           'button--text': this.appearance === 'text',
           'button--pill': this.pill,
           'button--rtl': this.localize.dir() === 'rtl',
diff --git a/src/components/radio-button/radio-button.ts b/src/components/radio-button/radio-button.ts
index d421f4f88..72fba6979 100644
--- a/src/components/radio-button/radio-button.ts
+++ b/src/components/radio-button/radio-button.ts
@@ -144,7 +144,7 @@ export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
             'button--checked': this.checked,
             'button--disabled': this.disabled,
             'button--focused': this.hasFocus,
-            'button--outline': true,
+            'button--outlined': true,
             'button--pill': this.pill,
             'button--has-label': this.hasSlotController.test('[default]'),
             'button--has-prefix': this.hasSlotController.test('prefix'),
diff --git a/src/themes/brutalist.css b/src/themes/brutalist.css
index 921419bc2..4ddbb4b20 100644
--- a/src/themes/brutalist.css
+++ b/src/themes/brutalist.css
@@ -492,7 +492,7 @@
     --wa-shadow-offset-y-s: 0;
   }
 
-  wa-button:not([appearance='outline']) {
+  wa-button:not([appearance='outlined']) {
     &[variant='neutral'] {
       --background-hover: color-mix(in oklab, var(--background), transparent 20%);
     }
diff --git a/src/themes/depth_4_glossy.css b/src/themes/depth_4_glossy.css
index b47783546..b0e60a2e3 100644
--- a/src/themes/depth_4_glossy.css
+++ b/src/themes/depth_4_glossy.css
@@ -127,7 +127,7 @@ wa-button:not([variant='text']) {
   }
 }
 
-wa-button:not([appearance='outline']) {
+wa-button:not([appearance='outlined']) {
   &[variant='brand'] {
     --background: linear-gradient(var(--wa-color-brand-fill-loud) 25%, var(--wa-color-brand-fill-loud));
     --background-hover: linear-gradient(
diff --git a/src/themes/fa.css b/src/themes/fa.css
index dd84229bd..130db5ff2 100644
--- a/src/themes/fa.css
+++ b/src/themes/fa.css
@@ -518,7 +518,7 @@
     --background-active: var(--border-color);
     --label-color-active: var(--background);
 
-    &[appearance='outline'] {
+    &[appearance='outlined'] {
       --background: var(--wa-color-surface-default);
     }
 
diff --git a/src/themes/glassy.css b/src/themes/glassy.css
index d0df3f0ab..80a7b04ab 100644
--- a/src/themes/glassy.css
+++ b/src/themes/glassy.css
@@ -435,7 +435,7 @@
 
 /* #region Custom styles */
 @container preview (min-width: 0) {
-  wa-button[appearance='outline'] {
+  wa-button[appearance='outlined'] {
     &[variant='brand'] {
       --border-color: var(--wa-color-brand-border-normal);
     }
diff --git a/src/themes/mellow.css b/src/themes/mellow.css
index b908ca44b..86fdab2df 100644
--- a/src/themes/mellow.css
+++ b/src/themes/mellow.css
@@ -423,7 +423,7 @@
 }
 
 /* #region Custom styles */
-wa-button[appearance='outline'] {
+wa-button[appearance='outlined'] {
   &[variant='brand'] {
     --border-color: var(--wa-color-brand-border-normal);
   }
diff --git a/src/themes/playful.css b/src/themes/playful.css
index abe831415..f5abf2a05 100644
--- a/src/themes/playful.css
+++ b/src/themes/playful.css
@@ -637,7 +637,7 @@
     text-shadow: 0 2px 2px var(--button-text-shadow);
   }
 
-  wa-button[appearance='outline'] {
+  wa-button[appearance='outlined'] {
     --box-shadow: none;
     --border-width: var(--wa-form-control-border-width);
     --label-color: var(--wa-color-neutral-on-normal);
@@ -911,7 +911,7 @@
       }
     }
 
-    & wa-button[appearance='outline'] {
+    & wa-button[appearance='outlined'] {
       --box-shadow: none;
       --border-color: var(--wa-color-neutral-border-normal);
     }
diff --git a/src/themes/premium.css b/src/themes/premium.css
index 559938a0a..9bb1a8fb1 100644
--- a/src/themes/premium.css
+++ b/src/themes/premium.css
@@ -484,7 +484,7 @@
       inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2), var(--wa-shadow-s);
   }
 
-  wa-button[appearance='outline'] {
+  wa-button[appearance='outlined'] {
     --box-shadow: none;
   }
 

From 37a458aee02411fc31a9cfb7bb7c1bbdfec698a7 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Thu, 20 Jun 2024 16:49:12 -0400
Subject: [PATCH 2/2] fix width of details icons

---
 src/components/details/details.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/details/details.ts b/src/components/details/details.ts
index afdb65789..6aecffb38 100644
--- a/src/components/details/details.ts
+++ b/src/components/details/details.ts
@@ -236,10 +236,20 @@ export default class WaDetails extends WebAwesomeElement {
 
           <span part="summary-icon" class="details__summary-icon">
             <slot name="expand-icon">
-              <wa-icon library="system" variant="solid" name=${isRtl ? 'chevron-left' : 'chevron-right'}></wa-icon>
+              <wa-icon
+                library="system"
+                variant="solid"
+                name=${isRtl ? 'chevron-left' : 'chevron-right'}
+                fixed-width
+              ></wa-icon>
             </slot>
             <slot name="collapse-icon">
-              <wa-icon library="system" variant="solid" name=${isRtl ? 'chevron-left' : 'chevron-right'}></wa-icon>
+              <wa-icon
+                library="system"
+                variant="solid"
+                name=${isRtl ? 'chevron-left' : 'chevron-right'}
+                fixed-width
+              ></wa-icon>
             </slot>
           </span>
         </summary>