diff --git a/web-components/packages/carbon-web-components/CHANGELOG.md b/web-components/packages/carbon-web-components/CHANGELOG.md
index c2937e01cf09..8b5a45a7977c 100644
--- a/web-components/packages/carbon-web-components/CHANGELOG.md
+++ b/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/web-components@2.2.0-rc.1...@carbon/web-components@2.2.0) (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/web-components@2.2.0-rc.0...@carbon/web-components@2.2.0-rc.1) (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/web-components@2.1.2...@carbon/web-components@2.2.0-rc.0) (2024-01-19)
 
 
diff --git a/web-components/packages/carbon-web-components/package.json b/web-components/packages/carbon-web-components/package.json
index 9d6f52f71e3a..cf1cd2b03d52 100644
--- a/web-components/packages/carbon-web-components/package.json
+++ b/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"
diff --git a/web-components/packages/carbon-web-components/src/components/date-picker/date-picker-input.ts b/web-components/packages/carbon-web-components/src/components/date-picker/date-picker-input.ts
index cffdd0b826cc..e1fc32fa24ce 100644
--- a/web-components/packages/carbon-web-components/src/components/date-picker/date-picker-input.ts
+++ b/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.
    */
diff --git a/web-components/packages/carbon-web-components/src/components/dropdown/dropdown.ts b/web-components/packages/carbon-web-components/src/components/dropdown/dropdown.ts
index 60b1c55e6059..858f46ef46c9 100644
--- a/web-components/packages/carbon-web-components/src/components/dropdown/dropdown.ts
+++ b/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')
+      );
   }
 
   /**
diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal.scss b/web-components/packages/carbon-web-components/src/components/modal/modal.scss
index 2245c3028bab..a0a5e923ebf4 100644
--- a/web-components/packages/carbon-web-components/src/components/modal/modal.scss
+++ b/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;
 }
 
diff --git a/web-components/packages/carbon-web-components/src/components/popover/popover.scss b/web-components/packages/carbon-web-components/src/components/popover/popover.scss
index 62251beeeac9..aa61327ecdd5 100644
--- a/web-components/packages/carbon-web-components/src/components/popover/popover.scss
+++ b/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)
     );
   }
 }
diff --git a/web-components/packages/carbon-web-components/src/components/select/select.ts b/web-components/packages/carbon-web-components/src/components/select/select.ts
index 82db45ac9326..8bce4b51bb41 100644
--- a/web-components/packages/carbon-web-components/src/components/select/select.ts
+++ b/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() {
diff --git a/web-components/packages/carbon-web-components/src/components/slug/slug-data-table-story.ts b/web-components/packages/carbon-web-components/src/components/slug/slug-data-table-story.ts
index 16af9651e5e1..6c91dbb83414 100644
--- a/web-components/packages/carbon-web-components/src/components/slug/slug-data-table-story.ts
+++ b/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 {
diff --git a/web-components/packages/carbon-web-components/src/components/slug/slug-example-story.ts b/web-components/packages/carbon-web-components/src/components/slug/slug-example-story.ts
index d76dce6c6110..ed5d2eaad3b5 100644
--- a/web-components/packages/carbon-web-components/src/components/slug/slug-example-story.ts
+++ b/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 = () => {
diff --git a/web-components/packages/carbon-web-components/src/components/slug/slug-form-story.ts b/web-components/packages/carbon-web-components/src/components/slug/slug-form-story.ts
index c1b790e02661..f8960a1319a5 100644
--- a/web-components/packages/carbon-web-components/src/components/slug/slug-form-story.ts
+++ b/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 {
diff --git a/web-components/packages/carbon-web-components/src/components/slug/slug-story.scss b/web-components/packages/carbon-web-components/src/components/slug/slug-story.scss
index fa46768161f4..c920c771d118 100644
--- a/web-components/packages/carbon-web-components/src/components/slug/slug-story.scss
+++ b/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;
-}
diff --git a/web-components/packages/carbon-web-components/src/components/slug/slug-story.ts b/web-components/packages/carbon-web-components/src/components/slug/slug-story.ts
index 6e7600d27d80..0906d2d67a24 100644
--- a/web-components/packages/carbon-web-components/src/components/slug/slug-story.ts
+++ b/web-components/packages/carbon-web-components/src/components/slug/slug-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.
@@ -81,7 +81,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 const Default = () => {
@@ -236,7 +236,7 @@ Playground.parameters = {
           tooltipAlignments,
           POPOVER_ALIGNMENT.BOTTOM
         ),
-        size: select('Slug size (size)', sizes, SLUG_SIZE.MEDIUM),
+        size: select('Slug size (size)', sizes, SLUG_SIZE.EXTRA_SMALL),
         kind,
         dotType,
         aiTextLabel: textNullable('Ai text label', ''),
@@ -246,6 +246,38 @@ Playground.parameters = {
   },
 };
 
+export const Test = (args) => {
+  const { alignment, showActions } = args?.[`${prefix}-slug`] ?? {};
+  return html`
+    <style>
+      ${styles}
+    </style>
+    <div class="slug-container-example slug-container centered">
+      <cds-slug
+        open
+        alignment="${ifDefined(alignment)}"
+        size="${SLUG_SIZE.EXTRA_SMALL}">
+        ${content} ${showActions ? actions : ''}
+      </cds-slug>
+    </div>
+  `;
+};
+
+Test.parameters = {
+  knobs: {
+    [`${prefix}-slug`]: () => {
+      return {
+        alignment: select(
+          'Slug alignment to trigger button (alignment)',
+          tooltipAlignments,
+          POPOVER_ALIGNMENT.BOTTOM
+        ),
+        showActions: boolean('Show actions', false),
+      };
+    },
+  },
+};
+
 export default {
   title: 'Experimental/Slug',
   parameters: {
diff --git a/web-components/packages/carbon-web-components/src/components/slug/slug.scss b/web-components/packages/carbon-web-components/src/components/slug/slug.scss
index a4279c79a15f..0a1081617302 100644
--- a/web-components/packages/carbon-web-components/src/components/slug/slug.scss
+++ b/web-components/packages/carbon-web-components/src/components/slug/slug.scss
@@ -1,11 +1,12 @@
 /**
- * @license
- *
- * 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.
- */
+* @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 'sass:map';
 
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/type' as *;
@@ -21,6 +22,20 @@
 // importing tag color tokens for the styling slug in tag component
 @use '@carbon/styles/scss/components/tag/index' as *;
 
+$colorMap: (
+  'red': $tag-color-red,
+  'magenta': $tag-color-magenta,
+  'purple': $tag-color-purple,
+  'blue': $tag-color-blue,
+  'cyan': $tag-color-cyan,
+  'teal': $tag-color-teal,
+  'green': $tag-color-green,
+  'gray': $tag-color-gray,
+  'cool-gray': $tag-color-cool-gray,
+  'warm-gray': $tag-color-warm-gray,
+  'high-contrast': $text-inverse,
+);
+
 :host(#{$prefix}-slug) {
   @extend .#{$prefix}--slug;
 
@@ -33,14 +48,11 @@
   .#{$prefix}--popover-content {
     @include callout-gradient();
 
-    border: 1px solid $border-subtle;
-    border-radius: $spacing-05;
-    // 84px seems to make this fully opaque?
-    backdrop-filter: blur(25px);
-    // box-shadow seems to match the spec better
-    // than the same values plugged into `drop-shadow`
-    // filter: drop-shadow(-45px 45px 100px rgba(0, 0, 0, 0.2));
-    box-shadow: -45px 45px 100px rgba(0, 0, 0, 0.2);
+    border: 1px solid transparent;
+    border-radius: $spacing-03;
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+      -40px 30px 100px -25px $slug-callout-shadow-outer-01,
+      -60px 80px 60px -45px $slug-callout-shadow-outer-02;
     color: $text-primary;
     min-inline-size: to-rem(280px);
   }
@@ -48,9 +60,10 @@
   .#{$prefix}--toggletip-actions {
     position: absolute;
     justify-content: flex-end;
-    background: $layer-accent;
-    border-end-end-radius: to-rem(15px);
-    border-end-start-radius: to-rem(15px);
+    backdrop-filter: blur(85px);
+    background: rgba(0, 0, 0, 0.01);
+    border-end-end-radius: $spacing-03;
+    border-end-start-radius: $spacing-03;
     column-gap: 0;
     inline-size: 100%;
     inset-block-end: 0;
@@ -59,13 +72,24 @@
 
   .#{$prefix}--toggletip-content {
     // This sets the max size to the size of the action bar with 3 buttons
-    max-inline-size: to-rem(334px);
-    padding-block: $spacing-07 $spacing-11;
-    padding-inline: $spacing-07;
+    padding-block: $spacing-06 $spacing-11;
+    padding-inline: $spacing-06;
     --cds-button-focus-color: var(--cds-focus);
   }
 }
 
+:host(#{$prefix}-slug[enabled][with-actions]) {
+  .#{$prefix}--toggletip-content {
+    max-inline-size: to-rem(334px);
+  }
+}
+
+:host(#{$prefix}-slug[enabled]:not([with-actions])) {
+  .#{$prefix}--toggletip-content {
+    max-inline-size: to-rem(320px);
+  }
+}
+
 :host(#{$prefix}-slug[revert-active]) {
   transform: translate($spacing-03, -50%);
 }
@@ -78,7 +102,7 @@
   @include emit-layout-tokens();
   .#{$prefix}--btn--primary {
     order: 1;
-    border-end-end-radius: 1rem;
+    border-end-end-radius: to-rem(7px);
   }
 }
 
@@ -126,7 +150,30 @@
 
 :host(#{$prefix}-slug:not([kind='hollow']):not([dot-type='hollow'])) {
   .#{$prefix}--popover-caret {
-    background: $border-subtle;
+    background: transparent;
+    clip-path: none;
+
+    &::before {
+      position: absolute;
+      display: block;
+      box-sizing: border-box;
+      border: 1px solid $ai-border-start;
+      background: $background;
+      block-size: $spacing-04;
+      clip-path: polygon(98% 0, 0 0, -52% 150%) border-box;
+      content: '';
+      inline-size: $spacing-04;
+      transform: rotate(45deg);
+    }
+
+    &::after {
+      position: absolute;
+      display: block;
+      background: $background;
+      block-size: to-rem(14px);
+      content: '';
+      inline-size: $spacing-01;
+    }
   }
 
   .#{$prefix}--slug__button.#{$prefix}--slug__button--mini:focus,
@@ -135,200 +182,161 @@
   }
 }
 
-:host(#{$prefix}-slug[tag='red']) {
-  .#{$prefix}--slug__text {
-    color: $tag-color-red;
-  }
-
-  .#{$prefix}--slug__text::before {
-    background: $tag-color-red;
-  }
-
-  button:hover {
-    border-color: $tag-color-red;
-
-    .#{$prefix}--slug__text::before {
-      background-color: $tag-color-red;
+// top
+:host(
+    #{$prefix}-slug:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment^='top']
+  ) {
+  .#{$prefix}--popover-caret {
+    &::before {
+      inset-block-end: to-rem(1px);
+      transform: rotate(-135deg);
     }
-  }
-}
 
-:host(#{$prefix}-slug[tag='magenta']) {
-  .#{$prefix}--slug__text {
-    color: $tag-color-magenta;
-  }
-
-  .#{$prefix}--slug__text::before {
-    background: $tag-color-magenta;
-  }
-
-  button:hover {
-    border-color: $tag-color-magenta;
-
-    .#{$prefix}--slug__text::before {
-      background-color: $tag-color-magenta;
+    &::after {
+      background: $slug-callout-caret-bottom-background;
+      block-size: $spacing-01;
+      border-end-end-radius: 50%;
+      border-end-start-radius: 50%;
+      inline-size: to-rem(14px);
+      inset-block-start: -$spacing-01;
+      inset-inline-start: to-rem(-1px);
     }
   }
-}
-
-:host(#{$prefix}-slug[tag='purple']) {
-  .#{$prefix}--slug__text {
-    color: $tag-color-purple;
-  }
-
-  .#{$prefix}--slug__text::before {
-    background: $tag-color-purple;
-  }
 
-  button:hover {
-    border-color: $tag-color-purple;
-
-    .#{$prefix}--slug__text::before {
-      background-color: $tag-color-purple;
+  &[has-actions] {
+    .#{$prefix}--popover-caret::after {
+      display: none;
     }
   }
 }
 
-:host(#{$prefix}-slug[tag='blue']) {
-  .#{$prefix}--slug__text {
-    color: $tag-color-blue;
-  }
-
-  .#{$prefix}--slug__text::before {
-    background: $tag-color-blue;
-  }
-
-  button:hover {
-    border-color: $tag-color-blue;
+// right
+:host(
+    #{$prefix}-slug:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment^='right']
+  ) {
+  .#{$prefix}--popover-caret {
+    &::before {
+      content: '';
+      inset-inline-start: to-rem(1px);
+      transform: rotate(-45deg);
+    }
 
-    .#{$prefix}--slug__text::before {
-      background-color: $tag-color-blue;
+    &::after {
+      border-end-start-radius: 50%;
+      border-start-start-radius: 50%;
+      inset-block-start: to-rem(-1px);
+      inset-inline-start: to-rem(6px);
     }
   }
 }
 
-:host(#{$prefix}-slug[tag='cyan']) {
-  .#{$prefix}--slug__text {
-    color: $tag-color-cyan;
-  }
-
-  .#{$prefix}--slug__text::before {
-    background: $tag-color-cyan;
-  }
-
-  button:hover {
-    border-color: $tag-color-cyan;
+// bottom
+:host(
+    #{$prefix}-slug:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment^='bottom']
+  ) {
+  .#{$prefix}--popover-caret {
+    &::before {
+      inset-block-start: to-rem(1px);
+      transform: rotate(45deg);
+    }
 
-    .#{$prefix}--slug__text::before {
-      background-color: $tag-color-cyan;
+    &::after {
+      block-size: $spacing-01;
+      border-start-end-radius: 50%;
+      border-start-start-radius: 50%;
+      inline-size: to-rem(14px);
+      inset-block-end: to-rem(-2.5px);
+      inset-inline-start: to-rem(-1px);
     }
   }
 }
 
-:host(#{$prefix}-slug[tag='teal']) {
-  .#{$prefix}--slug__text {
-    color: $tag-color-teal;
-  }
-
-  .#{$prefix}--slug__text::before {
-    background: $tag-color-teal;
-  }
-
-  button:hover {
-    border-color: $tag-color-teal;
+//left
+:host(
+    #{$prefix}-slug:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment^='left']
+  ) {
+  .#{$prefix}--popover-caret {
+    &::before {
+      inset-inline-end: to-rem(1px);
+      transform: rotate(135deg);
+    }
 
-    .#{$prefix}--slug__text::before {
-      background-color: $tag-color-teal;
+    &::after {
+      border-end-end-radius: 50%;
+      border-start-end-radius: 50%;
+      inset-block-start: to-rem(-1px);
+      inset-inline-start: -$spacing-01;
     }
   }
 }
 
-:host(#{$prefix}-slug[tag='green']) {
-  .#{$prefix}--slug__text {
-    color: $tag-color-green;
-  }
-
-  .#{$prefix}--slug__text::before {
-    background: $tag-color-green;
-  }
-
-  button:hover {
-    border-color: $tag-color-green;
-
-    .#{$prefix}--slug__text::before {
-      background-color: $tag-color-green;
+// override for specific alignments
+/* stylelint-disable-next-line no-duplicate-selectors */
+:host(#{$prefix}-slug:not([kind='hollow']):not([dot-type='hollow'])) {
+  &[alignment='left-bottom'],
+  &[alignment='right-bottom'] {
+    .#{$prefix}--popover-caret::after {
+      background: transparent;
     }
   }
 }
 
-:host(#{$prefix}-slug[tag='gray']) {
-  .#{$prefix}--slug__text {
-    color: $tag-color-gray;
-  }
-
-  .#{$prefix}--slug__text::before {
-    background: $tag-color-gray;
-  }
-
-  button:hover {
-    border-color: $tag-color-gray;
-
-    .#{$prefix}--slug__text::before {
-      background-color: $tag-color-gray;
+// Change caret color / border when it is near the bottom of the callout
+/* stylelint-disable-next-line no-duplicate-selectors */
+:host(#{$prefix}-slug:not([kind='hollow']):not([dot-type='hollow'])) {
+  &[alignment='left-bottom'],
+  &[alignment='right-bottom'],
+  &[alignment='top'],
+  &[alignment='top-right'],
+  &[alignment='top-left'] {
+    .#{$prefix}--popover-caret::before {
+      border-color: $slug-callout-caret-bottom;
+      background: $slug-callout-caret-bottom-background;
+    }
+    // Adjust background if actions are present
+    &[has-actions] {
+      .#{$prefix}--popover-caret::before {
+        background: $slug-callout-caret-bottom-background-actions;
+      }
     }
   }
 }
 
-:host(#{$prefix}-slug[tag='cool-gray']) {
-  .#{$prefix}--slug__text {
-    color: $tag-color-cool-gray;
-  }
-
-  .#{$prefix}--slug__text::before {
-    background: $tag-color-cool-gray;
-  }
-
-  button:hover {
-    border-color: $tag-color-cool-gray;
-
-    .#{$prefix}--slug__text::before {
-      background-color: $tag-color-cool-gray;
+// Change the caret border when it is near the middle of the callout
+/* stylelint-disable-next-line no-duplicate-selectors */
+:host(#{$prefix}-slug:not([kind='hollow']):not([dot-type='hollow'])) {
+  &[alignment='left'],
+  &[alignment='right'] {
+    .#{$prefix}--popover-caret::before {
+      border-color: $slug-callout-caret-center;
     }
   }
 }
 
-:host(#{$prefix}-slug[tag='warm-gray']) {
-  .#{$prefix}--slug__text {
-    color: $tag-color-warm-gray;
-  }
-
-  .#{$prefix}--slug__text::before {
-    background: $tag-color-warm-gray;
-  }
-
-  button:hover {
-    border-color: $tag-color-warm-gray;
+@each $color, $token in $colorMap {
+  :host(#{$prefix}-slug[tag='#{$color}']) {
+    .#{$prefix}--slug__text {
+      color: $token;
+    }
 
     .#{$prefix}--slug__text::before {
-      background-color: $tag-color-warm-gray;
+      background: $token;
     }
-  }
-}
 
-:host(#{$prefix}-slug[tag='high-contrast']) {
-  .#{$prefix}--slug__text {
-    color: $text-inverse;
-  }
-
-  .#{$prefix}--slug__text::before {
-    background: $text-inverse;
-  }
-
-  button:hover {
-    border-color: $text-inverse;
+    button:hover {
+      border-color: $token;
 
-    .#{$prefix}--slug__text::before {
-      background-color: $text-inverse;
+      .#{$prefix}--slug__text::before {
+        background-color: $token;
+      }
     }
   }
 }
diff --git a/web-components/packages/carbon-web-components/src/components/slug/slug.ts b/web-components/packages/carbon-web-components/src/components/slug/slug.ts
index 17a5a8400736..5c629e657f63 100644
--- a/web-components/packages/carbon-web-components/src/components/slug/slug.ts
+++ b/web-components/packages/carbon-web-components/src/components/slug/slug.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.
@@ -138,6 +138,13 @@ export default class CDSSlug extends CDSToggleTip {
     `;
   };
 
+  attributeChangedCallback(name, old, newValue) {
+    super.attributeChangedCallback(name, old, newValue);
+
+    //@ts-ignore typescript does not think requestUpdate() exists on parentElement
+    name === 'revert-active' ? this.parentElement?.requestUpdate() : ``;
+  }
+
   updated(changedProperties) {
     super.updated(changedProperties);
     if (
diff --git a/web-components/packages/carbon-web-components/src/components/text-input/text-input.ts b/web-components/packages/carbon-web-components/src/components/text-input/text-input.ts
index 042e1038a194..247e0213699b 100644
--- a/web-components/packages/carbon-web-components/src/components/text-input/text-input.ts
+++ b/web-components/packages/carbon-web-components/src/components/text-input/text-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.
@@ -502,6 +502,15 @@ class CDSTextInput extends ValidityMixin(FormMixin(LitElement)) {
     `;
   }
 
+  updated() {
+    this.shadowRoot
+      ?.querySelector("slot[name='slug']")
+      ?.classList.toggle(
+        `${prefix}--slug--revert`,
+        this.querySelector(`${prefix}-slug`)?.hasAttribute('revert-active')
+      );
+  }
+
   /**
    * A selector that will return the slug item.
    */
diff --git a/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip.ts b/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip.ts
index e46068e591dd..4cbee216d52f 100644
--- a/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip.ts
+++ b/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip.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.
@@ -34,6 +34,16 @@ class CDSToggletip extends HostListenerMixin(FocusMixin(LitElement)) {
   @property({ type: Boolean, reflect: true })
   open = false;
 
+  /**
+   * Handles `slotchange` event.
+   */
+  private _handleActionsSlotChange({ target }: Event) {
+    const hasContent = (target as HTMLSlotElement).assignedNodes();
+    hasContent
+      ? this.setAttribute('has-actions', '')
+      : this.removeAttribute('has-actions');
+  }
+
   protected _handleClick = () => {
     this.open = !this.open;
   };
@@ -88,12 +98,14 @@ class CDSToggletip extends HostListenerMixin(FocusMixin(LitElement)) {
           <div class="${prefix}--toggletip-content">
             <slot name="body-text"></slot>
             <div class="${prefix}--toggletip-actions">
-              <slot name="actions"></slot>
+              <slot
+                name="actions"
+                @slotchange="${this._handleActionsSlotChange}"></slot>
             </div>
           </div>
         </span>
+        <span class="${prefix}--popover-caret"></span>
       </span>
-      <span class="${prefix}--popover-caret"></span>
     `;
   };