diff --git a/scripts/plop/templates/component/component.hbs b/scripts/plop/templates/component/component.hbs
index 5f0d7e8c..d734f227 100644
--- a/scripts/plop/templates/component/component.hbs
+++ b/scripts/plop/templates/component/component.hbs
@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import styles from './{{ tagWithoutPrefix tag }}.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -21,7 +22,7 @@ import styles from './{{ tagWithoutPrefix tag }}.styles';
  */
 @customElement('{{ tag }}')
 export default class {{ properCase tag }} extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   /** An example property. */
   @property() prop = 'example';
diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts
index 5aea02ae..a0a55ed8 100644
--- a/src/components/alert/alert.ts
+++ b/src/components/alert/alert.ts
@@ -9,6 +9,7 @@ import { watch } from '../../internal/watch';
 import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry';
 import { LocalizeController } from '../../utilities/localize';
 import styles from './alert.styles';
+import type { CSSResultGroup } from 'lit';
 
 const toastStack = Object.assign(document.createElement('div'), { className: 'sl-toast-stack' });
 
@@ -40,7 +41,7 @@ const toastStack = Object.assign(document.createElement('div'), { className: 'sl
 
 @customElement('sl-alert')
 export default class SlAlert extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   private autoHideTimeout: number;
   private readonly hasSlotController = new HasSlotController(this, 'icon', 'suffix');
diff --git a/src/components/animated-image/animated-image.ts b/src/components/animated-image/animated-image.ts
index 123ac716..63d1f8ae 100644
--- a/src/components/animated-image/animated-image.ts
+++ b/src/components/animated-image/animated-image.ts
@@ -4,6 +4,7 @@ import '../../components/icon/icon';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import styles from './animated-image.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -23,7 +24,7 @@ import styles from './animated-image.styles';
  */
 @customElement('sl-animated-image')
 export default class SlAnimatedImage extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @state() frozenFrame: string;
   @state() isLoaded = false;
diff --git a/src/components/animation/animation.ts b/src/components/animation/animation.ts
index 7f647c6e..72a91aa7 100644
--- a/src/components/animation/animation.ts
+++ b/src/components/animation/animation.ts
@@ -4,6 +4,7 @@ import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import styles from './animation.styles';
 import { animations } from './animations';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -18,7 +19,7 @@ import { animations } from './animations';
  */
 @customElement('sl-animation')
 export default class SlAnimation extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   private animation?: Animation;
   private hasStarted = false;
diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts
index 485ceb08..852a9203 100644
--- a/src/components/avatar/avatar.ts
+++ b/src/components/avatar/avatar.ts
@@ -4,6 +4,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import '../../components/icon/icon';
 import { watch } from '../../internal/watch';
 import styles from './avatar.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -22,7 +23,7 @@ import styles from './avatar.styles';
  */
 @customElement('sl-avatar')
 export default class SlAvatar extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @state() private hasError = false;
 
diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
index f14a476d..115a8489 100644
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@@ -2,6 +2,7 @@ import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './badge.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -13,7 +14,7 @@ import styles from './badge.styles';
  */
 @customElement('sl-badge')
 export default class SlBadge extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   /** The badge's variant. */
   @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';
diff --git a/src/components/breadcrumb-item/breadcrumb-item.ts b/src/components/breadcrumb-item/breadcrumb-item.ts
index db753261..5dbae30f 100644
--- a/src/components/breadcrumb-item/breadcrumb-item.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.ts
@@ -4,6 +4,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { HasSlotController } from '../../internal/slot';
 import styles from './breadcrumb-item.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -23,7 +24,7 @@ import styles from './breadcrumb-item.styles';
  */
 @customElement('sl-breadcrumb-item')
 export default class SlBreadcrumbItem extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   private readonly hasSlotController = new HasSlotController(this, 'prefix', 'suffix');
 
diff --git a/src/components/breadcrumb/breadcrumb.ts b/src/components/breadcrumb/breadcrumb.ts
index 9716be13..35a07ffc 100644
--- a/src/components/breadcrumb/breadcrumb.ts
+++ b/src/components/breadcrumb/breadcrumb.ts
@@ -4,6 +4,7 @@ import '../../components/icon/icon';
 import { LocalizeController } from '../../utilities/localize';
 import styles from './breadcrumb.styles';
 import type SlBreadcrumbItem from '../../components/breadcrumb-item/breadcrumb-item';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -18,7 +19,7 @@ import type SlBreadcrumbItem from '../../components/breadcrumb-item/breadcrumb-i
  */
 @customElement('sl-breadcrumb')
 export default class SlBreadcrumb extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @query('slot') defaultSlot: HTMLSlotElement;
   @query('slot[name="separator"]') separatorSlot: HTMLSlotElement;
diff --git a/src/components/button-group/button-group.ts b/src/components/button-group/button-group.ts
index a89092ae..6ce752eb 100644
--- a/src/components/button-group/button-group.ts
+++ b/src/components/button-group/button-group.ts
@@ -1,6 +1,7 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import styles from './button-group.styles';
+import type { CSSResultGroup } from 'lit';
 
 const BUTTON_CHILDREN = ['sl-button', 'sl-radio-button'];
 
@@ -14,7 +15,7 @@ const BUTTON_CHILDREN = ['sl-button', 'sl-radio-button'];
  */
 @customElement('sl-button-group')
 export default class SlButtonGroup extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @query('slot') defaultSlot: HTMLSlotElement;
 
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 13e2d2eb..5a21d942 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -9,6 +9,7 @@ import { FormSubmitController } from '../../internal/form';
 import { HasSlotController } from '../../internal/slot';
 import { LocalizeController } from '../../utilities/localize';
 import styles from './button.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -31,7 +32,7 @@ import styles from './button.styles';
  */
 @customElement('sl-button')
 export default class SlButton extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @query('.button') button: HTMLButtonElement | HTMLLinkElement;
 
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
index 4fd597e7..24367e71 100644
--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@@ -3,6 +3,7 @@ import { customElement } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { HasSlotController } from '../../internal/slot';
 import styles from './card.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -26,7 +27,7 @@ import styles from './card.styles';
  */
 @customElement('sl-card')
 export default class SlCard extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'image');
 
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index 58a47c6c..75757f22 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -8,6 +8,7 @@ import { emit } from '../../internal/event';
 import { FormSubmitController } from '../../internal/form';
 import { watch } from '../../internal/watch';
 import styles from './checkbox.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -27,7 +28,7 @@ import styles from './checkbox.styles';
  */
 @customElement('sl-checkbox')
 export default class SlCheckbox extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @query('input[type="checkbox"]') input: HTMLInputElement;
 
diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts
index 995fc7f8..d8254961 100644
--- a/src/components/color-picker/color-picker.ts
+++ b/src/components/color-picker/color-picker.ts
@@ -21,6 +21,7 @@ import { LocalizeController } from '../../utilities/localize';
 import styles from './color-picker.styles';
 import type SlDropdown from '../../components/dropdown/dropdown';
 import type SlInput from '../../components/input/input';
+import type { CSSResultGroup } from 'lit';
 
 const hasEyeDropper = 'EyeDropper' in window;
 
@@ -82,7 +83,7 @@ declare const EyeDropper: EyeDropperConstructor;
  */
 @customElement('sl-color-picker')
 export default class SlColorPicker extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @query('[part="input"]') input: SlInput;
   @query('[part="preview"]') previewButton: HTMLButtonElement;
diff --git a/src/components/details/details.ts b/src/components/details/details.ts
index fd174754..b31dfd89 100644
--- a/src/components/details/details.ts
+++ b/src/components/details/details.ts
@@ -8,6 +8,7 @@ import { watch } from '../../internal/watch';
 import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry';
 import { LocalizeController } from '../../utilities/localize';
 import styles from './details.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -34,7 +35,7 @@ import styles from './details.styles';
  */
 @customElement('sl-details')
 export default class SlDetails extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @query('.details') details: HTMLElement;
   @query('.details__header') header: HTMLElement;
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index 1fd38d25..79b0337c 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -12,6 +12,7 @@ import { watch } from '../../internal/watch';
 import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry';
 import { LocalizeController } from '../../utilities/localize';
 import styles from './dialog.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -57,7 +58,7 @@ import styles from './dialog.styles';
  */
 @customElement('sl-dialog')
 export default class SlDialog extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @query('.dialog') dialog: HTMLElement;
   @query('.dialog__panel') panel: HTMLElement;
diff --git a/src/components/divider/divider.ts b/src/components/divider/divider.ts
index 13288ca0..69fa8d1f 100644
--- a/src/components/divider/divider.ts
+++ b/src/components/divider/divider.ts
@@ -2,6 +2,7 @@ import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { watch } from '../../internal/watch';
 import styles from './divider.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -13,7 +14,7 @@ import styles from './divider.styles';
  */
 @customElement('sl-divider')
 export default class SlDivider extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   /** Draws the divider in a vertical orientation. */
   @property({ type: Boolean, reflect: true }) vertical = false;
diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts
index f376c75d..c73faaad 100644
--- a/src/components/drawer/drawer.ts
+++ b/src/components/drawer/drawer.ts
@@ -13,6 +13,7 @@ import { watch } from '../../internal/watch';
 import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry';
 import { LocalizeController } from '../../utilities/localize';
 import styles from './drawer.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -65,7 +66,7 @@ import styles from './drawer.styles';
  */
 @customElement('sl-drawer')
 export default class SlDrawer extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @query('.drawer') drawer: HTMLElement;
   @query('.drawer__panel') panel: HTMLElement;
diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts
index 20d7d3dc..ee5b7602 100644
--- a/src/components/dropdown/dropdown.ts
+++ b/src/components/dropdown/dropdown.ts
@@ -14,6 +14,7 @@ import type SlButton from '../../components/button/button';
 import type SlIconButton from '../../components/icon-button/icon-button';
 import type SlMenuItem from '../../components/menu-item/menu-item';
 import type SlMenu from '../../components/menu/menu';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -36,7 +37,7 @@ import type SlMenu from '../../components/menu/menu';
  */
 @customElement('sl-dropdown')
 export default class SlDropdown extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @query('.dropdown__trigger') trigger: HTMLElement;
   @query('.dropdown__panel') panel: HTMLElement;
diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts
index d1b02d7a..66d872e9 100644
--- a/src/components/icon-button/icon-button.ts
+++ b/src/components/icon-button/icon-button.ts
@@ -6,6 +6,7 @@ import { html, literal } from 'lit/static-html.js';
 import '../../components/icon/icon';
 import { emit } from '../../internal/event';
 import styles from './icon-button.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -20,7 +21,7 @@ import styles from './icon-button.styles';
  */
 @customElement('sl-icon-button')
 export default class SlIconButton extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @state() private hasFocus = false;
 
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 4882210f..92792b46 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -7,6 +7,7 @@ import { watch } from '../../internal/watch';
 import styles from './icon.styles';
 import { getIconLibrary, unwatchIcon, watchIcon } from './library';
 import { requestIcon } from './request';
+import type { CSSResultGroup } from 'lit';
 
 let parser: DOMParser;
 
@@ -21,7 +22,7 @@ let parser: DOMParser;
  */
 @customElement('sl-icon')
 export default class SlIcon extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @state() private svg = '';
 
diff --git a/src/components/image-comparer/image-comparer.ts b/src/components/image-comparer/image-comparer.ts
index 7b76defc..e20eff51 100644
--- a/src/components/image-comparer/image-comparer.ts
+++ b/src/components/image-comparer/image-comparer.ts
@@ -7,6 +7,7 @@ import { emit } from '../../internal/event';
 import { clamp } from '../../internal/math';
 import { watch } from '../../internal/watch';
 import styles from './image-comparer.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -31,7 +32,7 @@ import styles from './image-comparer.styles';
  */
 @customElement('sl-image-comparer')
 export default class SlImageComparer extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @query('.image-comparer') base: HTMLElement;
   @query('.image-comparer__handle') handle: HTMLElement;
diff --git a/src/components/include/include.ts b/src/components/include/include.ts
index 34527588..d705d93f 100644
--- a/src/components/include/include.ts
+++ b/src/components/include/include.ts
@@ -4,6 +4,7 @@ import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import styles from './include.styles';
 import { requestInclude } from './request';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -14,7 +15,7 @@ import { requestInclude } from './request';
  */
 @customElement('sl-include')
 export default class SlInclude extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   /**
    * The location of the HTML file to include.
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index b56e5650..1aba3c0c 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -11,6 +11,7 @@ import { HasSlotController } from '../../internal/slot';
 import { watch } from '../../internal/watch';
 import { LocalizeController } from '../../utilities/localize';
 import styles from './input.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -45,7 +46,7 @@ import styles from './input.styles';
  */
 @customElement('sl-input')
 export default class SlInput extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @query('.input__control') input: HTMLInputElement;
 
diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts
index e6e09b15..64174119 100644
--- a/src/components/menu-item/menu-item.ts
+++ b/src/components/menu-item/menu-item.ts
@@ -6,6 +6,7 @@ import { emit } from '../../internal/event';
 import { getTextContent } from '../../internal/slot';
 import { watch } from '../../internal/watch';
 import styles from './menu-item.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -28,7 +29,7 @@ import styles from './menu-item.styles';
  */
 @customElement('sl-menu-item')
 export default class SlMenuItem extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   private cachedTextLabel: string;
 
diff --git a/src/components/menu-label/menu-label.ts b/src/components/menu-label/menu-label.ts
index 3f7dfb93..287e612b 100644
--- a/src/components/menu-label/menu-label.ts
+++ b/src/components/menu-label/menu-label.ts
@@ -1,6 +1,7 @@
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import styles from './menu-label.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -12,7 +13,7 @@ import styles from './menu-label.styles';
  */
 @customElement('sl-menu-label')
 export default class SlMenuLabel extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   render() {
     return html`
diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
index f544c45b..4a26a935 100644
--- a/src/components/menu/menu.ts
+++ b/src/components/menu/menu.ts
@@ -4,6 +4,7 @@ import { emit } from '../../internal/event';
 import { getTextContent } from '../../internal/slot';
 import styles from './menu.styles';
 import type SlMenuItem from '../../components/menu-item/menu-item';
+import type { CSSResultGroup } from 'lit';
 export interface MenuSelectEventDetail {
   item: SlMenuItem;
 }
@@ -20,7 +21,7 @@ export interface MenuSelectEventDetail {
  */
 @customElement('sl-menu')
 export default class SlMenu extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @query('.menu') menu: HTMLElement;
   @query('slot') defaultSlot: HTMLSlotElement;
diff --git a/src/components/mutation-observer/mutation-observer.ts b/src/components/mutation-observer/mutation-observer.ts
index c6604b1d..3e1aa986 100644
--- a/src/components/mutation-observer/mutation-observer.ts
+++ b/src/components/mutation-observer/mutation-observer.ts
@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import styles from './mutation-observer.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -14,7 +15,7 @@ import styles from './mutation-observer.styles';
  */
 @customElement('sl-mutation-observer')
 export default class SlMutationObserver extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   private mutationObserver: MutationObserver;
 
diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts
index c18e14d5..8fc21041 100644
--- a/src/components/progress-bar/progress-bar.ts
+++ b/src/components/progress-bar/progress-bar.ts
@@ -5,6 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { LocalizeController } from '../../utilities/localize';
 import styles from './progress-bar.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -23,7 +24,7 @@ import styles from './progress-bar.styles';
  */
 @customElement('sl-progress-bar')
 export default class SlProgressBar extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
   private readonly localize = new LocalizeController(this);
 
   /** The current progress, 0 to 100. */
diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts
index 9209fa71..25395dd4 100644
--- a/src/components/progress-ring/progress-ring.ts
+++ b/src/components/progress-ring/progress-ring.ts
@@ -2,6 +2,7 @@ import { html, LitElement } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { LocalizeController } from '../../utilities/localize';
 import styles from './progress-ring.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -19,7 +20,7 @@ import styles from './progress-ring.styles';
  */
 @customElement('sl-progress-ring')
 export default class SlProgressRing extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
   private readonly localize = new LocalizeController(this);
 
   @query('.progress-ring__indicator') indicator: SVGCircleElement;
diff --git a/src/components/qr-code/qr-code.ts b/src/components/qr-code/qr-code.ts
index b46a04df..cdd644ac 100644
--- a/src/components/qr-code/qr-code.ts
+++ b/src/components/qr-code/qr-code.ts
@@ -4,6 +4,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 import QrCreator from 'qr-creator';
 import { watch } from '../../internal/watch';
 import styles from './qr-code.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -13,7 +14,7 @@ import styles from './qr-code.styles';
  */
 @customElement('sl-qr-code')
 export default class SlQrCode extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @query('canvas') canvas: HTMLElement;
 
diff --git a/src/components/radio-button/radio-button.ts b/src/components/radio-button/radio-button.ts
index 7919325e..7c918b29 100644
--- a/src/components/radio-button/radio-button.ts
+++ b/src/components/radio-button/radio-button.ts
@@ -9,6 +9,7 @@ import { FormSubmitController } from '../../internal/form';
 import { HasSlotController } from '../../internal/slot';
 import { watch } from '../../internal/watch';
 import styles from './radio-button.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -32,7 +33,7 @@ import styles from './radio-button.styles';
  */
 @customElement('sl-radio-button')
 export default class SlRadioButton extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @query('.button') input: HTMLInputElement;
   @query('.hidden-input') hiddenInput: HTMLInputElement;
diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index 3b496ece..8609806a 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -4,6 +4,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import '../../components/button-group/button-group';
 import styles from './radio-group.styles';
 import type SlRadio from '../../components/radio/radio';
+import type { CSSResultGroup } from 'lit';
 
 const RADIO_CHILDREN = ['sl-radio', 'sl-radio-button'];
 
@@ -23,7 +24,7 @@ const RADIO_CHILDREN = ['sl-radio', 'sl-radio-button'];
  */
 @customElement('sl-radio-group')
 export default class SlRadioGroup extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @query('slot:not([name])') defaultSlot: HTMLSlotElement;
 
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index 6f6e1d75..10f90100 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -8,6 +8,7 @@ import { emit } from '../../internal/event';
 import { FormSubmitController } from '../../internal/form';
 import { watch } from '../../internal/watch';
 import styles from './radio.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -26,7 +27,7 @@ import styles from './radio.styles';
  */
 @customElement('sl-radio')
 export default class SlRadio extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @query('.radio__input') input: HTMLInputElement;
 
diff --git a/src/components/range/range.ts b/src/components/range/range.ts
index 94a271f2..8d4a22cc 100644
--- a/src/components/range/range.ts
+++ b/src/components/range/range.ts
@@ -10,6 +10,7 @@ import { HasSlotController } from '../../internal/slot';
 import { watch } from '../../internal/watch';
 import { LocalizeController } from '../../utilities/localize';
 import styles from './range.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -39,7 +40,7 @@ import styles from './range.styles';
  */
 @customElement('sl-range')
 export default class SlRange extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @query('.range__control') input: HTMLInputElement;
   @query('.range__tooltip') output: HTMLOutputElement | null;
diff --git a/src/components/rating/rating.ts b/src/components/rating/rating.ts
index eeb069a7..c0488035 100644
--- a/src/components/rating/rating.ts
+++ b/src/components/rating/rating.ts
@@ -9,6 +9,7 @@ import { clamp } from '../../internal/math';
 import { watch } from '../../internal/watch';
 import { LocalizeController } from '../../utilities/localize';
 import styles from './rating.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -27,7 +28,7 @@ import styles from './rating.styles';
  */
 @customElement('sl-rating')
 export default class SlRating extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @query('.rating') rating: HTMLElement;
 
diff --git a/src/components/resize-observer/resize-observer.ts b/src/components/resize-observer/resize-observer.ts
index 5f642948..2076456f 100644
--- a/src/components/resize-observer/resize-observer.ts
+++ b/src/components/resize-observer/resize-observer.ts
@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import styles from './resize-observer.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -14,7 +15,7 @@ import styles from './resize-observer.styles';
  */
 @customElement('sl-resize-observer')
 export default class SlResizeObserver extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   private resizeObserver: ResizeObserver;
   private observedElements: HTMLElement[] = [];
diff --git a/src/components/responsive-media/responsive-media.ts b/src/components/responsive-media/responsive-media.ts
index eeb02d45..26b50092 100644
--- a/src/components/responsive-media/responsive-media.ts
+++ b/src/components/responsive-media/responsive-media.ts
@@ -2,6 +2,7 @@ import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './responsive-media.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -11,7 +12,7 @@ import styles from './responsive-media.styles';
  */
 @customElement('sl-responsive-media')
 export default class SlResponsiveMedia extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   /**
    * The aspect ratio of the embedded media in the format of `width:height`, e.g. `16:9`, `4:3`, or `1:1`. Ratios not in
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index a62cc793..dbfabecb 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -18,7 +18,7 @@ import type SlIconButton from '../../components/icon-button/icon-button';
 import type SlMenuItem from '../../components/menu-item/menu-item';
 import type { MenuSelectEventDetail } from '../../components/menu/menu';
 import type SlMenu from '../../components/menu/menu';
-import type { TemplateResult } from 'lit';
+import type { TemplateResult, CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -62,7 +62,7 @@ import type { TemplateResult } from 'lit';
  */
 @customElement('sl-select')
 export default class SlSelect extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @query('.select') dropdown: SlDropdown;
   @query('.select__control') control: SlDropdown;
diff --git a/src/components/skeleton/skeleton.ts b/src/components/skeleton/skeleton.ts
index d47810f1..a5f2c04f 100644
--- a/src/components/skeleton/skeleton.ts
+++ b/src/components/skeleton/skeleton.ts
@@ -2,6 +2,7 @@ import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './skeleton.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -16,7 +17,7 @@ import styles from './skeleton.styles';
  */
 @customElement('sl-skeleton')
 export default class SlSkeleton extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   /** Determines which effect the skeleton will use. */
   @property() effect: 'pulse' | 'sheen' | 'none' = 'none';
diff --git a/src/components/spinner/spinner.ts b/src/components/spinner/spinner.ts
index 5b23dd1c..dc6479be 100644
--- a/src/components/spinner/spinner.ts
+++ b/src/components/spinner/spinner.ts
@@ -1,6 +1,7 @@
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import styles from './spinner.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -15,7 +16,7 @@ import styles from './spinner.styles';
  */
 @customElement('sl-spinner')
 export default class SlSpinner extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   render() {
     return html`
diff --git a/src/components/split-panel/split-panel.ts b/src/components/split-panel/split-panel.ts
index 7f6c798f..7183969f 100644
--- a/src/components/split-panel/split-panel.ts
+++ b/src/components/split-panel/split-panel.ts
@@ -7,6 +7,7 @@ import { clamp } from '../../internal/math';
 import { watch } from '../../internal/watch';
 import { LocalizeController } from '../../utilities/localize';
 import styles from './split-panel.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -31,7 +32,7 @@ import styles from './split-panel.styles';
  */
 @customElement('sl-split-panel')
 export default class SlSplitPanel extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   private cachedPositionInPixels: number;
   private readonly localize = new LocalizeController(this);
diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts
index f01383cb..912f4e29 100644
--- a/src/components/switch/switch.ts
+++ b/src/components/switch/switch.ts
@@ -8,6 +8,7 @@ import { emit } from '../../internal/event';
 import { FormSubmitController } from '../../internal/form';
 import { watch } from '../../internal/watch';
 import styles from './switch.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -30,7 +31,7 @@ import styles from './switch.styles';
  */
 @customElement('sl-switch')
 export default class SlSwitch extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @query('input[type="checkbox"]') input: HTMLInputElement;
 
diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts
index d624649a..af0a730c 100644
--- a/src/components/tab-group/tab-group.ts
+++ b/src/components/tab-group/tab-group.ts
@@ -9,6 +9,7 @@ import { LocalizeController } from '../../utilities/localize';
 import styles from './tab-group.styles';
 import type SlTabPanel from '../../components/tab-panel/tab-panel';
 import type SlTab from '../../components/tab/tab';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -38,7 +39,7 @@ import type SlTab from '../../components/tab/tab';
  */
 @customElement('sl-tab-group')
 export default class SlTabGroup extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
   private readonly localize = new LocalizeController(this);
 
   @query('.tab-group') tabGroup: HTMLElement;
diff --git a/src/components/tab-panel/tab-panel.ts b/src/components/tab-panel/tab-panel.ts
index 554489eb..747c69ed 100644
--- a/src/components/tab-panel/tab-panel.ts
+++ b/src/components/tab-panel/tab-panel.ts
@@ -2,6 +2,7 @@ import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { autoIncrement } from '../../internal/auto-increment';
 import styles from './tab-panel.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -15,7 +16,7 @@ import styles from './tab-panel.styles';
  */
 @customElement('sl-tab-panel')
 export default class SlTabPanel extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   private readonly attrId = autoIncrement();
   private readonly componentId = `sl-tab-panel-${this.attrId}`;
diff --git a/src/components/tab/tab.ts b/src/components/tab/tab.ts
index c9114e67..8fd1a352 100644
--- a/src/components/tab/tab.ts
+++ b/src/components/tab/tab.ts
@@ -6,6 +6,7 @@ import { autoIncrement } from '../../internal/auto-increment';
 import { emit } from '../../internal/event';
 import { LocalizeController } from '../../utilities/localize';
 import styles from './tab.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -23,7 +24,7 @@ import styles from './tab.styles';
  */
 @customElement('sl-tab')
 export default class SlTab extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
   private readonly localize = new LocalizeController(this);
 
   @query('.tab') tab: HTMLElement;
diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts
index 672f3d04..285be10f 100644
--- a/src/components/tag/tag.ts
+++ b/src/components/tag/tag.ts
@@ -5,6 +5,7 @@ import '../../components/icon-button/icon-button';
 import { emit } from '../../internal/event';
 import { LocalizeController } from '../../utilities/localize';
 import styles from './tag.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -23,7 +24,7 @@ import styles from './tag.styles';
  */
 @customElement('sl-tag')
 export default class SlTag extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
   private readonly localize = new LocalizeController(this);
 
   /** The tag's variant. */
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index 575a86c8..cfe75a97 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -9,6 +9,7 @@ import { FormSubmitController } from '../../internal/form';
 import { HasSlotController } from '../../internal/slot';
 import { watch } from '../../internal/watch';
 import styles from './textarea.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -31,7 +32,7 @@ import styles from './textarea.styles';
  */
 @customElement('sl-textarea')
 export default class SlTextarea extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @query('.textarea__control') input: HTMLTextAreaElement;
 
diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts
index 6dd75ead..3dc0d2e2 100644
--- a/src/components/tooltip/tooltip.ts
+++ b/src/components/tooltip/tooltip.ts
@@ -8,6 +8,7 @@ import { watch } from '../../internal/watch';
 import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry';
 import { LocalizeController } from '../../utilities/localize';
 import styles from './tooltip.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -32,7 +33,7 @@ import styles from './tooltip.styles';
  */
 @customElement('sl-tooltip')
 export default class SlTooltip extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   @query('.tooltip-positioner') positioner: HTMLElement;
   @query('.tooltip') tooltip: HTMLElement;
diff --git a/src/components/visually-hidden/visually-hidden.ts b/src/components/visually-hidden/visually-hidden.ts
index 36ab6021..768ef622 100644
--- a/src/components/visually-hidden/visually-hidden.ts
+++ b/src/components/visually-hidden/visually-hidden.ts
@@ -1,6 +1,7 @@
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import styles from './visually-hidden.styles';
+import type { CSSResultGroup } from 'lit';
 
 /**
  * @since 2.0
@@ -10,7 +11,7 @@ import styles from './visually-hidden.styles';
  */
 @customElement('sl-visually-hidden')
 export default class SlVisuallyHidden extends LitElement {
-  static styles = styles;
+  static styles: CSSResultGroup = styles;
 
   render() {
     return html` <slot></slot> `;