chore(merge): merge release/v2.0.0 to main (carbon-design-system#…

…11217)

### Description

This merges the `release/v2.0.0` release branch into `main`.

### Changelog

**New**

- {{new thing}}

**Changed**

- {{changed thing}}

**Removed**

- {{removed thing}}

<!-- 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) -->

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

@@ -50,7 +50,7 @@
     "test:unit": "cross-env NODE_OPTIONS=--openssl-legacy-provider gulp test:unit",
     "test:unit:updateSnapshot": "NODE_OPTIONS=--openssl-legacy-provider gulp test:unit --update-snapshot",
     "typecheck": "tsc --noEmit -p tsconfig.json",
-    "visual-snapshot": "yarn build-storybook && percy storybook ./storybook-static",
+    "visual-snapshot": "yarn build-storybook && percy storybook:start ./storybook-static",
     "wca": "web-component-analyzer analyze src --outFile custom-elements.json"
   },
   "files": [
@@ -96,9 +96,9 @@
     "@carbon/icons": "^11.31.0",
     "@open-wc/semantic-dom-diff": "~0.18.0",
     "@percy-io/in-percy": "^0.1.11",
-    "@percy/cli": "^1.8.1",
-    "@percy/cypress": "^3.1.1",
-    "@percy/dom": "^1.0.5",
+    "@percy/cli": "^1.27.4",
+    "@percy/cypress": "^3.1.2",
+    "@percy/dom": "^1.27.5",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-node-resolve": "^8.4.0",

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

@@ -11,7 +11,6 @@ import { html } from 'lit';
 import { boolean, select, text } from '@storybook/addon-knobs';
 import { prefix } from '../../../globals/settings';
 import { TABLE_SIZE } from '../table';
-// @ts-ignore
 import Settings16 from '@carbon/web-components/es/icons/settings/16';
 import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16';
 import '../index';

web-components/packages/carbon-web-components/src/components/dropdown/dropdown.scss

@@ -11,12 +11,15 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities' as *;
-@use '@carbon/styles/scss/components/list-box/list-box';
+@use '@carbon/styles/scss/components/list-box/list-box' as *;
 @use '@carbon/styles/scss/components/dropdown' as *;
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/checkbox';
 @use '@carbon/styles/scss/components/tag';
 
+// https://github.com/carbon-design-system/carbon/issues/11408
+@include list-box;
+
 :host(#{$prefix}-dropdown) {
   outline: none;
 

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

@@ -22,7 +22,7 @@ import storyDocs from './link-story.mdx';
 
 const sizes = {
   [`Small size (${LINK_SIZE.SMALL})`]: LINK_SIZE.SMALL,
-  [`Regular size (${LINK_SIZE.REGULAR})`]: LINK_SIZE.REGULAR,
+  [`Medium size (${LINK_SIZE.MEDIUM})`]: LINK_SIZE.MEDIUM,
   [`Large size (${LINK_SIZE.LARGE})`]: LINK_SIZE.LARGE,
 };
 
@@ -109,7 +109,7 @@ Playground.story = {
         disabled: boolean('Disabled (disabled)', false),
         href: textNullable('Link href (href)', 'https://example.com/'),
         inline: boolean('Inline (inline)', false),
-        size: select('Link size (size)', sizes, LINK_SIZE.REGULAR),
+        size: select('Link size (size)', sizes, LINK_SIZE.MEDIUM),
         visited: boolean('Visited (visited)', false),
         onClick: action('click'),
       }),

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

@@ -20,7 +20,7 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
  * Link size.
  */
 export const LINK_SIZE = {
-  REGULAR: '',
+  MEDIUM: '',
   SMALL: 'sm',
   LARGE: 'lg',
 };
@@ -191,7 +191,7 @@ class CDSLink extends FocusMixin(LitElement) {
    * Link size.
    */
   @property({ reflect: true })
-  size: LINK_SIZE_TYPE = LINK_SIZE.REGULAR;
+  size: LINK_SIZE_TYPE = LINK_SIZE.MEDIUM;
 
   /**
    * The link target.

web-components/packages/carbon-web-components/src/components/notification/inline-notification.scss

@@ -50,6 +50,20 @@ $css--plex: true !default;
   pointer-events: none;
 }
 
+:host(#{$prefix}-inline-notification[low-contrast])::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border-width: 1px 1px 1px 0;
+  border-style: solid;
+  content: '';
+  filter: opacity(0.4);
+  pointer-events: none;
+}
+
 :host(#{$prefix}-inline-notification[open]) {
   display: flex;
 }

web-components/packages/carbon-web-components/src/components/radio-button/radio-button.ts

@@ -153,6 +153,18 @@ class CDSRadioButton extends HostListenerMixin(FocusMixin(LitElement)) {
           )
         );
       }
+      this.dispatchEvent(
+        new CustomEvent(
+          (this.constructor as typeof CDSRadioButton).eventChange,
+          {
+            bubbles: true,
+            composed: true,
+            detail: {
+              checked: this.checked,
+            },
+          }
+        )
+      );
     }
   };
 

web-components/packages/carbon-web-components/tests/snapshots/cds-code-snippet.md

@@ -170,9 +170,5 @@
     </slot>
   </span>
 </button>
-<<<<<<< HEAD
 
-=======
->>>>>>> 6575f00934 (fix(web-components): updated web-components tests)
 ```
-

web-components/packages/carbon-web-components/tests/snapshots/data-table.md

@@ -238,31 +238,20 @@
   <input
     class="cds--checkbox"
     disabled=""
-    id="selection"
+    hide-label=""
+    label-text="selection-label-foo"
     name="selection-name-foo"
-    part="selection"
-    type="checkbox"
     value="selection-value-foo"
   >
+</div>
+<slot>
+</slot>
   <label
     aria-label="selection-label-foo"
     class="cds--checkbox-label"
     for="selection"
   >
   </label>
-=======
-<div class="cds--table-column-checkbox">
-  <cds-checkbox
-    checked=""
-    data-table=""
-    disabled=""
-    hide-label=""
-    label-text="selection-label-foo"
-    name="selection-name-foo"
-    value="selection-value-foo"
-  >
-  </cds-checkbox>
->>>>>>> 6575f00934 (fix(web-components): updated web-components tests)
 </div>
 <slot>
 </slot>