fix: use explicit CSSResult[] types for static styles

PiperOrigin-RevId: 609494809

button/elevated-button.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {ElevatedButton} from './internal/elevated-button.js';
@@ -41,7 +42,7 @@ declare global {
  */
 @customElement('md-elevated-button')
 export class MdElevatedButton extends ElevatedButton {
-  static override styles = [
+  static override styles: CSSResult[] = [
     sharedStyles,
     sharedElevationStyles,
     elevatedStyles,

button/filled-button.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {FilledButton} from './internal/filled-button.js';
@@ -39,5 +40,9 @@ declare global {
  */
 @customElement('md-filled-button')
 export class MdFilledButton extends FilledButton {
-  static override styles = [sharedStyles, sharedElevationStyles, filledStyles];
+  static override styles: CSSResult[] = [
+    sharedStyles,
+    sharedElevationStyles,
+    filledStyles,
+  ];
 }

button/filled-tonal-button.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {FilledTonalButton} from './internal/filled-tonal-button.js';
@@ -40,5 +41,9 @@ declare global {
  */
 @customElement('md-filled-tonal-button')
 export class MdFilledTonalButton extends FilledTonalButton {
-  static override styles = [sharedStyles, sharedElevationStyles, tonalStyles];
+  static override styles: CSSResult[] = [
+    sharedStyles,
+    sharedElevationStyles,
+    tonalStyles,
+  ];
 }

button/outlined-button.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {OutlinedButton} from './internal/outlined-button.js';
@@ -40,5 +41,5 @@ declare global {
  */
 @customElement('md-outlined-button')
 export class MdOutlinedButton extends OutlinedButton {
-  static override styles = [sharedStyles, outlinedStyles];
+  static override styles: CSSResult[] = [sharedStyles, outlinedStyles];
 }

button/text-button.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {styles as sharedStyles} from './internal/shared-styles.css.js';
@@ -38,5 +39,5 @@ declare global {
  */
 @customElement('md-text-button')
 export class MdTextButton extends TextButton {
-  static override styles = [sharedStyles, textStyles];
+  static override styles: CSSResult[] = [sharedStyles, textStyles];
 }

checkbox/checkbox.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Checkbox} from './internal/checkbox.js';
@@ -30,5 +31,5 @@ declare global {
  */
 @customElement('md-checkbox')
 export class MdCheckbox extends Checkbox {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }

chips/assist-chip.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {AssistChip} from './internal/assist-chip.js';
@@ -25,5 +26,5 @@ declare global {
  */
 @customElement('md-assist-chip')
 export class MdAssistChip extends AssistChip {
-  static override styles = [sharedStyles, elevatedStyles, styles];
+  static override styles: CSSResult[] = [sharedStyles, elevatedStyles, styles];
 }

chips/chip-set.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {ChipSet} from './internal/chip-set.js';
@@ -23,5 +24,5 @@ declare global {
  */
 @customElement('md-chip-set')
 export class MdChipSet extends ChipSet {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }

chips/filter-chip.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {styles as elevatedStyles} from './internal/elevated-styles.css.js';
@@ -27,7 +28,7 @@ declare global {
  */
 @customElement('md-filter-chip')
 export class MdFilterChip extends FilterChip {
-  static override styles = [
+  static override styles: CSSResult[] = [
     sharedStyles,
     elevatedStyles,
     trailingIconStyles,

chips/input-chip.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {InputChip} from './internal/input-chip.js';
@@ -26,7 +27,7 @@ declare global {
  */
 @customElement('md-input-chip')
 export class MdInputChip extends InputChip {
-  static override styles = [
+  static override styles: CSSResult[] = [
     sharedStyles,
     trailingIconStyles,
     selectableStyles,

chips/suggestion-chip.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {styles as elevatedStyles} from './internal/elevated-styles.css.js';
@@ -25,5 +26,5 @@ declare global {
  */
 @customElement('md-suggestion-chip')
 export class MdSuggestionChip extends SuggestionChip {
-  static override styles = [sharedStyles, elevatedStyles, styles];
+  static override styles: CSSResult[] = [sharedStyles, elevatedStyles, styles];
 }

dialog/dialog.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Dialog} from './internal/dialog.js';
@@ -44,5 +45,5 @@ declare global {
  */
 @customElement('md-dialog')
 export class MdDialog extends Dialog {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }

divider/divider.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Divider} from './internal/divider.js';
@@ -27,5 +28,5 @@ declare global {
  */
 @customElement('md-divider')
 export class MdDivider extends Divider {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }

elevation/elevation.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Elevation} from './internal/elevation.js';
@@ -19,8 +20,11 @@ declare global {
  * The `<md-elevation>` custom element with default styles.
  *
  * Elevation is the relative distance between two surfaces along the z-axis.
+ *
+ * @final
+ * @suppress {visibility}
  */
 @customElement('md-elevation')
 export class MdElevation extends Elevation {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }

fab/branded-fab.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Fab, FabVariant} from './internal/fab.js';
@@ -63,5 +64,5 @@ export class MdBrandedFab extends Fab {
       'small': false,
     };
   }
-  static override styles = [sharedStyles, styles, forcedColors];
+  static override styles: CSSResult[] = [sharedStyles, styles, forcedColors];
 }

fab/fab.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Fab} from './internal/fab.js';
@@ -49,5 +50,5 @@ declare global {
  */
 @customElement('md-fab')
 export class MdFab extends Fab {
-  static override styles = [sharedStyles, styles, forcedColors];
+  static override styles: CSSResult[] = [sharedStyles, styles, forcedColors];
 }

field/filled-field.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {FilledField} from './internal/filled-field.js';
@@ -23,5 +24,5 @@ declare global {
  */
 @customElement('md-filled-field')
 export class MdFilledField extends FilledField {
-  static override styles = [sharedStyles, filledStyles];
+  static override styles: CSSResult[] = [sharedStyles, filledStyles];
 }

field/outlined-field.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {OutlinedField} from './internal/outlined-field.js';
@@ -23,5 +24,5 @@ declare global {
  */
 @customElement('md-outlined-field')
 export class MdOutlinedField extends OutlinedField {
-  static override styles = [sharedStyles, outlinedStyles];
+  static override styles: CSSResult[] = [sharedStyles, outlinedStyles];
 }

focus/md-focus-ring.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {FocusRing} from './internal/focus-ring.js';
@@ -23,5 +24,5 @@ declare global {
  */
 @customElement('md-focus-ring')
 export class MdFocusRing extends FocusRing {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }

icon/icon.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Icon} from './internal/icon.js';
@@ -22,5 +23,5 @@ declare global {
 @customElement('md-icon')
 export class MdIcon extends Icon {
   /** @nocollapse */
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }

iconbutton/filled-icon-button.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {styles} from './internal/filled-styles.css.js';
@@ -30,10 +31,13 @@ declare global {
  * __Example usages:__
  * - Add to Favorites
  * - Print
+ *
+ * @final
+ * @suppress {visibility}
  */
 @customElement('md-filled-icon-button')
 export class MdFilledIconButton extends IconButton {
-  static override styles = [sharedStyles, styles];
+  static override styles: CSSResult[] = [sharedStyles, styles];
 
   protected override getRenderClasses() {
     return {

iconbutton/filled-tonal-icon-button.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {styles} from './internal/filled-tonal-styles.css.js';
@@ -30,10 +31,13 @@ declare global {
  * __Example usages:__
  * - Add to Favorites
  * - Print
+ *
+ * @final
+ * @suppress {visibility}
  */
 @customElement('md-filled-tonal-icon-button')
 export class MdFilledTonalIconButton extends IconButton {
-  static override styles = [sharedStyles, styles];
+  static override styles: CSSResult[] = [sharedStyles, styles];
 
   protected override getRenderClasses() {
     return {

iconbutton/icon-button.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {IconButton} from './internal/icon-button.js';
@@ -30,10 +31,13 @@ declare global {
  * __Example usages:__
  * - Add to Favorites
  * - Print
+ *
+ * @final
+ * @suppress {visibility}
  */
 @customElement('md-icon-button')
 export class MdIconButton extends IconButton {
-  static override styles = [sharedStyles, styles];
+  static override styles: CSSResult[] = [sharedStyles, styles];
 
   protected override getRenderClasses() {
     return {

iconbutton/outlined-icon-button.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {IconButton} from './internal/icon-button.js';
@@ -30,10 +31,13 @@ declare global {
  * __Example usages:__
  * - Add to Favorites
  * - Print
+ *
+ * @final
+ * @suppress {visibility}
  */
 @customElement('md-outlined-icon-button')
 export class MdOutlinedIconButton extends IconButton {
-  static override styles = [sharedStyles, styles];
+  static override styles: CSSResult[] = [sharedStyles, styles];
 
   protected override getRenderClasses() {
     return {

labs/badge/badge.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Badge} from './internal/badge.js';
@@ -21,5 +22,5 @@ declare global {
  */
 @customElement('md-badge')
 export class MdBadge extends Badge {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }

labs/card/elevated-card.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Card} from './internal/card.js';
@@ -22,5 +23,5 @@ declare global {
  */
 @customElement('md-elevated-card')
 export class MdElevatedCard extends Card {
-  static override styles = [sharedStyles, elevatedStyles];
+  static override styles: CSSResult[] = [sharedStyles, elevatedStyles];
 }

labs/card/filled-card.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Card} from './internal/card.js';
@@ -22,5 +23,5 @@ declare global {
  */
 @customElement('md-filled-card')
 export class MdFilledCard extends Card {
-  static override styles = [sharedStyles, filledStyles];
+  static override styles: CSSResult[] = [sharedStyles, filledStyles];
 }

labs/card/outlined-card.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Card} from './internal/card.js';
@@ -22,5 +23,5 @@ declare global {
  */
 @customElement('md-outlined-card')
 export class MdOutlinedCard extends Card {
-  static override styles = [sharedStyles, outlinedStyles];
+  static override styles: CSSResult[] = [sharedStyles, outlinedStyles];
 }

labs/item/item.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Item} from './internal/item.js';
@@ -70,8 +71,11 @@ declare global {
  *   <slot name="end" slot="end"></slot>
  * </md-item>
  * ```
+ *
+ * @final
+ * @suppress {visibility}
  */
 @customElement('md-item')
 export class MdItem extends Item {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }

labs/navigationbar/navigation-bar.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {NavigationBar} from './internal/navigation-bar.js';
@@ -21,5 +22,5 @@ declare global {
  */
 @customElement('md-navigation-bar')
 export class MdNavigationBar extends NavigationBar {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }

labs/navigationtab/navigation-tab.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {NavigationTab} from './internal/navigation-tab.js';
@@ -21,5 +22,5 @@ declare global {
  */
 @customElement('md-navigation-tab')
 export class MdNavigationTab extends NavigationTab {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }

labs/segmentedbutton/outlined-segmented-button.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {OutlinedSegmentedButton} from './internal/outlined-segmented-button.js';
@@ -24,5 +25,5 @@ declare global {
  */
 @customElement('md-outlined-segmented-button')
 export class MdOutlinedSegmentedButton extends OutlinedSegmentedButton {
-  static override styles = [sharedStyles, outlinedStyles];
+  static override styles: CSSResult[] = [sharedStyles, outlinedStyles];
 }

labs/segmentedbuttonset/outlined-segmented-button-set.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {OutlinedSegmentedButtonSet} from './internal/outlined-segmented-button-set.js';
@@ -24,5 +25,5 @@ declare global {
  */
 @customElement('md-outlined-segmented-button-set')
 export class MdOutlinedSegmentedButtonSet extends OutlinedSegmentedButtonSet {
-  static override styles = [sharedStyles, outlinedStyles];
+  static override styles: CSSResult[] = [sharedStyles, outlinedStyles];
 }

list/list-item.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {ListItemEl as ListItem} from './internal/listitem/list-item.js';
@@ -57,5 +58,5 @@ declare global {
  */
 @customElement('md-list-item')
 export class MdListItem extends ListItem {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }

list/list.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {List} from './internal/list.js';
@@ -36,5 +37,5 @@ declare global {
  */
 @customElement('md-list')
 export class MdList extends List {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }

menu/menu-item.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {MenuItemEl} from './internal/menuitem/menu-item.js';
@@ -35,5 +36,5 @@ declare global {
  */
 @customElement('md-menu-item')
 export class MdMenuItem extends MenuItemEl {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }

menu/menu.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Menu} from './internal/menu.js';
@@ -11,7 +12,11 @@ import {styles} from './internal/menu-styles.css.js';
 
 export {type ListItem} from '../list/internal/list-navigation-helpers.js';
 export {type MenuItem} from './internal/controllers/menuItemController.js';
-export {type CloseMenuEvent, FocusState, type Menu} from './internal/controllers/shared.js';
+export {
+  FocusState,
+  type CloseMenuEvent,
+  type Menu,
+} from './internal/controllers/shared.js';
 export {Corner} from './internal/menu.js';
 
 declare global {
@@ -71,5 +76,5 @@ declare global {
  */
 @customElement('md-menu')
 export class MdMenu extends Menu {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }

menu/sub-menu.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {SubMenu} from './internal/submenu/sub-menu.js';
@@ -65,5 +66,5 @@ declare global {
  */
 @customElement('md-sub-menu')
 export class MdSubMenu extends SubMenu {
-  static override styles = styles;
+  static override styles: CSSResult[] = [styles];
 }

progress/circular-progress.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {CircularProgress} from './internal/circular-progress.js';
@@ -24,8 +25,11 @@ declare global {
  * Progress indicators inform users about the status of ongoing processes.
  * - Determinate indicators display how long a process will take.
  * - Indeterminate indicators express an unspecified amount of wait time.
+ *
+ * @final
+ * @suppress {visibility}
  */
 @customElement('md-circular-progress')
 export class MdCircularProgress extends CircularProgress {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }

progress/linear-progress.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {LinearProgress} from './internal/linear-progress.js';
@@ -23,8 +24,11 @@ declare global {
  * Progress indicators inform users about the status of ongoing processes.
  * - Determinate indicators display how long a process will take.
  * - Indeterminate indicators express an unspecified amount of wait time.
+ *
+ * @final
+ * @suppress {visibility}
  */
 @customElement('md-linear-progress')
 export class MdLinearProgress extends LinearProgress {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }

radio/radio.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Radio} from './internal/radio.js';
@@ -33,5 +34,5 @@ declare global {
  */
 @customElement('md-radio')
 export class MdRadio extends Radio {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }

ripple/ripple.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Ripple} from './internal/ripple.js';
@@ -30,5 +31,5 @@ declare global {
  */
 @customElement('md-ripple')
 export class MdRipple extends Ripple {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }

select/filled-select.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {FilledSelect} from './internal/filled-select.js';
@@ -45,5 +46,5 @@ declare global {
  */
 @customElement('md-filled-select')
 export class MdFilledSelect extends FilledSelect {
-  static override styles = [sharedStyles, styles];
+  static override styles: CSSResult[] = [sharedStyles, styles];
 }

select/outlined-select.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {OutlinedSelect} from './internal/outlined-select.js';
@@ -45,5 +46,5 @@ declare global {
  */
 @customElement('md-outlined-select')
 export class MdOutlinedSelect extends OutlinedSelect {
-  static override styles = [sharedStyles, styles];
+  static override styles: CSSResult[] = [sharedStyles, styles];
 }

select/select-option.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {styles} from '../menu/internal/menuitem/menu-item-styles.css.js';
@@ -50,5 +51,5 @@ declare global {
  */
 @customElement('md-select-option')
 export class MdSelectOption extends SelectOptionEl {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }

slider/slider.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {styles as forcedColorsStyles} from './internal/forced-colors-styles.css.js';
@@ -29,8 +30,11 @@ declare global {
  * __Example usages:__
  * - Sliders are ideal for adjusting settings such as volume and brightness, or
  * for applying image filters.
+ *
+ * @final
+ * @suppress {visibility}
  */
 @customElement('md-slider')
 export class MdSlider extends Slider {
-  static override styles = [styles, forcedColorsStyles];
+  static override styles: CSSResult[] = [styles, forcedColorsStyles];
 }

switch/switch.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Switch} from './internal/switch.js';
@@ -27,5 +28,5 @@ declare global {
  */
 @customElement('md-switch')
 export class MdSwitch extends Switch {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }

tabs/primary-tab.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {PrimaryTab} from './internal/primary-tab.js';
@@ -20,8 +21,10 @@ declare global {
 /**
  * @summary Tab allow users to display a tab within a Tabs.
  *
+ * @final
+ * @suppress {visibility}
  */
 @customElement('md-primary-tab')
 export class MdPrimaryTab extends PrimaryTab {
-  static override styles = [sharedStyles, primaryStyles];
+  static override styles: CSSResult[] = [sharedStyles, primaryStyles];
 }

tabs/secondary-tab.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {SecondaryTab} from './internal/secondary-tab.js';
@@ -20,8 +21,10 @@ declare global {
 /**
  * @summary Tab allow users to display a tab within a Tabs.
  *
+ * @final
+ * @suppress {visibility}
  */
 @customElement('md-secondary-tab')
 export class MdSecondaryTab extends SecondaryTab {
-  static override styles = [sharedStyles, secondaryStyles];
+  static override styles: CSSResult[] = [sharedStyles, secondaryStyles];
 }

tabs/tabs.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Tabs} from './internal/tabs.js';
@@ -19,8 +20,10 @@ declare global {
 /**
  * @summary Tabs displays a list of selectable tabs.
  *
+ * @final
+ * @suppress {visibility}
  */
 @customElement('md-tabs')
 export class MdTabs extends Tabs {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }

testing/table/test-table.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {TestTable} from './internal/test-table.js';
@@ -23,5 +24,5 @@ declare global {
  */
 @customElement('md-test-table')
 export class MdTestTable<S extends string = string> extends TestTable<S> {
-  static override styles = [testTableStyles];
+  static override styles: CSSResult[] = [testTableStyles];
 }

testing/tokens.ts

@@ -12,7 +12,7 @@ import {CSSResult} from 'lit';
  * Create tests for `MdComponent.styles` that checks for undefined or unused
  * tokens.
  *
- * @param styles An array of `CSSResult`s to run tests on.
+ * @param styles Styles to run tests on.
  */
 export function createTokenTests(styles: CSSResult[]) {
   it('should not have any undefined tokens', () => {
@@ -39,17 +39,13 @@ export function createTokenTests(styles: CSSResult[]) {
  *
  * // returns ['--_undefined-token']
  *
- * @param styles An array of `CSSResult`s to get undefined tokens for.
+ * @param styles Styles to get undefined tokens for.
  * @return An array of all token names that are undefined.
  */
 export function getUndefinedTokens(styles: CSSResult[]) {
   let defined = new Set<string>();
   let used = new Set<string>();
-  for (const {styleSheet} of styles) {
-    if (!styleSheet) {
-      throw new Error('CSSResult.styleSheet is not supported.');
-    }
-
+  for (const styleSheet of cssResultsToStyleSheets(styles)) {
     defined = new Set([...defined, ...getDefinedTokensFromRule(styleSheet)]);
     used = new Set([...used, ...getUsedTokensFromRule(styleSheet)]);
   }
@@ -78,17 +74,13 @@ export function getUndefinedTokens(styles: CSSResult[]) {
  *
  * // returns ['--_unused-token']
  *
- * @param styles An array of `CSSResult`s to get unused tokens for.
+ * @param styles Styles to get unused tokens for.
  * @return An array of all token names that are unused.
  */
 export function getUnusedTokens(styles: CSSResult[]) {
   let defined = new Set<string>();
   let used = new Set<string>();
-  for (const {styleSheet} of styles) {
-    if (!styleSheet) {
-      throw new Error('CSSResult.styleSheet is not supported.');
-    }
-
+  for (const styleSheet of cssResultsToStyleSheets(styles)) {
     defined = new Set([...defined, ...getDefinedTokensFromRule(styleSheet)]);
     used = new Set([...used, ...getUsedTokensFromRule(styleSheet)]);
   }
@@ -203,3 +195,17 @@ const CSS_SHORTHAND_PROPERTIES = [
   'text-emphasis',
   'transition',
 ];
+
+function cssResultsToStyleSheets(styles: CSSResult[]): CSSStyleSheet[] {
+  return styles.map((style) => {
+    if (style instanceof CSSStyleSheet) {
+      return style;
+    }
+
+    if (!style.styleSheet) {
+      throw new Error('CSSResult.styleSheet is not supported.');
+    }
+
+    return style.styleSheet;
+  });
+}

textfield/filled-text-field.ts

@@ -6,6 +6,7 @@
 
 import '../field/filled-field.js';
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 import {literal} from 'lit/static-html.js';
 
@@ -28,7 +29,7 @@ declare global {
  */
 @customElement('md-filled-text-field')
 export class MdFilledTextField extends FilledTextField {
-  static override styles = [sharedStyles, filledStyles];
+  static override styles: CSSResult[] = [sharedStyles, filledStyles];
 
   protected override readonly fieldTag = literal`md-filled-field`;
 }

textfield/outlined-text-field.ts

@@ -6,6 +6,7 @@
 
 import '../field/outlined-field.js';
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 import {literal} from 'lit/static-html.js';
 
@@ -28,7 +29,7 @@ declare global {
  */
 @customElement('md-outlined-text-field')
 export class MdOutlinedTextField extends OutlinedTextField {
-  static override styles = [sharedStyles, outlinedStyles];
+  static override styles: CSSResult[] = [sharedStyles, outlinedStyles];
 
   protected override readonly fieldTag = literal`md-outlined-field`;
 }