diff --git a/src/pages/components/date-picker/images/date-picker-usage-AI-presence-default.png b/src/pages/components/date-picker/images/date-picker-usage-AI-presence-default.png
new file mode 100644
index 00000000000..4930e878c95
Binary files /dev/null and b/src/pages/components/date-picker/images/date-picker-usage-AI-presence-default.png differ
diff --git a/src/pages/components/date-picker/images/date-picker-usage-AI-presence-fluid.png b/src/pages/components/date-picker/images/date-picker-usage-AI-presence-fluid.png
new file mode 100644
index 00000000000..4d51f6a2e5f
Binary files /dev/null and b/src/pages/components/date-picker/images/date-picker-usage-AI-presence-fluid.png differ
diff --git a/src/pages/components/date-picker/images/date-picker-usage-revert-to-AI-default.png b/src/pages/components/date-picker/images/date-picker-usage-revert-to-AI-default.png
new file mode 100644
index 00000000000..6f2db4ceeee
Binary files /dev/null and b/src/pages/components/date-picker/images/date-picker-usage-revert-to-AI-default.png differ
diff --git a/src/pages/components/date-picker/images/date-picker-usage-revert-to-AI-fluid.png b/src/pages/components/date-picker/images/date-picker-usage-revert-to-AI-fluid.png
new file mode 100644
index 00000000000..57d217c22d1
Binary files /dev/null and b/src/pages/components/date-picker/images/date-picker-usage-revert-to-AI-fluid.png differ
diff --git a/src/pages/components/date-picker/style.mdx b/src/pages/components/date-picker/style.mdx
index b366419fef0..c86fffacb76 100644
--- a/src/pages/components/date-picker/style.mdx
+++ b/src/pages/components/date-picker/style.mdx
@@ -9,7 +9,7 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
The following page documents visual specifications such as color, typography,
-structure, and size.
+structure, size, and AI presence.
@@ -19,6 +19,7 @@ structure, and size.
Typography
Structure
Size
+AI presence
Feedback
@@ -468,6 +469,49 @@ group. Time picker's total width will vary based on the grid and layout
Sizes for default style time picker input | px / rem
+## AI presence
+
+The following are the unique styles applied to the components when the AI slug
+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.
+
+| 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 |
+
+
+ * Denotes a contextual color token that will change values based on the layer
+ it is placed on.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
## Feedback
Help us improve this component by providing feedback, asking questions, and
diff --git a/src/pages/components/date-picker/usage.mdx b/src/pages/components/date-picker/usage.mdx
index 9f6f82c4617..499a760330c 100755
--- a/src/pages/components/date-picker/usage.mdx
+++ b/src/pages/components/date-picker/usage.mdx
@@ -15,6 +15,15 @@ and times.
+
+
+Experimental slug is now available for
+[date picker](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--date-picker).
+This addition changes the visual appearance of the component and introduces an
+AI explainability feature when AI is present in the component.
+
+
+
Live demo
@@ -25,6 +34,7 @@ and times.
Simple date input
Calendar pickers
Time pickers
+AI presence
Related
Feedback
@@ -565,6 +575,67 @@ a meeting time.
+## AI presence
+
+Date picker has a modification that takes on the AI visual styling when the AI
+slug is present in the input. 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.
+
+More information about designing for AI guidelines is coming soon.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### Revert to AI
+
+A date picker can toggle between the AI variant and the non-AI variant depending
+on the user’s interaction. If the user manually overrides the AI-suggested
+content then the input will change from the AI variant to the default variant.
+Once edited, the user should still be able to switch back to the initially AI
+generated content via a revert to AI button.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
## Related
#### Asking for relative times and dates
diff --git a/src/pages/components/select/images/select-usage-AI-presence-default.png b/src/pages/components/select/images/select-usage-AI-presence-default.png
new file mode 100644
index 00000000000..61864449374
Binary files /dev/null and b/src/pages/components/select/images/select-usage-AI-presence-default.png differ
diff --git a/src/pages/components/select/images/select-usage-AI-presence-fluid.png b/src/pages/components/select/images/select-usage-AI-presence-fluid.png
new file mode 100644
index 00000000000..5cad2cd8150
Binary files /dev/null and b/src/pages/components/select/images/select-usage-AI-presence-fluid.png differ
diff --git a/src/pages/components/select/images/select-usage-revert-to-AI-default.png b/src/pages/components/select/images/select-usage-revert-to-AI-default.png
new file mode 100644
index 00000000000..3e1f58f2dd1
Binary files /dev/null and b/src/pages/components/select/images/select-usage-revert-to-AI-default.png differ
diff --git a/src/pages/components/select/images/select-usage-revert-to-AI-fluid.png b/src/pages/components/select/images/select-usage-revert-to-AI-fluid.png
new file mode 100644
index 00000000000..acea0e83dc9
Binary files /dev/null and b/src/pages/components/select/images/select-usage-revert-to-AI-fluid.png differ
diff --git a/src/pages/components/select/style.mdx b/src/pages/components/select/style.mdx
index 9947c7a98db..d89a38da763 100755
--- a/src/pages/components/select/style.mdx
+++ b/src/pages/components/select/style.mdx
@@ -6,6 +6,24 @@ description:
tabs: ['Usage', 'Style', 'Code', 'Accessibility']
---
+
+
+The following page documents visual specifications such as color, typography,
+structure, size, and AI presence.
+
+
+
+
+
+Color
+Typography
+Structure
+Size
+AI presence
+Feedback
+
+
+
## Color
| Element | Property | Color token |
@@ -177,7 +195,7 @@ and any proper nouns capitalized. Select text should be three words or less.
Structure and spacing measurements for fluid select | px / rem
-## Sizes
+## Size
### Default select
@@ -216,3 +234,52 @@ and any proper nouns capitalized. Select text should be three words or less.
Size for fluid select | px / rem
+
+## AI presence
+
+The following are the unique styles applied to the components when the AI slug
+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.
+
+| 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 |
+
+
+ * Denotes a contextual color token that will change values based on the layer
+ it is placed on.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions, and
+leaving any other comments on
+[GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).
diff --git a/src/pages/components/select/usage.mdx b/src/pages/components/select/usage.mdx
index bbb9dce2c23..ce6e49b395d 100755
--- a/src/pages/components/select/usage.mdx
+++ b/src/pages/components/select/usage.mdx
@@ -14,6 +14,15 @@ Select allows users to choose one option from a list of values.
+
+
+Experimental slug is now available for
+[select](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--select).
+This addition changes the visual appearance of the component and introduces an
+AI explainability feature when AI is present in the component.
+
+
+
Live demo
@@ -21,6 +30,8 @@ Select allows users to choose one option from a list of values.
Formatting
Content
Universal behaviors
+AI presence
+Related
Feedback
@@ -415,6 +426,67 @@ red border, an error icon indicator, and an error message.
+## AI presence
+
+Select has a modification that takes on the AI visual styling when the AI slug
+is present in the input. 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.
+
+More information about designing for AI guidelines is coming soon.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### Revert to AI
+
+A select can toggle between the AI variant and the non-AI variant depending on
+the user’s interaction. If the user manually overrides the AI-suggested content
+then the input will change from the AI variant to the default variant. Once
+edited, the user should still be able to switch back to the initially AI
+generated content via a revert to AI button.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
## Related
- If there are fewer than three options to choose from, use a