From c01e8da998d73584531a1a4e84ec60e3e2ebb787 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 17 Jun 2024 12:01:14 -0400
Subject: [PATCH 01/17] feat(AILabel): rename Slug to AILabel

---
 .../components/Slug/Slug-examples.stories.js  |  2 +-
 packages/react/src/components/Slug/Slug.mdx   |  2 +-
 .../components/Slug/__tests__/Slug-test.js    | 24 ++++----
 packages/react/src/components/Slug/index.js   | 60 +++++++++----------
 4 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/packages/react/src/components/Slug/Slug-examples.stories.js b/packages/react/src/components/Slug/Slug-examples.stories.js
index a423b5aa9f36..3057a83611fd 100644
--- a/packages/react/src/components/Slug/Slug-examples.stories.js
+++ b/packages/react/src/components/Slug/Slug-examples.stories.js
@@ -41,7 +41,7 @@ import {
   Folders,
   Asleep,
 } from '@carbon/icons-react';
-import { Slug, SlugContent, SlugActions } from '../Slug';
+import { AILabel, AILabelContent, AILabelActions } from '.';
 import './slug-story.scss';
 import mdx from './SlugExamples.mdx';
 
diff --git a/packages/react/src/components/Slug/Slug.mdx b/packages/react/src/components/Slug/Slug.mdx
index 25cc8a4e64e1..eee6c67175c6 100644
--- a/packages/react/src/components/Slug/Slug.mdx
+++ b/packages/react/src/components/Slug/Slug.mdx
@@ -1,5 +1,5 @@
 import { ArgsTable, Canvas, Story } from '@storybook/blocks';
-import { Slug, SlugContent, SlugActions } from '../Slug';
+import { Slug, SlugContent, SlugActions } from '.';
 import * as SlugStories from './Slug.stories';
 
 # Slug
diff --git a/packages/react/src/components/Slug/__tests__/Slug-test.js b/packages/react/src/components/Slug/__tests__/Slug-test.js
index 7b8fd1d7d137..2987d94a0bd8 100644
--- a/packages/react/src/components/Slug/__tests__/Slug-test.js
+++ b/packages/react/src/components/Slug/__tests__/Slug-test.js
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { Slug } from '../../Slug';
+import { AILabel } from '../';
 import { render, screen } from '@testing-library/react';
 
 const prefix = 'cds';
@@ -14,7 +14,7 @@ const prefix = 'cds';
 describe('Slug', () => {
   describe('renders as expected - Component API', () => {
     it('should spread extra props onto the popover element', () => {
-      const { container } = render(<Slug data-testid="test" />);
+      const { container } = render(<AILabel data-testid="test" />);
 
       expect(container.firstChild.firstChild).toHaveAttribute(
         'data-testid',
@@ -23,32 +23,32 @@ describe('Slug', () => {
     });
 
     it('should render children as expected', () => {
-      render(<Slug>Children test</Slug>);
+      render(<AILabel>Children test</AILabel>);
 
       expect(screen.getByText('Children test')).toBeInTheDocument();
     });
 
     it('should support a custom `className` prop on the outermost element', () => {
-      const { container } = render(<Slug className="custom-class" />);
+      const { container } = render(<AILabel className="custom-class" />);
 
       expect(container.firstChild).toHaveClass('custom-class');
     });
 
     it('should respect aiText prop', () => {
-      render(<Slug aiText="IA" />);
+      render(<AILabel aiText="IA" />);
 
       expect(screen.getByText('IA')).toBeInTheDocument();
     });
 
     it('should respect aiTextLabel prop', () => {
-      render(<Slug aiTextLabel="Test text" />);
+      render(<AILabel aiTextLabel="Test text" />);
 
       expect(screen.getByText('Test text')).toBeInTheDocument();
     });
 
     it('should respect align prop when autoAlign is false', () => {
       render(
-        <Slug data-testid="test" autoAlign={false} align="bottom-start" />
+        <AILabel data-testid="test" autoAlign={false} align="bottom-start" />
       );
 
       expect(screen.getByTestId('test')).not.toHaveClass(
@@ -60,7 +60,7 @@ describe('Slug', () => {
     });
 
     it('should apply align prop classes even when autoAlign is true', () => {
-      render(<Slug data-testid="test" align="bottom-start" />);
+      render(<AILabel data-testid="test" align="bottom-start" />);
 
       expect(screen.getByTestId('test')).toHaveClass(
         `${prefix}--popover--auto-align`
@@ -71,7 +71,7 @@ describe('Slug', () => {
     });
 
     it('should respect kind prop', () => {
-      render(<Slug kind="inline" />);
+      render(<AILabel kind="inline" />);
 
       expect(screen.getByRole('button')).toHaveClass(
         `${prefix}--slug__button--inline`
@@ -79,7 +79,7 @@ describe('Slug', () => {
     });
 
     it('should respect revertActive prop', () => {
-      const { container } = render(<Slug revertActive />);
+      const { container } = render(<AILabel revertActive />);
 
       expect(container.firstChild).toHaveClass(`${prefix}--slug--revert`);
       expect(container.firstChild.firstChild).toHaveClass(
@@ -88,13 +88,13 @@ describe('Slug', () => {
     });
 
     it('should respect revertLabel prop', () => {
-      render(<Slug revertActive revertLabel="Test revert label" />);
+      render(<AILabel revertActive revertLabel="Test revert label" />);
 
       expect(screen.getByText('Test revert label')).toBeInTheDocument();
     });
 
     it('should respect size prop', () => {
-      render(<Slug size="xl" />);
+      render(<AILabel size="xl" />);
 
       expect(screen.getByRole('button')).toHaveClass(
         `${prefix}--slug__button--xl`
diff --git a/packages/react/src/components/Slug/index.js b/packages/react/src/components/Slug/index.js
index 8a87f418bc46..13261f1b0c70 100644
--- a/packages/react/src/components/Slug/index.js
+++ b/packages/react/src/components/Slug/index.js
@@ -20,30 +20,30 @@ import { IconButton } from '../IconButton';
 import { Undo } from '@carbon/icons-react';
 import { useId } from '../../internal/useId';
 
-export const SlugContent = React.forwardRef(function SlugContent(
+export const AILabelContent = React.forwardRef(function AILabelContent(
   { children, className },
   ref
 ) {
   const prefix = usePrefix();
 
-  const hasSlugActions = React.Children.toArray(children).some(
-    (child) => child.type?.displayName === 'SlugActions'
+  const hasAILabelActions = React.Children.toArray(children).some(
+    (child) => child.type?.displayName === 'AILabelActions'
   );
 
-  const slugContentClasses = cx(className, {
+  const aiLabelContentClasses = cx(className, {
     [`${prefix}--slug-content`]: true,
-    [`${prefix}--slug-content--with-actions`]: hasSlugActions,
+    [`${prefix}--slug-content--with-actions`]: hasAILabelActions,
   });
 
   return (
-    <ToggletipContent className={slugContentClasses} ref={ref}>
+    <ToggletipContent className={aiLabelContentClasses} ref={ref}>
       {children}
     </ToggletipContent>
   );
 });
 
-SlugContent.displayName = 'SlugContent';
-SlugContent.propTypes = {
+AILabelContent.displayName = 'AILabelContent';
+AILabelContent.propTypes = {
   /**
    * Specify the content you want rendered inside the slug ToggleTip
    */
@@ -55,25 +55,25 @@ SlugContent.propTypes = {
   className: PropTypes.string,
 };
 
-export const SlugActions = React.forwardRef(function SlugActions(
+export const AILabelActions = React.forwardRef(function AILabelActions(
   { children, className },
   ref
 ) {
   const prefix = usePrefix();
 
-  const slugActionBarClasses = cx(className, {
+  const aiLabelActionsClasses = cx(className, {
     [`${prefix}--slug-actions`]: true,
   });
 
   return (
-    <ToggletipActions className={slugActionBarClasses} ref={ref}>
+    <ToggletipActions className={aiLabelActionsClasses} ref={ref}>
       {children}
     </ToggletipActions>
   );
 });
 
-SlugActions.displayName = 'SlugActions';
-SlugActions.propTypes = {
+AILabelActions.displayName = 'AILabelActions';
+AILabelActions.propTypes = {
   /**
    * Specify the content you want rendered inside the slug callout toolbar
    */
@@ -85,7 +85,7 @@ SlugActions.propTypes = {
   className: PropTypes.string,
 };
 
-export const Slug = React.forwardRef(function Slug(
+export const AILabel = React.forwardRef(function AILabel(
   {
     aiText = 'AI',
     aiTextLabel,
@@ -104,14 +104,14 @@ export const Slug = React.forwardRef(function Slug(
   ref
 ) {
   const prefix = usePrefix();
-  const id = useId('slug');
+  const id = useId('AILabel');
 
-  const slugClasses = cx(className, {
+  const aiLabelClasses = cx(className, {
     [`${prefix}--slug`]: true,
     [`${prefix}--slug--revert`]: revertActive,
   });
 
-  const slugButtonClasses = cx({
+  const aiLabelButtonClasses = cx({
     [`${prefix}--slug__button`]: true,
     [`${prefix}--slug__button--${size}`]: size,
     [`${prefix}--slug__button--${kind}`]: kind,
@@ -130,7 +130,7 @@ export const Slug = React.forwardRef(function Slug(
     : `${aiText} - ${aiTextLabel}`;
 
   return (
-    <div className={slugClasses} ref={ref} id={id}>
+    <div className={aiLabelClasses} ref={ref} id={id}>
       {revertActive ? (
         <IconButton
           onClick={handleOnRevertClick}
@@ -142,7 +142,7 @@ export const Slug = React.forwardRef(function Slug(
         </IconButton>
       ) : (
         <Toggletip align={align} autoAlign={autoAlign} {...rest}>
-          <ToggletipButton className={slugButtonClasses} label={ariaLabel}>
+          <ToggletipButton className={aiLabelButtonClasses} label={ariaLabel}>
             <span className={`${prefix}--slug__text`}>{aiText}</span>
             {aiTextLabel && (
               <span className={`${prefix}--slug__additional-text`}>
@@ -157,8 +157,13 @@ export const Slug = React.forwardRef(function Slug(
   );
 });
 
-Slug.displayName = 'Slug';
-Slug.propTypes = {
+AILabel.displayName = 'AILabel';
+AILabel.propTypes = {
+  /**
+   * Specify the content you want rendered inside the `AILabel` ToggleTip
+   */
+  AILabelContent: PropTypes.node,
+
   /**
    * Specify the correct translation of the AI text
    */
@@ -204,17 +209,17 @@ Slug.propTypes = {
   autoAlign: PropTypes.bool,
 
   /**
-   * Specify the content you want rendered inside the slug ToggleTip
+   * Specify the content you want rendered inside the `AILabel` ToggleTip
    */
   children: PropTypes.node,
 
   /**
-   * Specify an optional className to be added to the AI slug
+   * Specify an optional className to be added to the `AILabel`
    */
   className: PropTypes.string,
 
   /**
-   * Specify the type of Slug, from the following list of types:
+   * Specify the type of `AILabel`, from the following list of types:
    */
   kind: PropTypes.oneOf(['default', 'inline']),
 
@@ -239,12 +244,7 @@ Slug.propTypes = {
   size: PropTypes.oneOf(['mini', '2xs', 'xs', 'sm', 'md', 'lg', 'xl']),
 
   /**
-   * Specify the content you want rendered inside the slug ToggleTip
-   */
-  slugContent: PropTypes.node,
-
-  /**
-   * Specify the text that will be provided to the aria-label of the `Slug` button
+   * Specify the text that will be provided to the aria-label of the `AILabel` button
    */
   slugLabel: PropTypes.string,
 };

From 3cfd32eebaff68fc774568d24f07b2d70de6da72 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 17 Jun 2024 12:20:24 -0400
Subject: [PATCH 02/17] docs(AILabel): update mdx file to use new name

---
 .../{Slug.stories.js => AILabel.stories.js}   | 172 +++++++++---------
 packages/react/src/components/Slug/Slug.mdx   | 136 +++++++-------
 2 files changed, 154 insertions(+), 154 deletions(-)
 rename packages/react/src/components/Slug/{Slug.stories.js => AILabel.stories.js} (78%)

diff --git a/packages/react/src/components/Slug/Slug.stories.js b/packages/react/src/components/Slug/AILabel.stories.js
similarity index 78%
rename from packages/react/src/components/Slug/Slug.stories.js
rename to packages/react/src/components/Slug/AILabel.stories.js
index c8d80183a84d..4c4f3f4338fd 100644
--- a/packages/react/src/components/Slug/Slug.stories.js
+++ b/packages/react/src/components/Slug/AILabel.stories.js
@@ -9,7 +9,7 @@
 
 import React from 'react';
 
-import { Slug, SlugContent, SlugActions } from '.';
+import { AILabel, AILabelContent, AILabelActions } from '.';
 import { View, FolderOpen, Folders } from '@carbon/icons-react';
 import Button from '../Button';
 import { IconButton } from '../IconButton';
@@ -17,8 +17,8 @@ import mdx from './Slug.mdx';
 import './slug-story.scss';
 
 export default {
-  title: 'Experimental/unstable__Slug',
-  component: Slug,
+  title: 'Components/AILabel',
+  component: AILabel,
   parameters: {
     docs: {
       page: mdx,
@@ -44,16 +44,16 @@ const aiContent = (
 export const Default = () => (
   <>
     <div className="slug-container slug-container-example">
-      <Slug autoAlign size="mini">
-        <SlugContent>{aiContent}</SlugContent>
-      </Slug>
-      <Slug autoAlign size="2xs">
-        <SlugContent>{aiContent}</SlugContent>
-      </Slug>
-      <Slug autoAlign size="xs">
-        <SlugContent>
+      <AILabel autoAlign size="mini">
+        <AILabelContent>{aiContent}</AILabelContent>
+      </AILabel>
+      <AILabel autoAlign size="2xs">
+        <AILabelContent>{aiContent}</AILabelContent>
+      </AILabel>
+      <AILabel autoAlign size="xs">
+        <AILabelContent>
           {aiContent}
-          <SlugActions>
+          <AILabelActions>
             <IconButton kind="ghost" label="View">
               <View />
             </IconButton>
@@ -64,13 +64,13 @@ export const Default = () => (
               <Folders />
             </IconButton>
             <Button>View details</Button>
-          </SlugActions>
-        </SlugContent>
-      </Slug>
-      <Slug autoAlign size="sm">
-        <SlugContent>
+          </AILabelActions>
+        </AILabelContent>
+      </AILabel>
+      <AILabel autoAlign size="sm">
+        <AILabelContent>
           {aiContent}
-          <SlugActions>
+          <AILabelActions>
             <IconButton kind="ghost" label="View">
               <View />
             </IconButton>
@@ -81,13 +81,13 @@ export const Default = () => (
               <Folders />
             </IconButton>
             <Button>View details</Button>
-          </SlugActions>
-        </SlugContent>
-      </Slug>
-      <Slug autoAlign size="md">
-        <SlugContent>
+          </AILabelActions>
+        </AILabelContent>
+      </AILabel>
+      <AILabel autoAlign size="md">
+        <AILabelContent>
           {aiContent}
-          <SlugActions>
+          <AILabelActions>
             <IconButton kind="ghost" label="View">
               <View />
             </IconButton>
@@ -98,13 +98,13 @@ export const Default = () => (
               <Folders />
             </IconButton>
             <Button>View details</Button>
-          </SlugActions>
-        </SlugContent>
-      </Slug>
-      <Slug autoAlign size="lg">
-        <SlugContent>
+          </AILabelActions>
+        </AILabelContent>
+      </AILabel>
+      <AILabel autoAlign size="lg">
+        <AILabelContent>
           {aiContent}
-          <SlugActions>
+          <AILabelActions>
             <IconButton kind="ghost" label="View">
               <View />
             </IconButton>
@@ -115,13 +115,13 @@ export const Default = () => (
               <Folders />
             </IconButton>
             <Button>View details</Button>
-          </SlugActions>
-        </SlugContent>
-      </Slug>
-      <Slug autoAlign size="xl">
-        <SlugContent>
+          </AILabelActions>
+        </AILabelContent>
+      </AILabel>
+      <AILabel autoAlign size="xl">
+        <AILabelContent>
           {aiContent}
-          <SlugActions>
+          <AILabelActions>
             <IconButton kind="ghost" label="View">
               <View />
             </IconButton>
@@ -132,15 +132,15 @@ export const Default = () => (
               <Folders />
             </IconButton>
             <Button>View details</Button>
-          </SlugActions>
-        </SlugContent>
-      </Slug>
+          </AILabelActions>
+        </AILabelContent>
+      </AILabel>
     </div>
     <div className="slug-container-example slug-container">
-      <Slug autoAlign kind="inline" size="sm">
-        <SlugContent>
+      <AILabel autoAlign kind="inline" size="sm">
+        <AILabelContent>
           {aiContent}
-          <SlugActions>
+          <AILabelActions>
             <IconButton kind="ghost" label="View">
               <View />
             </IconButton>
@@ -151,13 +151,13 @@ export const Default = () => (
               <Folders />
             </IconButton>
             <Button>View details</Button>
-          </SlugActions>
-        </SlugContent>
-      </Slug>
-      <Slug autoAlign kind="inline" size="md">
-        <SlugContent>
+          </AILabelActions>
+        </AILabelContent>
+      </AILabel>
+      <AILabel autoAlign kind="inline" size="md">
+        <AILabelContent>
           {aiContent}
-          <SlugActions>
+          <AILabelActions>
             <IconButton kind="ghost" label="View">
               <View />
             </IconButton>
@@ -168,13 +168,13 @@ export const Default = () => (
               <Folders />
             </IconButton>
             <Button>View details</Button>
-          </SlugActions>
-        </SlugContent>
-      </Slug>
-      <Slug autoAlign kind="inline" size="lg">
-        <SlugContent>
+          </AILabelActions>
+        </AILabelContent>
+      </AILabel>
+      <AILabel autoAlign kind="inline" size="lg">
+        <AILabelContent>
           {aiContent}
-          <SlugActions>
+          <AILabelActions>
             <IconButton kind="ghost" label="View">
               <View />
             </IconButton>
@@ -185,15 +185,15 @@ export const Default = () => (
               <Folders />
             </IconButton>
             <Button>View details</Button>
-          </SlugActions>
-        </SlugContent>
-      </Slug>
+          </AILabelActions>
+        </AILabelContent>
+      </AILabel>
     </div>
     <div className="slug-container-example slug-container">
-      <Slug autoAlign kind="inline" size="sm" aiTextLabel="Text goes here">
-        <SlugContent>
+      <AILabel autoAlign kind="inline" size="sm" aiTextLabel="Text goes here">
+        <AILabelContent>
           {aiContent}
-          <SlugActions>
+          <AILabelActions>
             <IconButton kind="ghost" label="View">
               <View />
             </IconButton>
@@ -204,13 +204,13 @@ export const Default = () => (
               <Folders />
             </IconButton>
             <Button>View details</Button>
-          </SlugActions>
-        </SlugContent>
-      </Slug>
-      <Slug autoAlign kind="inline" size="md" aiTextLabel="Text goes here">
-        <SlugContent>
+          </AILabelActions>
+        </AILabelContent>
+      </AILabel>
+      <AILabel autoAlign kind="inline" size="md" aiTextLabel="Text goes here">
+        <AILabelContent>
           {aiContent}
-          <SlugActions>
+          <AILabelActions>
             <IconButton kind="ghost" label="View">
               <View />
             </IconButton>
@@ -221,13 +221,13 @@ export const Default = () => (
               <Folders />
             </IconButton>
             <Button>View details</Button>
-          </SlugActions>
-        </SlugContent>
-      </Slug>
-      <Slug autoAlign kind="inline" size="lg" aiTextLabel="Text goes here">
-        <SlugContent>
+          </AILabelActions>
+        </AILabelContent>
+      </AILabel>
+      <AILabel autoAlign kind="inline" size="lg" aiTextLabel="Text goes here">
+        <AILabelContent>
           {aiContent}
-          <SlugActions>
+          <AILabelActions>
             <IconButton kind="ghost" label="View">
               <View />
             </IconButton>
@@ -238,9 +238,9 @@ export const Default = () => (
               <Folders />
             </IconButton>
             <Button>View details</Button>
-          </SlugActions>
-        </SlugContent>
-      </Slug>
+          </AILabelActions>
+        </AILabelContent>
+      </AILabel>
     </div>
   </>
 );
@@ -250,8 +250,8 @@ export const Callout = (args) => {
 
   return (
     <div className="slug-container-example slug-container centered">
-      <Slug autoAlign={false} defaultOpen {...args}>
-        <SlugContent>
+      <AILabel autoAlign={false} defaultOpen {...args}>
+        <AILabelContent>
           {' '}
           <div>
             <p className="secondary">AI Explained</p>
@@ -267,7 +267,7 @@ export const Callout = (args) => {
             <p className="bold">Foundation model</p>
           </div>
           {showSlugActions && (
-            <SlugActions>
+            <AILabelActions>
               <IconButton kind="ghost" label="View">
                 <View />
               </IconButton>
@@ -278,10 +278,10 @@ export const Callout = (args) => {
                 <Folders />
               </IconButton>
               <Button>View details</Button>
-            </SlugActions>
+            </AILabelActions>
           )}
-        </SlugContent>
-      </Slug>
+        </AILabelContent>
+      </AILabel>
     </div>
   );
 };
@@ -393,7 +393,7 @@ export const Playground = (args) => {
         <p className="bold">Foundation model</p>
       </div>
       {showSlugActions && (
-        <SlugActions>
+        <AILabelActions>
           <IconButton kind="ghost" label="View">
             <View />
           </IconButton>
@@ -404,7 +404,7 @@ export const Playground = (args) => {
             <Folders />
           </IconButton>
           <Button>View details</Button>
-        </SlugActions>
+        </AILabelActions>
       )}
     </>
   );
@@ -412,9 +412,9 @@ export const Playground = (args) => {
   return (
     <>
       <div className="slug-container slug-container-example">
-        <Slug {...args}>
-          <SlugContent>{renderedContent}</SlugContent>
-        </Slug>
+        <AILabel {...args}>
+          <AILabelContent>{renderedContent}</AILabelContent>
+        </AILabel>
       </div>
       <Button>Test</Button>
       <Button kind="danger">Test</Button>
diff --git a/packages/react/src/components/Slug/Slug.mdx b/packages/react/src/components/Slug/Slug.mdx
index eee6c67175c6..64b2bd87c5c5 100644
--- a/packages/react/src/components/Slug/Slug.mdx
+++ b/packages/react/src/components/Slug/Slug.mdx
@@ -1,61 +1,61 @@
 import { ArgsTable, Canvas, Story } from '@storybook/blocks';
-import { Slug, SlugContent, SlugActions } from '.';
-import * as SlugStories from './Slug.stories';
+import { AILabel, AILabelContent, AILabelActions } from '.';
+import * as AILabelStories from './AILabel.stories';
 
-# Slug
+# AILabel
 
 [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Slug)
 |
-[Slug release status](https://airtable.com/appCAqlGVN8tRUbAp/shr71ZyLlIGORz3Vh/tblHqPusgkK8hIeHo)
+[AILabel release status](https://airtable.com/appCAqlGVN8tRUbAp/shr71ZyLlIGORz3Vh/tblHqPusgkK8hIeHo)
 |
 [Using AI-enhanced components in V10](https://github.com/carbon-design-system/carbon-for-ai/blob/main/docs/support-for-carbon-v10.md)
 
 ## Table of Contents
 
 - [Overview](#overview)
-- [Slug anatomy](#slug-anatomy)
+- [AILabel anatomy](#ailabel-anatomy)
 - [Component API](#component-api)
-  - [Slug `aiText`](#slug-aitext)
-  - [Slug `aiTextLabel`](#slug-aitextlabel)
-  - [Slug `kind`](#slug-kind)
-  - [Slug `revertActive` and `onRevertClick`](#slug-revertactive-and-onrevertclick)
+  - [AILabel `aiText`](#ailabel-aitext)
+  - [AILabel `aiTextLabel`](#ailabel-aitextlabel)
+  - [AILabel `kind`](#ailabel-kind)
+  - [AILabel `revertActive` and `onRevertClick`](#ailabel-revertactive-and-onrevertclick)
 - [Feedback](#feedback)
 
 ## Overview
 
-The AI slug is intended for any scenario where something is being generated by
+The AI Label is intended for any scenario where something is being generated by
 (or with) AI to reinforce AI transparency, accountability, and explainability at
 any interface level. This also enables more effective recognition and recall of
 AI instances in a way that is identifiable across any IBM product.
 
 <Canvas>
-  <Story of={SlugStories.Default} />
+  <Story of={AILabelStories.Default} />
 </Canvas>
 
-## Slug anatomy
+## AILabel anatomy
 
-The `Slug` itself is a button that acts as a `Toggletip` trigger. To construct
-the contents of the `Slug` callout, you can place the desired elements as a
-child of `Slug` in `SlugContent`, like so:
+The `AILabel` itself is a button that acts as a `Toggletip` trigger. To
+construct the contents of the `AILabel` callout, you can place the desired
+elements as a child of `AILabel` in `AILabelContent`, like so:
 
 ```jsx
-<Slug>
-  <SlugContent>
+<AILabel>
+  <AILabelContent>
     {Content Here}
-  </SlugContent>
-</Slug>
+  </AILabelContent>
+</AILabel>
 ```
 
-The `Slug` also supports the rendering of an action bar at the bottom of the
-callout. To achieve this, you can pass in `SlugActions` as a child of `Slug`,
-placed inside the `SlugContent`
+The `AILabel` also supports the rendering of an action bar at the bottom of the
+callout. To achieve this, you can pass in `AILabelActions` as a child of
+`AILabel`, placed inside the `AILabelContent`
 
 ```jsx
-<Slug>
-  <SlugContent>
+<AILabel>
+  <AILabelContent>
     {Content Here}
-    {Optional Slug action bar}
-    <SlugActions>
+    {Optional AILabel action bar}
+    <AILabelActions>
       <IconButton kind="ghost" label="View">
         <View />
       </IconButton>
@@ -66,84 +66,84 @@ placed inside the `SlugContent`
         <Folders />
       </IconButton>
       <Button>View details</Button>
-    </SlugActions>
-  </SlugContent>
-</Slug>
+    </AILabelActions>
+  </AILabelContent>
+</AILabel>
 ```
 
 ## Component API
 
 <ArgsTable />
 
-### Slug `aiText`
+### AILabel `aiText`
 
-If needed, you can change the text inside the `Slug` when translating to
+If needed, you can change the text inside the `AILabel` when translating to
 different languages.
 
-<Slug aiText="IA" className="sbdocs-slug">
-  <SlugContent>Explanation of AI generated content</SlugContent>
-</Slug>
+<AILabel aiText="IA" className="sbdocs-slug">
+  <AILabelContent>Explanation of AI generated content</AILabelContent>
+</AILabel>
 
 ```jsx
-<Slug aiText="IA">
-  <SlugContent>Explanation of AI-generated content</SlugContent>
-</Slug>
+<AILabel aiText="IA">
+  <AILabelContent>Explanation of AI-generated content</AILabelContent>
+</AILabel>
 ```
 
-### Slug `aiTextLabel`
+### AILabel `aiTextLabel`
 
 When using the `inline` variant, you can add text adjacent to the AI label with
 the `aiTextLabel` prop.
 
-<Slug kind="inline" aiTextLabel="Text goes here" className="sbdocs-slug">
-  <SlugContent>Explanation of AI generated content</SlugContent>
-</Slug>
+<AILabel kind="inline" aiTextLabel="Text goes here" className="sbdocs-slug">
+  <AILabelContent>Explanation of AI generated content</AILabelContent>
+</AILabel>
 <br />
-<Slug kind="inline" className="sbdocs-slug">
-  <SlugContent>Explanation of AI generated content</SlugContent>
-</Slug>
+<AILabel kind="inline" className="sbdocs-slug">
+  <AILabelContent>Explanation of AI generated content</AILabelContent>
+</AILabel>
 
 ```jsx
-<Slug kind="inline" aiTextLabel="Text goes here">
-  <SlugContent>Explanation of AI generated content</SlugContent>
-</Slug>
+<AILabel kind="inline" aiTextLabel="Text goes here">
+  <AILabelContent>Explanation of AI generated content</AILabelContent>
+</AILabel>
 
-<Slug kind="inline">
-  <SlugContent>Explanation of AI generated content</SlugContent>
-</Slug>
+<AILabel kind="inline">
+  <AILabelContent>Explanation of AI generated content</AILabelContent>
+</AILabel>
 ```
 
-### Slug `kind`
+### AILabel `kind`
 
-The `Slug` component has two variants, `default` and `inline`.
+The `AILabel` component has two variants, `default` and `inline`.
 
-<Slug size="xs" className="sbdocs-slug">
-  <SlugContent>AI was used to generate this content</SlugContent>
-</Slug>
+<AILabel size="xs" className="sbdocs-slug">
+  <AILabelContent>AI was used to generate this content</AILabelContent>
+</AILabel>
 
 ```jsx
-<Slug size="xs">
-  <SlugContent>AI was used to generate this content</SlugContent>
-</Slug>
+<AILabel size="xs">
+  <AILabelContent>AI was used to generate this content</AILabelContent>
+</AILabel>
 ```
 
-The `inline` `Slug` with the standard icon can also trigger the AI
+The `inline` `AILabel` with the standard icon can also trigger the AI
 explainability callout.
 
-<Slug kind="inline" aiTextLabel="Text goes here" className="sbdocs-slug">
-  <SlugContent>Explanation of AI generated content</SlugContent>
-</Slug>
+<AILabel kind="inline" aiTextLabel="Text goes here" className="sbdocs-slug">
+  <AILabelContent>Explanation of AI generated content</AILabelContent>
+</AILabel>
 
 ```jsx
-<Slug kind="inline" aiTextLabel="Text goes here" size="xs">
-  <SlugContent>Explanation of AI-generated content</SlugContent>
-</Slug>
+<AILabel kind="inline" aiTextLabel="Text goes here" size="xs">
+  <AILabelContent>Explanation of AI-generated content</AILabelContent>
+</AILabel>
 ```
 
-### Slug `revertActive` and `onRevertClick`
+### AILabel `revertActive` and `onRevertClick`
 
-`revertActive` is a boolean prop that can be set on `Slug` that transforms the
-`Slug` into a revert action button. This is useful if a user edits an
+`revertActive` is a boolean prop that can be set on `AILabel` that transforms
+the `AILabel` into a revert action button. This is useful if a user edits an
 AI-generated input to show that the element has been modified. This can be used
 in conjunction with the `onRevertClick` callback to handle restoring the element
 to the AI-generated state. For an example, please take a look at the

From b940a8b9a9829ef409803ae9cc0a267ee596ad4b Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 17 Jun 2024 12:21:23 -0400
Subject: [PATCH 03/17] chore(AILabel): rename Slug folder to AILabel

---
 .../react/src/components/{Slug => AILabel}/AILabel.stories.js     | 0
 .../src/components/{Slug => AILabel}/Slug-examples.stories.js     | 0
 .../react/src/components/{Slug => AILabel}/Slug-form.stories.js   | 0
 packages/react/src/components/{Slug => AILabel}/Slug.mdx          | 0
 packages/react/src/components/{Slug => AILabel}/SlugDatatable.mdx | 0
 packages/react/src/components/{Slug => AILabel}/SlugExamples.mdx  | 0
 packages/react/src/components/{Slug => AILabel}/SlugForm.mdx      | 0
 .../react/src/components/{Slug => AILabel}/__tests__/Slug-test.js | 0
 packages/react/src/components/{Slug => AILabel}/index.js          | 0
 packages/react/src/components/{Slug => AILabel}/slug-story.scss   | 0
 10 files changed, 0 insertions(+), 0 deletions(-)
 rename packages/react/src/components/{Slug => AILabel}/AILabel.stories.js (100%)
 rename packages/react/src/components/{Slug => AILabel}/Slug-examples.stories.js (100%)
 rename packages/react/src/components/{Slug => AILabel}/Slug-form.stories.js (100%)
 rename packages/react/src/components/{Slug => AILabel}/Slug.mdx (100%)
 rename packages/react/src/components/{Slug => AILabel}/SlugDatatable.mdx (100%)
 rename packages/react/src/components/{Slug => AILabel}/SlugExamples.mdx (100%)
 rename packages/react/src/components/{Slug => AILabel}/SlugForm.mdx (100%)
 rename packages/react/src/components/{Slug => AILabel}/__tests__/Slug-test.js (100%)
 rename packages/react/src/components/{Slug => AILabel}/index.js (100%)
 rename packages/react/src/components/{Slug => AILabel}/slug-story.scss (100%)

diff --git a/packages/react/src/components/Slug/AILabel.stories.js b/packages/react/src/components/AILabel/AILabel.stories.js
similarity index 100%
rename from packages/react/src/components/Slug/AILabel.stories.js
rename to packages/react/src/components/AILabel/AILabel.stories.js
diff --git a/packages/react/src/components/Slug/Slug-examples.stories.js b/packages/react/src/components/AILabel/Slug-examples.stories.js
similarity index 100%
rename from packages/react/src/components/Slug/Slug-examples.stories.js
rename to packages/react/src/components/AILabel/Slug-examples.stories.js
diff --git a/packages/react/src/components/Slug/Slug-form.stories.js b/packages/react/src/components/AILabel/Slug-form.stories.js
similarity index 100%
rename from packages/react/src/components/Slug/Slug-form.stories.js
rename to packages/react/src/components/AILabel/Slug-form.stories.js
diff --git a/packages/react/src/components/Slug/Slug.mdx b/packages/react/src/components/AILabel/Slug.mdx
similarity index 100%
rename from packages/react/src/components/Slug/Slug.mdx
rename to packages/react/src/components/AILabel/Slug.mdx
diff --git a/packages/react/src/components/Slug/SlugDatatable.mdx b/packages/react/src/components/AILabel/SlugDatatable.mdx
similarity index 100%
rename from packages/react/src/components/Slug/SlugDatatable.mdx
rename to packages/react/src/components/AILabel/SlugDatatable.mdx
diff --git a/packages/react/src/components/Slug/SlugExamples.mdx b/packages/react/src/components/AILabel/SlugExamples.mdx
similarity index 100%
rename from packages/react/src/components/Slug/SlugExamples.mdx
rename to packages/react/src/components/AILabel/SlugExamples.mdx
diff --git a/packages/react/src/components/Slug/SlugForm.mdx b/packages/react/src/components/AILabel/SlugForm.mdx
similarity index 100%
rename from packages/react/src/components/Slug/SlugForm.mdx
rename to packages/react/src/components/AILabel/SlugForm.mdx
diff --git a/packages/react/src/components/Slug/__tests__/Slug-test.js b/packages/react/src/components/AILabel/__tests__/Slug-test.js
similarity index 100%
rename from packages/react/src/components/Slug/__tests__/Slug-test.js
rename to packages/react/src/components/AILabel/__tests__/Slug-test.js
diff --git a/packages/react/src/components/Slug/index.js b/packages/react/src/components/AILabel/index.js
similarity index 100%
rename from packages/react/src/components/Slug/index.js
rename to packages/react/src/components/AILabel/index.js
diff --git a/packages/react/src/components/Slug/slug-story.scss b/packages/react/src/components/AILabel/slug-story.scss
similarity index 100%
rename from packages/react/src/components/Slug/slug-story.scss
rename to packages/react/src/components/AILabel/slug-story.scss

From 88bd87828e37e72d50f726b8f778b53cec3de363 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 17 Jun 2024 13:23:06 -0400
Subject: [PATCH 04/17] chore(AILabel): more renaming, diplsyName updates,
 checkbox story

---
 .../AILabel/{Slug.mdx => AILabel.mdx}         |  0
 .../src/components/AILabel/AILabel.stories.js |  4 +-
 .../AILabel/Slug-examples.stories.js          | 28 +++----
 .../components/AILabel/Slug-form.stories.js   |  2 +-
 .../{slug-story.scss => ailabel-story.scss}   |  0
 .../components/Checkbox/Checkbox.stories.js   | 73 +++++++++++++++++++
 .../CheckboxGroup/CheckboxGroup.tsx           |  2 +-
 .../src/components/ComboBox/ComboBox.tsx      |  2 +-
 .../ComposedModal/ComposedModal.tsx           |  2 +-
 .../stories/DataTable-slug.stories.js         | 45 ++++++------
 .../DatePickerInput/DatePickerInput.tsx       |  2 +-
 .../src/components/Dropdown/Dropdown.tsx      |  2 +-
 packages/react/src/components/Modal/Modal.tsx |  2 +-
 .../MultiSelect/FilterableMultiSelect.tsx     |  2 +-
 .../components/MultiSelect/MultiSelect.tsx    |  2 +-
 .../components/NumberInput/NumberInput.tsx    |  4 +-
 .../RadioButtonGroup/RadioButtonGroup.tsx     |  2 +-
 .../src/components/RadioTile/RadioTile.tsx    |  2 +-
 .../react/src/components/Select/Select.tsx    |  2 +-
 .../src/components/Tag/DismissibleTag.tsx     |  2 +-
 .../src/components/Tag/OperationalTag.tsx     |  2 +-
 .../src/components/Tag/SelectableTag.tsx      |  2 +-
 packages/react/src/components/Tag/Tag.tsx     |  2 +-
 .../src/components/TextArea/TextArea.tsx      |  2 +-
 .../src/components/TextInput/TextInput.tsx    |  2 +-
 packages/react/src/components/Tile/Tile.tsx   |  4 +-
 packages/react/src/index.js                   | 11 ++-
 packages/react/src/index.ts                   | 10 ++-
 28 files changed, 148 insertions(+), 67 deletions(-)
 rename packages/react/src/components/AILabel/{Slug.mdx => AILabel.mdx} (100%)
 rename packages/react/src/components/AILabel/{slug-story.scss => ailabel-story.scss} (100%)

diff --git a/packages/react/src/components/AILabel/Slug.mdx b/packages/react/src/components/AILabel/AILabel.mdx
similarity index 100%
rename from packages/react/src/components/AILabel/Slug.mdx
rename to packages/react/src/components/AILabel/AILabel.mdx
diff --git a/packages/react/src/components/AILabel/AILabel.stories.js b/packages/react/src/components/AILabel/AILabel.stories.js
index 4c4f3f4338fd..d175547d9202 100644
--- a/packages/react/src/components/AILabel/AILabel.stories.js
+++ b/packages/react/src/components/AILabel/AILabel.stories.js
@@ -13,8 +13,8 @@ import { AILabel, AILabelContent, AILabelActions } from '.';
 import { View, FolderOpen, Folders } from '@carbon/icons-react';
 import Button from '../Button';
 import { IconButton } from '../IconButton';
-import mdx from './Slug.mdx';
-import './slug-story.scss';
+import mdx from './AILabel.mdx';
+import './ailabel-story.scss';
 
 export default {
   title: 'Components/AILabel',
diff --git a/packages/react/src/components/AILabel/Slug-examples.stories.js b/packages/react/src/components/AILabel/Slug-examples.stories.js
index 3057a83611fd..ccf53fb47a2f 100644
--- a/packages/react/src/components/AILabel/Slug-examples.stories.js
+++ b/packages/react/src/components/AILabel/Slug-examples.stories.js
@@ -42,7 +42,7 @@ import {
   Asleep,
 } from '@carbon/icons-react';
 import { AILabel, AILabelContent, AILabelActions } from '.';
-import './slug-story.scss';
+import './ailabel-story.scss';
 import mdx from './SlugExamples.mdx';
 
 export default {
@@ -161,9 +161,9 @@ const items = [
   },
 ];
 
-const slug = (
-  <Slug className="slug-container">
-    <SlugContent>
+const aiLabel = (
+  <AILabel className="slug-container">
+    <AILabelContent>
       <div>
         <p className="secondary">AI Explained</p>
         <h1>84%</h1>
@@ -176,7 +176,7 @@ const slug = (
         <p className="secondary">Model type</p>
         <p className="bold">Foundation model</p>
       </div>
-      <SlugActions>
+      <AILabelActions>
         <IconButton kind="ghost" label="View">
           <View />
         </IconButton>
@@ -187,14 +187,14 @@ const slug = (
           <Folders />
         </IconButton>
         <Button>View details</Button>
-      </SlugActions>
-    </SlugContent>
-  </Slug>
+      </AILabelActions>
+    </AILabelContent>
+  </AILabel>
 );
 
 const slugFunc = (kind) => (
-  <Slug kind={kind}>
-    <SlugContent>
+  <AILabel kind={kind}>
+    <AILabelContent>
       <div>
         <p className="secondary">AI Explained</p>
         <h1>84%</h1>
@@ -207,7 +207,7 @@ const slugFunc = (kind) => (
         <p className="secondary">Model type</p>
         <p className="bold">Foundation model</p>
       </div>
-      <SlugActions>
+      <AILabelActions>
         <IconButton kind="ghost" label="View">
           <View />
         </IconButton>
@@ -218,9 +218,9 @@ const slugFunc = (kind) => (
           <Folders />
         </IconButton>
         <Button>View details</Button>
-      </SlugActions>
-    </SlugContent>
-  </Slug>
+      </AILabelActions>
+    </AILabelContent>
+  </AILabel>
 );
 
 export const _Checkbox = {
diff --git a/packages/react/src/components/AILabel/Slug-form.stories.js b/packages/react/src/components/AILabel/Slug-form.stories.js
index ba392c09f083..69092881a4ca 100644
--- a/packages/react/src/components/AILabel/Slug-form.stories.js
+++ b/packages/react/src/components/AILabel/Slug-form.stories.js
@@ -25,7 +25,7 @@ import { Stack } from '../Stack';
 import { IconButton } from '../IconButton';
 import { View, FolderOpen, Folders } from '@carbon/icons-react';
 import { Slug, SlugContent, SlugActions } from '.';
-import './slug-story.scss';
+import './ailabel-story.scss';
 import mdx from './SlugForm.mdx';
 
 export default {
diff --git a/packages/react/src/components/AILabel/slug-story.scss b/packages/react/src/components/AILabel/ailabel-story.scss
similarity index 100%
rename from packages/react/src/components/AILabel/slug-story.scss
rename to packages/react/src/components/AILabel/ailabel-story.scss
diff --git a/packages/react/src/components/Checkbox/Checkbox.stories.js b/packages/react/src/components/Checkbox/Checkbox.stories.js
index c556daff677b..66dd548618f0 100644
--- a/packages/react/src/components/Checkbox/Checkbox.stories.js
+++ b/packages/react/src/components/Checkbox/Checkbox.stories.js
@@ -9,6 +9,10 @@ import React from 'react';
 import { default as Checkbox, CheckboxSkeleton } from './';
 import mdx from './Checkbox.mdx';
 import CheckboxGroup from '../CheckboxGroup';
+import Button from '../Button';
+import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import { IconButton } from '../IconButton';
+import { View, FolderOpen, Folders } from '@carbon/icons-react';
 
 const checkboxEvents = {
   className: 'some-class',
@@ -86,6 +90,75 @@ export const Single = () => {
 
 export const Skeleton = () => <CheckboxSkeleton />;
 
+const slugFunc = (kind) => (
+  <AILabel kind={kind}>
+    <AILabelContent>
+      <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>
+      <AILabelActions>
+        <IconButton kind="ghost" label="View">
+          <View />
+        </IconButton>
+        <IconButton kind="ghost" label="Open Folder">
+          <FolderOpen />
+        </IconButton>
+        <IconButton kind="ghost" label="Folders">
+          <Folders />
+        </IconButton>
+        <Button>View details</Button>
+      </AILabelActions>
+    </AILabelContent>
+  </AILabel>
+);
+
+export const withAILabel = () => (
+  <div className="slug-check-radio-container">
+    <CheckboxGroup legendText="Group Label" slug={slugFunc()}>
+      <Checkbox labelText={`Checkbox label`} id="checkbox-label-1" />
+      <Checkbox labelText={`Checkbox label`} id="checkbox-label-2" />
+      <Checkbox labelText={`Checkbox label`} id="checkbox-label-3" />
+    </CheckboxGroup>
+
+    <CheckboxGroup legendText="Group Label">
+      <Checkbox
+        labelText={`Checkbox label`}
+        id="checkbox-label-4"
+        slug={slugFunc()}
+      />
+      <Checkbox
+        labelText={`Checkbox label`}
+        id="checkbox-label-5"
+        slug={slugFunc()}
+      />
+      <Checkbox labelText={`Checkbox label`} id="checkbox-label-6" />
+    </CheckboxGroup>
+
+    <CheckboxGroup legendText="Group Label">
+      <Checkbox
+        labelText={`Checkbox label`}
+        id="checkbox-label-7"
+        slug={slugFunc('inline')}
+      />
+      <Checkbox
+        labelText={`Checkbox label`}
+        id="checkbox-label-8"
+        slug={slugFunc('inline')}
+      />
+      <Checkbox labelText={`Checkbox label`} id="checkbox-label-9" />
+    </CheckboxGroup>
+  </div>
+);
+
 export const Playground = (args) => (
   <CheckboxGroup {...fieldsetCheckboxProps()} {...args}>
     <Checkbox
diff --git a/packages/react/src/components/CheckboxGroup/CheckboxGroup.tsx b/packages/react/src/components/CheckboxGroup/CheckboxGroup.tsx
index 4b08089326af..632d10d9a433 100644
--- a/packages/react/src/components/CheckboxGroup/CheckboxGroup.tsx
+++ b/packages/react/src/components/CheckboxGroup/CheckboxGroup.tsx
@@ -78,7 +78,7 @@ const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
   let normalizedSlug;
   if (
     React.isValidElement(slug) &&
-    (slug['type'] as any)?.displayName === 'Slug'
+    (slug['type'] as any)?.displayName === 'AILabel'
   ) {
     normalizedSlug = React.cloneElement(slug, {
       size: 'mini',
diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
index 3563cf7a207e..74c93120292a 100644
--- a/packages/react/src/components/ComboBox/ComboBox.tsx
+++ b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -559,7 +559,7 @@ const ComboBox = forwardRef(
 
     // Slug is always size `mini`
     let normalizedSlug;
-    if (slug && slug['type']?.displayName === 'Slug') {
+    if (slug && slug['type']?.displayName === 'AILabel') {
       normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
         size: 'mini',
       });
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.tsx b/packages/react/src/components/ComposedModal/ComposedModal.tsx
index c7b3558efd0a..db268c68d59b 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal.tsx
+++ b/packages/react/src/components/ComposedModal/ComposedModal.tsx
@@ -408,7 +408,7 @@ const ComposedModal = React.forwardRef<HTMLDivElement, ComposedModalProps>(
 
     // Slug is always size `sm`
     let normalizedSlug;
-    if (slug && slug['type']?.displayName === 'Slug') {
+    if (slug && slug['type']?.displayName === 'AILabel') {
       normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
         size: 'sm',
       });
diff --git a/packages/react/src/components/DataTable/stories/DataTable-slug.stories.js b/packages/react/src/components/DataTable/stories/DataTable-slug.stories.js
index daed3c32ba2c..57840b024872 100644
--- a/packages/react/src/components/DataTable/stories/DataTable-slug.stories.js
+++ b/packages/react/src/components/DataTable/stories/DataTable-slug.stories.js
@@ -22,11 +22,11 @@ import DataTable, {
   TableExpandedRow,
 } from '..';
 import { rows, headers } from './shared';
-import mdx from '../../Slug/SlugDatatable.mdx';
+import mdx from '../../AILabel/SlugDatatable.mdx';
 import Button from '../../Button';
 import { IconButton } from '../../IconButton';
 import { View, FolderOpen, Folders } from '@carbon/icons-react';
-import { Slug, SlugContent, SlugActions } from '../../Slug';
+import { AILabel, AILabelContent, AILabelActions } from '../../AILabel';
 import './datatable-story.scss';
 
 export default {
@@ -72,8 +72,11 @@ const columnSlugHeaders = [
     key: 'attached_groups',
     header: 'Attached groups',
     slug: (
-      <Slug className="slug-container" autoAlign={false} align="bottom-right">
-        <SlugContent>
+      <AILabel
+        className="slug-container"
+        autoAlign={false}
+        align="bottom-right">
+        <AILabelContent>
           <div>
             <p className="secondary">AI Explained</p>
             <h1>84%</h1>
@@ -87,7 +90,7 @@ const columnSlugHeaders = [
             <p className="secondary">Model type</p>
             <p className="bold">Foundation model</p>
           </div>
-          <SlugActions>
+          <AILabelActions>
             <IconButton kind="ghost" label="View">
               <View />
             </IconButton>
@@ -98,9 +101,9 @@ const columnSlugHeaders = [
               <Folders />
             </IconButton>
             <Button>View details</Button>
-          </SlugActions>
-        </SlugContent>
-      </Slug>
+          </AILabelActions>
+        </AILabelContent>
+      </AILabel>
     ),
   },
   {
@@ -109,9 +112,9 @@ const columnSlugHeaders = [
   },
 ];
 
-const slug = (
-  <Slug className="slug-container">
-    <SlugContent>
+const aiLabel = (
+  <AILabel className="slug-container">
+    <AILabelContent>
       <div>
         <p className="secondary">AI Explained</p>
         <h1>84%</h1>
@@ -124,7 +127,7 @@ const slug = (
         <p className="secondary">Model type</p>
         <p className="bold">Foundation model</p>
       </div>
-      <SlugActions>
+      <AILabelActions>
         <IconButton kind="ghost" label="View">
           <View />
         </IconButton>
@@ -135,12 +138,12 @@ const slug = (
           <Folders />
         </IconButton>
         <Button>View details</Button>
-      </SlugActions>
-    </SlugContent>
-  </Slug>
+      </AILabelActions>
+    </AILabelContent>
+  </AILabel>
 );
 
-export const SlugWithSelection = () => (
+export const AILabelWithSelection = () => (
   <DataTable rows={rows} headers={headers}>
     {({
       rows,
@@ -171,7 +174,7 @@ export const SlugWithSelection = () => (
             {rows.map((row, i) => (
               <TableRow key={i} {...getRowProps({ row })}>
                 <TableSlugRow
-                  slug={i === 3 || i === 4 || i === 1 ? slug : null}
+                  slug={i === 3 || i === 4 || i === 1 ? aiLabel : null}
                 />
                 <TableSelectRow {...getSelectionProps({ row })} />
                 {row.cells.map((cell) => (
@@ -186,7 +189,7 @@ export const SlugWithSelection = () => (
   </DataTable>
 );
 
-export const SlugWithRadioSelection = () => (
+export const AILabelWithRadioSelection = () => (
   <DataTable rows={rows} headers={headers} radio>
     {({
       rows,
@@ -217,7 +220,7 @@ export const SlugWithRadioSelection = () => (
             {rows.map((row, i) => (
               <TableRow key={i} {...getRowProps({ row })}>
                 <TableSlugRow
-                  slug={i === 3 || i === 4 || i === 1 ? slug : null}
+                  slug={i === 3 || i === 4 || i === 1 ? aiLabel : null}
                 />
                 <TableSelectRow {...getSelectionProps({ row })} />
                 {row.cells.map((cell) => (
@@ -270,7 +273,7 @@ export const SlugWithSelectionAndExpansion = () => (
               <React.Fragment key={row.id}>
                 <TableExpandRow {...getRowProps({ row })}>
                   <TableSlugRow
-                    slug={i === 3 || i === 4 || i === 1 ? slug : null}
+                    slug={i === 3 || i === 4 || i === 1 ? aiLabel : null}
                   />
                   <TableSelectRow {...getSelectionProps({ row })} />
                   {row.cells.map((cell) => (
@@ -329,7 +332,7 @@ export const SlugWithExpansion = () => (
               <React.Fragment key={row.id}>
                 <TableExpandRow {...getRowProps({ row })}>
                   <TableSlugRow
-                    slug={i === 3 || i === 4 || i === 1 ? slug : null}
+                    slug={i === 3 || i === 4 || i === 1 ? aiLabel : null}
                   />
                   {row.cells.map((cell) => (
                     <TableCell key={cell.id}>{cell.value}</TableCell>
diff --git a/packages/react/src/components/DatePickerInput/DatePickerInput.tsx b/packages/react/src/components/DatePickerInput/DatePickerInput.tsx
index 4575042fcb6b..2973fd18be4a 100644
--- a/packages/react/src/components/DatePickerInput/DatePickerInput.tsx
+++ b/packages/react/src/components/DatePickerInput/DatePickerInput.tsx
@@ -218,7 +218,7 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
       size: 'mini',
     });
diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
index 35d90000a9fb..86fd8e34d85a 100644
--- a/packages/react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -450,7 +450,7 @@ const Dropdown = React.forwardRef(
 
     // Slug is always size `mini`
     let normalizedSlug;
-    if (slug && slug['type']?.displayName === 'Slug') {
+    if (slug && slug['type']?.displayName === 'AILabel') {
       normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
         size: 'mini',
       });
diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx
index c5631a97182c..be4cff7e9300 100644
--- a/packages/react/src/components/Modal/Modal.tsx
+++ b/packages/react/src/components/Modal/Modal.tsx
@@ -475,7 +475,7 @@ const Modal = React.forwardRef(function Modal(
 
   // Slug is always size `sm`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
       size: 'sm',
     });
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
index 785471470d62..9c40a7837086 100644
--- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
@@ -562,7 +562,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
       size: 'mini',
     });
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index c8d711cf0371..7c32c4760ffb 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -643,7 +643,7 @@ const MultiSelect = React.forwardRef(
 
     // Slug is always size `mini`
     let normalizedSlug;
-    if (slug && slug['type']?.displayName === 'Slug') {
+    if (slug && slug['type']?.displayName === 'AILabel') {
       normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
         size: 'mini',
       });
diff --git a/packages/react/src/components/NumberInput/NumberInput.tsx b/packages/react/src/components/NumberInput/NumberInput.tsx
index 89e789ab97a8..37b0109adab3 100644
--- a/packages/react/src/components/NumberInput/NumberInput.tsx
+++ b/packages/react/src/components/NumberInput/NumberInput.tsx
@@ -371,7 +371,7 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
 
     // Slug is always size `mini`
     let normalizedSlug;
-    if (slug && slug['type']?.displayName === 'Slug') {
+    if (slug && slug['type']?.displayName === 'AILabel') {
       normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
         size: 'mini',
       });
@@ -379,7 +379,7 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
 
     // Need to update the internal value when the revert button is clicked
     let isRevertActive;
-    if (slug && slug['type']?.displayName === 'Slug') {
+    if (slug && slug['type']?.displayName === 'AILabel') {
       isRevertActive = normalizedSlug.props.revertActive;
     }
 
diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx
index 12028b795c5c..e65e6c6a0e28 100644
--- a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx
+++ b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx
@@ -242,7 +242,7 @@ const RadioButtonGroup = React.forwardRef(
 
     // Slug is always size `mini`
     let normalizedSlug: ReactElement | undefined;
-    if (slug && slug['type']?.displayName === 'Slug') {
+    if (slug && slug['type']?.displayName === 'AILabel') {
       normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
         size: 'mini',
         kind: 'default',
diff --git a/packages/react/src/components/RadioTile/RadioTile.tsx b/packages/react/src/components/RadioTile/RadioTile.tsx
index f270d5759b95..f3a307146ad7 100644
--- a/packages/react/src/components/RadioTile/RadioTile.tsx
+++ b/packages/react/src/components/RadioTile/RadioTile.tsx
@@ -163,7 +163,7 @@ const RadioTile = React.forwardRef(function RadioTile(
 
   // Slug is always size `xs`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
       size: 'xs',
     });
diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx
index fd9991aadd9e..560201844c7d 100644
--- a/packages/react/src/components/Select/Select.tsx
+++ b/packages/react/src/components/Select/Select.tsx
@@ -250,7 +250,7 @@ const Select = React.forwardRef(function Select(
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
       size: 'mini',
     });
diff --git a/packages/react/src/components/Tag/DismissibleTag.tsx b/packages/react/src/components/Tag/DismissibleTag.tsx
index 541602ea35ce..ca0e6319c25d 100644
--- a/packages/react/src/components/Tag/DismissibleTag.tsx
+++ b/packages/react/src/components/Tag/DismissibleTag.tsx
@@ -111,7 +111,7 @@ const DismissibleTag = <T extends React.ElementType>({
   };
 
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
       size: 'sm',
       kind: 'inline',
diff --git a/packages/react/src/components/Tag/OperationalTag.tsx b/packages/react/src/components/Tag/OperationalTag.tsx
index b0f6eaa9fb26..0ea39727c140 100644
--- a/packages/react/src/components/Tag/OperationalTag.tsx
+++ b/packages/react/src/components/Tag/OperationalTag.tsx
@@ -113,7 +113,7 @@ const OperationalTag = <T extends React.ElementType>({
   }, [prefix, tagRef]);
 
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
       size: 'sm',
       kind: 'inline',
diff --git a/packages/react/src/components/Tag/SelectableTag.tsx b/packages/react/src/components/Tag/SelectableTag.tsx
index d4d87e3c5344..d64b78bd0f70 100644
--- a/packages/react/src/components/Tag/SelectableTag.tsx
+++ b/packages/react/src/components/Tag/SelectableTag.tsx
@@ -95,7 +95,7 @@ const SelectableTag = <T extends React.ElementType>({
   }, [prefix, tagRef]);
 
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
       size: 'sm',
       kind: 'inline',
diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
index 6c7e212aa24d..e702643cfca4 100644
--- a/packages/react/src/components/Tag/Tag.tsx
+++ b/packages/react/src/components/Tag/Tag.tsx
@@ -171,7 +171,7 @@ const Tag = React.forwardRef(function Tag<T extends React.ElementType>(
 
   // Slug is always size `md` and `inline`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug' && !isInteractiveTag) {
+  if (slug && slug['type']?.displayName === 'AILabel' && !isInteractiveTag) {
     normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
       size: 'sm',
       kind: 'inline',
diff --git a/packages/react/src/components/TextArea/TextArea.tsx b/packages/react/src/components/TextArea/TextArea.tsx
index 81236abd643b..ae9b4b5d8de2 100644
--- a/packages/react/src/components/TextArea/TextArea.tsx
+++ b/packages/react/src/components/TextArea/TextArea.tsx
@@ -436,7 +436,7 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
       size: 'mini',
     });
diff --git a/packages/react/src/components/TextInput/TextInput.tsx b/packages/react/src/components/TextInput/TextInput.tsx
index a6ccf9a1090f..f27e588f36ec 100644
--- a/packages/react/src/components/TextInput/TextInput.tsx
+++ b/packages/react/src/components/TextInput/TextInput.tsx
@@ -315,7 +315,7 @@ const TextInput = React.forwardRef(function TextInput(
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
       size: 'mini',
     });
diff --git a/packages/react/src/components/Tile/Tile.tsx b/packages/react/src/components/Tile/Tile.tsx
index 0dbeede5523f..03d38d427bbc 100644
--- a/packages/react/src/components/Tile/Tile.tsx
+++ b/packages/react/src/components/Tile/Tile.tsx
@@ -494,7 +494,7 @@ export const SelectableTile = React.forwardRef<
   // Slug is always size `xs`
   const slugRef = useRef<HTMLInputElement>(null);
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
       size: 'xs',
       ref: slugRef,
@@ -852,7 +852,7 @@ export const ExpandableTile = React.forwardRef<
 
   // Slug is always size `xs`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
       size: 'xs',
     });
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
index 2cc0cdca1b99..0208c5ea964e 100644
--- a/packages/react/src/index.js
+++ b/packages/react/src/index.js
@@ -308,11 +308,14 @@ export {
 } from './components/Theme';
 export { usePrefix } from './internal/usePrefix';
 export { useIdPrefix } from './internal/useIdPrefix';
+
+export { AILabel, AILabelContent, AILabelActions } from './components/AILabel';
+// Keep until V12
 export {
-  Slug as unstable__Slug,
-  SlugContent as unstable__SlugContent,
-  SlugActions as unstable__SlugActions,
-} from './components/Slug';
+  AILabel as unstable__Slug,
+  AILabelContent as unstable__SlugContent,
+  AILabelActions as unstable__SlugActions,
+} from './components/AILabel';
 
 export {
   AiSkeletonText as unstable__AiSkeletonText,
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index d2896ffe0c79..3a2cf7d30e22 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -153,11 +153,13 @@ export {
 } from './components/Pagination/experimental';
 export * from './components/Popover';
 export * from './components/ProgressBar';
+export { AILabel, AILabelContent, AILabelActions } from './components/AILabel';
+// Keep until V12
 export {
-  Slug as unstable__Slug,
-  SlugContent as unstable__SlugContent,
-  SlugActions as unstable__SlugActions,
-} from './components/Slug';
+  AILabel as unstable__Slug,
+  AILabelContent as unstable__SlugContent,
+  AILabelActions as unstable__SlugActions,
+} from './components/AILabel';
 export {
   ChatButton as unstable__ChatButton,
   ChatButtonSkeleton as unstable__ChatButtonSkeleton,

From 1e01a065443af4595674cadb914fa1b01d9e7b99 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 17 Jun 2024 14:38:50 -0400
Subject: [PATCH 05/17] chore(AILabel): move example stories to corresponding
 folders

---
 .../AILabel/Slug-examples.stories.js          | 888 ------------------
 .../components/Checkbox/Checkbox.stories.js   |   3 +-
 .../components/ComboBox/ComboBox.stories.js   |  49 +
 .../ComposedModal/ComposedModal.stories.js    | 101 ++
 .../DatePicker/DatePicker.stories.js          |  50 +
 .../components/Dropdown/Dropdown.stories.js   |  50 +
 .../src/components/Modal/Modal.stories.js     |  85 ++
 .../MultiSelect/MultiSelect.stories.js        |  64 ++
 .../NumberInput/NumberInput.stories.js        |  49 +
 .../RadioButton/RadioButton.stories.js        | 112 +++
 .../src/components/Select/Select.stories.js   |  54 ++
 .../react/src/components/Tag/Tag.stories.js   |  73 +-
 .../components/TextArea/TextArea.stories.js   |  46 +-
 .../components/TextInput/TextInput.stories.js |  45 +
 .../Tile/Tile.featureflag.stories.js          |  89 ++
 packages/react/src/components/Tile/Tile.mdx   |  22 +-
 .../react/src/components/Tile/Tile.stories.js | 203 +++-
 17 files changed, 1086 insertions(+), 897 deletions(-)
 delete mode 100644 packages/react/src/components/AILabel/Slug-examples.stories.js

diff --git a/packages/react/src/components/AILabel/Slug-examples.stories.js b/packages/react/src/components/AILabel/Slug-examples.stories.js
deleted file mode 100644
index ccf53fb47a2f..000000000000
--- a/packages/react/src/components/AILabel/Slug-examples.stories.js
+++ /dev/null
@@ -1,888 +0,0 @@
-import React, { useState } from 'react';
-import Button from '../Button';
-import Checkbox from '../Checkbox';
-import CheckboxGroup from '../CheckboxGroup';
-import ComboBox from '../ComboBox';
-import {
-  ComposedModal,
-  ModalBody,
-  ModalHeader,
-  ModalFooter,
-} from '../ComposedModal';
-import DatePicker from '../DatePicker';
-import DatePickerInput from '../DatePickerInput';
-import Dropdown from '../Dropdown';
-import Modal from '../Modal';
-import { MultiSelect, FilterableMultiSelect } from '../MultiSelect';
-import { NumberInput } from '../NumberInput';
-import RadioButton from '../RadioButton';
-import RadioButtonGroup from '../RadioButtonGroup';
-import Select from '../Select';
-import SelectItem from '../SelectItem';
-import Tag from '../Tag';
-import TextArea from '../TextArea';
-import TextInput from '../TextInput';
-import {
-  ClickableTile,
-  ExpandableTile,
-  SelectableTile,
-  Tile,
-  TileAboveTheFoldContent,
-  TileBelowTheFoldContent,
-} from '../Tile';
-import { default as RadioTile } from '../RadioTile';
-import TileGroup from '../TileGroup/TileGroup';
-import { FeatureFlags } from '../FeatureFlags';
-import { IconButton } from '../IconButton';
-import {
-  ArrowRight,
-  View,
-  FolderOpen,
-  Folders,
-  Asleep,
-} from '@carbon/icons-react';
-import { AILabel, AILabelContent, AILabelActions } from '.';
-import './ailabel-story.scss';
-import mdx from './SlugExamples.mdx';
-
-export default {
-  title: 'Experimental/unstable__Slug/Examples',
-  component: null,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-};
-
-const args = {
-  invalid: false,
-  invalidText:
-    'Error message that is really long can wrap to more lines but should not be excessively long.',
-  disabled: false,
-  warn: false,
-  warnText:
-    'Warning message that is really long can wrap to more lines but should not be excessively long.',
-};
-
-const argTypes = {
-  children: {
-    table: {
-      disable: true,
-    },
-  },
-  className: {
-    table: {
-      disable: true,
-    },
-  },
-  disabled: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  invalid: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  invalidText: {
-    control: {
-      type: 'text',
-    },
-  },
-  warn: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  warnText: {
-    control: {
-      type: 'text',
-    },
-  },
-  slug: {
-    description:
-      '**Experimental**: Provide a `Slug` component to be rendered inside the component',
-  },
-};
-
-const textareaProps = {
-  labelText: 'Text Area label',
-  className: 'some-class',
-  placeholder: 'Placeholder text',
-  id: 'test5',
-  rows: 4,
-};
-
-const TextInputProps = {
-  className: 'some-class',
-  id: 'test2',
-  labelText: 'Text Input label',
-  placeholder: 'Placeholder text',
-};
-
-const numberInputProps = {
-  className: 'some-class',
-  id: 'number-input-1',
-  label: 'Number Input',
-  min: 0,
-  max: 100,
-  value: 50,
-  step: 10,
-  iconDescription: 'Add/decrement number',
-};
-
-const items = [
-  {
-    id: 'option-0',
-    text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
-  },
-  {
-    id: 'option-1',
-    text: 'Option 1',
-  },
-  {
-    id: 'option-2',
-    text: 'Option 2',
-  },
-  {
-    id: 'option-3',
-    text: 'Option 3 - a disabled item',
-    disabled: true,
-  },
-  {
-    id: 'option-4',
-    text: 'Option 4',
-  },
-  {
-    id: 'option-5',
-    text: 'Option 5',
-  },
-];
-
-const aiLabel = (
-  <AILabel className="slug-container">
-    <AILabelContent>
-      <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>
-      <AILabelActions>
-        <IconButton kind="ghost" label="View">
-          <View />
-        </IconButton>
-        <IconButton kind="ghost" label="Open Folder">
-          <FolderOpen />
-        </IconButton>
-        <IconButton kind="ghost" label="Folders">
-          <Folders />
-        </IconButton>
-        <Button>View details</Button>
-      </AILabelActions>
-    </AILabelContent>
-  </AILabel>
-);
-
-const slugFunc = (kind) => (
-  <AILabel kind={kind}>
-    <AILabelContent>
-      <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>
-      <AILabelActions>
-        <IconButton kind="ghost" label="View">
-          <View />
-        </IconButton>
-        <IconButton kind="ghost" label="Open Folder">
-          <FolderOpen />
-        </IconButton>
-        <IconButton kind="ghost" label="Folders">
-          <Folders />
-        </IconButton>
-        <Button>View details</Button>
-      </AILabelActions>
-    </AILabelContent>
-  </AILabel>
-);
-
-export const _Checkbox = {
-  args: args,
-  argTypes: argTypes,
-  render: (args) => (
-    <div className="slug-check-radio-container">
-      <CheckboxGroup legendText="Group Label" slug={slugFunc()} {...args}>
-        <Checkbox labelText={`Checkbox label`} id="checkbox-label-1" />
-        <Checkbox labelText={`Checkbox label`} id="checkbox-label-2" />
-        <Checkbox labelText={`Checkbox label`} id="checkbox-label-3" />
-      </CheckboxGroup>
-
-      <CheckboxGroup legendText="Group Label" {...args}>
-        <Checkbox
-          labelText={`Checkbox label`}
-          id="checkbox-label-4"
-          slug={slugFunc()}
-        />
-        <Checkbox
-          labelText={`Checkbox label`}
-          id="checkbox-label-5"
-          slug={slugFunc()}
-        />
-        <Checkbox labelText={`Checkbox label`} id="checkbox-label-6" />
-      </CheckboxGroup>
-
-      <CheckboxGroup legendText="Group Label" {...args}>
-        <Checkbox
-          labelText={`Checkbox label`}
-          id="checkbox-label-7"
-          slug={slugFunc('inline')}
-        />
-        <Checkbox
-          labelText={`Checkbox label`}
-          id="checkbox-label-8"
-          slug={slugFunc('inline')}
-        />
-        <Checkbox labelText={`Checkbox label`} id="checkbox-label-9" />
-      </CheckboxGroup>
-    </div>
-  ),
-};
-
-export const _Combobox = {
-  args: args,
-  argTypes: argTypes,
-  render: (args) => (
-    <div style={{ width: 400 }}>
-      <ComboBox
-        onChange={() => {}}
-        id="carbon-combobox"
-        items={items}
-        itemToString={(item) => (item ? item.text : '')}
-        titleText="ComboBox title"
-        helperText="Combobox helper text"
-        slug={slug}
-        {...args}
-      />
-    </div>
-  ),
-};
-
-export const _ComposedModal = {
-  args: {
-    showButtons: true,
-  },
-  argTypes: {
-    slug: {
-      description:
-        '**Experimental**: Provide a `Slug` component to be rendered inside the component',
-    },
-    showButtons: {
-      description: 'Show or hide the Modal buttons',
-    },
-  },
-  render: (args) => {
-    const [open, setOpen] = useState(true); // eslint-disable-line
-    return (
-      <div className="slug-modal">
-        <Button onClick={() => setOpen(true)}>Launch composed modal</Button>
-        <ComposedModal open={open} onClose={() => setOpen(false)} slug={slug}>
-          <ModalHeader label="Account resources" title="Add a custom domain" />
-          <ModalBody>
-            <p style={{ marginBottom: '1rem' }}>
-              Custom domains direct requests for your apps in this Cloud Foundry
-              organization to a URL that you own. A custom domain can be a
-              shared domain, a shared subdomain, or a shared domain and host.
-            </p>
-            <p style={{ marginBottom: '1rem' }}>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
-              eu nibh odio. Nunc a consequat est, id porttitor sapien. Proin
-              vitae leo vitae orci tincidunt auctor eget eget libero. Ut
-              tincidunt ultricies fringilla. Aliquam erat volutpat. Aenean arcu
-              odio, elementum vel vehicula vitae, porttitor ac lorem. Sed
-              viverra elit ac risus tincidunt fermentum. Ut sollicitudin nibh id
-              risus ornare ornare. Etiam gravida orci ut lectus dictum, quis
-              ultricies felis mollis. Mauris nec commodo est, nec faucibus nibh.
-              Nunc commodo ante quis pretium consectetur. Ut ac nisl vitae mi
-              mattis vulputate a at elit. Nullam porttitor ex eget mi feugiat
-              mattis. Nunc non sodales magna. Proin ornare tellus quis hendrerit
-              egestas. Donec pharetra leo nec molestie sollicitudin.
-            </p>
-
-            <TextInput
-              data-modal-primary-focus
-              id="text-input-1"
-              labelText="Domain name"
-              placeholder="e.g. github.com"
-              style={{ marginBottom: '1rem' }}
-            />
-            <Select id="select-1" defaultValue="us-south" labelText="Region">
-              <SelectItem value="us-south" text="US South" />
-              <SelectItem value="us-east" text="US East" />
-            </Select>
-            <p style={{ marginBlock: '1rem' }}>
-              Custom domains direct requests for your apps in this Cloud Foundry
-              organization to a URL that you own. A custom domain can be a
-              shared domain, a shared subdomain, or a shared domain and host.
-            </p>
-            <TextInput
-              data-modal-primary-focus
-              id="text-input-1"
-              labelText="Domain name"
-              placeholder="e.g. github.com"
-              style={{ marginBottom: '1rem' }}
-            />
-          </ModalBody>
-
-          {args.showButtons && (
-            <ModalFooter
-              primaryButtonText="Add"
-              secondaryButtons={[
-                { buttonText: 'Keep both' },
-                { buttonText: 'Rename' },
-              ]}
-            />
-          )}
-        </ComposedModal>
-      </div>
-    );
-  },
-};
-
-export const _DatePicker = {
-  args: args,
-  argTypes: argTypes,
-  render: (args) => (
-    <div style={{ width: 400 }}>
-      <DatePicker datePickerType="single">
-        <DatePickerInput
-          placeholder="mm/dd/yyyy"
-          labelText="Date Picker label"
-          size="md"
-          id="date-picker"
-          slug={slug}
-          {...args}
-        />
-      </DatePicker>
-    </div>
-  ),
-};
-
-export const _Dropdown = {
-  args: args,
-  argTypes: argTypes,
-  render: (args) => (
-    <div style={{ width: 400 }}>
-      <Dropdown
-        id="default"
-        titleText="Dropdown title"
-        helperText="This is some helper text"
-        initialSelectedItem={items[1]}
-        label="Option 1"
-        items={items}
-        itemToString={(item) => (item ? item.text : '')}
-        slug={slug}
-        {...args}
-      />
-    </div>
-  ),
-};
-
-export const _FilterableMultiselect = {
-  args: args,
-  argTypes: argTypes,
-  render: (args) => (
-    <div style={{ width: 400 }}>
-      <FilterableMultiSelect
-        label="Multiselect Label"
-        id="carbon-multiselect-example"
-        titleText="Multiselect title"
-        helperText="This is helper text"
-        items={items}
-        itemToString={(item) => (item ? item.text : '')}
-        selectionFeedback="top-after-reopen"
-        slug={slug}
-        {...args}
-      />
-    </div>
-  ),
-};
-
-export const _Modal = {
-  args: {
-    showButtons: true,
-  },
-  argTypes: {
-    slug: {
-      description:
-        '**Experimental**: Provide a `Slug` component to be rendered inside the component',
-    },
-    showButtons: {
-      description: 'Show or hide the Modal buttons',
-    },
-  },
-  render: (args) => {
-    const [open, setOpen] = useState(true); // eslint-disable-line
-    return (
-      <div className="slug-modal">
-        <Button onClick={() => setOpen(true)}>Launch modal</Button>
-        <Modal
-          open={open}
-          onRequestClose={() => setOpen(false)}
-          modalHeading="Add a custom domain"
-          modalLabel="Account resources"
-          primaryButtonText="Add"
-          secondaryButtonText="Cancel"
-          passiveModal={!args.showButtons}
-          slug={slug}>
-          <p style={{ marginBottom: '1rem' }}>
-            Custom domains direct requests for your apps in this Cloud Foundry
-            organization to a URL that you own. A custom domain can be a shared
-            domain, a shared subdomain, or a shared domain and host.
-          </p>
-          <p style={{ marginBottom: '1rem' }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
-            eu nibh odio. Nunc a consequat est, id porttitor sapien. Proin vitae
-            leo vitae orci tincidunt auctor eget eget libero. Ut tincidunt
-            ultricies fringilla. Aliquam erat volutpat. Aenean arcu odio,
-            elementum vel vehicula vitae, porttitor ac lorem. Sed viverra elit
-            ac risus tincidunt fermentum. Ut sollicitudin nibh id risus ornare
-            ornare. Etiam gravida orci ut lectus dictum, quis ultricies felis
-            mollis. Mauris nec commodo est, nec faucibus nibh. Nunc commodo ante
-            quis pretium consectetur. Ut ac nisl vitae mi mattis vulputate a at
-            elit. Nullam porttitor ex eget mi feugiat mattis. Nunc non sodales
-            magna. Proin ornare tellus quis hendrerit egestas. Donec pharetra
-            leo nec molestie sollicitudin.
-          </p>
-          <TextInput
-            data-modal-primary-focus
-            id="text-input-1"
-            labelText="Domain name"
-            placeholder="e.g. github.com"
-          />
-          <Select id="select-1" defaultValue="us-south" labelText="Region">
-            <SelectItem value="us-south" text="US South" />
-            <SelectItem value="us-east" text="US East" />
-          </Select>
-          <TextArea labelText="Comments" />
-        </Modal>
-      </div>
-    );
-  },
-};
-
-export const _Multiselect = {
-  args: args,
-  argTypes: argTypes,
-  render: (args) => (
-    <div style={{ width: 400 }}>
-      <MultiSelect
-        label="Multiselect Label"
-        id="carbon-multiselect-example"
-        titleText="Multiselect title"
-        helperText="This is helper text"
-        items={items}
-        itemToString={(item) => (item ? item.text : '')}
-        selectionFeedback="top-after-reopen"
-        slug={slug}
-        {...args}
-      />
-    </div>
-  ),
-};
-
-export const _NumberInput = {
-  args: args,
-  argTypes: argTypes,
-  render: (args) => (
-    <div style={{ width: 400 }}>
-      <NumberInput {...numberInputProps} slug={slug} {...args} />
-    </div>
-  ),
-};
-
-export const _RadioButton = {
-  args: args,
-  argTypes: argTypes,
-  render: (args) => (
-    <div className="slug-check-radio-container">
-      <RadioButtonGroup
-        slug={slugFunc('default')}
-        orientation="vertical"
-        legendText="Group label"
-        name="radio-button-group"
-        defaultSelected="radio-1"
-        {...args}>
-        <RadioButton
-          labelText="Radio button label"
-          value="radio-1"
-          id="radio-1"
-        />
-        <RadioButton
-          labelText="Radio button label"
-          value="radio-2"
-          id="radio-2"
-        />
-        <RadioButton
-          labelText="Radio button label"
-          value="radio-3"
-          id="radio-3"
-        />
-      </RadioButtonGroup>
-
-      <RadioButtonGroup
-        orientation="vertical"
-        legendText="Group label"
-        name="radio-button-group-2"
-        defaultSelected="radio-4"
-        {...args}>
-        <RadioButton
-          labelText="Radio button label"
-          value="radio-4"
-          id="radio-4"
-          slug={slugFunc()}
-        />
-        <RadioButton
-          labelText="Radio button label"
-          value="radio-5"
-          id="radio-5"
-          slug={slugFunc()}
-        />
-        <RadioButton
-          labelText="Radio button label"
-          value="radio-6"
-          id="radio-6"
-        />
-      </RadioButtonGroup>
-
-      <RadioButtonGroup
-        orientation="vertical"
-        legendText="Group label"
-        name="radio-button-group-3"
-        defaultSelected="radio-7"
-        {...args}>
-        <RadioButton
-          labelText="Radio button label"
-          value="radio-7"
-          id="radio-7"
-          slug={slugFunc('inline')}
-        />
-        <RadioButton
-          labelText="Radio button label"
-          value="radio-8"
-          id="radio-8"
-          slug={slugFunc('inline')}
-        />
-        <RadioButton
-          labelText="Radio button label"
-          value="radio-9"
-          id="radio-9"
-        />
-      </RadioButtonGroup>
-    </div>
-  ),
-};
-
-export const _Select = {
-  args: args,
-  argTypes: argTypes,
-  render: (args) => (
-    <div style={{ width: 400 }}>
-      <Select
-        id="select-1"
-        labelText="Select an option"
-        helperText="Optional helper text"
-        slug={slug}
-        {...args}>
-        <SelectItem value="" text="" />
-        <SelectItem
-          value="An example option that is really long to show what should be done to handle long text"
-          text="An example option that is really long to show what should be done to handle long text"
-        />
-        <SelectItem value="Option 2" text="Option 2" />
-        <SelectItem value="Option 3" text="Option 3" />
-        <SelectItem value="Option 4" text="Option 4" />
-      </Select>
-    </div>
-  ),
-};
-
-export const _Tag = {
-  argTypes: {
-    slug: {
-      description:
-        '**Experimental**: Provide a `Slug` component to be rendered inside the component',
-    },
-  },
-  render: () => (
-    <div style={{ marginBottom: '4rem' }}>
-      <Tag slug={slug} className="some-class" type="red" title="Clear Filter">
-        {'Tag'}
-      </Tag>
-
-      <Tag
-        filter
-        slug={slug}
-        className="some-class"
-        type="purple"
-        title="Clear Filter">
-        {'Tag'}
-      </Tag>
-
-      <Tag
-        renderIcon={Asleep}
-        slug={slug}
-        className="some-class"
-        type="blue"
-        title="Clear Filter">
-        {'Tag'}
-      </Tag>
-
-      <Tag
-        filter
-        renderIcon={Asleep}
-        slug={slug}
-        className="some-class"
-        type="green"
-        title="Clear Filter">
-        {'Tag'}
-      </Tag>
-    </div>
-  ),
-};
-
-export const _TextArea = {
-  args: args,
-  argTypes: argTypes,
-  render: (args) => (
-    <div style={{ width: 400 }}>
-      <TextArea {...textareaProps} slug={slug} {...args} />
-    </div>
-  ),
-};
-
-export const _TextInput = {
-  args: args,
-  argTypes: argTypes,
-  render: (args) => (
-    <div style={{ width: 400 }}>
-      <TextInput {...TextInputProps} slug={slug} {...args} />
-    </div>
-  ),
-};
-
-export const _Tile = {
-  argTypes: {
-    hasRoundedCorners: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    slug: {
-      description:
-        '**Experimental**: Provide a `Slug` component to be rendered inside the component',
-    },
-  },
-  render: (args) => (
-    <>
-      <div className="slug-tile-container">
-        <Tile slug={slug} id="tile-1" {...args}>
-          <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>
-        <ClickableTile
-          href="https://www.carbondesignsystem.com/"
-          slug
-          id="tile-click"
-          renderIcon={ArrowRight}
-          {...args}>
-          <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>
-
-        <ExpandableTile
-          id="expandable-tile-1"
-          tileCollapsedIconText="Interact to Expand tile"
-          tileExpandedIconText="Interact to Collapse tile"
-          slug={slug}
-          {...args}>
-          <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>
-
-      <div className="slug-selectable-tile-container">
-        <TileGroup
-          defaultSelected="default-selected"
-          legend="Selectable Tile Group"
-          name="selectable tile group"
-          {...args}>
-          <div>
-            <SelectableTile
-              className="slug-selectable-tile"
-              id="selectable-tile-1"
-              slug={slug}
-              {...args}>
-              Option 1
-            </SelectableTile>
-          </div>
-          <div>
-            <SelectableTile
-              className="slug-selectable-tile"
-              slug={slug}
-              id="selectable-tile-2"
-              {...args}>
-              Option 2
-            </SelectableTile>
-          </div>
-          <div>
-            <SelectableTile
-              className="slug-selectable-tile"
-              slug={slug}
-              id="selectable-tile-3"
-              {...args}>
-              Option 3
-            </SelectableTile>
-          </div>
-        </TileGroup>
-      </div>
-      <br />
-      <br />
-      <div className="slug-selectable-tile-container">
-        <TileGroup
-          defaultSelected="default-selected"
-          legend="Radio Tile Group"
-          name="radio tile group"
-          {...args}>
-          <RadioTile
-            className="slug-radio-tile"
-            id="radio-tile-1"
-            value="standard"
-            slug={slug}
-            {...args}>
-            Option 1
-          </RadioTile>
-          <RadioTile
-            className="slug-radio-tile"
-            id="radio-tile-2"
-            value="default-selected"
-            slug={slug}
-            {...args}>
-            Option 2
-          </RadioTile>
-          <RadioTile
-            className="slug-radio-tile"
-            id="radio-tile-3"
-            value="selected"
-            slug={slug}
-            {...args}>
-            Option 3
-          </RadioTile>
-        </TileGroup>
-      </div>
-      <br />
-      <br />
-      <div className="slug-selectable-tile-container slug-experimental-radio-tile-container">
-        <FeatureFlags
-          flags={{
-            'enable-v12-tile-radio-icons': true,
-          }}>
-          <TileGroup
-            defaultSelected="default-selected"
-            legend="Radio Tile Group - Feature Flags enabled"
-            name="radio tile group two"
-            {...args}>
-            <RadioTile
-              className="slug-radio-tile"
-              id="radio-tile-4"
-              value="standard"
-              slug={slug}
-              {...args}>
-              Option 1
-            </RadioTile>
-            <RadioTile
-              className="slug-radio-tile"
-              id="radio-tile-5"
-              value="default-selected"
-              slug={slug}
-              {...args}>
-              Option 2
-            </RadioTile>
-            <RadioTile
-              className="slug-radio-tile"
-              id="radio-tile-6"
-              value="selected"
-              slug={slug}
-              {...args}>
-              Option 3
-            </RadioTile>
-          </TileGroup>
-        </FeatureFlags>
-      </div>
-    </>
-  ),
-};
diff --git a/packages/react/src/components/Checkbox/Checkbox.stories.js b/packages/react/src/components/Checkbox/Checkbox.stories.js
index 66dd548618f0..40cd2e5bea5e 100644
--- a/packages/react/src/components/Checkbox/Checkbox.stories.js
+++ b/packages/react/src/components/Checkbox/Checkbox.stories.js
@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import '../AILabel/ailabel-story.scss';
 import { default as Checkbox, CheckboxSkeleton } from './';
 import mdx from './Checkbox.mdx';
 import CheckboxGroup from '../CheckboxGroup';
@@ -91,7 +92,7 @@ export const Single = () => {
 export const Skeleton = () => <CheckboxSkeleton />;
 
 const slugFunc = (kind) => (
-  <AILabel kind={kind}>
+  <AILabel className="slug-container" kind={kind}>
     <AILabelContent>
       <div>
         <p className="secondary">AI Explained</p>
diff --git a/packages/react/src/components/ComboBox/ComboBox.stories.js b/packages/react/src/components/ComboBox/ComboBox.stories.js
index d43b231671a0..4d80d7a8aac7 100644
--- a/packages/react/src/components/ComboBox/ComboBox.stories.js
+++ b/packages/react/src/components/ComboBox/ComboBox.stories.js
@@ -10,6 +10,10 @@ import React from 'react';
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
 
 import ComboBox from '../ComboBox';
+import Button from '../Button';
+import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import { IconButton } from '../IconButton';
+import { View, FolderOpen, Folders } from '@carbon/icons-react';
 import mdx from './ComboBox.mdx';
 
 const items = [
@@ -125,6 +129,51 @@ export const _WithLayer = () => (
   </WithLayer>
 );
 
+const aiLabel = (
+  <AILabel className="slug-container">
+    <AILabelContent>
+      <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>
+      <AILabelActions>
+        <IconButton kind="ghost" label="View">
+          <View />
+        </IconButton>
+        <IconButton kind="ghost" label="Open Folder">
+          <FolderOpen />
+        </IconButton>
+        <IconButton kind="ghost" label="Folders">
+          <Folders />
+        </IconButton>
+        <Button>View details</Button>
+      </AILabelActions>
+    </AILabelContent>
+  </AILabel>
+);
+
+export const withAILabel = () => (
+  <div style={{ width: 300 }}>
+    <ComboBox
+      onChange={() => {}}
+      id="carbon-combobox"
+      items={items}
+      itemToString={(item) => (item ? item.text : '')}
+      titleText="ComboBox title"
+      helperText="Combobox helper text"
+      slug={aiLabel}
+    />
+  </div>
+);
+
 export const Playground = (args) => (
   <div style={{ width: 300 }}>
     <ComboBox
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.stories.js b/packages/react/src/components/ComposedModal/ComposedModal.stories.js
index 7f47641fb028..e07bc295ea81 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal.stories.js
+++ b/packages/react/src/components/ComposedModal/ComposedModal.stories.js
@@ -23,6 +23,9 @@ import {
   StructuredListRow,
   StructuredListCell,
 } from '../StructuredList';
+import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import { IconButton } from '../IconButton';
+import { View, FolderOpen, Folders } from '@carbon/icons-react';
 import mdx from './ComposedModal.mdx';
 
 export default {
@@ -348,6 +351,104 @@ export const WithInlineLoading = () => {
   );
 };
 
+const aiLabel = (
+  <AILabel className="slug-container">
+    <AILabelContent>
+      <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>
+      <AILabelActions>
+        <IconButton kind="ghost" label="View">
+          <View />
+        </IconButton>
+        <IconButton kind="ghost" label="Open Folder">
+          <FolderOpen />
+        </IconButton>
+        <IconButton kind="ghost" label="Folders">
+          <Folders />
+        </IconButton>
+        <Button>View details</Button>
+      </AILabelActions>
+    </AILabelContent>
+  </AILabel>
+);
+
+export const _withAILabel = {
+  render: () => {
+    const [open, setOpen] = useState(true); // eslint-disable-line
+    return (
+      <div className="slug-modal">
+        <Button onClick={() => setOpen(true)}>Launch composed modal</Button>
+        <ComposedModal
+          open={open}
+          onClose={() => setOpen(false)}
+          slug={aiLabel}>
+          <ModalHeader label="Account resources" title="Add a custom domain" />
+          <ModalBody>
+            <p style={{ marginBottom: '1rem' }}>
+              Custom domains direct requests for your apps in this Cloud Foundry
+              organization to a URL that you own. A custom domain can be a
+              shared domain, a shared subdomain, or a shared domain and host.
+            </p>
+            <p style={{ marginBottom: '1rem' }}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
+              eu nibh odio. Nunc a consequat est, id porttitor sapien. Proin
+              vitae leo vitae orci tincidunt auctor eget eget libero. Ut
+              tincidunt ultricies fringilla. Aliquam erat volutpat. Aenean arcu
+              odio, elementum vel vehicula vitae, porttitor ac lorem. Sed
+              viverra elit ac risus tincidunt fermentum. Ut sollicitudin nibh id
+              risus ornare ornare. Etiam gravida orci ut lectus dictum, quis
+              ultricies felis mollis. Mauris nec commodo est, nec faucibus nibh.
+              Nunc commodo ante quis pretium consectetur. Ut ac nisl vitae mi
+              mattis vulputate a at elit. Nullam porttitor ex eget mi feugiat
+              mattis. Nunc non sodales magna. Proin ornare tellus quis hendrerit
+              egestas. Donec pharetra leo nec molestie sollicitudin.
+            </p>
+
+            <TextInput
+              data-modal-primary-focus
+              id="text-input-1"
+              labelText="Domain name"
+              placeholder="e.g. github.com"
+              style={{ marginBottom: '1rem' }}
+            />
+            <Select id="select-1" defaultValue="us-south" labelText="Region">
+              <SelectItem value="us-south" text="US South" />
+              <SelectItem value="us-east" text="US East" />
+            </Select>
+            <p style={{ marginBlock: '1rem' }}>
+              Custom domains direct requests for your apps in this Cloud Foundry
+              organization to a URL that you own. A custom domain can be a
+              shared domain, a shared subdomain, or a shared domain and host.
+            </p>
+            <TextInput
+              data-modal-primary-focus
+              id="text-input-1"
+              labelText="Domain name"
+              placeholder="e.g. github.com"
+              style={{ marginBottom: '1rem' }}
+            />
+          </ModalBody>
+
+          <ModalFooter
+            primaryButtonText="Save"
+            secondaryButtons={[{ buttonText: 'Cancel' }]}
+          />
+        </ComposedModal>
+      </div>
+    );
+  },
+};
+
 export const Playground = (args) => {
   const [open, setOpen] = useState(true);
   return (
diff --git a/packages/react/src/components/DatePicker/DatePicker.stories.js b/packages/react/src/components/DatePicker/DatePicker.stories.js
index a941277347be..b3a60f17e9df 100644
--- a/packages/react/src/components/DatePicker/DatePicker.stories.js
+++ b/packages/react/src/components/DatePicker/DatePicker.stories.js
@@ -12,6 +12,11 @@ import { WithLayer } from '../../../.storybook/templates/WithLayer';
 import DatePicker from './DatePicker';
 import DatePickerSkeleton from './DatePicker.Skeleton';
 import DatePickerInput from '../DatePickerInput';
+import Button from '../Button';
+import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import { IconButton } from '../IconButton';
+import { View, FolderOpen, Folders } from '@carbon/icons-react';
+import '../AILabel/ailabel-story.scss';
 import mdx from './DatePicker.mdx';
 
 export default {
@@ -128,6 +133,51 @@ export const RangeWithCalendarWithLayer = () => (
 
 export const Skeleton = () => <DatePickerSkeleton range />;
 
+const aiLabel = (
+  <AILabel className="slug-container">
+    <AILabelContent>
+      <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>
+      <AILabelActions>
+        <IconButton kind="ghost" label="View">
+          <View />
+        </IconButton>
+        <IconButton kind="ghost" label="Open Folder">
+          <FolderOpen />
+        </IconButton>
+        <IconButton kind="ghost" label="Folders">
+          <Folders />
+        </IconButton>
+        <Button>View details</Button>
+      </AILabelActions>
+    </AILabelContent>
+  </AILabel>
+);
+
+export const withAILabel = () => (
+  <div style={{ width: 400 }}>
+    <DatePicker datePickerType="single">
+      <DatePickerInput
+        placeholder="mm/dd/yyyy"
+        labelText="Date Picker label"
+        size="md"
+        id="date-picker"
+        slug={aiLabel}
+      />
+    </DatePicker>
+  </div>
+);
+
 export const Playground = ({ readOnly, ...args }) => {
   return (
     <DatePicker datePickerType="single" {...args} readOnly={readOnly}>
diff --git a/packages/react/src/components/Dropdown/Dropdown.stories.js b/packages/react/src/components/Dropdown/Dropdown.stories.js
index e0347e877b51..78dfc1ed9731 100644
--- a/packages/react/src/components/Dropdown/Dropdown.stories.js
+++ b/packages/react/src/components/Dropdown/Dropdown.stories.js
@@ -10,6 +10,10 @@ import React from 'react';
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
 
 import { default as Dropdown, DropdownSkeleton } from './';
+import Button from '../Button';
+import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import { IconButton } from '../IconButton';
+import { View, FolderOpen, Folders } from '@carbon/icons-react';
 import mdx from './Dropdown.mdx';
 
 export default {
@@ -221,3 +225,49 @@ export const Skeleton = () => (
     <DropdownSkeleton />
   </div>
 );
+
+const aiLabel = (
+  <AILabel className="slug-container">
+    <AILabelContent>
+      <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>
+      <AILabelActions>
+        <IconButton kind="ghost" label="View">
+          <View />
+        </IconButton>
+        <IconButton kind="ghost" label="Open Folder">
+          <FolderOpen />
+        </IconButton>
+        <IconButton kind="ghost" label="Folders">
+          <Folders />
+        </IconButton>
+        <Button>View details</Button>
+      </AILabelActions>
+    </AILabelContent>
+  </AILabel>
+);
+
+export const withAILabel = () => (
+  <div style={{ width: 400 }}>
+    <Dropdown
+      id="default"
+      titleText="Dropdown title"
+      helperText="This is some helper text"
+      initialSelectedItem={items[1]}
+      label="Option 1"
+      items={items}
+      itemToString={(item) => (item ? item.text : '')}
+      slug={aiLabel}
+    />
+  </div>
+);
diff --git a/packages/react/src/components/Modal/Modal.stories.js b/packages/react/src/components/Modal/Modal.stories.js
index fb60764d3560..53444b9736e5 100644
--- a/packages/react/src/components/Modal/Modal.stories.js
+++ b/packages/react/src/components/Modal/Modal.stories.js
@@ -23,6 +23,10 @@ import {
   StructuredListRow,
   StructuredListCell,
 } from '../StructuredList';
+import TextArea from '../TextArea';
+import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import { IconButton } from '../IconButton';
+import { View, FolderOpen, Folders } from '@carbon/icons-react';
 
 export default {
   title: 'Components/Modal',
@@ -577,3 +581,84 @@ export const WithInlineLoading = () => {
     </>
   );
 };
+
+const aiLabel = (
+  <AILabel className="slug-container">
+    <AILabelContent>
+      <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>
+      <AILabelActions>
+        <IconButton kind="ghost" label="View">
+          <View />
+        </IconButton>
+        <IconButton kind="ghost" label="Open Folder">
+          <FolderOpen />
+        </IconButton>
+        <IconButton kind="ghost" label="Folders">
+          <Folders />
+        </IconButton>
+        <Button>View details</Button>
+      </AILabelActions>
+    </AILabelContent>
+  </AILabel>
+);
+
+export const withAILabel = {
+  render: () => {
+    const [open, setOpen] = useState(true); // eslint-disable-line
+    return (
+      <div className="slug-modal">
+        <Button onClick={() => setOpen(true)}>Launch modal</Button>
+        <Modal
+          open={open}
+          onRequestClose={() => setOpen(false)}
+          modalHeading="Add a custom domain"
+          modalLabel="Account resources"
+          primaryButtonText="Add"
+          secondaryButtonText="Cancel"
+          slug={aiLabel}>
+          <p style={{ marginBottom: '1rem' }}>
+            Custom domains direct requests for your apps in this Cloud Foundry
+            organization to a URL that you own. A custom domain can be a shared
+            domain, a shared subdomain, or a shared domain and host.
+          </p>
+          <p style={{ marginBottom: '1rem' }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
+            eu nibh odio. Nunc a consequat est, id porttitor sapien. Proin vitae
+            leo vitae orci tincidunt auctor eget eget libero. Ut tincidunt
+            ultricies fringilla. Aliquam erat volutpat. Aenean arcu odio,
+            elementum vel vehicula vitae, porttitor ac lorem. Sed viverra elit
+            ac risus tincidunt fermentum. Ut sollicitudin nibh id risus ornare
+            ornare. Etiam gravida orci ut lectus dictum, quis ultricies felis
+            mollis. Mauris nec commodo est, nec faucibus nibh. Nunc commodo ante
+            quis pretium consectetur. Ut ac nisl vitae mi mattis vulputate a at
+            elit. Nullam porttitor ex eget mi feugiat mattis. Nunc non sodales
+            magna. Proin ornare tellus quis hendrerit egestas. Donec pharetra
+            leo nec molestie sollicitudin.
+          </p>
+          <TextInput
+            data-modal-primary-focus
+            id="text-input-1"
+            labelText="Domain name"
+            placeholder="e.g. github.com"
+          />
+          <Select id="select-1" defaultValue="us-south" labelText="Region">
+            <SelectItem value="us-south" text="US South" />
+            <SelectItem value="us-east" text="US East" />
+          </Select>
+          <TextArea labelText="Comments" />
+        </Modal>
+      </div>
+    );
+  },
+};
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
index 8381bdd3a1cc..2a051b920a27 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
@@ -15,6 +15,9 @@ import MultiSelect from '.';
 import FilterableMultiSelect from './FilterableMultiSelect';
 import Button from '../Button';
 import ButtonSet from '../ButtonSet';
+import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import { IconButton } from '../IconButton';
+import { View, FolderOpen, Folders } from '@carbon/icons-react';
 
 export default {
   title: 'Components/MultiSelect',
@@ -355,3 +358,64 @@ export const _Controlled = () => {
     </div>
   );
 };
+
+const aiLabel = (
+  <AILabel className="slug-container">
+    <AILabelContent>
+      <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>
+      <AILabelActions>
+        <IconButton kind="ghost" label="View">
+          <View />
+        </IconButton>
+        <IconButton kind="ghost" label="Open Folder">
+          <FolderOpen />
+        </IconButton>
+        <IconButton kind="ghost" label="Folders">
+          <Folders />
+        </IconButton>
+        <Button>View details</Button>
+      </AILabelActions>
+    </AILabelContent>
+  </AILabel>
+);
+
+export const withAILabel = () => (
+  <div style={{ width: 400 }}>
+    <MultiSelect
+      label="Multiselect Label"
+      id="carbon-multiselect-example"
+      titleText="Multiselect title"
+      helperText="This is helper text"
+      items={items}
+      itemToString={(item) => (item ? item.text : '')}
+      selectionFeedback="top-after-reopen"
+      slug={aiLabel}
+    />
+  </div>
+);
+
+export const FilterableWithAILabel = () => (
+  <div style={{ width: 400 }}>
+    <FilterableMultiSelect
+      label="Multiselect Label"
+      id="carbon-multiselect-example"
+      titleText="Multiselect title"
+      helperText="This is helper text"
+      items={items}
+      itemToString={(item) => (item ? item.text : '')}
+      selectionFeedback="top-after-reopen"
+      slug={aiLabel}
+    />
+  </div>
+);
diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js
index 05101e414a57..e01818e66ca2 100644
--- a/packages/react/src/components/NumberInput/NumberInput.stories.js
+++ b/packages/react/src/components/NumberInput/NumberInput.stories.js
@@ -8,6 +8,10 @@
 import React from 'react';
 import { NumberInput } from './';
 import NumberInputSkeleton from './NumberInput.Skeleton';
+import Button from '../Button';
+import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import { IconButton } from '../IconButton';
+import { View, FolderOpen, Folders } from '@carbon/icons-react';
 
 export default {
   title: 'Components/NumberInput',
@@ -33,6 +37,51 @@ export const Default = () => {
   );
 };
 
+const aiLabel = (
+  <AILabel className="slug-container">
+    <AILabelContent>
+      <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>
+      <AILabelActions>
+        <IconButton kind="ghost" label="View">
+          <View />
+        </IconButton>
+        <IconButton kind="ghost" label="Open Folder">
+          <FolderOpen />
+        </IconButton>
+        <IconButton kind="ghost" label="Folders">
+          <Folders />
+        </IconButton>
+        <Button>View details</Button>
+      </AILabelActions>
+    </AILabelContent>
+  </AILabel>
+);
+
+export const withAILabel = () => (
+  <div style={{ width: 400 }}>
+    <NumberInput
+      min={-100}
+      max={100}
+      value={50}
+      label="NumberInput label"
+      helperText="Optional helper text."
+      invalidText="Number is not valid"
+      slug={aiLabel}
+    />
+  </div>
+);
+
 export const Playground = (args) => {
   // const { numberInputArrowTranslationIds, ...rest } = props();
   return (
diff --git a/packages/react/src/components/RadioButton/RadioButton.stories.js b/packages/react/src/components/RadioButton/RadioButton.stories.js
index bfc07de31df3..686f08ee6a58 100644
--- a/packages/react/src/components/RadioButton/RadioButton.stories.js
+++ b/packages/react/src/components/RadioButton/RadioButton.stories.js
@@ -9,6 +9,10 @@ import RadioButton from './RadioButton';
 import RadioButtonGroup from '../RadioButtonGroup';
 import RadioButtonSkeleton from './RadioButton.Skeleton';
 import React from 'react';
+import Button from '../Button';
+import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import { IconButton } from '../IconButton';
+import { View, FolderOpen, Folders } from '@carbon/icons-react';
 import mdx from './RadioButton.mdx';
 
 export default {
@@ -93,6 +97,114 @@ export const Skeleton = () => {
   return <RadioButtonSkeleton />;
 };
 
+const slugFunc = (kind) => (
+  <AILabel className="slug-container" kind={kind}>
+    <AILabelContent>
+      <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>
+      <AILabelActions>
+        <IconButton kind="ghost" label="View">
+          <View />
+        </IconButton>
+        <IconButton kind="ghost" label="Open Folder">
+          <FolderOpen />
+        </IconButton>
+        <IconButton kind="ghost" label="Folders">
+          <Folders />
+        </IconButton>
+        <Button>View details</Button>
+      </AILabelActions>
+    </AILabelContent>
+  </AILabel>
+);
+
+export const withAILabel = {
+  render: () => (
+    <div className="slug-check-radio-container">
+      <RadioButtonGroup
+        slug={slugFunc('default')}
+        orientation="vertical"
+        legendText="Group label"
+        name="radio-button-group"
+        defaultSelected="radio-1">
+        <RadioButton
+          labelText="Radio button label"
+          value="radio-1"
+          id="radio-1"
+        />
+        <RadioButton
+          labelText="Radio button label"
+          value="radio-2"
+          id="radio-2"
+        />
+        <RadioButton
+          labelText="Radio button label"
+          value="radio-3"
+          id="radio-3"
+        />
+      </RadioButtonGroup>
+
+      <RadioButtonGroup
+        orientation="vertical"
+        legendText="Group label"
+        name="radio-button-group-2"
+        defaultSelected="radio-4">
+        <RadioButton
+          labelText="Radio button label"
+          value="radio-4"
+          id="radio-4"
+          slug={slugFunc()}
+        />
+        <RadioButton
+          labelText="Radio button label"
+          value="radio-5"
+          id="radio-5"
+          slug={slugFunc()}
+        />
+        <RadioButton
+          labelText="Radio button label"
+          value="radio-6"
+          id="radio-6"
+        />
+      </RadioButtonGroup>
+
+      <RadioButtonGroup
+        orientation="vertical"
+        legendText="Group label"
+        name="radio-button-group-3"
+        defaultSelected="radio-7">
+        <RadioButton
+          labelText="Radio button label"
+          value="radio-7"
+          id="radio-7"
+          slug={slugFunc('inline')}
+        />
+        <RadioButton
+          labelText="Radio button label"
+          value="radio-8"
+          id="radio-8"
+          slug={slugFunc('inline')}
+        />
+        <RadioButton
+          labelText="Radio button label"
+          value="radio-9"
+          id="radio-9"
+        />
+      </RadioButtonGroup>
+    </div>
+  ),
+};
+
 export const Playground = (args) => {
   return (
     <RadioButtonGroup
diff --git a/packages/react/src/components/Select/Select.stories.js b/packages/react/src/components/Select/Select.stories.js
index 178c08c40f80..6bd829f8201e 100644
--- a/packages/react/src/components/Select/Select.stories.js
+++ b/packages/react/src/components/Select/Select.stories.js
@@ -12,6 +12,10 @@ import { WithLayer } from '../../../.storybook/templates/WithLayer';
 import { default as Select, SelectSkeleton } from '../Select';
 import SelectItem from '../SelectItem';
 import SelectItemGroup from '../SelectItemGroup';
+import Button from '../Button';
+import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import { IconButton } from '../IconButton';
+import { View, FolderOpen, Folders } from '@carbon/icons-react';
 import mdx from './Select.mdx';
 
 export default {
@@ -130,6 +134,56 @@ export const _WithLayer = () => (
   </WithLayer>
 );
 
+const aiLabel = (
+  <AILabel className="slug-container">
+    <AILabelContent>
+      <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>
+      <AILabelActions>
+        <IconButton kind="ghost" label="View">
+          <View />
+        </IconButton>
+        <IconButton kind="ghost" label="Open Folder">
+          <FolderOpen />
+        </IconButton>
+        <IconButton kind="ghost" label="Folders">
+          <Folders />
+        </IconButton>
+        <Button>View details</Button>
+      </AILabelActions>
+    </AILabelContent>
+  </AILabel>
+);
+
+export const withAILabel = () => (
+  <div style={{ width: 400 }}>
+    <Select
+      id="select-1"
+      labelText="Select an option"
+      helperText="Optional helper text"
+      slug={aiLabel}>
+      <SelectItem value="" text="" />
+      <SelectItem
+        value="An example option that is really long to show what should be done to handle long text"
+        text="An example option that is really long to show what should be done to handle long text"
+      />
+      <SelectItem value="Option 2" text="Option 2" />
+      <SelectItem value="Option 3" text="Option 3" />
+      <SelectItem value="Option 4" text="Option 4" />
+    </Select>
+  </div>
+);
+
 export const Playground = (args) => {
   return (
     <div>
diff --git a/packages/react/src/components/Tag/Tag.stories.js b/packages/react/src/components/Tag/Tag.stories.js
index f8ad717f4aac..850d5f048fb0 100644
--- a/packages/react/src/components/Tag/Tag.stories.js
+++ b/packages/react/src/components/Tag/Tag.stories.js
@@ -8,7 +8,11 @@
 import React from 'react';
 import { default as Tag } from '../Tag';
 import TagSkeleton from '../Tag/Tag.Skeleton';
-import { Asleep } from '@carbon/icons-react';
+import { Asleep, View, FolderOpen, Folders } from '@carbon/icons-react';
+import Button from '../Button';
+import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import { IconButton } from '../IconButton';
+import '../AILabel/ailabel-story.scss';
 
 export default {
   title: 'Components/Tag',
@@ -197,3 +201,70 @@ Skeleton.argTypes = {
     },
   },
 };
+
+const aiLabel = (
+  <AILabel className="slug-container">
+    <AILabelContent>
+      <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>
+      <AILabelActions>
+        <IconButton kind="ghost" label="View">
+          <View />
+        </IconButton>
+        <IconButton kind="ghost" label="Open Folder">
+          <FolderOpen />
+        </IconButton>
+        <IconButton kind="ghost" label="Folders">
+          <Folders />
+        </IconButton>
+        <Button>View details</Button>
+      </AILabelActions>
+    </AILabelContent>
+  </AILabel>
+);
+
+export const withAILabel = () => (
+  <div style={{ marginBottom: '4rem' }}>
+    <Tag slug={aiLabel} className="some-class" type="red" title="Clear Filter">
+      {'Tag'}
+    </Tag>
+
+    <Tag
+      filter
+      slug={aiLabel}
+      className="some-class"
+      type="purple"
+      title="Clear Filter">
+      {'Tag'}
+    </Tag>
+
+    <Tag
+      renderIcon={Asleep}
+      slug={aiLabel}
+      className="some-class"
+      type="blue"
+      title="Clear Filter">
+      {'Tag'}
+    </Tag>
+
+    <Tag
+      filter
+      renderIcon={Asleep}
+      slug={aiLabel}
+      className="some-class"
+      type="green"
+      title="Clear Filter">
+      {'Tag'}
+    </Tag>
+  </div>
+);
diff --git a/packages/react/src/components/TextArea/TextArea.stories.js b/packages/react/src/components/TextArea/TextArea.stories.js
index 838c68746f6e..56553697add0 100644
--- a/packages/react/src/components/TextArea/TextArea.stories.js
+++ b/packages/react/src/components/TextArea/TextArea.stories.js
@@ -8,7 +8,10 @@
 import React from 'react';
 
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
-
+import { View, FolderOpen, Folders } from '@carbon/icons-react';
+import Button from '../Button';
+import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import { IconButton } from '../IconButton';
 import { default as TextArea, TextAreaSkeleton } from './';
 
 export default {
@@ -48,6 +51,47 @@ export const _WithLayer = () => (
   </WithLayer>
 );
 
+const aiLabel = (
+  <AILabel className="slug-container">
+    <AILabelContent>
+      <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>
+      <AILabelActions>
+        <IconButton kind="ghost" label="View">
+          <View />
+        </IconButton>
+        <IconButton kind="ghost" label="Open Folder">
+          <FolderOpen />
+        </IconButton>
+        <IconButton kind="ghost" label="Folders">
+          <Folders />
+        </IconButton>
+        <Button>View details</Button>
+      </AILabelActions>
+    </AILabelContent>
+  </AILabel>
+);
+
+export const withAILabel = () => (
+  <TextArea
+    labelText="Text Area label"
+    helperText="Optional helper text"
+    rows={4}
+    id="text-area-5"
+    slug={aiLabel}
+  />
+);
+
 export const Skeleton = () => <TextAreaSkeleton />;
 
 export const Playground = (args) => <TextArea {...args} id="text-area-1" />;
diff --git a/packages/react/src/components/TextInput/TextInput.stories.js b/packages/react/src/components/TextInput/TextInput.stories.js
index e12d594ecc68..9433e8331f74 100644
--- a/packages/react/src/components/TextInput/TextInput.stories.js
+++ b/packages/react/src/components/TextInput/TextInput.stories.js
@@ -8,6 +8,10 @@
 import React from 'react';
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
 import FluidForm from '../FluidForm';
+import { View, FolderOpen, Folders } from '@carbon/icons-react';
+import Button from '../Button';
+import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import { IconButton } from '../IconButton';
 import mdx from './TextInput.mdx';
 
 import { default as TextInput, TextInputSkeleton } from '../TextInput';
@@ -72,6 +76,47 @@ export const _WithLayer = () => (
   </WithLayer>
 );
 
+const aiLabel = (
+  <AILabel className="slug-container">
+    <AILabelContent>
+      <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>
+      <AILabelActions>
+        <IconButton kind="ghost" label="View">
+          <View />
+        </IconButton>
+        <IconButton kind="ghost" label="Open Folder">
+          <FolderOpen />
+        </IconButton>
+        <IconButton kind="ghost" label="Folders">
+          <Folders />
+        </IconButton>
+        <Button>View details</Button>
+      </AILabelActions>
+    </AILabelContent>
+  </AILabel>
+);
+
+export const withAILabel = () => (
+  <TextInput
+    type="text"
+    labelText="Text input label"
+    helperText="Optional help text"
+    id="text-input-ai-label"
+    slug={aiLabel}
+  />
+);
+
 export const Skeleton = () => <TextInputSkeleton />;
 
 export const Playground = (args) => (
diff --git a/packages/react/src/components/Tile/Tile.featureflag.stories.js b/packages/react/src/components/Tile/Tile.featureflag.stories.js
index f901c306ae55..4e850c40f0b9 100644
--- a/packages/react/src/components/Tile/Tile.featureflag.stories.js
+++ b/packages/react/src/components/Tile/Tile.featureflag.stories.js
@@ -20,6 +20,16 @@ import {
 import TileGroup from '../TileGroup/TileGroup';
 import { Layer } from '../Layer';
 import './tile-story.scss';
+import '../AILabel/ailabel-story.scss';
+import {
+  Launch,
+  ArrowRight,
+  View,
+  FolderOpen,
+  Folders,
+} from '@carbon/icons-react';
+import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import { IconButton } from '../IconButton';
 
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
 import { WithFeatureFlags } from '../../../.storybook/templates/WithFeatureFlags';
@@ -287,3 +297,82 @@ export const ExpandableWithLayer = () => {
     </WithLayer>
   );
 };
+
+const aiLabel = (
+  <AILabel className="slug-container">
+    <AILabelContent>
+      <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>
+      <AILabelActions>
+        <IconButton kind="ghost" label="View">
+          <View />
+        </IconButton>
+        <IconButton kind="ghost" label="Open Folder">
+          <FolderOpen />
+        </IconButton>
+        <IconButton kind="ghost" label="Folders">
+          <Folders />
+        </IconButton>
+        <Button>View details</Button>
+      </AILabelActions>
+    </AILabelContent>
+  </AILabel>
+);
+
+export const _WithAILabel = {
+  argTypes: {
+    hasRoundedCorners: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    slug: {
+      description:
+        '**Experimental**: Provide an `AILabel` component to be rendered inside the component',
+    },
+  },
+  render: (args) => (
+    <div className="slug-selectable-tile-container slug-experimental-radio-tile-container">
+      <TileGroup
+        defaultSelected="default-selected"
+        legend="Radio Tile Group - Feature Flags enabled"
+        name="radio tile group two"
+        {...args}>
+        <RadioTile
+          className="slug-radio-tile"
+          id="radio-tile-4"
+          value="standard"
+          slug={aiLabel}
+          {...args}>
+          Option 1
+        </RadioTile>
+        <RadioTile
+          className="slug-radio-tile"
+          id="radio-tile-5"
+          value="default-selected"
+          slug={aiLabel}
+          {...args}>
+          Option 2
+        </RadioTile>
+        <RadioTile
+          className="slug-radio-tile"
+          id="radio-tile-6"
+          value="selected"
+          slug={aiLabel}
+          {...args}>
+          Option 3
+        </RadioTile>
+      </TileGroup>
+    </div>
+  ),
+};
diff --git a/packages/react/src/components/Tile/Tile.mdx b/packages/react/src/components/Tile/Tile.mdx
index c2f25ab7a013..c1beb11319c3 100644
--- a/packages/react/src/components/Tile/Tile.mdx
+++ b/packages/react/src/components/Tile/Tile.mdx
@@ -1,6 +1,6 @@
 import { Story, ArgsTable, Canvas, Meta } from '@storybook/blocks';
 import * as TileStories from './Tile.stories';
-import * as TileFeatureFlagStories from './Tile.featureflag.stories'
+import * as TileFeatureFlagStories from './Tile.featureflag.stories';
 
 <Meta of={TileStories} />
 
@@ -76,19 +76,31 @@ or if you have multiple feature flags you can enable them this way.
 
 <Canvas>
   <div style={{ width: '1018px', maxWidth: '100%' }}>
-    <Story of={TileFeatureFlagStories.Clickable} meta={TileFeatureFlagStories} />
+    <Story
+      of={TileFeatureFlagStories.Clickable}
+      meta={TileFeatureFlagStories}
+    />
   </div>
   <div style={{ width: '1018px', maxWidth: '100%' }}>
-    <Story of={TileFeatureFlagStories.Expandable} meta={TileFeatureFlagStories} />
+    <Story
+      of={TileFeatureFlagStories.Expandable}
+      meta={TileFeatureFlagStories}
+    />
   </div>
   <div style={{ width: '1018px', maxWidth: '100%' }}>
-    <Story of={TileFeatureFlagStories.MultiSelect} meta={TileFeatureFlagStories} />
+    <Story
+      of={TileFeatureFlagStories.MultiSelect}
+      meta={TileFeatureFlagStories}
+    />
   </div>
   <div style={{ width: '1018px', maxWidth: '100%' }}>
     <Story of={TileFeatureFlagStories.Radio} meta={TileFeatureFlagStories} />
   </div>
   <div style={{ width: '1018px', maxWidth: '100%' }}>
-    <Story of={TileFeatureFlagStories.Selectable} meta={TileFeatureFlagStories} />
+    <Story
+      of={TileFeatureFlagStories.Selectable}
+      meta={TileFeatureFlagStories}
+    />
   </div>
 </Canvas>
 
diff --git a/packages/react/src/components/Tile/Tile.stories.js b/packages/react/src/components/Tile/Tile.stories.js
index f2c559be5beb..51d8ed21d3a2 100644
--- a/packages/react/src/components/Tile/Tile.stories.js
+++ b/packages/react/src/components/Tile/Tile.stories.js
@@ -6,6 +6,7 @@
  */
 
 import './tile-story.scss';
+import '../AILabel/ailabel-story.scss';
 import React from 'react';
 
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
@@ -23,7 +24,15 @@ import {
   TileBelowTheFoldContent,
 } from './';
 import TileGroup from '../TileGroup/TileGroup';
-import { Launch } from '@carbon/icons-react';
+import {
+  Launch,
+  ArrowRight,
+  View,
+  FolderOpen,
+  Folders,
+} from '@carbon/icons-react';
+import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import { IconButton } from '../IconButton';
 
 export default {
   title: 'Components/Tile',
@@ -302,3 +311,195 @@ export const ExpandableWithLayer = () => (
     )}
   </WithLayer>
 );
+
+const aiLabel = (
+  <AILabel className="slug-container">
+    <AILabelContent>
+      <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>
+      <AILabelActions>
+        <IconButton kind="ghost" label="View">
+          <View />
+        </IconButton>
+        <IconButton kind="ghost" label="Open Folder">
+          <FolderOpen />
+        </IconButton>
+        <IconButton kind="ghost" label="Folders">
+          <Folders />
+        </IconButton>
+        <Button>View details</Button>
+      </AILabelActions>
+    </AILabelContent>
+  </AILabel>
+);
+
+export const withAILabel = {
+  argTypes: {
+    hasRoundedCorners: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    slug: {
+      description:
+        '**Experimental**: Provide an `AILabel` component to be rendered inside the component',
+    },
+  },
+  render: (args) => (
+    <>
+      <div className="slug-tile-container">
+        <Tile slug={aiLabel} id="tile-1" {...args}>
+          <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>
+        <ClickableTile
+          href="https://www.carbondesignsystem.com/"
+          slug
+          id="tile-click"
+          renderIcon={ArrowRight}
+          {...args}>
+          <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>
+
+        <ExpandableTile
+          id="expandable-tile-1"
+          tileCollapsedIconText="Interact to Expand tile"
+          tileExpandedIconText="Interact to Collapse tile"
+          slug={aiLabel}
+          {...args}>
+          <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>
+
+      <div className="slug-selectable-tile-container">
+        <TileGroup
+          defaultSelected="default-selected"
+          legend="Selectable Tile Group"
+          name="selectable tile group"
+          {...args}>
+          <div>
+            <SelectableTile
+              className="slug-selectable-tile"
+              id="selectable-tile-1"
+              slug={aiLabel}
+              {...args}>
+              Option 1
+            </SelectableTile>
+          </div>
+          <div>
+            <SelectableTile
+              className="slug-selectable-tile"
+              slug={aiLabel}
+              id="selectable-tile-2"
+              {...args}>
+              Option 2
+            </SelectableTile>
+          </div>
+          <div>
+            <SelectableTile
+              className="slug-selectable-tile"
+              slug={aiLabel}
+              id="selectable-tile-3"
+              {...args}>
+              Option 3
+            </SelectableTile>
+          </div>
+        </TileGroup>
+      </div>
+      <br />
+      <br />
+      <div className="slug-selectable-tile-container">
+        <TileGroup
+          defaultSelected="default-selected"
+          legend="Radio Tile Group"
+          name="radio tile group"
+          {...args}>
+          <RadioTile
+            className="slug-radio-tile"
+            id="radio-tile-1"
+            value="standard"
+            slug={aiLabel}
+            {...args}>
+            Option 1
+          </RadioTile>
+          <RadioTile
+            className="slug-radio-tile"
+            id="radio-tile-2"
+            value="default-selected"
+            slug={aiLabel}
+            {...args}>
+            Option 2
+          </RadioTile>
+          <RadioTile
+            className="slug-radio-tile"
+            id="radio-tile-3"
+            value="selected"
+            slug={aiLabel}
+            {...args}>
+            Option 3
+          </RadioTile>
+        </TileGroup>
+      </div>
+    </>
+  ),
+};

From adf57f689e5d68eda905c1c28414fe75d9a39d80 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 17 Jun 2024 15:32:05 -0400
Subject: [PATCH 06/17] chore(AILabel): move DataTable, Form stories to
 appropriate locations:

---
 ...SlugDatatable.mdx => AILabelDatatable.mdx} |  75 +--
 .../components/AILabel/Slug-form.stories.js   | 485 ------------------
 .../src/components/AILabel/SlugExamples.mdx   |  97 ----
 .../react/src/components/AILabel/SlugForm.mdx |  19 -
 ...ories.js => DataTable-ai-label.stories.js} |  18 +-
 .../DatePicker/DatePicker.stories.js          |   2 +-
 .../react/src/components/Form/Form.stories.js | 328 ++++++++++++
 7 files changed, 377 insertions(+), 647 deletions(-)
 rename packages/react/src/components/AILabel/{SlugDatatable.mdx => AILabelDatatable.mdx} (64%)
 delete mode 100644 packages/react/src/components/AILabel/Slug-form.stories.js
 delete mode 100644 packages/react/src/components/AILabel/SlugExamples.mdx
 delete mode 100644 packages/react/src/components/AILabel/SlugForm.mdx
 rename packages/react/src/components/DataTable/stories/{DataTable-slug.stories.js => DataTable-ai-label.stories.js} (96%)

diff --git a/packages/react/src/components/AILabel/SlugDatatable.mdx b/packages/react/src/components/AILabel/AILabelDatatable.mdx
similarity index 64%
rename from packages/react/src/components/AILabel/SlugDatatable.mdx
rename to packages/react/src/components/AILabel/AILabelDatatable.mdx
index fe6a4551d06c..b3cd8005662f 100644
--- a/packages/react/src/components/AILabel/SlugDatatable.mdx
+++ b/packages/react/src/components/AILabel/AILabelDatatable.mdx
@@ -1,20 +1,20 @@
 import { ArgsTable, Canvas, Story } from '@storybook/blocks';
-import { Slug, SlugContent, SlugActions } from '.';
-import * as SlugStories from '../DataTable/stories/DataTable-slug.stories';
+import { AILabel, AILabelContent, AILabelActions } from '.';
+import * as AILabelStories from '../DataTable/stories/DataTable-ai-label.stories';
 
-# Slug
+# AILabel
 
 [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Slug)
 |
-[Slug release status](https://airtable.com/appCAqlGVN8tRUbAp/shr71ZyLlIGORz3Vh/tblHqPusgkK8hIeHo)
+[AILabel release status](https://airtable.com/appCAqlGVN8tRUbAp/shr71ZyLlIGORz3Vh/tblHqPusgkK8hIeHo)
 |
 [Using AI-enhanced components in V10](https://github.com/carbon-design-system/carbon-for-ai/blob/main/docs/support-for-carbon-v10.md)
 
 ## Table of Contents
 
 - [Overview](#overview)
-- [Slug anatomy](#slug-anatomy)
-- [Using Slug in DataTable](#using-slug-in-datatable)
+- [AILabel anatomy](#ailabel-anatomy)
+- [Using AILabel in DataTable](#using-ailabel-in-datatable)
   - [Using as a column header](#using-as-a-column-header)
   - [Using in a row](#using-in-a-row)
 - [Feedback](#feedback)
@@ -24,34 +24,34 @@ import * as SlugStories from '../DataTable/stories/DataTable-slug.stories';
 The `DataTable` supports placing a `slug` in both the column header and row.
 
 <Canvas>
-  <Story of={SlugStories.ColumnSlugWithSelectionAndExpansion} />
-  <Story of={SlugStories.SlugWithSelection} />
+  <Story of={AILabelStories.ColumnAILabelWithSelectionAndExpansion} />
+  <Story of={AILabelStories.AILabelWithSelection} />
 </Canvas>
 
-## Slug anatomy
+## AILabel anatomy
 
-The `Slug` itself is a button that acts as a `Toggletip` trigger. To construct
-the contents of the `Slug` callout, you can place the desired elements as a
-child of `Slug` in `SlugContent`, like so:
+The `AILabel` itself is a button that acts as a `Toggletip` trigger. To
+construct the contents of the `AILabel` callout, you can place the desired
+elements as a child of `AILabel` in `AILabelContent`, like so:
 
 ```jsx
-<Slug>
-  <SlugContent>
+<AILabel>
+  <AILabelContent>
     {Content Here}
-  </SlugContent>
-</Slug>
+  </AILabelContent>
+</AILabel>
 ```
 
-The `Slug` also supports the rendering of an action bar at the bottom of the
-callout. To achieve this, you can pass in `SlugActions` as a child of `Slug`,
-placed inside the `SlugContent`
+The `AILabel` also supports the rendering of an action bar at the bottom of the
+callout. To achieve this, you can pass in `AILabelActions` as a child of
+`AILabel`, placed inside the `AILabelContent`
 
 ```jsx
-<Slug>
-  <SlugContent>
+<AILabel>
+  <AILabelContent>
     {Content Here}
     {Optional Slug action bar}
-    <SlugActions>
+    <AILabelActions>
       <IconButton kind="ghost" label="View">
         <View />
       </IconButton>
@@ -62,20 +62,20 @@ placed inside the `SlugContent`
         <Folders />
       </IconButton>
       <Button>View details</Button>
-    </SlugActions>
-  </SlugContent>
-</Slug>
+    </AILabelActions>
+  </AILabelContent>
+</AILabel>
 ```
 
-## Using `slug` in `DataTable`
+## Using `AILabel` in `DataTable`
 
 ### Using as a column header
 
-To use a `Slug` inside a column header, you'll need to add a `slug` to the
+To use an `AILabel` inside a column header, you'll need to add a `slug` to the
 appropriate column data.
 
 ```jsx
-const columnSlugHeaders = [
+const columnAILabelHeaders = [
   {
     key: 'name',
     header: 'Name',
@@ -84,8 +84,11 @@ const columnSlugHeaders = [
     key: 'attached_groups',
     header: 'Attached groups',
     slug: (
-      <Slug className="slug-container" autoAlign={false} align="bottom-right">
-        <SlugContent>
+      <AILabel
+        className="slug-container"
+        autoAlign={false}
+        align="bottom-right">
+        <AILabelContent>
           <div>
             <p className="secondary">AI Explained</p>
             <h1>84%</h1>
@@ -99,7 +102,7 @@ const columnSlugHeaders = [
             <p className="secondary">Model type</p>
             <p className="bold">Foundation model</p>
           </div>
-          <SlugActions>
+          <AILabelActions>
             <IconButton kind="ghost" label="View">
               <View />
             </IconButton>
@@ -110,9 +113,9 @@ const columnSlugHeaders = [
               <Folders />
             </IconButton>
             <Button>View details</Button>
-          </SlugActions>
-        </SlugContent>
-      </Slug>
+          </AILabelActions>
+        </AILabelContent>
+      </AILabel>
     ),
   },
 ];
@@ -129,8 +132,8 @@ To ensure the table cells are styled appropriately, you'll need to use the new
 
 ### Using in a row
 
-To use a `Slug` inside a `DataTable` row, you'll need to pass in your `Slug`
-component to `TableSlugRow`:
+To use an `AILabel` inside a `DataTable` row, you'll need to pass in your
+`AILabel` component to `TableSlugRow`:
 
 ```jsx
 <TableBody>
diff --git a/packages/react/src/components/AILabel/Slug-form.stories.js b/packages/react/src/components/AILabel/Slug-form.stories.js
deleted file mode 100644
index 69092881a4ca..000000000000
--- a/packages/react/src/components/AILabel/Slug-form.stories.js
+++ /dev/null
@@ -1,485 +0,0 @@
-import React, { useState, useRef } from 'react';
-import ComboBox from '../ComboBox';
-import Dropdown from '../Dropdown';
-import DatePicker from '../DatePicker';
-import DatePickerInput from '../DatePickerInput';
-import Form from '../Form/Form';
-import { MultiSelect, FilterableMultiSelect } from '../MultiSelect';
-import FluidComboBox from '../FluidComboBox';
-import FluidForm from '../FluidForm';
-import FluidNumberInput from '../FluidNumberInput';
-import FluidDatePicker from '../FluidDatePicker';
-import FluidDatePickerInput from '../FluidDatePickerInput';
-import FluidDropdown from '../FluidDropdown';
-import FluidMultiSelect from '../FluidMultiSelect';
-import FluidSelect from '../FluidSelect';
-import FluidTextArea from '../FluidTextArea';
-import FluidTextInput from '../FluidTextInput';
-import { NumberInput } from '../NumberInput';
-import Button from '../Button';
-import Select from '../Select';
-import SelectItem from '../SelectItem';
-import TextArea from '../TextArea';
-import TextInput from '../TextInput';
-import { Stack } from '../Stack';
-import { IconButton } from '../IconButton';
-import { View, FolderOpen, Folders } from '@carbon/icons-react';
-import { Slug, SlugContent, SlugActions } from '.';
-import './ailabel-story.scss';
-import mdx from './SlugForm.mdx';
-
-export default {
-  title: 'Experimental/unstable__Slug/Form',
-  component: Form,
-  subcomponents: {
-    Slug,
-  },
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-};
-
-const numberInputProps = {
-  className: 'some-class',
-  id: 'number-input-1',
-  label: 'Number Input',
-  min: 0,
-  max: 100,
-  value: 50,
-  step: 10,
-  iconDescription: 'Add/decrement number',
-};
-
-const TextInputProps = {
-  className: 'some-class',
-  id: 'test2',
-  labelText: 'Text Input label',
-  placeholder: 'Placeholder text',
-};
-
-const textareaProps = {
-  labelText: 'Text Area label',
-  className: 'some-class',
-  placeholder: 'Placeholder text',
-  id: 'test5',
-  rows: 4,
-};
-
-const buttonEvents = {
-  className: 'some-class',
-};
-
-const items = [
-  {
-    id: 'option-0',
-    text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
-  },
-  {
-    id: 'option-1',
-    text: 'Option 1',
-  },
-  {
-    id: 'option-2',
-    text: 'Option 2',
-  },
-  {
-    id: 'option-3',
-    text: 'Option 3 - a disabled item',
-    disabled: true,
-  },
-  {
-    id: 'option-4',
-    text: 'Option 4',
-  },
-  {
-    id: 'option-5',
-    text: 'Option 5',
-  },
-];
-
-export const RevertTest = () => {
-  const textInputRef = useRef();
-  const numberInputRef = useRef();
-  const [isTextInputEdited, setIsTextInputEdited] = useState(false);
-  const [isNumberInputEdited, setIsNumberInputEdited] = useState(false);
-  const aiTextValue = 'Generated AI content';
-  const aiNumberValue = 11;
-
-  const handleRevertClick = (evt) => {
-    if (textInputRef.current.nextElementSibling.contains(evt.target)) {
-      textInputRef.current.value = aiTextValue;
-      textInputRef.current.focus();
-      setIsTextInputEdited(false);
-    }
-
-    if (numberInputRef.current.nextElementSibling.contains(evt.target)) {
-      numberInputRef.current.value = aiNumberValue;
-      numberInputRef.current.focus();
-      setIsNumberInputEdited(false);
-    }
-  };
-
-  const handleChange = (evt, numberInputState) => {
-    if (textInputRef.current.contains(evt.target)) {
-      setIsTextInputEdited(true);
-    }
-
-    if (numberInputRef.current.contains(evt.target) || numberInputState) {
-      setIsNumberInputEdited(true);
-    }
-  };
-
-  const textInputSlug = (
-    <Slug
-      revertActive={isTextInputEdited}
-      onRevertClick={handleRevertClick}
-      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>
-      </SlugContent>
-    </Slug>
-  );
-
-  const numberInputSlug = (
-    <Slug
-      revertActive={isNumberInputEdited}
-      onRevertClick={handleRevertClick}
-      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>
-      </SlugContent>
-    </Slug>
-  );
-
-  return (
-    <Stack gap={7} className="form-example">
-      <Form aria-label="sample form" className="slug-form">
-        <Stack gap={7}>
-          <TextInput
-            ref={textInputRef}
-            id="text-input-edit"
-            labelText="Sample AI Input"
-            slug={textInputSlug}
-            defaultValue={aiTextValue}
-            onChange={handleChange}
-          />
-          <NumberInput
-            ref={numberInputRef}
-            id="number-input-edit"
-            label="Sample AI Input"
-            slug={numberInputSlug}
-            defaultValue={aiNumberValue}
-            step={1}
-            min={0}
-            max={100}
-            onChange={handleChange}
-          />
-        </Stack>
-      </Form>
-    </Stack>
-  );
-};
-
-export const _FormExample = (args) => {
-  const { revertActive, ...rest } = args;
-  const slug = (
-    <Slug className="slug-container" revertActive={revertActive}>
-      <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 details</Button>
-        </SlugActions>
-      </SlugContent>
-    </Slug>
-  );
-
-  return (
-    <Stack gap={7} className="form-example">
-      <Form aria-label="sample form" className="slug-form">
-        <Stack gap={7}>
-          <NumberInput {...numberInputProps} slug={slug} {...rest} />
-          <DatePicker datePickerType="single">
-            <DatePickerInput
-              placeholder="mm/dd/yyyy"
-              labelText="Date Picker label"
-              size="md"
-              id="date-picker"
-              slug={slug}
-              {...rest}
-            />
-          </DatePicker>
-          <TextInput {...TextInputProps} slug={slug} {...rest} />
-          <TextArea {...textareaProps} slug={slug} {...rest} />
-          <Dropdown
-            id="default"
-            titleText="Dropdown title"
-            helperText="This is some helper text"
-            initialSelectedItem={items[1]}
-            label="Option 1"
-            items={items}
-            itemToString={(item) => (item ? item.text : '')}
-            slug={slug}
-            {...rest}
-          />
-          <MultiSelect
-            label="Multiselect Label"
-            id="carbon-multiselect-example"
-            titleText="Multiselect title"
-            helperText="This is helper text"
-            items={items}
-            itemToString={(item) => (item ? item.text : '')}
-            selectionFeedback="top-after-reopen"
-            slug={slug}
-            {...rest}
-          />
-          <FilterableMultiSelect
-            id="carbon-multiselect-example-3"
-            titleText="FilterableMultiselect title"
-            helperText="This is helper text"
-            items={items}
-            itemToString={(item) => (item ? item.text : '')}
-            selectionFeedback="top-after-reopen"
-            slug={slug}
-            {...rest}
-          />
-          <ComboBox
-            onChange={() => {}}
-            id="carbon-combobox"
-            items={items}
-            itemToString={(item) => (item ? item.text : '')}
-            titleText="ComboBox title"
-            helperText="Combobox helper text"
-            slug={slug}
-            {...rest}
-          />
-          <Select
-            id="select-1"
-            labelText="Select an option"
-            helperText="Optional helper text"
-            slug={slug}
-            {...rest}>
-            <SelectItem value="" text="" />
-            <SelectItem
-              value="An example option that is really long to show what should be done to handle long text"
-              text="An example option that is really long to show what should be done to handle long text"
-            />
-            <SelectItem value="Option 2" text="Option 2" />
-            <SelectItem value="Option 3" text="Option 3" />
-            <SelectItem value="Option 4" text="Option 4" />
-          </Select>
-          <Button type="submit" className="some-class" {...buttonEvents}>
-            Submit
-          </Button>
-        </Stack>
-      </Form>
-
-      <FluidForm aria-label="sample ai form" className="fluid-slug-form">
-        <div style={{ display: 'flex' }}>
-          <FluidDatePicker datePickerType="single" style={{ width: '100%' }}>
-            <FluidDatePickerInput
-              placeholder="mm/dd/yyyy"
-              labelText="Date Picker label"
-              size="md"
-              id="fluid-date-picker"
-              slug={slug}
-              {...rest}
-            />
-          </FluidDatePicker>
-        </div>
-
-        <div style={{ display: 'flex' }}>
-          <FluidNumberInput
-            {...numberInputProps}
-            id="fluid-number-input"
-            slug={slug}
-            {...rest}
-          />
-        </div>
-        <div style={{ display: 'flex' }}>
-          <FluidTextInput
-            {...TextInputProps}
-            id="fluid-text-input"
-            slug={slug}
-            {...rest}
-          />
-        </div>
-        <div style={{ display: 'flex' }}>
-          <FluidTextArea
-            {...textareaProps}
-            id="fluid-text-area"
-            slug={slug}
-            {...rest}
-          />
-        </div>
-        <div style={{ display: 'flex' }}>
-          <FluidDropdown
-            isCondensed
-            initialSelectedItem={items[2]}
-            id="fluid-dropdown"
-            titleText="Label"
-            label="Choose an option"
-            items={items}
-            itemToString={(item) => (item ? item.text : '')}
-            slug={slug}
-            {...rest}
-          />
-        </div>
-        <div style={{ display: 'flex' }}>
-          <FluidComboBox
-            isCondensed
-            onChange={() => {}}
-            id="fluid-combobox"
-            titleText="Label"
-            label="Choose an option"
-            items={items}
-            itemToString={(item) => (item ? item.text : '')}
-            slug={slug}
-            {...rest}
-          />
-        </div>
-        <div style={{ display: 'flex' }}>
-          <FluidMultiSelect
-            isCondensed
-            onChange={() => {}}
-            initialSelectedItem={items[2]}
-            id="fluid-multi-select"
-            titleText="Label"
-            label="Choose an option"
-            items={items}
-            itemToString={(item) => (item ? item.text : '')}
-            slug={slug}
-            {...rest}
-          />
-        </div>
-        <div style={{ display: 'flex' }}>
-          <FluidMultiSelect
-            isFilterable
-            isCondensed
-            onChange={() => {}}
-            initialSelectedItem={items[2]}
-            id="fluid-multi-select-2"
-            titleText="Label"
-            label="Choose an option"
-            items={items}
-            itemToString={(item) => (item ? item.text : '')}
-            slug={slug}
-            {...rest}
-          />
-        </div>
-        <div style={{ display: 'flex' }}>
-          <FluidSelect slug={slug} {...rest} id="select-2">
-            <SelectItem value="" text="" />
-            <SelectItem value="option-1" text="Option 1" />
-            <SelectItem value="option-2" text="Option 2" />
-            <SelectItem value="option-3" text="Option 3" />
-            <SelectItem value="option-4" text="Option 4" />
-          </FluidSelect>
-        </div>
-        <Button type="submit" className="some-class" {...buttonEvents}>
-          Submit
-        </Button>
-      </FluidForm>
-    </Stack>
-  );
-};
-
-_FormExample.args = {
-  revertActive: false,
-  invalid: false,
-  invalidText:
-    'Error message that is really long can wrap to more lines but should not be excessively long.',
-  disabled: false,
-  warn: false,
-  warnText:
-    'Warning message that is really long can wrap to more lines but should not be excessively long.',
-};
-
-_FormExample.argTypes = {
-  children: {
-    table: {
-      disable: true,
-    },
-  },
-  className: {
-    table: {
-      disable: true,
-    },
-  },
-  disabled: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  invalid: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  invalidText: {
-    control: {
-      type: 'text',
-    },
-  },
-  warn: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  warnText: {
-    control: {
-      type: 'text',
-    },
-  },
-  revertActive: {
-    control: {
-      type: 'boolean',
-    },
-    table: {
-      category: 'Slug',
-    },
-  },
-};
diff --git a/packages/react/src/components/AILabel/SlugExamples.mdx b/packages/react/src/components/AILabel/SlugExamples.mdx
deleted file mode 100644
index 4cee99885b89..000000000000
--- a/packages/react/src/components/AILabel/SlugExamples.mdx
+++ /dev/null
@@ -1,97 +0,0 @@
-# Slug
-
-[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Slug)
-|
-[Slug release status](https://airtable.com/appCAqlGVN8tRUbAp/shr71ZyLlIGORz3Vh/tblHqPusgkK8hIeHo)
-|
-[Using AI-enhanced components in V10](https://github.com/carbon-design-system/carbon-for-ai/blob/main/docs/support-for-carbon-v10.md)
-
-## Table of Contents
-
-- [Overview](#overview)
-- [Slug anatomy](#slug-anatomy)
-- List of components that accept `Slug`
-  - [Checkbox](?path=/story/experimental-unstable-slug-examples--checkbox)
-  - [Combobox](?path=/story/experimental-unstable-slug-examples--combobox)
-  - [Composed Modal](?path=/story/experimental-unstable-slug-examples--composed-modal)
-  - [Data Table](?path=/story/experimental-unstable-slug-datatable--slug-with-expansion)
-  - [Date Picker](?path=/story/experimental-unstable-slug-examples--date-picker)
-  - [Dropdown](?path=/story/experimental-unstable-slug-examples--dropdown)
-  - [Filterable Multiselect](?path=/story/experimental-unstable-slug-examples--filterable-multiselect)
-  - [Modal](?path=/story/experimental-unstable-slug-examples--modal)
-  - [Multiselect](?path=/story/experimental-unstable-slug-examples--multiselect)
-  - [Number Input](?path=/story/experimental-unstable-slug-examples--number-input)
-  - [Radio Button](?path=/story/experimental-unstable-slug-examples--radio-button)
-  - [Select](?path=/story/experimental-unstable-slug-examples--select)
-  - [Tag](?path=/story/experimental-unstable-slug-examples--tag)
-  - [Text Area](?path=/story/experimental-unstable-slug-examples--text-area)
-  - [Text Input](?path=/story/experimental-unstable-slug-examples--text-input)
-  - [Tile](?path=/story/experimental-unstable-slug-examples--tile)
-- [Feedback](#feedback)
-
-## Overview
-
-The AI slug is intended for any scenario where something is being generated by
-(or with) AI to reinforce AI transparency, accountability, and explainability at
-any interface level. This also enables more effective recognition and recall of
-AI instances in a way that is identifiable across any IBM product.
-
-## Slug anatomy
-
-The `Slug` itself is a button that acts as a `Toggletip` trigger. To construct
-the contents of the `Slug` callout, you can place the desired elements as a
-child of `Slug` in `SlugContent`, like so:
-
-```jsx
-<Slug>
-  <SlugContent>
-    {Content Here}
-  </SlugContent>
-</Slug>
-```
-
-The `Slug` also supports the rendering of an action bar at the bottom of the
-callout. To achieve this, you can pass in `SlugActions` as a child of `Slug`,
-placed inside the `SlugContent`
-
-```jsx
-<Slug>
-  <SlugContent>
-    {Content Here}
-    {Optional Slug action bar}
-    <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 details</Button>
-    </SlugActions>
-  </SlugContent>
-</Slug>
-```
-
-To render the `Slug` inside a component, simply pass the `Slug` via the `slug`
-prop on the desired component.
-
-```jsx
-const slug = (
-  <Slug>
-    <SlugContent>
-      {Content Here}
-    </SlugContent>
-  </Slug>
-);
-
-<TextInput slug={slug} />
-```
-
-## Feedback
-
-Help us improve this component by providing feedback, asking questions on Slack,
-or updating this file on
-[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/Slug/SlugExamples.mdx).
diff --git a/packages/react/src/components/AILabel/SlugForm.mdx b/packages/react/src/components/AILabel/SlugForm.mdx
deleted file mode 100644
index 48afbe989a47..000000000000
--- a/packages/react/src/components/AILabel/SlugForm.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-# Slug
-
-[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Slug)
-|
-[Slug release status](https://airtable.com/appCAqlGVN8tRUbAp/shr71ZyLlIGORz3Vh/tblHqPusgkK8hIeHo)
-|
-[Using AI-enhanced components in V10](https://github.com/carbon-design-system/carbon-for-ai/blob/main/docs/support-for-carbon-v10.md)
-
-## Table of Contents
-
-- [Slug API docs](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug--overview)
-- [Slug-enabled components](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--overview)
-- [Feedback](#feedback)
-
-## Feedback
-
-Help us improve this component by providing feedback, asking questions on Slack,
-or updating this file on
-[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/Slug/SlugForm.mdx).
diff --git a/packages/react/src/components/DataTable/stories/DataTable-slug.stories.js b/packages/react/src/components/DataTable/stories/DataTable-ai-label.stories.js
similarity index 96%
rename from packages/react/src/components/DataTable/stories/DataTable-slug.stories.js
rename to packages/react/src/components/DataTable/stories/DataTable-ai-label.stories.js
index 57840b024872..b319cf0a1152 100644
--- a/packages/react/src/components/DataTable/stories/DataTable-slug.stories.js
+++ b/packages/react/src/components/DataTable/stories/DataTable-ai-label.stories.js
@@ -22,7 +22,7 @@ import DataTable, {
   TableExpandedRow,
 } from '..';
 import { rows, headers } from './shared';
-import mdx from '../../AILabel/SlugDatatable.mdx';
+import mdx from '../../AILabel/AILabelDatatable.mdx';
 import Button from '../../Button';
 import { IconButton } from '../../IconButton';
 import { View, FolderOpen, Folders } from '@carbon/icons-react';
@@ -30,7 +30,7 @@ import { AILabel, AILabelContent, AILabelActions } from '../../AILabel';
 import './datatable-story.scss';
 
 export default {
-  title: 'Experimental/unstable__Slug/DataTable',
+  title: 'Components/DataTable/WithAILabel',
   component: DataTable,
   subcomponents: {
     TableSelectAll,
@@ -51,7 +51,7 @@ export default {
   },
 };
 
-const columnSlugHeaders = [
+const columnAILabelHeaders = [
   {
     key: 'name',
     header: 'Name',
@@ -235,7 +235,7 @@ export const AILabelWithRadioSelection = () => (
   </DataTable>
 );
 
-export const SlugWithSelectionAndExpansion = () => (
+export const AILabelWithSelectionAndExpansion = () => (
   <DataTable rows={rows} headers={headers}>
     {({
       rows,
@@ -296,7 +296,7 @@ export const SlugWithSelectionAndExpansion = () => (
   </DataTable>
 );
 
-export const SlugWithExpansion = () => (
+export const AILabelWithExpansion = () => (
   <DataTable rows={rows} headers={headers}>
     {({
       rows,
@@ -354,8 +354,8 @@ export const SlugWithExpansion = () => (
   </DataTable>
 );
 
-export const ColumnSlugWithSelectionAndExpansion = () => (
-  <DataTable rows={rows} headers={columnSlugHeaders}>
+export const ColumnAILabelWithSelectionAndExpansion = () => (
+  <DataTable rows={rows} headers={columnAILabelHeaders}>
     {({
       rows,
       headers,
@@ -423,8 +423,8 @@ export const ColumnSlugWithSelectionAndExpansion = () => (
   </DataTable>
 );
 
-export const ColumnSlugSort = () => (
-  <DataTable rows={rows} headers={columnSlugHeaders}>
+export const ColumnAILabelSort = () => (
+  <DataTable rows={rows} headers={columnAILabelHeaders}>
     {({
       rows,
       headers,
diff --git a/packages/react/src/components/DatePicker/DatePicker.stories.js b/packages/react/src/components/DatePicker/DatePicker.stories.js
index b3a60f17e9df..d8b38ef8747c 100644
--- a/packages/react/src/components/DatePicker/DatePicker.stories.js
+++ b/packages/react/src/components/DatePicker/DatePicker.stories.js
@@ -16,7 +16,7 @@ import Button from '../Button';
 import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
 import { IconButton } from '../IconButton';
 import { View, FolderOpen, Folders } from '@carbon/icons-react';
-import '../AILabel/ailabel-story.scss';
+
 import mdx from './DatePicker.mdx';
 
 export default {
diff --git a/packages/react/src/components/Form/Form.stories.js b/packages/react/src/components/Form/Form.stories.js
index 13456e9f6aa0..38adec1fd76a 100644
--- a/packages/react/src/components/Form/Form.stories.js
+++ b/packages/react/src/components/Form/Form.stories.js
@@ -20,6 +20,26 @@ import SelectItem from '../SelectItem';
 import TextArea from '../TextArea';
 import TextInput from '../TextInput';
 import { Stack } from '../Stack';
+import ComboBox from '../ComboBox';
+import Dropdown from '../Dropdown';
+import DatePicker from '../DatePicker';
+import DatePickerInput from '../DatePickerInput';
+import { MultiSelect, FilterableMultiSelect } from '../MultiSelect';
+import FluidComboBox from '../FluidComboBox';
+import FluidForm from '../FluidForm';
+import FluidNumberInput from '../FluidNumberInput';
+import FluidDatePicker from '../FluidDatePicker';
+import FluidDatePickerInput from '../FluidDatePickerInput';
+import FluidDropdown from '../FluidDropdown';
+import FluidMultiSelect from '../FluidMultiSelect';
+import FluidSelect from '../FluidSelect';
+import FluidTextArea from '../FluidTextArea';
+import FluidTextInput from '../FluidTextInput';
+import { IconButton } from '../IconButton';
+import { View, FolderOpen, Folders } from '@carbon/icons-react';
+import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import '../AILabel/ailabel-story.scss';
+
 import mdx from './Form.mdx';
 
 const checkboxEvents = {
@@ -220,3 +240,311 @@ export const Default = () => (
     </Stack>
   </Form>
 );
+
+const items = [
+  {
+    id: 'option-0',
+    text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
+  },
+  {
+    id: 'option-1',
+    text: 'Option 1',
+  },
+  {
+    id: 'option-2',
+    text: 'Option 2',
+  },
+  {
+    id: 'option-3',
+    text: 'Option 3 - a disabled item',
+    disabled: true,
+  },
+  {
+    id: 'option-4',
+    text: 'Option 4',
+  },
+  {
+    id: 'option-5',
+    text: 'Option 5',
+  },
+];
+
+export const withAILabel = (args) => {
+  const { revertActive, ...rest } = args;
+  const aiLabel = (
+    <AILabel className="slug-container" revertActive={revertActive}>
+      <AILabelContent>
+        <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>
+        <AILabelActions>
+          <IconButton kind="ghost" label="View">
+            <View />
+          </IconButton>
+          <IconButton kind="ghost" label="Open Folder">
+            <FolderOpen />
+          </IconButton>
+          <IconButton kind="ghost" label="Folders">
+            <Folders />
+          </IconButton>
+          <Button>View details</Button>
+        </AILabelActions>
+      </AILabelContent>
+    </AILabel>
+  );
+
+  return (
+    <Stack gap={7} className="form-example">
+      <Form aria-label="sample form" className="slug-form">
+        <Stack gap={7}>
+          <NumberInput {...numberInputProps} slug={aiLabel} {...rest} />
+          <DatePicker datePickerType="single">
+            <DatePickerInput
+              placeholder="mm/dd/yyyy"
+              labelText="Date Picker label"
+              size="md"
+              id="date-picker"
+              slug={AILabel}
+              {...rest}
+            />
+          </DatePicker>
+          <TextInput {...TextInputProps} slug={aiLabel} {...rest} />
+          <TextArea {...textareaProps} slug={aiLabel} {...rest} />
+          <Dropdown
+            id="default"
+            titleText="Dropdown title"
+            helperText="This is some helper text"
+            initialSelectedItem={items[1]}
+            label="Option 1"
+            items={items}
+            itemToString={(item) => (item ? item.text : '')}
+            slug={aiLabel}
+            {...rest}
+          />
+          <MultiSelect
+            label="Multiselect Label"
+            id="carbon-multiselect-example"
+            titleText="Multiselect title"
+            helperText="This is helper text"
+            items={items}
+            itemToString={(item) => (item ? item.text : '')}
+            selectionFeedback="top-after-reopen"
+            slug={aiLabel}
+            {...rest}
+          />
+          <FilterableMultiSelect
+            id="carbon-multiselect-example-3"
+            titleText="FilterableMultiselect title"
+            helperText="This is helper text"
+            items={items}
+            itemToString={(item) => (item ? item.text : '')}
+            selectionFeedback="top-after-reopen"
+            slug={aiLabel}
+            {...rest}
+          />
+          <ComboBox
+            onChange={() => {}}
+            id="carbon-combobox"
+            items={items}
+            itemToString={(item) => (item ? item.text : '')}
+            titleText="ComboBox title"
+            helperText="Combobox helper text"
+            slug={aiLabel}
+            {...rest}
+          />
+          <Select
+            id="select-1"
+            labelText="Select an option"
+            helperText="Optional helper text"
+            slug={aiLabel}
+            {...rest}>
+            <SelectItem value="" text="" />
+            <SelectItem
+              value="An example option that is really long to show what should be done to handle long text"
+              text="An example option that is really long to show what should be done to handle long text"
+            />
+            <SelectItem value="Option 2" text="Option 2" />
+            <SelectItem value="Option 3" text="Option 3" />
+            <SelectItem value="Option 4" text="Option 4" />
+          </Select>
+          <Button type="submit" className="some-class" {...buttonEvents}>
+            Submit
+          </Button>
+        </Stack>
+      </Form>
+
+      <FluidForm aria-label="sample ai form" className="fluid-slug-form">
+        <div style={{ display: 'flex' }}>
+          <FluidDatePicker datePickerType="single" style={{ width: '100%' }}>
+            <FluidDatePickerInput
+              placeholder="mm/dd/yyyy"
+              labelText="Date Picker label"
+              size="md"
+              id="fluid-date-picker"
+              slug={aiLabel}
+              {...rest}
+            />
+          </FluidDatePicker>
+        </div>
+
+        <div style={{ display: 'flex' }}>
+          <FluidNumberInput
+            {...numberInputProps}
+            id="fluid-number-input"
+            slug={aiLabel}
+            {...rest}
+          />
+        </div>
+        <div style={{ display: 'flex' }}>
+          <FluidTextInput
+            {...TextInputProps}
+            id="fluid-text-input"
+            slug={aiLabel}
+            {...rest}
+          />
+        </div>
+        <div style={{ display: 'flex' }}>
+          <FluidTextArea
+            {...textareaProps}
+            id="fluid-text-area"
+            slug={aiLabel}
+            {...rest}
+          />
+        </div>
+        <div style={{ display: 'flex' }}>
+          <FluidDropdown
+            isCondensed
+            initialSelectedItem={items[2]}
+            id="fluid-dropdown"
+            titleText="Label"
+            label="Choose an option"
+            items={items}
+            itemToString={(item) => (item ? item.text : '')}
+            slug={aiLabel}
+            {...rest}
+          />
+        </div>
+        <div style={{ display: 'flex' }}>
+          <FluidComboBox
+            isCondensed
+            onChange={() => {}}
+            id="fluid-combobox"
+            titleText="Label"
+            label="Choose an option"
+            items={items}
+            itemToString={(item) => (item ? item.text : '')}
+            slug={aiLabel}
+            {...rest}
+          />
+        </div>
+        <div style={{ display: 'flex' }}>
+          <FluidMultiSelect
+            isCondensed
+            onChange={() => {}}
+            initialSelectedItem={items[2]}
+            id="fluid-multi-select"
+            titleText="Label"
+            label="Choose an option"
+            items={items}
+            itemToString={(item) => (item ? item.text : '')}
+            slug={aiLabel}
+            {...rest}
+          />
+        </div>
+        <div style={{ display: 'flex' }}>
+          <FluidMultiSelect
+            isFilterable
+            isCondensed
+            onChange={() => {}}
+            initialSelectedItem={items[2]}
+            id="fluid-multi-select-2"
+            titleText="Label"
+            label="Choose an option"
+            items={items}
+            itemToString={(item) => (item ? item.text : '')}
+            slug={aiLabel}
+            {...rest}
+          />
+        </div>
+        <div style={{ display: 'flex' }}>
+          <FluidSelect slug={aiLabel} {...rest} id="select-2">
+            <SelectItem value="" text="" />
+            <SelectItem value="option-1" text="Option 1" />
+            <SelectItem value="option-2" text="Option 2" />
+            <SelectItem value="option-3" text="Option 3" />
+            <SelectItem value="option-4" text="Option 4" />
+          </FluidSelect>
+        </div>
+        <Button type="submit" className="some-class" {...buttonEvents}>
+          Submit
+        </Button>
+      </FluidForm>
+    </Stack>
+  );
+};
+
+withAILabel.args = {
+  revertActive: false,
+  invalid: false,
+  invalidText:
+    'Error message that is really long can wrap to more lines but should not be excessively long.',
+  disabled: false,
+  warn: false,
+  warnText:
+    'Warning message that is really long can wrap to more lines but should not be excessively long.',
+};
+
+withAILabel.argTypes = {
+  children: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  disabled: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  invalid: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  invalidText: {
+    control: {
+      type: 'text',
+    },
+  },
+  warn: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  warnText: {
+    control: {
+      type: 'text',
+    },
+  },
+  revertActive: {
+    control: {
+      type: 'boolean',
+    },
+    table: {
+      category: 'Slug',
+    },
+  },
+};

From 2cc30670ed19756c709a6f05b9fcedc34f90a4c8 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 17 Jun 2024 16:50:37 -0400
Subject: [PATCH 07/17] style(AILabel): fix styles when revert is active

---
 packages/react/src/components/Form/Form.stories.js          | 2 +-
 .../components/fluid-date-picker/_fluid-date-picker.scss    | 6 ++++--
 .../components/fluid-number-input/_fluid-number-input.scss  | 2 +-
 packages/styles/scss/components/list-box/_list-box.scss     | 5 +++++
 packages/styles/scss/components/select/_select.scss         | 5 +++++
 5 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/Form/Form.stories.js b/packages/react/src/components/Form/Form.stories.js
index 38adec1fd76a..981a602bdf27 100644
--- a/packages/react/src/components/Form/Form.stories.js
+++ b/packages/react/src/components/Form/Form.stories.js
@@ -313,7 +313,7 @@ export const withAILabel = (args) => {
               labelText="Date Picker label"
               size="md"
               id="date-picker"
-              slug={AILabel}
+              slug={aiLabel}
               {...rest}
             />
           </DatePicker>
diff --git a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
index eda8afe2df88..8240d2a921ba 100644
--- a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
+++ b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
@@ -408,13 +408,15 @@
 
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker-input__wrapper--slug:not(
-      :has(~ .#{$prefix}--slug--revert)
+      :has(.#{$prefix}--slug--revert)
     ) {
     @include ai-gradient;
   }
 
   .#{$prefix}--date-picker--fluid
-    .#{$prefix}--date-picker-input__wrapper--slug
+    .#{$prefix}--date-picker-input__wrapper--slug:not(
+      :has(.#{$prefix}--slug--revert)
+    )
     .#{$prefix}--date-picker__input:not(.cds--date-picker__input--invalid) {
     border-block-end-color: $ai-border-strong;
   }
diff --git a/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss b/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss
index 9aef1ec4558a..2fdb74b552ca 100644
--- a/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss
+++ b/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss
@@ -305,7 +305,7 @@
 
   .#{$prefix}--number-input--fluid
     .#{$prefix}--number__input-wrapper--slug:not(
-      :has(~ .#{$prefix}--slug--revert)
+      :has(.#{$prefix}--slug--revert)
     ) {
     @include ai-gradient;
   }
diff --git a/packages/styles/scss/components/list-box/_list-box.scss b/packages/styles/scss/components/list-box/_list-box.scss
index 60c041b09988..25dc3b2e10e8 100644
--- a/packages/styles/scss/components/list-box/_list-box.scss
+++ b/packages/styles/scss/components/list-box/_list-box.scss
@@ -917,6 +917,11 @@ $list-box-menu-width: convert.to-rem(300px);
     inset-inline-end: convert.to-rem(-9px);
   }
 
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug--revert::after {
+    inset-block-start: convert.to-rem(8px);
+    inset-inline-end: convert.to-rem(-1px);
+  }
+
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box:not(:has(.#{$prefix}--slug--revert)) {
     @include ai-gradient;
diff --git a/packages/styles/scss/components/select/_select.scss b/packages/styles/scss/components/select/_select.scss
index b19c7b64fa56..e3348ac53fa2 100644
--- a/packages/styles/scss/components/select/_select.scss
+++ b/packages/styles/scss/components/select/_select.scss
@@ -311,6 +311,11 @@
     inset-inline-end: calc(-#{$spacing-03} - #{$divider-width});
   }
 
+  .#{$prefix}--select--slug .#{$prefix}--slug--revert::after {
+    inset-block-start: convert.to-rem(8px);
+    inset-inline-end: convert.to-rem(-1px);
+  }
+
   .#{$prefix}--select--slug
     .#{$prefix}--select-input:not(:has(~ .#{$prefix}--slug--revert)) {
     @include ai-gradient;

From 71504efed0ffce9813149f0df9bcc01d99fdfb40 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 17 Jun 2024 17:07:55 -0400
Subject: [PATCH 08/17] chore(AISkeleton): rename AiSkeleton to AISkeleton

---
 .../AISkeletonIcon.stories.js}                | 12 ++---
 .../AISkeletonIcon.tsx}                       | 12 ++---
 .../AISkeletonPlaceholder.stories.js}         | 10 ++--
 .../AISkeletonPlaceholder.tsx}                | 14 ++---
 .../AISkeleton/AISkeletonText.stories.js      | 19 +++++++
 .../AISkeletonText.tsx}                       |  8 +--
 .../react/src/components/AISkeleton/index.tsx | 12 +++++
 .../AiSkeleton/AiSkeletonText.stories.js      | 54 -------------------
 .../react/src/components/AiSkeleton/index.tsx | 12 -----
 9 files changed, 60 insertions(+), 93 deletions(-)
 rename packages/react/src/components/{AiSkeleton/AiSkeletonIcon.stories.js => AISkeleton/AISkeletonIcon.stories.js} (63%)
 rename packages/react/src/components/{AiSkeleton/AiSkeletonIcon.tsx => AISkeleton/AISkeletonIcon.tsx} (73%)
 rename packages/react/src/components/{AiSkeleton/AiSkeletonPlaceholder.stories.js => AISkeleton/AISkeletonPlaceholder.stories.js} (52%)
 rename packages/react/src/components/{AiSkeleton/AiSkeletonPlaceholder.tsx => AISkeleton/AISkeletonPlaceholder.tsx} (72%)
 create mode 100644 packages/react/src/components/AISkeleton/AISkeletonText.stories.js
 rename packages/react/src/components/{AiSkeleton/AiSkeletonText.tsx => AISkeleton/AISkeletonText.tsx} (91%)
 create mode 100644 packages/react/src/components/AISkeleton/index.tsx
 delete mode 100644 packages/react/src/components/AiSkeleton/AiSkeletonText.stories.js
 delete mode 100644 packages/react/src/components/AiSkeleton/index.tsx

diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonIcon.stories.js b/packages/react/src/components/AISkeleton/AISkeletonIcon.stories.js
similarity index 63%
rename from packages/react/src/components/AiSkeleton/AiSkeletonIcon.stories.js
rename to packages/react/src/components/AISkeleton/AISkeletonIcon.stories.js
index 0c435924623e..b17c4b8f03e8 100644
--- a/packages/react/src/components/AiSkeleton/AiSkeletonIcon.stories.js
+++ b/packages/react/src/components/AISkeleton/AISkeletonIcon.stories.js
@@ -9,11 +9,11 @@
 
 import React from 'react';
 
-import AiSkeletonIcon from './AiSkeletonIcon';
+import AISkeletonIcon from './AISkeletonIcon';
 
 export default {
-  title: 'Experimental/unstable__AiSkeleton/AiSkeletonIcon',
-  component: AiSkeletonIcon,
+  title: 'Components/Skeleton',
+  component: AISkeletonIcon,
 };
 
 const propsSkeleton = {
@@ -30,9 +30,9 @@ const propsSkeleton2 = {
   },
 };
 
-export const Default = () => (
+export const _AISkeletonIcon = () => (
   <>
-    <AiSkeletonIcon {...propsSkeleton} />
-    <AiSkeletonIcon {...propsSkeleton2} />
+    <AISkeletonIcon {...propsSkeleton} />
+    <AISkeletonIcon {...propsSkeleton2} />
   </>
 );
diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonIcon.tsx b/packages/react/src/components/AISkeleton/AISkeletonIcon.tsx
similarity index 73%
rename from packages/react/src/components/AiSkeleton/AiSkeletonIcon.tsx
rename to packages/react/src/components/AISkeleton/AISkeletonIcon.tsx
index e85843607273..7fc8a43cdba3 100644
--- a/packages/react/src/components/AiSkeleton/AiSkeletonIcon.tsx
+++ b/packages/react/src/components/AISkeleton/AISkeletonIcon.tsx
@@ -11,7 +11,7 @@ import classNames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 import { SkeletonIcon } from '../SkeletonIcon';
 
-interface AiSkeletonIconProps {
+interface AISkeletonIconProps {
   /**
    * Specify an optional className to add.
    */
@@ -23,16 +23,16 @@ interface AiSkeletonIconProps {
   style?: React.CSSProperties;
 }
 
-const AiSkeletonIcon = ({ className, ...rest }: AiSkeletonIconProps) => {
+const AISkeletonIcon = ({ className, ...rest }: AISkeletonIconProps) => {
   const prefix = usePrefix();
-  const AiSkeletonIconClasses = classNames(className, {
+  const AISkeletonIconClasses = classNames(className, {
     [`${prefix}--skeleton__icon--ai`]: true,
   });
 
-  return <SkeletonIcon className={AiSkeletonIconClasses} {...rest} />;
+  return <SkeletonIcon className={AISkeletonIconClasses} {...rest} />;
 };
 
-AiSkeletonIcon.propTypes = {
+AISkeletonIcon.propTypes = {
   /**
    * Specify an optional className to add.
    */
@@ -44,4 +44,4 @@ AiSkeletonIcon.propTypes = {
   style: PropTypes.object,
 };
 
-export default AiSkeletonIcon;
+export default AISkeletonIcon;
diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.stories.js b/packages/react/src/components/AISkeleton/AISkeletonPlaceholder.stories.js
similarity index 52%
rename from packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.stories.js
rename to packages/react/src/components/AISkeleton/AISkeletonPlaceholder.stories.js
index 5a6b323c50bf..d63fd1be4786 100644
--- a/packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.stories.js
+++ b/packages/react/src/components/AISkeleton/AISkeletonPlaceholder.stories.js
@@ -9,11 +9,13 @@
 
 import React from 'react';
 
-import AiSkeletonPlaceholder from './AiSkeletonPlaceholder';
+import AISkeletonPlaceholder from './AISkeletonPlaceholder';
 
 export default {
-  title: 'Experimental/unstable__AiSkeleton/AiSkeletonPlaceholder',
-  component: AiSkeletonPlaceholder,
+  title: 'Components/Skeleton',
+  component: AISkeletonPlaceholder,
 };
 
-export const Default = () => <AiSkeletonPlaceholder className="test" />;
+export const _AISkeletonPlaceholder = () => (
+  <AISkeletonPlaceholder className="test" />
+);
diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.tsx b/packages/react/src/components/AISkeleton/AISkeletonPlaceholder.tsx
similarity index 72%
rename from packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.tsx
rename to packages/react/src/components/AISkeleton/AISkeletonPlaceholder.tsx
index cc5e849a4fb9..300c76a36b16 100644
--- a/packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.tsx
+++ b/packages/react/src/components/AISkeleton/AISkeletonPlaceholder.tsx
@@ -11,29 +11,29 @@ import classNames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 import { SkeletonPlaceholder } from '../SkeletonPlaceholder';
 
-export interface AiSkeletonPlaceholderProps {
+export interface AISkeletonPlaceholderProps {
   /**
    * Add a custom class to the component to set the height and width
    */
   className?: string;
 }
 
-const AiSkeletonPlaceholder = ({
+const AISkeletonPlaceholder = ({
   className,
   ...other
-}: AiSkeletonPlaceholderProps) => {
+}: AISkeletonPlaceholderProps) => {
   const prefix = usePrefix();
-  const AiSkeletonPlaceholderClasses = classNames(
+  const AISkeletonPlaceholderClasses = classNames(
     { className, [`${prefix}--skeleton__placeholder--ai`]: true },
     className
   );
 
   return (
-    <SkeletonPlaceholder className={AiSkeletonPlaceholderClasses} {...other} />
+    <SkeletonPlaceholder className={AISkeletonPlaceholderClasses} {...other} />
   );
 };
 
-AiSkeletonPlaceholder.propTypes = {
+AISkeletonPlaceholder.propTypes = {
   /**
    * Add a custom class to the component
    * to set the height and width
@@ -41,4 +41,4 @@ AiSkeletonPlaceholder.propTypes = {
   className: PropTypes.string,
 };
 
-export default AiSkeletonPlaceholder;
+export default AISkeletonPlaceholder;
diff --git a/packages/react/src/components/AISkeleton/AISkeletonText.stories.js b/packages/react/src/components/AISkeleton/AISkeletonText.stories.js
new file mode 100644
index 000000000000..8ebf4553f70e
--- /dev/null
+++ b/packages/react/src/components/AISkeleton/AISkeletonText.stories.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+/* eslint-disable no-console */
+
+import React from 'react';
+
+import AISkeletonText from './AISkeletonText';
+
+export default {
+  title: 'Components/Skeleton',
+  component: AISkeletonText,
+};
+
+export const _AISkeletonText = () => <AISkeletonText />;
diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonText.tsx b/packages/react/src/components/AISkeleton/AISkeletonText.tsx
similarity index 91%
rename from packages/react/src/components/AiSkeleton/AiSkeletonText.tsx
rename to packages/react/src/components/AISkeleton/AISkeletonText.tsx
index 69a1b3a085e1..c17fb6030b48 100644
--- a/packages/react/src/components/AiSkeleton/AiSkeletonText.tsx
+++ b/packages/react/src/components/AISkeleton/AISkeletonText.tsx
@@ -11,7 +11,7 @@ import classNames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 import { SkeletonText } from '../SkeletonText';
 
-interface AiSkeletonTextProps {
+interface AISkeletonTextProps {
   /**
    * Specify an optional className to be applied to the container node.
    */
@@ -38,7 +38,7 @@ interface AiSkeletonTextProps {
   width?: string;
 }
 
-const AiSkeletonText = ({ className, ...rest }: AiSkeletonTextProps) => {
+const AISkeletonText = ({ className, ...rest }: AISkeletonTextProps) => {
   const prefix = usePrefix();
   const aiSkeletonTextClasses = classNames(className, {
     [`${prefix}--skeleton__text--ai`]: true,
@@ -47,7 +47,7 @@ const AiSkeletonText = ({ className, ...rest }: AiSkeletonTextProps) => {
   return <SkeletonText className={aiSkeletonTextClasses} {...rest} />;
 };
 
-AiSkeletonText.propTypes = {
+AISkeletonText.propTypes = {
   /**
    * Specify an optional className to be applied to the container node
    */
@@ -70,4 +70,4 @@ AiSkeletonText.propTypes = {
   width: PropTypes.string,
 };
 
-export default AiSkeletonText;
+export default AISkeletonText;
diff --git a/packages/react/src/components/AISkeleton/index.tsx b/packages/react/src/components/AISkeleton/index.tsx
new file mode 100644
index 000000000000..14a464b122be
--- /dev/null
+++ b/packages/react/src/components/AISkeleton/index.tsx
@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+import AISkeletonPlaceholder from './AISkeletonPlaceholder';
+import AISkeletonIcon from './AISkeletonIcon';
+import AISkeletonText from './AISkeletonText';
+
+export { AISkeletonText, AISkeletonIcon, AISkeletonPlaceholder };
diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonText.stories.js b/packages/react/src/components/AiSkeleton/AiSkeletonText.stories.js
deleted file mode 100644
index 5f75ea23a228..000000000000
--- a/packages/react/src/components/AiSkeleton/AiSkeletonText.stories.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-/* eslint-disable no-console */
-
-import React from 'react';
-
-import AiSkeletonText from './AiSkeletonText';
-
-export default {
-  title: 'Experimental/unstable__AiSkeleton/AiSkeletonText',
-  component: AiSkeletonText,
-};
-
-export const Default = () => <AiSkeletonText />;
-
-export const Playground = (args) => <AiSkeletonText {...args} />;
-
-Playground.args = {
-  heading: false,
-  paragraph: false,
-  width: '100%',
-  lineCount: 3,
-};
-
-Playground.argTypes = {
-  className: {
-    control: false,
-  },
-  heading: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  paragraph: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  width: {
-    control: {
-      type: 'text',
-    },
-  },
-  lineCount: {
-    control: {
-      type: 'number',
-    },
-  },
-};
diff --git a/packages/react/src/components/AiSkeleton/index.tsx b/packages/react/src/components/AiSkeleton/index.tsx
deleted file mode 100644
index 439f4ce25736..000000000000
--- a/packages/react/src/components/AiSkeleton/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-import AiSkeletonPlaceholder from './AiSkeletonPlaceholder';
-import AiSkeletonIcon from './AiSkeletonIcon';
-import AiSkeletonText from './AiSkeletonText';
-
-export { AiSkeletonText, AiSkeletonIcon, AiSkeletonPlaceholder };

From 6f7311d30c65a804786a2854a08345f570daac05 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 17 Jun 2024 17:33:39 -0400
Subject: [PATCH 09/17] chore(AILabel): rename more files, update test names

---
 .../{Slug => AILabel}/Slug-test.avt.e2e.js    | 24 ++++++-------
 .../{Slug => AILabel}/Slug-test.e2e.js        | 36 +++++++++----------
 .../{Slug-test.js => AILabel-test.js}         |  2 +-
 packages/react/src/index.js                   | 15 +++++---
 packages/react/src/index.ts                   | 14 +++++---
 .../components/data-table/_data-table.scss    |  4 +--
 .../expandable/_data-table-expandable.scss    |  4 +--
 .../scss/components/dropdown/_dropdown.scss   |  2 +-
 .../fluid-date-picker/_fluid-date-picker.scss |  4 ++-
 .../components/text-input/_text-input.scss    |  5 +--
 .../styles/scss/components/tile/_tile.scss    |  2 +-
 11 files changed, 64 insertions(+), 48 deletions(-)
 rename e2e/components/{Slug => AILabel}/Slug-test.avt.e2e.js (82%)
 rename e2e/components/{Slug => AILabel}/Slug-test.e2e.js (54%)
 rename packages/react/src/components/AILabel/__tests__/{Slug-test.js => AILabel-test.js} (99%)

diff --git a/e2e/components/Slug/Slug-test.avt.e2e.js b/e2e/components/AILabel/Slug-test.avt.e2e.js
similarity index 82%
rename from e2e/components/Slug/Slug-test.avt.e2e.js
rename to e2e/components/AILabel/Slug-test.avt.e2e.js
index 7da0e7057c96..0ddb691669ca 100644
--- a/e2e/components/Slug/Slug-test.avt.e2e.js
+++ b/e2e/components/AILabel/Slug-test.avt.e2e.js
@@ -10,22 +10,22 @@
 const { expect, test } = require('@playwright/test');
 const { visitStory } = require('../../test-utils/storybook');
 
-test.describe('@avt Slug', async () => {
+test.describe('@avt AILabel', () => {
   test('@avt-default-state', async ({ page }) => {
     await visitStory(page, {
-      component: 'Slug',
-      id: 'experimental-unstable-slug--default',
+      component: 'AILabel',
+      id: 'components-ailabel--default',
       globals: {
         theme: 'white',
       },
     });
-    await expect(page).toHaveNoACViolations('Slug');
+    await expect(page).toHaveNoACViolations('AILabel');
   });
 
   test.slow('@avt-advanced-states open state', async ({ page }) => {
     await visitStory(page, {
-      component: 'Slug',
-      id: 'experimental-unstable-slug--default',
+      component: 'AILabel',
+      id: 'components-ailabel--default',
       globals: {
         theme: 'white',
       },
@@ -34,24 +34,24 @@ test.describe('@avt Slug', async () => {
     await page.keyboard.press('Tab');
     await page.keyboard.press('Tab');
     await page.keyboard.press('Enter');
-    await expect(page).toHaveNoACViolations('Slug-open');
+    await expect(page).toHaveNoACViolations('AILabel-open');
   });
 
   test.slow('@avt-advanced-states ai form', async ({ page }) => {
     await visitStory(page, {
-      component: 'Slug',
-      id: 'experimental-unstable-slug-form--form-example',
+      component: 'AILabel',
+      id: 'components-form--with-ai-label',
       globals: {
         theme: 'white',
       },
     });
-    await expect(page).toHaveNoACViolations('Slug-form');
+    await expect(page).toHaveNoACViolations('AILabel-form');
   });
 
   test('@avt-keyboard-nav - slug', async ({ page }) => {
     await visitStory(page, {
       component: 'Search',
-      id: 'experimental-unstable-slug--callout',
+      id: 'components-ailabel--callout',
       globals: {
         theme: 'white',
       },
@@ -63,7 +63,7 @@ test.describe('@avt Slug', async () => {
     await expect(slug).toBeVisible();
     await expect(callout).toBeVisible();
 
-    // Tab to the Slug
+    // Tab to the AILabel
     await page.keyboard.press('Tab');
     await expect(slug).toBeFocused();
 
diff --git a/e2e/components/Slug/Slug-test.e2e.js b/e2e/components/AILabel/Slug-test.e2e.js
similarity index 54%
rename from e2e/components/Slug/Slug-test.e2e.js
rename to e2e/components/AILabel/Slug-test.e2e.js
index 31ada475cb88..80a791457486 100644
--- a/e2e/components/Slug/Slug-test.e2e.js
+++ b/e2e/components/AILabel/Slug-test.e2e.js
@@ -11,53 +11,53 @@ const { test } = require('@playwright/test'); // eslint-disable-line
 const { themes } = require('../../test-utils/env');
 const { snapshotStory } = require('../../test-utils/storybook'); // eslint-disable-line
 
-test.describe('Slug', () => {
+test.describe('AILabel', () => {
   themes.forEach((theme) => {
     test.describe(theme, () => {
       test('default @vrt', async ({ page }) => {
         await snapshotStory(page, {
-          component: 'Slug',
-          id: 'experimental-unstable-slug--default',
+          component: 'AILabel',
+          id: 'components-ailabel--default',
           theme,
         });
       });
 
-      test('slug callout @vrt', async ({ page }) => {
+      test('AILabel callout @vrt', async ({ page }) => {
         await snapshotStory(page, {
-          component: 'Slug',
-          id: 'experimental-unstable-slug--callout',
+          component: 'AILabel',
+          id: 'components-ailabel--callout',
           theme,
         });
       });
 
-      test('slug inside form @vrt', async ({ page }) => {
+      test('AILabel inside form @vrt', async ({ page }) => {
         await snapshotStory(page, {
-          component: 'Slug',
-          id: 'experimental-unstable-slug-form--form-example',
+          component: 'AILabel',
+          id: 'components-form--with-ai-label',
           theme,
         });
       });
 
-      test('slug inside DataTable column @vrt', async ({ page }) => {
+      test('AILabel inside DataTable column @vrt', async ({ page }) => {
         await snapshotStory(page, {
-          component: 'Slug',
-          id: 'experimental-unstable-slug-datatable--column-slug-sort',
+          component: 'AILabel',
+          id: 'components-datatable-withailabel--column-ai-label-sort',
           theme,
         });
       });
 
-      test('slug inside DataTable row @vrt', async ({ page }) => {
+      test('AILabel inside DataTable row @vrt', async ({ page }) => {
         await snapshotStory(page, {
-          component: 'Slug',
-          id: 'experimental-unstable-slug-datatable--slug-with-selection-and-expansion',
+          component: 'AILabel',
+          id: 'components-datatable-withailabel--ai-label-with-selection-and-expansion',
           theme,
         });
       });
 
-      test('slug inside Tile @vrt', async ({ page }) => {
+      test('AILabel inside Tile @vrt', async ({ page }) => {
         await snapshotStory(page, {
-          component: 'Slug',
-          id: 'experimental-unstable-slug-examples--tile',
+          component: 'AILabel',
+          id: 'components-tile--with-ai-label',
           theme,
         });
       });
diff --git a/packages/react/src/components/AILabel/__tests__/Slug-test.js b/packages/react/src/components/AILabel/__tests__/AILabel-test.js
similarity index 99%
rename from packages/react/src/components/AILabel/__tests__/Slug-test.js
rename to packages/react/src/components/AILabel/__tests__/AILabel-test.js
index 2987d94a0bd8..07acea6ac5a8 100644
--- a/packages/react/src/components/AILabel/__tests__/Slug-test.js
+++ b/packages/react/src/components/AILabel/__tests__/AILabel-test.js
@@ -11,7 +11,7 @@ import { render, screen } from '@testing-library/react';
 
 const prefix = 'cds';
 
-describe('Slug', () => {
+describe('AILabel', () => {
   describe('renders as expected - Component API', () => {
     it('should spread extra props onto the popover element', () => {
       const { container } = render(<AILabel data-testid="test" />);
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
index 0208c5ea964e..6a8853978784 100644
--- a/packages/react/src/index.js
+++ b/packages/react/src/index.js
@@ -318,10 +318,17 @@ export {
 } from './components/AILabel';
 
 export {
-  AiSkeletonText as unstable__AiSkeletonText,
-  AiSkeletonIcon as unstable__AiSkeletonIcon,
-  AiSkeletonPlaceholder as unstable__AiSkeletonPlaceholder,
-} from './components/AiSkeleton';
+  AISkeletonText,
+  AISkeletonIcon,
+  AISkeletonPlaceholder,
+} from './components/AISkeleton';
+// Keep until V12
+export {
+  AISkeletonText as unstable__AiSkeletonText,
+  AISkeletonIcon as unstable__AiSkeletonIcon,
+  AISkeletonPlaceholder as unstable__AiSkeletonPlaceholder,
+} from './components/AISkeleton';
+
 export {
   ChatButton as unstable__ChatButton,
   ChatButtonSkeleton as unstable__ChatButtonSkeleton,
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 3a2cf7d30e22..cb0af6403997 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -165,10 +165,16 @@ export {
   ChatButtonSkeleton as unstable__ChatButtonSkeleton,
 } from './components/ChatButton';
 export {
-  AiSkeletonText as unstable__AiSkeletonText,
-  AiSkeletonIcon as unstable__AiSkeletonIcon,
-  AiSkeletonPlaceholder as unstable__AiSkeletonPlaceholder,
-} from './components/AiSkeleton';
+  AISkeletonText,
+  AISkeletonIcon,
+  AISkeletonPlaceholder,
+} from './components/AISkeleton';
+// Keep until V12
+export {
+  AISkeletonText as unstable__AiSkeletonText,
+  AISkeletonIcon as unstable__AiSkeletonIcon,
+  AISkeletonPlaceholder as unstable__AiSkeletonPlaceholder,
+} from './components/AISkeleton';
 export * from './components/Stack';
 export * from './components/Tooltip';
 export {
diff --git a/packages/styles/scss/components/data-table/_data-table.scss b/packages/styles/scss/components/data-table/_data-table.scss
index a111e567ede6..95db6f6bd0ce 100644
--- a/packages/styles/scss/components/data-table/_data-table.scss
+++ b/packages/styles/scss/components/data-table/_data-table.scss
@@ -1012,7 +1012,7 @@
     background-attachment: fixed;
   }
 
-  tr.#{$prefix}--parent-row.cds--data-table--selected.#{$prefix}--data-table--slug-row,
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row,
   .#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row,
   tr.#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row
     + .#{$prefix}--expandable-row {
@@ -1031,7 +1031,7 @@
     border-block-end-color: $border-subtle;
   }
 
-  tr.#{$prefix}--expandable-row.cds--data-table--selected.#{$prefix}--data-table--slug-row[data-parent-row]
+  tr.#{$prefix}--expandable-row.#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row[data-parent-row]
     > td:not(.#{$prefix}--table-expand):not(
       .#{$prefix}--table-column-checkbox
     ):not(.#{$prefix}--table-column-slug) {
diff --git a/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss b/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss
index 0dccf847ff1f..661bee49e262 100644
--- a/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss
+++ b/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss
@@ -464,7 +464,7 @@
   .#{$prefix}--parent-row .#{$prefix}--table-column-slug,
   .#{$prefix}--parent-row
     .#{$prefix}--table-column-slug
-    + td.cds--table-expand[data-previous-value='collapsed'] {
+    + td.#{$prefix}--table-expand[data-previous-value='collapsed'] {
     box-shadow: none;
   }
 
@@ -472,7 +472,7 @@
     .#{$prefix}--table-column-slug,
   .#{$prefix}--parent-row.#{$prefix}--expandable-row
     .#{$prefix}--table-column-slug
-    + td.cds--table-expand[data-previous-value='collapsed'] {
+    + td.#{$prefix}--table-expand[data-previous-value='collapsed'] {
     border-block-end: 1px solid transparent;
   }
 
diff --git a/packages/styles/scss/components/dropdown/_dropdown.scss b/packages/styles/scss/components/dropdown/_dropdown.scss
index 9005e8f05c62..b10acdcd364b 100644
--- a/packages/styles/scss/components/dropdown/_dropdown.scss
+++ b/packages/styles/scss/components/dropdown/_dropdown.scss
@@ -93,7 +93,7 @@
     border-block-end-color: $border-subtle;
   }
 
-  .#{$prefix}--dropdown--open .cds--list-box__field {
+  .#{$prefix}--dropdown--open .#{$prefix}--list-box__field {
     outline: none;
   }
 
diff --git a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
index 8240d2a921ba..a8155ea4761c 100644
--- a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
+++ b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
@@ -417,7 +417,9 @@
     .#{$prefix}--date-picker-input__wrapper--slug:not(
       :has(.#{$prefix}--slug--revert)
     )
-    .#{$prefix}--date-picker__input:not(.cds--date-picker__input--invalid) {
+    .#{$prefix}--date-picker__input:not(
+      .#{$prefix}--date-picker__input--invalid
+    ) {
     border-block-end-color: $ai-border-strong;
   }
 
diff --git a/packages/styles/scss/components/text-input/_text-input.scss b/packages/styles/scss/components/text-input/_text-input.scss
index 96b0ea9c74bb..587ecc9188d6 100644
--- a/packages/styles/scss/components/text-input/_text-input.scss
+++ b/packages/styles/scss/components/text-input/_text-input.scss
@@ -398,14 +398,15 @@
     flex-direction: column;
   }
 
-  .#{$prefix}--text-input-wrapper--inline .cds--form-requirement {
+  .#{$prefix}--text-input-wrapper--inline .#{$prefix}--form-requirement {
     display: block;
     overflow: visible;
     font-weight: 400;
     max-block-size: convert.to-rem(200px);
   }
 
-  .#{$prefix}--text-input-wrapper--inline--invalid .cds--form-requirement {
+  .#{$prefix}--text-input-wrapper--inline--invalid
+    .#{$prefix}--form-requirement {
     color: $text-error;
   }
 
diff --git a/packages/styles/scss/components/tile/_tile.scss b/packages/styles/scss/components/tile/_tile.scss
index 8566a21ed40e..9125bc2e9bd9 100644
--- a/packages/styles/scss/components/tile/_tile.scss
+++ b/packages/styles/scss/components/tile/_tile.scss
@@ -502,7 +502,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
-    .#{$prefix}--slug:has(> .cds--popover--open) {
+    .#{$prefix}--slug:has(> .#{$prefix}--popover--open) {
     z-index: 2;
   }
 

From ea5ec5bab173eb3d590c01f01bcde3643df01110 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 18 Jun 2024 10:31:46 -0400
Subject: [PATCH 10/17] chore(AILabel): add copyright banner, remove some
 playground controls

---
 e2e/components/AILabel/Slug-test.avt.e2e.js   |  2 +-
 e2e/components/AILabel/Slug-test.e2e.js       |  2 +-
 .../src/components/AILabel/AILabel.stories.js | 39 +++++++++++++++++--
 .../AILabel/__tests__/AILabel-test.js         |  2 +-
 .../src/components/AILabel/ailabel-story.scss |  7 ++++
 .../react/src/components/AILabel/index.js     |  4 +-
 6 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/e2e/components/AILabel/Slug-test.avt.e2e.js b/e2e/components/AILabel/Slug-test.avt.e2e.js
index 0ddb691669ca..10db0cd80729 100644
--- a/e2e/components/AILabel/Slug-test.avt.e2e.js
+++ b/e2e/components/AILabel/Slug-test.avt.e2e.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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.
diff --git a/e2e/components/AILabel/Slug-test.e2e.js b/e2e/components/AILabel/Slug-test.e2e.js
index 80a791457486..ac94f60eb1d6 100644
--- a/e2e/components/AILabel/Slug-test.e2e.js
+++ b/e2e/components/AILabel/Slug-test.e2e.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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.
diff --git a/packages/react/src/components/AILabel/AILabel.stories.js b/packages/react/src/components/AILabel/AILabel.stories.js
index d175547d9202..8b31788753d6 100644
--- a/packages/react/src/components/AILabel/AILabel.stories.js
+++ b/packages/react/src/components/AILabel/AILabel.stories.js
@@ -1,12 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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.
  */
 
-/* eslint-disable no-console */
-
 import React from 'react';
 
 import { AILabel, AILabelContent, AILabelActions } from '.';
@@ -318,6 +316,11 @@ Callout.argTypes = {
       disable: true,
     },
   },
+  AILabelContent: {
+    table: {
+      disable: true,
+    },
+  },
   aiText: {
     table: {
       disable: true,
@@ -449,4 +452,34 @@ Playground.argTypes = {
     ],
     control: { type: 'select' },
   },
+  AILabelContent: {
+    table: {
+      disable: true,
+    },
+  },
+  children: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  onRevertClick: {
+    table: {
+      disable: true,
+    },
+  },
+  revertActive: {
+    table: {
+      disable: true,
+    },
+  },
+  revertLabel: {
+    table: {
+      disable: true,
+    },
+  },
 };
diff --git a/packages/react/src/components/AILabel/__tests__/AILabel-test.js b/packages/react/src/components/AILabel/__tests__/AILabel-test.js
index 07acea6ac5a8..a5093bf825be 100644
--- a/packages/react/src/components/AILabel/__tests__/AILabel-test.js
+++ b/packages/react/src/components/AILabel/__tests__/AILabel-test.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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.
diff --git a/packages/react/src/components/AILabel/ailabel-story.scss b/packages/react/src/components/AILabel/ailabel-story.scss
index 6af2dee0b80d..181c2edd6123 100644
--- a/packages/react/src/components/AILabel/ailabel-story.scss
+++ b/packages/react/src/components/AILabel/ailabel-story.scss
@@ -1,3 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 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/type';
 @use '@carbon/styles/scss/theme';
 @use '@carbon/react/scss/components/tile';
diff --git a/packages/react/src/components/AILabel/index.js b/packages/react/src/components/AILabel/index.js
index 13261f1b0c70..62e4982d9af8 100644
--- a/packages/react/src/components/AILabel/index.js
+++ b/packages/react/src/components/AILabel/index.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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.
@@ -146,7 +146,7 @@ export const AILabel = React.forwardRef(function AILabel(
             <span className={`${prefix}--slug__text`}>{aiText}</span>
             {aiTextLabel && (
               <span className={`${prefix}--slug__additional-text`}>
-                {aiTextLabel}
+                {kind === 'inline' && aiTextLabel}
               </span>
             )}
           </ToggletipButton>

From 841bda729bf3e6b5835ae9c39ce432c07d06b27d Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 18 Jun 2024 10:36:21 -0400
Subject: [PATCH 11/17] test(AILabel): update tests to use AILabel

---
 .../components/Checkbox/__tests__/Checkbox-test.js |  4 ++--
 .../components/CheckboxGroup/CheckboxGroup-test.js |  4 ++--
 .../react/src/components/ComboBox/ComboBox-test.js |  6 ++++--
 .../components/ComposedModal/ComposedModal-test.js |  4 ++--
 .../src/components/DatePicker/DatePicker-test.js   |  4 ++--
 .../react/src/components/Dropdown/Dropdown-test.js |  6 ++++--
 packages/react/src/components/Modal/Modal-test.js  |  4 ++--
 .../__tests__/FilterableMultiSelect-test.js        |  4 ++--
 .../MultiSelect/__tests__/MultiSelect-test.js      |  4 ++--
 .../NumberInput/__tests__/NumberInput-test.js      |  4 ++--
 .../RadioButton/__tests__/RadioButton-test.js      |  4 ++--
 .../RadioButtonGroup/RadioButtonGroup-test.js      |  4 ++--
 .../src/components/Select/__tests__/Select-test.js |  4 ++--
 packages/react/src/components/Tag/Tag-test.js      |  4 ++--
 .../components/TextArea/__tests__/TextArea-test.js |  8 ++++++--
 .../TextInput/__tests__/TextInput-test.js          |  8 ++++++--
 packages/react/src/components/Tile/Tile-test.js    | 14 +++++++++-----
 17 files changed, 53 insertions(+), 37 deletions(-)

diff --git a/packages/react/src/components/Checkbox/__tests__/Checkbox-test.js b/packages/react/src/components/Checkbox/__tests__/Checkbox-test.js
index a92359c4e473..274ed2489a39 100644
--- a/packages/react/src/components/Checkbox/__tests__/Checkbox-test.js
+++ b/packages/react/src/components/Checkbox/__tests__/Checkbox-test.js
@@ -9,7 +9,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import Checkbox from '../Checkbox';
-import { Slug } from '../../Slug';
+import { AILabel } from '../../AILabel';
 
 const prefix = 'cds';
 
@@ -205,7 +205,7 @@ describe('Checkbox', () => {
         defaultChecked
         labelText="Checkbox label"
         id="checkbox-label-1"
-        slug={<Slug />}
+        slug={<AILabel />}
       />
     );
 
diff --git a/packages/react/src/components/CheckboxGroup/CheckboxGroup-test.js b/packages/react/src/components/CheckboxGroup/CheckboxGroup-test.js
index 3426a611efe3..48daafcba87c 100644
--- a/packages/react/src/components/CheckboxGroup/CheckboxGroup-test.js
+++ b/packages/react/src/components/CheckboxGroup/CheckboxGroup-test.js
@@ -9,7 +9,7 @@ import React from 'react';
 import CheckboxGroup from '../CheckboxGroup';
 import Checkbox from '../Checkbox/Checkbox';
 import { render, screen } from '@testing-library/react';
-import { Slug } from '../Slug';
+import { AILabel } from '../AILabel';
 
 const prefix = 'cds';
 
@@ -155,7 +155,7 @@ describe('CheckboxGroup', () => {
       <CheckboxGroup
         className="some-class"
         legendText="Checkbox heading"
-        slug={<Slug />}
+        slug={<AILabel />}
       />
     );
 
diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js
index 69308e762dc8..c9eb55a10dcf 100644
--- a/packages/react/src/components/ComboBox/ComboBox-test.js
+++ b/packages/react/src/components/ComboBox/ComboBox-test.js
@@ -19,7 +19,7 @@ import {
 import ComboBox from '../ComboBox';
 import { act } from 'react';
 
-import { Slug } from '../Slug';
+import { AILabel } from '../AILabel';
 
 const findInputNode = () => screen.getByRole('combobox');
 const openMenu = async () => {
@@ -146,7 +146,9 @@ describe('ComboBox', () => {
   });
 
   it('should respect slug prop', async () => {
-    const { container } = render(<ComboBox {...mockProps} slug={<Slug />} />);
+    const { container } = render(
+      <ComboBox {...mockProps} slug={<AILabel />} />
+    );
     await waitForPosition();
     expect(container.firstChild).toHaveClass(
       `${prefix}--list-box__wrapper--slug`
diff --git a/packages/react/src/components/ComposedModal/ComposedModal-test.js b/packages/react/src/components/ComposedModal/ComposedModal-test.js
index 3db0bff2a4b9..9d0983cfe066 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal-test.js
+++ b/packages/react/src/components/ComposedModal/ComposedModal-test.js
@@ -14,7 +14,7 @@ import ComposedModal, { ModalBody } from './ComposedModal';
 import { ModalHeader } from './ModalHeader';
 import { ModalFooter } from './ModalFooter';
 import { TextInput } from '../../';
-import { Slug } from '../Slug';
+import { AILabel } from '../AILabel';
 
 const prefix = 'cds';
 
@@ -235,7 +235,7 @@ describe('ComposedModal', () => {
 
     it('should respect slug prop', () => {
       const { container } = render(
-        <ComposedModal open slug={<Slug />}>
+        <ComposedModal open slug={<AILabel />}>
           <ModalHeader>Modal header</ModalHeader>
           <ModalBody>This is the modal body content</ModalBody>
           <ModalFooter
diff --git a/packages/react/src/components/DatePicker/DatePicker-test.js b/packages/react/src/components/DatePicker/DatePicker-test.js
index 9e6604577537..f9f73570e4a2 100644
--- a/packages/react/src/components/DatePicker/DatePicker-test.js
+++ b/packages/react/src/components/DatePicker/DatePicker-test.js
@@ -10,7 +10,7 @@ import DatePicker from './DatePicker';
 import DatePickerInput from '../DatePickerInput';
 import { render, screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Slug } from '../Slug';
+import { AILabel } from '../AILabel';
 
 const prefix = 'cds';
 
@@ -203,7 +203,7 @@ describe('DatePicker', () => {
         placeholder="mm/dd/yyyy"
         labelText="Date Picker label"
         data-testid="input-value"
-        slug={<Slug />}
+        slug={<AILabel />}
       />
     );
 
diff --git a/packages/react/src/components/Dropdown/Dropdown-test.js b/packages/react/src/components/Dropdown/Dropdown-test.js
index bfe9a8a8560e..8efaaba4444a 100644
--- a/packages/react/src/components/Dropdown/Dropdown-test.js
+++ b/packages/react/src/components/Dropdown/Dropdown-test.js
@@ -17,7 +17,7 @@ import {
 } from '../ListBox/test-helpers';
 import Dropdown from '../Dropdown';
 import DropdownSkeleton from '../Dropdown/Dropdown.Skeleton';
-import { Slug } from '../Slug';
+import { AILabel } from '../AILabel';
 
 const prefix = 'cds';
 
@@ -192,7 +192,9 @@ describe('Dropdown', () => {
     });
 
     it('should respect slug prop', () => {
-      const { container } = render(<Dropdown {...mockProps} slug={<Slug />} />);
+      const { container } = render(
+        <Dropdown {...mockProps} slug={<AILabel />} />
+      );
       expect(container.firstChild).toHaveClass(
         `${prefix}--list-box__wrapper--slug`
       );
diff --git a/packages/react/src/components/Modal/Modal-test.js b/packages/react/src/components/Modal/Modal-test.js
index 7e0f65d859c1..c610007b48fc 100644
--- a/packages/react/src/components/Modal/Modal-test.js
+++ b/packages/react/src/components/Modal/Modal-test.js
@@ -11,7 +11,7 @@ import userEvent from '@testing-library/user-event';
 
 import Modal from './Modal';
 import TextInput from '../TextInput';
-import { Slug } from '../Slug';
+import { AILabel } from '../AILabel';
 
 const prefix = 'cds';
 
@@ -374,7 +374,7 @@ describe('Modal', () => {
         danger
         primaryButtonText="Danger button text"
         data-testid="modal-5"
-        slug={<Slug />}
+        slug={<AILabel />}
       />
     );
 
diff --git a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
index 9a4185a207cc..842dc6abae6c 100644
--- a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
@@ -16,7 +16,7 @@ import {
   generateItems,
   generateGenericItem,
 } from '../../ListBox/test-helpers';
-import { Slug } from '../../Slug';
+import { AILabel } from '../../AILabel';
 
 const prefix = 'cds';
 
@@ -153,7 +153,7 @@ describe('FilterableMultiSelect', () => {
 
   it('should respect slug prop', () => {
     const { container } = render(
-      <FilterableMultiSelect {...mockProps} slug={<Slug />} />
+      <FilterableMultiSelect {...mockProps} slug={<AILabel />} />
     );
     expect(container.firstChild).toHaveClass(
       `${prefix}--list-box__wrapper--slug`
diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
index 819d65bacac4..a0bc921cdfcc 100644
--- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
@@ -11,7 +11,7 @@ import React from 'react';
 import MultiSelect from '../';
 import { generateItems, generateGenericItem } from '../../ListBox/test-helpers';
 import userEvent from '@testing-library/user-event';
-import { Slug } from '../../Slug';
+import { AILabel } from '../../AILabel';
 
 const prefix = 'cds';
 
@@ -574,7 +574,7 @@ describe('MultiSelect', () => {
       const items = generateItems(4, generateGenericItem);
       const label = 'test-label';
       const { container } = render(
-        <MultiSelect id="test" label={label} items={items} slug={<Slug />} />
+        <MultiSelect id="test" label={label} items={items} slug={<AILabel />} />
       );
       expect(container.firstChild).toHaveClass(
         `${prefix}--list-box__wrapper--slug`
diff --git a/packages/react/src/components/NumberInput/__tests__/NumberInput-test.js b/packages/react/src/components/NumberInput/__tests__/NumberInput-test.js
index 531627b5faee..502ba605eae8 100644
--- a/packages/react/src/components/NumberInput/__tests__/NumberInput-test.js
+++ b/packages/react/src/components/NumberInput/__tests__/NumberInput-test.js
@@ -11,7 +11,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { NumberInput } from '../NumberInput';
-import { Slug } from '../../Slug';
+import { AILabel } from '../../AILabel';
 
 function translateWithId(id) {
   if (id === 'increment.number') {
@@ -70,7 +70,7 @@ describe('NumberInput', () => {
   });
 
   it('should respect slug prop', () => {
-    render(<NumberInput label="test-label" id="test" slug={<Slug />} />);
+    render(<NumberInput label="test-label" id="test" slug={<AILabel />} />);
 
     expect(
       screen.getByRole('button', { name: 'AI - Show information' })
diff --git a/packages/react/src/components/RadioButton/__tests__/RadioButton-test.js b/packages/react/src/components/RadioButton/__tests__/RadioButton-test.js
index e3b7a7610172..0f228936ef62 100644
--- a/packages/react/src/components/RadioButton/__tests__/RadioButton-test.js
+++ b/packages/react/src/components/RadioButton/__tests__/RadioButton-test.js
@@ -9,7 +9,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import RadioButton from '../RadioButton';
-import { Slug } from '../../Slug';
+import { AILabel } from '../../AILabel';
 
 const prefix = 'cds';
 
@@ -142,7 +142,7 @@ describe('RadioButton', () => {
         name="test-name"
         value="test-value"
         labelText="test-label"
-        slug={<Slug />}
+        slug={<AILabel />}
       />
     );
 
diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-test.js b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-test.js
index 3cf101d18b41..625bb4383b0a 100644
--- a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-test.js
+++ b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-test.js
@@ -10,7 +10,7 @@ import userEvent from '@testing-library/user-event';
 import React from 'react';
 import RadioButtonGroup from './RadioButtonGroup';
 import RadioButton from '../RadioButton';
-import { Slug } from '../Slug';
+import { AILabel } from '../AILabel';
 
 const prefix = 'cds';
 
@@ -216,7 +216,7 @@ describe('RadioButtonGroup', () => {
 
     it('should respect slug prop', () => {
       const { container } = render(
-        <RadioButtonGroup slug={<Slug />} name="test" legendText="test">
+        <RadioButtonGroup slug={<AILabel />} name="test" legendText="test">
           <RadioButton labelText="test-1" value={1} />
           <RadioButton labelText="test-0" value={0} />
         </RadioButtonGroup>
diff --git a/packages/react/src/components/Select/__tests__/Select-test.js b/packages/react/src/components/Select/__tests__/Select-test.js
index 1d141584786e..d146a59ed08c 100644
--- a/packages/react/src/components/Select/__tests__/Select-test.js
+++ b/packages/react/src/components/Select/__tests__/Select-test.js
@@ -11,7 +11,7 @@ import SelectItem from '../../SelectItem';
 import SelectSkeleton from '../../Select/Select.Skeleton';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
-import { Slug } from '../../Slug';
+import { AILabel } from '../../AILabel';
 
 const prefix = 'cds';
 
@@ -243,7 +243,7 @@ describe('Select', () => {
 
     it('should respect slug prop', () => {
       const { container } = render(
-        <Select id="select" labelText="Select" slug={<Slug />} />
+        <Select id="select" labelText="Select" slug={<AILabel />} />
       );
 
       expect(container.firstChild.firstChild).toHaveClass(
diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js
index 69c5e1d3ad1a..0424fd687a07 100644
--- a/packages/react/src/components/Tag/Tag-test.js
+++ b/packages/react/src/components/Tag/Tag-test.js
@@ -10,7 +10,7 @@ import { render, screen } from '@testing-library/react';
 import React from 'react';
 import Tag from './';
 import DismissibleTag from './DismissibleTag';
-import { Slug } from '../Slug';
+import { AILabel } from '../AILabel';
 
 describe('Tag', () => {
   describe('automated accessibility testing', () => {
@@ -57,7 +57,7 @@ describe('Tag', () => {
   });
 
   it('should respect slug prop', () => {
-    render(<Tag type="red" slug={<Slug />} />);
+    render(<Tag type="red" slug={<AILabel />} />);
 
     expect(
       screen.getByRole('button', { name: 'AI - Show information' })
diff --git a/packages/react/src/components/TextArea/__tests__/TextArea-test.js b/packages/react/src/components/TextArea/__tests__/TextArea-test.js
index 2a9c3726efd9..53c56a772520 100644
--- a/packages/react/src/components/TextArea/__tests__/TextArea-test.js
+++ b/packages/react/src/components/TextArea/__tests__/TextArea-test.js
@@ -10,7 +10,7 @@ import TextArea from '../TextArea';
 import userEvent from '@testing-library/user-event';
 import { fireEvent, waitFor } from '@testing-library/react';
 import { render, screen, createEvent } from '@testing-library/react';
-import { Slug } from '../../Slug';
+import { AILabel } from '../../AILabel';
 
 const prefix = 'cds';
 
@@ -197,7 +197,11 @@ describe('TextArea', () => {
 
     it('should respect slug prop', () => {
       render(
-        <TextArea id="textarea-1" labelText="TextArea label" slug={<Slug />} />
+        <TextArea
+          id="textarea-1"
+          labelText="TextArea label"
+          slug={<AILabel />}
+        />
       );
       expect(
         screen.getByRole('button', { name: 'AI - Show information' })
diff --git a/packages/react/src/components/TextInput/__tests__/TextInput-test.js b/packages/react/src/components/TextInput/__tests__/TextInput-test.js
index 9c4c3a786679..a3cfbbf48198 100644
--- a/packages/react/src/components/TextInput/__tests__/TextInput-test.js
+++ b/packages/react/src/components/TextInput/__tests__/TextInput-test.js
@@ -9,7 +9,7 @@ import React from 'react';
 import TextInput from '../TextInput';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
-import { Slug } from '../../Slug';
+import { AILabel } from '../../AILabel';
 
 const prefix = 'cds';
 
@@ -228,7 +228,11 @@ describe('TextInput', () => {
 
     it('should respect slug prop', () => {
       render(
-        <TextInput id="textarea-1" labelText="TextArea label" slug={<Slug />} />
+        <TextInput
+          id="textarea-1"
+          labelText="TextArea label"
+          slug={<AILabel />}
+        />
       );
       expect(
         screen.getByRole('button', { name: 'AI - Show information' })
diff --git a/packages/react/src/components/Tile/Tile-test.js b/packages/react/src/components/Tile/Tile-test.js
index 9d836db954a7..4eaa14d7f1f4 100644
--- a/packages/react/src/components/Tile/Tile-test.js
+++ b/packages/react/src/components/Tile/Tile-test.js
@@ -18,7 +18,7 @@ import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
 import Link from '../Link';
 import { Add } from '@carbon/icons-react';
-import { Slug } from '../Slug';
+import { AILabel } from '../AILabel';
 
 const prefix = 'cds';
 
@@ -49,7 +49,7 @@ describe('Tile', () => {
     });
 
     it('should respect slug prop', () => {
-      render(<Tile slug={<Slug />}>Default tile</Tile>);
+      render(<Tile slug={<AILabel />}>Default tile</Tile>);
       expect(
         screen.getByRole('button', { name: 'AI - Show information' })
       ).toBeInTheDocument();
@@ -91,7 +91,7 @@ describe('Tile', () => {
     });
 
     it('should respect slug prop', () => {
-      render(<ClickableTile slug={<Slug />}>Default tile</ClickableTile>);
+      render(<ClickableTile slug={<AILabel />}>Default tile</ClickableTile>);
 
       // eslint-disable-next-line testing-library/no-node-access
       expect(document.querySelector('svg')).toHaveClass(
@@ -174,7 +174,11 @@ describe('Tile', () => {
 
     it('should respect slug prop', () => {
       render(
-        <SelectableTile slug={<Slug />} id="tile-1" name="tiles" value="value">
+        <SelectableTile
+          slug={<AILabel />}
+          id="tile-1"
+          name="tiles"
+          value="value">
           Default tile
         </SelectableTile>
       );
@@ -311,7 +315,7 @@ describe('Tile', () => {
 
     it('should respect slug prop', () => {
       render(
-        <ExpandableTile slug={<Slug />}>
+        <ExpandableTile slug={<AILabel />}>
           <TileAboveTheFoldContent>
             <div>TestAbove</div>
           </TileAboveTheFoldContent>

From 9531f4b82faf05e57537107bdc7ecf4fd706b09f Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 18 Jun 2024 11:27:16 -0400
Subject: [PATCH 12/17] test(AILabel): add additional tests around aiTextLabel

---
 .../__snapshots__/PublicAPI-test.js.snap      | 152 +++++++++++++++++-
 packages/react/src/__tests__/index-test.js    |   6 +
 .../AILabel/__tests__/AILabel-test.js         |  19 ++-
 .../react/src/components/AILabel/index.js     |   4 +-
 4 files changed, 173 insertions(+), 8 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 57ad9ac6f903..f8b37ea1ad0f 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2,6 +2,152 @@
 
 exports[`Public API should only change with a semver change 1`] = `
 Map {
+  "AILabel" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "propTypes": Object {
+      "AILabelContent": Object {
+        "type": "node",
+      },
+      "aiText": Object {
+        "type": "string",
+      },
+      "aiTextLabel": Object {
+        "type": "string",
+      },
+      "align": Object {
+        "args": Array [
+          Array [
+            "top",
+            "top-left",
+            "top-start",
+            "top-right",
+            "top-end",
+            "bottom",
+            "bottom-left",
+            "bottom-start",
+            "bottom-right",
+            "bottom-end",
+            "left",
+            "left-bottom",
+            "left-end",
+            "left-top",
+            "left-start",
+            "right",
+            "right-bottom",
+            "right-end",
+            "right-top",
+            "right-start",
+          ],
+        ],
+        "type": "oneOf",
+      },
+      "autoAlign": Object {
+        "type": "bool",
+      },
+      "children": Object {
+        "type": "node",
+      },
+      "className": Object {
+        "type": "string",
+      },
+      "kind": Object {
+        "args": Array [
+          Array [
+            "default",
+            "inline",
+          ],
+        ],
+        "type": "oneOf",
+      },
+      "onRevertClick": Object {
+        "type": "func",
+      },
+      "revertActive": Object {
+        "type": "bool",
+      },
+      "revertLabel": Object {
+        "type": "string",
+      },
+      "size": Object {
+        "args": Array [
+          Array [
+            "mini",
+            "2xs",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+          ],
+        ],
+        "type": "oneOf",
+      },
+      "slugLabel": Object {
+        "type": "string",
+      },
+    },
+    "render": [Function],
+  },
+  "AILabelActions" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "propTypes": Object {
+      "children": Object {
+        "type": "node",
+      },
+      "className": Object {
+        "type": "string",
+      },
+    },
+    "render": [Function],
+  },
+  "AILabelContent" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "propTypes": Object {
+      "children": Object {
+        "type": "node",
+      },
+      "className": Object {
+        "type": "string",
+      },
+    },
+    "render": [Function],
+  },
+  "AISkeletonIcon" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "style": Object {
+        "type": "object",
+      },
+    },
+  },
+  "AISkeletonPlaceholder" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+    },
+  },
+  "AISkeletonText" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "heading": Object {
+        "type": "bool",
+      },
+      "lineCount": Object {
+        "type": "number",
+      },
+      "paragraph": Object {
+        "type": "bool",
+      },
+      "width": Object {
+        "type": "string",
+      },
+    },
+  },
   "Accordion" => Object {
     "propTypes": Object {
       "align": Object {
@@ -10625,6 +10771,9 @@ Map {
   "unstable__Slug" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
+      "AILabelContent": Object {
+        "type": "node",
+      },
       "aiText": Object {
         "type": "string",
       },
@@ -10699,9 +10848,6 @@ Map {
         ],
         "type": "oneOf",
       },
-      "slugContent": Object {
-        "type": "node",
-      },
       "slugLabel": Object {
         "type": "string",
       },
diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
index eee63d0fe074..56d8d58118f7 100644
--- a/packages/react/src/__tests__/index-test.js
+++ b/packages/react/src/__tests__/index-test.js
@@ -15,6 +15,12 @@ describe('Carbon Components React', () => {
   it('should export components', () => {
     expect(Object.keys(Carbon).sort()).toMatchInlineSnapshot(`
       Array [
+        "AILabel",
+        "AILabelActions",
+        "AILabelContent",
+        "AISkeletonIcon",
+        "AISkeletonPlaceholder",
+        "AISkeletonText",
         "Accordion",
         "AccordionItem",
         "AccordionSkeleton",
diff --git a/packages/react/src/components/AILabel/__tests__/AILabel-test.js b/packages/react/src/components/AILabel/__tests__/AILabel-test.js
index a5093bf825be..c3160b6337c3 100644
--- a/packages/react/src/components/AILabel/__tests__/AILabel-test.js
+++ b/packages/react/src/components/AILabel/__tests__/AILabel-test.js
@@ -40,10 +40,23 @@ describe('AILabel', () => {
       expect(screen.getByText('IA')).toBeInTheDocument();
     });
 
-    it('should respect aiTextLabel prop', () => {
-      render(<AILabel aiTextLabel="Test text" />);
+    it('should respect aiTextLabel prop when kind is inline', () => {
+      const wrapper = render(<AILabel kind="inline" aiTextLabel="Test text" />);
 
-      expect(screen.getByText('Test text')).toBeInTheDocument();
+      const additionalTextSpan = wrapper.container.querySelector(
+        `.${prefix}--slug__additional-text`
+      );
+      expect(additionalTextSpan).toBeInTheDocument();
+      expect(additionalTextSpan).toHaveTextContent('Test text');
+    });
+
+    it('should not populate aiTextLabel prop when kind is not inline', () => {
+      const wrapper = render(<AILabel aiTextLabel="Test text" />);
+
+      const additionalTextSpan = wrapper.container.querySelector(
+        `.${prefix}--slug__additional-text`
+      );
+      expect(additionalTextSpan).not.toBeInTheDocument();
     });
 
     it('should respect align prop when autoAlign is false', () => {
diff --git a/packages/react/src/components/AILabel/index.js b/packages/react/src/components/AILabel/index.js
index 62e4982d9af8..591e60155a50 100644
--- a/packages/react/src/components/AILabel/index.js
+++ b/packages/react/src/components/AILabel/index.js
@@ -144,9 +144,9 @@ export const AILabel = React.forwardRef(function AILabel(
         <Toggletip align={align} autoAlign={autoAlign} {...rest}>
           <ToggletipButton className={aiLabelButtonClasses} label={ariaLabel}>
             <span className={`${prefix}--slug__text`}>{aiText}</span>
-            {aiTextLabel && (
+            {kind === 'inline' && aiTextLabel && (
               <span className={`${prefix}--slug__additional-text`}>
-                {kind === 'inline' && aiTextLabel}
+                {aiTextLabel}
               </span>
             )}
           </ToggletipButton>

From de3eca6f0954550b71252c9564baf590f87200c2 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Thu, 27 Jun 2024 11:08:08 -0400
Subject: [PATCH 13/17] fix(AILabel): deprecate aiTextLabel and SlugLabel

---
 .../react/src/components/AILabel/AILabel.mdx  |  8 ++--
 .../src/components/AILabel/AILabel.stories.js | 13 +++++--
 .../AILabel/__tests__/AILabel-test.js         |  4 +-
 .../react/src/components/AILabel/index.js     | 38 +++++++++++++++----
 .../MultiSelect/MultiSelect.stories.js        |  3 --
 5 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/packages/react/src/components/AILabel/AILabel.mdx b/packages/react/src/components/AILabel/AILabel.mdx
index 64b2bd87c5c5..6859d7765a53 100644
--- a/packages/react/src/components/AILabel/AILabel.mdx
+++ b/packages/react/src/components/AILabel/AILabel.mdx
@@ -95,7 +95,7 @@ different languages.
 When using the `inline` variant, you can add text adjacent to the AI label with
 the `aiTextLabel` prop.
 
-<AILabel kind="inline" aiTextLabel="Text goes here" className="sbdocs-slug">
+<AILabel kind="inline" textLabel="Text goes here" className="sbdocs-slug">
   <AILabelContent>Explanation of AI generated content</AILabelContent>
 </AILabel>
 <br />
@@ -104,7 +104,7 @@ the `aiTextLabel` prop.
 </AILabel>
 
 ```jsx
-<AILabel kind="inline" aiTextLabel="Text goes here">
+<AILabel kind="inline" textLabel="Text goes here">
   <AILabelContent>Explanation of AI generated content</AILabelContent>
 </AILabel>
 
@@ -130,12 +130,12 @@ The `AILabel` component has two variants, `default` and `inline`.
 The `inline` `AILabel` with the standard icon can also trigger the AI
 explainability callout.
 
-<AILabel kind="inline" aiTextLabel="Text goes here" className="sbdocs-slug">
+<AILabel kind="inline" textLabel="Text goes here" className="sbdocs-slug">
   <AILabelContent>Explanation of AI generated content</AILabelContent>
 </AILabel>
 
 ```jsx
-<AILabel kind="inline" aiTextLabel="Text goes here" size="xs">
+<AILabel kind="inline" textLabel="Text goes here" size="xs">
   <AILabelContent>Explanation of AI-generated content</AILabelContent>
 </AILabel>
 ```
diff --git a/packages/react/src/components/AILabel/AILabel.stories.js b/packages/react/src/components/AILabel/AILabel.stories.js
index 8b31788753d6..c4172e8ea939 100644
--- a/packages/react/src/components/AILabel/AILabel.stories.js
+++ b/packages/react/src/components/AILabel/AILabel.stories.js
@@ -188,7 +188,7 @@ export const Default = () => (
       </AILabel>
     </div>
     <div className="slug-container-example slug-container">
-      <AILabel autoAlign kind="inline" size="sm" aiTextLabel="Text goes here">
+      <AILabel autoAlign kind="inline" size="sm" textLabel="Text goes here">
         <AILabelContent>
           {aiContent}
           <AILabelActions>
@@ -205,7 +205,7 @@ export const Default = () => (
           </AILabelActions>
         </AILabelContent>
       </AILabel>
-      <AILabel autoAlign kind="inline" size="md" aiTextLabel="Text goes here">
+      <AILabel autoAlign kind="inline" size="md" textLabel="Text goes here">
         <AILabelContent>
           {aiContent}
           <AILabelActions>
@@ -222,7 +222,7 @@ export const Default = () => (
           </AILabelActions>
         </AILabelContent>
       </AILabel>
-      <AILabel autoAlign kind="inline" size="lg" aiTextLabel="Text goes here">
+      <AILabel autoAlign kind="inline" size="lg" textLabel="Text goes here">
         <AILabelContent>
           {aiContent}
           <AILabelActions>
@@ -376,6 +376,11 @@ Callout.argTypes = {
       disable: true,
     },
   },
+  textLabel: {
+    table: {
+      disable: true,
+    },
+  },
 };
 
 export const Playground = (args) => {
@@ -415,7 +420,7 @@ export const Playground = (args) => {
   return (
     <>
       <div className="slug-container slug-container-example">
-        <AILabel {...args}>
+        <AILabel aria-label="Test" {...args}>
           <AILabelContent>{renderedContent}</AILabelContent>
         </AILabel>
       </div>
diff --git a/packages/react/src/components/AILabel/__tests__/AILabel-test.js b/packages/react/src/components/AILabel/__tests__/AILabel-test.js
index c3160b6337c3..fc53fc65628b 100644
--- a/packages/react/src/components/AILabel/__tests__/AILabel-test.js
+++ b/packages/react/src/components/AILabel/__tests__/AILabel-test.js
@@ -41,7 +41,7 @@ describe('AILabel', () => {
     });
 
     it('should respect aiTextLabel prop when kind is inline', () => {
-      const wrapper = render(<AILabel kind="inline" aiTextLabel="Test text" />);
+      const wrapper = render(<AILabel kind="inline" textLabel="Test text" />);
 
       const additionalTextSpan = wrapper.container.querySelector(
         `.${prefix}--slug__additional-text`
@@ -51,7 +51,7 @@ describe('AILabel', () => {
     });
 
     it('should not populate aiTextLabel prop when kind is not inline', () => {
-      const wrapper = render(<AILabel aiTextLabel="Test text" />);
+      const wrapper = render(<AILabel textLabel="Test text" />);
 
       const additionalTextSpan = wrapper.container.querySelector(
         `.${prefix}--slug__additional-text`
diff --git a/packages/react/src/components/AILabel/index.js b/packages/react/src/components/AILabel/index.js
index 591e60155a50..4eddccf7268f 100644
--- a/packages/react/src/components/AILabel/index.js
+++ b/packages/react/src/components/AILabel/index.js
@@ -19,6 +19,7 @@ import {
 import { IconButton } from '../IconButton';
 import { Undo } from '@carbon/icons-react';
 import { useId } from '../../internal/useId';
+import deprecate from '../../prop-types/deprecate';
 
 export const AILabelContent = React.forwardRef(function AILabelContent(
   { children, className },
@@ -36,7 +37,7 @@ export const AILabelContent = React.forwardRef(function AILabelContent(
   });
 
   return (
-    <ToggletipContent className={aiLabelContentClasses} ref={ref}>
+    <ToggletipContent className={aiLabelContentClasses}>
       {children}
     </ToggletipContent>
   );
@@ -89,6 +90,7 @@ export const AILabel = React.forwardRef(function AILabel(
   {
     aiText = 'AI',
     aiTextLabel,
+    textLabel,
     align,
     autoAlign = true,
     children,
@@ -98,6 +100,7 @@ export const AILabel = React.forwardRef(function AILabel(
     revertActive,
     revertLabel = 'Revert to AI input',
     slugLabel = 'Show information',
+    ['aria-label']: ariaLabel = 'Show information',
     size = 'xs',
     ...rest
   },
@@ -125,9 +128,10 @@ export const AILabel = React.forwardRef(function AILabel(
     }
   };
 
-  const ariaLabel = !aiTextLabel
-    ? `${aiText} - ${slugLabel}`
-    : `${aiText} - ${aiTextLabel}`;
+  const ariaLabelText =
+    !aiTextLabel && !textLabel
+      ? `${aiText} - ${slugLabel || ariaLabel}`
+      : `${aiText} - ${aiTextLabel || textLabel}`;
 
   return (
     <div className={aiLabelClasses} ref={ref} id={id}>
@@ -142,7 +146,9 @@ export const AILabel = React.forwardRef(function AILabel(
         </IconButton>
       ) : (
         <Toggletip align={align} autoAlign={autoAlign} {...rest}>
-          <ToggletipButton className={aiLabelButtonClasses} label={ariaLabel}>
+          <ToggletipButton
+            className={aiLabelButtonClasses}
+            label={ariaLabelText}>
             <span className={`${prefix}--slug__text`}>{aiText}</span>
             {kind === 'inline' && aiTextLabel && (
               <span className={`${prefix}--slug__additional-text`}>
@@ -170,9 +176,13 @@ AILabel.propTypes = {
   aiText: PropTypes.string,
 
   /**
+   * @deprecated
    * Specify additional text to be rendered next to the AI label in the inline variant
    */
-  aiTextLabel: PropTypes.string,
+  aiTextLabel: deprecate(
+    PropTypes.string,
+    '`aiTextLabel` on `AILabel` has been deprecated - Please use the `textLabel` prop instead'
+  ),
 
   /**
    * Specify how the popover should align with the button
@@ -203,6 +213,11 @@ AILabel.propTypes = {
     'right-start',
   ]),
 
+  /**
+   * Specify the text that will be provided to the aria-label of the `AILabel` button
+   */
+  'aria-label': PropTypes.string,
+
   /**
    * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
    */
@@ -244,7 +259,16 @@ AILabel.propTypes = {
   size: PropTypes.oneOf(['mini', '2xs', 'xs', 'sm', 'md', 'lg', 'xl']),
 
   /**
+   * @deprecated
    * Specify the text that will be provided to the aria-label of the `AILabel` button
    */
-  slugLabel: PropTypes.string,
+  slugLabel: deprecate(
+    PropTypes.string,
+    '`slugLabel` on `AILabel` has been deprecated - Please use the `ariaLabel` prop instead'
+  ),
+
+  /**
+   * Specify additional text to be rendered next to the AI label in the inline variant
+   */
+  textLabel: PropTypes.string,
 };
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
index 563b112caf97..7d01682e7d54 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
@@ -15,13 +15,10 @@ import MultiSelect from '.';
 import FilterableMultiSelect from './FilterableMultiSelect';
 import Button from '../Button';
 import ButtonSet from '../ButtonSet';
-<<<<<<< HEAD
 import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
 import { IconButton } from '../IconButton';
 import { View, FolderOpen, Folders } from '@carbon/icons-react';
-=======
 import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
->>>>>>> main
 
 export default {
   title: 'Components/MultiSelect',

From 249dcb397db8b766982423bbb6e4722f5d6a0c04 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Thu, 27 Jun 2024 11:21:16 -0400
Subject: [PATCH 14/17] test(AILabel): update textLabel test

---
 .../__snapshots__/PublicAPI-test.js.snap      | 20 +++++++++++--------
 .../AILabel/__tests__/AILabel-test.js         |  4 ++--
 .../react/src/components/AILabel/index.js     |  4 ++--
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 20db52dca41f..273c1d1c8dde 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -11,9 +11,7 @@ Map {
       "aiText": Object {
         "type": "string",
       },
-      "aiTextLabel": Object {
-        "type": "string",
-      },
+      "aiTextLabel": [Function],
       "align": Object {
         "args": Array [
           Array [
@@ -41,6 +39,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "aria-label": Object {
+        "type": "string",
+      },
       "autoAlign": Object {
         "type": "bool",
       },
@@ -82,7 +83,8 @@ Map {
         ],
         "type": "oneOf",
       },
-      "slugLabel": Object {
+      "slugLabel": [Function],
+      "textLabel": Object {
         "type": "string",
       },
     },
@@ -10789,9 +10791,7 @@ Map {
       "aiText": Object {
         "type": "string",
       },
-      "aiTextLabel": Object {
-        "type": "string",
-      },
+      "aiTextLabel": [Function],
       "align": Object {
         "args": Array [
           Array [
@@ -10819,6 +10819,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "aria-label": Object {
+        "type": "string",
+      },
       "autoAlign": Object {
         "type": "bool",
       },
@@ -10860,7 +10863,8 @@ Map {
         ],
         "type": "oneOf",
       },
-      "slugLabel": Object {
+      "slugLabel": [Function],
+      "textLabel": Object {
         "type": "string",
       },
     },
diff --git a/packages/react/src/components/AILabel/__tests__/AILabel-test.js b/packages/react/src/components/AILabel/__tests__/AILabel-test.js
index fc53fc65628b..43d24cb46d6b 100644
--- a/packages/react/src/components/AILabel/__tests__/AILabel-test.js
+++ b/packages/react/src/components/AILabel/__tests__/AILabel-test.js
@@ -40,7 +40,7 @@ describe('AILabel', () => {
       expect(screen.getByText('IA')).toBeInTheDocument();
     });
 
-    it('should respect aiTextLabel prop when kind is inline', () => {
+    it('should respect textLabel prop when kind is inline', () => {
       const wrapper = render(<AILabel kind="inline" textLabel="Test text" />);
 
       const additionalTextSpan = wrapper.container.querySelector(
@@ -50,7 +50,7 @@ describe('AILabel', () => {
       expect(additionalTextSpan).toHaveTextContent('Test text');
     });
 
-    it('should not populate aiTextLabel prop when kind is not inline', () => {
+    it('should not populate textLabel prop when kind is not inline', () => {
       const wrapper = render(<AILabel textLabel="Test text" />);
 
       const additionalTextSpan = wrapper.container.querySelector(
diff --git a/packages/react/src/components/AILabel/index.js b/packages/react/src/components/AILabel/index.js
index 4eddccf7268f..f21db0c554f8 100644
--- a/packages/react/src/components/AILabel/index.js
+++ b/packages/react/src/components/AILabel/index.js
@@ -150,9 +150,9 @@ export const AILabel = React.forwardRef(function AILabel(
             className={aiLabelButtonClasses}
             label={ariaLabelText}>
             <span className={`${prefix}--slug__text`}>{aiText}</span>
-            {kind === 'inline' && aiTextLabel && (
+            {kind === 'inline' && (aiTextLabel || textLabel) && (
               <span className={`${prefix}--slug__additional-text`}>
-                {aiTextLabel}
+                {aiTextLabel || textLabel}
               </span>
             )}
           </ToggletipButton>

From d342655140ab423128d51e78654e106c15924fd5 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 16 Jul 2024 12:04:15 -0400
Subject: [PATCH 15/17] fix(AILabel): make changes based on review

---
 .../react/src/components/AILabel/AILabelDatatable.mdx    | 9 ++++++---
 .../src/components/AISkeleton/AISkeletonIcon.stories.js  | 2 +-
 .../AISkeleton/AISkeletonPlaceholder.stories.js          | 2 +-
 .../src/components/AISkeleton/AISkeletonText.stories.js  | 2 +-
 packages/styles/scss/components/slug/_slug.scss          | 7 -------
 5 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/components/AILabel/AILabelDatatable.mdx b/packages/react/src/components/AILabel/AILabelDatatable.mdx
index b3cd8005662f..0fb68621debd 100644
--- a/packages/react/src/components/AILabel/AILabelDatatable.mdx
+++ b/packages/react/src/components/AILabel/AILabelDatatable.mdx
@@ -1,4 +1,4 @@
-import { ArgsTable, Canvas, Story } from '@storybook/blocks';
+import { Story, ArgsTable, Canvas, Meta } from '@storybook/blocks';
 import { AILabel, AILabelContent, AILabelActions } from '.';
 import * as AILabelStories from '../DataTable/stories/DataTable-ai-label.stories';
 
@@ -24,8 +24,11 @@ import * as AILabelStories from '../DataTable/stories/DataTable-ai-label.stories
 The `DataTable` supports placing a `slug` in both the column header and row.
 
 <Canvas>
-  <Story of={AILabelStories.ColumnAILabelWithSelectionAndExpansion} />
-  <Story of={AILabelStories.AILabelWithSelection} />
+  <Story id="components-datatable-withailabel--column-ai-label-with-selection-and-expansion" />
+</Canvas>
+
+<Canvas>
+  <Story id="components-datatable-withailabel--ai-label-with-selection" />
 </Canvas>
 
 ## AILabel anatomy
diff --git a/packages/react/src/components/AISkeleton/AISkeletonIcon.stories.js b/packages/react/src/components/AISkeleton/AISkeletonIcon.stories.js
index b17c4b8f03e8..1d7b7ab68fad 100644
--- a/packages/react/src/components/AISkeleton/AISkeletonIcon.stories.js
+++ b/packages/react/src/components/AISkeleton/AISkeletonIcon.stories.js
@@ -12,7 +12,7 @@ import React from 'react';
 import AISkeletonIcon from './AISkeletonIcon';
 
 export default {
-  title: 'Components/Skeleton',
+  title: 'Components/Skeleton/AISkeleton',
   component: AISkeletonIcon,
 };
 
diff --git a/packages/react/src/components/AISkeleton/AISkeletonPlaceholder.stories.js b/packages/react/src/components/AISkeleton/AISkeletonPlaceholder.stories.js
index d63fd1be4786..1ff7389fd211 100644
--- a/packages/react/src/components/AISkeleton/AISkeletonPlaceholder.stories.js
+++ b/packages/react/src/components/AISkeleton/AISkeletonPlaceholder.stories.js
@@ -12,7 +12,7 @@ import React from 'react';
 import AISkeletonPlaceholder from './AISkeletonPlaceholder';
 
 export default {
-  title: 'Components/Skeleton',
+  title: 'Components/Skeleton/AISkeleton',
   component: AISkeletonPlaceholder,
 };
 
diff --git a/packages/react/src/components/AISkeleton/AISkeletonText.stories.js b/packages/react/src/components/AISkeleton/AISkeletonText.stories.js
index 8ebf4553f70e..972200aeab5a 100644
--- a/packages/react/src/components/AISkeleton/AISkeletonText.stories.js
+++ b/packages/react/src/components/AISkeleton/AISkeletonText.stories.js
@@ -12,7 +12,7 @@ import React from 'react';
 import AISkeletonText from './AISkeletonText';
 
 export default {
-  title: 'Components/Skeleton',
+  title: 'Components/Skeleton/AISkeleton',
   component: AISkeletonText,
 };
 
diff --git a/packages/styles/scss/components/slug/_slug.scss b/packages/styles/scss/components/slug/_slug.scss
index 03265039da41..2d6d0ba999fd 100644
--- a/packages/styles/scss/components/slug/_slug.scss
+++ b/packages/styles/scss/components/slug/_slug.scss
@@ -97,13 +97,6 @@ $sizes: (
     box-shadow: inset 0 0 0 1px $focus;
   }
 
-  .#{$prefix}--slug
-    .#{$prefix}--slug__button.#{$prefix}--slug__button--mini:focus,
-  .#{$prefix}--slug
-    .#{$prefix}--slug__button.#{$prefix}--slug__button--2xs:focus {
-    box-shadow: none;
-  }
-
   .#{$prefix}--slug .#{$prefix}--slug__button:hover {
     background: $border-inverse;
     color: $text-inverse;

From fb738758b249d219c0b0cfd3596183a23313dc1f Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 22 Jul 2024 10:54:28 -0400
Subject: [PATCH 16/17] fix(AILabel): update click target to 24px for mini, 2xs

---
 packages/react/src/components/AILabel/index.js  |  2 +-
 packages/styles/scss/components/slug/_slug.scss | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/AILabel/index.js b/packages/react/src/components/AILabel/index.js
index f21db0c554f8..0ef644a03c3e 100644
--- a/packages/react/src/components/AILabel/index.js
+++ b/packages/react/src/components/AILabel/index.js
@@ -119,7 +119,7 @@ export const AILabel = React.forwardRef(function AILabel(
     [`${prefix}--slug__button--${size}`]: size,
     [`${prefix}--slug__button--${kind}`]: kind,
     [`${prefix}--slug__button--inline-with-content`]:
-      kind === 'inline' && aiTextLabel,
+      kind === 'inline' && (aiTextLabel || textLabel),
   });
 
   const handleOnRevertClick = (evt) => {
diff --git a/packages/styles/scss/components/slug/_slug.scss b/packages/styles/scss/components/slug/_slug.scss
index 2d6d0ba999fd..d64de4d8ae48 100644
--- a/packages/styles/scss/components/slug/_slug.scss
+++ b/packages/styles/scss/components/slug/_slug.scss
@@ -92,6 +92,16 @@ $sizes: (
     }
   }
 
+  // Add 24px click target for mini, 2xs sizes
+  .#{$prefix}--slug__button--mini::after,
+  .#{$prefix}--slug__button--2xs::after {
+    position: absolute;
+    display: block;
+    block-size: 24px;
+    content: '';
+    inline-size: 24px;
+  }
+
   .#{$prefix}--slug .#{$prefix}--slug__button:focus {
     border: 1px solid $focus;
     box-shadow: inset 0 0 0 1px $focus;

From 6255b25721fc0f311f45eaf7ea38f606a6eca43e Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 22 Jul 2024 11:11:39 -0400
Subject: [PATCH 17/17] feat(AILabel): add AILabel sass entrypoint

---
 .../scss/components/ai-label/_ai-label.scss    |  9 +++++++++
 .../scss/components/ai-label/_index.scss       |  9 +++++++++
 .../scss/components/ai-label/_ai-label.scss    |  9 +++++++++
 .../scss/components/ai-label/_index.scss       |  9 +++++++++
 .../scss/components/ai-label/_ai-label.scss    |  9 +++++++++
 .../react/scss/components/ai-label/_index.scss |  9 +++++++++
 .../__snapshots__/styles-test.js.snap          | 10 ++++++++++
 packages/styles/files.js                       |  2 ++
 packages/styles/scss/components/_index.scss    |  1 +
 .../scss/components/ai-label/_ai-label.scss    | 18 ++++++++++++++++++
 .../scss/components/ai-label/_index.scss       |  4 ++++
 .../styles/scss/components/slug/_slug.scss     |  2 +-
 12 files changed, 90 insertions(+), 1 deletion(-)
 create mode 100644 packages/carbon-components-react/scss/components/ai-label/_ai-label.scss
 create mode 100644 packages/carbon-components-react/scss/components/ai-label/_index.scss
 create mode 100644 packages/carbon-components/scss/components/ai-label/_ai-label.scss
 create mode 100644 packages/carbon-components/scss/components/ai-label/_index.scss
 create mode 100644 packages/react/scss/components/ai-label/_ai-label.scss
 create mode 100644 packages/react/scss/components/ai-label/_index.scss
 create mode 100644 packages/styles/scss/components/ai-label/_ai-label.scss
 create mode 100644 packages/styles/scss/components/ai-label/_index.scss

diff --git a/packages/carbon-components-react/scss/components/ai-label/_ai-label.scss b/packages/carbon-components-react/scss/components/ai-label/_ai-label.scss
new file mode 100644
index 000000000000..49e0bd5dc557
--- /dev/null
+++ b/packages/carbon-components-react/scss/components/ai-label/_ai-label.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/ai-label/ai-label';
diff --git a/packages/carbon-components-react/scss/components/ai-label/_index.scss b/packages/carbon-components-react/scss/components/ai-label/_index.scss
new file mode 100644
index 000000000000..3f0e9203e36b
--- /dev/null
+++ b/packages/carbon-components-react/scss/components/ai-label/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/ai-label';
diff --git a/packages/carbon-components/scss/components/ai-label/_ai-label.scss b/packages/carbon-components/scss/components/ai-label/_ai-label.scss
new file mode 100644
index 000000000000..03f1cc5d2bd5
--- /dev/null
+++ b/packages/carbon-components/scss/components/ai-label/_ai-label.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/ai-label/ai-label';
diff --git a/packages/carbon-components/scss/components/ai-label/_index.scss b/packages/carbon-components/scss/components/ai-label/_index.scss
new file mode 100644
index 000000000000..181113e5b055
--- /dev/null
+++ b/packages/carbon-components/scss/components/ai-label/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/ai-label';
diff --git a/packages/react/scss/components/ai-label/_ai-label.scss b/packages/react/scss/components/ai-label/_ai-label.scss
new file mode 100644
index 000000000000..849ed4ecaeb1
--- /dev/null
+++ b/packages/react/scss/components/ai-label/_ai-label.scss
@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/ai-label/ai-label';
diff --git a/packages/react/scss/components/ai-label/_index.scss b/packages/react/scss/components/ai-label/_index.scss
new file mode 100644
index 000000000000..df5d8475569c
--- /dev/null
+++ b/packages/react/scss/components/ai-label/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/ai-label';
diff --git a/packages/styles/__tests__/__snapshots__/styles-test.js.snap b/packages/styles/__tests__/__snapshots__/styles-test.js.snap
index 8e05a7caa4f1..ef00ac6812af 100644
--- a/packages/styles/__tests__/__snapshots__/styles-test.js.snap
+++ b/packages/styles/__tests__/__snapshots__/styles-test.js.snap
@@ -92,6 +92,16 @@ Array [
     "importPath": "@carbon/styles/scss/components/accordion",
     "relativePath": "scss/components/accordion",
   },
+  Object {
+    "filepath": "scss/components/ai-label/_ai-label.scss",
+    "importPath": "@carbon/styles/scss/components/ai-label/ai-label",
+    "relativePath": "scss/components/ai-label/ai-label",
+  },
+  Object {
+    "filepath": "scss/components/ai-label/_index.scss",
+    "importPath": "@carbon/styles/scss/components/ai-label",
+    "relativePath": "scss/components/ai-label",
+  },
   Object {
     "filepath": "scss/components/aspect-ratio/_aspect-ratio.scss",
     "importPath": "@carbon/styles/scss/components/aspect-ratio/aspect-ratio",
diff --git a/packages/styles/files.js b/packages/styles/files.js
index 75bd138e0133..b31759d83e32 100644
--- a/packages/styles/files.js
+++ b/packages/styles/files.js
@@ -37,6 +37,8 @@ const files = [
   'scss/components/_index.scss',
   'scss/components/accordion/_accordion.scss',
   'scss/components/accordion/_index.scss',
+  'scss/components/ai-label/_ai-label.scss',
+  'scss/components/ai-label/_index.scss',
   'scss/components/aspect-ratio/_aspect-ratio.scss',
   'scss/components/aspect-ratio/_index.scss',
   'scss/components/breadcrumb/_breadcrumb.scss',
diff --git a/packages/styles/scss/components/_index.scss b/packages/styles/scss/components/_index.scss
index 7119485e72c1..0877a1b896ec 100644
--- a/packages/styles/scss/components/_index.scss
+++ b/packages/styles/scss/components/_index.scss
@@ -6,6 +6,7 @@
 //
 
 @use 'accordion';
+@use 'ai-label';
 @use 'aspect-ratio';
 @use 'breadcrumb';
 @use 'button';
diff --git a/packages/styles/scss/components/ai-label/_ai-label.scss b/packages/styles/scss/components/ai-label/_ai-label.scss
new file mode 100644
index 000000000000..2dd65652b3f6
--- /dev/null
+++ b/packages/styles/scss/components/ai-label/_ai-label.scss
@@ -0,0 +1,18 @@
+//
+// Copyright IBM Corp. 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.
+//
+
+//-----------------------------
+// AILabel
+//-----------------------------
+@use '../slug';
+
+/// AILabel styles
+/// @access public
+/// @group AI
+@mixin ai-label {
+  // Style overrides can be added here as needed
+}
diff --git a/packages/styles/scss/components/ai-label/_index.scss b/packages/styles/scss/components/ai-label/_index.scss
new file mode 100644
index 000000000000..2a17fbfa2519
--- /dev/null
+++ b/packages/styles/scss/components/ai-label/_index.scss
@@ -0,0 +1,4 @@
+@forward 'ai-label';
+@use 'ai-label';
+
+@include ai-label.ai-label;
diff --git a/packages/styles/scss/components/slug/_slug.scss b/packages/styles/scss/components/slug/_slug.scss
index d64de4d8ae48..f0f1a3b08d1b 100644
--- a/packages/styles/scss/components/slug/_slug.scss
+++ b/packages/styles/scss/components/slug/_slug.scss
@@ -56,7 +56,7 @@ $sizes: (
 
 /// Slug styles
 /// @access public
-/// @group slider
+/// @group AI
 @mixin slug {
   .#{$prefix}--slug {
     display: flex;