chore(release): 2.2.0 merge fixes (carbon-design-system#11463)

### Related Ticket(s)

Closes # {{Provide issue number link(s) to the related ticket(s) that this pull request addresses}}

### Description

{{Add a human-readable description / detail summary of what the PR is changing and any details around how and why}}

{{If applicable, include a screenshot indicating an example or examples of what the PR is changing in the application}}

### 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/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.2.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-01-29)
+
+**Note:** Version bump only for package @carbon/web-components
+
+
+
+
+
+# [2.2.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-01-26)
+
+
+### Features
+
+* **slug:** ai callout updates for 2.2.0 ([#11453](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11453)) ([8f0b9f6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8f0b9f609b4d98a148071937db7bcdb689bea514))
+
+
+
+
+
 # [2.2.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-01-19)
 
 

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

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/web-components",
-  "version": "2.2.0-rc.0",
+  "version": "2.2.0",
   "publishConfig": {
     "access": "public"
   },
@@ -68,7 +68,7 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@carbon/styles": "1.47.0",
+    "@carbon/styles": "1.48.1",
     "flatpickr": "4.6.1",
     "lit": "^2.7.6",
     "lodash-es": "^4.17.21"

web-components/packages/carbon-web-components/src/components/date-picker/date-picker-input.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.
@@ -332,6 +332,15 @@ class CDSDatePickerInput extends FocusMixin(LitElement) {
     `;
   }
 
+  updated() {
+    this.shadowRoot
+      ?.querySelector("slot[name='slug']")
+      ?.classList.toggle(
+        `${prefix}--slug--revert`,
+        this.querySelector(`${prefix}-slug`)?.hasAttribute('revert-active')
+      );
+  }
+
   /**
    * The default value for `pattern` property.
    */

web-components/packages/carbon-web-components/src/components/dropdown/dropdown.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.
@@ -676,6 +676,13 @@ class CDSDropdown extends ValidityMixin(
     this._hasSlug
       ? this.setAttribute('slug', '')
       : this.removeAttribute('slug');
+
+    this.shadowRoot
+      ?.querySelector("slot[name='slug']")
+      ?.classList.toggle(
+        `${prefix}--slug--revert`,
+        this.querySelector(`${prefix}-slug`)?.hasAttribute('revert-active')
+      );
   }
 
   /**

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

@@ -1,5 +1,5 @@
 //
-// 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.
@@ -51,6 +51,8 @@
 }
 
 :host(#{$prefix}-modal-close-button) {
+  @extend .#{$prefix}--modal-close-button;
+
   outline: none;
 }
 

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

@@ -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.
@@ -174,13 +174,13 @@ $popover-caret-height: custom-property.get-var(
 :host(#{$prefix}-toggletip[alignment='left-bottom']),
 :host(#{$prefix}-slug[alignment='left-bottom']) {
   .#{$prefix}--popover-content {
-    inset-block-end: -50%;
+    inset-block-end: 50%;
     inset-inline-end: 100%;
     // Add in 0.1px to prevent rounding errors where the content is
     // moved farther than the caret
     transform: translate(
       calc(-1 * $popover-offset),
-      calc(0.5 * $popover-offset - 16px)
+      calc(0.5 * $popover-offset + $spacing-05)
     );
   }
 }
@@ -190,13 +190,13 @@ $popover-caret-height: custom-property.get-var(
 :host(#{$prefix}-toggletip[alignment='left-top']),
 :host(#{$prefix}-slug[alignment='left-top']) {
   .#{$prefix}--popover-content {
-    inset-block-start: -50%;
+    inset-block-start: 50%;
     inset-inline-end: 100%;
     // Add in 0.1px to prevent rounding errors where the content is
     // moved farther than the caret
     transform: translate(
       calc(-1 * $popover-offset),
-      calc(-1 * 0.5 * $popover-offset + 16px)
+      calc(-1 * 0.5 * $popover-offset - $spacing-05)
     );
   }
 }

web-components/packages/carbon-web-components/src/components/select/select.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.
@@ -342,6 +342,13 @@ class CDSSelect extends FormMixin(LitElement) {
       // given reflecting `value` requires child `<option>`s/`<optgroup>`s being there beforehand
       this._selectNode.value = !value ? placeholderItemValue : value;
     }
+
+    this.shadowRoot
+      ?.querySelector("slot[name='slug']")
+      ?.classList.toggle(
+        `${prefix}--slug--revert`,
+        this.querySelector(`${prefix}-slug`)?.hasAttribute('revert-active')
+      );
   }
 
   render() {

web-components/packages/carbon-web-components/src/components/slug/slug-data-table-story.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.
@@ -41,7 +41,7 @@ const actions = html`
     ${Folders16({ slot: 'icon' })}
     <span slot="tooltip-content"> Folders </span>
   </cds-icon-button>
-  <cds-slug-action-button>View Literature</cds-slug-action-button>
+  <cds-slug-action-button>View details</cds-slug-action-button>
 `;
 
 export default {

web-components/packages/carbon-web-components/src/components/slug/slug-example-story.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.
@@ -75,7 +75,7 @@ const actions = html`
     ${Folders16({ slot: 'icon' })}
     <span slot="tooltip-content"> Folders </span>
   </cds-icon-button>
-  <cds-slug-action-button>View Literature</cds-slug-action-button>
+  <cds-slug-action-button>View details</cds-slug-action-button>
 `;
 
 export default {
@@ -468,65 +468,28 @@ export const _Select = () => {
     </div> `;
 };
 
-const tagTypes = [
-  'red',
-  'magenta',
-  'purple',
-  'blue',
-  'cyan',
-  'teal',
-  'green',
-  'gray',
-  'cool-gray',
-  'warm-gray',
-  'high-contrast',
-  'outline',
-];
-
 export const _Tag = () => {
-  return html`
-    <style>
+  return html` <style>
       ${styles}
     </style>
-    <div class="slug-tag-container">
-      ${tagTypes.map(
-        (e) => html`<cds-tag type="${e}"
-          >Tag
-          <cds-slug alignment="bottom-left"> ${content}${actions}</cds-slug>
-        </cds-tag>`
-      )}
-    </div>
-
-    <div class="slug-tag-container">
-      ${tagTypes.map(
-        (e) =>
-          html`<cds-tag filter type="${e}">
-            Tag
-            <cds-slug alignment="bottom-left"> ${content}${actions}</cds-slug>
-          </cds-tag>`
-      )}
-    </div>
-
-    <div class="slug-tag-container">
-      ${tagTypes.map(
-        (e) =>
-          html`<cds-tag type="${e}">
-            ${Asleep16({ slot: 'icon' })} Tag
-            <cds-slug alignment="bottom-left"> ${content}${actions}</cds-slug>
-          </cds-tag>`
-      )}
-    </div>
-
-    <div class="slug-tag-container">
-      ${tagTypes.map(
-        (e) =>
-          html`<cds-tag filter type="${e}">
-            ${Asleep16({ slot: 'icon' })} Tag
-            <cds-slug alignment="bottom-left"> ${content}${actions}</cds-slug>
-          </cds-tag>`
-      )}
-    </div>
-  `;
+    <cds-tag type="red"
+      >Tag
+      <cds-slug alignment="bottom-left"> ${content}${actions}</cds-slug>
+    </cds-tag>
+
+    <cds-tag filter type="purple">
+      Tag
+      <cds-slug alignment="bottom-left"> ${content}${actions}</cds-slug>
+    </cds-tag>
+
+    <cds-tag type="blue">
+      ${Asleep16({ slot: 'icon' })} Tag
+      <cds-slug alignment="bottom-left"> ${content}${actions}</cds-slug>
+    </cds-tag>
+    <cds-tag filter type="green">
+      ${Asleep16({ slot: 'icon' })} Tag
+      <cds-slug alignment="bottom-left"> ${content}${actions}</cds-slug>
+    </cds-tag>`;
 };
 
 export const _TextInput = () => {

web-components/packages/carbon-web-components/src/components/slug/slug-form-story.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.
@@ -74,7 +74,7 @@ const actions = html`
     ${Folders16({ slot: 'icon' })}
     <span slot="tooltip-content"> Folders </span>
   </cds-icon-button>
-  <cds-slug-action-button>View Literature</cds-slug-action-button>
+  <cds-slug-action-button>View details</cds-slug-action-button>
 `;
 
 export default {

web-components/packages/carbon-web-components/src/components/slug/slug-story.scss

@@ -1,11 +1,11 @@
 /**
- * @license
- *
- * 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.
- */
+* @license
+*
+* 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.
+*/
 
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
@@ -22,6 +22,14 @@
   }
 }
 
+.slug-container-example.centered {
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  block-size: calc(100vh - 84px);
+  inline-size: calc(100vw - 84px);
+}
+
 p {
   @include type-style('body-compact-01');
 }
@@ -111,7 +119,3 @@ div #{$prefix}-selectable-tile::-moz-list-bullet {
 #{$prefix}-checkbox-group:not(:first-of-type) {
   margin-block-start: $spacing-07;
 }
-
-.slug-tag-container {
-  margin-block-end: $spacing-10;
-}