From f75a7aeeda4327aeba340907ad83d5da20ab1a24 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Thu, 16 Nov 2023 13:10:45 -0500
Subject: [PATCH 1/9] docs(Tile): scaffold slug story, add demo styles

---
 .../react/src/components/Tile/Tile.stories.js | 75 ++++++++++++++++++-
 .../react/src/components/Tile/tile-story.scss | 54 +++++++++++++
 2 files changed, 128 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/Tile/Tile.stories.js b/packages/react/src/components/Tile/Tile.stories.js
index dd7de3a3d573..08cf8870ac29 100644
--- a/packages/react/src/components/Tile/Tile.stories.js
+++ b/packages/react/src/components/Tile/Tile.stories.js
@@ -23,7 +23,7 @@ import {
   TileBelowTheFoldContent,
 } from './';
 import TileGroup from '../TileGroup/TileGroup';
-import { Download } from '@carbon/icons-react';
+import { Download, ArrowRight } from '@carbon/icons-react';
 
 export default {
   title: 'Components/Tile',
@@ -57,6 +57,79 @@ export const Default = () => {
   );
 };
 
+export const SlugTest = () => {
+  return (
+    <div className="slug-tile-container">
+      <ClickableTile
+        id="clickable-tile-1"
+        href="https://www.carbondesignsystem.com/">
+        <h4>Title</h4>
+        <p>
+          Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit at
+          consectetur turpis mauris gravida penatibus.
+        </p>
+        <div className="ai-data">
+          <div className="data-container">
+            <p>Data Quality</p>
+            <h3>85%</h3>
+          </div>
+          <div className="data-container">
+            <p>Label text</p>
+            <h3>16%</h3>
+          </div>
+        </div>
+        <ArrowRight className="arrow-right" />
+      </ClickableTile>
+      <SelectableTile id="selectable-tile-1" name="tiles" value="selectable">
+        <h4>Title</h4>
+        <p>
+          Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit at
+          consectetur turpis mauris gravida penatibus.
+        </p>
+        <div className="ai-data">
+          <div className="data-container">
+            <p>Data Quality</p>
+            <h3>85%</h3>
+          </div>
+          <div className="data-container">
+            <p>Label text</p>
+            <h3>16%</h3>
+          </div>
+        </div>
+      </SelectableTile>
+      <ExpandableTile
+        id="expandable-tile-1"
+        tileCollapsedIconText="Interact to Expand tile"
+        tileExpandedIconText="Interact to Collapse tile">
+        <TileAboveTheFoldContent>
+          <h4>Title</h4>
+          <p>
+            Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
+            at consectetur turpis mauris gravida penatibus.
+          </p>
+          <div className="ai-data">
+            <div className="data-container">
+              <p>Data Quality</p>
+              <h3>85%</h3>
+            </div>
+            <div className="data-container">
+              <p>Label text</p>
+              <h3>16%</h3>
+            </div>
+          </div>
+        </TileAboveTheFoldContent>
+        <TileBelowTheFoldContent>
+          <h6>Expanded Section</h6>
+          <p>
+            Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
+            at consectetur turpis mauris.
+          </p>
+        </TileBelowTheFoldContent>
+      </ExpandableTile>
+    </div>
+  );
+};
+
 export const DefaultWithLayer = () => (
   <WithLayer>
     {(layer) => (
diff --git a/packages/react/src/components/Tile/tile-story.scss b/packages/react/src/components/Tile/tile-story.scss
index 58b453a26748..7c7df8a90d8f 100644
--- a/packages/react/src/components/Tile/tile-story.scss
+++ b/packages/react/src/components/Tile/tile-story.scss
@@ -1,4 +1,5 @@
 @use '@carbon/react/scss/components/tile';
+@use '@carbon/react/scss/type';
 
 .experimental-tile {
   @include tile.tile($enable-experimental-tile-contrast: true);
@@ -7,3 +8,56 @@
 div .bx--tile--selectable:not(:last-child) {
   margin-block-end: 1rem;
 }
+
+.slug-tile-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.slug-tile-container .cds--tile {
+  height: 320px;
+  max-width: 320px;
+  margin-right: 3rem;
+  margin-bottom: 3rem;
+}
+
+.slug-tile-container h4 {
+  margin-bottom: 1rem;
+}
+
+.slug-tile-container .ai-data {
+  margin-top: 16px;
+  padding: 16px 0;
+  display: flex;
+}
+
+.slug-tile-container .data-container {
+  width: 126px;
+}
+
+.slug-tile-container .data-container:first-of-type {
+  margin-right: 16px;
+}
+
+.slug-tile-container p {
+  @include type.type-style('body-01');
+}
+
+.slug-tile-container .data-container p {
+  @include type.type-style('label-02');
+}
+
+.slug-tile-container .arrow-right {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+}
+
+.slug-tile-container .cds--tile-content__below-the-fold {
+  padding-top: 16px;
+}
+
+.slug-tile-container .cds--tile-content__below-the-fold p {
+  @include type.type-style('label-01');
+  margin: 8px 0 50px;
+}

From ca0ba1096ea0201b8c66be8c072d297642ddf468 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Thu, 16 Nov 2023 14:46:27 -0500
Subject: [PATCH 2/9] feat(Tile): add slug to SelectableTile, ExpandableTile

---
 .../react/src/components/Tile/Tile.stories.js | 64 +++++++++++------
 packages/react/src/components/Tile/Tile.tsx   | 70 ++++++++++++++++---
 .../react/src/components/Tile/tile-story.scss |  3 +-
 .../styles/scss/components/slug/_slug.scss    | 15 +---
 .../styles/scss/components/tile/_tile.scss    | 25 +++++++
 .../styles/scss/utilities/_ai-gradient.scss   | 23 +++++-
 6 files changed, 151 insertions(+), 49 deletions(-)

diff --git a/packages/react/src/components/Tile/Tile.stories.js b/packages/react/src/components/Tile/Tile.stories.js
index 08cf8870ac29..f11b776e28f9 100644
--- a/packages/react/src/components/Tile/Tile.stories.js
+++ b/packages/react/src/components/Tile/Tile.stories.js
@@ -23,7 +23,9 @@ import {
   TileBelowTheFoldContent,
 } from './';
 import TileGroup from '../TileGroup/TileGroup';
-import { Download, ArrowRight } from '@carbon/icons-react';
+import { IconButton } from '../IconButton';
+import { Slug, SlugContent, SlugActions } from '../Slug';
+import { Download, View, FolderOpen, Folders } from '@carbon/icons-react';
 
 export default {
   title: 'Components/Tile',
@@ -58,29 +60,44 @@ export const Default = () => {
 };
 
 export const SlugTest = () => {
+  const slug = (
+    <Slug className="slug-container">
+      <SlugContent>
+        <div>
+          <p className="secondary">AI Explained</p>
+          <h1>84%</h1>
+          <p className="secondary bold">Confidence score</p>
+          <p className="secondary">
+            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+          </p>
+          <hr />
+          <p className="secondary">Model type</p>
+          <p className="bold">Foundation model</p>
+        </div>
+        <SlugActions>
+          <IconButton kind="ghost" label="View">
+            <View />
+          </IconButton>
+          <IconButton kind="ghost" label="Open Folder">
+            <FolderOpen />
+          </IconButton>
+          <IconButton kind="ghost" label="Folders">
+            <Folders />
+          </IconButton>
+          <Button>View literature</Button>
+        </SlugActions>
+      </SlugContent>
+    </Slug>
+  );
+
   return (
     <div className="slug-tile-container">
-      <ClickableTile
-        id="clickable-tile-1"
-        href="https://www.carbondesignsystem.com/">
-        <h4>Title</h4>
-        <p>
-          Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit at
-          consectetur turpis mauris gravida penatibus.
-        </p>
-        <div className="ai-data">
-          <div className="data-container">
-            <p>Data Quality</p>
-            <h3>85%</h3>
-          </div>
-          <div className="data-container">
-            <p>Label text</p>
-            <h3>16%</h3>
-          </div>
-        </div>
-        <ArrowRight className="arrow-right" />
-      </ClickableTile>
-      <SelectableTile id="selectable-tile-1" name="tiles" value="selectable">
+      <SelectableTile
+        id="selectable-tile-1"
+        name="tiles"
+        value="selectable"
+        slug={slug}>
         <h4>Title</h4>
         <p>
           Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit at
@@ -100,7 +117,8 @@ export const SlugTest = () => {
       <ExpandableTile
         id="expandable-tile-1"
         tileCollapsedIconText="Interact to Expand tile"
-        tileExpandedIconText="Interact to Collapse tile">
+        tileExpandedIconText="Interact to Collapse tile"
+        slug={slug}>
         <TileAboveTheFoldContent>
           <h4>Title</h4>
           <p>
diff --git a/packages/react/src/components/Tile/Tile.tsx b/packages/react/src/components/Tile/Tile.tsx
index 3f84d76105d4..28617e5e3d35 100644
--- a/packages/react/src/components/Tile/Tile.tsx
+++ b/packages/react/src/components/Tile/Tile.tsx
@@ -9,7 +9,7 @@ import React, {
   type ChangeEvent,
   type ComponentType,
 } from 'react';
-import PropTypes from 'prop-types';
+import PropTypes, { ReactNodeLike } from 'prop-types';
 import cx from 'classnames';
 import {
   Checkbox,
@@ -147,8 +147,10 @@ export const ClickableTile = React.forwardRef<
   const classes = cx(
     `${prefix}--tile`,
     `${prefix}--tile--clickable`,
-    clicked && `${prefix}--tile--is-clicked`,
-    light && `${prefix}--tile--light`,
+    {
+      [`${prefix}--tile--is-clicked`]: clicked,
+      [`${prefix}--tile--light`]: light,
+    },
     className
   );
 
@@ -303,6 +305,11 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
    */
   selected?: boolean;
 
+  /**
+   * Provide a `Slug` component to be rendered inside the `SelectableTile` component
+   */
+  slug?: ReactNodeLike;
+
   /**
    * Specify the tab index of the wrapper element
    */
@@ -336,6 +343,7 @@ export const SelectableTile = React.forwardRef<
     selected = false,
     tabIndex = 0,
     title = 'title',
+    slug,
     ...rest
   },
   ref
@@ -351,9 +359,12 @@ export const SelectableTile = React.forwardRef<
   const classes = cx(
     `${prefix}--tile`,
     `${prefix}--tile--selectable`,
-    isSelected && `${prefix}--tile--is-selected`,
-    light && `${prefix}--tile--light`,
-    disabled && `${prefix}--tile--disabled`,
+    {
+      [`${prefix}--tile--is-selected`]: isSelected,
+      [`${prefix}--tile--light`]: light,
+      [`${prefix}--tile--disabled`]: disabled,
+      [`${prefix}--tile--slug`]: slug,
+    },
     className
   );
 
@@ -361,6 +372,9 @@ export const SelectableTile = React.forwardRef<
   function handleOnClick(evt) {
     evt.preventDefault();
     evt?.persist?.();
+    if (slug && slugRef.current && slugRef.current.contains(evt.target)) {
+      return;
+    }
     setIsSelected(!isSelected);
     clickHandler(evt);
     onChange(evt);
@@ -387,6 +401,16 @@ export const SelectableTile = React.forwardRef<
     setPrevSelected(selected);
   }
 
+  // Slug is always size `xs`
+  const slugRef = useRef<HTMLInputElement>(null);
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
+      size: 'xs',
+      ref: slugRef,
+    });
+  }
+
   return (
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
     <div
@@ -409,11 +433,11 @@ export const SelectableTile = React.forwardRef<
       <Text as="label" htmlFor={id} className={`${prefix}--tile-content`}>
         {children}
       </Text>
+      {normalizedSlug}
     </div>
   );
 });
 
-SelectableTile.displayName = 'SelectableTile';
 SelectableTile.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
@@ -463,6 +487,11 @@ SelectableTile.propTypes = {
    */
   selected: PropTypes.bool,
 
+  /**
+   * Provide a `Slug` component to be rendered inside the `SelectableTile` component
+   */
+  slug: PropTypes.node,
+
   /**
    * Specify the tab index of the wrapper element
    */
@@ -507,6 +536,11 @@ export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {
    */
   onKeyUp?(event: KeyboardEvent): void;
 
+  /**
+   * Provide a `Slug` component to be rendered inside the `ExpandableTile` component
+   */
+  slug?: ReactNodeLike;
+
   /**
    * The `tabindex` attribute.
    */
@@ -555,6 +589,7 @@ export const ExpandableTile = React.forwardRef<
     tileCollapsedLabel,
     tileExpandedLabel,
     light,
+    slug,
     ...rest
   },
   forwardRef
@@ -632,8 +667,11 @@ export const ExpandableTile = React.forwardRef<
     `${prefix}--tile`,
     `${prefix}--tile--expandable`,
     `${prefix}--tile--expandable--interactive`,
-    isExpanded && `${prefix}--tile--is-expanded`,
-    light && `${prefix}--tile--light`,
+    {
+      [`${prefix}--tile--is-expanded`]: isExpanded,
+      [`${prefix}--tile--light`]: light,
+      [`${prefix}--tile--slug`]: slug,
+    },
     className
   );
 
@@ -673,11 +711,12 @@ export const ExpandableTile = React.forwardRef<
       !getInteractiveContent(belowTheFold.current) &&
       !getRoleContent(belowTheFold.current) &&
       !getInteractiveContent(aboveTheFold.current) &&
-      !getRoleContent(aboveTheFold.current)
+      !getRoleContent(aboveTheFold.current) &&
+      !slug
     ) {
       setInteractive(false);
     }
-  }, []);
+  }, [slug]);
 
   useIsomorphicEffect(() => {
     if (!tile.current) {
@@ -707,6 +746,14 @@ export const ExpandableTile = React.forwardRef<
 
   const belowTheFoldId = useId('expandable-tile-interactive');
 
+  // Slug is always size `xs`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
+      size: 'xs',
+    });
+  }
+
   return interactive ? (
     <div
       // @ts-expect-error: Needlesly strict & deep typing for the element type
@@ -714,6 +761,7 @@ export const ExpandableTile = React.forwardRef<
       className={interactiveClassNames}
       {...rest}>
       <div ref={tileContent}>
+        {normalizedSlug}
         <div ref={aboveTheFold} className={`${prefix}--tile-content`}>
           {childrenAsArray[0]}
         </div>
diff --git a/packages/react/src/components/Tile/tile-story.scss b/packages/react/src/components/Tile/tile-story.scss
index 7c7df8a90d8f..efd3f17cebc2 100644
--- a/packages/react/src/components/Tile/tile-story.scss
+++ b/packages/react/src/components/Tile/tile-story.scss
@@ -12,13 +12,14 @@ div .bx--tile--selectable:not(:last-child) {
 .slug-tile-container {
   display: flex;
   flex-wrap: wrap;
+  align-items: flex-start;
 }
 
 .slug-tile-container .cds--tile {
-  height: 320px;
   max-width: 320px;
   margin-right: 3rem;
   margin-bottom: 3rem;
+  padding-bottom: 90px;
 }
 
 .slug-tile-container h4 {
diff --git a/packages/styles/scss/components/slug/_slug.scss b/packages/styles/scss/components/slug/_slug.scss
index 1e65431b014d..30f9a436c39a 100644
--- a/packages/styles/scss/components/slug/_slug.scss
+++ b/packages/styles/scss/components/slug/_slug.scss
@@ -4,6 +4,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../utilities/ai-gradient' as *;
 @use '../../utilities/convert';
 
 $sizes: (
@@ -324,22 +325,12 @@ $sizes: (
 
   // Slug callout styles
   .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--slug-content {
+    @include callout-gradient();
+
     border: 1px solid $border-subtle;
     border-radius: 16px;
     // 84px seems to make this fully opaque?
     backdrop-filter: blur(25px);
-    background: linear-gradient(
-        0deg,
-        $slug-callout-aura-start 0%,
-        $slug-callout-aura-end 33%,
-        transparent 100%
-      ),
-      linear-gradient(
-          180deg,
-          $slug-callout-gradient-top 0%,
-          $slug-callout-gradient-bottom 100%
-        )
-        rgba(0, 0, 0, 0.01);
     // 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));
diff --git a/packages/styles/scss/components/tile/_tile.scss b/packages/styles/scss/components/tile/_tile.scss
index c85eb0f499d2..a5f07093ff20 100644
--- a/packages/styles/scss/components/tile/_tile.scss
+++ b/packages/styles/scss/components/tile/_tile.scss
@@ -13,6 +13,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../utilities/ai-gradient' as *;
 @use '../../utilities/button-reset';
 @use '../../utilities/component-reset';
 @use '../../utilities/focus-outline' as *;
@@ -368,6 +369,30 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     fill: $icon-disabled;
   }
 
+  // Slug styles
+  .#{$prefix}--tile > .#{$prefix}--slug,
+  .#{$prefix}--tile--expandable > div > .#{$prefix}--slug {
+    position: absolute;
+    inset-block-start: $spacing-05;
+    inset-inline-end: $spacing-05;
+  }
+
+  .#{$prefix}--tile.#{$prefix}--tile--selectable > .#{$prefix}--slug {
+    inset-inline-end: $spacing-08;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile {
+    @include callout-gradient();
+
+    border: 1px solid $border-tile;
+  }
+
+  .#{$prefix}--tile--expandable:has(
+      .#{$prefix}--slug > .#{$prefix}--popover--open
+    ) {
+    overflow: visible;
+  }
+
   // Windows HCM fix
   .#{$prefix}--tile__chevron svg,
   .#{$prefix}--tile__checkmark svg,
diff --git a/packages/styles/scss/utilities/_ai-gradient.scss b/packages/styles/scss/utilities/_ai-gradient.scss
index ddf1beb042fe..77757256d2f7 100644
--- a/packages/styles/scss/utilities/_ai-gradient.scss
+++ b/packages/styles/scss/utilities/_ai-gradient.scss
@@ -9,12 +9,11 @@
 
 /// Experimental - name and structure subject to change. Use at your own risk!
 /// Adds AI gradient styles to a component
-/// @access public
+/// @access private
 /// @param {String} $direction  - Direction of gradient from: `left`, `right`, `top`, and `bottom`
 /// @param {Number} $width - Percentage width of gradient with regards to parent component
 /// @example @include ai-gradient('right', '33%');
 /// @group utilities
-
 @mixin ai-gradient($direction: 'right', $width: 33%) {
   $deg: 0;
   @if $direction == 'bottom' {
@@ -40,3 +39,23 @@
       transparent 100%
     );
 }
+
+/// Experimental - name and structure subject to change. Use at your own risk!
+/// Adds callout gradient styles to a component
+/// @access private
+/// @example @include callout-gradient();
+/// @group utilities
+@mixin callout-gradient() {
+  background: linear-gradient(
+      0deg,
+      theme.$slug-callout-aura-start 0%,
+      theme.$slug-callout-aura-end 33%,
+      transparent 100%
+    ),
+    linear-gradient(
+        180deg,
+        theme.$slug-callout-gradient-top 0%,
+        theme.$slug-callout-gradient-bottom 100%
+      )
+      rgba(0, 0, 0, 0.01);
+}

From 4f24f695db82378a86bea81193faaf04a6f59fa3 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Fri, 17 Nov 2023 08:50:58 -0500
Subject: [PATCH 3/9] test(snapshot): update snapshots

---
 packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 1ca356b34d0d..56835681f587 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6595,6 +6595,9 @@ Map {
       "selected": Object {
         "type": "bool",
       },
+      "slug": Object {
+        "type": "node",
+      },
       "tabIndex": Object {
         "type": "number",
       },

From e5484df9fc089e40eb2ac7b88377f1bb1c25521a Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Fri, 17 Nov 2023 09:11:44 -0500
Subject: [PATCH 4/9] feat(Tile): add slug prop to Tile

---
 .../react/src/components/Tile/Tile.stories.js  | 17 +++++++++++++++++
 packages/react/src/components/Tile/Tile.tsx    | 18 ++++++++++++++++--
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Tile/Tile.stories.js b/packages/react/src/components/Tile/Tile.stories.js
index f11b776e28f9..2e635b3f55c5 100644
--- a/packages/react/src/components/Tile/Tile.stories.js
+++ b/packages/react/src/components/Tile/Tile.stories.js
@@ -93,6 +93,23 @@ export const SlugTest = () => {
 
   return (
     <div className="slug-tile-container">
+      <Tile slug={slug} id="tile-1">
+        <h4>Title</h4>
+        <p>
+          Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit at
+          consectetur turpis mauris gravida penatibus.
+        </p>
+        <div className="ai-data">
+          <div className="data-container">
+            <p>Data Quality</p>
+            <h3>85%</h3>
+          </div>
+          <div className="data-container">
+            <p>Label text</p>
+            <h3>16%</h3>
+          </div>
+        </div>
+      </Tile>
       <SelectableTile
         id="selectable-tile-1"
         name="tiles"
diff --git a/packages/react/src/components/Tile/Tile.tsx b/packages/react/src/components/Tile/Tile.tsx
index 28617e5e3d35..a43826dff042 100644
--- a/packages/react/src/components/Tile/Tile.tsx
+++ b/packages/react/src/components/Tile/Tile.tsx
@@ -38,22 +38,31 @@ export interface TileProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;
   /** @deprecated */
   light?: boolean;
+
+  /**
+   * Provide a `Slug` component to be rendered inside the `SelectableTile` component
+   */
+  slug?: ReactNodeLike;
 }
 
 export const Tile = React.forwardRef<HTMLDivElement, TileProps>(function Tile(
-  { children, className, light = false, ...rest },
+  { children, className, light = false, slug, ...rest },
   ref
 ) {
   const prefix = usePrefix();
 
   const tileClasses = cx(
     `${prefix}--tile`,
-    light && `${prefix}--tile--light`,
+    {
+      [`${prefix}--tile--light`]: light,
+      [`${prefix}--tile--slug`]: slug,
+    },
     className
   );
   return (
     <div className={tileClasses} ref={ref} {...rest}>
       {children}
+      {slug}
     </div>
   );
 });
@@ -80,6 +89,11 @@ Tile.propTypes = {
     PropTypes.bool,
     'The `light` prop for `Tile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'
   ),
+
+  /**
+   * Provide a `Slug` component to be rendered inside the `Tile` component
+   */
+  slug: PropTypes.node,
 };
 
 export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {

From 156b2dbc9d0c127edf47066274de1530812f10a0 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Fri, 17 Nov 2023 09:56:36 -0500
Subject: [PATCH 5/9] test(snapshot): update snapshots

---
 packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 56835681f587..819c169661ab 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -8525,6 +8525,9 @@ Map {
         "type": "string",
       },
       "light": [Function],
+      "slug": Object {
+        "type": "node",
+      },
     },
     "render": [Function],
   },

From 311229b0f1e3aec37d63aeb4085a8d795d4eefc3 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 20 Nov 2023 15:05:47 -0500
Subject: [PATCH 6/9] feat(Tile): add new tokens, add hover, selected styles

---
 .../react/src/components/Tile/Tile.stories.js | 29 +++++++-
 packages/react/src/components/Tile/Tile.tsx   | 32 ++++++++-
 .../styles/scss/components/tile/_tile.scss    | 71 ++++++++++++++++++-
 .../styles/scss/utilities/_ai-gradient.scss   | 61 ++++++++++++----
 packages/themes/src/g10.js                    | 10 +++
 packages/themes/src/g100.js                   | 11 +++
 packages/themes/src/g90.js                    | 11 +++
 packages/themes/src/tokens/v11TokenGroup.js   | 10 +++
 packages/themes/src/white.js                  | 10 +++
 9 files changed, 229 insertions(+), 16 deletions(-)

diff --git a/packages/react/src/components/Tile/Tile.stories.js b/packages/react/src/components/Tile/Tile.stories.js
index 2e635b3f55c5..84cff4b80e6c 100644
--- a/packages/react/src/components/Tile/Tile.stories.js
+++ b/packages/react/src/components/Tile/Tile.stories.js
@@ -25,7 +25,13 @@ import {
 import TileGroup from '../TileGroup/TileGroup';
 import { IconButton } from '../IconButton';
 import { Slug, SlugContent, SlugActions } from '../Slug';
-import { Download, View, FolderOpen, Folders } from '@carbon/icons-react';
+import {
+  Download,
+  View,
+  FolderOpen,
+  Folders,
+  ArrowRight,
+} from '@carbon/icons-react';
 
 export default {
   title: 'Components/Tile',
@@ -110,6 +116,27 @@ export const SlugTest = () => {
           </div>
         </div>
       </Tile>
+      <ClickableTile
+        href="https://www.carbondesignsystem.com/"
+        slug
+        id="tile-click"
+        renderIcon={ArrowRight}>
+        <h4>Title</h4>
+        <p>
+          Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit at
+          consectetur turpis mauris gravida penatibus.
+        </p>
+        <div className="ai-data">
+          <div className="data-container">
+            <p>Data Quality</p>
+            <h3>85%</h3>
+          </div>
+          <div className="data-container">
+            <p>Label text</p>
+            <h3>16%</h3>
+          </div>
+        </div>
+      </ClickableTile>
       <SelectableTile
         id="selectable-tile-1"
         name="tiles"
diff --git a/packages/react/src/components/Tile/Tile.tsx b/packages/react/src/components/Tile/Tile.tsx
index a43826dff042..d0ab9bfd5b4e 100644
--- a/packages/react/src/components/Tile/Tile.tsx
+++ b/packages/react/src/components/Tile/Tile.tsx
@@ -137,6 +137,11 @@ export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
    * The rel property for the link.
    */
   rel?: string;
+
+  /**
+   * Specify if a `Slug` icon should be rendered inside the `ClickableTile`
+   */
+  slug?: boolean;
 }
 
 export const ClickableTile = React.forwardRef<
@@ -153,6 +158,7 @@ export const ClickableTile = React.forwardRef<
     onClick = () => {},
     onKeyDown = () => {},
     renderIcon: Icon,
+    slug,
     ...rest
   },
   ref
@@ -164,6 +170,7 @@ export const ClickableTile = React.forwardRef<
     {
       [`${prefix}--tile--is-clicked`]: clicked,
       [`${prefix}--tile--light`]: light,
+      [`${prefix}--tile--slug`]: slug,
     },
     className
   );
@@ -184,6 +191,24 @@ export const ClickableTile = React.forwardRef<
     onKeyDown(evt);
   }
 
+  // To Do: Replace with an an icon from `@carbon/react`
+  // since the hollow slug in `ClickableTile` is not interactive
+  const hollowSlugIcon = (
+    <svg
+      className={`${prefix}--tile--slug-icon`}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <rect x="0.5" y="0.5" width="23" height="23" />
+      <path
+        d="M13.2436 16H11.5996L10.9276 13.864H7.95164L7.29164 16H5.68364L8.49164 7.624H10.4596L13.2436 16ZM10.5436 12.508L9.46364 9.064H9.40364L8.33564 12.508H10.5436ZM17.9341 16H14.1301V14.728H15.2341V8.896H14.1301V7.624H17.9341V8.896H16.8181V14.728H17.9341V16Z"
+        fill="#161616"
+      />
+    </svg>
+  );
+
   const v12DefaultIcons = useFeatureFlag('enable-v12-tile-default-icons');
   if (v12DefaultIcons) {
     if (!Icon) {
@@ -211,7 +236,12 @@ export const ClickableTile = React.forwardRef<
       ref={ref}
       disabled={disabled}
       {...rest}>
-      {children}
+      {slug ? (
+        <div className={`${prefix}--tile-content`}>{children}</div>
+      ) : (
+        children
+      )}
+      {slug && hollowSlugIcon}
       {Icon && <Icon className={iconClasses} aria-hidden="true" />}
     </Link>
   );
diff --git a/packages/styles/scss/components/tile/_tile.scss b/packages/styles/scss/components/tile/_tile.scss
index a5f07093ff20..eaf8709b22c9 100644
--- a/packages/styles/scss/components/tile/_tile.scss
+++ b/packages/styles/scss/components/tile/_tile.scss
@@ -371,7 +371,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
   // Slug styles
   .#{$prefix}--tile > .#{$prefix}--slug,
-  .#{$prefix}--tile--expandable > div > .#{$prefix}--slug {
+  .#{$prefix}--tile--expandable > div > .#{$prefix}--slug,
+  .#{$prefix}--tile--clickable .#{$prefix}--tile--slug-icon {
     position: absolute;
     inset-block-start: $spacing-05;
     inset-inline-end: $spacing-05;
@@ -381,18 +382,86 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     inset-inline-end: $spacing-08;
   }
 
+  .#{$prefix}--tile.#{$prefix}--tile--clickable > .#{$prefix}--slug {
+    pointer-events: none;
+  }
+
   .#{$prefix}--tile--slug.#{$prefix}--tile {
     @include callout-gradient();
 
     border: 1px solid $border-tile;
   }
 
+  .#{$prefix}--tile--slug.#{$prefix}--tile--expandable:hover {
+    @include callout-gradient();
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
+    position: absolute;
+    display: block;
+    block-size: 100%;
+    content: '';
+    inline-size: 100%;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    opacity: 0;
+    transition: opacity $duration-fast-02 motion(standard, productive);
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
+    @include callout-gradient('hover');
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable:hover::before,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable:hover::before {
+    opacity: 1;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after {
+    @include callout-gradient('selected');
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--is-selected::after {
+    opacity: 1;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--is-selected {
+    border-color: $border-inverse;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
+    .#{$prefix}--tile-content,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable
+    .#{$prefix}--tile-content {
+    position: relative;
+    z-index: 1;
+    cursor: pointer;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable > .#{$prefix}--slug,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
+    > .#{$prefix}--tile__checkmark {
+    z-index: 1;
+  }
+
   .#{$prefix}--tile--expandable:has(
       .#{$prefix}--slug > .#{$prefix}--popover--open
     ) {
     overflow: visible;
   }
 
+  // To Do: Replace svg overrides with actual AI icon
+  .#{$prefix}--tile--clickable .#{$prefix}--tile--slug-icon rect {
+    stroke: $icon-primary;
+  }
+
+  .#{$prefix}--tile--clickable .#{$prefix}--tile--slug-icon path {
+    fill: $icon-primary;
+  }
+
   // Windows HCM fix
   .#{$prefix}--tile__chevron svg,
   .#{$prefix}--tile__checkmark svg,
diff --git a/packages/styles/scss/utilities/_ai-gradient.scss b/packages/styles/scss/utilities/_ai-gradient.scss
index 77757256d2f7..b7b80c1abe70 100644
--- a/packages/styles/scss/utilities/_ai-gradient.scss
+++ b/packages/styles/scss/utilities/_ai-gradient.scss
@@ -44,18 +44,53 @@
 /// Adds callout gradient styles to a component
 /// @access private
 /// @example @include callout-gradient();
+/// @param {String} $type  - Type of gradient, either 'default', 'selected' or 'hover'
 /// @group utilities
-@mixin callout-gradient() {
-  background: linear-gradient(
-      0deg,
-      theme.$slug-callout-aura-start 0%,
-      theme.$slug-callout-aura-end 33%,
-      transparent 100%
-    ),
-    linear-gradient(
-        180deg,
-        theme.$slug-callout-gradient-top 0%,
-        theme.$slug-callout-gradient-bottom 100%
-      )
-      rgba(0, 0, 0, 0.01);
+@mixin callout-gradient($type: 'default') {
+  @if $type == 'hover' {
+    background: linear-gradient(
+        0deg,
+        theme.$slug-callout-aura-start-hover-01 0%,
+        theme.$slug-callout-aura-end-hover-01 50%,
+        transparent 50%
+      ),
+      linear-gradient(
+        0deg,
+        theme.$slug-callout-aura-start-hover-02 0%,
+        theme.$slug-callout-aura-end-hover-02 50%,
+        transparent 50%
+      ),
+      linear-gradient(
+          180deg,
+          theme.$slug-callout-gradient-top-hover 0%,
+          theme.$slug-callout-gradient-bottom-hover 100%
+        )
+        rgba(0, 0, 0, 0.01);
+  } @else if $type == 'selected' {
+    background: linear-gradient(
+        0deg,
+        theme.$slug-callout-aura-start-selected 0%,
+        theme.$slug-callout-aura-end-selected 50%,
+        transparent 50%
+      ),
+      linear-gradient(
+          180deg,
+          theme.$slug-callout-gradient-top-selected 0%,
+          theme.$slug-callout-gradient-bottom-selected 100%
+        )
+        rgba(0, 0, 0, 0.01);
+  } @else {
+    background: linear-gradient(
+        0deg,
+        theme.$slug-callout-aura-start 0%,
+        theme.$slug-callout-aura-end 50%,
+        transparent 50%
+      ),
+      linear-gradient(
+          180deg,
+          theme.$slug-callout-gradient-top 0%,
+          theme.$slug-callout-gradient-bottom 100%
+        )
+        rgba(0, 0, 0, 0.01);
+  }
 }
diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js
index 901a453a9a26..bd267a73db00 100644
--- a/packages/themes/src/g10.js
+++ b/packages/themes/src/g10.js
@@ -216,6 +216,16 @@ export const slugCalloutGradientTop = rgba(gray10, 0.85);
 export const slugCalloutGradientBottom = rgba(gray20, 0.85);
 export const slugCalloutAuraStart = rgba(blue10, 0.6);
 export const slugCalloutAuraEnd = rgba(white, 0);
+export const slugCalloutGradientTopHover = rgba(gray20, 0.55);
+export const slugCalloutGradientBottomHover = rgba(gray20Hover, 0.55);
+export const slugCalloutAuraStartHover01 = rgba(white, 0.5);
+export const slugCalloutAuraEndHover01 = rgba(white, 0);
+export const slugCalloutAuraStartHover02 = rgba(blue20, 0.5);
+export const slugCalloutAuraEndHover02 = rgba(white, 0);
+export const slugCalloutGradientTopSelected = rgba(gray20, 0.85);
+export const slugCalloutGradientBottomSelected = rgba(gray20Hover, 0.85);
+export const slugCalloutAuraStartSelected = rgba(blue10, 0.6);
+export const slugCalloutAuraEndSelected = rgba(white, 0);
 // Linear gradient tokens
 export const aiGradientStart01 = rgba(coolGray10, 0.5);
 export const aiGradientStart02 = rgba(blue10, 0.5);
diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js
index c4ecdabcfc7d..8a46d6bda451 100644
--- a/packages/themes/src/g100.js
+++ b/packages/themes/src/g100.js
@@ -8,6 +8,7 @@
 import {
   // Blue
   blue20,
+  blue20Hover,
   blue40,
   blue60,
   blue70,
@@ -221,6 +222,16 @@ export const slugCalloutGradientTop = rgba(gray100, 0.85);
 export const slugCalloutGradientBottom = rgba(gray90, 0.85);
 export const slugCalloutAuraStart = rgba(blue20, 0.2);
 export const slugCalloutAuraEnd = rgba(gray100, 0);
+export const slugCalloutGradientTopHover = rgba(gray80, 0.55);
+export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
+export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
+export const slugCalloutAuraEndHover01 = rgba(gray100, 0);
+export const slugCalloutAuraStartHover02 = 'transparent';
+export const slugCalloutAuraEndHover02 = 'transparent';
+export const slugCalloutGradientTopSelected = rgba(gray80, 0.85);
+export const slugCalloutGradientBottomSelected = rgba(gray80Hover, 0.85);
+export const slugCalloutAuraStartSelected = rgba(blue20, 0.2);
+export const slugCalloutAuraEndSelected = rgba(gray100, 0);
 // Linear gradient tokens
 export const aiGradientStart01 = rgba(blue20, 0.2);
 export const aiGradientStart02 = 'transparent';
diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js
index 927b38703e95..6e0d751e139d 100644
--- a/packages/themes/src/g90.js
+++ b/packages/themes/src/g90.js
@@ -8,6 +8,7 @@
 import {
   // Blue
   blue20,
+  blue20Hover,
   blue40,
   blue60,
   blue70,
@@ -221,6 +222,16 @@ export const slugCalloutGradientTop = rgba(gray100, 0.85);
 export const slugCalloutGradientBottom = rgba(gray90, 0.85);
 export const slugCalloutAuraStart = rgba(blue20, 0.2);
 export const slugCalloutAuraEnd = rgba(gray100, 0);
+export const slugCalloutGradientTopHover = rgba(gray80, 0.55);
+export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
+export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
+export const slugCalloutAuraEndHover01 = rgba(gray100, 0);
+export const slugCalloutAuraStartHover02 = 'transparent';
+export const slugCalloutAuraEndHover02 = 'transparent';
+export const slugCalloutGradientTopSelected = rgba(gray80, 0.85);
+export const slugCalloutGradientBottomSelected = rgba(gray80Hover, 0.85);
+export const slugCalloutAuraStartSelected = rgba(blue20, 0.2);
+export const slugCalloutAuraEndSelected = rgba(gray100, 0);
 // Linear gradient tokens
 export const aiGradientStart01 = rgba(blue20, 0.2);
 export const aiGradientStart02 = 'transparent';
diff --git a/packages/themes/src/tokens/v11TokenGroup.js b/packages/themes/src/tokens/v11TokenGroup.js
index 205295029f6f..a9ee25a7810e 100644
--- a/packages/themes/src/tokens/v11TokenGroup.js
+++ b/packages/themes/src/tokens/v11TokenGroup.js
@@ -354,6 +354,16 @@ export const ai = TokenGroup.create({
     'slug-callout-gradient-bottom',
     'slug-callout-aura-start',
     'slug-callout-aura-end',
+    'slug-callout-gradient-top-hover',
+    'slug-callout-gradient-bottom-hover',
+    'slug-callout-aura-start-hover-01',
+    'slug-callout-aura-start-hover-02',
+    'slug-callout-aura-end-hover-01',
+    'slug-callout-aura-end-hover-02',
+    'slug-callout-gradient-top-selected',
+    'slug-callout-gradient-bottom-selected',
+    'slug-callout-aura-start-selected',
+    'slug-callout-aura-end-selected',
     'ai-gradient-start-01',
     'ai-gradient-start-02',
     'ai-gradient-end',
diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js
index 58f1fefbc4d9..e2e0913439a3 100644
--- a/packages/themes/src/white.js
+++ b/packages/themes/src/white.js
@@ -216,6 +216,16 @@ export const slugCalloutGradientTop = rgba(gray10, 0.85);
 export const slugCalloutGradientBottom = rgba(gray20, 0.85);
 export const slugCalloutAuraStart = rgba(blue10, 0.6);
 export const slugCalloutAuraEnd = rgba(white, 0);
+export const slugCalloutGradientTopHover = rgba(gray20, 0.55);
+export const slugCalloutGradientBottomHover = rgba(gray20Hover, 0.55);
+export const slugCalloutAuraStartHover01 = rgba(white, 0.5);
+export const slugCalloutAuraEndHover01 = rgba(white, 0);
+export const slugCalloutAuraStartHover02 = rgba(blue20, 0.5);
+export const slugCalloutAuraEndHover02 = rgba(white, 0);
+export const slugCalloutGradientTopSelected = rgba(gray20, 0.85);
+export const slugCalloutGradientBottomSelected = rgba(gray20Hover, 0.85);
+export const slugCalloutAuraStartSelected = rgba(blue10, 0.6);
+export const slugCalloutAuraEndSelected = rgba(white, 0);
 // Linear gradient tokens
 export const aiGradientStart01 = rgba(coolGray10, 0.5);
 export const aiGradientStart02 = rgba(blue10, 0.5);

From 975c18783f25ff3cce89ebd972f253fc1654441f Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 20 Nov 2023 15:09:07 -0500
Subject: [PATCH 7/9] test(snapshot): update snapshots

---
 .../__snapshots__/PublicAPI-test.js.snap      | 10 +++++
 packages/styles/scss/__tests__/theme-test.js  | 10 +++++
 .../__tests__/__snapshots__/v11-test.js.snap  | 10 +++++
 .../src/tokens/__tests__/metadata-test.js     | 40 +++++++++++++++++++
 4 files changed, 70 insertions(+)

diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
index 4fc8fdf09a26..81a38fcd9baf 100644
--- a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -277,9 +277,19 @@ Array [
   "slugBackground",
   "slugBackgroundHover",
   "slugCalloutAuraEnd",
+  "slugCalloutAuraEndHover01",
+  "slugCalloutAuraEndHover02",
+  "slugCalloutAuraEndSelected",
   "slugCalloutAuraStart",
+  "slugCalloutAuraStartHover01",
+  "slugCalloutAuraStartHover02",
+  "slugCalloutAuraStartSelected",
   "slugCalloutGradientBottom",
+  "slugCalloutGradientBottomHover",
+  "slugCalloutGradientBottomSelected",
   "slugCalloutGradientTop",
+  "slugCalloutGradientTopHover",
+  "slugCalloutGradientTopSelected",
   "slugGradient",
   "slugGradientHover",
   "slugHollowHover",
diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js
index 3d65ca32cc2d..1dd03d1c3206 100644
--- a/packages/styles/scss/__tests__/theme-test.js
+++ b/packages/styles/scss/__tests__/theme-test.js
@@ -136,6 +136,16 @@ describe('@carbon/styles/scss/theme', () => {
         "slug-callout-gradient-bottom",
         "slug-callout-aura-start",
         "slug-callout-aura-end",
+        "slug-callout-gradient-top-hover",
+        "slug-callout-gradient-bottom-hover",
+        "slug-callout-aura-start-hover-01",
+        "slug-callout-aura-start-hover-02",
+        "slug-callout-aura-end-hover-01",
+        "slug-callout-aura-end-hover-02",
+        "slug-callout-gradient-top-selected",
+        "slug-callout-gradient-bottom-selected",
+        "slug-callout-aura-start-selected",
+        "slug-callout-aura-end-selected",
         "ai-gradient-start-01",
         "ai-gradient-start-02",
         "ai-gradient-end",
diff --git a/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap b/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap
index b8e4a889f81d..bac8344e6b5b 100644
--- a/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap
+++ b/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap
@@ -247,6 +247,16 @@ Array [
   "slug-callout-gradient-bottom",
   "slug-callout-aura-start",
   "slug-callout-aura-end",
+  "slug-callout-gradient-top-hover",
+  "slug-callout-gradient-bottom-hover",
+  "slug-callout-aura-start-hover-01",
+  "slug-callout-aura-start-hover-02",
+  "slug-callout-aura-end-hover-01",
+  "slug-callout-aura-end-hover-02",
+  "slug-callout-gradient-top-selected",
+  "slug-callout-gradient-bottom-selected",
+  "slug-callout-aura-start-selected",
+  "slug-callout-aura-end-selected",
   "ai-gradient-start-01",
   "ai-gradient-start-02",
   "ai-gradient-end",
diff --git a/packages/themes/src/tokens/__tests__/metadata-test.js b/packages/themes/src/tokens/__tests__/metadata-test.js
index 6cb4c034a189..22c8a0071cc8 100644
--- a/packages/themes/src/tokens/__tests__/metadata-test.js
+++ b/packages/themes/src/tokens/__tests__/metadata-test.js
@@ -961,6 +961,46 @@ test('metadata', () => {
           "name": "slug-callout-aura-end",
           "type": "color",
         },
+        Object {
+          "name": "slug-callout-gradient-top-hover",
+          "type": "color",
+        },
+        Object {
+          "name": "slug-callout-gradient-bottom-hover",
+          "type": "color",
+        },
+        Object {
+          "name": "slug-callout-aura-start-hover-01",
+          "type": "color",
+        },
+        Object {
+          "name": "slug-callout-aura-start-hover-02",
+          "type": "color",
+        },
+        Object {
+          "name": "slug-callout-aura-end-hover-01",
+          "type": "color",
+        },
+        Object {
+          "name": "slug-callout-aura-end-hover-02",
+          "type": "color",
+        },
+        Object {
+          "name": "slug-callout-gradient-top-selected",
+          "type": "color",
+        },
+        Object {
+          "name": "slug-callout-gradient-bottom-selected",
+          "type": "color",
+        },
+        Object {
+          "name": "slug-callout-aura-start-selected",
+          "type": "color",
+        },
+        Object {
+          "name": "slug-callout-aura-end-selected",
+          "type": "color",
+        },
         Object {
           "name": "ai-gradient-start-01",
           "type": "color",

From e14ad02f6caf8d5021452a35f217dad2910a0f6c Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 28 Nov 2023 11:26:26 -0500
Subject: [PATCH 8/9] feat(Tile): add new prop for rounded corners

---
 .../__snapshots__/PublicAPI-test.js.snap      | 12 ++++
 .../react/src/components/Tile/Tile.stories.js | 36 +++++++++--
 packages/react/src/components/Tile/Tile.tsx   | 64 ++++++++++++++++++-
 .../styles/scss/components/tile/_tile.scss    |  5 ++
 4 files changed, 111 insertions(+), 6 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 536fc17e04f5..43e93b4f6246 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -584,6 +584,9 @@ Map {
       "disabled": Object {
         "type": "bool",
       },
+      "hasRoundedCorners": Object {
+        "type": "bool",
+      },
       "href": Object {
         "type": "string",
       },
@@ -3081,6 +3084,9 @@ Map {
       "expanded": Object {
         "type": "bool",
       },
+      "hasRoundedCorners": Object {
+        "type": "bool",
+      },
       "id": Object {
         "type": "string",
       },
@@ -6646,6 +6652,9 @@ Map {
       "disabled": Object {
         "type": "bool",
       },
+      "hasRoundedCorners": Object {
+        "type": "bool",
+      },
       "id": Object {
         "type": "string",
       },
@@ -8594,6 +8603,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "hasRoundedCorners": Object {
+        "type": "bool",
+      },
       "light": [Function],
       "slug": Object {
         "type": "node",
diff --git a/packages/react/src/components/Tile/Tile.stories.js b/packages/react/src/components/Tile/Tile.stories.js
index 84cff4b80e6c..f46063a6fcf7 100644
--- a/packages/react/src/components/Tile/Tile.stories.js
+++ b/packages/react/src/components/Tile/Tile.stories.js
@@ -65,7 +65,7 @@ export const Default = () => {
   );
 };
 
-export const SlugTest = () => {
+export const SlugTest = (args) => {
   const slug = (
     <Slug className="slug-container">
       <SlugContent>
@@ -99,7 +99,7 @@ export const SlugTest = () => {
 
   return (
     <div className="slug-tile-container">
-      <Tile slug={slug} id="tile-1">
+      <Tile slug={slug} id="tile-1" {...args}>
         <h4>Title</h4>
         <p>
           Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit at
@@ -120,7 +120,8 @@ export const SlugTest = () => {
         href="https://www.carbondesignsystem.com/"
         slug
         id="tile-click"
-        renderIcon={ArrowRight}>
+        renderIcon={ArrowRight}
+        {...args}>
         <h4>Title</h4>
         <p>
           Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit at
@@ -141,7 +142,8 @@ export const SlugTest = () => {
         id="selectable-tile-1"
         name="tiles"
         value="selectable"
-        slug={slug}>
+        slug={slug}
+        {...args}>
         <h4>Title</h4>
         <p>
           Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit at
@@ -162,7 +164,8 @@ export const SlugTest = () => {
         id="expandable-tile-1"
         tileCollapsedIconText="Interact to Expand tile"
         tileExpandedIconText="Interact to Collapse tile"
-        slug={slug}>
+        slug={slug}
+        {...args}>
         <TileAboveTheFoldContent>
           <h4>Title</h4>
           <p>
@@ -192,6 +195,29 @@ export const SlugTest = () => {
   );
 };
 
+SlugTest.argTypes = {
+  hasRoundedCorners: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  children: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  slug: {
+    table: {
+      disable: true,
+    },
+  },
+};
+
 export const DefaultWithLayer = () => (
   <WithLayer>
     {(layer) => (
diff --git a/packages/react/src/components/Tile/Tile.tsx b/packages/react/src/components/Tile/Tile.tsx
index d0ab9bfd5b4e..2fb559804d78 100644
--- a/packages/react/src/components/Tile/Tile.tsx
+++ b/packages/react/src/components/Tile/Tile.tsx
@@ -39,6 +39,12 @@ export interface TileProps extends HTMLAttributes<HTMLDivElement> {
   /** @deprecated */
   light?: boolean;
 
+  /**
+   * Specify if the `Tile` component should be rendered with rounded corners. Only valid
+   * when `slug` prop is present
+   */
+  hasRoundedCorners?: boolean;
+
   /**
    * Provide a `Slug` component to be rendered inside the `SelectableTile` component
    */
@@ -46,7 +52,14 @@ export interface TileProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 export const Tile = React.forwardRef<HTMLDivElement, TileProps>(function Tile(
-  { children, className, light = false, slug, ...rest },
+  {
+    children,
+    className,
+    light = false,
+    slug,
+    hasRoundedCorners = false,
+    ...rest
+  },
   ref
 ) {
   const prefix = usePrefix();
@@ -56,6 +69,7 @@ export const Tile = React.forwardRef<HTMLDivElement, TileProps>(function Tile(
     {
       [`${prefix}--tile--light`]: light,
       [`${prefix}--tile--slug`]: slug,
+      [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
     },
     className
   );
@@ -79,6 +93,12 @@ Tile.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * Specify if the `Tile` component should be rendered with rounded corners. Only valid
+   * when `slug` prop is present
+   */
+  hasRoundedCorners: PropTypes.bool,
+
   /**
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
@@ -113,6 +133,12 @@ export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
    */
   disabled?: boolean;
 
+  /**
+   * Specify if the `ClickableTile` component should be rendered with rounded corners.
+   * Only valid when `slug` prop is present
+   */
+  hasRoundedCorners?: boolean;
+
   /**
    * The href for the link.
    */
@@ -158,6 +184,7 @@ export const ClickableTile = React.forwardRef<
     onClick = () => {},
     onKeyDown = () => {},
     renderIcon: Icon,
+    hasRoundedCorners,
     slug,
     ...rest
   },
@@ -171,6 +198,7 @@ export const ClickableTile = React.forwardRef<
       [`${prefix}--tile--is-clicked`]: clicked,
       [`${prefix}--tile--light`]: light,
       [`${prefix}--tile--slug`]: slug,
+      [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
     },
     className
   );
@@ -269,6 +297,12 @@ ClickableTile.propTypes = {
    */
   disabled: PropTypes.bool,
 
+  /**
+   * Specify if the `ClickableTile` component should be rendered with rounded corners.
+   * Only valid when `slug` prop is present
+   */
+  hasRoundedCorners: PropTypes.bool,
+
   /**
    * The href for the link.
    */
@@ -318,6 +352,12 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
    */
   disabled?: boolean;
 
+  /**
+   * Specify if the `SelectableTile` component should be rendered with rounded corners.
+   * Only valid when `slug` prop is present
+   */
+  hasRoundedCorners?: boolean;
+
   /**
    * The ID of the `<input>`.
    */
@@ -388,6 +428,7 @@ export const SelectableTile = React.forwardRef<
     tabIndex = 0,
     title = 'title',
     slug,
+    hasRoundedCorners,
     ...rest
   },
   ref
@@ -408,6 +449,7 @@ export const SelectableTile = React.forwardRef<
       [`${prefix}--tile--light`]: light,
       [`${prefix}--tile--disabled`]: disabled,
       [`${prefix}--tile--slug`]: slug,
+      [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
     },
     className
   );
@@ -491,6 +533,12 @@ SelectableTile.propTypes = {
    */
   disabled: PropTypes.bool,
 
+  /**
+   * Specify if the `SelectableTile` component should be rendered with rounded corners.
+   * Only valid when `slug` prop is present
+   */
+  hasRoundedCorners: PropTypes.bool,
+
   /**
    * The ID of the `<input>`.
    */
@@ -565,6 +613,12 @@ export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {
    */
   expanded?: boolean;
 
+  /**
+   * Specify if the `ExpandableTile` component should be rendered with rounded corners.
+   * Only valid when `slug` prop is present
+   */
+  hasRoundedCorners?: boolean;
+
   /**
    * An ID that can be provided to aria-labelledby
    */
@@ -634,6 +688,7 @@ export const ExpandableTile = React.forwardRef<
     tileExpandedLabel,
     light,
     slug,
+    hasRoundedCorners,
     ...rest
   },
   forwardRef
@@ -715,6 +770,7 @@ export const ExpandableTile = React.forwardRef<
       [`${prefix}--tile--is-expanded`]: isExpanded,
       [`${prefix}--tile--light`]: light,
       [`${prefix}--tile--slug`]: slug,
+      [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
     },
     className
   );
@@ -864,6 +920,12 @@ ExpandableTile.propTypes = {
    */
   expanded: PropTypes.bool,
 
+  /**
+   * Specify if the `ExpandableTile` component should be rendered with rounded corners.
+   * Only valid when `slug` prop is present
+   */
+  hasRoundedCorners: PropTypes.bool,
+
   /**
    * An ID that can be provided to aria-labelledby
    */
diff --git a/packages/styles/scss/components/tile/_tile.scss b/packages/styles/scss/components/tile/_tile.scss
index eaf8709b22c9..849b0efdfd74 100644
--- a/packages/styles/scss/components/tile/_tile.scss
+++ b/packages/styles/scss/components/tile/_tile.scss
@@ -462,6 +462,11 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     fill: $icon-primary;
   }
 
+  // Tile with slug and rounded corners
+  .#{$prefix}--tile--slug-rounded {
+    border-radius: $spacing-05;
+  }
+
   // Windows HCM fix
   .#{$prefix}--tile__chevron svg,
   .#{$prefix}--tile__checkmark svg,

From f562ea4a4399f4a07e0d569c618908601f893749 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 28 Nov 2023 14:34:52 -0500
Subject: [PATCH 9/9] style(Tile): fix border-radius on pseudo elements

---
 packages/styles/scss/components/tile/_tile.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/styles/scss/components/tile/_tile.scss b/packages/styles/scss/components/tile/_tile.scss
index 849b0efdfd74..4efab8b0ba02 100644
--- a/packages/styles/scss/components/tile/_tile.scss
+++ b/packages/styles/scss/components/tile/_tile.scss
@@ -463,7 +463,10 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   }
 
   // Tile with slug and rounded corners
-  .#{$prefix}--tile--slug-rounded {
+  .#{$prefix}--tile--slug-rounded,
+  .#{$prefix}--tile--slug-rounded.#{$prefix}--tile--selectable::before,
+  .#{$prefix}--tile--slug-rounded.#{$prefix}--tile--selectable::after,
+  .#{$prefix}--tile--slug-rounded.#{$prefix}--tile--clickable::before {
     border-radius: $spacing-05;
   }