import styles more efficiently; fixes #1692

docs/pages/resources/changelog.md

@@ -15,6 +15,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 ## Next
 
 - Fixed a bug in `<sl-option>` that caused HTML tags to be included in `getTextLabel()`
+- Refactored component styles to be consumed more efficiently [#1692]
 
 ## 2.13.1
 

scripts/plop/templates/component/component.hbs

@@ -24,7 +24,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --example - An example CSS custom property.
  */
 export default class {{ properCase tag }} extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+    static styles: CSSResultGroup = [componentStyles, styles];
 
   private readonly localize = new LocalizeController(this);
 

src/components/alert/alert.component.ts

@@ -7,6 +7,7 @@ import { LocalizeController } from '../../utilities/localize.js';
 import { property, query } from 'lit/decorators.js';
 import { waitForEvent } from '../../internal/event.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIconButton from '../icon-button/icon-button.component.js';
 import styles from './alert.styles.js';
@@ -40,7 +41,7 @@ const toastStack = Object.assign(document.createElement('div'), { className: 'sl
  * @animation alert.hide - The animation to use when hiding the alert.
  */
 export default class SlAlert extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = { 'sl-icon-button': SlIconButton };
 
   private autoHideTimeout: number;

src/components/alert/alert.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     display: contents;
 

src/components/animated-image/animated-image.component.ts

@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIcon from '../icon/icon.component.js';
 import styles from './animated-image.styles.js';
@@ -26,7 +27,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --icon-size - The size of the play/pause icons.
  */
 export default class SlAnimatedImage extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = { 'sl-icon': SlIcon };
 
   @query('.animated-image__animated') animatedImage: HTMLImageElement;

src/components/animated-image/animated-image.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     --control-box-size: 3rem;
     --icon-size: calc(var(--control-box-size) * 0.625);

src/components/animation/animation.component.ts

@@ -2,6 +2,7 @@ import { animations } from './animations.js';
 import { html } from 'lit';
 import { property, queryAsync } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './animation.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -20,7 +21,7 @@ import type { CSSResultGroup } from 'lit';
  *  animate multiple elements, either wrap them in a single container or use multiple `<sl-animation>` elements.
  */
 export default class SlAnimation extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   private animation?: Animation;
   private hasStarted = false;

src/components/animation/animation.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     display: contents;
   }

src/components/avatar/avatar.component.ts

@@ -2,6 +2,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIcon from '../icon/icon.component.js';
 import styles from './avatar.styles.js';
@@ -25,7 +26,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --size - The size of the avatar.
  */
 export default class SlAvatar extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = {
     'sl-icon': SlIcon
   };

src/components/avatar/avatar.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     display: inline-block;
 

src/components/badge/badge.component.ts

@@ -1,6 +1,7 @@
 import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './badge.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -16,7 +17,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart base - The component's base wrapper.
  */
 export default class SlBadge extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   /** The badge's theme variant. */
   @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';

src/components/badge/badge.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     display: inline-flex;
   }

src/components/breadcrumb-item/breadcrumb-item.component.ts

@@ -3,6 +3,7 @@ import { HasSlotController } from '../../internal/slot.js';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './breadcrumb-item.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -26,7 +27,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart separator - The container that wraps the separator.
  */
 export default class SlBreadcrumbItem extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   private readonly hasSlotController = new HasSlotController(this, 'prefix', 'suffix');
 

src/components/breadcrumb-item/breadcrumb-item.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     display: inline-flex;
   }

src/components/breadcrumb/breadcrumb.component.ts

@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { LocalizeController } from '../../utilities/localize.js';
 import { property, query } from 'lit/decorators.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIcon from '../icon/icon.component.js';
 import styles from './breadcrumb.styles.js';
@@ -21,7 +22,7 @@ import type SlBreadcrumbItem from '../breadcrumb-item/breadcrumb-item.js';
  * @csspart base - The component's base wrapper.
  */
 export default class SlBreadcrumb extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = { 'sl-icon': SlIcon };
 
   private readonly localize = new LocalizeController(this);

src/components/breadcrumb/breadcrumb.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   .breadcrumb {
     display: flex;
     align-items: center;

src/components/button-group/button-group.component.ts

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './button-group.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -15,7 +16,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart base - The component's base wrapper.
  */
 export default class SlButtonGroup extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   @query('slot') defaultSlot: HTMLSlotElement;
 

src/components/button-group/button-group.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     display: inline-block;
   }

src/components/button/button.component.ts

@@ -6,6 +6,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import { property, query, state } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIcon from '../icon/icon.component.js';
 import SlSpinner from '../spinner/spinner.component.js';
@@ -38,7 +39,7 @@ import type { ShoelaceFormControl } from '../../internal/shoelace-element.js';
  * @csspart spinner - The spinner that shows when the button is in the loading state.
  */
 export default class SlButton extends ShoelaceElement implements ShoelaceFormControl {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = {
     'sl-icon': SlIcon,
     'sl-spinner': SlSpinner

src/components/button/button.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     display: inline-block;
     position: relative;

src/components/card/card.component.ts

@@ -1,6 +1,7 @@
 import { classMap } from 'lit/directives/class-map.js';
 import { HasSlotController } from '../../internal/slot.js';
 import { html } from 'lit';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './card.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -28,7 +29,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --padding - The padding to use for the card's sections.
  */
 export default class SlCard extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'image');
 

src/components/card/card.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     --border-color: var(--sl-color-neutral-200);
     --border-radius: var(--sl-border-radius-medium);

src/components/carousel-item/carousel-item.component.ts

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './carousel-item.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -15,7 +16,7 @@ import type { CSSResultGroup } from 'lit';
  *
  */
 export default class SlCarouselItem extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   connectedCallback() {
     super.connectedCallback();

src/components/carousel-item/carousel-item.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     --aspect-ratio: inherit;
 

src/components/carousel/carousel.component.ts

@@ -11,6 +11,7 @@ import { prefersReducedMotion } from '../../internal/animate.js';
 import { range } from 'lit/directives/range.js';
 import { waitForEvent } from '../../internal/event.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIcon from '../icon/icon.component.js';
 import styles from './carousel.styles.js';
@@ -47,7 +48,7 @@ import type SlCarouselItem from '../carousel-item/carousel-item.component.js';
  *  partially visible as a scroll hint.
  */
 export default class SlCarousel extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = { 'sl-icon': SlIcon };
 
   /** When set, allows the user to navigate the carousel in the same direction indefinitely. */

src/components/carousel/carousel.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     --slide-gap: var(--sl-spacing-medium, 1rem);
     --aspect-ratio: 16 / 9;

src/components/checkbox/checkbox.component.ts

@@ -6,6 +6,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { property, query, state } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIcon from '../icon/icon.component.js';
 import styles from './checkbox.styles.js';
@@ -37,7 +38,7 @@ import type { ShoelaceFormControl } from '../../internal/shoelace-element.js';
  * @csspart label - The container that wraps the checkbox's label.
  */
 export default class SlCheckbox extends ShoelaceElement implements ShoelaceFormControl {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = { 'sl-icon': SlIcon };
 
   private readonly formControlController = new FormControlController(this, {

src/components/checkbox/checkbox.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     display: inline-block;
   }

src/components/color-picker/color-picker.component.ts

@@ -10,6 +10,7 @@ import { property, query, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { TinyColor } from '@ctrl/tinycolor';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlButton from '../button/button.component.js';
 import SlButtonGroup from '../button-group/button-group.component.js';
@@ -90,7 +91,7 @@ declare const EyeDropper: EyeDropperConstructor;
  * @cssproperty --swatch-size - The size of each predefined color swatch.
  */
 export default class SlColorPicker extends ShoelaceElement implements ShoelaceFormControl {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   static dependencies = {
     'sl-button-group': SlButtonGroup,

src/components/color-picker/color-picker.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     --grid-width: 280px;
     --grid-height: 200px;

src/components/copy-button/copy-button.component.ts

@@ -3,6 +3,7 @@ import { getAnimation, setDefaultAnimation } from '../../utilities/animation-reg
 import { html } from 'lit';
 import { LocalizeController } from '../../utilities/localize.js';
 import { property, query, state } from 'lit/decorators.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIcon from '../icon/icon.component.js';
 import SlTooltip from '../tooltip/tooltip.component.js';
@@ -41,7 +42,7 @@ import type { CSSResultGroup } from 'lit';
  * @animation copy.out - The animation to use when feedback icons animate out.
  */
 export default class SlCopyButton extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = {
     'sl-icon': SlIcon,
     'sl-tooltip': SlTooltip

src/components/copy-button/copy-button.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     --error-color: var(--sl-color-danger-600);
     --success-color: var(--sl-color-success-600);

src/components/details/details.component.ts

@@ -6,6 +6,7 @@ import { LocalizeController } from '../../utilities/localize.js';
 import { property, query } from 'lit/decorators.js';
 import { waitForEvent } from '../../internal/event.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIcon from '../icon/icon.component.js';
 import styles from './details.styles.js';
@@ -39,7 +40,7 @@ import type { CSSResultGroup } from 'lit';
  * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
  */
 export default class SlDetails extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   static dependencies = {
     'sl-icon': SlIcon

src/components/details/details.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     display: block;
   }

src/components/dialog/dialog.component.ts

@@ -9,6 +9,7 @@ import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll.js
 import { property, query } from 'lit/decorators.js';
 import { waitForEvent } from '../../internal/event.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import Modal from '../../internal/modal.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIconButton from '../icon-button/icon-button.component.js';
@@ -66,7 +67,7 @@ import type { CSSResultGroup } from 'lit';
  *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping.
  */
 export default class SlDialog extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = {
     'sl-icon-button': SlIconButton
   };

src/components/dialog/dialog.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     --width: 31rem;
     --header-spacing: var(--sl-spacing-large);

src/components/divider/divider.component.ts

@@ -1,5 +1,6 @@
 import { property } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './divider.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -15,7 +16,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --spacing - The spacing of the divider.
  */
 export default class SlDivider extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   /** Draws the divider in a vertical orientation. */
   @property({ type: Boolean, reflect: true }) vertical = false;

src/components/divider/divider.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     --color: var(--sl-panel-border-color);
     --width: var(--sl-panel-border-width);

src/components/drawer/drawer.component.ts

@@ -10,6 +10,7 @@ import { property, query } from 'lit/decorators.js';
 import { uppercaseFirstLetter } from '../../internal/string.js';
 import { waitForEvent } from '../../internal/event.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import Modal from '../../internal/modal.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIconButton from '../icon-button/icon-button.component.js';
@@ -74,7 +75,7 @@ import type { CSSResultGroup } from 'lit';
  *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping.
  */
 export default class SlDrawer extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = { 'sl-icon-button': SlIconButton };
 
   private readonly hasSlotController = new HasSlotController(this, 'footer');

src/components/drawer/drawer.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     --size: 25rem;
     --header-spacing: var(--sl-spacing-large);

src/components/dropdown/dropdown.component.ts

@@ -7,6 +7,7 @@ import { LocalizeController } from '../../utilities/localize.js';
 import { property, query } from 'lit/decorators.js';
 import { waitForEvent } from '../../internal/event.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlPopup from '../popup/popup.component.js';
 import styles from './dropdown.styles.js';
@@ -40,7 +41,7 @@ import type SlMenu from '../menu/menu.js';
  * @animation dropdown.hide - The animation to use when hiding the dropdown.
  */
 export default class SlDropdown extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = { 'sl-popup': SlPopup };
 
   @query('.dropdown') popup: SlPopup;

src/components/dropdown/dropdown.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     display: inline-block;
   }

src/components/icon-button/icon-button.component.ts

@@ -2,6 +2,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { html, literal } from 'lit/static-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { property, query, state } from 'lit/decorators.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIcon from '../icon/icon.component.js';
 import styles from './icon-button.styles.js';
@@ -21,7 +22,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart base - The component's base wrapper.
  */
 export default class SlIconButton extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = { 'sl-icon': SlIcon };
 
   @query('.icon-button') button: HTMLButtonElement | HTMLLinkElement;

src/components/icon-button/icon-button.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     display: inline-block;
     color: var(--sl-color-neutral-600);

src/components/icon/icon.component.ts

@@ -3,9 +3,9 @@ import { html } from 'lit';
 import { isTemplateResult } from 'lit/directive-helpers.js';
 import { property, state } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './icon.styles.js';
-
 import type { CSSResultGroup, HTMLTemplateResult } from 'lit';
 
 const CACHEABLE_ERROR = Symbol();
@@ -33,7 +33,7 @@ interface IconSource {
  * @csspart use - The <use> element generated when using `spriteSheet: true`
  */
 export default class SlIcon extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   private initialRender = false;
 

src/components/icon/icon.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     display: inline-block;
     width: 1em;

src/components/image-comparer/image-comparer.component.ts

@@ -6,6 +6,7 @@ import { LocalizeController } from '../../utilities/localize.js';
 import { property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIcon from '../icon/icon.component.js';
 import styles from './image-comparer.styles.js';
@@ -35,7 +36,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --handle-size - The size of the compare handle.
  */
 export default class SlImageComparer extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
   static scopedElement = { 'sl-icon': SlIcon };
 
   private readonly localize = new LocalizeController(this);

src/components/image-comparer/image-comparer.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     --divider-width: 2px;
     --handle-size: 2.5rem;

src/components/include/include.component.ts

@@ -2,6 +2,7 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { requestInclude } from './request.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './include.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -16,7 +17,7 @@ import type { CSSResultGroup } from 'lit';
  * @event {{ status: number }} sl-error - Emitted when the included file fails to load due to an error.
  */
 export default class SlInclude extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   /**
    * The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as

src/components/include/include.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     display: block;
   }

src/components/input/input.component.ts

@@ -8,6 +8,8 @@ import { live } from 'lit/directives/live.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import { property, query, state } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
+import formControlStyles from '../../styles/form-control.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIcon from '../icon/icon.component.js';
 import styles from './input.styles.js';
@@ -49,7 +51,7 @@ import type { ShoelaceFormControl } from '../../internal/shoelace-element.js';
  * @csspart suffix - The container that wraps the suffix.
  */
 export default class SlInput extends ShoelaceElement implements ShoelaceFormControl {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles];
   static dependencies = { 'sl-icon': SlIcon };
 
   private readonly formControlController = new FormControlController(this, {

src/components/input/input.styles.ts

@@ -1,11 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
-import formControlStyles from '../../styles/form-control.styles.js';
 
 export default css`
-  ${componentStyles}
-  ${formControlStyles}
-
   :host {
     display: block;
   }

src/components/menu-item/menu-item.component.ts

@@ -5,6 +5,7 @@ import { LocalizeController } from '../../utilities/localize.js';
 import { property, query } from 'lit/decorators.js';
 import { SubmenuController } from './submenu-controller.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIcon from '../icon/icon.component.js';
 import SlPopup from '../popup/popup.component.js';
@@ -39,7 +40,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu.
  */
 export default class SlMenuItem extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = {
     'sl-icon': SlIcon,
     'sl-popup': SlPopup,

src/components/menu-item/menu-item.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     --submenu-offset: -2px;
 

src/components/menu-label/menu-label.component.ts

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './menu-label.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -14,7 +15,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart base - The component's base wrapper.
  */
 export default class SlMenuLabel extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   render() {
     return html` <slot part="base" class="menu-label"></slot> `;

src/components/menu-label/menu-label.styles.ts

@@ -1,9 +1,5 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
-
 export default css`
-  ${componentStyles}
-
   :host {
     display: block;
   }

src/components/menu/menu.component.ts

@@ -1,9 +1,11 @@
 import { html } from 'lit';
 import { query } from 'lit/decorators.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './menu.styles.js';
 import type { CSSResultGroup } from 'lit';
 import type SlMenuItem from '../menu-item/menu-item.component.js';
+
 export interface MenuSelectEventDetail {
   item: SlMenuItem;
 }
@@ -19,7 +21,7 @@ export interface MenuSelectEventDetail {
  * @event {{ item: SlMenuItem }} sl-select - Emitted when a menu item is selected.
  */
 export default class SlMenu extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   @query('slot') defaultSlot: HTMLSlotElement;
 

src/components/menu/menu.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     display: block;
     position: relative;

src/components/mutation-observer/mutation-observer.component.ts

@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './mutation-observer.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -16,7 +17,7 @@ import type { CSSResultGroup } from 'lit';
  * @slot - The content to watch for mutations.
  */
 export default class SlMutationObserver extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   private mutationObserver: MutationObserver;
 

src/components/mutation-observer/mutation-observer.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     display: contents;
   }

src/components/option/option.component.ts

@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { LocalizeController } from '../../utilities/localize.js';
 import { property, query, state } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIcon from '../icon/icon.component.js';
 import styles from './option.styles.js';
@@ -27,7 +28,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart suffix - The container that wraps the suffix.
  */
 export default class SlOption extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = { 'sl-icon': SlIcon };
 
   private cachedTextLabel: string;

src/components/option/option.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     display: block;
     user-select: none;

src/components/popup/popup.component.ts

@@ -3,6 +3,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit';
 import { offsetParent } from 'composed-offset-position';
 import { property, query } from 'lit/decorators.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './popup.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -45,7 +46,7 @@ function isVirtualElement(e: unknown): e is VirtualElement {
  *  available when using `auto-size`.
  */
 export default class SlPopup extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   private anchorEl: Element | VirtualElement | null;
   private cleanup: ReturnType<typeof autoUpdate> | undefined;

src/components/popup/popup.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     --arrow-color: var(--sl-color-neutral-1000);
     --arrow-size: 6px;

src/components/progress-bar/progress-bar.component.ts

@@ -4,6 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './progress-bar.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -26,7 +27,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --label-color - The color of the label.
  */
 export default class SlProgressBar extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
   private readonly localize = new LocalizeController(this);
 
   /** The current progress as a percentage, 0 to 100. */

src/components/progress-bar/progress-bar.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     --height: 1rem;
     --track-color: var(--sl-color-neutral-200);

src/components/progress-ring/progress-ring.component.ts

@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { LocalizeController } from '../../utilities/localize.js';
 import { property, query, state } from 'lit/decorators.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './progress-ring.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -24,7 +25,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.
  */
 export default class SlProgressRing extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   private readonly localize = new LocalizeController(this);
 

src/components/progress-ring/progress-ring.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     --size: 128px;
     --track-width: 4px;

src/components/qr-code/qr-code.component.ts

@@ -2,6 +2,7 @@ import { html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import QrCreator from 'qr-creator';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './qr-code.styles.js';
@@ -16,7 +17,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart base - The component's base wrapper.
  */
 export default class SlQrCode extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   @query('canvas') canvas: HTMLElement;
 

src/components/qr-code/qr-code.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     display: inline-block;
   }

src/components/radio-button/radio-button.component.ts

@@ -4,6 +4,7 @@ import { html } from 'lit/static-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { property, query, state } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './radio-button.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -29,7 +30,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart suffix - The container that wraps the suffix.
  */
 export default class SlRadioButton extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
 

src/components/radio-group/radio-group.component.ts

@@ -9,6 +9,8 @@ import { HasSlotController } from '../../internal/slot.js';
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
+import formControlStyles from '../../styles/form-control.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlButtonGroup from '../button-group/button-group.component.js';
 import styles from './radio-group.styles.js';
@@ -42,7 +44,7 @@ import type SlRadioButton from '../radio-button/radio-button.js';
  * @csspart button-group__base - The button group's `base` part.
  */
 export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFormControl {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles];
   static dependencies = { 'sl-button-group': SlButtonGroup };
 
   protected readonly formControlController = new FormControlController(this);

src/components/radio-group/radio-group.styles.ts

@@ -1,11 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
-import formControlStyles from '../../styles/form-control.styles.js';
 
 export default css`
-  ${componentStyles}
-  ${formControlStyles}
-
   :host {
     display: block;
   }

src/components/radio/radio.component.ts

@@ -2,6 +2,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIcon from '../icon/icon.component.js';
 import styles from './radio.styles.js';
@@ -27,7 +28,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart label - The container that wraps the radio's label.
  */
 export default class SlRadio extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = { 'sl-icon': SlIcon };
 
   @state() checked = false;

src/components/radio/radio.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     display: block;
   }

src/components/range/range.component.ts

@@ -8,6 +8,8 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
+import formControlStyles from '../../styles/form-control.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './range.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -44,7 +46,7 @@ import type { ShoelaceFormControl } from '../../internal/shoelace-element.js';
  * @cssproperty --track-active-offset - The point of origin of the active track.
  */
 export default class SlRange extends ShoelaceElement implements ShoelaceFormControl {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles];
 
   private readonly formControlController = new FormControlController(this);
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');

src/components/range/range.styles.ts

@@ -1,11 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
-import formControlStyles from '../../styles/form-control.styles.js';
 
 export default css`
-  ${componentStyles}
-  ${formControlStyles}
-
   :host {
     --thumb-size: 20px;
     --tooltip-offset: 10px;

src/components/rating/rating.component.ts

@@ -6,6 +6,7 @@ import { LocalizeController } from '../../utilities/localize.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIcon from '../icon/icon.component.js';
 import styles from './rating.styles.js';
@@ -32,7 +33,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --symbol-spacing - The spacing to use around symbols.
  */
 export default class SlRating extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = { 'sl-icon': SlIcon };
 
   private readonly localize = new LocalizeController(this);

src/components/rating/rating.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     --symbol-color: var(--sl-color-neutral-300);
     --symbol-color-active: var(--sl-color-amber-500);

src/components/resize-observer/resize-observer.component.ts

@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './resize-observer.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -16,7 +17,7 @@ import type { CSSResultGroup } from 'lit';
  * @event {{ entries: ResizeObserverEntry[] }} sl-resize - Emitted when the element is resized.
  */
 export default class SlResizeObserver extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   private resizeObserver: ResizeObserver;
   private observedElements: HTMLElement[] = [];

src/components/resize-observer/resize-observer.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     display: contents;
   }

src/components/select/select.component.ts

@@ -11,6 +11,8 @@ import { scrollIntoView } from '../../internal/scroll.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { waitForEvent } from '../../internal/event.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
+import formControlStyles from '../../styles/form-control.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIcon from '../icon/icon.component.js';
 import SlPopup from '../popup/popup.component.js';
@@ -67,7 +69,7 @@ import type SlOption from '../option/option.component.js';
  * @csspart expand-icon - The container that wraps the expand icon.
  */
 export default class SlSelect extends ShoelaceElement implements ShoelaceFormControl {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles];
   static dependencies = {
     'sl-icon': SlIcon,
     'sl-popup': SlPopup,

src/components/select/select.styles.ts

@@ -1,11 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
-import formControlStyles from '../../styles/form-control.styles.js';
 
 export default css`
-  ${componentStyles}
-  ${formControlStyles}
-
   :host {
     display: block;
   }

src/components/skeleton/skeleton.component.ts

@@ -1,6 +1,7 @@
 import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './skeleton.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -19,7 +20,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --sheen-color - The sheen color when the skeleton is in its loading state.
  */
 export default class SlSkeleton extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   /** Determines which effect the skeleton will use. */
   @property() effect: 'pulse' | 'sheen' | 'none' = 'none';

src/components/skeleton/skeleton.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     --border-radius: var(--sl-border-radius-pill);
     --color: var(--sl-color-neutral-200);

src/components/spinner/spinner.component.ts

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { LocalizeController } from '../../utilities/localize.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './spinner.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -18,7 +19,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
  */
 export default class SlSpinner extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   private readonly localize = new LocalizeController(this);
 

src/components/spinner/spinner.styles.ts

@@ -1,5 +1,4 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 // Resizing a spinner element using anything but font-size will break the animation because the animation uses em units.
 // Therefore, if a spinner is used in a flex container without `flex: none` applied, the spinner can grow/shrink and
@@ -7,8 +6,6 @@ import componentStyles from '../../styles/component.styles.js';
 // according to its actual dimensions.
 
 export default css`
-  ${componentStyles}
-
   :host {
     --track-width: 2px;
     --track-color: rgb(128 128 128 / 25%);

src/components/split-panel/split-panel.component.ts

@@ -5,6 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import { property, query } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './split-panel.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -33,7 +34,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty [--max=100%] - The maximum allowed size of the primary panel.
  */
 export default class SlSplitPanel extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   private cachedPositionInPixels: number;
   private readonly localize = new LocalizeController(this);

src/components/split-panel/split-panel.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     --divider-width: 4px;
     --divider-hit-area: 12px;

src/components/switch/switch.component.ts

@@ -7,6 +7,8 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { property, query, state } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
+import formControlStyles from '../../styles/form-control.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './switch.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -38,7 +40,7 @@ import type { ShoelaceFormControl } from '../../internal/shoelace-element.js';
  * @cssproperty --thumb-size - The size of the thumb.
  */
 export default class SlSwitch extends ShoelaceElement implements ShoelaceFormControl {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles];
 
   private readonly formControlController = new FormControlController(this, {
     value: (control: SlSwitch) => (control.checked ? control.value || 'on' : undefined),

src/components/switch/switch.styles.ts

@@ -1,11 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
-import formControlStyles from '../../styles/form-control.styles.js';
 
 export default css`
-  ${componentStyles}
-  ${formControlStyles}
-
   :host {
     display: inline-block;
   }

src/components/tab-group/tab-group.component.ts

@@ -4,6 +4,7 @@ import { LocalizeController } from '../../utilities/localize.js';
 import { property, query, state } from 'lit/decorators.js';
 import { scrollIntoView } from '../../internal/scroll.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIconButton from '../icon-button/icon-button.component.js';
 import styles from './tab-group.styles.js';
@@ -40,7 +41,7 @@ import type SlTabPanel from '../tab-panel/tab-panel.js';
  * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
  */
 export default class SlTabGroup extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = { 'sl-icon-button': SlIconButton };
 
   private readonly localize = new LocalizeController(this);

src/components/tab-group/tab-group.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     --indicator-color: var(--sl-color-primary-600);
     --track-color: var(--sl-color-neutral-200);

src/components/tab-panel/tab-panel.component.ts

@@ -2,6 +2,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './tab-panel.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -21,7 +22,7 @@ let id = 0;
  * @cssproperty --padding - The tab panel's padding.
  */
 export default class SlTabPanel extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   private readonly attrId = ++id;
   private readonly componentId = `sl-tab-panel-${this.attrId}`;

src/components/tab-panel/tab-panel.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     --padding: 0;
 

src/components/tab/tab.component.ts

@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { LocalizeController } from '../../utilities/localize.js';
 import { property, query } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIconButton from '../icon-button/icon-button.component.js';
 import styles from './tab.styles.js';
@@ -27,7 +28,7 @@ let id = 0;
  * @csspart close-button__base - The close button's exported `base` part.
  */
 export default class SlTab extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = { 'sl-icon-button': SlIconButton };
 
   private readonly localize = new LocalizeController(this);

src/components/tab/tab.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     display: inline-block;
   }

src/components/tag/tag.component.ts

@@ -2,6 +2,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit';
 import { LocalizeController } from '../../utilities/localize.js';
 import { property } from 'lit/decorators.js';
+import componentStyles from '../../styles/component.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIconButton from '../icon-button/icon-button.component.js';
 import styles from './tag.styles.js';
@@ -25,7 +26,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart remove-button__base - The remove button's exported `base` part.
  */
 export default class SlTag extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = { 'sl-icon-button': SlIconButton };
 
   private readonly localize = new LocalizeController(this);

src/components/tag/tag.styles.ts

@@ -1,9 +1,6 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
 
 export default css`
-  ${componentStyles}
-
   :host {
     display: inline-block;
   }

src/components/textarea/textarea.component.ts

@@ -7,6 +7,8 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { property, query, state } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
+import formControlStyles from '../../styles/form-control.styles.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './textarea.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -35,7 +37,7 @@ import type { ShoelaceFormControl } from '../../internal/shoelace-element.js';
  * @csspart textarea - The internal `<textarea>` control.
  */
 export default class SlTextarea extends ShoelaceElement implements ShoelaceFormControl {
-  static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles];
 
   private readonly formControlController = new FormControlController(this, {
     assumeInteractionOn: ['sl-blur', 'sl-input']