fix: specify js extensions for icon imports (#17818)

packages/web-components/.storybook/templates/with-layer.ts

@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import Layers from '@carbon/icons/lib/layers/16';
+import Layers from '@carbon/icons/lib/layers/16.js';
 import { prefix } from '../../src/globals/settings';
 
 import styles from './with-layer.scss?lit';

packages/web-components/src/components/accordion/accordion-item-skeleton.ts

@@ -8,7 +8,7 @@
  */
 
 import { LitElement, html } from 'lit';
-import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
+import ChevronRight16 from '@carbon/icons/lib/chevron--right/16.js';
 import { prefix } from '../../globals/settings';
 import '../skeleton-text/index';
 import styles from './accordion.scss?lit';

packages/web-components/src/components/accordion/accordion-item.ts

@@ -10,7 +10,7 @@
 import { classMap } from 'lit/directives/class-map.js';
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
+import ChevronRight16 from '@carbon/icons/lib/chevron--right/16.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import Handle from '../../globals/internal/handle';

packages/web-components/src/components/accordion/accordion-skeleton.ts

@@ -13,7 +13,7 @@ import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import { ACCORDION_ALIGNMENT } from './accordion';
 import { forEach } from '../../globals/internal/collection-helpers';
-import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
+import ChevronRight16 from '@carbon/icons/lib/chevron--right/16.js';
 import './accordion-item-skeleton';
 import '../skeleton-text/index';
 import styles from './accordion.scss?lit';

packages/web-components/src/components/breadcrumb/breadcrumb-overflow-menu.ts

@@ -9,7 +9,7 @@
 
 import { html } from 'lit';
 import { prefix } from '../../globals/settings';
-import OverflowMenuHorizontal16 from '@carbon/icons/lib/overflow-menu--horizontal/16';
+import OverflowMenuHorizontal16 from '@carbon/icons/lib/overflow-menu--horizontal/16.js';
 import CDSOverflowMenu from '../overflow-menu/overflow-menu';
 import styles from './breadcrumb.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';

packages/web-components/src/components/button/button.mdx

@@ -1,6 +1,6 @@
 import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-import Add16 from '@carbon/icons/lib/add/16';
+import Add16 from '@carbon/icons/lib/add/16.js';
 import * as ButtonStories from './button.stories';
 
 <Meta of={ButtonStories} />
@@ -69,7 +69,7 @@ will be styled as primary or ghost buttons.
 Our Storybook example also shows off the Tooltip feature, explained later.
 
 ````html
-import Add16 from '@carbon/icons/lib/add/16';
+import Add16 from '@carbon/icons/lib/add/16.js';
 
 <cds-button> ${Add16({ slot: 'icon' })} </cds-button>``` ## Set of Buttons You
 can wrap two `Button` elements in a `ButtonSet` when an action required by the

packages/web-components/src/components/button/button.stories.ts

@@ -11,7 +11,7 @@ import { html } from 'lit';
 // Below path will be there when an application installs `carbon-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import Add16 from '@carbon/icons/lib/add/16';
+import Add16 from '@carbon/icons/lib/add/16.js';
 import {
   BUTTON_KIND,
   BUTTON_TYPE,

packages/web-components/src/components/chat-button/chat-button.mdx

@@ -1,6 +1,6 @@
-import { ArgTypes, Markdown, Meta } from "@storybook/blocks";
-import { cdnJs, cdnCss } from "../../globals/internal/storybook-cdn";
-import * as ChatButtonStories from "./chat-button.stories";
+import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as ChatButtonStories from './chat-button.stories';
 
 <Meta of={ChatButtonStories} />
 
@@ -19,19 +19,19 @@ Here's a quick example to get you started.
 ### JS (via import)
 
 ```javascript
-import "@carbon/web-components/es/components/chat-button/index.js";
+import '@carbon/web-components/es/components/chat-button/index.js';
 ```
 
-<Markdown>{`${cdnJs({ components: ["chat-button"] })}`}</Markdown>
+<Markdown>{`${cdnJs({ components: ['chat-button'] })}`}</Markdown>
 <Markdown>{`${cdnCss()}`}</Markdown>
 
 ```javascript
-import "@carbon/web-components/es/components/chat-button/index.js";
-import Add16 from "@carbon/icons/lib/add/16";
+import '@carbon/web-components/es/components/chat-button/index.js';
+import Add16 from '@carbon/icons/lib/add/16.js';
 
 function App() {
   return html`<cds-chat-button>
-    Primary ${Add16({ slot: "icon" })}
+    Primary ${Add16({ slot: 'icon' })}
   </cds-chat-button>`;
 }
 ```

packages/web-components/src/components/chat-button/chat-button.stories.ts

@@ -9,7 +9,7 @@
 
 import { html } from 'lit';
 import './index';
-import Add16 from '@carbon/icons/lib/add/16';
+import Add16 from '@carbon/icons/lib/add/16.js';
 import styles from './chat-button-story.scss?lit';
 
 export const Default = () => {

packages/web-components/src/components/checkbox/checkbox-group.ts

@@ -11,8 +11,8 @@ import { classMap } from 'lit/directives/class-map.js';
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
 import CDSCheckbox from './checkbox';
 import styles from './checkbox.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';

packages/web-components/src/components/checkbox/checkbox.ts

@@ -14,8 +14,8 @@ import { property, query } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import FormMixin from '../../globals/mixins/form';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
 import styles from './checkbox.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 

packages/web-components/src/components/code-snippet/code-snippet.ts

@@ -10,7 +10,7 @@
 import { styleMap } from 'lit/directives/style-map.js';
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import ChevronDown16 from '@carbon/icons/lib/chevron--down/16';
+import ChevronDown16 from '@carbon/icons/lib/chevron--down/16.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import { CODE_SNIPPET_COLOR_SCHEME, CODE_SNIPPET_TYPE } from './defs';

packages/web-components/src/components/combo-box/combo-box.ts

@@ -10,7 +10,7 @@
 import { classMap } from 'lit/directives/class-map.js';
 import { TemplateResult, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import Close16 from '@carbon/icons/lib/close/16';
+import Close16 from '@carbon/icons/lib/close/16.js';
 import { prefix } from '../../globals/settings';
 import { findIndex, forEach } from '../../globals/internal/collection-helpers';
 import CDSDropdown, { DROPDOWN_KEYBOARD_ACTION } from '../dropdown/dropdown';

packages/web-components/src/components/content-switcher/content-switcher.stories.ts

@@ -12,9 +12,9 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { CONTENT_SWITCHER_SIZE } from './content-switcher';
 import './index';
 import { prefix } from '../../globals/settings';
-import TableOfContents16 from '@carbon/icons/lib/table-of-contents/16';
-import Workspace16 from '@carbon/icons/lib/workspace/16';
-import ViewMode2_16 from '@carbon/icons/lib/view--mode-2/16';
+import TableOfContents16 from '@carbon/icons/lib/table-of-contents/16.js';
+import Workspace16 from '@carbon/icons/lib/workspace/16.js';
+import ViewMode2_16 from '@carbon/icons/lib/view--mode-2/16.js';
 import '../layer/index';
 import '../../../.storybook/templates/with-layer';
 

packages/web-components/src/components/copy-button/copy-button.ts

@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import Copy16 from '@carbon/icons/lib/copy/16';
+import Copy16 from '@carbon/icons/lib/copy/16.js';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';

packages/web-components/src/components/data-table/stories/data-table-batch-actions.stories.ts

@@ -10,13 +10,13 @@
 import { html } from 'lit';
 import { prefix } from '../../../globals/settings';
 import { TABLE_SIZE } from '../table';
-import Add from '@carbon/icons/lib/add/16';
-import Save from '@carbon/icons/lib/save/16';
-import TrashCan from '@carbon/icons/lib/trash-can/16';
+import Add from '@carbon/icons/lib/add/16.js';
+import Save from '@carbon/icons/lib/save/16.js';
+import TrashCan from '@carbon/icons/lib/trash-can/16.js';
 // @ts-ignore
-import Download16 from '@carbon/icons/lib/download/16';
+import Download16 from '@carbon/icons/lib/download/16.js';
 // @ts-ignore
-import Settings16 from '@carbon/icons/lib/settings/16';
+import Settings16 from '@carbon/icons/lib/settings/16.js';
 import '../../overflow-menu';
 import '../index';
 import storyDocs from './data-table.mdx';

packages/web-components/src/components/data-table/stories/data-table-dynamic.stories.ts

@@ -10,13 +10,13 @@
 import { html } from 'lit';
 import { prefix } from '../../../globals/settings';
 import { TABLE_SIZE } from '../table';
-import Add from '@carbon/icons/lib/add/16';
-import Save from '@carbon/icons/lib/save/16';
-import TrashCan from '@carbon/icons/lib/trash-can/16';
+import Add from '@carbon/icons/lib/add/16.js';
+import Save from '@carbon/icons/lib/save/16.js';
+import TrashCan from '@carbon/icons/lib/trash-can/16.js';
 // @ts-ignore
-import Download16 from '@carbon/icons/lib/download/16';
+import Download16 from '@carbon/icons/lib/download/16.js';
 // @ts-ignore
-import Settings16 from '@carbon/icons/lib/settings/16';
+import Settings16 from '@carbon/icons/lib/settings/16.js';
 import '../index';
 import storyDocs from './data-table.mdx';
 

packages/web-components/src/components/data-table/stories/data-table-filtering.stories.ts

@@ -11,7 +11,7 @@ import { html } from 'lit';
 import { prefix } from '../../../globals/settings';
 import { TABLE_SIZE } from '../table';
 // @ts-ignore
-import Settings16 from '@carbon/icons/lib/settings/16';
+import Settings16 from '@carbon/icons/lib/settings/16.js';
 import '../index';
 import storyDocs from './data-table.mdx';
 

packages/web-components/src/components/data-table/stories/data-table-toolbar.stories.ts

@@ -10,8 +10,8 @@
 import { html } from 'lit';
 import { prefix } from '../../../globals/settings';
 import { TABLE_SIZE } from '../table';
-import Settings16 from '@carbon/icons/lib/settings/16';
-import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16';
+import Settings16 from '@carbon/icons/lib/settings/16.js';
+import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16.js';
 import storyDocs from './data-table.mdx';
 import '../index';
 

packages/web-components/src/components/data-table/table-header-cell.ts

@@ -10,8 +10,8 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import ArrowsVertical32 from '@carbon/icons/lib/arrows--vertical/32';
-import ArrowDown32 from '@carbon/icons/lib/arrow--down/32';
+import ArrowsVertical32 from '@carbon/icons/lib/arrows--vertical/32.js';
+import ArrowDown32 from '@carbon/icons/lib/arrow--down/32.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import {

packages/web-components/src/components/data-table/table-row.ts

@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
+import ChevronRight16 from '@carbon/icons/lib/chevron--right/16.js';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import FocusMixin from '../../globals/mixins/focus';
 import styles from './data-table.scss?lit';

packages/web-components/src/components/date-picker/date-picker-input.ts

@@ -10,14 +10,14 @@
 import { classMap } from 'lit/directives/class-map.js';
 import { LitElement, html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
-import Calendar16 from '@carbon/icons/lib/calendar/16';
+import Calendar16 from '@carbon/icons/lib/calendar/16.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import { INPUT_SIZE } from '../text-input/text-input';
 import { DATE_PICKER_INPUT_COLOR_SCHEME, DATE_PICKER_INPUT_KIND } from './defs';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
 import styles from './date-picker.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 

packages/web-components/src/components/date-picker/icon-plugin.ts

@@ -10,8 +10,8 @@
 import { render } from 'lit';
 import { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';
 import { Plugin } from 'flatpickr/dist/types/options';
-import ChevronLeft16 from '@carbon/icons/lib/chevron--left/16';
-import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
+import ChevronLeft16 from '@carbon/icons/lib/chevron--left/16.js';
+import ChevronRight16 from '@carbon/icons/lib/chevron--right/16.js';
 
 /**
  * @returns A Flatpickr plugin to set the right icons in the design system.

packages/web-components/src/components/dropdown/dropdown-item.ts

@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import Checkmark16 from '@carbon/icons/lib/checkmark/16';
+import Checkmark16 from '@carbon/icons/lib/checkmark/16.js';
 import { prefix } from '../../globals/settings';
 import { DROPDOWN_SIZE } from './dropdown';
 import styles from './dropdown.scss?lit';

packages/web-components/src/components/dropdown/dropdown.ts

@@ -12,9 +12,9 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { LitElement, html, TemplateResult } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import ChevronDown16 from '@carbon/icons/lib/chevron--down/16';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import ChevronDown16 from '@carbon/icons/lib/chevron--down/16.js';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
 import FocusMixin from '../../globals/mixins/focus';
 import FormMixin from '../../globals/mixins/form';
 import HostListenerMixin from '../../globals/mixins/host-listener';

packages/web-components/src/components/file-uploader/file-uploader-item.ts

@@ -9,9 +9,9 @@
 
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';
-import Close16 from '@carbon/icons/lib/close/16';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
+import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16.js';
+import Close16 from '@carbon/icons/lib/close/16.js';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
 import { prefix } from '../../globals/settings';
 import { LOADING_TYPE } from '../loading/loading';
 import { FILE_UPLOADER_ITEM_SIZE, FILE_UPLOADER_ITEM_STATE } from './defs';

packages/web-components/src/components/icon-button/icon-button.mdx

@@ -32,7 +32,7 @@ import '@carbon/web-components/es/components/icon-button/index.js';
 
 ```javascript
 import '@carbon/web-components/es/components/icon-button/index.js';
-import Edit16 from '@carbon/icons/lib/edit/16';
+import Edit16 from '@carbon/icons/lib/edit/16.js';
 
 function App() {
   return html`<cds-icon-button>

packages/web-components/src/components/icon-button/icon-button.stories.ts

@@ -11,7 +11,7 @@ import { html } from 'lit';
 import './index';
 import '../button/index';
 import { ICON_BUTTON_TOOLTIP_ALIGNMENT } from './defs';
-import Edit16 from '@carbon/icons/lib/edit/16';
+import Edit16 from '@carbon/icons/lib/edit/16.js';
 import { ICON_BUTTON_SIZE } from './defs';
 import { BUTTON_KIND } from '../button/defs';
 

packages/web-components/src/components/icon/icon.mdx

@@ -1,5 +1,5 @@
-import { ArgTypes, Meta } from "@storybook/blocks";
-import * as IconStories from "./icon.stories";
+import { ArgTypes, Meta } from '@storybook/blocks';
+import * as IconStories from './icon.stories';
 
 <Meta of={IconStories} />
 
@@ -14,7 +14,7 @@ Here's a quick example to get you started.
 ### JS (via import)
 
 ```javascript
-import Add16 from '@carbon/icons/lib/add/16';
+import Add16 from '@carbon/icons/lib/add/16.js';
 
 function App() {
   return (

packages/web-components/src/components/icon/icon.stories.ts

@@ -12,13 +12,13 @@ import { html, svg } from 'lit';
 // Below path will be there when an application installs `@carbon/web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import Add16 from '@carbon/icons/lib/add/16';
+import Add16 from '@carbon/icons/lib/add/16.js';
 // @ts-ignore
-import Add20 from '@carbon/icons/lib/add/20';
+import Add20 from '@carbon/icons/lib/add/20.js';
 // @ts-ignore
-import Add24 from '@carbon/icons/lib/add/24';
+import Add24 from '@carbon/icons/lib/add/24.js';
 // @ts-ignore
-import Add32 from '@carbon/icons/lib/add/32';
+import Add32 from '@carbon/icons/lib/add/32.js';
 
 export const Default = {
   render: () => html` ${Add16()} ${Add20()} ${Add24()} ${Add32()} `,

packages/web-components/src/components/inline-loading/inline-loading.ts

@@ -10,8 +10,8 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';
-import ErrorFilled16 from '@carbon/icons/lib/error--filled/16';
+import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16.js';
+import ErrorFilled16 from '@carbon/icons/lib/error--filled/16.js';
 import { prefix } from '../../globals/settings';
 import LOADING_TYPE from '../loading/types';
 import getLoadingIcon from '../loading/loading-icon';

packages/web-components/src/components/link/link.mdx

@@ -39,7 +39,7 @@ import '@carbon/web-components/es/components/list/index.js';
 Import the desired icon and incorporate with the link text:
 
 ```javascript
-import Download16 from '@carbon/icons/lib/download/16';
+import Download16 from '@carbon/icons/lib/download/16.js';
 
 function App() {
   return html`<cds-link href="https://www.ibm.com">