diff --git a/.yarn/cache/@rollup-plugin-alias-npm-5.1.0-5f8a6a898f-2749f9563d.zip b/.yarn/cache/@rollup-plugin-alias-npm-5.1.0-5f8a6a898f-2749f9563d.zip
new file mode 100644
index 00000000000..127c1744bff
Binary files /dev/null and b/.yarn/cache/@rollup-plugin-alias-npm-5.1.0-5f8a6a898f-2749f9563d.zip differ
diff --git a/.yarn/cache/slash-npm-4.0.0-ce4bbc4a80-da8e4af737.zip b/.yarn/cache/slash-npm-4.0.0-ce4bbc4a80-da8e4af737.zip
new file mode 100644
index 00000000000..1382ade5d5b
Binary files /dev/null and b/.yarn/cache/slash-npm-4.0.0-ce4bbc4a80-da8e4af737.zip differ
diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts
index af2b6b91f3f..dcd6c9c6491 100644
--- a/packages/carbon-web-components/.storybook/main.ts
+++ b/packages/carbon-web-components/.storybook/main.ts
@@ -1,3 +1,12 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
import type { StorybookConfig } from '@storybook/web-components-vite';
import { mergeConfig } from 'vite';
import { litStyleLoader, litTemplateLoader } from '@mordech/vite-lit-loader';
diff --git a/packages/carbon-web-components/package.json b/packages/carbon-web-components/package.json
index a850784dd12..2d2b182bd3e 100644
--- a/packages/carbon-web-components/package.json
+++ b/packages/carbon-web-components/package.json
@@ -100,6 +100,7 @@
"@percy/cli": "^1.27.4",
"@percy/cypress": "^3.1.2",
"@percy/dom": "^1.27.5",
+ "@rollup/plugin-alias": "^5.1.0",
"@rollup/plugin-babel": "^5.3.1",
"@rollup/plugin-commonjs": "^21.0.3",
"@rollup/plugin-node-resolve": "^8.4.0",
diff --git a/packages/carbon-web-components/src/components/checkbox/checkbox-group.ts b/packages/carbon-web-components/src/components/checkbox/checkbox-group.ts
index eb3cae39563..7887bd42d48 100644
--- a/packages/carbon-web-components/src/components/checkbox/checkbox-group.ts
+++ b/packages/carbon-web-components/src/components/checkbox/checkbox-group.ts
@@ -1,7 +1,7 @@
/**
* @license
*
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
@@ -14,7 +14,7 @@ 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 CDSCheckbox from './checkbox';
-import styles from './checkbox.scss';
+import styles from './checkbox.scss?lit';
import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
/**
diff --git a/packages/carbon-web-components/src/components/copy-button/copy-button.stories.ts b/packages/carbon-web-components/src/components/copy-button/copy-button.stories.ts
index 6b5958e0097..f0719e35219 100644
--- a/packages/carbon-web-components/src/components/copy-button/copy-button.stories.ts
+++ b/packages/carbon-web-components/src/components/copy-button/copy-button.stories.ts
@@ -1,7 +1,7 @@
/**
* @license
*
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
@@ -53,7 +53,6 @@ const meta: Meta = {
};
export const Default = {
- name: 'Default',
parameters: {
controls: { exclude: /(.*?)/ },
},
@@ -63,4 +62,4 @@ export const Playground = {
argTypes: controls,
};
-export default meta;
\ No newline at end of file
+export default meta;
diff --git a/packages/carbon-web-components/src/components/data-table/table-cell-content.ts b/packages/carbon-web-components/src/components/data-table/table-cell-content.ts
index b1111e0ecf7..55facd1cdeb 100644
--- a/packages/carbon-web-components/src/components/data-table/table-cell-content.ts
+++ b/packages/carbon-web-components/src/components/data-table/table-cell-content.ts
@@ -1,14 +1,14 @@
/**
* @license
*
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
import { prefix } from '../../globals/settings';
import styles from './data-table.scss?lit';
diff --git a/packages/carbon-web-components/src/components/icon/icon.stories.ts b/packages/carbon-web-components/src/components/icon/icon.stories.ts
index 9271ae03450..663cc49f2cc 100644
--- a/packages/carbon-web-components/src/components/icon/icon.stories.ts
+++ b/packages/carbon-web-components/src/components/icon/icon.stories.ts
@@ -1,7 +1,7 @@
/**
* @license
*
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
@@ -22,58 +22,56 @@ import Add32 from '@carbon/web-components/es/icons/add/32';
import storyDocs from './icon.mdx';
-
export const Default = {
- render: () => html` ${Add16()} ${Add20()} ${Add24()} ${Add32()} `
-}
-
+ render: () => html` ${Add16()} ${Add20()} ${Add24()} ${Add32()} `,
+};
export const withCustomClass = {
name: 'With custom class',
render: () => html`
-
- ${Add16({ class: 'test-class' })} ${Add20({ class: 'test-class' })}
- ${Add24({ class: 'test-class' })} ${Add32({ class: 'test-class' })}
-`
-}
+
+ ${Add16({ class: 'test-class' })} ${Add20({ class: 'test-class' })}
+ ${Add24({ class: 'test-class' })} ${Add32({ class: 'test-class' })}
+ `,
+};
export const withAriaLabel = {
name: 'With aria label',
render: () => html`
- ${Add16({ 'aria-label': 'add' })} ${Add20({ 'aria-label': 'add' })}
- ${Add24({ 'aria-label': 'add' })} ${Add32({ 'aria-label': 'add' })}
-`
-}
+ ${Add16({ 'aria-label': 'add' })} ${Add20({ 'aria-label': 'add' })}
+ ${Add24({ 'aria-label': 'add' })} ${Add32({ 'aria-label': 'add' })}
+ `,
+};
-export const withTitle = {
+export const withTitle = {
name: 'With title',
render: () => html`
- ${Add16({
- 'aria-describedby': 'id-title-1',
- // @ts-ignore
- children: svg`add`,
- })}
- ${Add20({
- 'aria-describedby': 'id-title-2',
- // @ts-ignore
- children: svg`add`,
- })}
- ${Add24({
- 'aria-describedby': 'id-title-3',
- // @ts-ignore
- children: svg`add`,
- })}
- ${Add32({
- 'aria-describedby': 'id-title-4',
- // @ts-ignore
- children: svg`add`,
- })}
-`
-}
+ ${Add16({
+ 'aria-describedby': 'id-title-1',
+ // @ts-ignore
+ children: svg`add`,
+ })}
+ ${Add20({
+ 'aria-describedby': 'id-title-2',
+ // @ts-ignore
+ children: svg`add`,
+ })}
+ ${Add24({
+ 'aria-describedby': 'id-title-3',
+ // @ts-ignore
+ children: svg`add`,
+ })}
+ ${Add32({
+ 'aria-describedby': 'id-title-4',
+ // @ts-ignore
+ children: svg`add`,
+ })}
+ `,
+};
const meta = {
title: 'Components/Icon',
@@ -84,4 +82,4 @@ const meta = {
},
};
-export default meta;
\ No newline at end of file
+export default meta;
diff --git a/packages/carbon-web-components/src/components/link/link.stories.ts b/packages/carbon-web-components/src/components/link/link.stories.ts
index cb3ec31b4b2..32d5f4d069e 100644
--- a/packages/carbon-web-components/src/components/link/link.stories.ts
+++ b/packages/carbon-web-components/src/components/link/link.stories.ts
@@ -1,7 +1,7 @@
/**
* @license
*
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
@@ -19,7 +19,7 @@ const defaultArgs = {
inline: false,
size: LINK_SIZE.MEDIUM,
visited: false,
-}
+};
const controls = {
disabled: {
@@ -31,20 +31,20 @@ const controls = {
description: `Provide the href attribute for the node`,
},
size: {
- control: 'radio', options: [LINK_SIZE.SMALL, LINK_SIZE.MEDIUM, LINK_SIZE.LARGE],
- description: `Specify the size of the Link. Currently supports either sm, 'md' (default) or 'lg' as an option.`
+ control: 'radio',
+ options: [LINK_SIZE.SMALL, LINK_SIZE.MEDIUM, LINK_SIZE.LARGE],
+ description: `Specify the size of the Link. Currently supports either sm, 'md' (default) or 'lg' as an option.`,
},
visited: {
control: 'boolean',
description: `Specify whether you want the link to receive visited styles after the link has been clicked`,
},
-}
+};
export const Default = {
- render: () => html` Link `
+ render: () => html` Link `,
};
-
export const Inline = {
render: () => html`
- `
+ `,
};
export const PairedWithIcon = {
@@ -72,12 +72,7 @@ export const PairedWithIcon = {
parameters: {
controls: { exclude: /(.*?)/ },
},
- render: ({
- disabled,
- href,
- size,
- onClick
- }) => html`
+ render: ({ disabled, href, size, onClick }) => html`
html`
+ render: ({ disabled, href, inline, size, visited, onClick }) => html`
Default({
diff --git a/packages/carbon-web-components/tests/spec/link_spec.ts b/packages/carbon-web-components/tests/spec/link_spec.ts
index ca111458a12..83b6de7c619 100644
--- a/packages/carbon-web-components/tests/spec/link_spec.ts
+++ b/packages/carbon-web-components/tests/spec/link_spec.ts
@@ -1,7 +1,7 @@
/**
* @license
*
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
@@ -9,10 +9,10 @@
import { render } from 'lit';
import '../../src/components/link/link';
-import { pairedWithIcon } from '../../src/components/link/link.stories';
+import { PairedWithIcon } from '../../src/components/link/link.stories';
const template = (props?) =>
- pairedWithIcon({
+ (PairedWithIcon = {
'cds-link': props,
});
diff --git a/packages/carbon-web-components/tests/spec/overflow-menu_spec.ts b/packages/carbon-web-components/tests/spec/overflow-menu_spec.ts
index 1c584a2a408..0f20d42e726 100644
--- a/packages/carbon-web-components/tests/spec/overflow-menu_spec.ts
+++ b/packages/carbon-web-components/tests/spec/overflow-menu_spec.ts
@@ -1,7 +1,7 @@
/**
* @license
*
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
@@ -10,7 +10,7 @@
import { render } from 'lit';
import CDSOverflowMenu from '../../src/components/overflow-menu/overflow-menu';
-import { Playground } from '../../src/components/overflow-menu/overflow-menu-story';
+import { Playground } from '../../src/components/overflow-menu/overflow-menu.stories';
const template = (props?) =>
Playground({
diff --git a/packages/carbon-web-components/tools/babel-plugin-resource-js-paths.js b/packages/carbon-web-components/tools/babel-plugin-resource-js-paths.js
index 5f21a6317b9..3718349930d 100644
--- a/packages/carbon-web-components/tools/babel-plugin-resource-js-paths.js
+++ b/packages/carbon-web-components/tools/babel-plugin-resource-js-paths.js
@@ -1,7 +1,7 @@
/**
* @license
*
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
@@ -18,7 +18,7 @@ module.exports = function resourceJSPaths(babel) {
ImportDeclaration(path, state) {
const { node } = path;
const { value: source } = node.source;
- if (/^\..*\.scss$/i.test(source)) {
+ if (/^\..*\.scss\?lit$/i.test(source)) {
const declaration = t.cloneNode(node);
declaration.source.value = `./${replaceExtension(source, '.css.js')}`;
path.replaceWith(declaration);
diff --git a/packages/carbon-web-components/tools/get-rollup-config.js b/packages/carbon-web-components/tools/get-rollup-config.js
index 583ccd2fd6d..5c1d6194bc8 100644
--- a/packages/carbon-web-components/tools/get-rollup-config.js
+++ b/packages/carbon-web-components/tools/get-rollup-config.js
@@ -1,7 +1,7 @@
/**
* @license
*
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
@@ -20,7 +20,7 @@ const { nodeResolve } = require('@rollup/plugin-node-resolve');
const rtlcss = require('rtlcss');
const { promisify } = require('util');
const { terser } = require('rollup-plugin-terser');
-
+const alias = require('@rollup/plugin-alias');
const carbonIcons = require('./rollup-plugin-icons');
const fixHostPseudo = require('./postcss-fix-host-pseudo');
const license = require('./rollup-plugin-license');
@@ -118,6 +118,9 @@ function getRollupConfig({
return {
input: _generateInputs(mode, dir, folders),
plugins: [
+ alias({
+ entries: [{ find: /^(.*)\.scss\?lit$/, replacement: '$1.scss' }],
+ }),
multiInput(),
nodeResolve({
browser: true,
diff --git a/yarn.lock b/yarn.lock
index 00a186d711b..9503dcde326 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4262,6 +4262,7 @@ __metadata:
"@percy/cli": "npm:^1.27.4"
"@percy/cypress": "npm:^3.1.2"
"@percy/dom": "npm:^1.27.5"
+ "@rollup/plugin-alias": "npm:^5.1.0"
"@rollup/plugin-babel": "npm:^5.3.1"
"@rollup/plugin-commonjs": "npm:^21.0.3"
"@rollup/plugin-node-resolve": "npm:^8.4.0"
@@ -7681,6 +7682,20 @@ __metadata:
languageName: node
linkType: hard
+"@rollup/plugin-alias@npm:^5.1.0":
+ version: 5.1.0
+ resolution: "@rollup/plugin-alias@npm:5.1.0"
+ dependencies:
+ slash: "npm:^4.0.0"
+ peerDependencies:
+ rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+ peerDependenciesMeta:
+ rollup:
+ optional: true
+ checksum: 2749f9563dba9274e4324fcd14ffe761fa66ee3baab307ba583d0348adfa2c1d2a164f59eac8c26a9ce7c713a99a991a831c072101e83697157ccf082c362310
+ languageName: node
+ linkType: hard
+
"@rollup/plugin-babel@npm:^5.3.1":
version: 5.3.1
resolution: "@rollup/plugin-babel@npm:5.3.1"
@@ -35383,6 +35398,13 @@ __metadata:
languageName: node
linkType: hard
+"slash@npm:^4.0.0":
+ version: 4.0.0
+ resolution: "slash@npm:4.0.0"
+ checksum: da8e4af73712253acd21b7853b7e0dbba776b786e82b010a5bfc8b5051a1db38ed8aba8e1e8f400dd2c9f373be91eb1c42b66e91abb407ff42b10feece5e1d2d
+ languageName: node
+ linkType: hard
+
"slice-ansi@npm:^2.1.0":
version: 2.1.0
resolution: "slice-ansi@npm:2.1.0"