From abab690a5856cbd113608cb19d53ca77357059ea Mon Sep 17 00:00:00 2001
From: castastrophe <castastrophe@users.noreply.github.com>
Date: Wed, 19 Mar 2025 15:54:22 -0400
Subject: [PATCH] build: leverage css module imports in components

---
 packages/accordion/src/Accordion.ts                | 2 +-
 packages/accordion/src/AccordionItem.ts            | 2 +-
 packages/action-group/src/ActionGroup.ts           | 2 +-
 packages/alert-banner/src/AlertBanner.ts           | 2 +-
 packages/asset/src/Asset.ts                        | 2 +-
 packages/badge/src/Badge.ts                        | 2 +-
 packages/breadcrumbs/src/BreadcrumbItem.ts         | 2 +-
 packages/breadcrumbs/src/Breadcrumbs.ts            | 2 +-
 packages/button-group/src/ButtonGroup.ts           | 2 +-
 packages/coachmark/src/CoachIndicator.ts           | 2 +-
 packages/color-area/src/ColorArea.ts               | 2 +-
 packages/color-handle/src/ColorHandle.ts           | 2 +-
 packages/color-loupe/src/ColorLoupe.ts             | 2 +-
 packages/color-slider/src/ColorSlider.ts           | 2 +-
 packages/color-wheel/src/ColorWheel.ts             | 2 +-
 packages/combobox/src/Combobox.ts                  | 2 +-
 packages/contextual-help/src/ContextualHelp.ts     | 2 +-
 packages/dialog/src/Dialog.ts                      | 2 +-
 packages/divider/src/Divider.ts                    | 2 +-
 packages/field-group/src/FieldGroup.ts             | 2 +-
 packages/field-label/src/FieldLabel.ts             | 2 +-
 packages/help-text/src/HelpText.ts                 | 2 +-
 packages/infield-button/src/InfieldButton.ts       | 2 +-
 packages/meter/src/Meter.ts                        | 2 +-
 packages/overlay/src/Overlay.ts                    | 2 +-
 packages/picker-button/src/PickerButton.ts         | 2 +-
 packages/progress-bar/src/ProgressBar.ts           | 2 +-
 packages/split-view/src/SplitView.ts               | 2 +-
 packages/swatch/src/Swatch.ts                      | 2 +-
 packages/swatch/src/SwatchGroup.ts                 | 2 +-
 packages/table/src/Table.ts                        | 2 +-
 packages/table/src/TableBody.ts                    | 2 +-
 packages/table/src/TableCell.ts                    | 2 +-
 packages/table/src/TableCheckboxCell.ts            | 4 ++--
 packages/table/src/TableHead.ts                    | 2 +-
 packages/table/src/TableHeadCell.ts                | 2 +-
 packages/table/src/TableRow.ts                     | 2 +-
 packages/tabs/src/TabsOverflow.ts                  | 2 +-
 packages/tags/src/Tag.ts                           | 2 +-
 packages/tags/src/Tags.ts                          | 2 +-
 packages/thumbnail/src/Thumbnail.ts                | 2 +-
 packages/tray/src/Tray.ts                          | 4 ++--
 packages/underlay/src/Underlay.ts                  | 2 +-
 projects/templates/plop-templates/component.ts.hbs | 4 ++--
 tools/grid/src/Grid.ts                             | 2 +-
 tools/truncated/src/Truncated.ts                   | 2 +-
 46 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/packages/accordion/src/Accordion.ts b/packages/accordion/src/Accordion.ts
index fe8b1bd1962..193201e6615 100644
--- a/packages/accordion/src/Accordion.ts
+++ b/packages/accordion/src/Accordion.ts
@@ -26,7 +26,7 @@ import { FocusGroupController } from '@spectrum-web-components/reactive-controll
 
 import { AccordionItem } from './AccordionItem.js';
 
-import styles from './accordion.css.js';
+import styles from './accordion.css' with { type: 'css' };
 
 /**
  * @element sp-accordion
diff --git a/packages/accordion/src/AccordionItem.ts b/packages/accordion/src/AccordionItem.ts
index 4c68ce196dc..c3009c83456 100644
--- a/packages/accordion/src/AccordionItem.ts
+++ b/packages/accordion/src/AccordionItem.ts
@@ -23,7 +23,7 @@ import { when } from '@spectrum-web-components/base/src/directives.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
 import chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
 
-import styles from './accordion-item.css.js';
+import styles from './accordion-item.css' with { type: 'css' };
 
 const chevronIcon: Record<string, () => TemplateResult> = {
     s: () => html`
diff --git a/packages/action-group/src/ActionGroup.ts b/packages/action-group/src/ActionGroup.ts
index 0aa07964da8..77e0a767f86 100644
--- a/packages/action-group/src/ActionGroup.ts
+++ b/packages/action-group/src/ActionGroup.ts
@@ -26,7 +26,7 @@ import { ActionButton } from '@spectrum-web-components/action-button';
 import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
 import { MutationController } from '@lit-labs/observers/mutation-controller.js';
 
-import styles from './action-group.css.js';
+import styles from './action-group.css' with { type: 'css' };
 
 const EMPTY_SELECTION: string[] = [];
 
diff --git a/packages/alert-banner/src/AlertBanner.ts b/packages/alert-banner/src/AlertBanner.ts
index f58e4b98d3b..5981a27f2ed 100644
--- a/packages/alert-banner/src/AlertBanner.ts
+++ b/packages/alert-banner/src/AlertBanner.ts
@@ -20,7 +20,7 @@ import { property } from '@spectrum-web-components/base/src/decorators.js';
 import '@spectrum-web-components/button/sp-close-button.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
-import styles from './alert-banner.css.js';
+import styles from './alert-banner.css' with { type: 'css' };
 
 const VALID_VARIANTS = ['neutral', 'info', 'negative'];
 export type AlertBannerVariants = (typeof VALID_VARIANTS)[number];
diff --git a/packages/asset/src/Asset.ts b/packages/asset/src/Asset.ts
index 7ad20b9db7b..87bc2bdeb69 100644
--- a/packages/asset/src/Asset.ts
+++ b/packages/asset/src/Asset.ts
@@ -18,7 +18,7 @@ import {
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 
-import styles from './asset.css.js';
+import styles from './asset.css' with { type: 'css' };
 
 const file = (label: string): TemplateResult => html`
     <svg
diff --git a/packages/badge/src/Badge.ts b/packages/badge/src/Badge.ts
index c107a02d7af..5d044867ef9 100644
--- a/packages/badge/src/Badge.ts
+++ b/packages/badge/src/Badge.ts
@@ -22,7 +22,7 @@ import { property } from '@spectrum-web-components/base/src/decorators.js';
 
 import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
 import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';
-import styles from './badge.css.js';
+import styles from './badge.css' with { type: 'css' };
 
 export const BADGE_VARIANTS = [
     'accent',
diff --git a/packages/breadcrumbs/src/BreadcrumbItem.ts b/packages/breadcrumbs/src/BreadcrumbItem.ts
index 18509311350..69eea3d23ff 100644
--- a/packages/breadcrumbs/src/BreadcrumbItem.ts
+++ b/packages/breadcrumbs/src/BreadcrumbItem.ts
@@ -23,7 +23,7 @@ import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
 import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
 
-import styles from './breadcrumb-item.css.js';
+import styles from './breadcrumb-item.css' with { type: 'css' };
 
 export interface BreadcrumbSelectDetail {
     value: string;
diff --git a/packages/breadcrumbs/src/Breadcrumbs.ts b/packages/breadcrumbs/src/Breadcrumbs.ts
index 8d8287991e0..f74dd501b0b 100644
--- a/packages/breadcrumbs/src/Breadcrumbs.ts
+++ b/packages/breadcrumbs/src/Breadcrumbs.ts
@@ -37,7 +37,7 @@ import {
     ref,
 } from '@spectrum-web-components/base/src/directives.js';
 
-import styles from './breadcrumbs.css.js';
+import styles from './breadcrumbs.css' with { type: 'css' };
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 
 type BreadcrumbItem = {
diff --git a/packages/button-group/src/ButtonGroup.ts b/packages/button-group/src/ButtonGroup.ts
index 24c539c88c9..3fdf3fe2f51 100644
--- a/packages/button-group/src/ButtonGroup.ts
+++ b/packages/button-group/src/ButtonGroup.ts
@@ -24,7 +24,7 @@ import {
 } from '@spectrum-web-components/base/src/decorators.js';
 import type { Button } from '@spectrum-web-components/button';
 
-import styles from './button-group.css.js';
+import styles from './button-group.css' with { type: 'css' };
 
 /**
  * @element sp-button-group
diff --git a/packages/coachmark/src/CoachIndicator.ts b/packages/coachmark/src/CoachIndicator.ts
index a378400ca71..90e0e51e986 100644
--- a/packages/coachmark/src/CoachIndicator.ts
+++ b/packages/coachmark/src/CoachIndicator.ts
@@ -16,7 +16,7 @@ import {
     TemplateResult,
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
-import styles from './coach-indicator.css.js';
+import styles from './coach-indicator.css' with { type: 'css' };
 
 /**
  * @element sp-coach-indicator
diff --git a/packages/color-area/src/ColorArea.ts b/packages/color-area/src/ColorArea.ts
index e20fba32705..3ec4036fa68 100644
--- a/packages/color-area/src/ColorArea.ts
+++ b/packages/color-area/src/ColorArea.ts
@@ -37,7 +37,7 @@ import {
     isIOS,
 } from '@spectrum-web-components/shared/src/platform.js';
 
-import styles from './color-area.css.js';
+import styles from './color-area.css' with { type: 'css' };
 
 /**
  * @element sp-color-area
diff --git a/packages/color-handle/src/ColorHandle.ts b/packages/color-handle/src/ColorHandle.ts
index 0ffae12c303..640b42094e2 100644
--- a/packages/color-handle/src/ColorHandle.ts
+++ b/packages/color-handle/src/ColorHandle.ts
@@ -21,7 +21,7 @@ import { property } from '@spectrum-web-components/base/src/decorators.js';
 
 import '@spectrum-web-components/color-loupe/sp-color-loupe.js';
 import opacityCheckerboardStyles from '@spectrum-web-components/opacity-checkerboard/src/is-opacity-checkerboard.css.js';
-import styles from './color-handle.css.js';
+import styles from './color-handle.css' with { type: 'css' };
 
 /**
  * @element sp-color-handle
diff --git a/packages/color-loupe/src/ColorLoupe.ts b/packages/color-loupe/src/ColorLoupe.ts
index 95abca17b02..affd6bfead1 100644
--- a/packages/color-loupe/src/ColorLoupe.ts
+++ b/packages/color-loupe/src/ColorLoupe.ts
@@ -18,7 +18,7 @@ import {
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 
-import styles from './color-loupe.css.js';
+import styles from './color-loupe.css' with { type: 'css' };
 import opacityCheckerboardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';
 
 /**
diff --git a/packages/color-slider/src/ColorSlider.ts b/packages/color-slider/src/ColorSlider.ts
index 346c9b61b64..52c0e000d1e 100644
--- a/packages/color-slider/src/ColorSlider.ts
+++ b/packages/color-slider/src/ColorSlider.ts
@@ -36,7 +36,7 @@ import {
 import { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';
 
 import opacityCheckerBoardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';
-import styles from './color-slider.css.js';
+import styles from './color-slider.css' with { type: 'css' };
 
 /**
  * @element sp-color-slider
diff --git a/packages/color-wheel/src/ColorWheel.ts b/packages/color-wheel/src/ColorWheel.ts
index 08cff2fcf61..71c1c95f53d 100644
--- a/packages/color-wheel/src/ColorWheel.ts
+++ b/packages/color-wheel/src/ColorWheel.ts
@@ -32,7 +32,7 @@ import {
 } from '@spectrum-web-components/reactive-controllers/src/ColorController.js';
 import { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';
 
-import styles from './color-wheel.css.js';
+import styles from './color-wheel.css' with { type: 'css' };
 
 /**
  * @element sp-color-wheel
diff --git a/packages/combobox/src/Combobox.ts b/packages/combobox/src/Combobox.ts
index b29542640a6..3f3ddb0d2be 100644
--- a/packages/combobox/src/Combobox.ts
+++ b/packages/combobox/src/Combobox.ts
@@ -38,7 +38,7 @@ import '@spectrum-web-components/picker-button/sp-picker-button.js';
 import { Textfield } from '@spectrum-web-components/textfield';
 import type { Tooltip } from '@spectrum-web-components/tooltip';
 
-import styles from './combobox.css.js';
+import styles from './combobox.css' with { type: 'css' };
 import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
 import { Menu, MenuItem } from '@spectrum-web-components/menu';
 
diff --git a/packages/contextual-help/src/ContextualHelp.ts b/packages/contextual-help/src/ContextualHelp.ts
index 30e10ef39b0..1b03d90ee4f 100644
--- a/packages/contextual-help/src/ContextualHelp.ts
+++ b/packages/contextual-help/src/ContextualHelp.ts
@@ -31,7 +31,7 @@ import {
     IS_MOBILE,
     MatchMediaController,
 } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';
-import styles from './contextual-help.css.js';
+import styles from './contextual-help.css' with { type: 'css' };
 
 /**
  * Spectrum Contextual help provides additional information about
diff --git a/packages/dialog/src/Dialog.ts b/packages/dialog/src/Dialog.ts
index 2c8728532f3..bb07e81c914 100644
--- a/packages/dialog/src/Dialog.ts
+++ b/packages/dialog/src/Dialog.ts
@@ -31,7 +31,7 @@ import { ObserveSlotPresence } from '@spectrum-web-components/shared';
 import { AlertDialog } from '@spectrum-web-components/alert-dialog/src/AlertDialog.js';
 import { classMap } from '@spectrum-web-components/base/src/directives.js';
 import type { CloseButton } from '@spectrum-web-components/button';
-import styles from './dialog.css.js';
+import styles from './dialog.css' with { type: 'css' };
 
 /**
  * @element sp-dialog
diff --git a/packages/divider/src/Divider.ts b/packages/divider/src/Divider.ts
index cc46a496c66..032efdb3420 100644
--- a/packages/divider/src/Divider.ts
+++ b/packages/divider/src/Divider.ts
@@ -20,7 +20,7 @@ import {
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 
-import styles from './divider.css.js';
+import styles from './divider.css' with { type: 'css' };
 
 /**
  * @element sp-divider
diff --git a/packages/field-group/src/FieldGroup.ts b/packages/field-group/src/FieldGroup.ts
index 68555841b39..95fb70b07d9 100644
--- a/packages/field-group/src/FieldGroup.ts
+++ b/packages/field-group/src/FieldGroup.ts
@@ -20,7 +20,7 @@ import {
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js';
 
-import styles from './field-group.css.js';
+import styles from './field-group.css' with { type: 'css' };
 
 /**
  * @element sp-field-group
diff --git a/packages/field-label/src/FieldLabel.ts b/packages/field-label/src/FieldLabel.ts
index 25b14d4a1d5..dbc3ce922fc 100644
--- a/packages/field-label/src/FieldLabel.ts
+++ b/packages/field-label/src/FieldLabel.ts
@@ -36,7 +36,7 @@ import {
     elementResolverUpdatedSymbol,
 } from '@spectrum-web-components/reactive-controllers/src/ElementResolution.js';
 
-import styles from './field-label.css.js';
+import styles from './field-label.css' with { type: 'css' };
 
 type AcceptsFocusVisisble = HTMLElement & { forceFocusVisible?(): void };
 type Labelable = Focusable & {
diff --git a/packages/help-text/src/HelpText.ts b/packages/help-text/src/HelpText.ts
index e009971ef89..78043bc5393 100644
--- a/packages/help-text/src/HelpText.ts
+++ b/packages/help-text/src/HelpText.ts
@@ -21,7 +21,7 @@ import {
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
 
-import styles from './help-text.css.js';
+import styles from './help-text.css' with { type: 'css' };
 
 type HelpTextVariants = 'neutral' | 'negative';
 
diff --git a/packages/infield-button/src/InfieldButton.ts b/packages/infield-button/src/InfieldButton.ts
index ee3ff649035..03047fcb89e 100644
--- a/packages/infield-button/src/InfieldButton.ts
+++ b/packages/infield-button/src/InfieldButton.ts
@@ -18,7 +18,7 @@ import {
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import { ButtonBase } from '@spectrum-web-components/button/src/ButtonBase.js';
 
-import styles from './infield-button.css.js';
+import styles from './infield-button.css' with { type: 'css' };
 
 /**
  * @element sp-infield-button
diff --git a/packages/meter/src/Meter.ts b/packages/meter/src/Meter.ts
index 174488275b0..d0aea1050e8 100644
--- a/packages/meter/src/Meter.ts
+++ b/packages/meter/src/Meter.ts
@@ -28,7 +28,7 @@ import { getLabelFromSlot } from '@spectrum-web-components/shared/src/get-label-
 import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
 import { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';
 import '@spectrum-web-components/field-label/sp-field-label.js';
-import styles from './meter.css.js';
+import styles from './meter.css' with { type: 'css' };
 
 export const meterVariants = ['positive', 'notice', 'negative'];
 
diff --git a/packages/overlay/src/Overlay.ts b/packages/overlay/src/Overlay.ts
index 9ec533d19a0..c4f9732b5a0 100644
--- a/packages/overlay/src/Overlay.ts
+++ b/packages/overlay/src/Overlay.ts
@@ -53,7 +53,7 @@ import {
     SlottableRequestEvent,
 } from './slottable-request-event.js';
 
-import styles from './overlay.css.js';
+import styles from './overlay.css' with { type: 'css' };
 import { FocusTrap } from 'focus-trap';
 
 const browserSupportsPopover = 'showPopover' in document.createElement('div');
diff --git a/packages/picker-button/src/PickerButton.ts b/packages/picker-button/src/PickerButton.ts
index 9fa2e11305a..911ca6f29f7 100644
--- a/packages/picker-button/src/PickerButton.ts
+++ b/packages/picker-button/src/PickerButton.ts
@@ -22,7 +22,7 @@ import { ButtonBase } from '@spectrum-web-components/button/src/ButtonBase.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
 import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';
 
-import styles from './picker-button.css.js';
+import styles from './picker-button.css' with { type: 'css' };
 import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
 
 const chevronClass = {
diff --git a/packages/progress-bar/src/ProgressBar.ts b/packages/progress-bar/src/ProgressBar.ts
index e8a1973d923..0ed9463f5fa 100644
--- a/packages/progress-bar/src/ProgressBar.ts
+++ b/packages/progress-bar/src/ProgressBar.ts
@@ -28,7 +28,7 @@ import { getLabelFromSlot } from '@spectrum-web-components/shared/src/get-label-
 import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
 import { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';
 import '@spectrum-web-components/field-label/sp-field-label.js';
-import styles from './progress-bar.css.js';
+import styles from './progress-bar.css' with { type: 'css' };
 
 /**
  * @element sp-progress-bar
diff --git a/packages/split-view/src/SplitView.ts b/packages/split-view/src/SplitView.ts
index c39805e557b..70525a755b7 100644
--- a/packages/split-view/src/SplitView.ts
+++ b/packages/split-view/src/SplitView.ts
@@ -33,7 +33,7 @@ import { randomID } from '@spectrum-web-components/shared/src/random-id.js';
 
 import { WithSWCResizeObserver } from './types';
 
-import styles from './split-view.css.js';
+import styles from './split-view.css' with { type: 'css' };
 
 const DEFAULT_MAX_SIZE = 3840;
 
diff --git a/packages/swatch/src/Swatch.ts b/packages/swatch/src/Swatch.ts
index 0801d37d1a9..a6ca872821b 100644
--- a/packages/swatch/src/Swatch.ts
+++ b/packages/swatch/src/Swatch.ts
@@ -28,7 +28,7 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js';
 
-import styles from './swatch.css.js';
+import styles from './swatch.css' with { type: 'css' };
 import dashStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js';
 
 export type SwatchBorder = 'light' | 'none' | undefined;
diff --git a/packages/swatch/src/SwatchGroup.ts b/packages/swatch/src/SwatchGroup.ts
index 0a1ce61a4e5..01740082112 100644
--- a/packages/swatch/src/SwatchGroup.ts
+++ b/packages/swatch/src/SwatchGroup.ts
@@ -26,7 +26,7 @@ import {
 import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
 import { MutationController } from '@lit-labs/observers/mutation-controller.js';
 
-import styles from './swatch-group.css.js';
+import styles from './swatch-group.css' with { type: 'css' };
 import type {
     Swatch,
     SwatchBorder,
diff --git a/packages/table/src/Table.ts b/packages/table/src/Table.ts
index 4262756f71e..b7bfa99ccd2 100644
--- a/packages/table/src/Table.ts
+++ b/packages/table/src/Table.ts
@@ -25,7 +25,7 @@ import '@spectrum-web-components/table/sp-table-body.js';
 import '@spectrum-web-components/table/sp-table-row.js';
 import '@spectrum-web-components/table/sp-table-checkbox-cell.js';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
-import styles from './table.css.js';
+import styles from './table.css' with { type: 'css' };
 import { TableBody } from './TableBody.js';
 import type { TableCheckboxCell } from './TableCheckboxCell.js';
 import type { TableHead } from './TableHead.js';
diff --git a/packages/table/src/TableBody.ts b/packages/table/src/TableBody.ts
index 1cad891579d..6a5c7b521c5 100644
--- a/packages/table/src/TableBody.ts
+++ b/packages/table/src/TableBody.ts
@@ -16,7 +16,7 @@ import {
     TemplateResult,
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
-import styles from './table-body.css.js';
+import styles from './table-body.css' with { type: 'css' };
 import { MutationController } from '@lit-labs/observers/mutation-controller.js';
 
 /**
diff --git a/packages/table/src/TableCell.ts b/packages/table/src/TableCell.ts
index 5c6d6cb7bc1..59698a44c50 100644
--- a/packages/table/src/TableCell.ts
+++ b/packages/table/src/TableCell.ts
@@ -17,7 +17,7 @@ import {
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 
-import styles from './table-cell.css.js';
+import styles from './table-cell.css' with { type: 'css' };
 
 /**
  * @element sp-table-cell
diff --git a/packages/table/src/TableCheckboxCell.ts b/packages/table/src/TableCheckboxCell.ts
index d373c6ba484..d662ef8e558 100644
--- a/packages/table/src/TableCheckboxCell.ts
+++ b/packages/table/src/TableCheckboxCell.ts
@@ -1,4 +1,4 @@
-/* 
+/*
 Copyright 2022 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License. You may obtain a copy
@@ -21,7 +21,7 @@ import {
     query,
 } from '@spectrum-web-components/base/src/decorators.js';
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import styles from './table-checkbox-cell.css.js';
+import styles from './table-checkbox-cell.css' with { type: 'css' };
 import { Checkbox } from '@spectrum-web-components/checkbox';
 
 /**
diff --git a/packages/table/src/TableHead.ts b/packages/table/src/TableHead.ts
index 90cf1ac85c5..a0faabfd139 100644
--- a/packages/table/src/TableHead.ts
+++ b/packages/table/src/TableHead.ts
@@ -19,7 +19,7 @@ import { property } from '@spectrum-web-components/base/src/decorators.js';
 import type { TableHeadCell } from './TableHeadCell.js';
 import { TableCheckboxCell } from './TableCheckboxCell.js';
 
-import styles from './table-head.css.js';
+import styles from './table-head.css' with { type: 'css' };
 
 /**
  * @element sp-table-head
diff --git a/packages/table/src/TableHeadCell.ts b/packages/table/src/TableHeadCell.ts
index 2b5eaaf9453..959b0a2e31b 100644
--- a/packages/table/src/TableHeadCell.ts
+++ b/packages/table/src/TableHeadCell.ts
@@ -20,7 +20,7 @@ import {
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-arrow100.js';
 
-import styles from './table-head-cell.css.js';
+import styles from './table-head-cell.css' with { type: 'css' };
 import arrowStyles from '@spectrum-web-components/icon/src/spectrum-icon-arrow.css.js';
 
 export type SortedEventDetails = {
diff --git a/packages/table/src/TableRow.ts b/packages/table/src/TableRow.ts
index 8bb77191eae..ad33b2f38e9 100644
--- a/packages/table/src/TableRow.ts
+++ b/packages/table/src/TableRow.ts
@@ -20,7 +20,7 @@ import {
     property,
     queryAssignedElements,
 } from '@spectrum-web-components/base/src/decorators.js';
-import styles from './table-row.css.js';
+import styles from './table-row.css' with { type: 'css' };
 import { TableCheckboxCell } from './TableCheckboxCell.js';
 
 /**
diff --git a/packages/tabs/src/TabsOverflow.ts b/packages/tabs/src/TabsOverflow.ts
index bd261144998..f14be4f7dcb 100644
--- a/packages/tabs/src/TabsOverflow.ts
+++ b/packages/tabs/src/TabsOverflow.ts
@@ -31,7 +31,7 @@ import '@spectrum-web-components/action-button/sp-action-button.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
 import chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
 import tabSizes from './tabs-sizes.css.js';
-import styles from './tabs-overflow.css.js';
+import styles from './tabs-overflow.css' with { type: 'css' };
 
 interface TabsOverflowState {
     canScrollLeft: boolean;
diff --git a/packages/tags/src/Tag.ts b/packages/tags/src/Tag.ts
index 1554b5ee913..bd8071adeeb 100644
--- a/packages/tags/src/Tag.ts
+++ b/packages/tags/src/Tag.ts
@@ -23,7 +23,7 @@ import { property } from '@spectrum-web-components/base/src/decorators.js';
 
 import '@spectrum-web-components/button/sp-clear-button.js';
 
-import styles from './tag.css.js';
+import styles from './tag.css' with { type: 'css' };
 
 /**
  * @element sp-tag
diff --git a/packages/tags/src/Tags.ts b/packages/tags/src/Tags.ts
index 95ebb3aa631..2175415d11a 100644
--- a/packages/tags/src/Tags.ts
+++ b/packages/tags/src/Tags.ts
@@ -22,7 +22,7 @@ import { RovingTabindexController } from '@spectrum-web-components/reactive-cont
 
 import { Tag } from './Tag.js';
 
-import styles from './tags.css.js';
+import styles from './tags.css' with { type: 'css' };
 
 /**
  * @element sp-tags
diff --git a/packages/thumbnail/src/Thumbnail.ts b/packages/thumbnail/src/Thumbnail.ts
index 388e6a01a01..0ac38e90e2f 100644
--- a/packages/thumbnail/src/Thumbnail.ts
+++ b/packages/thumbnail/src/Thumbnail.ts
@@ -20,7 +20,7 @@ import {
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import opacityCheckerboardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';
 
-import styles from './thumbnail.css.js';
+import styles from './thumbnail.css' with { type: 'css' };
 
 const validSizes = [
     '50',
diff --git a/packages/tray/src/Tray.ts b/packages/tray/src/Tray.ts
index 34aedf74489..d265d09badf 100644
--- a/packages/tray/src/Tray.ts
+++ b/packages/tray/src/Tray.ts
@@ -26,7 +26,7 @@ import { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focu
 import { MatchMediaController } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';
 
 import modalStyles from '@spectrum-web-components/modal/src/modal.css.js';
-import styles from './tray.css.js';
+import styles from './tray.css' with { type: 'css' };
 
 /**
  * @element sp-tray
@@ -50,7 +50,7 @@ export class Tray extends SpectrumElement {
 
     private transitionPromise = Promise.resolve();
 
-    private resolveTransitionPromise = () => {};
+    private resolveTransitionPromise: () => void = () => {};
 
     @query('.tray')
     private tray!: HTMLDivElement;
diff --git a/packages/underlay/src/Underlay.ts b/packages/underlay/src/Underlay.ts
index 3826edd1324..b7488ec56ed 100644
--- a/packages/underlay/src/Underlay.ts
+++ b/packages/underlay/src/Underlay.ts
@@ -18,7 +18,7 @@ import {
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 
-import styles from './underlay.css.js';
+import styles from './underlay.css' with { type: 'css' };
 
 /**
  * @element sp-underlay
diff --git a/projects/templates/plop-templates/component.ts.hbs b/projects/templates/plop-templates/component.ts.hbs
index bb996e01891..4d3047da27e 100644
--- a/projects/templates/plop-templates/component.ts.hbs
+++ b/projects/templates/plop-templates/component.ts.hbs
@@ -5,7 +5,7 @@ import {
     TemplateResult,
 } from '@spectrum-web-components/base';
 
-import styles from './{{ name }}.css.js';
+import styles from './{{ name }}.css' with { type: 'css' };
 
 /**
  * @element {{> tagnamePartial }}
@@ -20,4 +20,4 @@ export class {{className name}} extends SpectrumElement {
             Markup goes here
         `;
     }
-}
\ No newline at end of file
+}
diff --git a/tools/grid/src/Grid.ts b/tools/grid/src/Grid.ts
index 6cb3f9fa4c5..7263514155c 100644
--- a/tools/grid/src/Grid.ts
+++ b/tools/grid/src/Grid.ts
@@ -23,7 +23,7 @@ import {
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import { LitVirtualizer } from '@lit-labs/virtualizer/LitVirtualizer.js';
 import { grid } from '@lit-labs/virtualizer/layouts/grid.js';
-import styles from './grid.css.js';
+import styles from './grid.css' with { type: 'css' };
 import { GridController } from './GridController.js';
 
 /**
diff --git a/tools/truncated/src/Truncated.ts b/tools/truncated/src/Truncated.ts
index bc477a2d7f7..26b4d3121af 100644
--- a/tools/truncated/src/Truncated.ts
+++ b/tools/truncated/src/Truncated.ts
@@ -28,7 +28,7 @@ import {
     state,
 } from '@spectrum-web-components/base/src/decorators.js';
 
-import styles from './truncated.css.js';
+import styles from './truncated.css' with { type: 'css' };
 
 /**
  * @element sp-truncated