From ce41b7bfb3fc04f8e93a781eb6d92fe15b1d7fac Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Thu, 22 Feb 2024 14:14:27 -0800 Subject: [PATCH] fix: use explicit `CSSResult[]` types for static styles PiperOrigin-RevId: 609494809 --- button/elevated-button.ts | 3 +- button/filled-button.ts | 7 +++- button/filled-tonal-button.ts | 7 +++- button/outlined-button.ts | 3 +- button/text-button.ts | 3 +- checkbox/checkbox.ts | 3 +- chips/assist-chip.ts | 3 +- chips/chip-set.ts | 3 +- chips/filter-chip.ts | 3 +- chips/input-chip.ts | 3 +- chips/suggestion-chip.ts | 3 +- dialog/dialog.ts | 3 +- divider/divider.ts | 3 +- elevation/elevation.ts | 6 +++- fab/branded-fab.ts | 3 +- fab/fab.ts | 3 +- field/filled-field.ts | 3 +- field/outlined-field.ts | 3 +- focus/md-focus-ring.ts | 3 +- icon/icon.ts | 3 +- iconbutton/filled-icon-button.ts | 6 +++- iconbutton/filled-tonal-icon-button.ts | 6 +++- iconbutton/icon-button.ts | 6 +++- iconbutton/outlined-icon-button.ts | 6 +++- labs/badge/badge.ts | 3 +- labs/card/elevated-card.ts | 3 +- labs/card/filled-card.ts | 3 +- labs/card/outlined-card.ts | 3 +- labs/item/item.ts | 6 +++- labs/navigationbar/navigation-bar.ts | 3 +- labs/navigationtab/navigation-tab.ts | 3 +- .../outlined-segmented-button.ts | 3 +- .../outlined-segmented-button-set.ts | 3 +- list/list-item.ts | 3 +- list/list.ts | 3 +- menu/menu-item.ts | 3 +- menu/menu.ts | 9 ++++-- menu/sub-menu.ts | 3 +- progress/circular-progress.ts | 6 +++- progress/linear-progress.ts | 6 +++- radio/radio.ts | 3 +- ripple/ripple.ts | 3 +- select/filled-select.ts | 3 +- select/outlined-select.ts | 3 +- select/select-option.ts | 3 +- slider/slider.ts | 6 +++- switch/switch.ts | 3 +- tabs/primary-tab.ts | 5 ++- tabs/secondary-tab.ts | 5 ++- tabs/tabs.ts | 5 ++- testing/table/test-table.ts | 3 +- testing/tokens.ts | 32 +++++++++++-------- textfield/filled-text-field.ts | 3 +- textfield/outlined-text-field.ts | 3 +- 54 files changed, 171 insertions(+), 67 deletions(-) diff --git a/button/elevated-button.ts b/button/elevated-button.ts index 6b94fef30..75b60fc88 100644 --- a/button/elevated-button.ts +++ b/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, diff --git a/button/filled-button.ts b/button/filled-button.ts index a742103c6..742f3851c 100644 --- a/button/filled-button.ts +++ b/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, + ]; } diff --git a/button/filled-tonal-button.ts b/button/filled-tonal-button.ts index 0e7338272..5f34d3e58 100644 --- a/button/filled-tonal-button.ts +++ b/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, + ]; } diff --git a/button/outlined-button.ts b/button/outlined-button.ts index 0a1cd7b96..9431f80ab 100644 --- a/button/outlined-button.ts +++ b/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]; } diff --git a/button/text-button.ts b/button/text-button.ts index 867ffc03d..7cafeb2e8 100644 --- a/button/text-button.ts +++ b/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]; } diff --git a/checkbox/checkbox.ts b/checkbox/checkbox.ts index b257b342c..02a7ea82e 100644 --- a/checkbox/checkbox.ts +++ b/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]; } diff --git a/chips/assist-chip.ts b/chips/assist-chip.ts index 5f7380811..2ce30f341 100644 --- a/chips/assist-chip.ts +++ b/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]; } diff --git a/chips/chip-set.ts b/chips/chip-set.ts index 6f50ca003..ae967ff20 100644 --- a/chips/chip-set.ts +++ b/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]; } diff --git a/chips/filter-chip.ts b/chips/filter-chip.ts index 01820897d..ff63734b9 100644 --- a/chips/filter-chip.ts +++ b/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, diff --git a/chips/input-chip.ts b/chips/input-chip.ts index 32e826e21..d5ed7df64 100644 --- a/chips/input-chip.ts +++ b/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, diff --git a/chips/suggestion-chip.ts b/chips/suggestion-chip.ts index 78626f06e..b1ed7a989 100644 --- a/chips/suggestion-chip.ts +++ b/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]; } diff --git a/dialog/dialog.ts b/dialog/dialog.ts index c9de0f6a1..20f67f323 100644 --- a/dialog/dialog.ts +++ b/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]; } diff --git a/divider/divider.ts b/divider/divider.ts index 37d3d9336..e8cda694f 100644 --- a/divider/divider.ts +++ b/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]; } diff --git a/elevation/elevation.ts b/elevation/elevation.ts index 1d9a1568b..18b3f6147 100644 --- a/elevation/elevation.ts +++ b/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 `` 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]; } diff --git a/fab/branded-fab.ts b/fab/branded-fab.ts index c22dc0f64..c24901323 100644 --- a/fab/branded-fab.ts +++ b/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]; } diff --git a/fab/fab.ts b/fab/fab.ts index fe9aa0c06..693d2fb5c 100644 --- a/fab/fab.ts +++ b/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]; } diff --git a/field/filled-field.ts b/field/filled-field.ts index 5fd4aa01c..fb1d13e0a 100644 --- a/field/filled-field.ts +++ b/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]; } diff --git a/field/outlined-field.ts b/field/outlined-field.ts index f7b68d320..804453caa 100644 --- a/field/outlined-field.ts +++ b/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]; } diff --git a/focus/md-focus-ring.ts b/focus/md-focus-ring.ts index 96139da24..652e999ab 100644 --- a/focus/md-focus-ring.ts +++ b/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]; } diff --git a/icon/icon.ts b/icon/icon.ts index fcb62a9fa..ab24880ef 100644 --- a/icon/icon.ts +++ b/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]; } diff --git a/iconbutton/filled-icon-button.ts b/iconbutton/filled-icon-button.ts index 231f25fed..a1da36279 100644 --- a/iconbutton/filled-icon-button.ts +++ b/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 { diff --git a/iconbutton/filled-tonal-icon-button.ts b/iconbutton/filled-tonal-icon-button.ts index 60907a177..bc9537efb 100644 --- a/iconbutton/filled-tonal-icon-button.ts +++ b/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 { diff --git a/iconbutton/icon-button.ts b/iconbutton/icon-button.ts index 2f65a720e..3a114d4c0 100644 --- a/iconbutton/icon-button.ts +++ b/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 { diff --git a/iconbutton/outlined-icon-button.ts b/iconbutton/outlined-icon-button.ts index e30f9201f..18405424c 100644 --- a/iconbutton/outlined-icon-button.ts +++ b/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 { diff --git a/labs/badge/badge.ts b/labs/badge/badge.ts index 4486991c8..9bcd16a37 100644 --- a/labs/badge/badge.ts +++ b/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]; } diff --git a/labs/card/elevated-card.ts b/labs/card/elevated-card.ts index 9955133c6..fa0d3c73b 100644 --- a/labs/card/elevated-card.ts +++ b/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]; } diff --git a/labs/card/filled-card.ts b/labs/card/filled-card.ts index c2ecd169b..682f44d97 100644 --- a/labs/card/filled-card.ts +++ b/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]; } diff --git a/labs/card/outlined-card.ts b/labs/card/outlined-card.ts index a8a993b0c..62f184067 100644 --- a/labs/card/outlined-card.ts +++ b/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]; } diff --git a/labs/item/item.ts b/labs/item/item.ts index 249dc0ea7..4f3e2dab4 100644 --- a/labs/item/item.ts +++ b/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 { * * * ``` + * + * @final + * @suppress {visibility} */ @customElement('md-item') export class MdItem extends Item { - static override styles = [styles]; + static override styles: CSSResult[] = [styles]; } diff --git a/labs/navigationbar/navigation-bar.ts b/labs/navigationbar/navigation-bar.ts index 34eb346ed..dc552325e 100644 --- a/labs/navigationbar/navigation-bar.ts +++ b/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]; } diff --git a/labs/navigationtab/navigation-tab.ts b/labs/navigationtab/navigation-tab.ts index d72ed68db..4ab1693a6 100644 --- a/labs/navigationtab/navigation-tab.ts +++ b/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]; } diff --git a/labs/segmentedbutton/outlined-segmented-button.ts b/labs/segmentedbutton/outlined-segmented-button.ts index e04a70b0b..d4f0a23db 100644 --- a/labs/segmentedbutton/outlined-segmented-button.ts +++ b/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]; } diff --git a/labs/segmentedbuttonset/outlined-segmented-button-set.ts b/labs/segmentedbuttonset/outlined-segmented-button-set.ts index e7e5efaa3..82134375d 100644 --- a/labs/segmentedbuttonset/outlined-segmented-button-set.ts +++ b/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]; } diff --git a/list/list-item.ts b/list/list-item.ts index ea9e74ba2..d952c0581 100644 --- a/list/list-item.ts +++ b/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]; } diff --git a/list/list.ts b/list/list.ts index cad4109e2..e76a32685 100644 --- a/list/list.ts +++ b/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]; } diff --git a/menu/menu-item.ts b/menu/menu-item.ts index 993c7a5a6..d7a7bd15b 100644 --- a/menu/menu-item.ts +++ b/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]; } diff --git a/menu/menu.ts b/menu/menu.ts index f35a54b59..c8abd31f5 100644 --- a/menu/menu.ts +++ b/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]; } diff --git a/menu/sub-menu.ts b/menu/sub-menu.ts index 675ce5704..8a1a27023 100644 --- a/menu/sub-menu.ts +++ b/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]; } diff --git a/progress/circular-progress.ts b/progress/circular-progress.ts index b943dc913..5ef6e47fa 100644 --- a/progress/circular-progress.ts +++ b/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]; } diff --git a/progress/linear-progress.ts b/progress/linear-progress.ts index a5953ca8e..111d67994 100644 --- a/progress/linear-progress.ts +++ b/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]; } diff --git a/radio/radio.ts b/radio/radio.ts index 4971ef51e..797d0a97b 100644 --- a/radio/radio.ts +++ b/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]; } diff --git a/ripple/ripple.ts b/ripple/ripple.ts index 7a446de51..8a2295b7f 100644 --- a/ripple/ripple.ts +++ b/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]; } diff --git a/select/filled-select.ts b/select/filled-select.ts index d7484992d..0056e4b51 100644 --- a/select/filled-select.ts +++ b/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]; } diff --git a/select/outlined-select.ts b/select/outlined-select.ts index 66a1b9ee0..8c99391e4 100644 --- a/select/outlined-select.ts +++ b/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]; } diff --git a/select/select-option.ts b/select/select-option.ts index 9b2ae62f1..6ef2d6100 100644 --- a/select/select-option.ts +++ b/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]; } diff --git a/slider/slider.ts b/slider/slider.ts index dd20bf09b..fd753e646 100644 --- a/slider/slider.ts +++ b/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]; } diff --git a/switch/switch.ts b/switch/switch.ts index 1279a67d3..876911d2d 100644 --- a/switch/switch.ts +++ b/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]; } diff --git a/tabs/primary-tab.ts b/tabs/primary-tab.ts index d73031408..90e651029 100644 --- a/tabs/primary-tab.ts +++ b/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]; } diff --git a/tabs/secondary-tab.ts b/tabs/secondary-tab.ts index 33de1dff7..154f9f603 100644 --- a/tabs/secondary-tab.ts +++ b/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]; } diff --git a/tabs/tabs.ts b/tabs/tabs.ts index 94420aed5..2079b3428 100644 --- a/tabs/tabs.ts +++ b/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]; } diff --git a/testing/table/test-table.ts b/testing/table/test-table.ts index 07a193515..93599854a 100644 --- a/testing/table/test-table.ts +++ b/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 extends TestTable { - static override styles = [testTableStyles]; + static override styles: CSSResult[] = [testTableStyles]; } diff --git a/testing/tokens.ts b/testing/tokens.ts index 659a6526c..d6b4230ce 100644 --- a/testing/tokens.ts +++ b/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(); let used = new Set(); - 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(); let used = new Set(); - 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; + }); +} diff --git a/textfield/filled-text-field.ts b/textfield/filled-text-field.ts index a0d20cfcb..057a644af 100644 --- a/textfield/filled-text-field.ts +++ b/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`; } diff --git a/textfield/outlined-text-field.ts b/textfield/outlined-text-field.ts index 736c39734..4ea31cf0c 100644 --- a/textfield/outlined-text-field.ts +++ b/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`; }