Merge branch 'main' into pagination-style-docs

src/pages/components/ai-label/code.mdx

@@ -38,8 +38,17 @@ documentation, see the Storybooks for each framework below.
 
 ## Live demo
 
-<InlineNotification>
-
-The live demo for AI label will be added soon. Check back later for updates.
-
-</InlineNotification>
+<StorybookDemo
+  themeSelector
+  url="https://react.carbondesignsystem.com"
+  variants={[
+    {
+      label: 'Default',
+      variant: 'components-ailabel--default',
+    },
+    {
+      label: 'Callout',
+      variant: 'components-ailabel--callout',
+    },
+  ]}
+/>

src/pages/components/ai-label/usage.mdx

@@ -18,10 +18,8 @@ explainability by acting as the trigger for the explainability popover.
 
 **New!**
 [AI label](https://react.carbondesignsystem.com/?path=/docs/experimental-unstable-slug--overview)
-is now available as an experimental component. The AI label was previously
-called "AI Slug" but has been changed to better reflect its usage. This name
-change will be reflected in code and Figma once it moves to stable in the near
-future.
+is now a stable component. The AI label was previously called "AI Slug" but has
+been changed to better reflect its usage.
 
 </InlineNotification>
 
@@ -39,12 +37,20 @@ future.
 
 ## Live demo
 
-<InlineNotification>
-
-The live demo and accessibility testing status for AI label will be added soon.
-Check back later for updates.
-
-</InlineNotification>
+<StorybookDemo
+  themeSelector
+  url="https://react.carbondesignsystem.com"
+  variants={[
+    {
+      label: 'Default',
+      variant: 'components-ailabel--default',
+    },
+    {
+      label: 'Callout',
+      variant: 'components-ailabel--callout',
+    },
+  ]}
+/>
 
 ## Overview
 

src/pages/components/checkbox/code.mdx

@@ -69,8 +69,8 @@ documentation, see the Storybooks for each framework below.
       variant: 'components-checkbox--default',
     },
     {
-      label: 'With AI slug',
-      variant: 'experimental-unstable-slug-examples--checkbox',
+      label: 'with AI Label',
+      variant: 'components-checkbox--with-ai-label',
     },
   ]}
 />

src/pages/components/checkbox/style.mdx

@@ -122,14 +122,15 @@ labels should not exceed three words.
 ## AI presence
 
 The only style modification an AI variant of the checkbox has is the addition of
-the slug. All other tokens in the component remain the same as the non-AI
+the AI label. All other tokens in the component remain the same as the non-AI
 variants.
 
-More information about designing for AI guidelines is coming soon.
+For more information on the AI style elements, see the
+[Carbon for AI](/guidelines/carbon-for-ai/) guidelines.
 
-| Element | Property | Token / Size |
-| ------- | -------- | ------------ |
-| AI slug | size     | mini         |
+| Element  | Property | Token / Size |
+| -------- | -------- | ------------ |
+| AI label | size     | mini         |
 
 <Row>
 <Column colLg={8}>

src/pages/components/checkbox/usage.mdx

@@ -17,10 +17,12 @@ select zero, one, or any number of items.
 
 <InlineNotification>
 
-Experimental slug is now available for
-[checkbox](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--checkbox).
-This addition changes the visual appearance of the component and introduces an
-AI explainability feature when AI is present in the component.
+Checkbox
+[with AI label](https://react.carbondesignsystem.com/?path=/story/components-checkbox--with-ai-label)
+is now stable. This addition changes the visual appearance of the component and
+introduces an AI explainability feature when AI is present in the component. See
+the [AI presence](/components/checkbox/usage/#ai-presence) section for more
+details.
 
 </InlineNotification>
 
@@ -49,8 +51,8 @@ AI explainability feature when AI is present in the component.
       variant: 'components-checkbox--default',
     },
     {
-      label: 'With AI slug',
-      variant: 'experimental-unstable-slug-examples--checkbox',
+      label: 'with AI Label',
+      variant: 'components-checkbox--with-ai-label',
     },
   ]}
 />
@@ -349,13 +351,14 @@ checkbox input has focus. For additional keyboard interactions, see the
 
 ## AI presence
 
-Checkbox has a modification that embeds the AI slug when AI present in the
+Checkbox has a modification that embeds the AI label when AI is present in the
 control. The AI variant functions the same as the normal version except with the
-addition of the AI slug which is both a visual indicator and the trigger for the
-explainability popover. The slug can be placed on the group label or on
-individual checkbox labels.
+addition of the AI label which is both a visual indicator and the trigger for
+the explainability popover. The AI label can be placed on the checkbox group
+label or on individual checkbox labels.
 
-More information about designing for AI guidelines is coming soon.
+For more information on designing for AI, see the
+[Carbon for AI](/guidelines/carbon-for-ai/) guidelines.
 
 <Row>
 <Column colLg={8}>

src/pages/components/data-table/code.mdx

@@ -126,13 +126,31 @@ usage documentation, see the Storybooks for each framework below.
       variant: 'components-datatable-toolbar--with-overflow-menu',
     },
     {
-      label: 'Sorting (with AI slug)',
-      variant: 'experimental-unstable-slug-datatable--column-slug-sort',
+      label: 'AI Label With Expansion',
+      variant: 'components-datatable-withailabel--ai-label-with-expansion',
     },
     {
-      label: 'Selection and Expansion (with AI slug)',
+      label: 'AI Label with Radio Selection',
       variant:
-        'experimental-unstable-slug-datatable--slug-with-selection-and-expansion',
+        'components-datatable-withailabel--ai-label-with-radio-selection',
+    },
+    {
+      label: 'AI Label with Selection',
+      variant: 'components-datatable-withailabel--ai-label-with-selection',
+    },
+    {
+      label: 'AI Label with Selection and Expansion',
+      variant:
+        'components-datatable-withailabel--ai-label-with-selection-and-expansion',
+    },
+    {
+      label: 'Column AI Label Sort',
+      variant: 'components-datatable-withailabel--column-ai-label-sort',
+    },
+    {
+      label: 'Column AI Label with Selection and  Expansion',
+      variant:
+        'components-datatable-withailabel--column-ai-label-with-selection-and-expansion',
     },
   ]}
 />

src/pages/components/data-table/style.mdx

@@ -309,11 +309,12 @@ sizes.
 
 ## AI presence
 
-The following are the unique styles applied to the component when the AI slug is
-present. Unless specified, all other tokens in the component remain the same as
-the non-AI variant.
+The following are the unique styles applied to the component when the AI label
+is present. Unless specified, all other tokens in the component remain the same
+as the non-AI variant.
 
-More information about AI style elements is coming soon.
+For more information on the AI style elements, see the
+[Carbon for AI](/guidelines/carbon-for-ai/) guidelines.
 
 <Title>Entire table</Title>
 
@@ -326,7 +327,7 @@ More information about AI style elements is coming soon.
 |                            | stop             | `$ai-aura-stop`     |
 | Linear gradient:border     | top              | `$ai-border-start`  |
 |                            | bottom           | `$ai-border-end`    |
-| AI Slug                    | size             | large               |
+| AI label                   | size             | large               |
 
 <Row>
 <Column colLg={12}>
@@ -342,9 +343,9 @@ More information about AI style elements is coming soon.
 
 <Title>Individual cells</Title>
 
-| Element     | Property | Token / Size |
-| ----------- | -------- | ------------ |
-| Inline Slug | size     | medium       |
+| Element         | Property | Token / Size |
+| --------------- | -------- | ------------ |
+| Inline AI label | size     | medium       |
 
 <Row>
 <Column colLg={12}>
@@ -366,7 +367,7 @@ More information about AI style elements is coming soon.
 | Linear gradient:background | start     | `$ai-aura-start-sm` |
 |                            | stop      | `$ai-aura-stop`     |
 | Linear gradient:border     | left, top | `$ai-border-strong` |
-| AI Slug                    | size      | mini                |
+| AI label                   | size      | mini                |
 
 <Row>
 <Column colLg={12}>

src/pages/components/data-table/usage.mdx

@@ -18,10 +18,12 @@ your product's users.
 
 <InlineNotification>
 
-Experimental slug is now available for
-[data table](https://react.carbondesignsystem.com/?path=/docs/experimental-unstable-slug-datatable--overview).
-This addition changes the visual appearance of the component and introduces an
-AI explainability feature when AI is present in the component.
+Data table
+[with AI label](https://react.carbondesignsystem.com/?path=/docs/components-datatable-withailabel--overview)
+is now stable. This addition changes the visual appearance of the component and
+introduces an AI explainability feature when AI is present in the component. See
+the [AI presence](/components/data-table/usage/#ai-presence) section for more
+details.
 
 </InlineNotification>
 
@@ -105,13 +107,31 @@ AI explainability feature when AI is present in the component.
       variant: 'components-datatable-toolbar--with-overflow-menu',
     },
     {
-      label: 'Sorting (with AI slug)',
-      variant: 'experimental-unstable-slug-datatable--column-slug-sort',
+      label: 'AI Label With Expansion',
+      variant: 'components-datatable-withailabel--ai-label-with-expansion',
     },
     {
-      label: 'Selection and Expansion (with AI slug)',
+      label: 'AI Label with Radio Selection',
       variant:
-        'experimental-unstable-slug-datatable--slug-with-selection-and-expansion',
+        'components-datatable-withailabel--ai-label-with-radio-selection',
+    },
+    {
+      label: 'AI Label with Selection',
+      variant: 'components-datatable-withailabel--ai-label-with-selection',
+    },
+    {
+      label: 'AI Label with Selection and Expansion',
+      variant:
+        'components-datatable-withailabel--ai-label-with-selection-and-expansion',
+    },
+    {
+      label: 'Column AI Label Sort',
+      variant: 'components-datatable-withailabel--column-ai-label-sort',
+    },
+    {
+      label: 'Column AI Label with Selection and  Expansion',
+      variant:
+        'components-datatable-withailabel--column-ai-label-with-selection-and-expansion',
     },
   ]}
 />
@@ -630,11 +650,12 @@ alternating colors to make scanning horizontal information easier for the user.
 
 Data table has a modification that takes on the AI visual styling when AI is
 present in the table. The AI variants of a data table function the same as the
-normal variants except for the addition of the AI slug, which is both a visual
+normal variants except for the addition of the AI label, which is both a visual
 indicator and the trigger for the explainability popover. Where the AI label
 goes inside of a data table depends on which parts of the data are AI generated.
 
-More information about designing for AI guidelines is coming soon.
+For more information on designing for AI, see the
+[Carbon for AI](/guidelines/carbon-for-ai/) guidelines.
 
 #### Entire table
 
@@ -654,16 +675,16 @@ present in all aspects of the data table.
 #### Individual cells
 
 If only some data table cells have content generated by AI, then those cells
-have an in-line AI slug next to them. These cells do not get any AI layering.
+have an in-line AI label next to them. These cells do not get any AI layering.
 
 <Row>
 <Column colLg={12}>
 
-![Example of a data table cell generated by AI represneted by the in-line AI slug](images/usage-ai-presence-inline-datatable.png)
+![Example of a data table cell generated by AI represented by the in-line AI label](images/usage-ai-presence-inline-datatable.png)
 
 <Caption>
-  Example of a data table cell generated by AI represneted by the in-line AI
-  slug.
+  Example of a data table cell generated by AI represented by the in-line AI
+  label.
 </Caption>
 
 </Column>
@@ -673,7 +694,7 @@ have an in-line AI slug next to them. These cells do not get any AI layering.
 
 If content belonging to only a row or column of the data table is generated by
 AI, then only those respective row/s and column/s should receive the AI presence
-styling along with the AI slug, not the entire data table.
+styling along with the AI label, not the entire data table.
 
 <Row>
 <Column colLg={12}>

src/pages/components/date-picker/code.mdx

@@ -90,8 +90,8 @@ usage documentation, see the Storybooks for each framework below.
       variant: 'experimental-unstable-fluiddatepicker--single',
     },
     {
-      label: 'Single with AI slug',
-      variant: 'experimental-unstable-slug-examples--date-picker',
+      label: 'Single with AI Label',
+      variant: 'components-datepicker--with-ai-label',
     },
   ]}
 />

src/pages/components/date-picker/style.mdx

@@ -471,19 +471,20 @@ group. Time picker's total width will vary based on the grid and layout
 
 ## AI presence
 
-The following are the unique styles applied to the components when the AI slug
+The following are the unique styles applied to the components when the AI label
 is present. Unless specified, all other tokens in the components remain the same
 as the non-AI variants.
 
-More information about designing for AI guidelines is coming soon.
+For more information on the AI style elements, see the
+[Carbon for AI](/guidelines/carbon-for-ai/) guidelines.
 
 | Element         | Property         | Token / Size        |
 | --------------- | ---------------- | ------------------- |
 | Linear-gradient | start            | `$ai-aura-start-sm` |
 |                 | stop             | `$ai-aura-stop`     |
 | Field           | border-bottom    | `$ai-border-strong` |
 |                 | background color | `$field` \*         |
-| AI slug         | size             | mini                |
+| AI label        | size             | mini                |
 
 <Caption>
   * Denotes a contextual color token that will change values based on the layer