Merge branch 'next' of https://github.com/shoelace-style/webawesome into next

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>

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>
 ```

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>
 ```

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>

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>

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;
     }
   }

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',

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>

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'),

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%);
     }

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(

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);
     }
 

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);
     }

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);
   }

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);
     }

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;
   }