feat(tile): slug ai updates

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-rc.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-rc.0",
     "@carbon/telemetry": "0.1.0",
     "@carbon/type": "11.25.1"
   },
   "devDependencies": {
-    "@carbon/themes": "11.29.1",
+    "@carbon/themes": "11.30.0-rc.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-rc.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-rc.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-rc.0"
     "@carbon/telemetry": "npm:0.1.0"
-    "@carbon/themes": "npm:11.29.1"
+    "@carbon/themes": "npm:11.30.0-rc.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-rc.0"
+    "@carbon/styles": "npm:1.49.0-rc.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-rc.0":
+  version: 10.46.0-rc.0
+  resolution: "@carbon/icon-helpers@npm:10.46.0-rc.0"
+  checksum: 10/b0f7cb6dac369b5f5ad53ef76cedbd6881fb971c5acb9becfaa0c7559d285a64a2c8c1105bc17b9f6a6b9389ef03653807485a5404c4704018cfa94d01f67386
+  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-rc.0":
+  version: 11.35.0-rc.0
+  resolution: "@carbon/icons-react@npm:11.35.0-rc.0"
+  dependencies:
+    "@carbon/icon-helpers": "npm:^10.46.0-rc.0"
+    "@carbon/telemetry": "npm:0.1.0"
+    prop-types: "npm:^15.7.2"
+  peerDependencies:
+    react: ">=16"
+  checksum: 10/27584152ce1acb1365617d30f3030f0552daf044ecdd1d456482919df75f347e9a053d7b75724f1ce82f8242fa18c0813b30bed9cb7cd0d7d12f80aae6d28307
+  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-rc.0":
+  version: 1.49.0-rc.0
+  resolution: "@carbon/react@npm:1.49.0-rc.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-rc.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-rc.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/7826567be4d1c754b0fda9cdf76d5136bcbb8ef52207d5328f90521f86a509b0ac532c0090b3509780dd9922e4faf31da8e1989b41030f7b647b9b3f0d285bab
   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-rc.0, @carbon/styles@npm:^1.49.0-rc.0":
+  version: 1.49.0-rc.0
+  resolution: "@carbon/styles@npm:1.49.0-rc.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-rc.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/6cca022c8e5f5d1bc036bb61939a1d3cc368ed773430d92c0fbd8a4042dbc2d5409382345bfed4b7b07b32d6d1284caae7e8e5e1856ad1a1075bf37f02348653
   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-rc.0, @carbon/themes@npm:^11.30.0-rc.0":
+  version: 11.30.0-rc.0
+  resolution: "@carbon/themes@npm:11.30.0-rc.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/7582da0111e6c4377b792c9852570bf6e8784a18c0637b7459af63ff95c813e025331befeb05e5eb9f7c5b5c22b26363f7ee97cb76280fa3ed1ad26337b077d1
   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-rc.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: