diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 13adb0761..fa7b8af47 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -25,11 +25,11 @@ wa-page::part(header) {
   border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
 }
 
-wa-page::part(drawer__body) {
+wa-page::part(body) {
   padding-top: 0px;
 }
 
-wa-page::part(drawer__header-actions) {
+wa-page::part(header-actions) {
   align-self: center;
 }
 
diff --git a/docs/docs/components/carousel.md b/docs/docs/components/carousel.md
index d2af61621..4de87be2b 100644
--- a/docs/docs/components/carousel.md
+++ b/docs/docs/components/carousel.md
@@ -534,12 +534,12 @@ The carousel has a robust API that makes it possible to extend and customize. Th
 </wa-carousel>
 
 <div class="thumbnails">
-  <div class="thumbnails__scroller">
-    <img alt="Thumbnail by 1" class="thumbnails__image active" src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?q=10" />
-    <img alt="Thumbnail by 2" class="thumbnails__image" src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?q=10" />
-    <img alt="Thumbnail by 3" class="thumbnails__image" src="https://images.unsplash.com/photo-1499002238440-d264edd596ec?q=10" />
-    <img alt="Thumbnail by 4" class="thumbnails__image" src="https://images.unsplash.com/photo-1475113548554-5a36f1f523d6?q=10" />
-    <img alt="Thumbnail by 5" class="thumbnails__image" src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=10" />
+  <div class="scroller">
+    <img alt="Thumbnail by 1" class="image active" src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?q=10" />
+    <img alt="Thumbnail by 2" class="image" src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?q=10" />
+    <img alt="Thumbnail by 3" class="image" src="https://images.unsplash.com/photo-1499002238440-d264edd596ec?q=10" />
+    <img alt="Thumbnail by 4" class="image" src="https://images.unsplash.com/photo-1475113548554-5a36f1f523d6?q=10" />
+    <img alt="Thumbnail by 5" class="image" src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=10" />
   </div>
 </div>
 
@@ -553,7 +553,7 @@ The carousel has a robust API that makes it possible to extend and customize. Th
     justify-content: center;
   }
 
-  .thumbnails__scroller {
+  .scroller {
     display: flex;
     gap: var(--wa-space-s);
     overflow-x: auto;
@@ -562,11 +562,11 @@ The carousel has a robust API that makes it possible to extend and customize. Th
     scroll-padding: var(--wa-space-s);
   }
 
-  .thumbnails__scroller::-webkit-scrollbar {
+  .scroller::-webkit-scrollbar {
     display: none;
   }
 
-  .thumbnails__image {
+  .image {
     width: 64px;
     height: 64px;
     object-fit: cover;
@@ -578,7 +578,7 @@ The carousel has a robust API that makes it possible to extend and customize. Th
     cursor: pointer;
   }
 
-  .thumbnails__image.active {
+  .image.active {
     opacity: 1;
   }
 </style>
@@ -586,13 +586,13 @@ The carousel has a robust API that makes it possible to extend and customize. Th
 <script>
   {
     const carousel = document.querySelector('.carousel-thumbnails');
-    const scroller = document.querySelector('.thumbnails__scroller');
-    const thumbnails = document.querySelectorAll('.thumbnails__image');
+    const scroller = document.querySelector('.scroller');
+    const thumbnails = document.querySelectorAll('.image');
 
     scroller.addEventListener('click', e => {
       const target = e.target;
 
-      if (target.matches('.thumbnails__image')) {
+      if (target.matches('.image')) {
         const index = [...thumbnails].indexOf(target);
         carousel.goToSlide(index);
       }
diff --git a/src/components/animated-image/animated-image.css b/src/components/animated-image/animated-image.css
index 91028b6e2..abf70ca93 100644
--- a/src/components/animated-image/animated-image.css
+++ b/src/components/animated-image/animated-image.css
@@ -17,7 +17,7 @@ img[aria-hidden='true'] {
   display: none;
 }
 
-.animated-image__control-box {
+.control-box {
   display: flex;
   position: absolute;
   align-items: center;
@@ -36,11 +36,11 @@ img[aria-hidden='true'] {
   transition: opacity var(--wa-transition-normal) var(--wa-transition-easing);
 }
 
-:host([play]:hover) .animated-image__control-box {
+:host([play]:hover) .control-box {
   opacity: 1;
 }
 
-:host([play]:not(:hover)) .animated-image__control-box {
+:host([play]:not(:hover)) .control-box {
   opacity: 0;
 }
 
diff --git a/src/components/animated-image/animated-image.ts b/src/components/animated-image/animated-image.ts
index b03fbc0c2..adb15abf7 100644
--- a/src/components/animated-image/animated-image.ts
+++ b/src/components/animated-image/animated-image.ts
@@ -30,7 +30,7 @@ import styles from './animated-image.css';
 export default class WaAnimatedImage extends WebAwesomeElement {
   static shadowStyle = styles;
 
-  @query('.animated-image__animated') animatedImage: HTMLImageElement;
+  @query('.animated') animatedImage: HTMLImageElement;
 
   @state() frozenFrame: string;
   @state() isLoaded = false;
@@ -85,7 +85,7 @@ export default class WaAnimatedImage extends WebAwesomeElement {
     return html`
       <div class="animated-image">
         <img
-          class="animated-image__animated"
+          class="animated"
           src=${this.src}
           alt=${this.alt}
           crossorigin="anonymous"
@@ -98,14 +98,14 @@ export default class WaAnimatedImage extends WebAwesomeElement {
         ${this.isLoaded
           ? html`
               <img
-                class="animated-image__frozen"
+                class="frozen"
                 src=${this.frozenFrame}
                 alt=${this.alt}
                 aria-hidden=${this.play ? 'true' : 'false'}
                 @click=${this.handleClick}
               />
 
-              <div part="control-box" class="animated-image__control-box">
+              <div part="control-box" class="control-box">
                 <slot name="play-icon">
                   <wa-icon
                     name="play"
diff --git a/src/components/breadcrumb-item/breadcrumb-item.css b/src/components/breadcrumb-item/breadcrumb-item.css
index d9242f328..0a8fe38f1 100644
--- a/src/components/breadcrumb-item/breadcrumb-item.css
+++ b/src/components/breadcrumb-item/breadcrumb-item.css
@@ -16,7 +16,7 @@
   white-space: nowrap;
 }
 
-.breadcrumb-item__label {
+.label {
   display: inline-block;
   font: inherit;
   text-decoration: none;
@@ -30,33 +30,33 @@
   transition: color var(--wa-transition-normal) var(--wa-transition-easing);
 }
 
-:host(:not(:last-of-type)) .breadcrumb-item__label:hover {
+:host(:not(:last-of-type)) .label:hover {
   color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
 }
 
-:host(:not(:last-of-type)) .breadcrumb-item__label:active {
+:host(:not(:last-of-type)) .label:active {
   color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
 }
 
-.breadcrumb-item__label:focus {
+.label:focus {
   outline: none;
 }
 
-.breadcrumb-item__label:focus-visible {
+.label:focus-visible {
   outline: var(--wa-focus-ring);
   outline-offset: var(--wa-focus-ring-offset);
 }
 
-.breadcrumb-item__prefix,
-.breadcrumb-item__suffix {
+.prefix,
+.suffix {
   display: none;
   flex: 0 0 auto;
   display: flex;
   align-items: center;
 }
 
-.breadcrumb-item__prefix,
-.breadcrumb-item__suffix {
+.prefix,
+.suffix {
   display: inline-flex;
   color: var(--wa-color-text-quiet);
 }
@@ -69,11 +69,11 @@
   margin-inline-start: var(--wa-space-s);
 }
 
-:host(:last-of-type) .breadcrumb-item__separator {
+:host(:last-of-type) .separator {
   display: none;
 }
 
-.breadcrumb-item__separator {
+.separator {
   color: var(--wa-color-text-quiet);
   display: inline-flex;
   align-items: center;
diff --git a/src/components/breadcrumb-item/breadcrumb-item.test.ts b/src/components/breadcrumb-item/breadcrumb-item.test.ts
index 1479dcb3e..a29bd595b 100644
--- a/src/components/breadcrumb-item/breadcrumb-item.test.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.test.ts
@@ -193,7 +193,7 @@ describe('<wa-breadcrumb-item>', () => {
           await expect(el).to.be.accessible();
           expect(el.shadowRoot!.querySelector('a')).to.be.null;
           expect(el.shadowRoot!.querySelector('button')).to.be.null;
-          expect(el.shadowRoot!.querySelector('.breadcrumb-item__label--dropdown')).not.to.be.null;
+          expect(el.shadowRoot!.querySelector('.label--dropdown')).not.to.be.null;
         });
       });
     });
diff --git a/src/components/breadcrumb-item/breadcrumb-item.ts b/src/components/breadcrumb-item/breadcrumb-item.ts
index 42dc570aa..82fe5061a 100644
--- a/src/components/breadcrumb-item/breadcrumb-item.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.ts
@@ -73,7 +73,7 @@ export default class WaBreadcrumbItem extends WebAwesomeElement {
   render() {
     return html`
       <div part="base" class="breadcrumb-item">
-        <span part="prefix" class="breadcrumb-item__prefix">
+        <span part="prefix" class="prefix">
           <slot name="prefix"></slot>
         </span>
 
@@ -81,7 +81,7 @@ export default class WaBreadcrumbItem extends WebAwesomeElement {
           ? html`
               <a
                 part="label"
-                class="breadcrumb-item__label breadcrumb-item__label--link"
+                class="label label--link"
                 href="${this.href!}"
                 target="${ifDefined(this.target ? this.target : undefined)}"
                 rel=${ifDefined(this.target ? this.rel : undefined)}
@@ -92,24 +92,24 @@ export default class WaBreadcrumbItem extends WebAwesomeElement {
           : ''}
         ${this.renderType === 'button'
           ? html`
-              <button part="label" type="button" class="breadcrumb-item__label breadcrumb-item__label--button">
+              <button part="label" type="button" class="label label--button">
                 <slot @slotchange=${this.handleSlotChange}></slot>
               </button>
             `
           : ''}
         ${this.renderType === 'dropdown'
           ? html`
-              <div part="label" class="breadcrumb-item__label breadcrumb-item__label--dropdown">
+              <div part="label" class="label label--dropdown">
                 <slot @slotchange=${this.handleSlotChange}></slot>
               </div>
             `
           : ''}
 
-        <span part="suffix" class="breadcrumb-item__suffix">
+        <span part="suffix" class="suffix">
           <slot name="suffix"></slot>
         </span>
 
-        <span part="separator" class="breadcrumb-item__separator" aria-hidden="true">
+        <span part="separator" class="separator" aria-hidden="true">
           <slot name="separator"></slot>
         </span>
       </div>
diff --git a/src/components/button-group/button-group.test.ts b/src/components/button-group/button-group.test.ts
index 00b3a01ed..e35124880 100644
--- a/src/components/button-group/button-group.test.ts
+++ b/src/components/button-group/button-group.test.ts
@@ -40,14 +40,12 @@ describe('<wa-button-group>', () => {
           `);
 
           const allButtons = group.querySelectorAll('wa-button');
-          const hasGroupClass = Array.from(allButtons).every(button =>
-            button.classList.contains('wa-button-group__button'),
-          );
+          const hasGroupClass = Array.from(allButtons).every(button => button.classList.contains('button'));
           expect(hasGroupClass).to.be.true;
 
-          expect(allButtons[0]).to.have.class('wa-button-group__button--first');
-          expect(allButtons[1]).to.have.class('wa-button-group__button--inner');
-          expect(allButtons[2]).to.have.class('wa-button-group__button--last');
+          expect(allButtons[0]).to.have.class('button--first');
+          expect(allButtons[1]).to.have.class('button--inner');
+          expect(allButtons[2]).to.have.class('button--last');
         });
       });
 
@@ -65,11 +63,11 @@ describe('<wa-button-group>', () => {
           allButtons[0].dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
 
           await elementUpdated(allButtons[0]);
-          expect(allButtons[0].classList.contains('wa-button-group__button--focus')).to.be.true;
+          expect(allButtons[0].classList.contains('button--focus')).to.be.true;
 
           allButtons[0].dispatchEvent(new FocusEvent('focusout', { bubbles: true }));
           await elementUpdated(allButtons[0]);
-          expect(allButtons[0].classList.contains('wa-button-group__button--focus')).not.to.be.true;
+          expect(allButtons[0].classList.contains('button--focus')).not.to.be.true;
         });
       });
 
@@ -87,11 +85,11 @@ describe('<wa-button-group>', () => {
 
           allButtons[0].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
           await elementUpdated(allButtons[0]);
-          expect(allButtons[0].classList.contains('wa-button-group__button--hover')).to.be.true;
+          expect(allButtons[0].classList.contains('button--hover')).to.be.true;
 
           allButtons[0].dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
           await elementUpdated(allButtons[0]);
-          expect(allButtons[0].classList.contains('wa-button-group__button--hover')).not.to.be.true;
+          expect(allButtons[0].classList.contains('button--hover')).not.to.be.true;
         });
       });
     });
diff --git a/src/components/button-group/button-group.ts b/src/components/button-group/button-group.ts
index bf188cd52..2c91cdcf1 100644
--- a/src/components/button-group/button-group.ts
+++ b/src/components/button-group/button-group.ts
@@ -41,22 +41,22 @@ export default class WaButtonGroup extends WebAwesomeElement {
 
   private handleFocus(event: Event) {
     const button = findButton(event.target as HTMLElement);
-    button?.classList.add('wa-button-group__button--focus');
+    button?.classList.add('button--focus');
   }
 
   private handleBlur(event: Event) {
     const button = findButton(event.target as HTMLElement);
-    button?.classList.remove('wa-button-group__button--focus');
+    button?.classList.remove('button--focus');
   }
 
   private handleMouseOver(event: Event) {
     const button = findButton(event.target as HTMLElement);
-    button?.classList.add('wa-button-group__button--hover');
+    button?.classList.add('button--hover');
   }
 
   private handleMouseOut(event: Event) {
     const button = findButton(event.target as HTMLElement);
-    button?.classList.remove('wa-button-group__button--hover');
+    button?.classList.remove('button--hover');
   }
 
   private handleSlotChange() {
@@ -71,13 +71,13 @@ export default class WaButtonGroup extends WebAwesomeElement {
       const button = findButton(el);
 
       if (button) {
-        button.classList.add('wa-button-group__button');
+        button.classList.add('button');
         button.classList.toggle('wa-button-group-horizontal', this.orientation === 'horizontal');
         button.classList.toggle('wa-button-group-vertical', this.orientation === 'vertical');
-        button.classList.toggle('wa-button-group__button--first', index === 0);
-        button.classList.toggle('wa-button-group__button--inner', index > 0 && index < slottedElements.length - 1);
-        button.classList.toggle('wa-button-group__button--last', index === slottedElements.length - 1);
-        button.classList.toggle('wa-button-group__button--radio', button.tagName.toLowerCase() === 'wa-radio-button');
+        button.classList.toggle('button--first', index === 0);
+        button.classList.toggle('button--inner', index > 0 && index < slottedElements.length - 1);
+        button.classList.toggle('button--last', index === slottedElements.length - 1);
+        button.classList.toggle('button--radio', button.tagName.toLowerCase() === 'wa-radio-button');
       }
     });
   }
diff --git a/src/components/card/card.css b/src/components/card/card.css
index 504cace42..942d9bef9 100644
--- a/src/components/card/card.css
+++ b/src/components/card/card.css
@@ -23,7 +23,7 @@
   font: inherit;
 }
 
-.card__image {
+.image {
   display: flex;
   border-top-left-radius: var(--border-radius);
   border-top-right-radius: var(--border-radius);
@@ -31,38 +31,38 @@
   overflow: hidden;
 }
 
-.card__image::slotted(img) {
+.image::slotted(img) {
   display: block;
   width: 100%;
   border-bottom-left-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
 }
 
-.card:not(.card--has-image) .card__image {
+.card:not(.card--has-image) .image {
   display: none;
 }
 
-.card__header {
+.header {
   display: block;
   border-bottom: inherit;
   padding: calc(var(--spacing) / 2) var(--spacing);
 }
 
-.card:not(.card--has-header) .card__header {
+.card:not(.card--has-header) .header {
   display: none;
 }
 
-.card:not(.card--has-image) .card__header {
+.card:not(.card--has-image) .header {
   border-top-left-radius: var(--border-radius);
   border-top-right-radius: var(--border-radius);
 }
 
-.card__body {
+.body {
   display: block;
   padding: var(--spacing);
 }
 
-.card--has-footer .card__footer {
+.card--has-footer .footer {
   display: block;
   border-top: inherit;
   border-bottom-left-radius: var(--border-radius);
@@ -70,6 +70,6 @@
   padding: var(--spacing);
 }
 
-.card:not(.card--has-footer) .card__footer {
+.card:not(.card--has-footer) .footer {
   display: none;
 }
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
index 289f2d32d..48e6ca6d2 100644
--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@@ -53,10 +53,10 @@ export default class WaCard extends WebAwesomeElement {
           'card--has-header': this.withHeader,
         })}
       >
-        <slot name="image" part="image" class="card__image"></slot>
-        <slot name="header" part="header" class="card__header"></slot>
-        <slot part="body" class="card__body"></slot>
-        <slot name="footer" part="footer" class="card__footer"></slot>
+        <slot name="image" part="image" class="image"></slot>
+        <slot name="header" part="header" class="header"></slot>
+        <slot part="body" class="body"></slot>
+        <slot name="footer" part="footer" class="footer"></slot>
       </div>
     `;
   }
diff --git a/src/components/carousel/carousel.css b/src/components/carousel/carousel.css
index 920ec1d6b..d39c94404 100644
--- a/src/components/carousel/carousel.css
+++ b/src/components/carousel/carousel.css
@@ -23,7 +23,7 @@
   position: relative;
 }
 
-.carousel__pagination {
+.pagination {
   grid-area: pagination;
   display: flex;
   flex-wrap: wrap;
@@ -31,7 +31,7 @@
   gap: var(--wa-space-s);
 }
 
-.carousel__slides {
+.slides {
   grid-area: slides;
 
   display: grid;
@@ -49,12 +49,12 @@
 }
 
 @media (prefers-reduced-motion) {
-  :where(.carousel__slides) {
+  :where(.slides) {
     scroll-behavior: auto;
   }
 }
 
-.carousel__slides--horizontal {
+.slides--horizontal {
   grid-auto-flow: column;
   grid-auto-columns: var(--slide-size);
   grid-auto-rows: 100%;
@@ -65,7 +65,7 @@
   overflow-y: hidden;
 }
 
-.carousel__slides--vertical {
+.slides--vertical {
   grid-auto-flow: row;
   grid-auto-columns: 100%;
   grid-auto-rows: var(--slide-size);
@@ -76,8 +76,8 @@
   overflow-x: hidden;
 }
 
-.carousel__slides--dragging,
-.carousel__slides--dropping {
+.slides--dragging,
+.slides--dropping {
   scroll-snap-type: unset;
 }
 
@@ -85,17 +85,17 @@
   height: 100%;
 }
 
-.carousel__slides::-webkit-scrollbar {
+.slides::-webkit-scrollbar {
   display: none;
 }
 
-.carousel__navigation {
+.navigation {
   grid-area: navigation;
   display: contents;
   font-size: var(--wa-font-size-l);
 }
 
-.carousel__navigation-button {
+.navigation-button {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
@@ -110,26 +110,26 @@
   appearance: none;
 }
 
-.carousel__navigation-button-disabled {
+.navigation-button-disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-.carousel__navigation-button-disabled::part(base) {
+.navigation-button-disabled::part(base) {
   pointer-events: none;
 }
 
-.carousel__navigation-button-previous {
+.navigation-button-previous {
   grid-column: 1;
   grid-row: 1;
 }
 
-.carousel__navigation-button-next {
+.navigation-button-next {
   grid-column: 3;
   grid-row: 1;
 }
 
-.carousel__pagination-item {
+.pagination-item {
   display: block;
   cursor: pointer;
   background: none;
@@ -143,15 +143,15 @@
   transition: transform var(--wa-transition-slow);
 }
 
-.carousel__pagination-item--active {
+.pagination-item--active {
   background-color: var(--pagination-color-active);
   transform: scale(1.25);
 }
 
 /* Focus styles */
-.carousel__slides:focus-visible,
-.carousel__navigation-button:focus-visible,
-.carousel__pagination-item:focus-visible {
+.slides:focus-visible,
+.navigation-button:focus-visible,
+.pagination-item:focus-visible {
   outline: var(--wa-focus-ring);
   outline-offset: var(--wa-focus-ring-offset);
 }
diff --git a/src/components/carousel/carousel.test.ts b/src/components/carousel/carousel.test.ts
index 83f32f1c1..94a0ea072 100644
--- a/src/components/carousel/carousel.test.ts
+++ b/src/components/carousel/carousel.test.ts
@@ -54,8 +54,8 @@ describe('<wa-carousel>', () => {
         expect(el).to.exist;
         expect(el).to.have.attribute('role', 'region');
         expect(el).to.have.attribute('aria-label', 'Carousel');
-        expect(el.shadowRoot!.querySelector('.carousel__navigation')).not.to.exist;
-        expect(el.shadowRoot!.querySelector('.carousel__pagination')).not.to.exist;
+        expect(el.shadowRoot!.querySelector('.navigation')).not.to.exist;
+        expect(el.shadowRoot!.querySelector('.pagination')).not.to.exist;
       });
 
       describe('when `autoplay` attribute is provided', () => {
@@ -194,8 +194,8 @@ describe('<wa-carousel>', () => {
 
           // Assert
           expect(el).to.exist;
-          expect(el.shadowRoot!.querySelector('.carousel__navigation')).not.to.exist;
-          expect(el.shadowRoot!.querySelector('.carousel__pagination')).to.exist;
+          expect(el.shadowRoot!.querySelector('.navigation')).not.to.exist;
+          expect(el.shadowRoot!.querySelector('.pagination')).to.exist;
         });
 
         describe('and user clicks on a pagination button', () => {
@@ -212,7 +212,7 @@ describe('<wa-carousel>', () => {
             await el.updateComplete;
 
             // Act
-            const paginationItem = el.shadowRoot!.querySelectorAll('.carousel__pagination-item')[2] as HTMLElement;
+            const paginationItem = el.shadowRoot!.querySelectorAll('.pagination-item')[2] as HTMLElement;
             await clickOnElement(paginationItem);
 
             expect(el.goToSlide).to.have.been.calledWith(2);
@@ -233,8 +233,8 @@ describe('<wa-carousel>', () => {
 
           // Assert
           expect(el).to.exist;
-          expect(el.shadowRoot!.querySelector('.carousel__navigation')).to.exist;
-          expect(el.shadowRoot!.querySelector('.carousel__pagination')).not.to.exist;
+          expect(el.shadowRoot!.querySelector('.navigation')).to.exist;
+          expect(el.shadowRoot!.querySelector('.pagination')).not.to.exist;
         });
       });
 
@@ -282,7 +282,7 @@ describe('<wa-carousel>', () => {
               `);
 
               // Assert
-              const paginationItems = el.shadowRoot!.querySelectorAll('.carousel__pagination-item');
+              const paginationItems = el.shadowRoot!.querySelectorAll('.pagination-item');
               expect(paginationItems.length).to.equal(expected);
             });
           },
@@ -330,7 +330,7 @@ describe('<wa-carousel>', () => {
             </wa-carousel>
           `);
           const expectedSlides = el.querySelectorAll('.expected');
-          const nextButton: HTMLElement = el.shadowRoot!.querySelector('.carousel__navigation-button-next')!;
+          const nextButton: HTMLElement = el.shadowRoot!.querySelector('.navigation-button-next')!;
 
           // Act
           await clickOnElement(nextButton);
@@ -359,7 +359,7 @@ describe('<wa-carousel>', () => {
             </wa-carousel>
           `);
           const expectedSlides = el.querySelectorAll('.expected');
-          const nextButton: HTMLElement = el.shadowRoot!.querySelector('.carousel__navigation-button-next')!;
+          const nextButton: HTMLElement = el.shadowRoot!.querySelector('.navigation-button-next')!;
 
           // Act
           await clickOnElement(nextButton);
@@ -506,7 +506,7 @@ describe('<wa-carousel>', () => {
                 <wa-carousel-item>Node 3</wa-carousel-item>
               </wa-carousel>
             `);
-            const nextButton: HTMLElement = el.shadowRoot!.querySelector('.carousel__navigation-button-next')!;
+            const nextButton: HTMLElement = el.shadowRoot!.querySelector('.navigation-button-next')!;
             sandbox.stub(el, 'next');
 
             await el.updateComplete;
@@ -529,7 +529,7 @@ describe('<wa-carousel>', () => {
                   <wa-carousel-item>Node 3</wa-carousel-item>
                 </wa-carousel>
               `);
-              const nextButton: HTMLElement = el.shadowRoot!.querySelector('.carousel__navigation-button-next')!;
+              const nextButton: HTMLElement = el.shadowRoot!.querySelector('.navigation-button-next')!;
               sandbox.stub(el, 'next');
 
               el.goToSlide(2, 'auto');
@@ -556,7 +556,7 @@ describe('<wa-carousel>', () => {
                     <wa-carousel-item>Node 3</wa-carousel-item>
                   </wa-carousel>
                 `);
-                const nextButton: HTMLElement = el.shadowRoot!.querySelector('.carousel__navigation-button-next')!;
+                const nextButton: HTMLElement = el.shadowRoot!.querySelector('.navigation-button-next')!;
 
                 el.goToSlide(2, 'auto');
                 await oneEvent(el.scrollContainer, 'scrollend');
@@ -597,7 +597,7 @@ describe('<wa-carousel>', () => {
             await oneEvent(el.scrollContainer, 'scrollend');
             await el.updateComplete;
 
-            const previousButton: HTMLElement = el.shadowRoot!.querySelector('.carousel__navigation-button-previous')!;
+            const previousButton: HTMLElement = el.shadowRoot!.querySelector('.navigation-button-previous')!;
             sandbox.stub(el, 'previous');
 
             await el.updateComplete;
@@ -621,9 +621,7 @@ describe('<wa-carousel>', () => {
                 </wa-carousel>
               `);
 
-              const previousButton: HTMLElement = el.shadowRoot!.querySelector(
-                '.carousel__navigation-button-previous',
-              )!;
+              const previousButton: HTMLElement = el.shadowRoot!.querySelector('.navigation-button-previous')!;
               sandbox.stub(el, 'previous');
               await el.updateComplete;
 
@@ -647,9 +645,7 @@ describe('<wa-carousel>', () => {
                   </wa-carousel>
                 `);
 
-                const previousButton: HTMLElement = el.shadowRoot!.querySelector(
-                  '.carousel__navigation-button-previous',
-                )!;
+                const previousButton: HTMLElement = el.shadowRoot!.querySelector('.navigation-button-previous')!;
                 await el.updateComplete;
 
                 // Act
@@ -769,8 +765,8 @@ describe('<wa-carousel>', () => {
               <wa-carousel-item>Node 3</wa-carousel-item>
             </wa-carousel>
           `);
-          const pagination = el.shadowRoot!.querySelector('.carousel__pagination')!;
-          const navigation = el.shadowRoot!.querySelector('.carousel__navigation')!;
+          const pagination = el.shadowRoot!.querySelector('.pagination')!;
+          const navigation = el.shadowRoot!.querySelector('.navigation')!;
           await el.updateComplete;
 
           // Assert
@@ -779,13 +775,13 @@ describe('<wa-carousel>', () => {
 
           expect(pagination).to.have.attribute('role', 'tablist');
           expect(pagination).to.have.attribute('aria-controls', el.scrollContainer.id);
-          for (const paginationItem of pagination.querySelectorAll('.carousel__pagination-item')) {
+          for (const paginationItem of pagination.querySelectorAll('.pagination-item')) {
             expect(paginationItem).to.have.attribute('role', 'tab');
             expect(paginationItem).to.have.attribute('aria-selected');
             expect(paginationItem).to.have.attribute('aria-label');
           }
 
-          for (const navigationItem of navigation.querySelectorAll('.carousel__navigation-item')) {
+          for (const navigationItem of navigation.querySelectorAll('.navigation-item')) {
             expect(navigationItem).to.have.attribute('aria-controls', el.scrollContainer.id);
             expect(navigationItem).to.have.attribute('aria-disabled');
             expect(navigationItem).to.have.attribute('aria-label');
diff --git a/src/components/carousel/carousel.ts b/src/components/carousel/carousel.ts
index fce1bf448..fdc930be9 100644
--- a/src/components/carousel/carousel.ts
+++ b/src/components/carousel/carousel.ts
@@ -87,8 +87,8 @@ export default class WaCarousel extends WebAwesomeElement {
   /** When set, it is possible to scroll through the slides by dragging them with the mouse. */
   @property({ type: Boolean, reflect: true, attribute: 'mouse-dragging' }) mouseDragging = false;
 
-  @query('.carousel__slides') scrollContainer: HTMLElement;
-  @query('.carousel__pagination') paginationContainer: HTMLElement;
+  @query('.slides') scrollContainer: HTMLElement;
+  @query('.pagination') paginationContainer: HTMLElement;
 
   // The index of the active slide
   @state() activeSlide = 0;
@@ -574,10 +574,10 @@ export default class WaCarousel extends WebAwesomeElement {
           id="scroll-container"
           part="scroll-container"
           class="${classMap({
-            carousel__slides: true,
-            'carousel__slides--horizontal': this.orientation === 'horizontal',
-            'carousel__slides--vertical': this.orientation === 'vertical',
-            'carousel__slides--dragging': this.dragging,
+            slides: true,
+            'slides--horizontal': this.orientation === 'horizontal',
+            'slides--vertical': this.orientation === 'vertical',
+            'slides--dragging': this.dragging,
           })}"
           style="--slides-per-page: ${this.slidesPerPage};"
           aria-busy="${scrolling ? 'true' : 'false'}"
@@ -594,13 +594,13 @@ export default class WaCarousel extends WebAwesomeElement {
 
         ${this.navigation
           ? html`
-              <div part="navigation" class="carousel__navigation">
+              <div part="navigation" class="navigation">
                 <button
                   part="navigation-button navigation-button-previous"
                   class="${classMap({
-                    'carousel__navigation-button': true,
-                    'carousel__navigation-button-previous': true,
-                    'carousel__navigation-button-disabled': !prevEnabled,
+                    'navigation-button': true,
+                    'navigation-button-previous': true,
+                    'navigation-button-disabled': !prevEnabled,
                   })}"
                   aria-label="${this.localize.term('previousSlide')}"
                   aria-controls="scroll-container"
@@ -615,9 +615,9 @@ export default class WaCarousel extends WebAwesomeElement {
                 <button
                   part="navigation-button navigation-button-next"
                   class=${classMap({
-                    'carousel__navigation-button': true,
-                    'carousel__navigation-button-next': true,
-                    'carousel__navigation-button-disabled': !nextEnabled,
+                    'navigation-button': true,
+                    'navigation-button-next': true,
+                    'navigation-button-disabled': !nextEnabled,
                   })}
                   aria-label="${this.localize.term('nextSlide')}"
                   aria-controls="scroll-container"
@@ -633,15 +633,15 @@ export default class WaCarousel extends WebAwesomeElement {
           : ''}
         ${this.pagination
           ? html`
-              <div part="pagination" role="tablist" class="carousel__pagination" aria-controls="scroll-container">
+              <div part="pagination" role="tablist" class="pagination" aria-controls="scroll-container">
                 ${map(range(pagesCount), index => {
                   const isActive = index === currentPage;
                   return html`
                     <button
                       part="pagination-item ${isActive ? 'pagination-item--active' : ''}"
                       class="${classMap({
-                        'carousel__pagination-item': true,
-                        'carousel__pagination-item--active': isActive,
+                        'pagination-item': true,
+                        'pagination-item--active': isActive,
                       })}"
                       role="tab"
                       aria-selected="${isActive ? 'true' : 'false'}"
diff --git a/src/components/checkbox/checkbox.css b/src/components/checkbox/checkbox.css
index 2b138730a..ad7e20b55 100644
--- a/src/components/checkbox/checkbox.css
+++ b/src/components/checkbox/checkbox.css
@@ -31,7 +31,7 @@
   }
 }
 
-.checkbox__control {
+.control {
   flex: 0 0 auto;
   position: relative;
   display: flex;
diff --git a/src/components/checkbox/checkbox.test.ts b/src/components/checkbox/checkbox.test.ts
index 4ef27ae5d..c609cd239 100644
--- a/src/components/checkbox/checkbox.test.ts
+++ b/src/components/checkbox/checkbox.test.ts
@@ -111,7 +111,7 @@ describe('<wa-checkbox>', () => {
         //
         const el = await fixture<WaCheckbox>(html` <wa-checkbox></wa-checkbox> `);
         const label = el.shadowRoot!.querySelector('.checkbox')!;
-        const input = el.shadowRoot!.querySelector('.checkbox__input')!;
+        const input = el.shadowRoot!.querySelector('.input')!;
 
         const labelPosition = getComputedStyle(label).position;
         const inputPosition = getComputedStyle(input).position;
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index 5abef71ed..77bbdfbcc 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -239,9 +239,9 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
         })}
       >
         <label part="base">
-          <span class="checkbox__control">
+          <span class="control">
             <input
-              class="checkbox__input"
+              class="input"
               type="checkbox"
               title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
               name=${this.name}
diff --git a/src/components/color-picker/color-picker.css b/src/components/color-picker/color-picker.css
index 854646f8a..2b3936185 100644
--- a/src/components/color-picker/color-picker.css
+++ b/src/components/color-picker/color-picker.css
@@ -29,7 +29,7 @@
   -webkit-user-select: none;
 }
 
-.color-picker__grid {
+.grid {
   position: relative;
   height: var(--grid-height);
   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
@@ -40,7 +40,7 @@
   forced-color-adjust: none;
 }
 
-.color-picker__grid-handle {
+.grid-handle {
   position: absolute;
   width: var(--grid-handle-size);
   height: var(--grid-handle-size);
@@ -52,26 +52,26 @@
   transition: scale var(--wa-transition-normal) var(--wa-transition-easing);
 }
 
-.color-picker__grid-handle--dragging {
+.grid-handle--dragging {
   cursor: none;
   scale: 1.5;
 }
 
-.color-picker__grid-handle:focus-visible {
+.grid-handle:focus-visible {
   outline: var(--wa-focus-ring);
 }
 
-.color-picker__controls {
+.controls {
   padding: var(--spacing);
   display: flex;
   align-items: center;
 }
 
-.color-picker__sliders {
+.sliders {
   flex: 1 1 auto;
 }
 
-.color-picker__slider {
+.slider {
   position: relative;
   height: var(--slider-height);
   border-radius: var(--wa-border-radius-xs);
@@ -79,11 +79,11 @@
   forced-color-adjust: none;
 }
 
-.color-picker__slider:not(:last-of-type) {
+.slider:not(:last-of-type) {
   margin-bottom: var(--wa-space-s);
 }
 
-.color-picker__slider-handle {
+.slider-handle {
   position: absolute;
   top: calc(50% - var(--slider-handle-size) / 2);
   width: var(--slider-handle-size);
@@ -94,11 +94,11 @@
   margin-left: calc(var(--slider-handle-size) / -2);
 }
 
-.color-picker__slider-handle:focus-visible {
+.slider-handle:focus-visible {
   outline: var(--wa-focus-ring);
 }
 
-.color-picker__hue {
+.hue {
   background-image: linear-gradient(
     to right,
     rgb(255, 0, 0) 0%,
@@ -111,7 +111,7 @@
   );
 }
 
-.color-picker__alpha .color-picker__alpha-gradient {
+.alpha .alpha-gradient {
   position: absolute;
   top: 0;
   left: 0;
@@ -120,7 +120,7 @@
   border-radius: inherit;
 }
 
-.color-picker__preview {
+.preview {
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
@@ -136,7 +136,7 @@
   forced-color-adjust: none;
 }
 
-.color-picker__preview:before {
+.preview:before {
   content: '';
   position: absolute;
   top: 0;
@@ -150,12 +150,12 @@
   background-color: var(--preview-color);
 }
 
-.color-picker__preview:focus-visible {
+.preview:focus-visible {
   outline: var(--wa-focus-ring);
   outline-offset: var(--wa-focus-ring-offset);
 }
 
-.color-picker__preview-color {
+.preview-color {
   position: absolute;
   top: 0;
   left: 0;
@@ -164,7 +164,7 @@
   border: solid 0.0625rem rgba(0, 0, 0, 0.125);
 }
 
-.color-picker__preview-color--copied {
+.preview-color--copied {
   animation: pulse 850ms;
 }
 
@@ -180,26 +180,26 @@
   }
 }
 
-.color-picker__user-input {
+.user-input {
   display: flex;
   padding: 0 var(--spacing) var(--spacing) var(--spacing);
 }
 
-.color-picker__user-input wa-input {
+.user-input wa-input {
   min-width: 0; /* fix input width in Safari */
   flex: 1 1 auto;
 }
 
-.color-picker__user-input wa-button-group {
+.user-input wa-button-group {
   margin-inline-start: var(--spacing);
 }
 
-.color-picker__user-input wa-button:first-of-type {
+.user-input wa-button:first-of-type {
   min-width: 3rem;
   max-width: 3rem;
 }
 
-.color-picker__swatches {
+.swatches {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(var(--swatch-size), 100%), 1fr));
   grid-gap: var(--wa-space-xs);
@@ -210,14 +210,14 @@
   forced-color-adjust: none;
 }
 
-.color-picker__swatch {
+.swatch {
   position: relative;
   aspect-ratio: 1 / 1;
   width: 100%;
   border-radius: var(--swatch-border-radius);
 }
 
-.color-picker__swatch .color-picker__swatch-color {
+.swatch .swatch-color {
   position: absolute;
   top: 0;
   left: 0;
@@ -228,12 +228,12 @@
   cursor: pointer;
 }
 
-.color-picker__swatch:focus-visible {
+.swatch:focus-visible {
   outline: var(--wa-focus-ring);
   outline-offset: var(--wa-focus-ring-offset);
 }
 
-.color-picker__transparent-bg {
+.transparent-bg {
   background-image: linear-gradient(45deg, var(--wa-color-neutral-fill-normal) 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-normal) 75%),
     linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-normal) 75%),
@@ -251,13 +251,13 @@
   cursor: not-allowed;
 }
 
-.color-picker--disabled .color-picker__grid,
-.color-picker--disabled .color-picker__grid-handle,
-.color-picker--disabled .color-picker__slider,
-.color-picker--disabled .color-picker__slider-handle,
-.color-picker--disabled .color-picker__preview,
-.color-picker--disabled .color-picker__swatch,
-.color-picker--disabled .color-picker__swatch-color {
+.color-picker--disabled .grid,
+.color-picker--disabled .grid-handle,
+.color-picker--disabled .slider,
+.color-picker--disabled .slider-handle,
+.color-picker--disabled .preview,
+.color-picker--disabled .swatch,
+.color-picker--disabled .swatch-color {
   pointer-events: none;
 }
 
@@ -277,7 +277,7 @@
   overflow: visible;
 }
 
-.color-dropdown__trigger {
+.trigger {
   display: block;
   position: relative;
   background-color: transparent;
@@ -286,25 +286,25 @@
   forced-color-adjust: none;
 }
 
-.color-dropdown__trigger.color-dropdown__trigger--small {
+.trigger.trigger--small {
   width: var(--wa-form-control-height-s);
   height: var(--wa-form-control-height-s);
   border-radius: var(--trigger-border-radius);
 }
 
-.color-dropdown__trigger.color-dropdown__trigger--medium {
+.trigger.trigger--medium {
   width: var(--wa-form-control-height-m);
   height: var(--wa-form-control-height-m);
   border-radius: var(--trigger-border-radius);
 }
 
-.color-dropdown__trigger.color-dropdown__trigger--large {
+.trigger.trigger--large {
   width: var(--wa-form-control-height-l);
   height: var(--wa-form-control-height-l);
   border-radius: var(--trigger-border-radius);
 }
 
-.color-dropdown__trigger:before {
+.trigger:before {
   content: '';
   position: absolute;
   top: 0;
@@ -318,25 +318,25 @@
     inset 0 0 0 0.25rem var(--wa-color-surface-default);
 }
 
-.color-dropdown__trigger--empty:before {
+.trigger--empty:before {
   background-color: transparent;
 }
 
-.color-dropdown__trigger:focus-visible {
+.trigger:focus-visible {
   outline: none;
 }
 
-.color-dropdown__trigger:focus-visible:not(.color-dropdown__trigger--disabled) {
+.trigger:focus-visible:not(.trigger--disabled) {
   outline: var(--wa-focus-ring);
   outline-offset: var(--wa-focus-ring-offset);
 }
 
-:host(:disabled) :is(.color-dropdown__label, .color-dropdown__trigger) {
+:host(:disabled) :is(.label, .trigger) {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-.form-control.form-control--has-label .form-control__label {
+.form-control.form-control--has-label .label {
   cursor: pointer;
   display: inline-block;
 }
diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts
index 41d07f1af..c04db43dd 100644
--- a/src/components/color-picker/color-picker.ts
+++ b/src/components/color-picker/color-picker.ts
@@ -257,9 +257,9 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
     this.previewButton.focus();
 
     // Show copied animation
-    this.previewButton.classList.add('color-picker__preview-color--copied');
+    this.previewButton.classList.add('preview-color--copied');
     this.previewButton.addEventListener('animationend', () => {
-      this.previewButton.classList.remove('color-picker__preview-color--copied');
+      this.previewButton.classList.remove('preview-color--copied');
     });
   }
 
@@ -283,8 +283,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
   }
 
   private handleAlphaDrag(event: PointerEvent) {
-    const container = this.shadowRoot!.querySelector<HTMLElement>('.color-picker__slider.color-picker__alpha')!;
-    const handle = container.querySelector<HTMLElement>('.color-picker__slider-handle')!;
+    const container = this.shadowRoot!.querySelector<HTMLElement>('.slider.alpha')!;
+    const handle = container.querySelector<HTMLElement>('.slider-handle')!;
     const { width } = container.getBoundingClientRect();
     let initialValue = this.value;
     let currentValue = this.value;
@@ -313,8 +313,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
   }
 
   private handleHueDrag(event: PointerEvent) {
-    const container = this.shadowRoot!.querySelector<HTMLElement>('.color-picker__slider.color-picker__hue')!;
-    const handle = container.querySelector<HTMLElement>('.color-picker__slider-handle')!;
+    const container = this.shadowRoot!.querySelector<HTMLElement>('.slider.hue')!;
+    const handle = container.querySelector<HTMLElement>('.slider-handle')!;
     const { width } = container.getBoundingClientRect();
     let initialValue = this.value;
     let currentValue = this.value;
@@ -343,8 +343,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
   }
 
   private handleGridDrag(event: PointerEvent) {
-    const grid = this.shadowRoot!.querySelector<HTMLElement>('.color-picker__grid')!;
-    const handle = grid.querySelector<HTMLElement>('.color-picker__grid-handle')!;
+    const grid = this.shadowRoot!.querySelector<HTMLElement>('.grid')!;
+    const handle = grid.querySelector<HTMLElement>('.grid-handle')!;
     const { width, height } = grid.getBoundingClientRect();
     let initialValue = this.value;
     let currentValue = this.value;
@@ -665,7 +665,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
   }
 
   private handleAfterHide() {
-    this.previewButton.classList.remove('color-picker__preview-color--copied');
+    this.previewButton.classList.remove('preview-color--copied');
     // Update validity so we get a new anchor.
     this.updateValidity();
   }
@@ -894,7 +894,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
       >
         <div
           part="grid"
-          class="color-picker__grid"
+          class="grid"
           style=${styleMap({ backgroundColor: this.getHexString(this.hue, 100, 100) })}
           @pointerdown=${this.handleGridDrag}
           @touchmove=${this.handleTouchMove}
@@ -902,8 +902,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
           <span
             part="grid-handle"
             class=${classMap({
-              'color-picker__grid-handle': true,
-              'color-picker__grid-handle--dragging': this.isDraggingGridHandle,
+              'grid-handle': true,
+              'grid-handle--dragging': this.isDraggingGridHandle,
             })}
             style=${styleMap({
               top: `${gridHandleY}%`,
@@ -917,17 +917,17 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
           ></span>
         </div>
 
-        <div class="color-picker__controls">
-          <div class="color-picker__sliders">
+        <div class="controls">
+          <div class="sliders">
             <div
               part="slider hue-slider"
-              class="color-picker__hue color-picker__slider"
+              class="hue slider"
               @pointerdown=${this.handleHueDrag}
               @touchmove=${this.handleTouchMove}
             >
               <span
                 part="slider-handle hue-slider-handle"
-                class="color-picker__slider-handle"
+                class="slider-handle"
                 style=${styleMap({
                   left: `${this.hue === 0 ? 0 : 100 / (360 / this.hue)}%`,
                   backgroundColor: this.getHexString(this.hue, 100, 100),
@@ -947,12 +947,12 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
               ? html`
                   <div
                     part="slider opacity-slider"
-                    class="color-picker__alpha color-picker__slider color-picker__transparent-bg"
+                    class="alpha slider transparent-bg"
                     @pointerdown="${this.handleAlphaDrag}"
                     @touchmove=${this.handleTouchMove}
                   >
                     <div
-                      class="color-picker__alpha-gradient"
+                      class="alpha-gradient"
                       style=${styleMap({
                         backgroundImage: `linear-gradient(
                           to right,
@@ -963,7 +963,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
                     ></div>
                     <span
                       part="slider-handle opacity-slider-handle"
-                      class="color-picker__slider-handle"
+                      class="slider-handle"
                       style=${styleMap({
                         left: `${this.alpha}%`,
                         backgroundColor: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha),
@@ -985,7 +985,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
           <button
             type="button"
             part="preview"
-            class="color-picker__preview color-picker__transparent-bg"
+            class="preview transparent-bg"
             aria-label=${this.localize.term('copy')}
             style=${styleMap({
               '--preview-color': this.getHexString(this.hue, this.saturation, this.brightness, this.alpha),
@@ -994,7 +994,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
           ></button>
         </div>
 
-        <div class="color-picker__user-input" aria-live="polite">
+        <div class="user-input" aria-live="polite">
           <wa-input
             part="input"
             type="text"
@@ -1067,7 +1067,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
 
         ${swatches.length > 0
           ? html`
-              <div part="swatches" class="color-picker__swatches">
+              <div part="swatches" class="swatches">
                 ${swatches.map(swatch => {
                   const parsedColor = this.parseColor(swatch);
 
@@ -1079,7 +1079,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
                   return html`
                     <div
                       part="swatch"
-                      class="color-picker__swatch color-picker__transparent-bg"
+                      class="swatch transparent-bg"
                       tabindex=${ifDefined(this.disabled ? undefined : '0')}
                       role="button"
                       aria-label=${swatch}
@@ -1087,10 +1087,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
                       @keydown=${(event: KeyboardEvent) =>
                         !this.disabled && event.key === 'Enter' && this.setColor(parsedColor.hexa)}
                     >
-                      <div
-                        class="color-picker__swatch-color"
-                        style=${styleMap({ backgroundColor: parsedColor.hexa })}
-                      ></div>
+                      <div class="swatch-color" style=${styleMap({ backgroundColor: parsedColor.hexa })}></div>
                     </div>
                   `;
                 })}
@@ -1113,7 +1110,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
       >
         <div
           class=${classMap({
-            'color-dropdown__container': true,
+            container: true,
             'form-control': true,
             'form-control--small': this.size === 'small',
             'form-control--medium': this.size === 'medium',
@@ -1141,7 +1138,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
             }
           }}
         >
-          <div part="form-control-label" class="form-control__label" id="form-control-label">
+          <div part="form-control-label" class="label" id="form-control-label">
             <slot name="label">${this.label}</slot>
           </div>
 
@@ -1149,14 +1146,14 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
             id="trigger"
             part="trigger form-control-input"
             class=${classMap({
-              'color-dropdown__trigger': true,
-              'color-dropdown__trigger--disabled': this.disabled,
-              'color-dropdown__trigger--small': this.size === 'small',
-              'color-dropdown__trigger--medium': this.size === 'medium',
-              'color-dropdown__trigger--large': this.size === 'large',
-              'color-dropdown__trigger--empty': this.isEmpty,
-              'color-dropdown__trigger--focused': this.hasFocus,
-              'color-picker__transparent-bg': true,
+              trigger: true,
+              'trigger--disabled': this.disabled,
+              'trigger--small': this.size === 'small',
+              'trigger--medium': this.size === 'medium',
+              'trigger--large': this.size === 'large',
+              'trigger--empty': this.isEmpty,
+              'trigger--focused': this.hasFocus,
+              'transparent-bg': true,
               'form-control-input': true,
             })}
             style=${styleMap({
diff --git a/src/components/copy-button/copy-button.css b/src/components/copy-button/copy-button.css
index 870ea50e8..e273bf3b6 100644
--- a/src/components/copy-button/copy-button.css
+++ b/src/components/copy-button/copy-button.css
@@ -8,7 +8,7 @@
   color: var(--wa-color-text-quiet);
 }
 
-.copy-button__button {
+.button {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
@@ -22,13 +22,13 @@
   transition: color var(--wa-transition-fast) var(--wa-transition-easing);
 }
 
-.copy-button__button:hover:not([disabled]),
-.copy-button__button:focus-visible:not([disabled]) {
+.button:hover:not([disabled]),
+.button:focus-visible:not([disabled]) {
   background-color: var(--background-color-hover);
   color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
 }
 
-.copy-button__button:active:not([disabled]) {
+.button:active:not([disabled]) {
   color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
 }
 
@@ -40,12 +40,12 @@ slot[name='error-icon'] {
   color: var(--error-color);
 }
 
-.copy-button__button:focus-visible {
+.button:focus-visible {
   outline: var(--wa-focus-ring);
   outline-offset: var(--wa-focus-ring-offset);
 }
 
-.copy-button__button[disabled] {
+.button[disabled] {
   opacity: 0.5;
   cursor: not-allowed !important;
 }
diff --git a/src/components/copy-button/copy-button.ts b/src/components/copy-button/copy-button.ts
index d70780f0d..c2bb8f60b 100644
--- a/src/components/copy-button/copy-button.ts
+++ b/src/components/copy-button/copy-button.ts
@@ -193,7 +193,7 @@ export default class WaCopyButton extends WebAwesomeElement {
   render() {
     return html`
       <button
-        class="copy-button__button"
+        class="button"
         part="button"
         type="button"
         id="copy-button"
diff --git a/src/components/dialog/dialog.css b/src/components/dialog/dialog.css
index 6a56a0980..b4004d43b 100644
--- a/src/components/dialog/dialog.css
+++ b/src/components/dialog/dialog.css
@@ -68,7 +68,7 @@
   opacity: 1;
 }
 
-.dialog__header {
+.header {
   flex: 0 0 auto;
   display: flex;
   flex-wrap: nowrap;
@@ -76,7 +76,7 @@
   padding-block-end: 0;
 }
 
-.dialog__title {
+.title {
   align-self: center;
   flex: 1 1 auto;
   font-family: inherit;
@@ -86,7 +86,7 @@
   margin: 0;
 }
 
-.dialog__header-actions {
+.header-actions {
   align-self: start;
   display: flex;
   flex-shrink: 0;
@@ -96,15 +96,15 @@
   padding-inline-start: var(--spacing);
 }
 
-.dialog__header-actions wa-icon-button,
-.dialog__header-actions ::slotted(wa-icon-button) {
+.header-actions wa-icon-button,
+.header-actions ::slotted(wa-icon-button) {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   font-size: var(--wa-font-size-m);
 }
 
-.dialog__body {
+.body {
   flex: 1 1 auto;
   display: block;
   padding: var(--spacing);
@@ -112,7 +112,7 @@
   -webkit-overflow-scrolling: touch;
 }
 
-.dialog__footer {
+.footer {
   flex: 0 0 auto;
   display: flex;
   flex-wrap: wrap;
@@ -122,7 +122,7 @@
   padding-block-start: 0;
 }
 
-.dialog__footer ::slotted(wa-button:not(:first-of-type)) {
+.footer ::slotted(wa-button:not(:first-of-type)) {
   margin-inline-start: var(--wa-spacing-xs);
 }
 
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index 35d3463e1..9fbefabf5 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -236,17 +236,17 @@ export default class WaDialog extends WebAwesomeElement {
       >
         ${this.withHeader
           ? html`
-              <header part="header" class="dialog__header">
-                <h2 part="title" class="dialog__title" id="title">
+              <header part="header" class="header">
+                <h2 part="title" class="title" id="title">
                   <!-- If there's no label, use an invisible character to prevent the header from collapsing -->
                   <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
                 </h2>
-                <div part="header-actions" class="dialog__header-actions">
+                <div part="header-actions" class="header-actions">
                   <slot name="header-actions"></slot>
                   <wa-icon-button
                     part="close-button"
                     exportparts="base:close-button__base"
-                    class="dialog__close"
+                    class="close"
                     name="xmark"
                     label=${this.localize.term('close')}
                     library="system"
@@ -258,11 +258,11 @@ export default class WaDialog extends WebAwesomeElement {
             `
           : ''}
 
-        <div part="body" class="dialog__body"><slot></slot></div>
+        <div part="body" class="body"><slot></slot></div>
 
         ${this.withFooter
           ? html`
-              <footer part="footer" class="dialog__footer">
+              <footer part="footer" class="footer">
                 <slot name="footer"></slot>
               </footer>
             `
diff --git a/src/components/drawer/drawer.css b/src/components/drawer/drawer.css
index 6ea217750..400bad8c3 100644
--- a/src/components/drawer/drawer.css
+++ b/src/components/drawer/drawer.css
@@ -133,14 +133,14 @@
   height: 100%;
 }
 
-.drawer__header {
+.header {
   display: flex;
   flex-wrap: nowrap;
   padding: var(--spacing);
   padding-block-end: 0;
 }
 
-.drawer__title {
+.title {
   align-self: center;
   flex: 1 1 auto;
   font: inherit;
@@ -150,7 +150,7 @@
   margin: 0;
 }
 
-.drawer__header-actions {
+.header-actions {
   align-self: start;
   display: flex;
   flex-shrink: 0;
@@ -160,15 +160,15 @@
   padding-inline-start: var(--spacing);
 }
 
-.drawer__header-actions wa-icon-button,
-.drawer__header-actions ::slotted(wa-icon-button) {
+.header-actions wa-icon-button,
+.header-actions ::slotted(wa-icon-button) {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   font-size: var(--wa-font-size-m);
 }
 
-.drawer__body {
+.body {
   flex: 1 1 auto;
   display: block;
   padding: var(--spacing);
@@ -176,7 +176,7 @@
   -webkit-overflow-scrolling: touch;
 }
 
-.drawer__footer {
+.footer {
   display: flex;
   flex-wrap: wrap;
   gap: var(--wa-space-xs);
@@ -185,7 +185,7 @@
   padding-block-start: 0;
 }
 
-.drawer__footer ::slotted(wa-button:not(:last-of-type)) {
+.footer ::slotted(wa-button:not(:last-of-type)) {
   margin-inline-end: var(--wa-spacing-xs);
 }
 
diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts
index e61396f6f..28345b43f 100644
--- a/src/components/drawer/drawer.ts
+++ b/src/components/drawer/drawer.ts
@@ -253,17 +253,17 @@ export default class WaDrawer extends WebAwesomeElement {
       >
         ${this.withHeader
           ? html`
-              <header part="header" class="drawer__header">
-                <h2 part="title" class="drawer__title" id="title">
+              <header part="header" class="header">
+                <h2 part="title" class="title" id="title">
                   <!-- If there's no label, use an invisible character to prevent the header from collapsing -->
                   <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
                 </h2>
-                <div part="header-actions" class="drawer__header-actions">
+                <div part="header-actions" class="header-actions">
                   <slot name="header-actions"></slot>
                   <wa-icon-button
                     part="close-button"
                     exportparts="base:close-button__base"
-                    class="drawer__close"
+                    class="close"
                     name="xmark"
                     label=${this.localize.term('close')}
                     library="system"
@@ -275,11 +275,11 @@ export default class WaDrawer extends WebAwesomeElement {
             `
           : ''}
 
-        <div part="body" class="drawer__body"><slot></slot></div>
+        <div part="body" class="body"><slot></slot></div>
 
         ${this.withFooter
           ? html`
-              <footer part="footer" class="drawer__footer">
+              <footer part="footer" class="footer">
                 <slot name="footer"></slot>
               </footer>
             `
diff --git a/src/components/dropdown/dropdown.css b/src/components/dropdown/dropdown.css
index f47fb4347..eef5d4788 100644
--- a/src/components/dropdown/dropdown.css
+++ b/src/components/dropdown/dropdown.css
@@ -24,18 +24,18 @@
   transform-origin: left;
 }
 
-.dropdown__trigger {
+.trigger {
   display: block;
 }
 
-.dropdown__panel {
+.panel {
   font: inherit;
   box-shadow: var(--box-shadow);
   border-radius: var(--wa-border-radius-s);
   pointer-events: none;
 }
 
-.dropdown--open .dropdown__panel {
+.dropdown--open .panel {
   display: block;
   pointer-events: all;
 }
diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts
index 84f411075..a41e4b536 100644
--- a/src/components/dropdown/dropdown.ts
+++ b/src/components/dropdown/dropdown.ts
@@ -46,8 +46,8 @@ export default class WaDropdown extends WebAwesomeElement {
   static shadowStyle = styles;
 
   @query('.dropdown') popup: WaPopup;
-  @query('.dropdown__trigger') trigger: HTMLSlotElement;
-  @query('.dropdown__panel') panel: HTMLSlotElement;
+  @query('.trigger') trigger: HTMLSlotElement;
+  @query('.panel') panel: HTMLSlotElement;
 
   private closeWatcher: CloseWatcher | null;
 
@@ -431,7 +431,7 @@ export default class WaDropdown extends WebAwesomeElement {
           name="trigger"
           slot="anchor"
           part="trigger"
-          class="dropdown__trigger"
+          class="trigger"
           @click=${this.handleTriggerClick}
           @keydown=${this.handleTriggerKeyDown}
           @keyup=${this.handleTriggerKeyUp}
@@ -439,7 +439,7 @@ export default class WaDropdown extends WebAwesomeElement {
         ></slot>
 
         <div aria-hidden=${this.open ? 'false' : 'true'} aria-labelledby="dropdown">
-          <slot part="panel" class="dropdown__panel"></slot>
+          <slot part="panel" class="panel"></slot>
         </div>
       </wa-popup>
     `;
diff --git a/src/components/icon-button/icon-button.css b/src/components/icon-button/icon-button.css
index 31e865fae..331153299 100644
--- a/src/components/icon-button/icon-button.css
+++ b/src/components/icon-button/icon-button.css
@@ -44,6 +44,6 @@
   outline-offset: var(--wa-focus-ring-offset);
 }
 
-.icon-button__icon {
+.icon {
   pointer-events: none;
 }
diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts
index 6556c02d4..763316e0e 100644
--- a/src/components/icon-button/icon-button.ts
+++ b/src/components/icon-button/icon-button.ts
@@ -133,7 +133,7 @@ export default class WaIconButton extends WebAwesomeFormAssociatedElement {
         @click=${this.handleClick}
       >
         <wa-icon
-          class="icon-button__icon"
+          class="icon"
           name=${ifDefined(this.name)}
           family=${ifDefined(this.family)}
           variant=${ifDefined(this.variant)}
diff --git a/src/components/icon/library.system.ts b/src/components/icon/library.system.ts
index 35aec1c10..137b597de 100644
--- a/src/components/icon/library.system.ts
+++ b/src/components/icon/library.system.ts
@@ -54,7 +54,7 @@ const systemLibrary: IconLibrary = {
 
         case 'indeterminate':
           return dataUri(`
-            <svg part="indeterminate-icon" class="checkbox__icon" viewBox="0 0 16 16"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"><g stroke="currentColor" stroke-width="2"><g transform="translate(2.285714, 6.857143)"><path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path></g></g></g></svg>
+            <svg part="indeterminate-icon" class="icon" viewBox="0 0 16 16"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"><g stroke="currentColor" stroke-width="2"><g transform="translate(2.285714, 6.857143)"><path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path></g></g></g></svg>
           `);
 
         case 'minus':
diff --git a/src/components/image-comparer/image-comparer.css b/src/components/image-comparer/image-comparer.css
index f65cce522..e6defb515 100644
--- a/src/components/image-comparer/image-comparer.css
+++ b/src/components/image-comparer/image-comparer.css
@@ -14,22 +14,22 @@
   overflow: hidden;
 }
 
-.image-comparer__before,
-.image-comparer__after {
+.before,
+.after {
   display: block;
   pointer-events: none;
 }
 
-.image-comparer__before::slotted(img),
-.image-comparer__after::slotted(img),
-.image-comparer__before::slotted(svg),
-.image-comparer__after::slotted(svg) {
+.before::slotted(img),
+.after::slotted(img),
+.before::slotted(svg),
+.after::slotted(svg) {
   display: block;
   max-width: 100% !important;
   height: auto;
 }
 
-.image-comparer__after {
+.after {
   position: absolute;
   top: 0;
   left: 0;
@@ -37,7 +37,7 @@
   width: 100%;
 }
 
-.image-comparer__divider {
+.divider {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -50,7 +50,7 @@
   cursor: ew-resize;
 }
 
-.image-comparer__handle {
+.handle {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -66,7 +66,7 @@
   z-index: 10;
 }
 
-.image-comparer__handle:focus-visible {
+.handle:focus-visible {
   outline: var(--wa-focus-ring);
   outline-offset: var(--wa-focus-ring-offset);
 }
diff --git a/src/components/image-comparer/image-comparer.ts b/src/components/image-comparer/image-comparer.ts
index 3e82b74d2..76d8840c1 100644
--- a/src/components/image-comparer/image-comparer.ts
+++ b/src/components/image-comparer/image-comparer.ts
@@ -43,7 +43,7 @@ export default class WaImageComparer extends WebAwesomeElement {
   private readonly localize = new LocalizeController(this);
 
   @query('.image-comparer') base: HTMLElement;
-  @query('.image-comparer__handle') handle: HTMLElement;
+  @query('.handle') handle: HTMLElement;
 
   /** The position of the divider as a percentage. */
   @property({ type: Number, reflect: true }) position = 50;
@@ -109,14 +109,14 @@ export default class WaImageComparer extends WebAwesomeElement {
         })}
         @keydown=${this.handleKeyDown}
       >
-        <div class="image-comparer__image">
-          <div part="before" class="image-comparer__before">
+        <div class="image">
+          <div part="before" class="before">
             <slot name="before"></slot>
           </div>
 
           <div
             part="after"
-            class="image-comparer__after"
+            class="after"
             style=${styleMap({
               clipPath: isRtl ? `inset(0 0 0 ${100 - this.position}%)` : `inset(0 ${100 - this.position}% 0 0)`,
             })}
@@ -127,7 +127,7 @@ export default class WaImageComparer extends WebAwesomeElement {
 
         <div
           part="divider"
-          class="image-comparer__divider"
+          class="divider"
           style=${styleMap({
             left: isRtl ? `${100 - this.position}%` : `${this.position}%`,
           })}
@@ -136,7 +136,7 @@ export default class WaImageComparer extends WebAwesomeElement {
         >
           <div
             part="handle"
-            class="image-comparer__handle"
+            class="handle"
             role="scrollbar"
             aria-valuenow=${this.position}
             aria-valuemin="0"
diff --git a/src/components/input/input.css b/src/components/input/input.css
index 4fec1fe57..f9891a329 100644
--- a/src/components/input/input.css
+++ b/src/components/input/input.css
@@ -10,7 +10,7 @@
   position: relative;
 }
 
-.input__control {
+.control {
   flex: 1 1 auto;
   min-width: 0;
   height: 100%;
@@ -25,27 +25,27 @@
   -webkit-appearance: none;
 }
 
-.input__control::-webkit-search-decoration,
-.input__control::-webkit-search-cancel-button,
-.input__control::-webkit-search-results-button,
-.input__control::-webkit-search-results-decoration {
+.control::-webkit-search-decoration,
+.control::-webkit-search-cancel-button,
+.control::-webkit-search-results-button,
+.control::-webkit-search-results-decoration {
   -webkit-appearance: none;
 }
 
-.input__control:focus {
+.control:focus {
   outline: none;
 }
 
-.input__prefix,
-.input__suffix {
+.prefix,
+.suffix {
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
   cursor: default;
 }
 
-.input__prefix ::slotted(wa-icon),
-.input__suffix ::slotted(wa-icon) {
+.prefix ::slotted(wa-icon),
+.suffix ::slotted(wa-icon) {
   color: var(--wa-color-neutral-on-quiet);
 }
 
@@ -56,21 +56,21 @@
   font-size: var(--wa-font-size-s);
   height: var(--wa-form-control-height-s);
 
-  .input__control {
+  .control {
     height: calc(var(--wa-form-control-height-s) - var(--border-width) * 2);
     padding: 0 var(--wa-space-s);
   }
 
-  .input__clear,
-  .input__password-toggle {
+  .clear,
+  .password-toggle {
     width: calc(1em + var(--wa-space-s) * 2);
   }
 
-  .input__prefix ::slotted(*) {
+  .prefix ::slotted(*) {
     margin-inline-start: var(--wa-space-s);
   }
 
-  .input__suffix ::slotted(*) {
+  .suffix ::slotted(*) {
     margin-inline-end: var(--wa-space-s);
   }
 }
@@ -79,21 +79,21 @@
   font-size: var(--wa-font-size-m);
   height: var(--wa-form-control-height-m);
 
-  .input__control {
+  .control {
     height: calc(var(--wa-form-control-height-m) - var(--border-width) * 2);
     padding: 0 var(--wa-space-m);
   }
 
-  .input__clear,
-  .input__password-toggle {
+  .clear,
+  .password-toggle {
     width: calc(1em + var(--wa-space-m) * 2);
   }
 
-  .input__prefix ::slotted(*) {
+  .prefix ::slotted(*) {
     margin-inline-start: var(--wa-space-m);
   }
 
-  .input__suffix ::slotted(*) {
+  .suffix ::slotted(*) {
     margin-inline-end: var(--wa-space-m);
   }
 }
@@ -102,21 +102,21 @@
   font-size: var(--wa-font-size-l);
   height: var(--wa-form-control-height-l);
 
-  .input__control {
+  .control {
     height: calc(var(--wa-form-control-height-l) - var(--border-width) * 2);
     padding: 0 var(--wa-space-l);
   }
 
-  .input__clear,
-  .input__password-toggle {
+  .clear,
+  .password-toggle {
     width: calc(1em + var(--wa-space-l) * 2);
   }
 
-  .input__prefix ::slotted(*) {
+  .prefix ::slotted(*) {
     margin-inline-start: var(--wa-space-l);
   }
 
-  .input__suffix ::slotted(*) {
+  .suffix ::slotted(*) {
     margin-inline-end: var(--wa-space-l);
   }
 }
@@ -125,8 +125,8 @@
    * Clearable + Password Toggle
    */
 
-.input__clear,
-.input__password-toggle {
+.clear,
+.password-toggle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index ed7842180..a2c21163f 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -74,7 +74,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
   private readonly hasSlotController = new HasSlotController(this, 'hint', 'label');
   private readonly localize = new LocalizeController(this);
 
-  @query('.input__control') input: HTMLInputElement;
+  @query('.control') input: HTMLInputElement;
 
   @state() private hasFocus = false;
   @property() title = ''; // make reactive to pass through
@@ -414,12 +414,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
           'form-control--has-label': hasLabel,
         })}
       >
-        <label
-          part="form-control-label"
-          class="form-control__label"
-          for="input"
-          aria-hidden=${hasLabel ? 'false' : 'true'}
-        >
+        <label part="form-control-label" class="label" for="input" aria-hidden=${hasLabel ? 'false' : 'true'}>
           <slot name="label">${this.label}</slot>
         </label>
 
@@ -444,14 +439,14 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
               'input--no-spin-buttons': this.noSpinButtons,
             })}
           >
-            <span part="prefix" class="input__prefix">
+            <span part="prefix" class="prefix">
               <slot name="prefix"></slot>
             </span>
 
             <input
               part="input"
               id="input"
-              class="input__control"
+              class="control"
               type=${this.type === 'password' && this.passwordVisible ? 'text' : this.type}
               title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
               name=${ifDefined(this.name)}
@@ -485,7 +480,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
               ? html`
                   <button
                     part="clear-button"
-                    class="input__clear"
+                    class="clear"
                     type="button"
                     aria-label=${this.localize.term('clearEntry')}
                     @click=${this.handleClearClick}
@@ -501,7 +496,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
               ? html`
                   <button
                     part="password-toggle-button"
-                    class="input__password-toggle"
+                    class="password-toggle"
                     type="button"
                     aria-label=${this.localize.term(this.passwordVisible ? 'hidePassword' : 'showPassword')}
                     @click=${this.handlePasswordToggle}
@@ -522,7 +517,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
                 `
               : ''}
 
-            <span part="suffix" class="input__suffix">
+            <span part="suffix" class="suffix">
               <slot name="suffix"></slot>
             </span>
           </div>
diff --git a/src/components/menu-item/menu-item.css b/src/components/menu-item/menu-item.css
index 2be893157..d95e96d06 100644
--- a/src/components/menu-item/menu-item.css
+++ b/src/components/menu-item/menu-item.css
@@ -50,30 +50,30 @@
   opacity: 1;
 }
 
-.menu-item .menu-item__label {
+.menu-item .label {
   flex: 1 1 auto;
   display: inline-block;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
-.menu-item .menu-item__prefix {
+.menu-item .prefix {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
 }
 
-.menu-item .menu-item__prefix::slotted(*) {
+.menu-item .prefix::slotted(*) {
   margin-inline-end: var(--wa-space-xs);
 }
 
-.menu-item .menu-item__suffix {
+.menu-item .suffix {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
 }
 
-.menu-item .menu-item__suffix::slotted(*) {
+.menu-item .suffix::slotted(*) {
   margin-inline-start: var(--wa-space-xs);
 }
 
@@ -111,8 +111,8 @@
   opacity: 1;
 }
 
-.menu-item .menu-item__check,
-.menu-item .menu-item__chevron {
+.menu-item .check,
+.menu-item .chevron {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
@@ -122,8 +122,8 @@
   visibility: hidden;
 }
 
-.menu-item--checked .menu-item__check,
-.menu-item--has-submenu .menu-item__chevron {
+.menu-item--checked .check,
+.menu-item--has-submenu .chevron {
   visibility: visible;
 }
 
diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts
index 17b8f8009..042859118 100644
--- a/src/components/menu-item/menu-item.ts
+++ b/src/components/menu-item/menu-item.ts
@@ -183,17 +183,17 @@ export default class WaMenuItem extends WebAwesomeElement {
         ?aria-haspopup="${this.isSubmenu()}"
         ?aria-expanded="${isSubmenuExpanded ? true : false}"
       >
-        <span part="checked-icon" class="menu-item__check">
+        <span part="checked-icon" class="check">
           <wa-icon name="check" library="system" variant="solid" aria-hidden="true"></wa-icon>
         </span>
 
-        <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
+        <slot name="prefix" part="prefix" class="prefix"></slot>
 
-        <slot part="label" class="menu-item__label" @slotchange=${this.handleDefaultSlotChange}></slot>
+        <slot part="label" class="label" @slotchange=${this.handleDefaultSlotChange}></slot>
 
-        <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
+        <slot name="suffix" part="suffix" class="suffix"></slot>
 
-        <span part="submenu-icon" class="menu-item__chevron">
+        <span part="submenu-icon" class="chevron">
           <wa-icon
             name=${isRtl ? 'chevron-left' : 'chevron-right'}
             library="system"
diff --git a/src/components/option/option.css b/src/components/option/option.css
index 27a4bbf53..b06dfa4e3 100644
--- a/src/components/option/option.css
+++ b/src/components/option/option.css
@@ -43,12 +43,12 @@
   cursor: not-allowed;
 }
 
-.option__label {
+.label {
   flex: 1 1 auto;
   display: inline-block;
 }
 
-.option .option__check {
+.option .check {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
@@ -58,22 +58,22 @@
   width: var(--wa-space-xl);
 }
 
-.option--selected .option__check {
+.option--selected .check {
   visibility: visible;
 }
 
-.option__prefix,
-.option__suffix {
+.prefix,
+.suffix {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
 }
 
-.option__prefix::slotted(*) {
+.prefix::slotted(*) {
   margin-inline-end: var(--wa-space-xs);
 }
 
-.option__suffix::slotted(*) {
+.suffix::slotted(*) {
   margin-inline-start: var(--wa-space-xs);
 }
 
diff --git a/src/components/option/option.ts b/src/components/option/option.ts
index 9ab6cf61a..dc932fdf3 100644
--- a/src/components/option/option.ts
+++ b/src/components/option/option.ts
@@ -37,7 +37,7 @@ export default class WaOption extends WebAwesomeElement {
   // @ts-expect-error - Controller is currently unused
   private readonly localize = new LocalizeController(this);
 
-  @query('.option__label') defaultSlot: HTMLSlotElement;
+  @query('.label') defaultSlot: HTMLSlotElement;
 
   @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
   @state() selected = false; // the option is selected and has aria-selected="true"
@@ -138,15 +138,15 @@ export default class WaOption extends WebAwesomeElement {
       >
         <wa-icon
           part="checked-icon"
-          class="option__check"
+          class="check"
           name="check"
           library="system"
           variant="solid"
           aria-hidden="true"
         ></wa-icon>
-        <slot part="prefix" name="prefix" class="option__prefix"></slot>
-        <slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot>
-        <slot part="suffix" name="suffix" class="option__suffix"></slot>
+        <slot part="prefix" name="prefix" class="prefix"></slot>
+        <slot part="label" class="label" @slotchange=${this.handleDefaultSlotChange}></slot>
+        <slot part="suffix" name="suffix" class="suffix"></slot>
       </div>
     `;
   }
diff --git a/src/components/popup/popup.css b/src/components/popup/popup.css
index 63f35bbf9..67b6691d5 100644
--- a/src/components/popup/popup.css
+++ b/src/components/popup/popup.css
@@ -29,7 +29,7 @@
   display: none;
 }
 
-.popup__arrow {
+.arrow {
   position: absolute;
   width: calc(var(--arrow-size-diagonal) * 2);
   height: calc(var(--arrow-size-diagonal) * 2);
diff --git a/src/components/popup/popup.ts b/src/components/popup/popup.ts
index acbff3be6..87f384f99 100644
--- a/src/components/popup/popup.ts
+++ b/src/components/popup/popup.ts
@@ -63,7 +63,7 @@ export default class WaPopup extends WebAwesomeElement {
 
   /** A reference to the internal popup container. Useful for animating and styling the popup with JavaScript. */
   @query('.popup') popup: HTMLElement;
-  @query('.popup__arrow') private arrowEl: HTMLElement;
+  @query('.arrow') private arrowEl: HTMLElement;
 
   /**
    * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor
@@ -571,7 +571,7 @@ export default class WaPopup extends WebAwesomeElement {
         })}
       >
         <slot></slot>
-        ${this.arrow ? html`<div part="arrow" class="popup__arrow" role="presentation"></div>` : ''}
+        ${this.arrow ? html`<div part="arrow" class="arrow" role="presentation"></div>` : ''}
       </div>
     `;
   }
diff --git a/src/components/progress-bar/progress-bar.css b/src/components/progress-bar/progress-bar.css
index 36c4a3452..1975e05c8 100644
--- a/src/components/progress-bar/progress-bar.css
+++ b/src/components/progress-bar/progress-bar.css
@@ -17,7 +17,7 @@
   overflow: hidden;
 }
 
-.progress-bar__indicator {
+.indicator {
   height: 100%;
   font: inherit;
   background-color: var(--indicator-color);
@@ -34,12 +34,12 @@
 }
 
 /* Indeterminate */
-.progress-bar--indeterminate .progress-bar__indicator {
+.progress-bar--indeterminate .indicator {
   position: absolute;
   animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
 }
 
-.progress-bar--indeterminate.progress-bar--rtl .progress-bar__indicator {
+.progress-bar--indeterminate.progress-bar--rtl .indicator {
   animation-name: indeterminate-rtl;
 }
 
@@ -49,7 +49,7 @@
     background-color: var(--wa-color-surface-default);
   }
 
-  .progress-bar__indicator {
+  .indicator {
     outline: solid 1px SelectedItem;
     background-color: SelectedItem;
   }
diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts
index 7b8c642e6..2afb478d1 100644
--- a/src/components/progress-bar/progress-bar.ts
+++ b/src/components/progress-bar/progress-bar.ts
@@ -55,8 +55,8 @@ export default class WaProgressBar extends WebAwesomeElement {
         aria-valuemax="100"
         aria-valuenow=${this.indeterminate ? 0 : this.value}
       >
-        <div part="indicator" class="progress-bar__indicator" style=${styleMap({ width: `${this.value}%` })}>
-          ${!this.indeterminate ? html` <slot part="label" class="progress-bar__label"></slot> ` : ''}
+        <div part="indicator" class="indicator" style=${styleMap({ width: `${this.value}%` })}>
+          ${!this.indeterminate ? html` <slot part="label" class="label"></slot> ` : ''}
         </div>
       </div>
     `;
diff --git a/src/components/progress-ring/progress-ring.css b/src/components/progress-ring/progress-ring.css
index 8b9ee3e9f..2331d45e4 100644
--- a/src/components/progress-ring/progress-ring.css
+++ b/src/components/progress-ring/progress-ring.css
@@ -16,15 +16,15 @@
   position: relative;
 }
 
-.progress-ring__image {
+.image {
   width: var(--size);
   height: var(--size);
   rotate: -90deg;
   transform-origin: 50% 50%;
 }
 
-.progress-ring__track,
-.progress-ring__indicator {
+.track,
+.indicator {
   --radius: calc(var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5);
   --circumference: calc(var(--radius) * 2 * 3.141592654);
 
@@ -34,12 +34,12 @@
   cy: calc(var(--size) / 2);
 }
 
-.progress-ring__track {
+.track {
   stroke: var(--track-color);
   stroke-width: var(--track-width);
 }
 
-.progress-ring__indicator {
+.indicator {
   stroke: var(--indicator-color);
   stroke-width: var(--indicator-width);
   stroke-linecap: round;
@@ -49,7 +49,7 @@
   stroke-dashoffset: calc(var(--circumference) - var(--percentage) * var(--circumference));
 }
 
-.progress-ring__label {
+.label {
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts
index d4746523d..4be0449fe 100644
--- a/src/components/progress-ring/progress-ring.ts
+++ b/src/components/progress-ring/progress-ring.ts
@@ -28,7 +28,7 @@ export default class WaProgressRing extends WebAwesomeElement {
 
   private readonly localize = new LocalizeController(this);
 
-  @query('.progress-ring__indicator') indicator: SVGCircleElement;
+  @query('.indicator') indicator: SVGCircleElement;
 
   @state() indicatorOffset: string;
 
@@ -68,12 +68,12 @@ export default class WaProgressRing extends WebAwesomeElement {
         aria-valuenow="${this.value}"
         style="--percentage: ${this.value / 100}"
       >
-        <svg class="progress-ring__image">
-          <circle class="progress-ring__track"></circle>
-          <circle class="progress-ring__indicator" style="stroke-dashoffset: ${this.indicatorOffset}"></circle>
+        <svg class="image">
+          <circle class="track"></circle>
+          <circle class="indicator" style="stroke-dashoffset: ${this.indicatorOffset}"></circle>
         </svg>
 
-        <slot id="label" part="label" class="progress-ring__label"></slot>
+        <slot id="label" part="label" class="label"></slot>
       </div>
     `;
   }
diff --git a/src/components/radio-button/radio-button.test.ts b/src/components/radio-button/radio-button.test.ts
index 972a61a30..324022ce4 100644
--- a/src/components/radio-button/radio-button.test.ts
+++ b/src/components/radio-button/radio-button.test.ts
@@ -43,12 +43,12 @@ describe('<wa-radio-button>', () => {
           radio3.updateComplete,
         ]);
 
-        expect(radio1.classList.contains('wa-button-group__button')).to.be.true;
-        expect(radio1.classList.contains('wa-button-group__button--first')).to.be.true;
-        expect(radio2.classList.contains('wa-button-group__button')).to.be.true;
-        expect(radio2.classList.contains('wa-button-group__button--inner')).to.be.true;
-        expect(radio3.classList.contains('wa-button-group__button')).to.be.true;
-        expect(radio3.classList.contains('wa-button-group__button--last')).to.be.true;
+        expect(radio1.classList.contains('button')).to.be.true;
+        expect(radio1.classList.contains('button--first')).to.be.true;
+        expect(radio2.classList.contains('button')).to.be.true;
+        expect(radio2.classList.contains('button--inner')).to.be.true;
+        expect(radio3.classList.contains('button')).to.be.true;
+        expect(radio3.classList.contains('button--last')).to.be.true;
       });
     });
   }
diff --git a/src/components/radio-group/radio-group.css b/src/components/radio-group/radio-group.css
index b3b244f0a..e66a59844 100644
--- a/src/components/radio-group/radio-group.css
+++ b/src/components/radio-group/radio-group.css
@@ -9,11 +9,11 @@
   margin: 0;
 }
 
-.form-control__label {
+.label {
   padding: 0;
 }
 
-.radio-group--required .radio-group__label::after {
+.radio-group--required .label::after {
   content: var(--wa-form-control-required-content);
   margin-inline-start: var(--wa-form-control-required-content-offset);
 }
diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index caac4fa05..bc18ee951 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -335,7 +335,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
         <label
           part="form-control-label"
           id="label"
-          class="form-control__label"
+          class="label"
           aria-hidden=${hasLabel ? 'false' : 'true'}
           @click=${this.handleLabelClick}
         >
diff --git a/src/components/radio/radio.css b/src/components/radio/radio.css
index f133a2316..139376ca1 100644
--- a/src/components/radio/radio.css
+++ b/src/components/radio/radio.css
@@ -26,7 +26,7 @@
   cursor: pointer;
 }
 
-.radio__checked-icon {
+.checked-icon {
   display: flex;
   fill: currentColor;
   width: var(--toggle-size);
@@ -34,7 +34,7 @@
   scale: var(--checked-icon-scale);
 }
 
-.radio__control {
+.control {
   flex: 0 0 auto;
   position: relative;
   display: flex;
@@ -56,7 +56,7 @@
     color var(--wa-transition-normal) var(--wa-transition-easing);
 }
 
-.radio__input {
+.input {
   position: absolute;
   opacity: 0;
   padding: 0;
@@ -65,14 +65,14 @@
 }
 
 /* Checked */
-.radio--checked .radio__control {
+.radio--checked .control {
   color: var(--checked-icon-color);
   border-color: var(--border-color-checked);
   background-color: var(--background-color-checked);
 }
 
 /* Checked + focus */
-:host(:focus-visible) .radio__control {
+:host(:focus-visible) .control {
   outline: var(--wa-focus-ring);
   outline-offset: var(--wa-focus-ring-offset);
 }
@@ -88,7 +88,7 @@
   opacity: 0;
 }
 
-.radio__label {
+.label {
   display: inline-block;
   color: var(--wa-form-control-value-color);
   line-height: var(--toggle-size);
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index de346abc0..c01256333 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -128,22 +128,17 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
           'radio--disabled': this.disabled,
         })}
       >
-        <span part="control" class="radio__control">
+        <span part="control" class="control">
           ${this.checked
             ? html`
-                <svg
-                  viewBox="0 0 16 16"
-                  xmlns="http://www.w3.org/2000/svg"
-                  part="checked-icon"
-                  class="radio__checked-icon"
-                >
+                <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" part="checked-icon" class="checked-icon">
                   <circle cx="8" cy="8" r="8" />
                 </svg>
               `
             : ''}
         </span>
 
-        <slot part="label" class="radio__label"></slot>
+        <slot part="label" class="label"></slot>
       </span>
     `;
   }
diff --git a/src/components/range/range.css b/src/components/range/range.css
index 58e99ad23..b0a617692 100644
--- a/src/components/range/range.css
+++ b/src/components/range/range.css
@@ -19,7 +19,7 @@
   height: max(var(--thumb-size), var(--track-height));
 }
 
-.range__control {
+.control {
   --percent: 0%;
   -webkit-appearance: none;
   border-radius: calc(var(--track-height) / 2);
@@ -41,7 +41,7 @@
   );
 }
 
-.range--rtl .range__control {
+.range--rtl .control {
   background-image: linear-gradient(
     to left,
     var(--track-color-inactive) 0%,
@@ -54,14 +54,14 @@
 }
 
 /* Webkit */
-.range__control::-webkit-slider-runnable-track {
+.control::-webkit-slider-runnable-track {
   width: 100%;
   height: var(--track-height);
   border-radius: 3px;
   border: none;
 }
 
-.range__control::-webkit-slider-thumb {
+.control::-webkit-slider-thumb {
   width: var(--thumb-size);
   height: var(--thumb-size);
   border-radius: 50%;
@@ -74,27 +74,27 @@
   cursor: pointer;
 }
 
-.range__control:enabled:focus-visible::-webkit-slider-thumb {
+.control:enabled:focus-visible::-webkit-slider-thumb {
   outline: var(--wa-focus-ring);
   outline-offset: var(--wa-focus-ring-offset);
 }
 
-.range__control:enabled::-webkit-slider-thumb:active {
+.control:enabled::-webkit-slider-thumb:active {
   cursor: grabbing;
 }
 
 /* Firefox */
-.range__control::-moz-focus-outer {
+.control::-moz-focus-outer {
   border: 0;
 }
 
-.range__control::-moz-range-progress {
+.control::-moz-range-progress {
   background-color: var(--track-color-active);
   border-radius: 3px;
   height: var(--track-height);
 }
 
-.range__control::-moz-range-track {
+.control::-moz-range-track {
   width: 100%;
   height: var(--track-height);
   background-color: var(--track-color-inactive);
@@ -102,7 +102,7 @@
   border: none;
 }
 
-.range__control::-moz-range-thumb {
+.control::-moz-range-thumb {
   height: var(--thumb-size);
   width: var(--thumb-size);
   border-radius: 50%;
@@ -118,34 +118,34 @@
   cursor: pointer;
 }
 
-.range__control:enabled:focus-visible::-moz-range-thumb {
+.control:enabled:focus-visible::-moz-range-thumb {
   outline: var(--wa-focus-ring);
   outline-offset: var(--wa-focus-ring-offset);
 }
 
-.range__control:enabled::-moz-range-thumb:active {
+.control:enabled::-moz-range-thumb:active {
   cursor: grabbing;
 }
 
 /* States */
-.range__control:focus-visible {
+.control:focus-visible {
   outline: none;
 }
 
-.range__control:disabled {
+.control:disabled {
   opacity: 0.5;
 }
 
-.range__control:disabled::-webkit-slider-thumb {
+.control:disabled::-webkit-slider-thumb {
   cursor: not-allowed;
 }
 
-.range__control:disabled::-moz-range-thumb {
+.control:disabled::-moz-range-thumb {
   cursor: not-allowed;
 }
 
 /* Tooltip output */
-.range__tooltip {
+.tooltip {
   position: absolute;
   z-index: 1000;
   left: 0;
@@ -161,7 +161,7 @@
   pointer-events: none;
 }
 
-.range__tooltip:after {
+.tooltip:after {
   content: '';
   position: absolute;
   width: 0;
@@ -170,16 +170,16 @@
   translate: calc(-1 * var(--wa-tooltip-arrow-size));
 }
 
-.range--tooltip-visible .range__tooltip {
+.range--tooltip-visible .tooltip {
   opacity: 1;
 }
 
 /* Tooltip on top */
-.range--tooltip-top .range__tooltip {
+.range--tooltip-top .tooltip {
   bottom: calc(50% + (var(--thumb-size) / 2) + var(--tooltip-offset));
 }
 
-.range--tooltip-top .range__tooltip:after {
+.range--tooltip-top .tooltip:after {
   border-top: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-fill-loud);
   border-left: var(--wa-tooltip-arrow-size) solid transparent;
   border-right: var(--wa-tooltip-arrow-size) solid transparent;
@@ -187,11 +187,11 @@
 }
 
 /* Tooltip on bottom */
-.range--tooltip-bottom .range__tooltip {
+.range--tooltip-bottom .tooltip {
   top: calc(50% + (var(--thumb-size) / 2) + var(--tooltip-offset));
 }
 
-.range--tooltip-bottom .range__tooltip:after {
+.range--tooltip-bottom .tooltip:after {
   border-bottom: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-fill-loud);
   border-left: var(--wa-tooltip-arrow-size) solid transparent;
   border-right: var(--wa-tooltip-arrow-size) solid transparent;
@@ -199,20 +199,20 @@
 }
 
 @media (forced-colors: active) {
-  .range__control,
-  .range__tooltip {
+  .control,
+  .tooltip {
     border: solid 1px transparent;
   }
 
-  .range__control::-webkit-slider-thumb {
+  .control::-webkit-slider-thumb {
     border: solid 1px transparent;
   }
 
-  .range__control::-moz-range-thumb {
+  .control::-moz-range-thumb {
     border: solid 1px transparent;
   }
 
-  .range__tooltip:after {
+  .tooltip:after {
     display: none;
   }
 }
diff --git a/src/components/range/range.ts b/src/components/range/range.ts
index 83a88e638..949c43eaf 100644
--- a/src/components/range/range.ts
+++ b/src/components/range/range.ts
@@ -60,8 +60,8 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
   private readonly localize = new LocalizeController(this);
   private resizeObserver: ResizeObserver;
 
-  @query('.range__control') input: HTMLInputElement;
-  @query('.range__tooltip') output: HTMLOutputElement | null;
+  @query('.control') input: HTMLInputElement;
+  @query('.tooltip') output: HTMLOutputElement | null;
 
   @state() private hasFocus = false;
   @state() private hasTooltip = false;
@@ -288,12 +288,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
           'form-control--has-label': hasLabel,
         })}
       >
-        <label
-          part="form-control-label"
-          class="form-control__label"
-          for="input"
-          aria-hidden=${hasLabel ? 'false' : 'true'}
-        >
+        <label part="form-control-label" class="label" for="input" aria-hidden=${hasLabel ? 'false' : 'true'}>
           <slot name="label">${this.label}</slot>
         </label>
 
@@ -317,7 +312,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
             <input
               part="input"
               id="input"
-              class="range__control"
+              class="control"
               title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
               type="range"
               name=${ifDefined(this.name)}
@@ -334,7 +329,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
             />
             ${this.tooltip !== 'none' && !this.disabled
               ? html`
-                  <output part="tooltip" class="range__tooltip">
+                  <output part="tooltip" class="tooltip">
                     ${typeof this.tooltipFormatter === 'function' ? this.tooltipFormatter(this.value) : this.value}
                   </output>
                 `
diff --git a/src/components/rating/rating.css b/src/components/rating/rating.css
index d1b0e8271..eb6f6e62e 100644
--- a/src/components/rating/rating.css
+++ b/src/components/rating/rating.css
@@ -23,7 +23,7 @@
   outline-offset: var(--wa-focus-ring-offset);
 }
 
-.rating__symbols {
+.symbols {
   display: inline-flex;
   position: relative;
   font-size: var(--symbol-size);
@@ -33,41 +33,41 @@
   cursor: pointer;
 }
 
-.rating__symbols > * {
+.symbols > * {
   padding: var(--symbol-spacing);
 }
 
-.rating__symbol--active,
-.rating__partial--filled {
+.symbol--active,
+.partial--filled {
   color: var(--symbol-color-active);
 }
 
-.rating__partial-symbol-container {
+.partial-symbol-container {
   position: relative;
 }
 
-.rating__partial--filled {
+.partial--filled {
   position: absolute;
   top: var(--symbol-spacing);
   left: var(--symbol-spacing);
 }
 
-.rating__symbol {
+.symbol {
   transition: scale var(--wa-transition-normal) var(--wa-transition-easing);
   pointer-events: none;
 }
 
-.rating__symbol--hover {
+.symbol--hover {
   scale: 1.2;
 }
 
-.rating--disabled .rating__symbols,
-.rating--readonly .rating__symbols {
+.rating--disabled .symbols,
+.rating--readonly .symbols {
   cursor: default;
 }
 
-.rating--disabled .rating__symbol--hover,
-.rating--readonly .rating__symbol--hover {
+.rating--disabled .symbol--hover,
+.rating--readonly .symbol--hover {
   scale: none;
 }
 
@@ -75,13 +75,13 @@
   opacity: 0.5;
 }
 
-.rating--disabled .rating__symbols {
+.rating--disabled .symbols {
   cursor: not-allowed;
 }
 
 /* Forced colors mode */
 @media (forced-colors: active) {
-  .rating__symbol--active {
+  .symbol--active {
     color: SelectedItem;
   }
 }
diff --git a/src/components/rating/rating.test.ts b/src/components/rating/rating.test.ts
index cf00b3586..b668928fb 100644
--- a/src/components/rating/rating.test.ts
+++ b/src/components/rating/rating.test.ts
@@ -57,7 +57,7 @@ describe('<wa-rating>', () => {
 
       it('should emit wa-change when clicked', async () => {
         const el = await fixture<WaRating>(html` <wa-rating></wa-rating> `);
-        const lastSymbol = el.shadowRoot!.querySelector<HTMLSpanElement>('.rating__symbol:last-child')!;
+        const lastSymbol = el.shadowRoot!.querySelector<HTMLSpanElement>('.symbol:last-child')!;
         const changeHandler = sinon.spy();
 
         el.addEventListener('wa-change', changeHandler);
@@ -85,7 +85,7 @@ describe('<wa-rating>', () => {
 
       it('should not emit wa-change when disabled', async () => {
         const el = await fixture<WaRating>(html` <wa-rating value="5" disabled></wa-rating> `);
-        const lastSymbol = el.shadowRoot!.querySelector<HTMLSpanElement>('.rating__symbol:last-child')!;
+        const lastSymbol = el.shadowRoot!.querySelector<HTMLSpanElement>('.symbol:last-child')!;
         const changeHandler = sinon.spy();
 
         el.addEventListener('wa-change', changeHandler);
diff --git a/src/components/rating/rating.ts b/src/components/rating/rating.ts
index b02d6ea3e..acf6a80f1 100644
--- a/src/components/rating/rating.ts
+++ b/src/components/rating/rating.ts
@@ -251,7 +251,7 @@ export default class WaRating extends WebAwesomeElement {
         @mousemove=${this.handleMouseMove}
         @touchmove=${this.handleTouchMove}
       >
-        <span class="rating__symbols">
+        <span class="symbols">
           ${counter.map(index => {
             if (displayValue > index && displayValue < index + 1) {
               // Users can click the current value to clear the rating. When this happens, we set this.isHovering to
@@ -260,9 +260,9 @@ export default class WaRating extends WebAwesomeElement {
               return html`
                 <span
                   class=${classMap({
-                    rating__symbol: true,
-                    'rating__partial-symbol-container': true,
-                    'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
+                    symbol: true,
+                    'partial-symbol-container': true,
+                    'symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
                   })}
                   role="presentation"
                 >
@@ -276,7 +276,7 @@ export default class WaRating extends WebAwesomeElement {
                     ${unsafeHTML(this.getSymbol(index + 1))}
                   </div>
                   <div
-                    class="rating__partial--filled"
+                    class="partial--filled"
                     style=${styleMap({
                       clipPath: isRtl
                         ? `inset(0 0 0 ${100 - (displayValue - index) * 100}%)`
@@ -292,9 +292,9 @@ export default class WaRating extends WebAwesomeElement {
             return html`
               <span
                 class=${classMap({
-                  rating__symbol: true,
-                  'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
-                  'rating__symbol--active': displayValue >= index + 1,
+                  symbol: true,
+                  'symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
+                  'symbol--active': displayValue >= index + 1,
                 })}
                 role="presentation"
               >
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 13736e957..e6d889833 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -803,7 +803,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
         <label
           id="label"
           part="form-control-label"
-          class="form-control__label"
+          class="label"
           aria-hidden=${hasLabel ? 'false' : 'true'}
           @click=${this.handleLabelClick}
         >
diff --git a/src/components/skeleton/skeleton.css b/src/components/skeleton/skeleton.css
index d60150989..60a5b4b0e 100644
--- a/src/components/skeleton/skeleton.css
+++ b/src/components/skeleton/skeleton.css
@@ -14,19 +14,19 @@
   min-height: 1rem;
 }
 
-.skeleton__indicator {
+.indicator {
   flex: 1 1 auto;
   background: var(--color);
   border-radius: var(--border-radius);
 }
 
-.skeleton--sheen .skeleton__indicator {
+.skeleton--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 .skeleton__indicator {
+.skeleton--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 3dfb8ad6b..0ff53bfa4 100644
--- a/src/components/skeleton/skeleton.test.ts
+++ b/src/components/skeleton/skeleton.test.ts
@@ -15,7 +15,7 @@ describe('<wa-skeleton>', () => {
         const indicator = el.shadowRoot!.querySelector<HTMLElement>('[part~="indicator"]')!;
 
         expect(base.getAttribute('class')).to.equal(' skeleton ');
-        expect(indicator.getAttribute('class')).to.equal('skeleton__indicator');
+        expect(indicator.getAttribute('class')).to.equal('indicator');
       });
 
       it('should set pulse effect by attribute', async () => {
diff --git a/src/components/skeleton/skeleton.ts b/src/components/skeleton/skeleton.ts
index eb71bc618..86b1db15e 100644
--- a/src/components/skeleton/skeleton.ts
+++ b/src/components/skeleton/skeleton.ts
@@ -34,7 +34,7 @@ export default class WaSkeleton extends WebAwesomeElement {
           'skeleton--sheen': this.effect === 'sheen',
         })}
       >
-        <div part="indicator" class="skeleton__indicator"></div>
+        <div part="indicator" class="indicator"></div>
       </div>
     `;
   }
diff --git a/src/components/spinner/spinner.css b/src/components/spinner/spinner.css
index e9e99278a..cc28a04c8 100644
--- a/src/components/spinner/spinner.css
+++ b/src/components/spinner/spinner.css
@@ -22,11 +22,11 @@ svg {
   animation: spin var(--speed) linear infinite;
 }
 
-.spinner__track {
+.track {
   stroke: var(--track-color);
 }
 
-.spinner__indicator {
+.indicator {
   stroke: var(--indicator-color);
   stroke-dasharray: 75, 100;
   stroke-dashoffset: -5;
diff --git a/src/components/spinner/spinner.ts b/src/components/spinner/spinner.ts
index 3ef6fed90..b9a0b0ea9 100644
--- a/src/components/spinner/spinner.ts
+++ b/src/components/spinner/spinner.ts
@@ -33,8 +33,8 @@ export default class WaSpinner extends WebAwesomeElement {
         viewBox="0 0 50 50"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <circle class="spinner__track" cx="25" cy="25" r="20" fill="none" stroke-width="5" />
-        <circle class="spinner__indicator" cx="25" cy="25" r="20" fill="none" stroke-width="5" />
+        <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>
     `;
   }
diff --git a/src/components/switch/switch.css b/src/components/switch/switch.css
index 99acf2288..5f30d6c3c 100644
--- a/src/components/switch/switch.css
+++ b/src/components/switch/switch.css
@@ -38,7 +38,7 @@
   cursor: pointer;
 }
 
-.switch__control {
+.control {
   flex: 0 0 auto;
   position: relative;
   display: flex;
@@ -57,7 +57,7 @@
     border-color var(--wa-transition-normal) var(--wa-transition-easing);
 }
 
-.switch__control .switch__thumb {
+.control .thumb {
   width: var(--thumb-size);
   height: var(--thumb-size);
   background-color: var(--thumb-color);
@@ -71,7 +71,7 @@
     box-shadow var(--wa-transition-normal) var(--wa-transition-easing);
 }
 
-.switch__input {
+.input {
   position: absolute;
   opacity: 0;
   padding: 0;
@@ -80,18 +80,18 @@
 }
 
 /* Focus */
-.switch:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
+.switch:not(.switch--disabled) .input:focus-visible ~ .control .thumb {
   outline: var(--wa-focus-ring);
   outline-offset: var(--wa-focus-ring-offset);
 }
 
 /* Checked */
-.switch--checked .switch__control {
+.switch--checked .control {
   background-color: var(--background-color-checked);
   border-color: var(--border-color-checked);
 }
 
-.switch--checked .switch__control .switch__thumb {
+.switch--checked .control .thumb {
   background-color: var(--thumb-color-checked);
   translate: calc((var(--width) - var(--height)) / 2);
 }
@@ -102,7 +102,7 @@
   cursor: not-allowed;
 }
 
-.switch__label {
+.label {
   display: inline-block;
   line-height: var(--height);
   margin-inline-start: 0.5em;
@@ -110,15 +110,15 @@
   -webkit-user-select: none;
 }
 
-:host([required]) .switch__label::after {
+:host([required]) .label::after {
   content: var(--wa-form-control-required-content);
   color: var(--wa-form-control-required-content-color);
   margin-inline-start: var(--wa-form-control-required-content-offset);
 }
 
 @media (forced-colors: active) {
-  .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb,
-  .switch--checked .switch__control .switch__thumb {
+  .switch.switch--checked:not(.switch--disabled) .control:hover .thumb,
+  .switch--checked .control .thumb {
     background-color: ButtonText;
   }
 }
diff --git a/src/components/switch/switch.test.ts b/src/components/switch/switch.test.ts
index 7b7fa964b..7240712f5 100644
--- a/src/components/switch/switch.test.ts
+++ b/src/components/switch/switch.test.ts
@@ -127,7 +127,7 @@ describe('<wa-switch>', () => {
         //
         const el = await fixture<WaSwitch>(html` <wa-switch></wa-switch> `);
         const label = el.shadowRoot!.querySelector('.switch')!;
-        const input = el.shadowRoot!.querySelector('.switch__input')!;
+        const input = el.shadowRoot!.querySelector('.input')!;
 
         const labelPosition = getComputedStyle(label).position;
         const inputPosition = getComputedStyle(input).position;
diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts
index 4a36a83e9..9abff79f7 100644
--- a/src/components/switch/switch.ts
+++ b/src/components/switch/switch.ts
@@ -259,7 +259,7 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
           })}
         >
           <input
-            class="switch__input"
+            class="input"
             type="checkbox"
             title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
             name=${this.name}
@@ -277,11 +277,11 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
             @keydown=${this.handleKeyDown}
           />
 
-          <span part="control" class="switch__control">
-            <span part="thumb" class="switch__thumb"></span>
+          <span part="control" class="control">
+            <span part="thumb" class="thumb"></span>
           </span>
 
-          <div part="label" class="switch__label">
+          <div part="label" class="label">
             <slot></slot>
           </div>
         </label>
diff --git a/src/components/tab-group/tab-group.css b/src/components/tab-group/tab-group.css
index 9b40f682a..510072ba1 100644
--- a/src/components/tab-group/tab-group.css
+++ b/src/components/tab-group/tab-group.css
@@ -11,26 +11,26 @@
   border-radius: 0;
 }
 
-.tab-group__tabs {
+.tabs {
   display: flex;
   position: relative;
 }
 
-.tab-group__indicator {
+.indicator {
   position: absolute;
 }
 
-.tab-group--has-scroll-controls .tab-group__nav-container {
+.tab-group--has-scroll-controls .nav-container {
   position: relative;
   padding: 0 var(--wa-space-xl);
 }
 
-.tab-group__body {
+.body {
   display: block;
   overflow: auto;
 }
 
-.tab-group__scroll-button {
+.scroll-button {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -40,20 +40,20 @@
   width: var(--wa-space-xl);
 }
 
-.tab-group__scroll-button-start {
+.scroll-button-start {
   left: 0;
 }
 
-.tab-group__scroll-button-end {
+.scroll-button-end {
   right: 0;
 }
 
-.tab-group--rtl .tab-group__scroll-button-start {
+.tab-group--rtl .scroll-button-start {
   left: auto;
   right: 0;
 }
 
-.tab-group--rtl .tab-group__scroll-button-end {
+.tab-group--rtl .scroll-button-end {
   left: 0;
   right: auto;
 }
@@ -66,11 +66,11 @@
   flex-direction: column;
 }
 
-.tab-group--top .tab-group__nav-container {
+.tab-group--top .nav-container {
   order: 1;
 }
 
-.tab-group--top .tab-group__nav {
+.tab-group--top .nav {
   display: flex;
   overflow-x: auto;
 
@@ -79,24 +79,24 @@
 }
 
 /* Hide scrollbar in Chrome/Safari */
-.tab-group--top .tab-group__nav::-webkit-scrollbar {
+.tab-group--top .nav::-webkit-scrollbar {
   width: 0;
   height: 0;
 }
 
-.tab-group--top .tab-group__tabs {
+.tab-group--top .tabs {
   flex: 1 1 auto;
   position: relative;
   flex-direction: row;
   border-bottom: solid var(--track-width) var(--track-color);
 }
 
-.tab-group--top .tab-group__indicator {
+.tab-group--top .indicator {
   bottom: calc(-1 * var(--track-width));
   border-bottom: solid var(--track-width) var(--indicator-color);
 }
 
-.tab-group--top .tab-group__body {
+.tab-group--top .body {
   order: 2;
 }
 
@@ -117,11 +117,11 @@
   flex-direction: column;
 }
 
-.tab-group--bottom .tab-group__nav-container {
+.tab-group--bottom .nav-container {
   order: 2;
 }
 
-.tab-group--bottom .tab-group__nav {
+.tab-group--bottom .nav {
   display: flex;
   overflow-x: auto;
 
@@ -130,24 +130,24 @@
 }
 
 /* Hide scrollbar in Chrome/Safari */
-.tab-group--bottom .tab-group__nav::-webkit-scrollbar {
+.tab-group--bottom .nav::-webkit-scrollbar {
   width: 0;
   height: 0;
 }
 
-.tab-group--bottom .tab-group__tabs {
+.tab-group--bottom .tabs {
   flex: 1 1 auto;
   position: relative;
   flex-direction: row;
   border-top: solid var(--track-width) var(--track-color);
 }
 
-.tab-group--bottom .tab-group__indicator {
+.tab-group--bottom .indicator {
   top: calc(-1 * var(--track-width));
   border-top: solid var(--track-width) var(--indicator-color);
 }
 
-.tab-group--bottom .tab-group__body {
+.tab-group--bottom .body {
   order: 1;
 }
 
@@ -168,27 +168,27 @@
   flex-direction: row;
 }
 
-.tab-group--start .tab-group__nav-container {
+.tab-group--start .nav-container {
   order: 1;
 }
 
-.tab-group--start .tab-group__tabs {
+.tab-group--start .tabs {
   flex: 0 0 auto;
   flex-direction: column;
   border-inline-end: solid var(--track-width) var(--track-color);
 }
 
-.tab-group--start .tab-group__indicator {
+.tab-group--start .indicator {
   right: calc(-1 * var(--track-width));
   border-right: solid var(--track-width) var(--indicator-color);
 }
 
-.tab-group--start.tab-group--rtl .tab-group__indicator {
+.tab-group--start.tab-group--rtl .indicator {
   right: auto;
   left: calc(-1 * var(--track-width));
 }
 
-.tab-group--start .tab-group__body {
+.tab-group--start .body {
   flex: 1 1 auto;
   order: 2;
 }
@@ -210,27 +210,27 @@
   flex-direction: row;
 }
 
-.tab-group--end .tab-group__nav-container {
+.tab-group--end .nav-container {
   order: 2;
 }
 
-.tab-group--end .tab-group__tabs {
+.tab-group--end .tabs {
   flex: 0 0 auto;
   flex-direction: column;
   border-left: solid var(--track-width) var(--track-color);
 }
 
-.tab-group--end .tab-group__indicator {
+.tab-group--end .indicator {
   left: calc(-1 * var(--track-width));
   border-inline-start: solid var(--track-width) var(--indicator-color);
 }
 
-.tab-group--end.tab-group--rtl .tab-group__indicator {
+.tab-group--end.tab-group--rtl .indicator {
   right: calc(-1 * var(--track-width));
   left: auto;
 }
 
-.tab-group--end .tab-group__body {
+.tab-group--end .body {
   flex: 1 1 auto;
   order: 1;
 }
diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts
index 172989fae..f95f8efe5 100644
--- a/src/components/tab-group/tab-group.ts
+++ b/src/components/tab-group/tab-group.ts
@@ -57,8 +57,8 @@ export default class WaTabGroup extends WebAwesomeElement {
   private readonly localize = new LocalizeController(this);
 
   @query('.tab-group') tabGroup: HTMLElement;
-  @query('.tab-group__body') body: HTMLSlotElement;
-  @query('.tab-group__nav') nav: HTMLElement;
+  @query('.body') body: HTMLSlotElement;
+  @query('.nav') nav: HTMLElement;
 
   @state() private hasScrollControls = false;
 
@@ -388,13 +388,13 @@ export default class WaTabGroup extends WebAwesomeElement {
         @click=${this.handleClick}
         @keydown=${this.handleKeyDown}
       >
-        <div class="tab-group__nav-container" part="nav">
+        <div class="nav-container" part="nav">
           ${this.hasScrollControls
             ? html`
                 <wa-icon-button
                   part="scroll-button scroll-button-start"
                   exportparts="base:scroll-button__base"
-                  class="tab-group__scroll-button tab-group__scroll-button-start"
+                  class="scroll-button scroll-button-start"
                   name=${isRtl ? 'chevron-right' : 'chevron-left'}
                   library="system"
                   variant="solid"
@@ -405,8 +405,8 @@ export default class WaTabGroup extends WebAwesomeElement {
             : ''}
 
           <!-- We have a focus listener because in Firefox (and soon to be Chrome) overflow containers are focusable. -->
-          <div class="tab-group__nav" @focus=${() => this.activeTab?.focus({ preventScroll: true })}>
-            <div part="tabs" class="tab-group__tabs" role="tablist">
+          <div class="nav" @focus=${() => this.activeTab?.focus({ preventScroll: true })}>
+            <div part="tabs" class="tabs" role="tablist">
               <slot name="nav" @slotchange=${this.syncTabsAndPanels}></slot>
             </div>
           </div>
@@ -415,8 +415,8 @@ export default class WaTabGroup extends WebAwesomeElement {
             ? html`
                 <wa-icon-button
                   part="scroll-button scroll-button-end"
+                  class="scroll-button scroll-button-end"
                   exportparts="base:scroll-button__base"
-                  class="tab-group__scroll-button tab-group__scroll-button-end"
                   name=${isRtl ? 'chevron-left' : 'chevron-right'}
                   library="system"
                   variant="solid"
@@ -427,7 +427,7 @@ export default class WaTabGroup extends WebAwesomeElement {
             : ''}
         </div>
 
-        <slot part="body" class="tab-group__body" @slotchange=${this.syncTabsAndPanels}></slot>
+        <slot part="body" class="body" @slotchange=${this.syncTabsAndPanels}></slot>
       </div>
     `;
   }
diff --git a/src/components/tab/tab.ts b/src/components/tab/tab.ts
index 259693b8b..79ab023df 100644
--- a/src/components/tab/tab.ts
+++ b/src/components/tab/tab.ts
@@ -19,7 +19,7 @@ let id = 0;
  *
  * @csspart base - The component's base wrapper.
  * @csspart close-button - The close button, an `<wa-icon-button>`.
- * @csspart close-button__base - The close button's exported `base` part.
+ * @csspart base - The close button's exported `base` part.
  */
 @customElement('wa-tab')
 export default class WaTab extends WebAwesomeElement {
diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts
index 5896bd883..ad21c2618 100644
--- a/src/components/tag/tag.ts
+++ b/src/components/tag/tag.ts
@@ -49,7 +49,7 @@ export default class WaTag extends WebAwesomeElement {
 
   render() {
     return html`
-      <slot part="content" class="tag__content"></slot>
+      <slot part="content" class="content"></slot>
 
       ${this.removable
         ? html`
@@ -60,7 +60,7 @@ export default class WaTag extends WebAwesomeElement {
               library="system"
               variant="solid"
               label=${this.localize.term('remove')}
-              class="tag__remove"
+              class="remove"
               @click=${this.handleRemoveClick}
               tabindex="-1"
             ></wa-icon-button>
diff --git a/src/components/textarea/textarea.css b/src/components/textarea/textarea.css
index b370734b4..e7c4139a8 100644
--- a/src/components/textarea/textarea.css
+++ b/src/components/textarea/textarea.css
@@ -35,12 +35,12 @@
   cursor: text;
 }
 
-.textarea__control,
-.textarea__size-adjuster {
+.control,
+.size-adjuster {
   grid-area: 1 / 1 / 2 / 2;
 }
 
-.textarea__size-adjuster {
+.size-adjuster {
   visibility: hidden;
   pointer-events: none;
   opacity: 0;
@@ -69,7 +69,7 @@
   cursor: not-allowed;
 }
 
-.textarea__control {
+.control {
   font: inherit;
   line-height: var(--wa-line-height-expanded);
   color: var(--wa-form-control-value-color);
@@ -80,20 +80,20 @@
   -webkit-appearance: none;
 }
 
-.textarea__control::-webkit-search-decoration,
-.textarea__control::-webkit-search-cancel-button,
-.textarea__control::-webkit-search-results-button,
-.textarea__control::-webkit-search-results-decoration {
+.control::-webkit-search-decoration,
+.control::-webkit-search-cancel-button,
+.control::-webkit-search-results-button,
+.control::-webkit-search-results-decoration {
   -webkit-appearance: none;
 }
 
-.textarea__control::placeholder {
+.control::placeholder {
   color: var(--wa-form-control-placeholder-color);
   user-select: none;
   -webkit-user-select: none;
 }
 
-.textarea__control:focus {
+.control:focus {
   outline: none;
 }
 
@@ -112,7 +112,7 @@
   --padding-inline: var(--wa-space-l);
 }
 
-.textarea__control {
+.control {
   padding: 0.5em var(--padding-inline);
 }
 
@@ -120,15 +120,15 @@
  * Resize types
  */
 
-.textarea--resize-none .textarea__control {
+.textarea--resize-none .control {
   resize: none;
 }
 
-.textarea--resize-vertical .textarea__control {
+.textarea--resize-vertical .control {
   resize: vertical;
 }
 
-.textarea--resize-auto .textarea__control {
+.textarea--resize-auto .control {
   height: auto;
   resize: none;
   overflow-y: hidden;
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index 2af72b01b..c3836b9fc 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -56,8 +56,8 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
   private readonly hasSlotController = new HasSlotController(this, 'hint', 'label');
   private resizeObserver: ResizeObserver;
 
-  @query('.textarea__control') input: HTMLTextAreaElement;
-  @query('.textarea__size-adjuster') sizeAdjuster: HTMLTextAreaElement;
+  @query('.control') input: HTMLTextAreaElement;
+  @query('.size-adjuster') sizeAdjuster: HTMLTextAreaElement;
 
   @state() private hasFocus = false;
   @property() title = ''; // make reactive to pass through
@@ -323,12 +323,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
           'form-control--has-label': hasLabel,
         })}
       >
-        <label
-          part="form-control-label"
-          class="form-control__label"
-          for="input"
-          aria-hidden=${hasLabel ? 'false' : 'true'}
-        >
+        <label part="form-control-label" class="label" for="input" aria-hidden=${hasLabel ? 'false' : 'true'}>
           <slot name="label">${this.label}</slot>
         </label>
 
@@ -353,7 +348,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
             <textarea
               part="textarea"
               id="input"
-              class="textarea__control"
+              class="control"
               title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
               name=${ifDefined(this.name)}
               .value=${live(this.value)}
@@ -378,7 +373,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
             ></textarea>
 
             <!-- This "adjuster" exists to prevent layout shifting. https://github.com/shoelace-style/shoelace/issues/2180 -->
-            <div part="textarea-adjuster" class="textarea__size-adjuster" ?hidden=${this.resize !== 'auto'}></div>
+            <div part="textarea-adjuster" class="size-adjuster" ?hidden=${this.resize !== 'auto'}></div>
           </div>
         </div>
 
diff --git a/src/components/tooltip/tooltip.css b/src/components/tooltip/tooltip.css
index b7a448bc7..80dd00621 100644
--- a/src/components/tooltip/tooltip.css
+++ b/src/components/tooltip/tooltip.css
@@ -35,7 +35,7 @@
   transform-origin: left;
 }
 
-.tooltip__body {
+.body {
   display: block;
   width: max-content;
   max-width: var(--max-width);
diff --git a/src/components/tooltip/tooltip.test.ts b/src/components/tooltip/tooltip.test.ts
index 4978e03ca..f37270b59 100644
--- a/src/components/tooltip/tooltip.test.ts
+++ b/src/components/tooltip/tooltip.test.ts
@@ -153,7 +153,7 @@ describe('<wa-tooltip>', () => {
           <wa-button id="wa-button">Hover Me</wa-button>
         `);
 
-        const tooltipBody = el.shadowRoot!.querySelector('.tooltip__body')!;
+        const tooltipBody = el.shadowRoot!.querySelector('.body')!;
         const userSelect = getComputedStyle(tooltipBody).userSelect || getComputedStyle(tooltipBody).webkitUserSelect;
 
         expect(userSelect).to.equal('none');
diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts
index 2a8f64743..0389ef977 100644
--- a/src/components/tooltip/tooltip.ts
+++ b/src/components/tooltip/tooltip.ts
@@ -50,7 +50,7 @@ export default class WaTooltip extends WebAwesomeElement {
   private closeWatcher: CloseWatcher | null;
 
   @query('slot:not([name])') defaultSlot: HTMLSlotElement;
-  @query('.tooltip__body') body: HTMLElement;
+  @query('.body') body: HTMLElement;
   @query('wa-popup') popup: WaPopup;
 
   /**
@@ -361,7 +361,7 @@ export default class WaTooltip extends WebAwesomeElement {
         hover-bridge
         .anchor=${this.anchor}
       >
-        <div part="body" class="tooltip__body">
+        <div part="body" class="body">
           <slot></slot>
         </div>
       </wa-popup>
diff --git a/src/components/tree-item/tree-item.css b/src/components/tree-item/tree-item.css
index b7691fbda..a84f22163 100644
--- a/src/components/tree-item/tree-item.css
+++ b/src/components/tree-item/tree-item.css
@@ -29,29 +29,29 @@ slot:not([name])::slotted(wa-icon) {
   -webkit-user-select: none;
 }
 
-.tree-item__checkbox {
+.checkbox {
   pointer-events: none;
 }
 
-.tree-item__expand-button,
-.tree-item__checkbox,
-.tree-item__label {
+.expand-button,
+.checkbox,
+.label {
   font: inherit;
   font-size: var(--wa-font-size-m);
 }
 
-.tree-item__checkbox::part(base) {
+.checkbox::part(base) {
   display: flex;
   align-items: center;
 }
 
-.tree-item__indentation {
+.indentation {
   display: block;
   width: 1em;
   flex-shrink: 0;
 }
 
-.tree-item__expand-button {
+.expand-button {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -62,15 +62,15 @@ slot:not([name])::slotted(wa-icon) {
   cursor: pointer;
 }
 
-.tree-item__expand-button {
+.expand-button {
   transition: rotate var(--wa-transition-normal) var(--wa-transition-easing);
 }
 
-.tree-item--expanded .tree-item__expand-button {
+.tree-item--expanded .expand-button {
   rotate: 90deg;
 }
 
-.tree-item--expanded.tree-item--rtl .tree-item__expand-button {
+.tree-item--expanded.tree-item--rtl .expand-button {
   rotate: -90deg;
 }
 
@@ -79,58 +79,58 @@ slot:not([name])::slotted(wa-icon) {
   display: none;
 }
 
-.tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot {
+.tree-item:not(.tree-item--has-expand-button) .expand-icon-slot {
   display: none;
 }
 
-.tree-item__expand-button--visible {
+.expand-button--visible {
   cursor: pointer;
 }
 
-.tree-item__item {
+.item {
   display: flex;
   align-items: center;
   border-inline-start: solid 3px transparent;
 }
 
-.tree-item--disabled .tree-item__item {
+.tree-item--disabled .item {
   opacity: 0.5;
   outline: none;
   cursor: not-allowed;
 }
 
-:host(:focus-visible) .tree-item__item {
+:host(:focus-visible) .item {
   outline: var(--wa-focus-ring);
   outline-offset: var(--wa-focus-ring-offset);
   z-index: 2;
 }
 
-:host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
+:host(:not([aria-disabled='true'])) .tree-item--selected .item {
   background-color: var(--selection-background-color);
   border-inline-start-color: var(--selection-indicator-color);
 }
 
-:host(:not([aria-disabled='true'])) .tree-item__expand-button {
+:host(:not([aria-disabled='true'])) .expand-button {
   color: var(--expand-button-color);
 }
 
-.tree-item__label {
+.label {
   display: flex;
   align-items: center;
   transition: color var(--wa-transition-normal) var(--wa-transition-easing);
 }
 
-.tree-item__children {
+.children {
   display: block;
   font-size: calc(1em + var(--indent-size, var(--wa-space-m)));
 }
 
 /* Indentation lines */
-.tree-item__children {
+.children {
   position: relative;
 }
 
-.tree-item__children::before {
+.children::before {
   content: '';
   position: absolute;
   top: var(--indent-guide-offset);
@@ -140,13 +140,13 @@ slot:not([name])::slotted(wa-icon) {
   z-index: 1;
 }
 
-.tree-item--rtl .tree-item__children::before {
+.tree-item--rtl .children::before {
   left: auto;
   right: 1em;
 }
 
 @media (forced-colors: active) {
-  :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
+  :host(:not([aria-disabled='true'])) .tree-item--selected .item {
     outline: dashed 1px SelectedItem;
   }
 }
diff --git a/src/components/tree-item/tree-item.test.ts b/src/components/tree-item/tree-item.test.ts
index 76a0ee339..427009bb4 100644
--- a/src/components/tree-item/tree-item.test.ts
+++ b/src/components/tree-item/tree-item.test.ts
@@ -38,7 +38,7 @@ describe('<wa-tree-item>', () => {
 
         it('should show the expand button', () => {
           // Arrange
-          const expandButton = parentItem.shadowRoot?.querySelector('.tree-item__expand-button');
+          const expandButton = parentItem.shadowRoot?.querySelector('.expand-button');
 
           // Act
 
@@ -97,7 +97,7 @@ describe('<wa-tree-item>', () => {
           describe('and the item is disabled', () => {
             it('should not expand', async () => {
               // Arrange
-              const expandButton: HTMLElement = parentItem.shadowRoot!.querySelector('.tree-item__expand-button')!;
+              const expandButton: HTMLElement = parentItem.shadowRoot!.querySelector('.expand-button')!;
               parentItem.disabled = true;
 
               // Act
@@ -128,7 +128,7 @@ describe('<wa-tree-item>', () => {
           await leafItem.updateComplete;
 
           // Assert
-          expect(leafItem.shadowRoot?.querySelector('.tree-item__item')?.part.contains('item--selected')).to.be.true;
+          expect(leafItem.shadowRoot?.querySelector('.item')?.part.contains('item--selected')).to.be.true;
         });
       });
 
@@ -148,7 +148,7 @@ describe('<wa-tree-item>', () => {
           await leafItem.updateComplete;
 
           // Assert
-          expect(leafItem.shadowRoot?.querySelector('.tree-item__item')?.part.contains('item--disabled')).to.be.true;
+          expect(leafItem.shadowRoot?.querySelector('.item')?.part.contains('item--disabled')).to.be.true;
         });
       });
 
@@ -159,7 +159,7 @@ describe('<wa-tree-item>', () => {
           await leafItem.updateComplete;
 
           // Assert
-          expect(leafItem.shadowRoot?.querySelector('.tree-item__item')?.part.contains('item--expanded')).to.be.true;
+          expect(leafItem.shadowRoot?.querySelector('.item')?.part.contains('item--expanded')).to.be.true;
         });
       });
 
diff --git a/src/components/tree-item/tree-item.ts b/src/components/tree-item/tree-item.ts
index fb5549ae2..88944dee7 100644
--- a/src/components/tree-item/tree-item.ts
+++ b/src/components/tree-item/tree-item.ts
@@ -97,9 +97,9 @@ export default class WaTreeItem extends WebAwesomeElement {
 
   @query('slot:not([name])') defaultSlot: HTMLSlotElement;
   @query('slot[name=children]') childrenSlot: HTMLSlotElement;
-  @query('.tree-item__item') itemElement: HTMLDivElement;
-  @query('.tree-item__children') childrenContainer: HTMLDivElement;
-  @query('.tree-item__expand-button slot') expandButtonSlot: HTMLSlotElement;
+  @query('.item') itemElement: HTMLDivElement;
+  @query('.children') childrenContainer: HTMLDivElement;
+  @query('.expand-button slot') expandButtonSlot: HTMLSlotElement;
 
   connectedCallback() {
     super.connectedCallback();
@@ -262,25 +262,25 @@ export default class WaTreeItem extends WebAwesomeElement {
           'tree-item--rtl': this.localize.dir() === 'rtl',
         })}"
       >
-        <div class="tree-item__item" part="item">
-          <div class="tree-item__indentation" part="indentation"></div>
+        <div class="item" part="item">
+          <div class="indentation" part="indentation"></div>
 
           <div
             part="expand-button"
             class=${classMap({
-              'tree-item__expand-button': true,
-              'tree-item__expand-button--visible': showExpandButton,
+              'expand-button': true,
+              'expand-button--visible': showExpandButton,
             })}
             aria-hidden="true"
           >
+            <slot class="expand-icon-slot" name="expand-icon">
             ${when(
               this.loading,
               () => html` <wa-spinner part="spinner" exportparts="base:spinner__base"></wa-spinner> `,
             )}
-            <slot class="tree-item__expand-icon-slot" name="expand-icon">
               <wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" variant="solid"></wa-icon>
             </slot>
-            <slot class="tree-item__expand-icon-slot" name="collapse-icon">
+            <slot class="expand-icon-slot" name="collapse-icon">
               <wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" variant="solid"></wa-icon>
             </slot>
           </div>
@@ -297,7 +297,7 @@ export default class WaTreeItem extends WebAwesomeElement {
                     indeterminate-icon:checkbox__indeterminate-icon,
                     label:checkbox__label
                   "
-                class="tree-item__checkbox"
+                class="checkbox"
                 ?disabled="${this.disabled}"
                 ?checked="${live(this.selected)}"
                 ?indeterminate="${this.indeterminate}"
@@ -306,10 +306,10 @@ export default class WaTreeItem extends WebAwesomeElement {
             `,
           )}
 
-          <slot class="tree-item__label" part="label"></slot>
+          <slot class="label" part="label"></slot>
         </div>
 
-        <div class="tree-item__children" part="children" role="group">
+        <div class="children" part="children" role="group">
           <slot name="children" @slotchange="${this.handleChildrenSlotChange}"></slot>
         </div>
       </div>
diff --git a/src/components/tree/tree.test.ts b/src/components/tree/tree.test.ts
index cb9f8e46f..4818c62c9 100644
--- a/src/components/tree/tree.test.ts
+++ b/src/components/tree/tree.test.ts
@@ -434,7 +434,7 @@ describe('<wa-tree>', () => {
             const node = el.children[2] as WaTreeItem;
             await node.updateComplete;
 
-            const expandButton: HTMLElement = node.shadowRoot!.querySelector('.tree-item__expand-button')!;
+            const expandButton: HTMLElement = node.shadowRoot!.querySelector('.expand-button')!;
 
             // Act
             await clickOnElement(expandButton);
diff --git a/src/components/tree/tree.ts b/src/components/tree/tree.ts
index 7ee550030..5fd03c906 100644
--- a/src/components/tree/tree.ts
+++ b/src/components/tree/tree.ts
@@ -292,9 +292,7 @@ export default class WaTree extends WebAwesomeElement {
   private handleClick(event: Event) {
     const target = event.target as WaTreeItem;
     const treeItem = target.closest('wa-tree-item')!;
-    const isExpandButton = event
-      .composedPath()
-      .some((el: HTMLElement) => el?.classList?.contains('tree-item__expand-button'));
+    const isExpandButton = event.composedPath().some((el: HTMLElement) => el?.classList?.contains('expand-button'));
 
     //
     // Don't Do anything if there's no tree item, if it's disabled, or if the click doesn't match the initial target
diff --git a/src/styles/shadow/form-control.css b/src/styles/shadow/form-control.css
index f5d26a220..c87919d0c 100644
--- a/src/styles/shadow/form-control.css
+++ b/src/styles/shadow/form-control.css
@@ -1,9 +1,9 @@
-.form-control .form-control__label {
+.form-control .label {
   display: none;
 }
 
 /* Label */
-.form-control--has-label .form-control__label {
+.form-control--has-label .label {
   display: inline-block;
   color: var(--wa-form-control-label-color);
   font-weight: var(--wa-form-control-label-font-weight);
@@ -23,7 +23,7 @@
   }
 }
 
-:host([required]) .form-control--has-label .form-control__label::after {
+:host([required]) .form-control--has-label .label::after {
   content: var(--wa-form-control-required-content);
   margin-inline-start: var(--wa-form-control-required-content-offset);
   color: var(--wa-form-control-required-content-color);