ai-alina

src/pages/components/number-input/style.mdx

@@ -6,6 +6,16 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+<AnchorLinks>
+
+<AnchorLink>Color</AnchorLink>
+<AnchorLink>Typography</AnchorLink>
+<AnchorLink>Structure</AnchorLink>
+<AnchorLink>Sizes</AnchorLink>
+<AnchorLink>AI presence</AnchorLink>
+
+</AnchorLinks>
+
 ## Color
 
 | Element  | Property         | Color token         |
@@ -174,3 +184,46 @@ layout, and design.
 </div>
 
 <Caption>Sizes for number input fields | px / rem</Caption>
+
+## 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 default variant.
+
+More information about AI style elements 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                |
+
+<Caption>
+  * Denotes a contextual color token that will change values based on the layer
+  it is placed on.
+</Caption>
+
+<Row>
+<Column colLg={8}>
+
+<Tabs>
+
+<Tab label="Default">
+
+![Default number input AI example](images/number-input-style-ai-default.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Fluid number input AI example](images/number-input-style-ai-fluid.png)
+
+</Tab>
+
+</Tabs>
+
+</Column>
+</Row>

src/pages/components/number-input/usage.mdx

@@ -13,13 +13,23 @@ decrease the value with a two-segment control.
 
 </PageDescription>
 
+<InlineNotification>
+
+Experimental Slug is now available for
+[number input](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--number-input&_ga=2.126834955.781464953.1715000611-86992666.1707752603&_gl=1*1l8cah1*_ga*ODY5OTI2NjYuMTcwNzc1MjYwMw..*_ga_FYECCCS21D*MTcxNTE3NzAxMC4zNi4xLjE3MTUxNzc1MTQuMC4wLjA.).
+This addition changes the visual appearance of the component and introduces an
+AI explainability feature when AI is present in the component.
+
+</InlineNotification>
+
 <AnchorLinks>
 
 <AnchorLink>Overview</AnchorLink>
 <AnchorLink>Live demo</AnchorLink>
 <AnchorLink>Formatting</AnchorLink>
 <AnchorLink>Content</AnchorLink>
 <AnchorLink>Behaviors</AnchorLink>
+<AnchorLink>AI presence</AnchorLink>
 <AnchorLink>Related</AnchorLink>
 <AnchorLink>References</AnchorLink>
 <AnchorLink>Feedback</AnchorLink>
@@ -322,6 +332,39 @@ number of children as ‘0’.
   </DoDont>
 </Row>
 
+## AI presence
+
+Number input has a modification that takes on the AI visual styling when the AI
+slug is present in the input. The AI variant of number input functions the same
+as the normal version except with the additional 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.
+
+<Row>
+<Column colLg={8}>
+
+![Number input AI presence](images/number-input-usage-12.png)
+
+</Column>
+</Row>
+
+### Revert to AI
+
+A number input can toggle between the AI variant and the default 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.
+
+<Row>
+<Column colLg={8}>
+
+![Number input AI revert](images/number-input-usage-13.png)
+
+</Column>
+</Row>
+
 ## Related
 
 - Use [slider](https://carbondesignsystem.com/components/slider/usage/) when

src/pages/components/text-input/style.mdx

@@ -19,6 +19,7 @@ structure, and size.
 <AnchorLink>Typography</AnchorLink>
 <AnchorLink>Structure</AnchorLink>
 <AnchorLink>Size</AnchorLink>
+<AnchorLink>AI presence</AnchorLink>
 <AnchorLink>Feedback</AnchorLink>
 
 </AnchorLinks>
@@ -326,6 +327,49 @@ These sizes apply only to the default style of text input.
 
 <Caption>Text input default style sizes | px / rem</Caption>
 
+## 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 default variant.
+
+More information about AI style elements 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                |
+
+<Caption>
+  * Denotes a contextual color token that will change values based on the layer
+  it is placed on.
+</Caption>
+
+<Row>
+<Column colLg={8}>
+
+<Tabs>
+
+<Tab label="Default">
+
+![Default text input and text area AI example](images/text-input-text-area-ai-presence-default.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Fluid text input and text area AI example](images/text-input-text-area-ai-presence-fluid.png)
+
+</Tab>
+
+</Tabs>
+
+</Column>
+</Row>
+
 ## Feedback
 
 Help us improve this component by providing feedback, asking questions, and

src/pages/components/text-input/usage.mdx

@@ -13,6 +13,17 @@ and short-form entries.
 
 </PageDescription>
 
+<InlineNotification>
+
+Experimental Slug is now available for
+[text input](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--text-input)
+and
+[text area](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--text-area).
+This addition changes the visual appearance of the component and introduces an
+AI explainability feature when AI is present in the component.
+
+</InlineNotification>
+
 <AnchorLinks>
 
 <AnchorLink>Overview</AnchorLink>
@@ -23,6 +34,7 @@ and short-form entries.
 <AnchorLink>Content</AnchorLink>
 <AnchorLink>Universal behaviors</AnchorLink>
 <AnchorLink>Modifiers</AnchorLink>
+<AnchorLink>AI Presence</AnchorLink>
 <AnchorLink>Related</AnchorLink>
 <AnchorLink>Feedback</AnchorLink>
 
@@ -543,6 +555,39 @@ met.
 </Column>
 </Row>
 
+## AI presence
+
+Text input and text area have 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.
+
+<Row>
+<Column colLg={8}>
+
+![Text input and text area AI presence](images/text-input-text-area-ai-presence.png)
+
+</Column>
+</Row>
+
+### Revert to AI
+
+The text input and text area can toggle between the AI variant and the default
+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.
+
+<Row>
+<Column colLg={8}>
+
+![Text input and text area AI revert](images/text-input-text-area-ai-revert.png)
+
+</Column>
+</Row>
+
 ## Related
 
 - [Form pattern](/patterns/forms-pattern/)