feat(slug): tile updates

packages/carbon-web-components/package.json

@@ -68,7 +68,7 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@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

@@ -141,7 +141,7 @@
 // Slug
 
 :host(#{$prefix}-modal) .#{$prefix}--modal-container {
-  @include callout-gradient('default');
+  @include callout-gradient('');
 
   background-color: $layer;
 }

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

@@ -78,11 +78,11 @@ $colorMap: (
   }
 }
 
-:host(#{$prefix}-slug[enabled][with-actions]) {
-  .#{$prefix}--toggletip-content {
-    max-inline-size: to-rem(334px);
-  }
-}
+// :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 {

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.0",
     "@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.0",
     "@carbon/icons-react": "^11.33.0",
     "@carbon/pictograms-react": "11.56.0",
-    "@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

@@ -4297,9 +4297,9 @@ __metadata:
   dependencies:
     "@carbon/icons-react": "npm:11.34.0"
     "@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"
@@ -4405,8 +4405,8 @@ __metadata:
     "@carbon/layout": "npm:11.20.1"
     "@carbon/motion": "npm:11.16.1"
     "@carbon/pictograms-react": "npm:11.56.0"
-    "@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"
@@ -4548,6 +4548,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@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: b0f7cb6dac369b5f5ad53ef76cedbd6881fb971c5acb9becfaa0c7559d285a64a2c8c1105bc17b9f6a6b9389ef03653807485a5404c4704018cfa94d01f67386
+  languageName: node
+  linkType: hard
+
 "@carbon/icons-react@npm:11.34.0":
   version: 11.34.0
   resolution: "@carbon/icons-react@npm:11.34.0"
@@ -4574,16 +4581,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@carbon/icons-react@npm:^11.34.1":
-  version: 11.34.1
-  resolution: "@carbon/icons-react@npm:11.34.1"
+"@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.45.0"
+    "@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: 970581fdaee75b626416a18728c0362cb29a8719288cd2e01203672fa17c64265a67257f3e8b7d7e941c633c1b690db616d31930fbdaff83f00b3284aaa6b93e
+  checksum: 27584152ce1acb1365617d30f3030f0552daf044ecdd1d456482919df75f347e9a053d7b75724f1ce82f8242fa18c0813b30bed9cb7cd0d7d12f80aae6d28307
   languageName: node
   linkType: hard
 
@@ -4621,16 +4628,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"
@@ -4650,7 +4657,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: 8379ddbc7b172804baadcee878abe418febae74baf37b2c1ee8a6cd952fb4453c7be259ba77af9bc6ef3e6b4ac4ca5c50dd344f79215bfcdb0822bc84cc3215f
+  checksum: 7826567be4d1c754b0fda9cdf76d5136bcbb8ef52207d5328f90521f86a509b0ac532c0090b3509780dd9922e4faf31da8e1989b41030f7b647b9b3f0d285bab
   languageName: node
   linkType: hard
 
@@ -4668,24 +4675,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: c93c0cc69a28c67ae45f577a0f2cc0887ad06bb7d252bdd9e2229b70fb7958ed92221adeee9ed4cbbcca5778371f105e54a9ae553ba200d8e25263af8971f299
+  checksum: 6cca022c8e5f5d1bc036bb61939a1d3cc368ed773430d92c0fbd8a4042dbc2d5409382345bfed4b7b07b32d6d1284caae7e8e5e1856ad1a1075bf37f02348653
   languageName: node
   linkType: hard
 
@@ -4698,15 +4705,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: 80e7ae2b1066e1c92996bc5153d3f6b32873911be51685ed4821fe25a8471cdd0d60b5068c627c7ed128ec413b45ec646a90e65ccd1fdc07a19915bce7644e44
+  checksum: 7582da0111e6c4377b792c9852570bf6e8784a18c0637b7459af63ff95c813e025331befeb05e5eb9f7c5b5c22b26363f7ee97cb76280fa3ed1ad26337b077d1
   languageName: node
   linkType: hard
 
@@ -4741,7 +4748,7 @@ __metadata:
     "@babel/traverse": "npm:~7.23.7"
     "@carbon/icon-helpers": "npm:10.45.1"
     "@carbon/icons": "npm:11.34.0"
-    "@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"
@@ -5506,12 +5513,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ibm/telemetry-js@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "@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:
     ibmtelemetry: dist/collect.js
-  checksum: 4a7b5fcf565d52e6c46e21c6c1afbc7e985eb2d78e2d1f3b6c282deee14a6c307427ee4868feeae3c36523aaf2c8fc013f366be121db2a712351262ad967112c
+  checksum: dd942eaecc6bdf40f91309fc783b2d1b654e9cb73dd0b98ec54eef53816cad027c60ccaf6415cc81dd3ee1f8686159733ac226f6c13288419269a001a7b81b3b
   languageName: node
   linkType: hard