Merge branch 'next' into scroller-fix

* fix svg fill; closes #1733

* remove fill

packages/webawesome/docs/assets/styles/search.css

@@ -5,7 +5,6 @@
   border-radius: var(--wa-border-radius-l);
   padding: 0;
   margin: 0 auto;
-  overflow: hidden;
 
   &::part(dialog) {
     margin-block-start: 10vh;

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

@@ -13,17 +13,17 @@ 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]
-- Fixed a bug in `<wa-spinner>` that caused `--track-width` to not work correctly [issue:1317]
 - 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,7 +25,6 @@
 
 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" fill="currentColor" width="16" height="16"></svg>`;
+    return html`<svg part="svg" width="16" height="16"></svg>`;
   }
 }
 

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

@@ -53,6 +53,19 @@
   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,
@@ -64,14 +77,6 @@
     pointer-events: none;
   }
 
-  #start-shadow {
-    opacity: var(--start-shadow-opacity);
-  }
-
-  #end-shadow {
-    opacity: var(--end-shadow-opacity);
-  }
-
   #start-shadow {
     &:dir(ltr) {
       left: 0;
@@ -102,21 +107,12 @@
   #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/spinner/spinner.css

@@ -2,43 +2,58 @@
   --track-width: 2px;
   --track-color: var(--wa-color-neutral-fill-normal);
   --indicator-color: var(--wa-color-brand-fill-loud);
-  --speed: 1s;
+  --speed: 2s;
 
+  /* Resizing a spinner element using anything but font-size will break the animation because the animation uses em units.
+   Therefore, if a spinner is used in a flex container without `flex: none` applied, the spinner can grow/shrink and
+   break the animation. The use of `flex: none` on the host element prevents this by always having the spinner sized
+   according to its actual dimensions.
+  */
   flex: none;
   display: inline-flex;
   width: 1em;
   height: 1em;
 }
 
-[part='base'] {
-  position: relative;
+svg {
   width: 100%;
   height: 100%;
+  aspect-ratio: 1;
+  animation: spin var(--speed) linear infinite;
 }
 
 .track {
-  position: absolute;
-  inset: 0;
-  border: var(--track-width) solid var(--track-color);
-  border-radius: 50%;
+  stroke: var(--track-color);
 }
 
 .indicator {
-  position: absolute;
-  inset: 0;
-  border: var(--track-width) solid transparent;
-  border-top-color: var(--indicator-color);
-  border-right-color: var(--indicator-color);
-  border-radius: 50%;
-  animation: spin var(--speed) linear infinite;
+  stroke: var(--indicator-color);
+  stroke-dasharray: 75, 100;
+  stroke-dashoffset: -5;
+  animation: dash 1.5s ease-in-out infinite;
+  stroke-linecap: round;
 }
 
 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }
-
   100% {
     transform: rotate(360deg);
   }
 }
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}

packages/webawesome/src/components/spinner/spinner.ts

@@ -11,8 +11,6 @@ import styles from './spinner.css';
  * @since 2.0
  *
  * @csspart base - The component's base wrapper.
- * @csspart track - The spinner's track.
- * @csspart indicator - The spinner's indicator.
  *
  * @cssproperty --track-width - The width of the track.
  * @cssproperty --track-color - The color of the track.
@@ -27,10 +25,17 @@ export default class WaSpinner extends WebAwesomeElement {
 
   render() {
     return html`
-      <div part="base" role="progressbar" aria-label=${this.localize.term('loading')}>
-        <div class="track" part="track"></div>
-        <div class="indicator" part="indicator"></div>
-      </div>
+      <svg
+        part="base"
+        role="progressbar"
+        aria-label=${this.localize.term('loading')}
+        fill="none"
+        viewBox="0 0 50 50"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle class="track" cx="25" cy="25" r="20" fill="none" stroke-width="5" />
+        <circle class="indicator" cx="25" cy="25" r="20" fill="none" stroke-width="5" />
+      </svg>
     `;
   }
 }

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

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

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

@@ -254,6 +254,7 @@ 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,
         })}"
       >
@@ -272,8 +273,10 @@ 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>