remove offending property; fixes #1614

packages/webawesome/docs/docs/resources/changelog.md

@@ -13,17 +13,16 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 
 ## Next
 
+- 🚨 BREAKING: Changed `appearance="filled outlined"` to `appearance="filled-outlined"` in `<wa-card>` [issue:1671]
 - Fixed a bug in `<wa-slider>` that caused some touch devices to end up with the incorrect value [issue:1703]
 - Fixed a bug in `<wa-card>` that prevented some slots from being detected correctly [discuss:1450]
-- Fixed a z-index bug in `<wa-scroller>` styles [issue:1724]
-- Fixed a bug in `<wa-icon>` that caused some icon libraries to render with the incorrect SVG fill [issue:1733]
-- Fixed a bug in `<wa-tree-item>` that caused the spinner to not show when lazy loading [issue:1678]
 - Fixed a bug in `<wa-dropdown>` that caused the browser to hang when cancelling the `wa-hide` event [issue:1483]
 - Improved performance of `<wa-icon>` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729]
 
 ## 3.0.0
 
 - 🚨 BREAKING: Changed `appearance="filled outlined"` to `appearance="filled-outlined"` in the following elements [issue:1127]
+  - `<wa-badge>`
   - `<wa-button>`
   - `<wa-callout>`
   - `<wa-card>`

packages/webawesome/src/components/icon/icon.css

@@ -25,6 +25,7 @@
 
 svg {
   height: 1em;
+  fill: currentColor;
   overflow: visible;
 
   /* Duotone colors with path-specific opacity fallback */

packages/webawesome/src/components/icon/icon.ts

@@ -249,7 +249,7 @@ export default class WaIcon extends WebAwesomeElement {
       return this.svg;
     }
 
-    return html`<svg part="svg" width="16" height="16"></svg>`;
+    return html`<svg part="svg" fill="currentColor" width="16" height="16"></svg>`;
   }
 }
 

packages/webawesome/src/components/scroller/scroller.css

@@ -53,19 +53,6 @@
   overflow-y: auto;
 }
 
-#start-shadow,
-#end-shadow {
-  z-index: 2;
-}
-
-#start-shadow {
-  opacity: var(--start-shadow-opacity);
-}
-
-#end-shadow {
-  opacity: var(--end-shadow-opacity);
-}
-
 /* Horizontal shadows */
 :host([orientation='horizontal']) {
   #start-shadow,
@@ -77,6 +64,14 @@
     pointer-events: none;
   }
 
+  #start-shadow {
+    opacity: var(--start-shadow-opacity);
+  }
+
+  #end-shadow {
+    opacity: var(--end-shadow-opacity);
+  }
+
   #start-shadow {
     &:dir(ltr) {
       left: 0;
@@ -107,12 +102,21 @@
   #start-shadow,
   #end-shadow {
     position: absolute;
+    z-index: 2;
     right: 0;
     left: 0;
     height: var(--shadow-size);
     pointer-events: none;
   }
 
+  #start-shadow {
+    opacity: var(--start-shadow-opacity);
+  }
+
+  #end-shadow {
+    opacity: var(--end-shadow-opacity);
+  }
+
   #start-shadow {
     top: 0;
     background: linear-gradient(to bottom, var(--shadow-color), transparent 100%);

packages/webawesome/src/components/tree-item/tree-item.css

@@ -73,16 +73,12 @@ slot:not([name])::slotted(wa-icon) {
   rotate: -90deg;
 }
 
-.tree-item-expanded:not(.tree-item-loading) slot[name='expand-icon'],
+.tree-item-expanded slot[name='expand-icon'],
 .tree-item:not(.tree-item-expanded) slot[name='collapse-icon'] {
   display: none;
 }
 
-.tree-item:not(.tree-item-has-expand-button):not(.tree-item-loading) .expand-icon-slot {
-  display: none;
-}
-
-.tree-item-loading .expand-icon-slot wa-icon {
+.tree-item:not(.tree-item-has-expand-button) .expand-icon-slot {
   display: none;
 }
 

packages/webawesome/src/components/tree-item/tree-item.ts

@@ -254,7 +254,6 @@ export default class WaTreeItem extends WebAwesomeElement {
           'tree-item-expanded': this.expanded,
           'tree-item-selected': this.selected,
           'tree-item-leaf': this.isLeaf,
-          'tree-item-loading': this.loading,
           'tree-item-has-expand-button': showExpandButton,
         })}"
       >
@@ -273,10 +272,8 @@ export default class WaTreeItem extends WebAwesomeElement {
               ${when(
                 this.loading,
                 () => html` <wa-spinner part="spinner" exportparts="base:spinner__base"></wa-spinner> `,
-                () => html`
-                  <wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" variant="solid"></wa-icon>
-                `,
               )}
+              <wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" variant="solid"></wa-icon>
             </slot>
             <slot class="expand-icon-slot" name="collapse-icon">
               <wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" variant="solid"></wa-icon>