diff --git a/packages/react/src/components/AILabel/AILabel.mdx b/packages/react/src/components/AILabel/AILabel.mdx
index 480509661090..351cfd209386 100644
--- a/packages/react/src/components/AILabel/AILabel.mdx
+++ b/packages/react/src/components/AILabel/AILabel.mdx
@@ -6,7 +6,7 @@ import * as AILabelStories from './AILabel.stories';
 
 # AILabel
 
-[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Slug)
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/AILabel)
 |
 [AILabel release status](https://airtable.com/appCAqlGVN8tRUbAp/shr71ZyLlIGORz3Vh/tblHqPusgkK8hIeHo)
 |
@@ -80,7 +80,7 @@ callout. To achieve this, you can pass in `AILabelActions` as a child of
 If needed, you can change the text inside the `AILabel` when translating to
 different languages.
 
-<AILabel aiText="IA" className="sbdocs-slug">
+<AILabel aiText="IA" className="sbdocs-ai-label">
   <AILabelContent>Explanation of AI generated content</AILabelContent>
 </AILabel>
 
@@ -95,11 +95,11 @@ different languages.
 When using the `inline` variant, you can add text adjacent to the AI label with
 the `aiTextLabel` prop.
 
-<AILabel kind="inline" textLabel="Text goes here" className="sbdocs-slug">
+<AILabel kind="inline" textLabel="Text goes here" className="sbdocs-ai-label">
   <AILabelContent>Explanation of AI generated content</AILabelContent>
 </AILabel>
 <br />
-<AILabel kind="inline" className="sbdocs-slug">
+<AILabel kind="inline" className="sbdocs-ai-label">
   <AILabelContent>Explanation of AI generated content</AILabelContent>
 </AILabel>
 
@@ -117,7 +117,7 @@ the `aiTextLabel` prop.
 
 The `AILabel` component has two variants, `default` and `inline`.
 
-<AILabel size="xs" className="sbdocs-slug">
+<AILabel size="xs" className="sbdocs-ai-label">
   <AILabelContent>AI was used to generate this content</AILabelContent>
 </AILabel>
 
@@ -130,7 +130,7 @@ 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" textLabel="Text goes here" className="sbdocs-slug">
+<AILabel kind="inline" textLabel="Text goes here" className="sbdocs-ai-label">
   <AILabelContent>Explanation of AI generated content</AILabelContent>
 </AILabel>
 
@@ -147,12 +147,12 @@ 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
-[Revert Test story](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-form--revert-test)
+[Revert Test story](https://react.carbondesignsystem.com/?path=/story/components-form--with-ai-label&args=revertActive:!true)
 or take a look at the example story
-[source code](https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Slug/Slug-form.stories.js#L96).
+[source code](https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Form/Form.stories.js#L272).
 
 ## 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/Slug.mdx).
+[GitHub](https://github.com/carbon-design-system/carbon/edit/main/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 3d10559e4b02..4634b362dc6b 100644
--- a/packages/react/src/components/AILabel/AILabel.stories.js
+++ b/packages/react/src/components/AILabel/AILabel.stories.js
@@ -41,7 +41,7 @@ const aiContent = (
 
 export const Default = () => (
   <>
-    <div className="slug-container slug-container-example">
+    <div className="ai-label-container ai-label-container-example">
       <AILabel autoAlign size="mini">
         <AILabelContent>{aiContent}</AILabelContent>
       </AILabel>
@@ -134,7 +134,7 @@ export const Default = () => (
         </AILabelContent>
       </AILabel>
     </div>
-    <div className="slug-container-example slug-container">
+    <div className="ai-label-container ai-label-container-example">
       <AILabel autoAlign kind="inline" size="sm">
         <AILabelContent>
           {aiContent}
@@ -187,7 +187,7 @@ export const Default = () => (
         </AILabelContent>
       </AILabel>
     </div>
-    <div className="slug-container-example slug-container">
+    <div className="ai-label-container ai-label-container-example">
       <AILabel autoAlign kind="inline" size="sm" textLabel="Text goes here">
         <AILabelContent>
           {aiContent}
@@ -244,10 +244,10 @@ export const Default = () => (
 );
 
 export const ExplainabilityPopover = (args) => {
-  const { showSlugActions = true } = args;
+  const { showAILabelActions = true } = args;
 
   return (
-    <div className="slug-container-example slug-container centered">
+    <div className="ai-label-container-example ai-label-container centered">
       <AILabel autoAlign={false} defaultOpen {...args}>
         <AILabelContent>
           {' '}
@@ -264,7 +264,7 @@ export const ExplainabilityPopover = (args) => {
             <p className="secondary">Model type</p>
             <p className="bold">Foundation model</p>
           </div>
-          {showSlugActions && (
+          {showAILabelActions && (
             <AILabelActions>
               <IconButton kind="ghost" label="View">
                 <View />
@@ -285,7 +285,7 @@ export const ExplainabilityPopover = (args) => {
 };
 
 ExplainabilityPopover.argTypes = {
-  showSlugActions: {
+  showAILabelActions: {
     control: {
       type: 'boolean',
     },
@@ -384,7 +384,7 @@ ExplainabilityPopover.argTypes = {
 };
 
 export const Playground = (args) => {
-  const { showSlugActions = true } = args;
+  const { showAILabelActions = true } = args;
 
   const renderedContent = (
     <>
@@ -400,7 +400,7 @@ export const Playground = (args) => {
         <p className="secondary">Model type</p>
         <p className="bold">Foundation model</p>
       </div>
-      {showSlugActions && (
+      {showAILabelActions && (
         <AILabelActions>
           <IconButton kind="ghost" label="View">
             <View />
@@ -419,7 +419,7 @@ export const Playground = (args) => {
 
   return (
     <>
-      <div className="slug-container slug-container-example">
+      <div className="ai-label-container ai-label-container-example">
         <AILabel aria-label="Test" {...args}>
           <AILabelContent>{renderedContent}</AILabelContent>
         </AILabel>
@@ -431,7 +431,7 @@ export const Playground = (args) => {
 };
 
 Playground.argTypes = {
-  showSlugActions: {
+  showAILabelActions: {
     control: {
       type: 'boolean',
     },
diff --git a/packages/react/src/components/AILabel/AILabelDatatable.mdx b/packages/react/src/components/AILabel/AILabelDatatable.mdx
index a9f0fe5f415a..58ad46b2edb7 100644
--- a/packages/react/src/components/AILabel/AILabelDatatable.mdx
+++ b/packages/react/src/components/AILabel/AILabelDatatable.mdx
@@ -5,7 +5,7 @@ import { AILabel, AILabelContent, AILabelActions } from '.';
 
 # AILabel
 
-[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Slug)
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/AILabel)
 |
 [AILabel release status](https://airtable.com/appCAqlGVN8tRUbAp/shr71ZyLlIGORz3Vh/tblHqPusgkK8hIeHo)
 |
@@ -22,7 +22,7 @@ import { AILabel, AILabelContent, AILabelActions } from '.';
 
 ## Overview
 
-The `DataTable` supports placing a `slug` in both the column header and row.
+The `DataTable` supports placing a `AI label` in both the column header and row.
 
 <Canvas id="components-datatable-withailabel--column-ai-label-with-selection-and-expansion" />
 
@@ -50,7 +50,7 @@ callout. To achieve this, you can pass in `AILabelActions` as a child of
 <AILabel>
   <AILabelContent>
     {Content Here}
-    {Optional Slug action bar}
+    {Optional AI label action bar}
     <AILabelActions>
       <IconButton kind="ghost" label="View">
         <View />
@@ -71,7 +71,7 @@ callout. To achieve this, you can pass in `AILabelActions` as a child of
 
 ### Using as a column header
 
-To use an `AILabel` 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 `AILabel` to the
 appropriate column data.
 
 ```jsx
@@ -83,9 +83,9 @@ const columnAILabelHeaders = [
   {
     key: 'attached_groups',
     header: 'Attached groups',
-    slug: (
+    AILabel: (
       <AILabel
-        className="slug-container"
+        className="ai-label-container"
         autoAlign={false}
         align="bottom-right">
         <AILabelContent>
@@ -139,7 +139,7 @@ To use an `AILabel` inside a `DataTable` row, you'll need to pass in your
 <TableBody>
   {rows.map((row, i) => (
     <TableRow key={i} {...getRowProps({ row })}>
-      <TableSlugRow slug={slug} />
+      <TableSlugRow slug={AILabel} />
       <TableSelectRow {...getSelectionProps({ row })} />
       {row.cells.map((cell) => (
         <TableCell key={cell.id}>{cell.value}</TableCell>
@@ -153,4 +153,4 @@ To use an `AILabel` inside a `DataTable` row, you'll need to pass in your
 
 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/SlugDatatable.mdx).
+[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/AILabel/AILabelDatatable.mdx).
diff --git a/packages/react/src/components/AILabel/__tests__/AILabel-test.js b/packages/react/src/components/AILabel/__tests__/AILabel-test.js
index bf30a33694d3..f109d4f12c49 100644
--- a/packages/react/src/components/AILabel/__tests__/AILabel-test.js
+++ b/packages/react/src/components/AILabel/__tests__/AILabel-test.js
@@ -46,7 +46,7 @@ describe('AILabel', () => {
       const wrapper = render(<AILabel kind="inline" textLabel="Test text" />);
 
       const additionalTextSpan = wrapper.container.querySelector(
-        `.${prefix}--slug__additional-text`
+        `.${prefix}--ai-label__additional-text`
       );
       expect(additionalTextSpan).toBeInTheDocument();
       expect(additionalTextSpan).toHaveTextContent('Test text');
@@ -56,7 +56,7 @@ describe('AILabel', () => {
       const wrapper = render(<AILabel textLabel="Test text" />);
 
       const additionalTextSpan = wrapper.container.querySelector(
-        `.${prefix}--slug__additional-text`
+        `.${prefix}--ai-label__additional-text`
       );
       expect(additionalTextSpan).not.toBeInTheDocument();
     });
@@ -89,14 +89,14 @@ describe('AILabel', () => {
       render(<AILabel kind="inline" />);
 
       expect(screen.getByRole('button')).toHaveClass(
-        `${prefix}--slug__button--inline`
+        `${prefix}--ai-label__button--inline`
       );
     });
 
     it('should respect revertActive prop', () => {
       const { container } = render(<AILabel revertActive />);
 
-      expect(container.firstChild).toHaveClass(`${prefix}--slug--revert`);
+      expect(container.firstChild).toHaveClass(`${prefix}--ai-label--revert`);
       expect(container.firstChild.firstChild).toHaveClass(
         `${prefix}--icon-tooltip`
       );
@@ -112,7 +112,7 @@ describe('AILabel', () => {
       render(<AILabel size="xl" />);
 
       expect(screen.getByRole('button')).toHaveClass(
-        `${prefix}--slug__button--xl`
+        `${prefix}--ai-label__button--xl`
       );
     });
   });
diff --git a/packages/react/src/components/AILabel/ailabel-story.scss b/packages/react/src/components/AILabel/ailabel-story.scss
index 181c2edd6123..28cec633308d 100644
--- a/packages/react/src/components/AILabel/ailabel-story.scss
+++ b/packages/react/src/components/AILabel/ailabel-story.scss
@@ -9,7 +9,7 @@
 @use '@carbon/styles/scss/theme';
 @use '@carbon/react/scss/components/tile';
 
-.slug-container-example {
+.ai-label-container-example {
   display: flex;
   margin-bottom: 6rem;
   align-items: flex-start;
@@ -19,7 +19,7 @@
   }
 }
 
-.slug-container-example.centered {
+.ai-label-container-example.centered {
   margin: 0;
   width: calc(100vw - 84px);
   align-items: center;
@@ -30,23 +30,23 @@
   }
 }
 
-.slug-container .cds--toggletip-content p {
+.ai-label-container .cds--toggletip-content p {
   @include type.type-style('body-compact-01');
 }
 
-.slug-container .cds--toggletip-content .bold {
+.ai-label-container .cds--toggletip-content .bold {
   font-weight: 600;
 }
 
-.slug-container .cds--toggletip-content .secondary {
+.ai-label-container .cds--toggletip-content .secondary {
   color: theme.$text-secondary;
 }
 
-.slug-container .cds--toggletip-content h1 {
+.ai-label-container .cds--toggletip-content h1 {
   margin-bottom: 1rem;
 }
 
-.slug-container .cds--toggletip-content hr {
+.ai-label-container .cds--toggletip-content hr {
   border: 0;
   height: 1px;
   background: theme.$border-subtle;
@@ -54,56 +54,56 @@
   margin-bottom: 2rem;
 }
 
-.slug-tile-container {
+.ai-label-tile-container {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
 }
 
-.slug-tile-container .cds--tile {
+.ai-label-tile-container .cds--tile {
   max-width: 320px;
   margin-right: 3rem;
   margin-bottom: 3rem;
   padding-bottom: 90px;
 }
 
-.slug-tile-container h4 {
+.ai-label-tile-container h4 {
   margin-bottom: 1rem;
 }
 
-.slug-tile-container .ai-data {
+.ai-label-tile-container .ai-data {
   margin-top: 16px;
   padding: 16px 0;
   display: flex;
 }
 
-.slug-tile-container .data-container {
+.ai-label-tile-container .data-container {
   width: 126px;
 }
 
-.slug-tile-container .data-container:first-of-type {
+.ai-label-tile-container .data-container:first-of-type {
   margin-right: 16px;
 }
 
-.slug-tile-container p {
+.ai-label-tile-container p {
   @include type.type-style('body-01');
 }
 
-.slug-tile-container .data-container p {
+.ai-label-tile-container .data-container p {
   @include type.type-style('label-02');
 }
 
-.slug-tile-container .arrow-right {
+.ai-label-tile-container .arrow-right {
   position: absolute;
   bottom: 16px;
   right: 16px;
 }
 
-.slug-tile-container .cds--tile-content__below-the-fold {
+.ai-label-tile-container .cds--tile-content__below-the-fold {
   padding-top: 16px;
 }
 
-.slug-tile-container .cds--tile-content__below-the-fold p {
+.ai-label-tile-container .cds--tile-content__below-the-fold p {
   @include type.type-style('label-01');
   margin: 8px 0 50px;
 }
@@ -113,8 +113,8 @@
   flex-wrap: wrap;
 }
 
-.fluid-slug-form,
-.slug-form {
+.fluid-ai-label-form,
+.ai-label-form {
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -123,31 +123,31 @@
   margin-left: 4rem;
 }
 
-.fluid-slug-form .cds--date-picker-container {
+.fluid-ai-label-form .cds--date-picker-container {
   width: 100%;
 }
 
-.fluid-slug-form .cds--list-box__wrapper {
+.fluid-ai-label-form .cds--list-box__wrapper {
   width: 100%;
 }
 
-.slug-container .cds--toggletip-content p {
+.ai-label-container .cds--toggletip-content p {
   @include type.type-style('body-compact-01');
 }
 
-.slug-container .cds--toggletip-content .bold {
+.ai-label-container .cds--toggletip-content .bold {
   font-weight: 600;
 }
 
-.slug-container .cds--toggletip-content .secondary {
+.ai-label-container .cds--toggletip-content .secondary {
   color: theme.$text-secondary;
 }
 
-.slug-container .cds--toggletip-content h1 {
+.ai-label-container .cds--toggletip-content h1 {
   margin-bottom: 1rem;
 }
 
-.slug-container .cds--toggletip-content hr {
+.ai-label-container .cds--toggletip-content hr {
   border: 0;
   height: 1px;
   background: theme.$border-subtle;
@@ -155,39 +155,40 @@
   margin-bottom: 2rem;
 }
 
-.slug-check-radio-container
+.ai-label-check-radio-container
   .cds--form-item:not(:first-of-type):not(.cds--checkbox-wrapper),
-.slug-check-radio-container fieldset.cds--checkbox-group:not(:first-of-type) {
+.ai-label-check-radio-container
+  fieldset.cds--checkbox-group:not(:first-of-type) {
   margin-top: 2rem;
 }
 
-.slug-modal .cds--form-item {
+.ai-label-modal .cds--form-item {
   margin-top: 1rem;
 }
 
-.sbdocs-slug .cds--slug__text {
+.sbdocs-ai-label .cds--ai-label__text {
   font-size: 0.75rem;
 }
 
-.sbdocs-slug .cds--toggletip-content {
+.sbdocs-ai-label .cds--toggletip-content {
   font-size: 0.875rem;
 }
 
-.slug-selectable-tile-container .cds--tile-group > div {
+.ai-label-selectable-tile-container .cds--tile-group > div {
   display: flex;
 }
 
-.slug-selectable-tile-container .cds--tile-group > div > div {
+.ai-label-selectable-tile-container .cds--tile-group > div > div {
   width: 33%;
 }
 
-.slug-selectable-tile-container .cds--tile-group .slug-radio-tile,
-.slug-selectable-tile-container .cds--tile-group .slug-selectable-tile {
+.ai-label-selectable-tile-container .cds--tile-group .ai-label-radio-tile,
+.ai-label-selectable-tile-container .cds--tile-group .ai-label-selectable-tile {
   margin-inline-end: 1rem;
   height: 200px;
 }
 
-.slug-experimental-radio-tile-container {
+.ai-label-experimental-radio-tile-container {
   @include tile.tile(
     $enable-experimental-tile-contrast: true,
     $enable-v12-tile-radio-icons: true
diff --git a/packages/react/src/components/AILabel/index.tsx b/packages/react/src/components/AILabel/index.tsx
index 82d16a8e854a..5fcd66cfef17 100644
--- a/packages/react/src/components/AILabel/index.tsx
+++ b/packages/react/src/components/AILabel/index.tsx
@@ -37,8 +37,8 @@ export const AILabelContent = React.forwardRef(function AILabelContent(
   });
 
   const aiLabelContentClasses = cx(className, {
-    [`${prefix}--slug-content`]: true,
-    [`${prefix}--slug-content--with-actions`]: hasAILabelActions,
+    [`${prefix}--ai-label-content`]: true,
+    [`${prefix}--ai-label-content--with-actions`]: hasAILabelActions,
   });
 
   return (
@@ -51,12 +51,12 @@ export const AILabelContent = React.forwardRef(function AILabelContent(
 AILabelContent.displayName = 'AILabelContent';
 AILabelContent.propTypes = {
   /**
-   * 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 callout
+   * Specify an optional className to be added to the AILabel callout
    */
   className: PropTypes.string,
 };
@@ -70,7 +70,7 @@ export const AILabelActions = React.forwardRef(function AILabelActions(
   const prefix = usePrefix();
 
   const aiLabelActionsClasses = cx(className, {
-    [`${prefix}--slug-actions`]: true,
+    [`${prefix}--ai-label-actions`]: true,
   });
 
   return (
@@ -83,12 +83,12 @@ export const AILabelActions = React.forwardRef(function AILabelActions(
 AILabelActions.displayName = 'AILabelActions';
 AILabelActions.propTypes = {
   /**
-   * Specify the content you want rendered inside the slug callout toolbar
+   * Specify the content you want rendered inside the AILabel callout toolbar
    */
   children: PropTypes.node,
 
   /**
-   * Specify an optional className to be added to the AI slug toolbar
+   * Specify an optional className to be added to the AILabel toolbar
    */
   className: PropTypes.string,
 };
@@ -170,15 +170,15 @@ export const AILabel = React.forwardRef<HTMLDivElement, AILabelProps>(
     const id = useId('AILabel');
 
     const aiLabelClasses = cx(className, {
-      [`${prefix}--slug`]: true,
-      [`${prefix}--slug--revert`]: revertActive,
+      [`${prefix}--ai-label`]: true,
+      [`${prefix}--ai-label--revert`]: revertActive,
     });
 
     const aiLabelButtonClasses = cx({
-      [`${prefix}--slug__button`]: true,
-      [`${prefix}--slug__button--${size}`]: size,
-      [`${prefix}--slug__button--${kind}`]: kind,
-      [`${prefix}--slug__button--inline-with-content`]:
+      [`${prefix}--ai-label__button`]: true,
+      [`${prefix}--ai-label__button--${size}`]: size,
+      [`${prefix}--ai-label__button--${kind}`]: kind,
+      [`${prefix}--ai-label__button--inline-with-content`]:
         kind === 'inline' && (aiTextLabel || textLabel),
     });
 
@@ -209,9 +209,9 @@ export const AILabel = React.forwardRef<HTMLDivElement, AILabelProps>(
             <ToggletipButton
               className={aiLabelButtonClasses}
               label={ariaLabelText}>
-              <span className={`${prefix}--slug__text`}>{aiText}</span>
+              <span className={`${prefix}--ai-label__text`}>{aiText}</span>
               {kind === 'inline' && (aiTextLabel || textLabel) && (
-                <span className={`${prefix}--slug__additional-text`}>
+                <span className={`${prefix}--ai-label__additional-text`}>
                   {aiTextLabel || textLabel}
                 </span>
               )}
diff --git a/packages/react/src/components/Checkbox/Checkbox.stories.js b/packages/react/src/components/Checkbox/Checkbox.stories.js
index 40cd2e5bea5e..ba8aff5eccee 100644
--- a/packages/react/src/components/Checkbox/Checkbox.stories.js
+++ b/packages/react/src/components/Checkbox/Checkbox.stories.js
@@ -91,8 +91,8 @@ export const Single = () => {
 
 export const Skeleton = () => <CheckboxSkeleton />;
 
-const slugFunc = (kind) => (
-  <AILabel className="slug-container" kind={kind}>
+const AILabelFunc = (kind) => (
+  <AILabel className="ai-label-container" kind={kind}>
     <AILabelContent>
       <div>
         <p className="secondary">AI Explained</p>
@@ -123,8 +123,8 @@ const slugFunc = (kind) => (
 );
 
 export const withAILabel = () => (
-  <div className="slug-check-radio-container">
-    <CheckboxGroup legendText="Group Label" slug={slugFunc()}>
+  <div className="ai-label-check-radio-container">
+    <CheckboxGroup legendText="Group Label" slug={AILabelFunc()}>
       <Checkbox labelText={`Checkbox label`} id="checkbox-label-1" />
       <Checkbox labelText={`Checkbox label`} id="checkbox-label-2" />
       <Checkbox labelText={`Checkbox label`} id="checkbox-label-3" />
@@ -134,12 +134,12 @@ export const withAILabel = () => (
       <Checkbox
         labelText={`Checkbox label`}
         id="checkbox-label-4"
-        slug={slugFunc()}
+        slug={AILabelFunc()}
       />
       <Checkbox
         labelText={`Checkbox label`}
         id="checkbox-label-5"
-        slug={slugFunc()}
+        slug={AILabelFunc()}
       />
       <Checkbox labelText={`Checkbox label`} id="checkbox-label-6" />
     </CheckboxGroup>
@@ -148,12 +148,12 @@ export const withAILabel = () => (
       <Checkbox
         labelText={`Checkbox label`}
         id="checkbox-label-7"
-        slug={slugFunc('inline')}
+        slug={AILabelFunc('inline')}
       />
       <Checkbox
         labelText={`Checkbox label`}
         id="checkbox-label-8"
-        slug={slugFunc('inline')}
+        slug={AILabelFunc('inline')}
       />
       <Checkbox labelText={`Checkbox label`} id="checkbox-label-9" />
     </CheckboxGroup>
diff --git a/packages/react/src/components/ComboBox/ComboBox.stories.js b/packages/react/src/components/ComboBox/ComboBox.stories.js
index a702e44ba4a3..3a355fae4d27 100644
--- a/packages/react/src/components/ComboBox/ComboBox.stories.js
+++ b/packages/react/src/components/ComboBox/ComboBox.stories.js
@@ -158,7 +158,7 @@ export const _WithLayer = () => (
 );
 
 const aiLabel = (
-  <AILabel className="slug-container">
+  <AILabel className="ai-label-container">
     <AILabelContent>
       <div>
         <p className="secondary">AI Explained</p>
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.stories.js b/packages/react/src/components/ComposedModal/ComposedModal.stories.js
index e07bc295ea81..b0743d05e225 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal.stories.js
+++ b/packages/react/src/components/ComposedModal/ComposedModal.stories.js
@@ -352,7 +352,7 @@ export const WithInlineLoading = () => {
 };
 
 const aiLabel = (
-  <AILabel className="slug-container">
+  <AILabel className="ai-label-container">
     <AILabelContent>
       <div>
         <p className="secondary">AI Explained</p>
@@ -386,7 +386,7 @@ export const _withAILabel = {
   render: () => {
     const [open, setOpen] = useState(true); // eslint-disable-line
     return (
-      <div className="slug-modal">
+      <div className="ai-label-modal">
         <Button onClick={() => setOpen(true)}>Launch composed modal</Button>
         <ComposedModal
           open={open}
diff --git a/packages/react/src/components/DataTable/stories/DataTable-ai-label.stories.js b/packages/react/src/components/DataTable/stories/DataTable-ai-label.stories.js
index b319cf0a1152..4420a233a33d 100644
--- a/packages/react/src/components/DataTable/stories/DataTable-ai-label.stories.js
+++ b/packages/react/src/components/DataTable/stories/DataTable-ai-label.stories.js
@@ -73,7 +73,7 @@ const columnAILabelHeaders = [
     header: 'Attached groups',
     slug: (
       <AILabel
-        className="slug-container"
+        className="ai-label-container"
         autoAlign={false}
         align="bottom-right">
         <AILabelContent>
@@ -113,7 +113,7 @@ const columnAILabelHeaders = [
 ];
 
 const aiLabel = (
-  <AILabel className="slug-container">
+  <AILabel className="ai-label-container">
     <AILabelContent>
       <div>
         <p className="secondary">AI Explained</p>
@@ -371,7 +371,7 @@ export const ColumnAILabelWithSelectionAndExpansion = () => (
       <TableContainer
         title="DataTable"
         description="With expansion"
-        className="slug-column-table"
+        className="ai-label-column-table"
         {...getTableContainerProps()}>
         <Table {...getTableProps()} aria-label="sample table">
           <TableHead>
@@ -436,7 +436,7 @@ export const ColumnAILabelSort = () => (
       <TableContainer
         title="DataTable"
         description="With sorting"
-        className="slug-column-table">
+        className="ai-label-column-table">
         <Table {...getTableProps()} aria-label="sample table">
           <TableHead>
             <TableRow>
diff --git a/packages/react/src/components/DataTable/stories/datatable-story.scss b/packages/react/src/components/DataTable/stories/datatable-story.scss
index f2e0e8cd93b6..76aa3730a5e4 100644
--- a/packages/react/src/components/DataTable/stories/datatable-story.scss
+++ b/packages/react/src/components/DataTable/stories/datatable-story.scss
@@ -15,7 +15,7 @@
   @include type.type-style('label-01');
 }
 
-#storybook-root .slug-column-table .cds--data-table-content {
+#storybook-root .ai-label-column-table .cds--data-table-content {
   overflow: initial;
 }
 
diff --git a/packages/react/src/components/DatePicker/DatePicker-test.js b/packages/react/src/components/DatePicker/DatePicker-test.js
index f9f73570e4a2..d1c9341e0d9e 100644
--- a/packages/react/src/components/DatePicker/DatePicker-test.js
+++ b/packages/react/src/components/DatePicker/DatePicker-test.js
@@ -207,7 +207,9 @@ describe('DatePicker', () => {
       />
     );
 
-    expect(screen.getByRole('button')).toHaveClass(`${prefix}--slug__button`);
+    expect(screen.getByRole('button')).toHaveClass(
+      `${prefix}--ai-label__button`
+    );
   });
 
   it('should respect parseDate prop', async () => {
diff --git a/packages/react/src/components/DatePicker/DatePicker.stories.js b/packages/react/src/components/DatePicker/DatePicker.stories.js
index 6581c877b137..89088abcb86d 100644
--- a/packages/react/src/components/DatePicker/DatePicker.stories.js
+++ b/packages/react/src/components/DatePicker/DatePicker.stories.js
@@ -134,7 +134,7 @@ export const RangeWithCalendarWithLayer = () => (
 export const Skeleton = () => <DatePickerSkeleton range />;
 
 const aiLabel = (
-  <AILabel className="slug-container">
+  <AILabel className="ai-label-container">
     <AILabelContent>
       <div>
         <p className="secondary">AI Explained</p>
diff --git a/packages/react/src/components/Dropdown/Dropdown.stories.js b/packages/react/src/components/Dropdown/Dropdown.stories.js
index d029063aa3f4..182867dcf77d 100644
--- a/packages/react/src/components/Dropdown/Dropdown.stories.js
+++ b/packages/react/src/components/Dropdown/Dropdown.stories.js
@@ -254,7 +254,7 @@ export const Skeleton = () => (
 );
 
 const aiLabel = (
-  <AILabel className="slug-container">
+  <AILabel className="ai-label-container">
     <AILabelContent>
       <div>
         <p className="secondary">AI Explained</p>
diff --git a/packages/react/src/components/Form/Form.stories.js b/packages/react/src/components/Form/Form.stories.js
index d13e13b5417a..af8030bb93ad 100644
--- a/packages/react/src/components/Form/Form.stories.js
+++ b/packages/react/src/components/Form/Form.stories.js
@@ -272,7 +272,7 @@ const items = [
 export const withAILabel = (args) => {
   const { revertActive, ...rest } = args;
   const aiLabel = (
-    <AILabel className="slug-container" revertActive={revertActive}>
+    <AILabel className="ai-label-container" revertActive={revertActive}>
       <AILabelContent>
         <div>
           <p className="secondary">AI Explained</p>
@@ -304,7 +304,7 @@ export const withAILabel = (args) => {
 
   return (
     <Stack gap={7} className="form-example">
-      <Form aria-label="sample form" className="slug-form">
+      <Form aria-label="sample form" className="ai-label-form">
         <Stack gap={7}>
           <NumberInput {...numberInputProps} slug={aiLabel} {...rest} />
           <DatePicker datePickerType="single">
@@ -382,7 +382,7 @@ export const withAILabel = (args) => {
         </Stack>
       </Form>
 
-      <FluidForm aria-label="sample ai form" className="fluid-slug-form">
+      <FluidForm aria-label="sample ai form" className="fluid-ai-label-form">
         <div style={{ display: 'flex' }}>
           <FluidDatePicker datePickerType="single" style={{ width: '100%' }}>
             <FluidDatePickerInput
diff --git a/packages/react/src/components/Modal/Modal.stories.js b/packages/react/src/components/Modal/Modal.stories.js
index de42df3fc8bd..f112e811cf1c 100644
--- a/packages/react/src/components/Modal/Modal.stories.js
+++ b/packages/react/src/components/Modal/Modal.stories.js
@@ -752,7 +752,7 @@ export const WithInlineLoading = () => {
 };
 
 const aiLabel = (
-  <AILabel className="slug-container">
+  <AILabel className="ai-label-container">
     <AILabelContent>
       <div>
         <p className="secondary">AI Explained</p>
@@ -786,7 +786,7 @@ export const withAILabel = {
   render: () => {
     const [open, setOpen] = useState(true); // eslint-disable-line
     return (
-      <div className="slug-modal">
+      <div className="ai-label-modal">
         <Button onClick={() => setOpen(true)}>Launch modal</Button>
         <Modal
           open={open}
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
index e7d43a14ceef..b6ffbae7c858 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
@@ -443,7 +443,7 @@ export const SelectAll = () => {
 };
 
 const aiLabel = (
-  <AILabel className="slug-container">
+  <AILabel className="ai-label-container">
     <AILabelContent>
       <div>
         <p className="secondary">AI Explained</p>
diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js
index f43f094982dc..1651de1c26c8 100644
--- a/packages/react/src/components/NumberInput/NumberInput.stories.js
+++ b/packages/react/src/components/NumberInput/NumberInput.stories.js
@@ -38,7 +38,7 @@ export const Default = () => {
 };
 
 const aiLabel = (
-  <AILabel className="slug-container">
+  <AILabel className="ai-label-container">
     <AILabelContent>
       <div>
         <p className="secondary">AI Explained</p>
diff --git a/packages/react/src/components/RadioButton/RadioButton.stories.js b/packages/react/src/components/RadioButton/RadioButton.stories.js
index 686f08ee6a58..052ee3f3544f 100644
--- a/packages/react/src/components/RadioButton/RadioButton.stories.js
+++ b/packages/react/src/components/RadioButton/RadioButton.stories.js
@@ -97,8 +97,8 @@ export const Skeleton = () => {
   return <RadioButtonSkeleton />;
 };
 
-const slugFunc = (kind) => (
-  <AILabel className="slug-container" kind={kind}>
+const AILabelFunc = (kind) => (
+  <AILabel className="ai-label-container" kind={kind}>
     <AILabelContent>
       <div>
         <p className="secondary">AI Explained</p>
@@ -130,9 +130,9 @@ const slugFunc = (kind) => (
 
 export const withAILabel = {
   render: () => (
-    <div className="slug-check-radio-container">
+    <div className="ai-label-check-radio-container">
       <RadioButtonGroup
-        slug={slugFunc('default')}
+        slug={AILabelFunc('default')}
         orientation="vertical"
         legendText="Group label"
         name="radio-button-group"
@@ -163,13 +163,13 @@ export const withAILabel = {
           labelText="Radio button label"
           value="radio-4"
           id="radio-4"
-          slug={slugFunc()}
+          slug={AILabelFunc()}
         />
         <RadioButton
           labelText="Radio button label"
           value="radio-5"
           id="radio-5"
-          slug={slugFunc()}
+          slug={AILabelFunc()}
         />
         <RadioButton
           labelText="Radio button label"
@@ -187,13 +187,13 @@ export const withAILabel = {
           labelText="Radio button label"
           value="radio-7"
           id="radio-7"
-          slug={slugFunc('inline')}
+          slug={AILabelFunc('inline')}
         />
         <RadioButton
           labelText="Radio button label"
           value="radio-8"
           id="radio-8"
-          slug={slugFunc('inline')}
+          slug={AILabelFunc('inline')}
         />
         <RadioButton
           labelText="Radio button label"
diff --git a/packages/react/src/components/RadioTile/RadioTile-test.js b/packages/react/src/components/RadioTile/RadioTile-test.js
index 7f123a53e21e..8d9e3e4483f0 100644
--- a/packages/react/src/components/RadioTile/RadioTile-test.js
+++ b/packages/react/src/components/RadioTile/RadioTile-test.js
@@ -143,7 +143,7 @@ describe('RadioTile', () => {
         Option 1{' '}
       </RadioTile>
     );
-    expect(screen.getByRole('button')).toHaveClass(`cds--slug__button--xs`);
+    expect(screen.getByRole('button')).toHaveClass(`cds--ai-label__button--xs`);
   });
 
   //Feature flag : enable-v12-tile-radio-icons
diff --git a/packages/react/src/components/Select/Select.stories.js b/packages/react/src/components/Select/Select.stories.js
index 6bd829f8201e..0177dc80ac1f 100644
--- a/packages/react/src/components/Select/Select.stories.js
+++ b/packages/react/src/components/Select/Select.stories.js
@@ -135,7 +135,7 @@ export const _WithLayer = () => (
 );
 
 const aiLabel = (
-  <AILabel className="slug-container">
+  <AILabel className="ai-label-container">
     <AILabelContent>
       <div>
         <p className="secondary">AI Explained</p>
diff --git a/packages/react/src/components/Tag/Tag.stories.js b/packages/react/src/components/Tag/Tag.stories.js
index 294ad9f65740..ddef8f4f2902 100644
--- a/packages/react/src/components/Tag/Tag.stories.js
+++ b/packages/react/src/components/Tag/Tag.stories.js
@@ -185,7 +185,7 @@ Skeleton.argTypes = {
 };
 
 const aiLabel = (
-  <AILabel className="slug-container">
+  <AILabel className="ai-label-container">
     <AILabelContent>
       <div>
         <p className="secondary">AI Explained</p>
diff --git a/packages/react/src/components/TextArea/TextArea.stories.js b/packages/react/src/components/TextArea/TextArea.stories.js
index 56553697add0..980ff7ec6457 100644
--- a/packages/react/src/components/TextArea/TextArea.stories.js
+++ b/packages/react/src/components/TextArea/TextArea.stories.js
@@ -52,7 +52,7 @@ export const _WithLayer = () => (
 );
 
 const aiLabel = (
-  <AILabel className="slug-container">
+  <AILabel className="ai-label-container">
     <AILabelContent>
       <div>
         <p className="secondary">AI Explained</p>
diff --git a/packages/react/src/components/TextInput/TextInput.stories.js b/packages/react/src/components/TextInput/TextInput.stories.js
index 9433e8331f74..2837e6a13d89 100644
--- a/packages/react/src/components/TextInput/TextInput.stories.js
+++ b/packages/react/src/components/TextInput/TextInput.stories.js
@@ -77,7 +77,7 @@ export const _WithLayer = () => (
 );
 
 const aiLabel = (
-  <AILabel className="slug-container">
+  <AILabel className="ai-label-container">
     <AILabelContent>
       <div>
         <p className="secondary">AI Explained</p>
diff --git a/packages/react/src/components/Tile/Tile.featureflag.stories.js b/packages/react/src/components/Tile/Tile.featureflag.stories.js
index 16af744b56b0..ff33d075dfc7 100644
--- a/packages/react/src/components/Tile/Tile.featureflag.stories.js
+++ b/packages/react/src/components/Tile/Tile.featureflag.stories.js
@@ -300,7 +300,7 @@ export const ExpandableWithLayer = () => {
 };
 
 const aiLabel = (
-  <AILabel className="slug-container">
+  <AILabel className="ai-label-container">
     <AILabelContent>
       <div>
         <p className="secondary">AI Explained</p>
@@ -343,14 +343,14 @@ export const _WithAILabel = {
     },
   },
   render: (args) => (
-    <div className="slug-selectable-tile-container slug-experimental-radio-tile-container">
+    <div className="ai-label-selectable-tile-container ai-label-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"
+          className="ai-label-radio-tile"
           id="radio-tile-4"
           value="standard"
           slug={aiLabel}
@@ -358,7 +358,7 @@ export const _WithAILabel = {
           Option 1
         </RadioTile>
         <RadioTile
-          className="slug-radio-tile"
+          className="ai-label-radio-tile"
           id="radio-tile-5"
           value="default-selected"
           slug={aiLabel}
@@ -366,7 +366,7 @@ export const _WithAILabel = {
           Option 2
         </RadioTile>
         <RadioTile
-          className="slug-radio-tile"
+          className="ai-label-radio-tile"
           id="radio-tile-6"
           value="selected"
           slug={aiLabel}
diff --git a/packages/react/src/components/Tile/Tile.stories.js b/packages/react/src/components/Tile/Tile.stories.js
index 51d8ed21d3a2..3f63bd2b262d 100644
--- a/packages/react/src/components/Tile/Tile.stories.js
+++ b/packages/react/src/components/Tile/Tile.stories.js
@@ -313,7 +313,7 @@ export const ExpandableWithLayer = () => (
 );
 
 const aiLabel = (
-  <AILabel className="slug-container">
+  <AILabel className="ai-label-container">
     <AILabelContent>
       <div>
         <p className="secondary">AI Explained</p>
@@ -357,7 +357,7 @@ export const withAILabel = {
   },
   render: (args) => (
     <>
-      <div className="slug-tile-container">
+      <div className="ai-label-tile-container">
         <Tile slug={aiLabel} id="tile-1" {...args}>
           <h4>Title</h4>
           <p>
@@ -431,7 +431,7 @@ export const withAILabel = {
         </ExpandableTile>
       </div>
 
-      <div className="slug-selectable-tile-container">
+      <div className="ai-label-selectable-tile-container">
         <TileGroup
           defaultSelected="default-selected"
           legend="Selectable Tile Group"
@@ -439,7 +439,7 @@ export const withAILabel = {
           {...args}>
           <div>
             <SelectableTile
-              className="slug-selectable-tile"
+              className="ai-label-selectable-tile"
               id="selectable-tile-1"
               slug={aiLabel}
               {...args}>
@@ -448,7 +448,7 @@ export const withAILabel = {
           </div>
           <div>
             <SelectableTile
-              className="slug-selectable-tile"
+              className="ai-label-selectable-tile"
               slug={aiLabel}
               id="selectable-tile-2"
               {...args}>
@@ -457,7 +457,7 @@ export const withAILabel = {
           </div>
           <div>
             <SelectableTile
-              className="slug-selectable-tile"
+              className="ai-label-selectable-tile"
               slug={aiLabel}
               id="selectable-tile-3"
               {...args}>
@@ -468,14 +468,14 @@ export const withAILabel = {
       </div>
       <br />
       <br />
-      <div className="slug-selectable-tile-container">
+      <div className="ai-label-selectable-tile-container">
         <TileGroup
           defaultSelected="default-selected"
           legend="Radio Tile Group"
           name="radio tile group"
           {...args}>
           <RadioTile
-            className="slug-radio-tile"
+            className="ai-label-radio-tile"
             id="radio-tile-1"
             value="standard"
             slug={aiLabel}
@@ -483,7 +483,7 @@ export const withAILabel = {
             Option 1
           </RadioTile>
           <RadioTile
-            className="slug-radio-tile"
+            className="ai-label-radio-tile"
             id="radio-tile-2"
             value="default-selected"
             slug={aiLabel}
@@ -491,7 +491,7 @@ export const withAILabel = {
             Option 2
           </RadioTile>
           <RadioTile
-            className="slug-radio-tile"
+            className="ai-label-radio-tile"
             id="radio-tile-3"
             value="selected"
             slug={aiLabel}
diff --git a/packages/styles/scss/components/checkbox/_checkbox.scss b/packages/styles/scss/components/checkbox/_checkbox.scss
index 37e989355013..7d5325e6ca0a 100644
--- a/packages/styles/scss/components/checkbox/_checkbox.scss
+++ b/packages/styles/scss/components/checkbox/_checkbox.scss
@@ -372,6 +372,12 @@
     display: flex;
   }
 
+  .#{$prefix}--checkbox-group--slug
+    legend.#{$prefix}--label
+    .#{$prefix}--ai-label,
+  .#{$prefix}--checkbox-wrapper--slug
+    .#{$prefix}--checkbox-label-text
+    .#{$prefix}--ai-label,
   .#{$prefix}--checkbox-group--slug legend.#{$prefix}--label .#{$prefix}--slug,
   .#{$prefix}--checkbox-wrapper--slug
     .#{$prefix}--checkbox-label-text
@@ -379,6 +385,9 @@
     margin-inline-start: $spacing-03;
   }
 
+  .#{$prefix}--checkbox-wrapper--slug
+    .#{$prefix}--checkbox-label-text
+    .#{$prefix}--ai-label__button--inline,
   .#{$prefix}--checkbox-wrapper--slug
     .#{$prefix}--checkbox-label-text
     .#{$prefix}--slug__button--inline {
diff --git a/packages/styles/scss/components/data-table/_data-table.scss b/packages/styles/scss/components/data-table/_data-table.scss
index 3d2565cdf650..27a7cdb1a6fe 100644
--- a/packages/styles/scss/components/data-table/_data-table.scss
+++ b/packages/styles/scss/components/data-table/_data-table.scss
@@ -1040,22 +1040,29 @@
     @include ai-table-gradient();
   }
 
+  .#{$prefix}--table-column-slug .#{$prefix}--ai-label,
   .#{$prefix}--table-column-slug .#{$prefix}--slug {
     position: absolute;
     z-index: 2;
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--data-table--xl
+    .#{$prefix}--table-column-slug
+    .#{$prefix}--ai-label,
   .#{$prefix}--data-table--xl .#{$prefix}--table-column-slug .#{$prefix}--slug {
     transform: translateY(1px);
   }
 
-  // Slug inside header styles
+  // AILabel inside header styles
   th .#{$prefix}--table-header-label.#{$prefix}--table-header-label--slug {
     display: flex;
     align-items: center;
   }
 
+  th
+    .#{$prefix}--table-header-label.#{$prefix}--table-header-label--slug
+    .#{$prefix}--ai-label,
   th
     .#{$prefix}--table-header-label.#{$prefix}--table-header-label--slug
     .#{$prefix}--slug {
diff --git a/packages/styles/scss/components/data-table/sort/_data-table-sort.scss b/packages/styles/scss/components/data-table/sort/_data-table-sort.scss
index 4078c571e16d..bbd6007a610f 100644
--- a/packages/styles/scss/components/data-table/sort/_data-table-sort.scss
+++ b/packages/styles/scss/components/data-table/sort/_data-table-sort.scss
@@ -243,12 +243,12 @@
     margin-block-start: convert.to-rem(13px);
   }
 
-  // Slug styles
+  // AILabel styles
   .#{$prefix}--table-sort__header--slug .#{$prefix}--table-sort__icon,
   .#{$prefix}--table-sort__header--slug .#{$prefix}--table-sort__icon-unsorted {
     margin-inline: auto convert.to-rem(8px);
   }
-
+  .#{$prefix}--table-sort__header--slug .#{$prefix}--ai-label,
   .#{$prefix}--table-sort__header--slug .#{$prefix}--slug {
     margin-inline-end: convert.to-rem(8px);
   }
diff --git a/packages/styles/scss/components/date-picker/_date-picker.scss b/packages/styles/scss/components/date-picker/_date-picker.scss
index f1992018bd68..b6113ed1cb57 100644
--- a/packages/styles/scss/components/date-picker/_date-picker.scss
+++ b/packages/styles/scss/components/date-picker/_date-picker.scss
@@ -190,7 +190,8 @@
     inline-size: convert.to-rem(143.5px);
   }
 
-  // Styles for `Slug` rendered inside `DatePickerInput`
+  // Styles for `AILabel` rendered inside `DatePickerInput`
+  .#{$prefix}--date-picker-input__wrapper--slug .#{$prefix}--ai-label,
   .#{$prefix}--date-picker-input__wrapper--slug .#{$prefix}--slug {
     position: absolute;
     inset-block-start: 50%;
@@ -199,7 +200,13 @@
   }
 
   .#{$prefix}--date-picker-input__wrapper--slug
-    .#{$prefix}--date-picker__input:not(:has(~ .#{$prefix}--slug--revert)) {
+    .#{$prefix}--date-picker__input:has(~ .#{$prefix}--ai-label):not(
+      :has(~ .#{$prefix}--ai-label--revert)
+    ),
+  .#{$prefix}--date-picker-input__wrapper--slug
+    .#{$prefix}--date-picker__input:has(~ .#{$prefix}--slug):not(
+      :has(~ .#{$prefix}--slug--revert)
+    ) {
     @include ai-gradient;
 
     padding-inline-end: $spacing-10;
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 0490dcd75aa6..6224b9503521 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
@@ -400,6 +400,9 @@
   }
 
   // Slug styles
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-input__wrapper--slug
+    .#{$prefix}--ai-label,
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker-input__wrapper--slug
     .#{$prefix}--slug {
@@ -407,14 +410,27 @@
   }
 
   .#{$prefix}--date-picker--fluid
-    .#{$prefix}--date-picker-input__wrapper--slug:not(
-      :has(.#{$prefix}--slug--revert)
+    .#{$prefix}--date-picker-input__wrapper--slug
+    .#{$prefix}--date-picker__input:has(~ .#{$prefix}--ai-label):not(
+      :has(~ .#{$prefix}--ai-label--revert)
+    ),
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-input__wrapper--slug
+    .#{$prefix}--date-picker__input:has(~ .#{$prefix}--slug):not(
+      :has(~ .#{$prefix}--slug--revert)
     ) {
     @include ai-gradient;
   }
 
   .#{$prefix}--date-picker--fluid
-    .#{$prefix}--date-picker-input__wrapper--slug:not(
+    .#{$prefix}--date-picker-input__wrapper--slug:has(
+      .#{$prefix}--ai-label
+    ):not(:has(.#{$prefix}--ai-label--revert))
+    .#{$prefix}--date-picker__input:not(
+      .#{$prefix}--date-picker__input--invalid
+    ),
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-input__wrapper--slug:has(.#{$prefix}--slug):not(
       :has(.#{$prefix}--slug--revert)
     )
     .#{$prefix}--date-picker__input:not(
diff --git a/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss b/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss
index d2790b1e99ca..a50acdd89c30 100644
--- a/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss
+++ b/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss
@@ -283,12 +283,20 @@
     inset-inline-start: $spacing-05;
   }
 
-  // Slug styles
+  // AILabel styles
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--ai-label,
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--slug {
     inset-block-start: convert.to-rem(42px);
   }
 
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--ai-label,
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid
+    .#{$prefix}--ai-label,
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--warning
     .#{$prefix}--slug,
@@ -316,6 +324,18 @@
     padding-inline-end: convert.to-rem(88px);
   }
 
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field:has(
+      .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty)
+    )
+    ~ .#{$prefix}--ai-label,
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid
+    .#{$prefix}--list-box__field:has(
+      .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty)
+    )
+    ~ .#{$prefix}--ai-label,
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--warning
     .#{$prefix}--list-box__field:has(
@@ -364,7 +384,13 @@
     inset-inline-end: $spacing-04;
   }
 
-  // remove slug divider when element is invalid and fluid
+  // remove ai-label divider when element is invalid and fluid
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid[data-invalid]
+    .#{$prefix}--ai-label::before,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--ai-label::before,
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--invalid[data-invalid]
     .#{$prefix}--slug::before,
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 dd512d068624..57d20e8a8c3f 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
@@ -277,13 +277,22 @@
     background-color: transparent;
   }
 
-  // Slug styles
+  // AILabel styles
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--slug
+    .#{$prefix}--ai-label,
   .#{$prefix}--number-input--fluid
     .#{$prefix}--number__input-wrapper--slug
     .#{$prefix}--slug {
     inset-block-start: convert.to-rem(43px);
   }
 
+  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number__input-wrapper--slug
+    .#{$prefix}--ai-label,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--slug.#{$prefix}--number__input-wrapper--warning
+    .#{$prefix}--ai-label,
   .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--invalid
     .#{$prefix}--number__input-wrapper--slug
     .#{$prefix}--slug,
@@ -306,7 +315,11 @@
   }
 
   .#{$prefix}--number-input--fluid
-    .#{$prefix}--number__input-wrapper--slug:not(
+    .#{$prefix}--number__input-wrapper--slug:has(.#{$prefix}--ai-label):not(
+      :has(.#{$prefix}--ai-label--revert)
+    ),
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--slug:has(.#{$prefix}--slug):not(
       :has(.#{$prefix}--slug--revert)
     ) {
     @include ai-gradient;
diff --git a/packages/styles/scss/components/fluid-select/_fluid-select.scss b/packages/styles/scss/components/fluid-select/_fluid-select.scss
index 12b83a647de9..a2e8e7ca7a75 100644
--- a/packages/styles/scss/components/fluid-select/_fluid-select.scss
+++ b/packages/styles/scss/components/fluid-select/_fluid-select.scss
@@ -200,7 +200,8 @@
     fill: $icon-disabled;
   }
 
-  // Slug styles
+  // AILabel styles
+  .#{$prefix}--select--fluid .#{$prefix}--select--slug .#{$prefix}--ai-label,
   .#{$prefix}--select--fluid .#{$prefix}--select--slug .#{$prefix}--slug {
     inset-block-start: convert.to-rem(42px);
     inset-inline-end: $spacing-08;
@@ -212,7 +213,10 @@
     padding-inline-end: $spacing-10;
   }
 
-  // remove slug divider when element is invalid and fluid
+  // remove ai-label divider when element is invalid and fluid
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
+    .#{$prefix}--ai-label::before,
   .#{$prefix}--select--fluid
     .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
     .#{$prefix}--slug::before {
diff --git a/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss b/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
index 2f324ff2bd99..c3b0f0b24c13 100644
--- a/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
+++ b/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
@@ -218,14 +218,26 @@
     inline-size: 80%;
   }
 
-  // Slug styles
+  // AILabel styles
   .#{$prefix}--text-area--fluid
-    .#{$prefix}--text-area__wrapper--slug:not(
-      :has(~ .#{$prefix}--slug--revert)
+    .#{$prefix}--text-area__wrapper--slug:has(.#{$prefix}--ai-label):not(
+      :has(.#{$prefix}--ai-label--revert)
+    ),
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper--slug:has(.#{$prefix}--slug):not(
+      :has(.#{$prefix}--slug--revert)
     ) {
     @include ai-gradient;
   }
 
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper--slug
+    .#{$prefix}--text-area--invalid
+    ~ .#{$prefix}--ai-label,
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper--slug
+    .#{$prefix}--text-area--warn
+    ~ .#{$prefix}--ai-label,
   .#{$prefix}--text-area--fluid
     .#{$prefix}--text-area__wrapper--slug
     .#{$prefix}--text-area--invalid
diff --git a/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss b/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss
index af4b857afc54..ef1bd24a8841 100644
--- a/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss
+++ b/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss
@@ -205,13 +205,22 @@
     inset-inline-start: $spacing-05;
   }
 
-  // Slug styles
+  // AILabel styles
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input__field-wrapper--slug
+    .#{$prefix}--ai-label,
   .#{$prefix}--text-input--fluid
     .#{$prefix}--text-input__field-wrapper--slug
     .#{$prefix}--slug {
     inset-block-start: convert.to-rem(42px);
   }
 
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input--invalid
+    ~ .#{$prefix}--ai-label,
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input--warning
+    ~ .#{$prefix}--ai-label,
   .#{$prefix}--text-input--fluid
     .#{$prefix}--text-input--invalid
     ~ .#{$prefix}--slug,
diff --git a/packages/styles/scss/components/list-box/_list-box.scss b/packages/styles/scss/components/list-box/_list-box.scss
index 3ff3d1f0ec4a..c69eeeea18df 100644
--- a/packages/styles/scss/components/list-box/_list-box.scss
+++ b/packages/styles/scss/components/list-box/_list-box.scss
@@ -885,7 +885,8 @@ $list-box-menu-width: convert.to-rem(300px);
     text-overflow: ellipsis;
   }
 
-  // Slug styles
+  // AILabel styles
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--ai-label,
   .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug {
     position: absolute;
     inset-block-start: 50%;
@@ -894,6 +895,8 @@ $list-box-menu-width: convert.to-rem(300px);
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--ai-label::after,
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--ai-label::before,
   .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug::after,
   .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug::before {
     position: absolute;
@@ -903,23 +906,32 @@ $list-box-menu-width: convert.to-rem(300px);
     inline-size: convert.to-rem(1px);
   }
 
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--ai-label::before,
   .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug::before {
     display: none;
     inset-inline-start: convert.to-rem(-9px);
   }
 
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--ai-label::after,
   .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug::after {
     display: block;
     inset-inline-end: convert.to-rem(-9px);
   }
 
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--ai-label--revert::after,
   .#{$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)) {
+    .#{$prefix}--list-box:has(.#{$prefix}--ai-label):not(
+      :has(.#{$prefix}--ai-label--revert)
+    ),
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box:has(.#{$prefix}--slug):not(
+      :has(.#{$prefix}--slug--revert)
+    ) {
     @include ai-gradient;
   }
 
@@ -976,6 +988,12 @@ $list-box-menu-width: convert.to-rem(300px);
     inset-inline-end: convert.to-rem(83px);
   }
 
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid[data-invalid]
+    .#{$prefix}--ai-label::before,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--ai-label::before,
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--invalid[data-invalid]
     .#{$prefix}--slug::before,
@@ -985,6 +1003,13 @@ $list-box-menu-width: convert.to-rem(300px);
     display: block;
   }
 
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
+    ~ .#{$prefix}--ai-label,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
+    ~ .#{$prefix}--ai-label,
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
     ~ .#{$prefix}--slug,
diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss
index e170695cab09..8f150c68ca97 100644
--- a/packages/styles/scss/components/modal/_modal.scss
+++ b/packages/styles/scss/components/modal/_modal.scss
@@ -403,6 +403,14 @@
       linear-gradient(to top, $layer 0, 2px, transparent 2px);
   }
 
+  .#{$prefix}--modal-header
+    > .#{$prefix}--ai-label:has(+ .#{$prefix}--modal-close-button),
+  .#{$prefix}--modal-header
+    > .#{$prefix}--modal-close-button
+    ~ .#{$prefix}--ai-label,
+  .#{$prefix}--modal--slug
+    .#{$prefix}--modal-container-body
+    > .#{$prefix}--ai-label,
   .#{$prefix}--modal-header
     > .#{$prefix}--slug:has(+ .#{$prefix}--modal-close-button),
   .#{$prefix}--modal-header
diff --git a/packages/styles/scss/components/number-input/_number-input.scss b/packages/styles/scss/components/number-input/_number-input.scss
index f8d7253dbeb5..7b3bba347711 100644
--- a/packages/styles/scss/components/number-input/_number-input.scss
+++ b/packages/styles/scss/components/number-input/_number-input.scss
@@ -426,7 +426,8 @@
     background-color: $border-subtle;
   }
 
-  // Styles for `Slug` rendered inside `NumberInput`
+  // Styles for `AILabel` rendered inside `NumberInput`
+  .#{$prefix}--number__input-wrapper--slug .#{$prefix}--ai-label,
   .#{$prefix}--number__input-wrapper--slug .#{$prefix}--slug {
     position: absolute;
     inset-block-start: 50%;
@@ -434,6 +435,7 @@
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--number__input-wrapper--slug .#{$prefix}--ai-label::before,
   .#{$prefix}--number__input-wrapper--slug .#{$prefix}--slug::before,
   .#{$prefix}--number__input-wrapper--slug
     .#{$prefix}--number__control-btn::before,
@@ -445,7 +447,7 @@
     content: '';
     inline-size: convert.to-rem(1px);
   }
-
+  .#{$prefix}--number__input-wrapper--slug .#{$prefix}--ai-label::before,
   .#{$prefix}--number__input-wrapper--slug .#{$prefix}--slug::before {
     display: none;
     inset-inline-start: convert.to-rem(-16px);
@@ -487,6 +489,8 @@
     inset-inline-end: $spacing-13 - $spacing-05;
   }
 
+  .#{$prefix}--number__input-wrapper--slug:has(.#{$prefix}--number__invalid)
+    .#{$prefix}--ai-label::before,
   .#{$prefix}--number__input-wrapper--slug:has(.#{$prefix}--number__invalid)
     .#{$prefix}--slug::before {
     display: block;
@@ -502,7 +506,13 @@
   }
 
   .#{$prefix}--number__input-wrapper--slug
-    input[type='number']:not(:has(~ .#{$prefix}--slug--revert)),
+    input[type='number']:has(~ .#{$prefix}--ai-label):not(
+      :has(~ .#{$prefix}--ai-label--revert)
+    ),
+  .#{$prefix}--number__input-wrapper--slug
+    input[type='number']:has(~ .#{$prefix}--slug):not(
+      :has(~ .#{$prefix}--slug--revert)
+    ),
   .#{$prefix}--number__input-wrapper--slug input[type='number']:disabled {
     @include ai-gradient;
 
diff --git a/packages/styles/scss/components/radio-button/_radio-button.scss b/packages/styles/scss/components/radio-button/_radio-button.scss
index 31165501faee..a3f542f29f84 100644
--- a/packages/styles/scss/components/radio-button/_radio-button.scss
+++ b/packages/styles/scss/components/radio-button/_radio-button.scss
@@ -288,13 +288,19 @@ $radio-border-width: 1px !default;
     margin-inline: $spacing-03 0;
   }
 
-  // Slug styles
+  // AILabel styles
   .#{$prefix}--radio-button-group--slug legend.#{$prefix}--label,
   .#{$prefix}--radio-button-wrapper--slug
     .#{$prefix}--radio-button__label-text {
     display: flex;
   }
 
+  .#{$prefix}--radio-button-group--slug
+    legend.#{$prefix}--label
+    .#{$prefix}--ai-label,
+  .#{$prefix}--radio-button-wrapper--slug
+    .#{$prefix}--radio-button__label-text
+    .#{$prefix}--ai-label,
   .#{$prefix}--radio-button-group--slug
     legend.#{$prefix}--label
     .#{$prefix}--slug,
@@ -304,6 +310,9 @@ $radio-border-width: 1px !default;
     margin-inline-start: $spacing-03;
   }
 
+  .#{$prefix}--radio-button-wrapper--slug
+    .#{$prefix}--radio-button__label-text
+    .#{$prefix}--ai-label__button--inline,
   .#{$prefix}--radio-button-wrapper--slug
     .#{$prefix}--radio-button__label-text
     .#{$prefix}--slug__button--inline {
diff --git a/packages/styles/scss/components/select/_select.scss b/packages/styles/scss/components/select/_select.scss
index a7e638f88c28..3632bfd885f2 100644
--- a/packages/styles/scss/components/select/_select.scss
+++ b/packages/styles/scss/components/select/_select.scss
@@ -279,10 +279,11 @@
     display: none;
   }
 
-  // Slug styles
+  // AILabel styles
 
   $divider-width: 1px;
 
+  .#{$prefix}--select--slug .#{$prefix}--ai-label,
   .#{$prefix}--select--slug .#{$prefix}--slug {
     position: absolute;
     inset-block-start: 50%;
@@ -291,6 +292,8 @@
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--select--slug .#{$prefix}--ai-label::after,
+  .#{$prefix}--select--slug .#{$prefix}--ai-label::before,
   .#{$prefix}--select--slug .#{$prefix}--slug::after,
   .#{$prefix}--select--slug .#{$prefix}--slug::before {
     position: absolute;
@@ -300,33 +303,50 @@
     inline-size: convert.to-rem(1px);
   }
 
+  .#{$prefix}--select--slug .#{$prefix}--ai-label::before,
   .#{$prefix}--select--slug .#{$prefix}--slug::before {
     display: none;
     inset-inline-start: calc(-#{$spacing-03} - #{$divider-width});
   }
 
+  .#{$prefix}--select--slug .#{$prefix}--ai-label::after,
   .#{$prefix}--select--slug .#{$prefix}--slug::after {
     display: block;
     inset-inline-end: calc(-#{$spacing-03} - #{$divider-width});
   }
 
+  .#{$prefix}--select--slug .#{$prefix}--ai-label--revert::after,
   .#{$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)) {
+    .#{$prefix}--select-input:has(~ .#{$prefix}--ai-label):not(
+      :has(~ .#{$prefix}--ai-label--revert)
+    ),
+  .#{$prefix}--select--slug
+    .#{$prefix}--select-input:has(~ .#{$prefix}--slug):not(
+      :has(~ .#{$prefix}--slug--revert)
+    ) {
     @include ai-gradient;
 
     padding-inline-end: $spacing-10;
   }
 
   .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
-    .#{$prefix}--select-input:not(:has(~ .#{$prefix}--slug--revert)) {
+    .#{$prefix}--select-input:has(~ .#{$prefix}--ai-label):not(
+      :has(~ .#{$prefix}--ai-label--revert)
+    ),
+  .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
+    .#{$prefix}--select-input:has(~ .#{$prefix}--slug):not(
+      :has(~ .#{$prefix}--slug--revert)
+    ) {
     padding-inline-end: $spacing-12;
   }
 
+  .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
+    .#{$prefix}--ai-label::before,
   .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
     .#{$prefix}--slug::before {
     display: block;
diff --git a/packages/styles/scss/components/slug/_slug.scss b/packages/styles/scss/components/slug/_slug.scss
index cdaff30bc99a..4b74f7dd6f9c 100644
--- a/packages/styles/scss/components/slug/_slug.scss
+++ b/packages/styles/scss/components/slug/_slug.scss
@@ -58,14 +58,17 @@ $sizes: (
 /// @access public
 /// @group AI
 @mixin slug {
+  .#{$prefix}--ai-label,
   .#{$prefix}--slug {
     display: flex;
   }
 
+  .#{$prefix}--ai-label:has(> .#{$prefix}--popover--open),
   .#{$prefix}--slug:has(> .#{$prefix}--popover--open) {
     z-index: 2;
   }
 
+  .#{$prefix}--ai-label .#{$prefix}--ai-label__button,
   .#{$prefix}--slug .#{$prefix}--slug__button {
     position: relative;
     display: flex;
@@ -83,7 +86,7 @@ $sizes: (
       background $duration-fast-01 motion(entrance, productive);
 
     @each $group, $size in $sizes {
-      // Create a class for each size slug
+      // Create a class for each size ai label
       &--#{$group} {
         @each $property, $value in $size {
           // Set correct properties for each size
@@ -94,6 +97,8 @@ $sizes: (
   }
 
   // Add 24px click target for mini, 2xs sizes
+  .#{$prefix}--ai-label__button--mini::after,
+  .#{$prefix}--ai-label__button--2xs::after,
   .#{$prefix}--slug__button--mini::after,
   .#{$prefix}--slug__button--2xs::after {
     position: absolute;
@@ -103,16 +108,19 @@ $sizes: (
     inline-size: 24px;
   }
 
+  .#{$prefix}--ai-label .#{$prefix}--ai-label__button:focus,
   .#{$prefix}--slug .#{$prefix}--slug__button:focus {
     border: 1px solid $focus;
     box-shadow: inset 0 0 0 1px $focus;
   }
 
+  .#{$prefix}--ai-label .#{$prefix}--ai-label__button:hover,
   .#{$prefix}--slug .#{$prefix}--slug__button:hover {
     background: $border-inverse;
     color: $text-inverse;
   }
 
+  .#{$prefix}--ai-label .#{$prefix}--ai-label__button:hover:active,
   .#{$prefix}--slug .#{$prefix}--slug__button:hover:active {
     background: $border-inverse;
     box-shadow:
@@ -121,6 +129,10 @@ $sizes: (
     color: $text-inverse;
   }
 
+  .#{$prefix}--ai-label
+    .#{$prefix}--ai-label__button.#{$prefix}--ai-label__button--mini:hover:active,
+  .#{$prefix}--ai-label
+    .#{$prefix}--ai-label__button.#{$prefix}--ai-label__button--2xs:hover:active,
   .#{$prefix}--slug
     .#{$prefix}--slug__button.#{$prefix}--slug__button--mini:hover:active,
   .#{$prefix}--slug
@@ -128,12 +140,14 @@ $sizes: (
     box-shadow: inset 0 0 0 1px $focus-inset;
   }
 
+  .#{$prefix}--ai-label__text,
   .#{$prefix}--slug__text {
     position: relative;
     z-index: 1;
   }
 
   // Inline slug
+  .#{$prefix}--ai-label .#{$prefix}--ai-label__button--inline,
   .#{$prefix}--slug .#{$prefix}--slug__button--inline {
     border: 1px solid transparent;
     border-radius: convert.to-rem(1px);
@@ -146,15 +160,19 @@ $sizes: (
     padding-inline: convert.to-rem(4px);
   }
 
+  .#{$prefix}--ai-label__button--inline::before,
   .#{$prefix}--slug__button--inline::before {
     display: none;
   }
 
+  .#{$prefix}--ai-label .#{$prefix}--ai-label__button--inline:focus,
   .#{$prefix}--slug .#{$prefix}--slug__button--inline:focus {
     border-color: $focus;
     box-shadow: none;
   }
 
+  .#{$prefix}--ai-label .#{$prefix}--ai-label__button--inline:hover,
+  .#{$prefix}--ai-label .#{$prefix}--ai-label__button--inline:hover:active,
   .#{$prefix}--slug .#{$prefix}--slug__button--inline:hover,
   .#{$prefix}--slug .#{$prefix}--slug__button--inline:hover:active {
     border-color: $icon-secondary;
@@ -163,20 +181,29 @@ $sizes: (
     color: $text-secondary;
   }
 
+  .#{$prefix}--ai-label .#{$prefix}--ai-label__button--inline:focus:hover,
   .#{$prefix}--slug .#{$prefix}--slug__button--inline:focus:hover {
     border-color: $focus;
   }
 
+  .#{$prefix}--ai-label
+    .#{$prefix}--ai-label__button--inline:hover
+    .#{$prefix}--ai-label__text::before,
   .#{$prefix}--slug
     .#{$prefix}--slug__button--inline:hover
     .#{$prefix}--slug__text::before {
     background: $icon-secondary;
   }
 
+  .#{$prefix}--ai-label__button--inline .#{$prefix}--ai-label__text,
   .#{$prefix}--slug__button--inline .#{$prefix}--slug__text {
     padding-inline-start: convert.to-rem(8px);
   }
 
+  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--lg
+    .#{$prefix}--ai-label__text,
+  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--xl
+    .#{$prefix}--ai-label__text,
   .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--lg
     .#{$prefix}--slug__text,
   .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--xl
@@ -184,6 +211,7 @@ $sizes: (
     padding-inline-start: convert.to-rem(12px);
   }
 
+  .#{$prefix}--ai-label__button--inline .#{$prefix}--ai-label__text::before,
   .#{$prefix}--slug__button--inline .#{$prefix}--slug__text::before {
     position: absolute;
     display: inline-block;
@@ -200,6 +228,8 @@ $sizes: (
       box-shadow $duration-fast-01 motion(entrance, productive);
   }
 
+  .#{$prefix}--ai-label__button--lg .#{$prefix}--ai-label__text::before,
+  .#{$prefix}--ai-label__button--xl .#{$prefix}--ai-label__text::before,
   .#{$prefix}--slug__button--lg .#{$prefix}--slug__text::before,
   .#{$prefix}--slug__button--xl .#{$prefix}--slug__text::before {
     block-size: convert.to-rem(8px);
@@ -207,6 +237,18 @@ $sizes: (
   }
 
   // Only allow sm, md, and lg sizes
+  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--mini,
+  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--mini
+    .#{$prefix}--ai-label__additional-text,
+  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--2xs,
+  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--2xs
+    .#{$prefix}--ai-label__additional-text,
+  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--xs,
+  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--xs
+    .#{$prefix}--ai-label__additional-text,
+  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--sm,
+  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--sm
+    .#{$prefix}--ai-label__additional-text,
   .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--mini,
   .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--mini
     .#{$prefix}--slug__additional-text,
@@ -222,18 +264,23 @@ $sizes: (
     font-size: convert.to-rem(12px);
   }
 
+  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--lg,
+  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--xl,
   .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--lg,
   .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--xl {
     font-size: convert.to-rem(16px);
   }
 
   // Inline slug with text
+  .#{$prefix}--ai-label .#{$prefix}--ai-label__button--inline-with-content,
   .#{$prefix}--slug .#{$prefix}--slug__button--inline-with-content {
     border: 1px solid $border-inverse;
     padding-block: convert.to-rem(2px);
     padding-inline: convert.to-rem(8px);
   }
 
+  .#{$prefix}--ai-label__button--inline-with-content
+    .#{$prefix}--ai-label__additional-text,
   .#{$prefix}--slug__button--inline-with-content
     .#{$prefix}--slug__additional-text {
     @include type-style('body-compact-02');
@@ -241,17 +288,24 @@ $sizes: (
     padding-inline-start: convert.to-rem(4px);
   }
 
+  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--md
+    .#{$prefix}--ai-label__additional-text,
   .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--md
     .#{$prefix}--slug__additional-text {
     font-size: convert.to-rem(14px);
   }
 
+  .#{$prefix}--ai-label
+    .#{$prefix}--ai-label__button--inline-with-content:focus,
+  .#{$prefix}--ai-label
+    .#{$prefix}--ai-label__button--inline-with-content:hover:focus,
   .#{$prefix}--slug .#{$prefix}--slug__button--inline-with-content:focus,
   .#{$prefix}--slug .#{$prefix}--slug__button--inline-with-content:hover:focus {
     box-shadow: inset 0 0 0 1px $focus;
   }
 
   // Slug callout styles
+  .#{$prefix}--ai-label .#{$prefix}--ai-label-content,
   .#{$prefix}--slug .#{$prefix}--slug-content {
     @include ai-popover-gradient();
 
@@ -267,6 +321,16 @@ $sizes: (
   }
 
   // Slug callout caret styles
+  .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
+    .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content
+    > .#{$prefix}--popover-caret,
   .#{$prefix}--slug
     > .#{$prefix}--toggletip
     > .#{$prefix}--popover
@@ -282,6 +346,58 @@ $sizes: (
   }
 
   // Caret pseudo element base styles
+  .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip:is(
+      .#{$prefix}--popover--top,
+      .#{$prefix}--popover--top-right,
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start,
+      .#{$prefix}--popover--bottom,
+      .#{$prefix}--popover--bottom-right,
+      .#{$prefix}--popover--bottom-left,
+      .#{$prefix}--popover--bottom-start,
+      .#{$prefix}--popover--bottom-end,
+      .#{$prefix}--popover--left,
+      .#{$prefix}--popover--left-top,
+      .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--left-start,
+      .#{$prefix}--popover--left-end,
+      .#{$prefix}--popover--right,
+      .#{$prefix}--popover--right-top,
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--right-start,
+      .#{$prefix}--popover--right-end
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret::before,
+    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
+    .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
+      .#{$prefix}--popover--top,
+      .#{$prefix}--popover--top-right,
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start,
+      .#{$prefix}--popover--bottom,
+      .#{$prefix}--popover--bottom-right,
+      .#{$prefix}--popover--bottom-left,
+      .#{$prefix}--popover--bottom-start,
+      .#{$prefix}--popover--bottom-end,
+      .#{$prefix}--popover--left,
+      .#{$prefix}--popover--left-top,
+      .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--left-start,
+      .#{$prefix}--popover--left-end,
+      .#{$prefix}--popover--right,
+      .#{$prefix}--popover--right-top,
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--right-start,
+      .#{$prefix}--popover--right-end
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content
+    > .#{$prefix}--popover-caret::before,
   .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--top,
@@ -345,6 +461,58 @@ $sizes: (
     transform: rotate(45deg);
   }
 
+  .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip:is(
+      .#{$prefix}--popover--top,
+      .#{$prefix}--popover--top-right,
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start,
+      .#{$prefix}--popover--bottom,
+      .#{$prefix}--popover--bottom-right,
+      .#{$prefix}--popover--bottom-left,
+      .#{$prefix}--popover--bottom-start,
+      .#{$prefix}--popover--bottom-end,
+      .#{$prefix}--popover--left,
+      .#{$prefix}--popover--left-top,
+      .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--left-start,
+      .#{$prefix}--popover--left-end,
+      .#{$prefix}--popover--right,
+      .#{$prefix}--popover--right-top,
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--right-start,
+      .#{$prefix}--popover--right-end
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret::after,
+    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
+    .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
+      .#{$prefix}--popover--top,
+      .#{$prefix}--popover--top-right,
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start,
+      .#{$prefix}--popover--bottom,
+      .#{$prefix}--popover--bottom-right,
+      .#{$prefix}--popover--bottom-left,
+      .#{$prefix}--popover--bottom-start,
+      .#{$prefix}--popover--bottom-end,
+      .#{$prefix}--popover--left,
+      .#{$prefix}--popover--left-top,
+      .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--left-start,
+      .#{$prefix}--popover--left-end,
+      .#{$prefix}--popover--right,
+      .#{$prefix}--popover--right-top,
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--right-start,
+      .#{$prefix}--popover--right-end
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content
+    > .#{$prefix}--popover-caret::after,
   .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--top,
@@ -406,6 +574,28 @@ $sizes: (
   }
 
   // Top
+  .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip:is(
+      .#{$prefix}--popover--top,
+      .#{$prefix}--popover--top-right,
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
+    .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
+      .#{$prefix}--popover--top,
+      .#{$prefix}--popover--top-right,
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content
+    > .#{$prefix}--popover-caret,
   .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--top,
@@ -444,6 +634,17 @@ $sizes: (
     }
   }
 
+  .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip:is(
+      .#{$prefix}--popover--top,
+      .#{$prefix}--popover--top-right,
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--ai-label-content--with-actions
+    + .#{$prefix}--popover-caret::after,
   .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--top,
@@ -459,6 +660,28 @@ $sizes: (
   }
 
   // Right
+  .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip:is(
+      .#{$prefix}--popover--right,
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--right-top,
+      .#{$prefix}--popover--right-start,
+      .#{$prefix}--popover--right-end
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
+    .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
+      .#{$prefix}--popover--right,
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--right-top,
+      .#{$prefix}--popover--right-start,
+      .#{$prefix}--popover--right-end
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content
+    > .#{$prefix}--popover-caret,
   .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--right,
@@ -495,6 +718,28 @@ $sizes: (
   }
 
   // Bottom
+  .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip:is(
+      .#{$prefix}--popover--bottom,
+      .#{$prefix}--popover--bottom-left,
+      .#{$prefix}--popover--bottom-right,
+      .#{$prefix}--popover--bottom-start,
+      .#{$prefix}--popover--bottom-end
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
+    .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
+      .#{$prefix}--popover--bottom,
+      .#{$prefix}--popover--bottom-left,
+      .#{$prefix}--popover--bottom-right,
+      .#{$prefix}--popover--bottom-start,
+      .#{$prefix}--popover--bottom-end
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content
+    > .#{$prefix}--popover-caret,
   .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--bottom,
@@ -533,6 +778,28 @@ $sizes: (
   }
 
   // Left
+  .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip:is(
+      .#{$prefix}--popover--left,
+      .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--left-top,
+      .#{$prefix}--popover--left-start,
+      .#{$prefix}--popover--left-end
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
+    .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
+      .#{$prefix}--popover--left,
+      .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--left-top,
+      .#{$prefix}--popover--left-start,
+      .#{$prefix}--popover--left-end
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content
+    > .#{$prefix}--popover-caret,
   .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--left,
@@ -569,6 +836,26 @@ $sizes: (
   }
 
   // Override for specific alignments
+  .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip:is(
+      .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--left-end,
+      .#{$prefix}--popover--right-end
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret::after,
+    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
+    .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
+      .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--left-end,
+      .#{$prefix}--popover--right-end
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content
+    > .#{$prefix}--popover-caret::after,
   .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--left-bottom,
@@ -593,6 +880,36 @@ $sizes: (
   }
 
   // Change caret color / border when it is near the bottom of the callout
+  .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip:is(
+      .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--left-end,
+      .#{$prefix}--popover--right-end,
+      .#{$prefix}--popover--top,
+      .#{$prefix}--popover--top-right,
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
+    .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
+      .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--left-end,
+      .#{$prefix}--popover--right-end,
+      .#{$prefix}--popover--top,
+      .#{$prefix}--popover--top-right,
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content
+    > .#{$prefix}--popover-caret,
   .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--left-bottom,
@@ -630,6 +947,36 @@ $sizes: (
   }
 
   // Adjust background if actions are present
+  .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip:is(
+      .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--left-end,
+      .#{$prefix}--popover--right-end,
+      .#{$prefix}--popover--top,
+      .#{$prefix}--popover--top-right,
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start
+    )
+    > .#{$prefix}--popover:has(.#{$prefix}--ai-label-content--with-actions)
+    > .#{$prefix}--popover-caret,
+    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
+    .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
+      .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--left-end,
+      .#{$prefix}--popover--right-end,
+      .#{$prefix}--popover--top,
+      .#{$prefix}--popover--top-right,
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-start,
+      .#{$prefix}--popover--top-end
+    )
+    > .#{$prefix}--popover:has(.#{$prefix}--ai-label-content--with-actions)
+    > .#{$prefix}--popover-content
+    > .#{$prefix}--popover-caret,
   .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--left-bottom,
@@ -666,6 +1013,22 @@ $sizes: (
   }
 
   // Change the caret border when it is near the middle of the callout
+  .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip:is(
+      .#{$prefix}--popover--left,
+      .#{$prefix}--popover--right
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
+    .#{$prefix}--ai-label
+    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
+      .#{$prefix}--popover--left,
+      .#{$prefix}--popover--right
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content
+    > .#{$prefix}--popover-caret,
   .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--left,
@@ -687,16 +1050,21 @@ $sizes: (
     }
   }
 
+  .#{$prefix}--ai-label .#{$prefix}--toggletip-content,
   .#{$prefix}--slug .#{$prefix}--toggletip-content {
     // This sets the max size to the size of the action bar with 3 buttons
     padding-block: convert.to-rem(24px) convert.to-rem(80px);
     padding-inline: convert.to-rem(24px);
   }
 
+  .#{$prefix}--ai-label
+    .#{$prefix}--ai-label-content
+    .#{$prefix}--toggletip-content,
   .#{$prefix}--slug .#{$prefix}--slug-content .#{$prefix}--toggletip-content {
     max-inline-size: convert.to-rem(320px);
   }
 
+  .#{$prefix}--ai-label .#{$prefix}--ai-label-actions,
   .#{$prefix}--slug .#{$prefix}--slug-actions {
     position: absolute;
     justify-content: flex-end;
@@ -710,6 +1078,7 @@ $sizes: (
     inset-inline-end: 0;
   }
 
+  .#{$prefix}--ai-label .#{$prefix}--ai-label-actions .#{$prefix}--btn:focus,
   .#{$prefix}--slug .#{$prefix}--slug-actions .#{$prefix}--btn:focus {
     border-color: $focus;
     box-shadow:
@@ -717,21 +1086,25 @@ $sizes: (
       inset 0 0 0 2px $background;
   }
 
+  .#{$prefix}--ai-label .#{$prefix}--ai-label-actions .#{$prefix}--btn--primary,
   .#{$prefix}--slug .#{$prefix}--slug-actions .#{$prefix}--btn--primary {
     order: 1;
     border-end-end-radius: convert.to-rem(7px);
   }
 
   // Revert styles
+  .#{$prefix}--ai-label.#{$prefix}--ai-label--revert,
   .#{$prefix}--slug.#{$prefix}--slug--revert {
     transform: translate($spacing-03, -50%);
   }
 
+  .#{$prefix}--ai-label--revert .#{$prefix}--btn--icon-only,
   .#{$prefix}--slug--revert .#{$prefix}--btn--icon-only {
     align-items: center;
     padding-block-start: 0;
   }
 
+  .#{$prefix}--ai-label--revert .#{$prefix}--btn--icon-only svg,
   .#{$prefix}--slug--revert .#{$prefix}--btn--icon-only svg {
     margin: 0;
   }
diff --git a/packages/styles/scss/components/tag/_tag.scss b/packages/styles/scss/components/tag/_tag.scss
index e9cd524b492c..4a6c8e6dbd60 100644
--- a/packages/styles/scss/components/tag/_tag.scss
+++ b/packages/styles/scss/components/tag/_tag.scss
@@ -380,12 +380,17 @@
     }
   }
 
-  // Slug styles
+  // AILabel styles
+  .#{$prefix}--tag .#{$prefix}--ai-label .#{$prefix}--ai-label__button--inline,
   .#{$prefix}--tag .#{$prefix}--slug .#{$prefix}--slug__button--inline {
     color: currentColor;
     margin-inline-start: convert.to-rem(1px);
   }
 
+  .#{$prefix}--tag
+    .#{$prefix}--ai-label
+    .#{$prefix}--ai-label__button--inline
+    .#{$prefix}--ai-label__text::before,
   .#{$prefix}--tag
     .#{$prefix}--slug
     .#{$prefix}--slug__button--inline
@@ -393,10 +398,14 @@
     background-color: currentColor;
   }
 
+  .#{$prefix}--tag
+    .#{$prefix}--ai-label
+    .#{$prefix}--ai-label__button--inline:hover,
   .#{$prefix}--tag .#{$prefix}--slug .#{$prefix}--slug__button--inline:hover {
     border-color: currentColor;
   }
 
+  .#{$prefix}--tag--filter .#{$prefix}--ai-label,
   .#{$prefix}--tag--filter .#{$prefix}--slug {
     min-inline-size: convert.to-rem(32.14px);
   }
diff --git a/packages/styles/scss/components/text-area/_text-area.scss b/packages/styles/scss/components/text-area/_text-area.scss
index 790f559282d2..7b2ee641285b 100644
--- a/packages/styles/scss/components/text-area/_text-area.scss
+++ b/packages/styles/scss/components/text-area/_text-area.scss
@@ -128,13 +128,16 @@
     border-block-end-color: $border-subtle;
   }
 
-  // Styles for `Slug` rendered inside `TextArea`
+  // Styles for `AILabel` rendered inside `TextArea`
+  .#{$prefix}--text-area__wrapper--slug .#{$prefix}--ai-label,
   .#{$prefix}--text-area__wrapper--slug .#{$prefix}--slug {
     position: absolute;
     inset-block-start: $spacing-04;
     inset-inline-end: $spacing-05;
   }
 
+  .#{$prefix}--text-area__wrapper--slug
+    .#{$prefix}--ai-label.#{$prefix}--ai-label--revert,
   .#{$prefix}--text-area__wrapper--slug
     .#{$prefix}--slug.#{$prefix}--slug--revert {
     inset-block-start: $spacing-02;
@@ -143,22 +146,36 @@
   }
 
   .#{$prefix}--text-area__wrapper--slug
-    .#{$prefix}--text-area:not(:has(~ .#{$prefix}--slug--revert)) {
+    .#{$prefix}--text-area:has(~ .#{$prefix}--ai-label):not(
+      :has(~ .#{$prefix}--ai-label--revert)
+    ),
+  .#{$prefix}--text-area__wrapper--slug
+    .#{$prefix}--text-area:has(~ .#{$prefix}--slug):not(
+      :has(~ .#{$prefix}--slug--revert)
+    ) {
     @include ai-gradient;
 
     padding-inline-end: $spacing-08;
   }
 
+  .#{$prefix}--text-area--invalid:has(~ .#{$prefix}--ai-label),
+  .#{$prefix}--text-area--warn:has(~ .#{$prefix}--ai-label),
   .#{$prefix}--text-area--invalid:has(~ .#{$prefix}--slug),
   .#{$prefix}--text-area--warn:has(~ .#{$prefix}--slug) {
     padding-inline-end: $spacing-10;
   }
 
+  .#{$prefix}--text-area--invalid ~ .#{$prefix}--ai-label,
+  .#{$prefix}--text-area--warn ~ .#{$prefix}--ai-label,
   .#{$prefix}--text-area--invalid ~ .#{$prefix}--slug,
   .#{$prefix}--text-area--warn ~ .#{$prefix}--slug {
     inset-inline-end: $spacing-08;
   }
 
+  .#{$prefix}--text-area--invalid
+    ~ .#{$prefix}--ai-label.#{$prefix}--ai-label--revert,
+  .#{$prefix}--text-area--warn
+    ~ .#{$prefix}--ai-label.#{$prefix}--ai-label--revert,
   .#{$prefix}--text-area--invalid ~ .#{$prefix}--slug.#{$prefix}--slug--revert,
   .#{$prefix}--text-area--warn ~ .#{$prefix}--slug.#{$prefix}--slug--revert {
     inset-inline-end: $spacing-07;
diff --git a/packages/styles/scss/components/text-input/_text-input.scss b/packages/styles/scss/components/text-input/_text-input.scss
index d3e56f7c0cdd..6dd19b32aafa 100644
--- a/packages/styles/scss/components/text-input/_text-input.scss
+++ b/packages/styles/scss/components/text-input/_text-input.scss
@@ -443,7 +443,8 @@
     border-block-end-color: $border-subtle;
   }
 
-  // Styles for Slug rendered inside TextInput
+  // Styles for AILabel rendered inside TextInput
+  .#{$prefix}--text-input__field-wrapper .#{$prefix}--ai-label,
   .#{$prefix}--text-input__field-wrapper .#{$prefix}--slug {
     position: absolute;
     inset-block-start: 50%;
@@ -452,17 +453,27 @@
   }
 
   .#{$prefix}--text-input__field-wrapper--slug
-    .#{$prefix}--text-input:not(:has(~ .#{$prefix}--slug--revert)) {
+    .#{$prefix}--text-input:has(~ .#{$prefix}--ai-label):not(
+      :has(~ .#{$prefix}--ai-label--revert)
+    ),
+  .#{$prefix}--text-input__field-wrapper--slug
+    .#{$prefix}--text-input:has(~ .#{$prefix}--slug):not(
+      :has(~ .#{$prefix}--slug--revert)
+    ) {
     @include ai-gradient;
 
     padding-inline-end: $spacing-08;
   }
 
+  .#{$prefix}--text-input--invalid:has(~ .#{$prefix}--ai-label),
+  .#{$prefix}--text-input--warning:has(~ .#{$prefix}--ai-label),
   .#{$prefix}--text-input--invalid:has(~ .#{$prefix}--slug),
   .#{$prefix}--text-input--warning:has(~ .#{$prefix}--slug) {
     padding-inline-end: $spacing-10;
   }
 
+  .#{$prefix}--text-input--invalid ~ .#{$prefix}--ai-label,
+  .#{$prefix}--text-input--warning ~ .#{$prefix}--ai-label,
   .#{$prefix}--text-input--invalid ~ .#{$prefix}--slug,
   .#{$prefix}--text-input--warning ~ .#{$prefix}--slug {
     inset-inline-end: $spacing-08;
diff --git a/packages/styles/scss/components/tile/_tile.scss b/packages/styles/scss/components/tile/_tile.scss
index a53098559100..2d6a43c7f58e 100644
--- a/packages/styles/scss/components/tile/_tile.scss
+++ b/packages/styles/scss/components/tile/_tile.scss
@@ -387,7 +387,9 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     fill: $icon-disabled;
   }
 
-  // Slug styles
+  // AILabel styles
+  .#{$prefix}--tile > .#{$prefix}--ai-label,
+  .#{$prefix}--tile--expandable > div > .#{$prefix}--ai-label,
   .#{$prefix}--tile > .#{$prefix}--slug,
   .#{$prefix}--tile--expandable > div > .#{$prefix}--slug,
   .#{$prefix}--tile--clickable .#{$prefix}--tile--slug-icon {
@@ -396,10 +398,13 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     inset-inline-end: $spacing-05;
   }
 
+  .#{$prefix}--tile.#{$prefix}--tile--selectable > .#{$prefix}--ai-label,
   .#{$prefix}--tile.#{$prefix}--tile--selectable > .#{$prefix}--slug {
     inset-inline-end: $spacing-08;
   }
 
+  .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio
+    > .#{$prefix}--ai-label,
   .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio
     > .#{$prefix}--slug {
     inset-inline-end: $spacing-05;
@@ -413,11 +418,14 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     }
   }
 
+  .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio.#{$prefix}--tile--is-selected
+    > .#{$prefix}--ai-label,
   .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio.#{$prefix}--tile--is-selected
     > .#{$prefix}--slug {
     inset-inline-end: $spacing-08;
   }
 
+  .#{$prefix}--tile.#{$prefix}--tile--clickable > .#{$prefix}--ai-label,
   .#{$prefix}--tile.#{$prefix}--tile--clickable > .#{$prefix}--slug {
     pointer-events: none;
   }
@@ -502,21 +510,28 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable .#{$prefix}--tile-content,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
     > .#{$prefix}--tile__checkmark,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--is-selected .#{$prefix}--ai-label,
   .#{$prefix}--tile--slug.#{$prefix}--tile--is-selected .#{$prefix}--slug {
     z-index: 1;
   }
 
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
+    .#{$prefix}--ai-label:has(> .#{$prefix}--popover--open),
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
     .#{$prefix}--slug:has(> .#{$prefix}--popover--open) {
     z-index: 2;
   }
 
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable > .#{$prefix}--ai-label,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable > .#{$prefix}--slug,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
     > .#{$prefix}--tile__checkmark {
     z-index: 1;
   }
 
+  .#{$prefix}--tile--expandable:has(
+      .#{$prefix}--ai-label > .#{$prefix}--popover--open
+    ),
   .#{$prefix}--tile--expandable:has(
       .#{$prefix}--slug > .#{$prefix}--popover--open
     ) {