chore: use CSSResultOrNative instead of CSSResult for static styles

PiperOrigin-RevId: 609760445

button/elevated-button.ts

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

button/filled-button.ts

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

button/filled-tonal-button.ts

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

button/outlined-button.ts

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

button/text-button.ts

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

checkbox/checkbox.ts

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

chips/assist-chip.ts

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

chips/chip-set.ts

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

chips/filter-chip.ts

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

chips/input-chip.ts

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

chips/suggestion-chip.ts

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

dialog/dialog.ts

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

divider/divider.ts

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

elevation/elevation.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResult} from 'lit';
+import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Elevation} from './internal/elevation.js';
@@ -26,5 +26,5 @@ declare global {
  */
 @customElement('md-elevation')
 export class MdElevation extends Elevation {
-  static override styles: CSSResult[] = [styles];
+  static override styles: CSSResultOrNative[] = [styles];
 }

fab/branded-fab.ts

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

fab/fab.ts

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

field/filled-field.ts

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

field/outlined-field.ts

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

focus/md-focus-ring.ts

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

icon/icon.ts

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

iconbutton/filled-icon-button.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResult} from 'lit';
+import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {styles} from './internal/filled-styles.css.js';
@@ -37,7 +37,7 @@ declare global {
  */
 @customElement('md-filled-icon-button')
 export class MdFilledIconButton extends IconButton {
-  static override styles: CSSResult[] = [sharedStyles, styles];
+  static override styles: CSSResultOrNative[] = [sharedStyles, styles];
 
   protected override getRenderClasses() {
     return {

iconbutton/filled-tonal-icon-button.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResult} from 'lit';
+import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {styles} from './internal/filled-tonal-styles.css.js';
@@ -37,7 +37,7 @@ declare global {
  */
 @customElement('md-filled-tonal-icon-button')
 export class MdFilledTonalIconButton extends IconButton {
-  static override styles: CSSResult[] = [sharedStyles, styles];
+  static override styles: CSSResultOrNative[] = [sharedStyles, styles];
 
   protected override getRenderClasses() {
     return {

iconbutton/icon-button.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResult} from 'lit';
+import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {IconButton} from './internal/icon-button.js';
@@ -37,7 +37,7 @@ declare global {
  */
 @customElement('md-icon-button')
 export class MdIconButton extends IconButton {
-  static override styles: CSSResult[] = [sharedStyles, styles];
+  static override styles: CSSResultOrNative[] = [sharedStyles, styles];
 
   protected override getRenderClasses() {
     return {

iconbutton/outlined-icon-button.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResult} from 'lit';
+import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {IconButton} from './internal/icon-button.js';
@@ -37,7 +37,7 @@ declare global {
  */
 @customElement('md-outlined-icon-button')
 export class MdOutlinedIconButton extends IconButton {
-  static override styles: CSSResult[] = [sharedStyles, styles];
+  static override styles: CSSResultOrNative[] = [sharedStyles, styles];
 
   protected override getRenderClasses() {
     return {

labs/badge/badge.ts

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

labs/card/elevated-card.ts

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

labs/card/filled-card.ts

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

labs/card/outlined-card.ts

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

labs/item/item.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResult} from 'lit';
+import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Item} from './internal/item.js';
@@ -77,5 +77,5 @@ declare global {
  */
 @customElement('md-item')
 export class MdItem extends Item {
-  static override styles: CSSResult[] = [styles];
+  static override styles: CSSResultOrNative[] = [styles];
 }

labs/navigationbar/navigation-bar.ts

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

labs/navigationtab/navigation-tab.ts

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

labs/segmentedbutton/outlined-segmented-button.ts

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

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

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

list/list-item.ts

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

list/list.ts

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

menu/menu-item.ts

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

menu/menu.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResult} from 'lit';
+import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Menu} from './internal/menu.js';
@@ -76,5 +76,5 @@ declare global {
  */
 @customElement('md-menu')
 export class MdMenu extends Menu {
-  static override styles: CSSResult[] = [styles];
+  static override styles: CSSResultOrNative[] = [styles];
 }

menu/sub-menu.ts

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

progress/circular-progress.ts

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

progress/linear-progress.ts

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

radio/radio.ts

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

ripple/ripple.ts

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

select/filled-select.ts

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

select/outlined-select.ts

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

select/select-option.ts

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

slider/slider.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResult} from 'lit';
+import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {styles as forcedColorsStyles} from './internal/forced-colors-styles.css.js';
@@ -36,5 +36,5 @@ declare global {
  */
 @customElement('md-slider')
 export class MdSlider extends Slider {
-  static override styles: CSSResult[] = [styles, forcedColorsStyles];
+  static override styles: CSSResultOrNative[] = [styles, forcedColorsStyles];
 }

switch/switch.ts

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

tabs/primary-tab.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResult} from 'lit';
+import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {PrimaryTab} from './internal/primary-tab.js';
@@ -26,5 +26,5 @@ declare global {
  */
 @customElement('md-primary-tab')
 export class MdPrimaryTab extends PrimaryTab {
-  static override styles: CSSResult[] = [sharedStyles, primaryStyles];
+  static override styles: CSSResultOrNative[] = [sharedStyles, primaryStyles];
 }

tabs/secondary-tab.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResult} from 'lit';
+import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {SecondaryTab} from './internal/secondary-tab.js';
@@ -26,5 +26,5 @@ declare global {
  */
 @customElement('md-secondary-tab')
 export class MdSecondaryTab extends SecondaryTab {
-  static override styles: CSSResult[] = [sharedStyles, secondaryStyles];
+  static override styles: CSSResultOrNative[] = [sharedStyles, secondaryStyles];
 }

tabs/tabs.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResult} from 'lit';
+import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Tabs} from './internal/tabs.js';
@@ -25,5 +25,5 @@ declare global {
  */
 @customElement('md-tabs')
 export class MdTabs extends Tabs {
-  static override styles: CSSResult[] = [styles];
+  static override styles: CSSResultOrNative[] = [styles];
 }

testing/table/test-table.ts

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

testing/tokens.ts

@@ -6,7 +6,7 @@
 
 // import 'jasmine'; (google3-only)
 
-import {CSSResult} from 'lit';
+import {CSSResultOrNative} from 'lit';
 
 /**
  * Create tests for `MdComponent.styles` that checks for undefined or unused
@@ -14,7 +14,7 @@ import {CSSResult} from 'lit';
  *
  * @param styles Styles to run tests on.
  */
-export function createTokenTests(styles: CSSResult[]) {
+export function createTokenTests(styles: CSSResultOrNative[]) {
   it('should not have any undefined tokens', () => {
     const undefinedTokens = getUndefinedTokens(styles);
     expect(undefinedTokens).withContext('undefined tokens').toHaveSize(0);
@@ -42,7 +42,7 @@ export function createTokenTests(styles: CSSResult[]) {
  * @param styles Styles to get undefined tokens for.
  * @return An array of all token names that are undefined.
  */
-export function getUndefinedTokens(styles: CSSResult[]) {
+export function getUndefinedTokens(styles: CSSResultOrNative[]) {
   let defined = new Set<string>();
   let used = new Set<string>();
   for (const styleSheet of cssResultsToStyleSheets(styles)) {
@@ -77,7 +77,7 @@ export function getUndefinedTokens(styles: CSSResult[]) {
  * @param styles Styles to get unused tokens for.
  * @return An array of all token names that are unused.
  */
-export function getUnusedTokens(styles: CSSResult[]) {
+export function getUnusedTokens(styles: CSSResultOrNative[]) {
   let defined = new Set<string>();
   let used = new Set<string>();
   for (const styleSheet of cssResultsToStyleSheets(styles)) {
@@ -196,7 +196,7 @@ const CSS_SHORTHAND_PROPERTIES = [
   'transition',
 ];
 
-function cssResultsToStyleSheets(styles: CSSResult[]): CSSStyleSheet[] {
+function cssResultsToStyleSheets(styles: CSSResultOrNative[]): CSSStyleSheet[] {
   return styles.map((style) => {
     if (style instanceof CSSStyleSheet) {
       return style;

textfield/filled-text-field.ts

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

textfield/outlined-text-field.ts

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