simplify internals and fix track width bug; fixes #1317

package-lock.json

@@ -14029,8 +14029,7 @@
       "devDependencies": {
         "@wc-toolkit/jsx-types": "^1.3.0",
         "eleventy-plugin-git-commit-date": "^0.1.3",
-        "esbuild": "^0.25.11",
-        "npm-check-updates": "^19.1.2"
+        "esbuild": "^0.25.11"
       },
       "engines": {
         "node": ">=14.17.0"
@@ -14038,7 +14037,7 @@
     },
     "packages/webawesome-pro": {
       "name": "@shoelace-style/webawesome-pro",
-      "version": "3.0.0",
+      "version": "3.0.0-beta.6",
       "dependencies": {
         "@ctrl/tinycolor": "4.1.0",
         "@floating-ui/dom": "^1.6.13",
@@ -14967,20 +14966,6 @@
       "engines": {
         "node": "^18 || >=20"
       }
-    },
-    "packages/webawesome/node_modules/npm-check-updates": {
-      "version": "19.1.2",
-      "resolved": "https://registry.npmjs.org/npm-check-updates/-/npm-check-updates-19.1.2.tgz",
-      "integrity": "sha512-FNeFCVgPOj0fz89hOpGtxP2rnnRHR7hD2E8qNU8SMWfkyDZXA/xpgjsL3UMLSo3F/K13QvJDnbxPngulNDDo/g==",
-      "dev": true,
-      "bin": {
-        "ncu": "build/cli.js",
-        "npm-check-updates": "build/cli.js"
-      },
-      "engines": {
-        "node": ">=20.0.0",
-        "npm": ">=8.12.1"
-      }
     }
   }
 }

packages/webawesome/docs/_includes/sidebar.njk

@@ -78,10 +78,10 @@
         </li>
       </ul>
     </li>
-    <li><span class="is-planned wa-split">Charts <span><a href="https://github.com/shoelace-style/webawesome/issues/1073" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a>{{ proBadge({ description: "This will require access to Web Awesome Pro" }) }}</span></span></li>
+    <li><span class="is-planned wa-split">Charts <a href="https://github.com/shoelace-style/webawesome/issues/1073" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
     <li><a href="/docs/components/checkbox/">Checkbox</a></li>
     <li><a href="/docs/components/color-picker/">Color Picker</a></li>
-    <li><span class="is-planned wa-split">Combobox <span><a href="https://github.com/shoelace-style/webawesome/issues/1074" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a>{{ proBadge({ description: "This will require access to Web Awesome Pro" }) }}</span></span></li>
+    <li><span class="is-planned wa-split">Combobox <a href="https://github.com/shoelace-style/webawesome/issues/1074" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
     <li><a href="/docs/components/comparison/">Comparison</a></li>
     <li>
       <a class="wa-cluster wa-gap-xs" href="/docs/components/copy-button/">
@@ -89,8 +89,8 @@
         <wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
       </a>
     </li>
-    <li><span class="is-planned wa-split">Data Grid <span><a href="https://github.com/shoelace-style/webawesome/issues/1072" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a>{{ proBadge({ description: "This will require access to Web Awesome Pro" }) }}</span></span></li>
-    <li><span class="is-planned wa-split">Datepicker <span><a href="https://github.com/shoelace-style/webawesome/issues/1075" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a>{{ proBadge({ description: "This will require access to Web Awesome Pro" }) }}</span></span></li>
+    <li><span class="is-planned wa-split">Data Grid <a href="https://github.com/shoelace-style/webawesome/issues/1072" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
+    <li><span class="is-planned wa-split">Datepicker <a href="https://github.com/shoelace-style/webawesome/issues/1075" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
     <li><a href="/docs/components/details/">Details</a></li>
     <li><a href="/docs/components/dialog/">Dialog</a></li>
     <li><a href="/docs/components/divider/">Divider</a></li>
@@ -101,7 +101,7 @@
         <li><a href="/docs/components/dropdown-item">Dropdown Item</a></li>
       </ul>
     </li>
-    <li><span class="is-planned wa-split">File Input <span><a href="https://github.com/shoelace-style/webawesome/issues/1240" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a>{{ proBadge({ description: "This will require access to Web Awesome Pro" }) }}</span></span></li>
+    <li><span class="is-planned wa-split">File Input <a href="https://github.com/shoelace-style/webawesome/issues/1240" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
     <li><a href="/docs/components/format-bytes/">Format Bytes</a></li>
     <li><a href="/docs/components/format-date/">Format Date</a></li>
     <li><a href="/docs/components/format-number/">Format Number</a></li>
@@ -146,7 +146,7 @@
     </li>
     <li><a href="/docs/components/tag/">Tag</a></li>
     <li><a href="/docs/components/textarea/">Textarea</a></li>
-    <li><span class="is-planned wa-split">Toast <span><a href="https://github.com/shoelace-style/webawesome/issues/105" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a>{{ proBadge( { description: "This will require access to Web Awesome Pro" }) }}</span></span></li>
+    <li><span class="is-planned wa-split">Toast <a href="https://github.com/shoelace-style/webawesome/issues/105" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
     <li><a href="/docs/components/tooltip/">Tooltip</a></li>
     <li>
       <a href="/docs/components/tree/">Tree</a>
@@ -154,7 +154,7 @@
         <li><a href="/docs/components/tree-item/">Tree Item</a></li>
       </ul>
     </li>
-    <li><span class="is-planned wa-split">Video <span><a href="https://github.com/shoelace-style/webawesome/issues/985" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a>{{ proBadge( { description: "This will require access to Web Awesome Pro" }) }}</span></span></li>
+    <li><span class="is-planned wa-split">Video <a href="https://github.com/shoelace-style/webawesome/issues/985" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
     <li><a href="/docs/components/zoomable-frame">Zoomable Frame</a></li>
     {# PLOP_NEW_COMPONENT_PLACEHOLDER #}
   </ul>

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

@@ -5,6 +5,7 @@
   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,19 +13,17 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 
 ## Next
 
-- Added `layers.css` to define cascade layer order and updated palettes, themes, native styles, and utilities to import the new rule for more fail-safe modularity [pr:1793]
+- 🚨 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]
-- Modified the default `transition` styles of `<wa-dropdown-item>` to use design tokens [pr:1693]
 
 ## 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/package.json

@@ -64,7 +64,7 @@
     "spellcheck": "cspell \"**/*.{js,ts,json,html,css,md}\" --no-progress --config=\"../../cspell.json\"",
     "verify": "npm run prettier && npm run build && npm run test",
     "prepublishOnly": "npm run verify",
-    "check-updates": "npm-check-updates --cooldown 7 --interactive --format group",
+    "check-updates": "npx npm-check-updates --interactive --format group",
     "print-version": "echo $npm_package_version",
     "tag-version": "git tag -a \"v$(npm run print-version | tail -n1)\" -m \"tag v$(npm run print-version | tail -n1)\"",
     "postversion": "npm run tag-version"
@@ -91,7 +91,6 @@
   "devDependencies": {
     "@wc-toolkit/jsx-types": "^1.3.0",
     "eleventy-plugin-git-commit-date": "^0.1.3",
-    "esbuild": "^0.25.11",
-    "npm-check-updates": "^19.1.2"
+    "esbuild": "^0.25.11"
   }
 }

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

@@ -9,8 +9,8 @@
   line-height: var(--wa-line-height-condensed);
   cursor: pointer;
   transition:
-    var(--wa-transition-fast) background-color var(--wa-transition-easing),
-    var(--wa-transition-fast) color var(--wa-transition-easing);
+    100ms background-color ease,
+    100ms color ease;
 }
 
 @media (hover: hover) {

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/spinner/spinner.css

@@ -2,58 +2,43 @@
   --track-width: 2px;
   --track-color: var(--wa-color-neutral-fill-normal);
   --indicator-color: var(--wa-color-brand-fill-loud);
-  --speed: 2s;
+  --speed: 1s;
 
-  /* 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;
 }
 
-svg {
+[part='base'] {
+  position: relative;
   width: 100%;
   height: 100%;
-  aspect-ratio: 1;
-  animation: spin var(--speed) linear infinite;
 }
 
 .track {
-  stroke: var(--track-color);
+  position: absolute;
+  inset: 0;
+  border: var(--track-width) solid var(--track-color);
+  border-radius: 50%;
 }
 
 .indicator {
-  stroke: var(--indicator-color);
-  stroke-dasharray: 75, 100;
-  stroke-dashoffset: -5;
-  animation: dash 1.5s ease-in-out infinite;
-  stroke-linecap: round;
+  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;
 }
 
 @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,6 +11,8 @@ 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.
@@ -25,17 +27,10 @@ export default class WaSpinner extends WebAwesomeElement {
 
   render() {
     return html`
-      <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>
+      <div part="base" role="progressbar" aria-label=${this.localize.term('loading')}>
+        <div class="track" part="track"></div>
+        <div class="indicator" part="indicator"></div>
+      </div>
     `;
   }
 }

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>

packages/webawesome/src/styles/color/palettes/base.css

@@ -1,7 +1,3 @@
-/* Rules shared by all palettes */
-@import url('../../layers.css');
-@import url('../variants.css');
-
 /* Generates --wa-color-{hue}-on tokens for pairing with any palette's key colors */
 :where(:root),
 :host {

packages/webawesome/src/styles/color/palettes/bright.css

@@ -1,4 +1,5 @@
 @import url('base.css');
+@import url('../variants.css');
 
 @layer wa-color-palette {
   .wa-palette-bright {

packages/webawesome/src/styles/color/palettes/default.css

@@ -1,4 +1,5 @@
 @import url('base.css');
+@import url('../variants.css');
 
 @layer wa-color-palette {
   :where(:root),

packages/webawesome/src/styles/color/palettes/shoelace.css

@@ -1,4 +1,5 @@
 @import url('base.css');
+@import url('../variants.css');
 
 @layer wa-color-palette {
   .wa-palette-shoelace,

packages/webawesome/src/styles/layers.css

@@ -1,2 +0,0 @@
-/* Order of precedence for all cascade layers in Web Awesome */
-@layer wa-native, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides;

packages/webawesome/src/styles/native.css

@@ -1,6 +1,3 @@
-@import url('layers.css');
-
-/* Required utilities */
 @import url('utilities/size.css');
 @import url('utilities/variants.css');
 

packages/webawesome/src/styles/themes/awesome.css

@@ -1,4 +1,3 @@
-@import url('../layers.css');
 @import url('../color/palettes/bright.css'); /* To use this palette, add class="wa-palette-bright" to the <html> element */
 @import url('https://fonts.bunny.net/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap');
 

packages/webawesome/src/styles/themes/default.css

@@ -1,4 +1,3 @@
-@import url('../layers.css');
 @import url('../color/palettes/default.css');
 
 @layer wa-theme {

packages/webawesome/src/styles/themes/shoelace.css

@@ -1,4 +1,3 @@
-@import url('../layers.css');
 @import url('../color/palettes/shoelace.css'); /* To use this palette, add class="wa-palette-shoelace" to the <html> element */
 
 @layer wa-theme {

packages/webawesome/src/styles/utilities.css

@@ -1,5 +1,3 @@
-@import url('layers.css');
-
 @import url('utilities/fouce.css');
 @import url('utilities/visually-hidden.css');
 @import url('utilities/scroll-lock.css');

packages/webawesome/src/styles/webawesome.css

@@ -1,10 +1,9 @@
-/* Cascade layers */
-@import url('layers.css');
+@layer wa-native, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides;
 
-/* Native styles */
+/* Native Styles */
 @import url('native.css');
 
-/* CSS utilities */
+/* CSS Utilities */
 @import url('utilities.css');
 
 /* Theme */