@carbon/web-components 2.16.0 → 2.17.0

package/README.md

@@ -1,173 +1,9 @@
-A Carbon Design System variant that's as easy to use as native HTML elements,
-with no framework tax, no framework silo.
-
-<p align="center">
-  <a href="https://www.carbondesignsystem.com">
-    <img alt="Carbon Design System" src="https://user-images.githubusercontent.com/3901764/57545698-ce5f2380-7320-11e9-8682-903df232d7b0.png" width="100%" />
-  </a>
-</p>
-
-> Carbon is an open-source design system built by IBM. With the IBM Design
-> Language as its foundation, the system consists of working code, design tools
-> and resources, human interface guidelines, and a vibrant community of
-> contributors.
-
-<p align="center">
-  <a href="https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/LICENSE">
-    <img src="https://img.shields.io/badge/license-Apache--2.0-blue.svg" alt="Carbon is released under the Apache-2.0 license" />
-  </a>
-</p>
-<p align="center">
-  <a href="https://percy.io/538fc19a/Carbon-Web-Components">
-    <img src="https://percy.io/static/images/percy-badge.svg" alt="This project is using Percy.io for visual regression testing" />
-  </a>
-</p>
-
 # `@carbon/web-components`
 
-`@carbon/web-components` is a variant of Carbon Design System with Custom
-Elements v1 and Shadow DOM v1 specs.
-
-<!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-
-- [Getting started](#getting-started)
-  - [Using CDN](#using-cdn)
-    - [How to install](#how-to-install)
-    - [Basic usage](#basic-usage)
-  - [Using ES imports](#using-es-imports)
-    - [How to install](#how-to-install-1)
-    - [Basic usage](#basic-usage-1)
-  - [Other usage guides](#other-usage-guides)
-- [JavaScript framework support](#javascript-framework-support)
-  - [Angular](#angular)
-  - [React](#react)
-  - [Vue](#vue)
-- [Getting started with development](#getting-started-with-development)
-- [Running React/Angular/Vue Storybook demo](#running-reactangularvue-storybook-demo)
-- [List of available components](#list-of-available-components)
-- [Browser support](#browser-support)
-- [Coding conventions](#coding-conventions)
-- [Creating build](#creating-build)
-- [Running unit test](#running-unit-test)
-- [Running build integration test](#running-build-integration-test)
-- [Running UI integration test](#running-ui-integration-test)
-
-<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+> Web components for the Carbon Design System
 
 ## Getting started
 
-### Using CDN
-
-#### How to install
-
-All components are available via CDN. This means that they can be added to your
-application without the need of any bundler configuration. Each component is
-available by the `latest` tag, or referencing a specific version (starting at
-version `v1.16.0`):
-
-```html
-<!-- By `latest` tag -->
-<script
-  type="module"
-  src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/accordion.min.js"></script>
-
-<!-- By specific version -->
-<script
-  type="module"
-  src="https://1.www.s81c.com/common/carbon/web-components/version/v2.0.0/accordion.min.js"></script>
-```
-
-<details>
-  <summary>See full list of available components via CDN</summary>
-
-- accordion.min.js
-- breadcrumb.min.js
-- button.min.js
-- checkbox.min.js
-- code-snippet.min.js
-- combo-box.min.js
-- content-switcher.min.js
-- copy-button.min.js
-- data-table.min.js
-- date-picker.min.js
-- dropdown.min.js
-- file-uploader.min.js
-- floating-menu.min.js
-- form.min.js
-- inline-loading.min.js
-- input.min.js
-- link.min.js
-- list.min.js
-- loading.min.js
-- modal.min.js
-- multi-select.min.js
-- notification.min.js
-- number-input.min.js
-- overflow-menu.min.js
-- pagination.min.js
-- progress-indicator.min.js
-- radio-button.min.js
-- search.min.js
-- select.min.js
-- skeleton-icon.min.js
-- skeleton-placeholder.min.js
-- skeleton-text.min.js
-- skip-to-content.min.js
-- slider.min.js
-- structured-list.min.js
-- tabs.min.js
-- tag.min.js
-- textarea.min.js
-- tile.min.js
-- toggle.min.js
-- tooltip.min.js
-- ui-shell.min.js
-</details>
-
-#### Basic usage
-
-The CDN artifacts define the custom elements for the browser, so they can be
-directly used once the script tag has been added to the page. For example:
-
-```html
-<!doctype html>
-<html>
-  <head>
-    <script
-      type="module"
-      src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/dropdown.min.js"></script>
-    <style type="text/css">
-      // Suppresses the custom element until it has been defined
-      cds-dropdown:not(:defined),
-      cds-dropdown-item:not(:defined) {
-        visibility: hidden;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="app">
-      <cds-dropdown trigger-content="Select an item">
-        <cds-dropdown-item value="all">Option 1</cds-dropdown-item>
-        <cds-dropdown-item value="cloudFoundry">Option 2</cds-dropdown-item>
-        <cds-dropdown-item value="staging">Option 3</cds-dropdown-item>
-        <cds-dropdown-item value="dea">Option 4</cds-dropdown-item>
-        <cds-dropdown-item value="router">Option 5</cds-dropdown-item>
-      </cds-dropdown>
-    </div>
-  </body>
-</html>
-```
-
-Our example at [CodeSandbox](https://codesandbox.io) shows usage with only CDN
-artifacts:
-
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/cdn)
-
-### Using ES imports
-
-#### How to install
-
 To install `@carbon/web-components` in your project, you will need to run the
 following command using [npm](https://www.npmjs.com/):
 
@@ -182,26 +18,23 @@ instead:
 yarn add @carbon/web-components
 ```
 
-#### Basic usage
-
-Our example at [CodeSandbox](https://codesandbox.io) shows the most basic usage:
+### Usage
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic)
+#### ES imports
 
 The first thing you need is **setting up a module bundler** to resolve
 ECMAScript `import`s. The above example uses [Webpack](https://webpack.js.org),
 but you can use other bundlers like [Rollup](https://rollupjs.org/) too.
 
-Once you set up a module bundler, you can start importing our component modules,
-for example:
+Once you set up a module bundler, you can start importing component modules:
 
 ```javascript
 import '@carbon/web-components/es/components/dropdown/dropdown.js';
 import '@carbon/web-components/es/components/dropdown/dropdown-item.js';
 ```
 
-Once you've imported the component modules, you can use our components in the
-same manner as native HTML tags, for example:
+Once you've imported the component modules, you can use the components in the
+same manner as native HTML tags:
 
 ```html
 <cds-dropdown trigger-content="Select an item">
@@ -213,61 +46,63 @@ same manner as native HTML tags, for example:
 </cds-dropdown>
 ```
 
-### Other usage guides
+See a working example
+[here](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/dropdown).
 
-- [Having components participate in form](./docs/form.md)
-- [Using custom styles in components](./docs/styling.md)
-- [Using `carbon-web-components` with old build toolchain](./docs/old-build-toolchain.md)
+#### CDN
 
-## JavaScript framework support
+The CDN artifacts define the custom elements for the browser, so they can be
+directly used once the script tag has been added to the page. For example:
 
-This package also supports integration with other JavaScript frameworks like
-Angular and Vue. This is achievable since Web Components is the modern browser
-standard, and works well with other front-end frameworks that exist in the
-application. In turn, this also comes with the benefits of encapsulation within
-the Shadow DOM:
+```html
+<!doctype html>
+<html>
+  <head>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/dropdown.min.js"></script>
+    <style type="text/css">
+      // Suppresses the custom element until it has been defined
+      cds-dropdown:not(:defined),
+      cds-dropdown-item:not(:defined) {
+        visibility: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <cds-dropdown trigger-content="Select an item">
+        <cds-dropdown-item value="all">Option 1</cds-dropdown-item>
+        <cds-dropdown-item value="cloudFoundry">Option 2</cds-dropdown-item>
+        <cds-dropdown-item value="staging">Option 3</cds-dropdown-item>
+        <cds-dropdown-item value="dea">Option 4</cds-dropdown-item>
+        <cds-dropdown-item value="router">Option 5</cds-dropdown-item>
+      </cds-dropdown>
+    </div>
+  </body>
+</html>
+```
 
-### Angular
+Each component is available by referencing a specific version (starting at
+version `v1.16.0`):
 
-Angular users can use our components in the same manner as native HTML tags,
-too, once you add
-[`CUSTOM_ELEMENTS_SCHEMA`](https://angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA)
-schema to your Angular module, for example:
+<!-- By specific version -->
+<script
+  type="module"
+  src="https://1.www.s81c.com/common/carbon/web-components/version/v2.16.0/accordion.min.js"></script>
 
-```javascript
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  declarations: [AppComponent],
-  imports: [BrowserModule],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
 ```
 
-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:
-
-- Set `true` to
-  [`angularCompilerOptions.disableTypeScriptVersionCheck`](https://angular.io/guide/angular-compiler-options#disabletypescriptversioncheck)
-  in `tsconfig.json`
-- In `polyfills.ts`, change
-  [`__importDefault` TypeScript helper](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#example-8)
-  as follows:
-  `window.__importDefault = mod => (mod?.__esModule ? mod : { default: mod })`
+See a working example
+[here](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/dropdown?file=cdn.html).
 
-### Vue
+For a full list of components available, check out our
+[Storybook](https://web-components.carbondesignsystem.com/).
 
-[![Edit carbon-web-components with Vue](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/vue)
+### Other usage guides
 
-Vue users can use our components in the same manner as native HTML tags, without
-any additional steps!
+- [Using components in a form](./docs/form.md)
+- [Using custom styles in components](./docs/styling.md)
 
 ## Getting started with development
 
@@ -276,38 +111,31 @@ any additional steps!
 3. `cd packages/carbon-web-components`
 4. `yarn wca && yarn storybook`
 
-## List of available components
+## Creating build
 
-View available web components at:
-https://www.ibm.com/standards/carbon/carbon-web-components. You can see usage
-information in several ways:
+```
 
-1. Going to Docs tab, where it shows the usage and available attributes,
-   properties and custom events.
-2. Clicking the **KNOBS** tab at the bottom and changing values there. Most
-   knobs are shown as something like `Button kind (kind)`, where `kind` is the
-   attribute name
-3. Clicking the **ACTION LOGGER** tab at the bottom and interacting with the
-   selected component. You may see something like `cds-modal-closed` which
-   typically indicates that an event with such event type is fired. You can also
-   expand the twistie to see the details of the event
+> yarn install yarn build
 
-## Browser support
+```
 
-- Latest Chrome/Safari/FF
+You'll see the build artifacts in `/path/to/carbon-web-components/es` directory.
 
-## Coding conventions
+## 📖 API Documentation
 
-Can be found at [here](./src/coding-conventions.md).
+If you're looking for `@carbon/web-components` API documentation, check out:
 
-## Creating build
+- [Storybook](https://web-components.carbondesignsystem.com/)
 
-```
-> yarn clean
-> yarn build
-```
+## 🙌 Contributing
 
-You'll see the build artifacts in `/path/to/carbon-web-components/es` directory.
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀
+
+## 📝 License
+
+Licensed under the [Apache 2.0 License](/LICENSE).
 
 ## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> IBM Telemetry
 
@@ -317,3 +145,4 @@ collection. To opt out, see
 [Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).
 For more information on the data being collected, please see the
 [IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).
+```

package/custom-elements.json

@@ -9380,7 +9380,7 @@
       ],
       "events": [
         {
-          "name": "cds-pages-select-changed",
+          "name": "cds-pagination-changed-current",
           "description": "The custom event fired after the current page is changed from `<cds-pages-select>`."
         },
         {

package/dist/16-0c880364.js

@@ -45,13 +45,13 @@ PERFORMANCE OF THIS SOFTWARE.
 		    PERFORMANCE OF THIS SOFTWARE.
 		    *****************************************************************************
  * 
- * lit-element:
+ * lit-html:
  * 
  * @license
- * Copyright 2017 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  * 
- * lit-html:
+ * lit-element:
  * 
  * @license
  * Copyright 2017 Google LLC

package/dist/16-1d873b4f.js

@@ -45,13 +45,13 @@ PERFORMANCE OF THIS SOFTWARE.
 		    PERFORMANCE OF THIS SOFTWARE.
 		    *****************************************************************************
  * 
- * lit-element:
+ * lit-html:
  * 
  * @license
- * Copyright 2017 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  * 
- * lit-html:
+ * lit-element:
  * 
  * @license
  * Copyright 2017 Google LLC

package/dist/16-2b64eac7.js

@@ -45,13 +45,13 @@ PERFORMANCE OF THIS SOFTWARE.
 		    PERFORMANCE OF THIS SOFTWARE.
 		    *****************************************************************************
  * 
- * lit-element:
+ * lit-html:
  * 
  * @license
- * Copyright 2017 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  * 
- * lit-html:
+ * lit-element:
  * 
  * @license
  * Copyright 2017 Google LLC

package/dist/16-4e56fae5.js

@@ -45,13 +45,13 @@ PERFORMANCE OF THIS SOFTWARE.
 		    PERFORMANCE OF THIS SOFTWARE.
 		    *****************************************************************************
  * 
- * lit-element:
+ * lit-html:
  * 
  * @license
- * Copyright 2017 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  * 
- * lit-html:
+ * lit-element:
  * 
  * @license
  * Copyright 2017 Google LLC

package/dist/16-66567a49.js

@@ -45,13 +45,13 @@ PERFORMANCE OF THIS SOFTWARE.
 		    PERFORMANCE OF THIS SOFTWARE.
 		    *****************************************************************************
  * 
- * lit-element:
+ * lit-html:
  * 
  * @license
- * Copyright 2017 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  * 
- * lit-html:
+ * lit-element:
  * 
  * @license
  * Copyright 2017 Google LLC

package/dist/16-678c0d5c.js

@@ -45,13 +45,13 @@ PERFORMANCE OF THIS SOFTWARE.
 		    PERFORMANCE OF THIS SOFTWARE.
 		    *****************************************************************************
  * 
- * lit-element:
+ * lit-html:
  * 
  * @license
- * Copyright 2017 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  * 
- * lit-html:
+ * lit-element:
  * 
  * @license
  * Copyright 2017 Google LLC

package/dist/16-9501e226.js

@@ -45,13 +45,13 @@ PERFORMANCE OF THIS SOFTWARE.
 		    PERFORMANCE OF THIS SOFTWARE.
 		    *****************************************************************************
  * 
- * lit-element:
+ * lit-html:
  * 
  * @license
- * Copyright 2017 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  * 
- * lit-html:
+ * lit-element:
  * 
  * @license
  * Copyright 2017 Google LLC

package/dist/16-a75c4181.js

@@ -45,13 +45,13 @@ PERFORMANCE OF THIS SOFTWARE.
 		    PERFORMANCE OF THIS SOFTWARE.
 		    *****************************************************************************
  * 
- * lit-element:
+ * lit-html:
  * 
  * @license
- * Copyright 2017 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  * 
- * lit-html:
+ * lit-element:
  * 
  * @license
  * Copyright 2017 Google LLC

package/dist/16-d83d40a3.js

@@ -45,13 +45,13 @@ PERFORMANCE OF THIS SOFTWARE.
 		    PERFORMANCE OF THIS SOFTWARE.
 		    *****************************************************************************
  * 
- * lit-element:
+ * lit-html:
  * 
  * @license
- * Copyright 2017 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  * 
- * lit-html:
+ * lit-element:
  * 
  * @license
  * Copyright 2017 Google LLC

package/dist/20-fd76427e.js

@@ -45,13 +45,13 @@ PERFORMANCE OF THIS SOFTWARE.
 		    PERFORMANCE OF THIS SOFTWARE.
 		    *****************************************************************************
  * 
- * lit-element:
+ * lit-html:
  * 
  * @license
- * Copyright 2017 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  * 
- * lit-html:
+ * lit-element:
  * 
  * @license
  * Copyright 2017 Google LLC

package/dist/accordion.min.js

@@ -45,13 +45,13 @@ PERFORMANCE OF THIS SOFTWARE.
 		    PERFORMANCE OF THIS SOFTWARE.
 		    *****************************************************************************
  * 
- * lit-element:
+ * lit-html:
  * 
  * @license
- * Copyright 2017 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  * 
- * lit-html:
+ * lit-element:
  * 
  * @license
  * Copyright 2017 Google LLC

package/dist/ai-label.min.js

@@ -45,13 +45,13 @@ PERFORMANCE OF THIS SOFTWARE.
 		    PERFORMANCE OF THIS SOFTWARE.
 		    *****************************************************************************
  * 
- * lit-element:
+ * lit-html:
  * 
  * @license
- * Copyright 2017 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  * 
- * lit-html:
+ * lit-element:
  * 
  * @license
  * Copyright 2017 Google LLC

package/dist/ai-skeleton.min.js

@@ -45,13 +45,13 @@ PERFORMANCE OF THIS SOFTWARE.
 		    PERFORMANCE OF THIS SOFTWARE.
 		    *****************************************************************************
  * 
- * lit-element:
+ * lit-html:
  * 
  * @license
- * Copyright 2017 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  * 
- * lit-html:
+ * lit-element:
  * 
  * @license
  * Copyright 2017 Google LLC

package/dist/breadcrumb.min.js

@@ -45,13 +45,13 @@ PERFORMANCE OF THIS SOFTWARE.
 		    PERFORMANCE OF THIS SOFTWARE.
 		    *****************************************************************************
  * 
- * lit-element:
+ * lit-html:
  * 
  * @license
- * Copyright 2017 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  * 
- * lit-html:
+ * lit-element:
  * 
  * @license
  * Copyright 2017 Google LLC

package/dist/button-1aa013a7.js

@@ -45,13 +45,13 @@ PERFORMANCE OF THIS SOFTWARE.
 		    PERFORMANCE OF THIS SOFTWARE.
 		    *****************************************************************************
  * 
- * lit-element:
+ * lit-html:
  * 
  * @license
- * Copyright 2017 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  * 
- * lit-html:
+ * lit-element:
  * 
  * @license
  * Copyright 2017 Google LLC

package/dist/button-set-200cbd8d.js

@@ -45,13 +45,13 @@ PERFORMANCE OF THIS SOFTWARE.
 		    PERFORMANCE OF THIS SOFTWARE.
 		    *****************************************************************************
  * 
- * lit-element:
+ * lit-html:
  * 
  * @license
- * Copyright 2017 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  * 
- * lit-html:
+ * lit-element:
  * 
  * @license
  * Copyright 2017 Google LLC