feat(tile): slug ai updates (#11484)

### Related Ticket(s)

Follows: carbon-design-system/carbon#15596 & carbon-design-system/carbon#15591
### Description

Updates Tile with carbon gradient
### Changelog

**Changed**

- new carbon upgrade (using RC atm -> will need to update to full release)
- updated tile slug styles like core
- the new core styles fix an error with number-input slug revert styles


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

packages/carbon-web-components/package.json

@@ -69,7 +69,7 @@
   "dependencies": {
     "@babel/runtime": "^7.16.3",
     "@carbon/ibm-products-styles": "2.20.1",
-    "@carbon/styles": "1.48.1",
+    "@carbon/styles": "1.49.0",
     "flatpickr": "4.6.1",
     "lit": "^2.7.6",
     "lodash-es": "^4.17.21"

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

@@ -140,13 +140,13 @@
 
 // Slug
 
-:host(#{$prefix}-modal) .#{$prefix}--modal-container {
-  @include callout-gradient('default');
+:host(#{$prefix}-modal[slug]) .#{$prefix}--modal-container {
+  @include callout-gradient('');
 
   background-color: $layer;
 }
 
-:host(#{$prefix}-modal[has-two-buttons]) .#{$prefix}--modal-container {
+:host(#{$prefix}-modal[slug][has-two-buttons]) .#{$prefix}--modal-container {
   @include callout-gradient('default', 64px);
 
   background-color: $layer;

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

@@ -78,12 +78,6 @@ $colorMap: (
   }
 }
 
-: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);

packages/carbon-web-components/src/components/tile/tile.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.
@@ -95,10 +95,6 @@ $css--plex: true !default;
   .#{$prefix}--tile__chevron {
     @extend .#{$prefix}--tile__chevron;
   }
-
-  ::slotted(#{$prefix}-slug) {
-    inset-inline-end: $spacing-08;
-  }
 }
 
 :host(#{$prefix}-radio-tile),
@@ -178,9 +174,11 @@ $css--plex: true !default;
 :host(#{$prefix}-expandable-tile[slug]),
 :host(#{$prefix}-clickable-tile[slug]) .#{$prefix}--tile,
 :host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile {
-  @include callout-gradient();
+  @include callout-gradient('default', 0, 'layer');
 
-  border: 1px solid $border-tile;
+  border: 1px solid transparent;
+  box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+    0 4px 10px 2px $ai-drop-shadow;
 }
 
 :host(#{$prefix}-tile),
@@ -194,8 +192,12 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-selectable-tile) ::slotted(#{$prefix}-slug) {
+  inset-inline-end: $spacing-08;
+}
+
 :host(#{$prefix}-expandable-tile[slug]):hover {
-  @include callout-gradient();
+  @include callout-gradient('default', 0, 'layer');
 }
 
 :host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile::before,
@@ -214,7 +216,9 @@ $css--plex: true !default;
 
 :host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile::before,
 :host(#{$prefix}-clickable-tile[slug]) .#{$prefix}--tile::before {
-  @include callout-gradient('hover');
+  @include callout-gradient('hover', 0, 'layer');
+
+  box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
 }
 
 :host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile:hover::before,
@@ -230,9 +234,9 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile--is-selected::after {
-  @include callout-gradient('selected');
+  @include callout-gradient('selected', 0, 'layer');
 
-  opacity: 1;
+  box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
 }
 
 :host(#{$prefix}-expandable-tile[slug]) {
@@ -246,6 +250,6 @@ $css--plex: true !default;
   @extend .#{$prefix}--tile--slug-rounded;
 
   .#{$prefix}--tile__chevron {
-    border-end-end-radius: $spacing-05;
+    border-end-end-radius: $spacing-03;
   }
 }

packages/styles/package.json

@@ -31,12 +31,12 @@
   "dependencies": {
     "@carbon/icons-react": "11.34.1",
     "@carbon/layout": "11.20.1",
-    "@carbon/styles": "1.48.1",
+    "@carbon/styles": "1.49.0",
     "@carbon/telemetry": "0.1.0",
     "@carbon/type": "11.25.1"
   },
   "devDependencies": {
-    "@carbon/themes": "11.29.1",
+    "@carbon/themes": "11.30.0",
     "del": "^6.0.0",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^6.1.0",

packages/web-components/package.json

@@ -95,7 +95,7 @@
     "@carbon/ibmdotcom-utilities": "2.2.0",
     "@carbon/layout": "11.20.1",
     "@carbon/motion": "11.16.1",
-    "@carbon/styles": "1.48.1",
+    "@carbon/styles": "1.49.0",
     "@carbon/telemetry": "0.1.0",
     "@carbon/web-components": "2.2.0",
     "lit": "^2.7.6",
@@ -135,7 +135,7 @@
     "@carbon/icons": "11.34.1",
     "@carbon/icons-react": "^11.33.0",
     "@carbon/pictograms-react": "11.56.1",
-    "@carbon/react": "1.48.1",
+    "@carbon/react": "1.49.0",
     "@carbon/type": "11.25.1",
     "@open-wc/semantic-dom-diff": "~0.18.0",
     "@percy-io/in-percy": "^0.1.11",

yarn.lock

@@ -3228,9 +3228,9 @@ __metadata:
   dependencies:
     "@carbon/icons-react": "npm:11.34.1"
     "@carbon/layout": "npm:11.20.1"
-    "@carbon/styles": "npm:1.48.1"
+    "@carbon/styles": "npm:1.49.0"
     "@carbon/telemetry": "npm:0.1.0"
-    "@carbon/themes": "npm:11.29.1"
+    "@carbon/themes": "npm:11.30.0"
     "@carbon/type": "npm:11.25.1"
     del: "npm:^6.0.0"
     gulp: "npm:^4.0.2"
@@ -3336,8 +3336,8 @@ __metadata:
     "@carbon/layout": "npm:11.20.1"
     "@carbon/motion": "npm:11.16.1"
     "@carbon/pictograms-react": "npm:11.56.1"
-    "@carbon/react": "npm:1.48.1"
-    "@carbon/styles": "npm:1.48.1"
+    "@carbon/react": "npm:1.49.0"
+    "@carbon/styles": "npm:1.49.0"
     "@carbon/telemetry": "npm:0.1.0"
     "@carbon/type": "npm:11.25.1"
     "@carbon/web-components": "npm:2.2.0"
@@ -3478,7 +3478,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@carbon/icons-react@npm:11.34.1, @carbon/icons-react@npm:^11.33.0, @carbon/icons-react@npm:^11.34.1":
+"@carbon/icon-helpers@npm:^10.46.0":
+  version: 10.46.0
+  resolution: "@carbon/icon-helpers@npm:10.46.0"
+  checksum: 10/479973b8fbe087c20ec933d85231669d4213de876e33ae07ba66428703b6cb899cbfdc5d09ee54a23784cd974b99c100dd143b164be1104a8a172f05c8cc5682
+  languageName: node
+  linkType: hard
+
+"@carbon/icons-react@npm:11.34.1, @carbon/icons-react@npm:^11.33.0":
   version: 11.34.1
   resolution: "@carbon/icons-react@npm:11.34.1"
   dependencies:
@@ -3491,6 +3498,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@carbon/icons-react@npm:^11.35.0":
+  version: 11.35.0
+  resolution: "@carbon/icons-react@npm:11.35.0"
+  dependencies:
+    "@carbon/icon-helpers": "npm:^10.46.0"
+    "@carbon/telemetry": "npm:0.1.0"
+    prop-types: "npm:^15.7.2"
+  peerDependencies:
+    react: ">=16"
+  checksum: 10/d3d431efa008691024de90180ead77acb05dd77a1a352604d5b732bfbeb81a079928b6c81ca01d7dc3cdf55c26bd823b98f2717094b7a6a5cf4f39ffd8ddea74
+  languageName: node
+  linkType: hard
+
 "@carbon/icons@npm:11.34.1":
   version: 11.34.1
   resolution: "@carbon/icons@npm:11.34.1"
@@ -3525,16 +3545,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@carbon/react@npm:1.48.1":
-  version: 1.48.1
-  resolution: "@carbon/react@npm:1.48.1"
+"@carbon/react@npm:1.49.0":
+  version: 1.49.0
+  resolution: "@carbon/react@npm:1.49.0"
   dependencies:
     "@babel/runtime": "npm:^7.18.3"
     "@carbon/feature-flags": "npm:^0.16.0"
-    "@carbon/icons-react": "npm:^11.34.1"
+    "@carbon/icons-react": "npm:^11.35.0"
     "@carbon/layout": "npm:^11.20.0"
-    "@carbon/styles": "npm:^1.48.1"
-    "@ibm/telemetry-js": "npm:^1.1.0"
+    "@carbon/styles": "npm:^1.49.0"
+    "@ibm/telemetry-js": "npm:^1.2.0"
     classnames: "npm:2.5.1"
     copy-to-clipboard: "npm:^3.3.1"
     downshift: "npm:8.3.1"
@@ -3554,7 +3574,7 @@ __metadata:
     react: ^16.8.6 || ^17.0.1 || ^18.2.0
     react-dom: ^16.8.6 || ^17.0.1 || ^18.2.0
     sass: ^1.33.0
-  checksum: 10/8379ddbc7b172804baadcee878abe418febae74baf37b2c1ee8a6cd952fb4453c7be259ba77af9bc6ef3e6b4ac4ca5c50dd344f79215bfcdb0822bc84cc3215f
+  checksum: 10/18e74975d78a8f26a464b2783a98cfa21610679e9bedc31e9f98e5b05a7ecfa157dd00569f9d54985ebfddcaeeae19096553c8f1cf57bc4f070405faeed3d70a
   languageName: node
   linkType: hard
 
@@ -3572,24 +3592,24 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@carbon/styles@npm:1.48.1, @carbon/styles@npm:^1.48.1":
-  version: 1.48.1
-  resolution: "@carbon/styles@npm:1.48.1"
+"@carbon/styles@npm:1.49.0, @carbon/styles@npm:^1.49.0":
+  version: 1.49.0
+  resolution: "@carbon/styles@npm:1.49.0"
   dependencies:
     "@carbon/colors": "npm:^11.20.0"
     "@carbon/feature-flags": "npm:^0.16.0"
     "@carbon/grid": "npm:^11.21.0"
     "@carbon/layout": "npm:^11.20.0"
     "@carbon/motion": "npm:^11.16.0"
-    "@carbon/themes": "npm:^11.29.1"
+    "@carbon/themes": "npm:^11.30.0"
     "@carbon/type": "npm:^11.25.0"
     "@ibm/plex": "npm:6.0.0-next.6"
   peerDependencies:
     sass: ^1.33.0
   peerDependenciesMeta:
     sass:
       optional: true
-  checksum: 10/c93c0cc69a28c67ae45f577a0f2cc0887ad06bb7d252bdd9e2229b70fb7958ed92221adeee9ed4cbbcca5778371f105e54a9ae553ba200d8e25263af8971f299
+  checksum: 10/7f44cd8fb479e191e8564b986983c8ce93e5af4ac126555da9f5ca9b5c98585f40b14bbeee3a50c306fb1c72ed6169540faa2e4bad19710838178dcd2b63e605
   languageName: node
   linkType: hard
 
@@ -3602,15 +3622,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@carbon/themes@npm:11.29.1, @carbon/themes@npm:^11.29.1":
-  version: 11.29.1
-  resolution: "@carbon/themes@npm:11.29.1"
+"@carbon/themes@npm:11.30.0, @carbon/themes@npm:^11.30.0":
+  version: 11.30.0
+  resolution: "@carbon/themes@npm:11.30.0"
   dependencies:
     "@carbon/colors": "npm:^11.20.0"
     "@carbon/layout": "npm:^11.20.0"
     "@carbon/type": "npm:^11.25.0"
     color: "npm:^4.0.0"
-  checksum: 10/80e7ae2b1066e1c92996bc5153d3f6b32873911be51685ed4821fe25a8471cdd0d60b5068c627c7ed128ec413b45ec646a90e65ccd1fdc07a19915bce7644e44
+  checksum: 10/e22b61ba5676ec136586b34fd15e297be24dbd6f3ac5d70fbe0e1e1826b00bcd6ebf80355349c9717c6ab606cefec8078697080ecf72af13c1c465732a74ee7a
   languageName: node
   linkType: hard
 
@@ -3646,7 +3666,7 @@ __metadata:
     "@carbon/ibm-products-styles": "npm:2.20.1"
     "@carbon/icon-helpers": "npm:10.45.1"
     "@carbon/icons": "npm:11.34.1"
-    "@carbon/styles": "npm:1.48.1"
+    "@carbon/styles": "npm:1.49.0"
     "@open-wc/semantic-dom-diff": "npm:~0.18.0"
     "@percy-io/in-percy": "npm:^0.1.11"
     "@percy/cli": "npm:^1.27.4"
@@ -4411,7 +4431,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ibm/telemetry-js@npm:^1.1.0":
+"@ibm/telemetry-js@npm:^1.2.0":
   version: 1.2.0
   resolution: "@ibm/telemetry-js@npm:1.2.0"
   bin: