From c5715730631c8404e6cf85a751518dad57cbc7c5 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Mon, 28 Apr 2025 17:04:06 -0400
Subject: [PATCH] [Skeleton] Remove `base` part, rel #207 (#885)

---
 docs/docs/components/skeleton.md         |  2 +-
 src/components/skeleton/skeleton.css     | 12 ++++-------
 src/components/skeleton/skeleton.test.ts | 26 ++++++++++++++++--------
 src/components/skeleton/skeleton.ts      | 17 ++--------------
 4 files changed, 25 insertions(+), 32 deletions(-)

diff --git a/docs/docs/components/skeleton.md b/docs/docs/components/skeleton.md
index 993e2706a..cbb5176c9 100644
--- a/docs/docs/components/skeleton.md
+++ b/docs/docs/components/skeleton.md
@@ -129,7 +129,7 @@ Set a matching width and height to make a circle, square, or rounded avatar skel
 
 <style>
   .skeleton-avatars wa-skeleton {
-    display: inline-block;
+    display: inline-flex;
     width: 3rem;
     height: 3rem;
     margin-right: 0.5rem;
diff --git a/src/components/skeleton/skeleton.css b/src/components/skeleton/skeleton.css
index 60a5b4b0e..0132e8928 100644
--- a/src/components/skeleton/skeleton.css
+++ b/src/components/skeleton/skeleton.css
@@ -1,14 +1,10 @@
 :host {
   --border-radius: var(--wa-border-radius-pill);
   --color: var(--wa-color-neutral-fill-normal);
-  --sheen-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), var(--wa-color-surface-raised));
+  --sheen-color: color-mix(in oklab, var(--color), var(--wa-color-surface-raised));
 
-  display: block;
-  position: relative;
-}
-
-.skeleton {
   display: flex;
+  position: relative;
   width: 100%;
   height: 100%;
   min-height: 1rem;
@@ -20,13 +16,13 @@
   border-radius: var(--border-radius);
 }
 
-.skeleton--sheen .indicator {
+:host([effect='sheen']) .indicator {
   background: linear-gradient(270deg, var(--sheen-color), var(--color), var(--color), var(--sheen-color));
   background-size: 400% 100%;
   animation: sheen 8s ease-in-out infinite;
 }
 
-.skeleton--pulse .indicator {
+:host([effect='pulse']) .indicator {
   animation: pulse 2s ease-in-out 0.5s infinite;
 }
 
diff --git a/src/components/skeleton/skeleton.test.ts b/src/components/skeleton/skeleton.test.ts
index 0ff53bfa4..68274b11c 100644
--- a/src/components/skeleton/skeleton.test.ts
+++ b/src/components/skeleton/skeleton.test.ts
@@ -11,27 +11,37 @@ describe('<wa-skeleton>', () => {
 
         await expect(el).to.be.accessible();
 
-        const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
         const indicator = el.shadowRoot!.querySelector<HTMLElement>('[part~="indicator"]')!;
 
-        expect(base.getAttribute('class')).to.equal(' skeleton ');
+        expect(el.getAttribute('effect')).to.equal(null);
         expect(indicator.getAttribute('class')).to.equal('indicator');
       });
 
+      it('should set pulse effect by attribute', async () => {
+        const el = await fixture<WaSkeleton>(html` <wa-skeleton effect="none"></wa-skeleton> `);
+        const indicator = el.shadowRoot!.querySelector<HTMLElement>('[part~="indicator"]')!;
+        const cs = getComputedStyle(indicator);
+
+        expect(el.getAttribute('effect')).to.equal(null);
+        expect(cs.animationName).to.equal('none');
+      });
+
       it('should set pulse effect by attribute', async () => {
         const el = await fixture<WaSkeleton>(html` <wa-skeleton effect="pulse"></wa-skeleton> `);
+        const indicator = el.shadowRoot!.querySelector<HTMLElement>('[part~="indicator"]')!;
+        const cs = getComputedStyle(indicator);
 
-        const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
-
-        expect(base.getAttribute('class')).to.equal(' skeleton skeleton--pulse ');
+        expect(el.getAttribute('effect')).to.equal('pulse');
+        expect(cs.animationName).to.equal('pulse');
       });
 
       it('should set sheen effect by attribute', async () => {
         const el = await fixture<WaSkeleton>(html` <wa-skeleton effect="sheen"></wa-skeleton> `);
+        const indicator = el.shadowRoot!.querySelector<HTMLElement>('[part~="indicator"]')!;
+        const cs = getComputedStyle(indicator);
 
-        const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
-
-        expect(base.getAttribute('class')).to.equal(' skeleton skeleton--sheen ');
+        expect(el.getAttribute('effect')).to.equal('sheen');
+        expect(cs.animationName).to.equal('sheen');
       });
     });
   }
diff --git a/src/components/skeleton/skeleton.ts b/src/components/skeleton/skeleton.ts
index 86b1db15e..be36989c4 100644
--- a/src/components/skeleton/skeleton.ts
+++ b/src/components/skeleton/skeleton.ts
@@ -1,6 +1,5 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import styles from './skeleton.css';
 
@@ -10,7 +9,6 @@ import styles from './skeleton.css';
  * @status stable
  * @since 2.0
  *
- * @csspart base - The component's base wrapper.
  * @csspart indicator - The skeleton's indicator which is responsible for its color and animation.
  *
  * @cssproperty --border-radius - The skeleton's border radius.
@@ -22,21 +20,10 @@ export default class WaSkeleton extends WebAwesomeElement {
   static shadowStyle = styles;
 
   /** Determines which effect the skeleton will use. */
-  @property() effect: 'pulse' | 'sheen' | 'none' = 'none';
+  @property({ reflect: true, default: 'none' }) effect: 'pulse' | 'sheen' | 'none' = 'none';
 
   render() {
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-          skeleton: true,
-          'skeleton--pulse': this.effect === 'pulse',
-          'skeleton--sheen': this.effect === 'sheen',
-        })}
-      >
-        <div part="indicator" class="indicator"></div>
-      </div>
-    `;
+    return html` <div part="indicator" class="indicator"></div> `;
   }
 }