chore(cwc-v2): merge main to feat/cwc-v2 (carbon-design-system#9976)

* chore(cwc): generate cwc internal vendor package (carbon-design-system#9953)

[carbon-web-components]: updating build scripts to use internal vendor packages carbon-design-system#9763

This PR adds the the gulp tasks to build cwc to the internal vendor folder and changes the paths in web-components to reference the internal files instead.

**New**

- add to the gulp tasks in `web-components` to build out the `carbon-web-components` internal vendor package

**Changed**

- change paths to reference the internal `carbon-web-components` vendor files instead

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

* fix(issue-template): add cwc option (carbon-design-system#9967)

* chore(lit): upgrading to v2 (carbon-design-system#9905)

* chore(lit): update lit imports

* chore(lit): upgrading package json

* chore(lit): upgraded cwc to v2

* chore(lit): ensure cwc builds

* chore(lit): replace ifNonNull with ifDefined

* chore(lit): wc storybook starts now

* chore(lit): fixed small rendering errors

* chore(lit): bring back some changes

* fix(lit): couple things added

* chore(lit): uploaded upgraded packages to npm

* chore(deps): update yarn offline mirror

* chore(deps): fixed storybook again

* chore(deps): updating yarn offline mirror again

* fix(ci): ensured e2e tests pass

* fix(copy): ensured things dont double render

* fix(leadspace): remove unneeded imports

* chore(deps): updated to lit 2.6.0

Co-authored-by: Kenny Lam <kennylam@proton.me>

* chore(lit): fix deps paths

* chore(prettier): format code

* chore(prettier): update ignore file

* chore(ci): update paths

* chore(storybook): update icon path

---------

Co-authored-by: Anna Wen <54281166+annawen1@users.noreply.github.com>
Co-authored-by: Ariella Gilmore <ariellalgilmore@gmail.com>
Co-authored-by: Ignacio Becerra <i1becerr@ucsd.edu>

web-components/packages/carbon-web-components/.storybook/main.js

@@ -171,7 +171,7 @@ module.exports = {
     if (!config.resolve.alias) {
       config.resolve.alias = {};
     }
-    // In our development environment (where `carbon-web-components/es/icons` may not have been built yet),
+    // In our development environment (where `@carbon/web-components/es/icons` may not have been built yet),
     // we load icons from `@carbon/icons` and use a WebPack loader to convert the icons to `lit-html` version
     config.resolve.alias['@carbon/web-components/es/icons'] =
       '@carbon/icons/lib';

web-components/packages/carbon-web-components/README.md

@@ -23,13 +23,13 @@ with no framework tax, no framework silo.
   </a>
 </p>
 
-# `carbon-web-components`
+# `@carbon/web-components`
 
-`carbon-web-components` is a variant of Carbon Design System with Custom
+`@carbon/web-components` is a variant of Carbon Design System with Custom
 Elements v1 and Shadow DOM v1 specs.
 
-> The original `carbon-web-components` repository has been archived. All future
-> work for the package will take place in this monorepo. Please visit the
+> The original repository, `carbon-web-components`, has been archived. All
+> future work for the package will take place in this monorepo. Please visit the
 > [original repository](https://github.com/carbon-design-system/carbon-web-components)
 > for full history of the files.
 
@@ -294,7 +294,7 @@ import { AppComponent } from './app.component';
 export class AppModule {}
 ```
 
-The `.d.ts` files in `carbon-web-components` package are compiled with
+The `.d.ts` files in `@carbon/web-components` package are compiled with
 TypeScript 3.7. You can use TypeScript 3.7 in your Angular application with
 upcoming Angular `9.0` release, or with the following instructions, so your
 application can use those `.d.ts` files:
@@ -312,7 +312,7 @@ application can use those `.d.ts` files:
 [![Edit carbon-web-components with React](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/react)
 
 You can use wrapper React components in
-`carbon-web-components/es/components-react` generated
+`@carbon/web-components/es/components-react` generated
 [automatically from the custom elements](./src/globals/wrappers/createReactCustomElementType.ts)
 which allows you to use our components seamlessly in your React code. Here's an
 example:

web-components/packages/carbon-web-components/docs/form.md

@@ -38,7 +38,7 @@ import BXInput from '@carbon/web-components/es/components-react/input/input';
 
 ...
 
-// A React component that wraps form components from `carbon-web-components`
+// A React component that wraps form components from `@carbon/web-components`
 const FieldImpl = ({ input, label, type, meta: { touched, error } }) => {
   const validityMessage = !touched ? undefined : error;
   return (

web-components/packages/carbon-web-components/docs/styling.md

@@ -1,6 +1,6 @@
 # Using custom styles in components
 
-As Shadow DOM (one of the Web Components specs that `carbon-web-components` uses) promises, styles that `carbon-web-components` defines does not affect styles in your application, or vice versa.
+As Shadow DOM (one of the Web Components specs that `@carbon/web-components` uses) promises, styles that `@carbon/web-components` defines does not affect styles in your application, or vice versa.
 
 However, in cases where your application or a Carbon-derived style guide wants to change the styles of our components, there are a few options.
 

web-components/packages/carbon-web-components/gulp-tasks/build/modules/scripts.js

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -39,7 +39,7 @@ function scripts() {
           plugins: [
             ['@babel/plugin-transform-runtime', { useESModules: true, version: '7.8.0' }],
             [
-              'template-html-minifier',
+              'template-html-minifier', // TODO: verify this is actually needed, doesn't seem to be doing anything
               {
                 modules: {
                   'lit-html': ['html'],

web-components/packages/carbon-web-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/web-components",
-  "version": "1.23.0",
+  "version": "2.0.0-lit-v2-alpha",
   "publishConfig": {
     "access": "public"
   },

web-components/packages/carbon-web-components/src/components/data-table/data-table-story.ts

@@ -13,7 +13,7 @@ import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { action } from '@storybook/addon-actions';
 import { boolean, select } from '@storybook/addon-knobs';
-// Below path will be there when an application installs `carbon-web-components` package.
+// 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 Delete16 from '@carbon/web-components/es/icons/delete/16';
@@ -115,9 +115,9 @@ class BXCEDemoDataTable extends LitElement {
    * @param lhs A value.
    * @param rhs Another value.
    * @returns
-   *   * `0` if the given two values are equal
-   *   * A negative value to sort `lhs` to an index lower than `rhs`
-   *   * A positive value to sort `rhs` to an index lower than `lhs`
+   *   `0` if the given two values are equal
+   *   A negative value to sort `lhs` to an index lower than `rhs`
+   *   A positive value to sort `rhs` to an index lower than `lhs`
    */
   private _compare(lhs, rhs) {
     if (typeof lhs === 'number' && typeof rhs === 'number') {

web-components/packages/carbon-web-components/src/components/icon/icon-story.ts

@@ -9,7 +9,7 @@
 
 import { html, svg } from 'lit';
 
-// Below path will be there when an application installs `carbon-web-components` package.
+// 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/web-components/es/icons/add/16';

web-components/packages/carbon-web-components/src/components/link/link-story.ts

@@ -11,7 +11,7 @@ import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { action } from '@storybook/addon-actions';
 import { boolean, select } from '@storybook/addon-knobs';
-// Below path will be there when an application installs `carbon-web-components` package.
+// 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 Download16 from '@carbon/web-components/es/icons/download/16';

web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.ts

@@ -9,7 +9,7 @@
 
 import { html } from 'lit';
 import { boolean, select } from '@storybook/addon-knobs';
-// Below path will be there when an application installs `carbon-web-components` package.
+// 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 Filter16 from '@carbon/web-components/es/icons/filter/16';

web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts

@@ -9,7 +9,7 @@
 
 import { html } from 'lit';
 import { boolean, select } from '@storybook/addon-knobs';
-// Below path will be there when an application installs `carbon-web-components` package.
+// 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 Fade16 from '@carbon/web-components/es/icons/fade/16';

web-components/packages/carbon-web-components/tests/karma.conf.js

@@ -68,7 +68,7 @@ module.exports = function setupKarma(config) {
       devtool: 'inline-source-maps',
       resolve: {
         alias: {
-          // In our development environment (where `carbon-web-components/es/icons` may not have been built yet),
+          // In our development environment (where `@carbon/web-components/es/icons` may not have been built yet),
           // we load icons from `@carbon/icons` and use a Webpack loader to convert the icons to `lit-html` version
           '@carbon/web-components/es/icons': '@carbon/icons/lib',
         },
@@ -117,8 +117,7 @@ module.exports = function setupKarma(config) {
             test: /\.js$/,
             include: [
               __dirname,
-              path.dirname(require.resolve('lit-html')),
-              path.dirname(require.resolve('lit-element')),
+              path.dirname(require.resolve('lit')),
               path.dirname(require.resolve('@webcomponents/custom-elements')),
               // `ShadyCSS` NPM package is missing its entry point file
               path.dirname(

web-components/packages/carbon-web-components/tests/spec/tooltip_spec.ts

@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * 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 { html, render, TemplateResult } from 'lit-html';
+import { html, render, TemplateResult } from 'lit';
 import ResizeObserver from 'resize-observer-polyfill';
 import BXTooltip from '../../src/components/tooltip/tooltip';
 import BXTooltipBody from '../../src/components/tooltip/tooltip-body';

web-components/packages/carbon-web-components/tools/get-rollup-config.js

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -149,7 +149,7 @@ function getRollupConfig({
             ? []
             : [
                 [
-                  'template-html-minifier',
+                  'template-html-minifier', // TODO: verify this is actually needed, doesn't seem to be doing anything
                   {
                     modules: {
                       'lit-html': ['html'],