chore: refactor components to import styles from *-styles.cssresult.js

button/elevated-button.ts

@@ -8,9 +8,9 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {ElevatedButton} from './internal/elevated-button.js';
-import {styles as elevatedStyles} from './internal/elevated-styles.js';
-import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
+import {styles as elevatedStyles} from './internal/elevated-styles.cssresult.js';
+import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.cssresult.js';
+import {styles as sharedStyles} from './internal/shared-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

button/filled-button.ts

@@ -8,9 +8,9 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {FilledButton} from './internal/filled-button.js';
-import {styles as filledStyles} from './internal/filled-styles.js';
-import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
+import {styles as filledStyles} from './internal/filled-styles.cssresult.js';
+import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.cssresult.js';
+import {styles as sharedStyles} from './internal/shared-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

button/filled-tonal-button.ts

@@ -8,9 +8,9 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {FilledTonalButton} from './internal/filled-tonal-button.js';
-import {styles as tonalStyles} from './internal/filled-tonal-styles.js';
-import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
+import {styles as tonalStyles} from './internal/filled-tonal-styles.cssresult.js';
+import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.cssresult.js';
+import {styles as sharedStyles} from './internal/shared-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

button/outlined-button.ts

@@ -8,8 +8,8 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {OutlinedButton} from './internal/outlined-button.js';
-import {styles as outlinedStyles} from './internal/outlined-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
+import {styles as outlinedStyles} from './internal/outlined-styles.cssresult.js';
+import {styles as sharedStyles} from './internal/shared-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

button/text-button.ts

@@ -7,9 +7,9 @@
 import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
-import {styles as sharedStyles} from './internal/shared-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.cssresult.js';
 import {TextButton} from './internal/text-button.js';
-import {styles as textStyles} from './internal/text-styles.js';
+import {styles as textStyles} from './internal/text-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

checkbox/checkbox.ts

@@ -8,7 +8,7 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Checkbox} from './internal/checkbox.js';
-import {styles} from './internal/checkbox-styles.js';
+import {styles} from './internal/checkbox-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

chips/assist-chip.ts

@@ -8,9 +8,9 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {AssistChip} from './internal/assist-chip.js';
-import {styles} from './internal/assist-styles.js';
-import {styles as elevatedStyles} from './internal/elevated-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
+import {styles} from './internal/assist-styles.cssresult.js';
+import {styles as elevatedStyles} from './internal/elevated-styles.cssresult.js';
+import {styles as sharedStyles} from './internal/shared-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

chips/chip-set.ts

@@ -8,7 +8,7 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {ChipSet} from './internal/chip-set.js';
-import {styles} from './internal/chip-set-styles.js';
+import {styles} from './internal/chip-set-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

chips/filter-chip.ts

@@ -7,12 +7,12 @@
 import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
-import {styles as elevatedStyles} from './internal/elevated-styles.js';
+import {styles as elevatedStyles} from './internal/elevated-styles.cssresult.js';
 import {FilterChip} from './internal/filter-chip.js';
-import {styles} from './internal/filter-styles.js';
-import {styles as selectableStyles} from './internal/selectable-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
-import {styles as trailingIconStyles} from './internal/trailing-icon-styles.js';
+import {styles} from './internal/filter-styles.cssresult.js';
+import {styles as selectableStyles} from './internal/selectable-styles.cssresult.js';
+import {styles as sharedStyles} from './internal/shared-styles.cssresult.js';
+import {styles as trailingIconStyles} from './internal/trailing-icon-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

chips/input-chip.ts

@@ -8,10 +8,10 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {InputChip} from './internal/input-chip.js';
-import {styles} from './internal/input-styles.js';
-import {styles as selectableStyles} from './internal/selectable-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
-import {styles as trailingIconStyles} from './internal/trailing-icon-styles.js';
+import {styles} from './internal/input-styles.cssresult.js';
+import {styles as selectableStyles} from './internal/selectable-styles.cssresult.js';
+import {styles as sharedStyles} from './internal/shared-styles.cssresult.js';
+import {styles as trailingIconStyles} from './internal/trailing-icon-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

chips/suggestion-chip.ts

@@ -7,10 +7,10 @@
 import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
-import {styles as elevatedStyles} from './internal/elevated-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
+import {styles as elevatedStyles} from './internal/elevated-styles.cssresult.js';
+import {styles as sharedStyles} from './internal/shared-styles.cssresult.js';
 import {SuggestionChip} from './internal/suggestion-chip.js';
-import {styles} from './internal/suggestion-styles.js';
+import {styles} from './internal/suggestion-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

dialog/dialog.ts

@@ -8,7 +8,7 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Dialog} from './internal/dialog.js';
-import {styles} from './internal/dialog-styles.js';
+import {styles} from './internal/dialog-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

divider/demo/stories.ts

@@ -7,7 +7,7 @@
 import '@material/web/divider/divider.js';
 
 import {MaterialStoryInit} from './material-collection.js';
-import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';
+import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.cssresult.js';
 import {css, html} from 'lit';
 
 /** Knob types for divider stories. */

divider/divider.ts

@@ -8,7 +8,7 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Divider} from './internal/divider.js';
-import {styles} from './internal/divider-styles.js';
+import {styles} from './internal/divider-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

elevation/elevation.ts

@@ -8,7 +8,7 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Elevation} from './internal/elevation.js';
-import {styles} from './internal/elevation-styles.js';
+import {styles} from './internal/elevation-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

fab/branded-fab.ts

@@ -8,9 +8,9 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Fab, FabVariant} from './internal/fab.js';
-import {styles} from './internal/fab-branded-styles.js';
-import {styles as forcedColors} from './internal/forced-colors-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
+import {styles} from './internal/fab-branded-styles.cssresult.js';
+import {styles as forcedColors} from './internal/forced-colors-styles.cssresult.js';
+import {styles as sharedStyles} from './internal/shared-styles.cssresult.js';
 
 export {type FabSize} from './internal/shared.js';
 

fab/fab.ts

@@ -8,9 +8,9 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Fab} from './internal/fab.js';
-import {styles} from './internal/fab-styles.js';
-import {styles as forcedColors} from './internal/forced-colors-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
+import {styles} from './internal/fab-styles.cssresult.js';
+import {styles as forcedColors} from './internal/forced-colors-styles.cssresult.js';
+import {styles as sharedStyles} from './internal/shared-styles.cssresult.js';
 
 export {type FabVariant} from './internal/fab.js';
 export {type FabSize} from './internal/shared.js';

field/filled-field.ts

@@ -8,8 +8,8 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {FilledField} from './internal/filled-field.js';
-import {styles as filledStyles} from './internal/filled-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
+import {styles as filledStyles} from './internal/filled-styles.cssresult.js';
+import {styles as sharedStyles} from './internal/shared-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

field/outlined-field.ts

@@ -8,8 +8,8 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {OutlinedField} from './internal/outlined-field.js';
-import {styles as outlinedStyles} from './internal/outlined-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
+import {styles as outlinedStyles} from './internal/outlined-styles.cssresult.js';
+import {styles as sharedStyles} from './internal/shared-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

focus/md-focus-ring.ts

@@ -8,7 +8,7 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {FocusRing} from './internal/focus-ring.js';
-import {styles} from './internal/focus-ring-styles.js';
+import {styles} from './internal/focus-ring-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

icon/icon.ts

@@ -8,7 +8,7 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Icon} from './internal/icon.js';
-import {styles} from './internal/icon-styles.js';
+import {styles} from './internal/icon-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

iconbutton/demo/stories.ts

@@ -11,7 +11,7 @@ import '@material/web/iconbutton/icon-button.js';
 import '@material/web/iconbutton/outlined-icon-button.js';
 
 import {MaterialStoryInit} from './material-collection.js';
-import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';
+import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.cssresult.js';
 import {css, html} from 'lit';
 
 /** Knob types for icon button stories. */

iconbutton/filled-icon-button.ts

@@ -7,9 +7,9 @@
 import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
-import {styles} from './internal/filled-styles.js';
+import {styles} from './internal/filled-styles.cssresult.js';
 import {IconButton} from './internal/icon-button.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

iconbutton/filled-tonal-icon-button.ts

@@ -7,9 +7,9 @@
 import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
-import {styles} from './internal/filled-tonal-styles.js';
+import {styles} from './internal/filled-tonal-styles.cssresult.js';
 import {IconButton} from './internal/icon-button.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

iconbutton/icon-button.ts

@@ -8,8 +8,8 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {IconButton} from './internal/icon-button.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
-import {styles} from './internal/standard-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.cssresult.js';
+import {styles} from './internal/standard-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

iconbutton/outlined-icon-button.ts

@@ -8,8 +8,8 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {IconButton} from './internal/icon-button.js';
-import {styles} from './internal/outlined-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
+import {styles} from './internal/outlined-styles.cssresult.js';
+import {styles as sharedStyles} from './internal/shared-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

labs/badge/badge.ts

@@ -8,7 +8,7 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Badge} from './internal/badge.js';
-import {styles} from './internal/badge-styles.js';
+import {styles} from './internal/badge-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

labs/card/demo/stories.ts

@@ -10,7 +10,7 @@ import '@material/web/labs/card/filled-card.js';
 import '@material/web/labs/card/outlined-card.js';
 
 import {MaterialStoryInit} from './material-collection.js';
-import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';
+import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.cssresult.js';
 import {css, html} from 'lit';
 
 /** Knob types for card stories. */

labs/card/elevated-card.ts

@@ -8,8 +8,8 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Card} from './internal/card.js';
-import {styles as elevatedStyles} from './internal/elevated-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
+import {styles as elevatedStyles} from './internal/elevated-styles.cssresult.js';
+import {styles as sharedStyles} from './internal/shared-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

labs/card/filled-card.ts

@@ -8,8 +8,8 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Card} from './internal/card.js';
-import {styles as filledStyles} from './internal/filled-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
+import {styles as filledStyles} from './internal/filled-styles.cssresult.js';
+import {styles as sharedStyles} from './internal/shared-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

labs/card/outlined-card.ts

@@ -8,8 +8,8 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Card} from './internal/card.js';
-import {styles as outlinedStyles} from './internal/outlined-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
+import {styles as outlinedStyles} from './internal/outlined-styles.cssresult.js';
+import {styles as sharedStyles} from './internal/shared-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

labs/item/item.ts

@@ -8,7 +8,7 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Item} from './internal/item.js';
-import {styles} from './internal/item-styles.js';
+import {styles} from './internal/item-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

labs/navigationbar/navigation-bar.ts

@@ -8,7 +8,7 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {NavigationBar} from './internal/navigation-bar.js';
-import {styles} from './internal/navigation-bar-styles.js';
+import {styles} from './internal/navigation-bar-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

labs/navigationdrawer/navigation-drawer-modal.ts

@@ -7,8 +7,8 @@
 import {customElement} from 'lit/decorators.js';
 
 import {NavigationDrawerModal} from './internal/navigation-drawer-modal.js';
-import {styles} from './internal/navigation-drawer-modal-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
+import {styles} from './internal/navigation-drawer-modal-styles.cssresult.js';
+import {styles as sharedStyles} from './internal/shared-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

labs/navigationdrawer/navigation-drawer.ts

@@ -7,8 +7,8 @@
 import {customElement} from 'lit/decorators.js';
 
 import {NavigationDrawer} from './internal/navigation-drawer.js';
-import {styles} from './internal/navigation-drawer-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
+import {styles} from './internal/navigation-drawer-styles.cssresult.js';
+import {styles as sharedStyles} from './internal/shared-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {

labs/navigationtab/navigation-tab.ts

@@ -8,7 +8,7 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {NavigationTab} from './internal/navigation-tab.js';
-import {styles} from './internal/navigation-tab-styles.js';
+import {styles} from './internal/navigation-tab-styles.cssresult.js';
 
 declare global {
   interface HTMLElementTagNameMap {