Added type declaration to styles property for all components (#829)

* Updated the plop template with type for styles property

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';

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');

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;

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;

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;
 

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';

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');
 

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;

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;
 

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;
 

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');
 

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;
 

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;

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;

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;

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;

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;

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;

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;
 

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 = '';
 

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;

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.

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;
 

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;
 

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`

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;

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;
 

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. */

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;

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;
 

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;

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;
 

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;
 

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;

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;
 

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[] = [];

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

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;

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';

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`

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);

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;
 

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;

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}`;

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;

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. */

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;
 

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;

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> `;