Repository: carbon-design-system/carbon
Pull request #19194: chore(docs): update storybook tabs to time-picker
Author: login: ariellalgilmore
Created: 2025-04-21T18:15:24Z | Merged: 2025-04-22T20:27:05Z

This updates the Storybook overview docs for `time-picker`, `tile`, `textarea`, `text-input`, `tabs`, and `tags` web components to match their React counterparts.

The stories should match React versions as closely as possible, excepting framework-specific documentation. Note that there will be differences in documentation/API as not all of these components have full parity with React.

#### Changelog

**Changed**
- update Storybook docs formatting to match React versions
- add `Canvas` elements to story overviews for examples and source code
- add missing `@element` when needed so attributes would render in mdx
- react had wrong component listed in the mdx file for textarea and textinput
- 
#### Testing / Reviewing
- updated stories should match React versions as closely as possible
- make sure breadcrumb and table of content links go where they're supposed to
- ensure all inline examples work as expected and source code is correct


Diff:
diff --git a/packages/react/src/components/TextArea/TextArea.mdx b/packages/react/src/components/TextArea/TextArea.mdx
index 691a7b160460..b87166b4e8cc 100644
--- a/packages/react/src/components/TextArea/TextArea.mdx
+++ b/packages/react/src/components/TextArea/TextArea.mdx
@@ -8,13 +8,13 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/TextArea)
 &nbsp;|&nbsp;
-[Usage guidelines](https://www.carbondesignsystem.com/components/text-input/usage)
+[Usage guidelines](https://carbondesignsystem.com/components/text-input/usage/#text-area)
 &nbsp;|&nbsp;
 [Accessibility](https://www.carbondesignsystem.com/components/text-input/accessibility)
 
 ## Table of Contents
 
-- [Tag](#tag)
+- [TextArea](#textarea)
   - [Overview](#overview)
   - [Skeleton](#skeleton)
   - [AI Label](#ai-label)
diff --git a/packages/react/src/components/TextInput/TextInput.mdx b/packages/react/src/components/TextInput/TextInput.mdx
index 1df8a286f30b..3a782513b8fe 100644
--- a/packages/react/src/components/TextInput/TextInput.mdx
+++ b/packages/react/src/components/TextInput/TextInput.mdx
@@ -15,7 +15,7 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 ## Table of Contents
 
-- [Tag](#tag)
+- [TextInput](#textinput)
   - [Overview](#overview)
   - [Fluid](#fluid)
   - [Read Only](#read-only)
diff --git a/packages/web-components/src/components/tabs/index.ts b/packages/web-components/src/components/tabs/index.ts
index 604285031208..d760574fd781 100644
--- a/packages/web-components/src/components/tabs/index.ts
+++ b/packages/web-components/src/components/tabs/index.ts
@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import './tabs';
 import './tab';
 import './tab-skeleton';
 import './tabs-skeleton';
diff --git a/packages/web-components/src/components/tabs/tab-skeleton.ts b/packages/web-components/src/components/tabs/tab-skeleton.ts
index adef6f5dacd5..986952bad754 100644
--- a/packages/web-components/src/components/tabs/tab-skeleton.ts
+++ b/packages/web-components/src/components/tabs/tab-skeleton.ts
@@ -12,6 +12,8 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
 
 /**
  * Skeleton of tab.
+ *
+ * @element cds-tab-skeleton
  */
 @customElement(`${prefix}-tab-skeleton`)
 export default class CDSTabSkeleton extends LitElement {
diff --git a/packages/web-components/src/components/tabs/tabs-skeleton.ts b/packages/web-components/src/components/tabs/tabs-skeleton.ts
index 2e76c5f8a370..676c62525b34 100644
--- a/packages/web-components/src/components/tabs/tabs-skeleton.ts
+++ b/packages/web-components/src/components/tabs/tabs-skeleton.ts
@@ -12,6 +12,8 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
 
 /**
  * Skeleton of tabs.
+ *
+ * @element cds-tabs-skeleton
  */
 @customElement(`${prefix}-tabs-skeleton`)
 export default class CDSTabsSkeleton extends LitElement {
diff --git a/packages/web-components/src/components/tabs/tabs.mdx b/packages/web-components/src/components/tabs/tabs.mdx
index 227b642f75ce..1ba65ce47f29 100644
--- a/packages/web-components/src/components/tabs/tabs.mdx
+++ b/packages/web-components/src/components/tabs/tabs.mdx
@@ -1,136 +1,59 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
 import * as TabsStories from './tabs.stories';
 
 <Meta of={TabsStories} />
 
 # Tabs
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tabs)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/tabs)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/tabs/usage)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/tabs/accessibility)
 
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tabs)
+## Table of Contents
 
-Tabs are used to quickly navigate between views within the same context.
+- [Overview](#overview)
+- [Line Tabs](#line-tabs)
+- [Contained Tabs](#contained-tabs)
+- [Skeleton](#skeleton)
+- [Component API](#component-api)
+- [CDN](#cdn)
+- [Feedback](#feedback)
 
-## Getting started
+## Overview
 
-Here's a quick example to get you started.
+Use tabs to allow users to navigate easily between views within the same
+context. `cds-tabs` are now more composable, meaning that you have more
+flexibility in what is in rendered inside of `cds-tab` and a tab's panel.
 
-### JS (via import)
+### Line Tabs
 
-```javascript
-import '@carbon/web-components/es/components/tabs/index.js';
-```
+<Canvas of={TabsStories.Default} />
 
-### SCSS (must include with JS import)
+### Contained Tabs
 
-```css
-@use '@carbon/styles/scss/components/tabs';
-```
+<Canvas of={TabsStories.Contained} />
 
-<Markdown>{`${cdnJs({ components: ['tabs'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
-
-### HTML
-
-```html
-<cds-tabs trigger-content="Select an item" value="staging">
-  <cds-tab id="tab-all" target="panel-all" value="all">Option 1</cds-tab>
-  <cds-tab
-    id="tab-cloudFoundry"
-    target="panel-cloudFoundry"
-    disabled
-    value="cloudFoundry"
-    >Option 2</cds-tab
-  >
-  <cds-tab id="tab-staging" target="panel-staging" value="staging"
-    >Option 3</cds-tab
-  >
-  <cds-tab id="tab-dea" target="panel-dea" value="dea">Option 4</cds-tab>
-  <cds-tab id="tab-router" target="panel-router" value="router"
-    >Option 5</cds-tab
-  >
-</cds-tabs>
-<div class="cds-ce-demo-devenv--tab-panels">
-  <div id="panel-all" role="tabpanel" aria-labelledby="tab-all" hidden>
-    <h4>Content for option 1</h4>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat.
-    </p>
-  </div>
-  <div
-    id="panel-cloudFoundry"
-    role="tabpanel"
-    aria-labelledby="tab-cloudFoundry"
-    hidden>
-    <h4>Content for option 2</h4>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat.
-    </p>
-  </div>
-  <div id="panel-staging" role="tabpanel" aria-labelledby="tab-staging" hidden>
-    <h4>Content for option 3</h4>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat.
-    </p>
-  </div>
-  <div id="panel-dea" role="tabpanel" aria-labelledby="tab-dea" hidden>
-    <h4>Content for option 4</h4>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat.
-    </p>
-  </div>
-  <div id="panel-router" role="tabpanel" aria-labelledby="tab-router" hidden>
-    <h4>Content for option 5</h4>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat.
-    </p>
-  </div>
-</div>
-```
-
-## Skeleton
-
-For the skeleton variation, utilize `<cds-tabs-skeleton>` and
-`<cds-tab-skeleton>`.
-
-```html
-<cds-tabs-skeleton>
-  <cds-tab-skeleton></cds-tab-skeleton>
-  <cds-tab-skeleton></cds-tab-skeleton>
-  <cds-tab-skeleton></cds-tab-skeleton>
-  <cds-tab-skeleton></cds-tab-skeleton>
-  <cds-tab-skeleton></cds-tab-skeleton>
-</cds-tabs-skeleton>
-```
-
-## `<cds-tabs>` attributes, properties and events
-
-Note: `cds-content-switcher-*` events are not fired from `<cds-tabs>`.
+### Skeleton
 
-<ArgTypes of="cds-tabs" />
+<Canvas of={TabsStories.skeleton} />
+
+## Component API
 
-## `<cds-tab>` attributes, properties and events
+## `cds-tabs`
+
+<ArgTypes of="cds-tabs" />
 
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<cds-tab disabled>`) and `false` means not setting the attribute (e.g.
-`<cds-tab>` without `disabled` attribute).
+## `cds-tab`
 
 <ArgTypes of="cds-tab" />
+
+<Markdown>{`${cdnJs({ components: ['tabs'] })}`}</Markdown>
+
+## 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/web-components/src/components/tabs/tabs.mdx).
diff --git a/packages/web-components/src/components/tag/dismissible-tag.ts b/packages/web-components/src/components/tag/dismissible-tag.ts
index 0c7a85082c8b..0ba4d3eed59a 100644
--- a/packages/web-components/src/components/tag/dismissible-tag.ts
+++ b/packages/web-components/src/components/tag/dismissible-tag.ts
@@ -23,7 +23,9 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
 export { TAG_SIZE, TAG_TYPE };
 
 /**
- * Tag.
+ * Dismissible Tag.
+ *
+ * @element cds-dismissible-tag
  *
  * @fires cds-dismissible-tag-beingclosed - The custom event fired as the element is being closed
  * @fires cds-dismissible-tag-closed - The custom event fired after the element has been closed
diff --git a/packages/web-components/src/components/tag/operational-tag.ts b/packages/web-components/src/components/tag/operational-tag.ts
index 85d61808f83e..42f8f8d4c089 100644
--- a/packages/web-components/src/components/tag/operational-tag.ts
+++ b/packages/web-components/src/components/tag/operational-tag.ts
@@ -22,7 +22,9 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
 export { TAG_SIZE, TAG_TYPE };
 
 /**
- * Tag.
+ * Operational tag.
+ *
+ * @element cds-operational-tag
  *
  * @fires cds-operational-tag-beforeselected - The custom event fired as the element is being selected
  * @fires cds-operational-tag-selected - The custom event fired after the element has been selected
diff --git a/packages/web-components/src/components/tag/selectable-tag.ts b/packages/web-components/src/components/tag/selectable-tag.ts
index 857183f6cce0..fd64e636f5a0 100644
--- a/packages/web-components/src/components/tag/selectable-tag.ts
+++ b/packages/web-components/src/components/tag/selectable-tag.ts
@@ -22,7 +22,9 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
 export { TAG_SIZE, TAG_TYPE };
 
 /**
- * Tag.
+ * Selectable tag.
+ *
+ * @element cds-selectable-tag
  *
  * @fires cds-selectable-tag-beforeselected - The custom event fired as the element is being selected
  * @fires cds-selectable-tag-selected - The custom event fired after the element has been selected
diff --git a/packages/web-components/src/components/tag/tag-skeleton.ts b/packages/web-components/src/components/tag/tag-skeleton.ts
index 237e1b23b19e..03670c7d0c2e 100644
--- a/packages/web-components/src/components/tag/tag-skeleton.ts
+++ b/packages/web-components/src/components/tag/tag-skeleton.ts
@@ -17,6 +17,8 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
 
 /**
  * Skeleton of tag.
+ *
+ * @element cds-tag-skeleton
  */
 @customElement(`${prefix}-tag-skeleton`)
 export default class CDSTagSkeleton extends LitElement {
diff --git a/packages/web-components/src/components/tag/tag.mdx b/packages/web-components/src/components/tag/tag.mdx
index d3948ac2099c..c6b5b5b58adb 100644
--- a/packages/web-components/src/components/tag/tag.mdx
+++ b/packages/web-components/src/components/tag/tag.mdx
@@ -1,78 +1,98 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
 import * as TagStories from './tag.stories';
 
 <Meta of={TagStories} />
 
 # Tag
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tag)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/tag)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/tag/usage)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/tag/accessibility)
 
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tag)
+## Table of Contents
+
+- [Overview](#overview)
+- [Read Only](#read-only)
+- [Dismissible](#dismissible)
+- [Selectable](#selectable)
+- [Operational](#operational)
+- [With AI Label](#with-ai-label)
+- [Skeleton](#skeleton)
+- [Component API](#component-api)
+- [CDN](#cdn)
+- [Feedback](#feedback)
+
+## Overview
 
 Tags can be used to categorize items. Use short labels for easy scanning. Use
 two words only if necessary to describe the status and differentiate it from
 other tags.
 
-## Getting started
+## Read Only
 
-Here's a quick example to get you started.
+Read-only tags are used to categorize, are used for labeling, and do not have
+interactive functionality. Read-only tags come in several color choices and can
+use optional decorative icons to delineate between multiple categories.
 
-### JS (via import)
+<Canvas of={TagStories.ReadOnly} />
 
-```javascript
-import '@carbon/web-components/es/components/tag/index.js';
-```
+## Dismissible
 
-<Markdown>{`${cdnJs({ components: ['tag'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
+Dismissible tags are used to remove tags that can be filtered out by the user.
 
-### HTML
+When to use:
 
-```html
-<cds-tag type="gray" title="tag-example"> This is a tag </cds-tag>
-```
+- Use `cds-disimissible-tag` when you want to allow users to easily clear or dismiss
+  specific filters applied to items.
 
-## Custom icon
+<Canvas of={TagStories.Dismissible} />
 
-If you'd like to use a custom icon within the tag, import the icon and
-insert it within the tag element as such:
+Here it is a sample code to help you get started.
 
 ```javascript
-import Download16 from '@carbon/icons/lib/download/16.js';
+const tags = [
+  {
+    type: 'red',
+    text: 'Tag content with a long text description',
+    tagTitle: 'Provide a custom title to the tag',
+  },
+  {
+    type: 'magenta',
+    text: 'Tag content 1',
+  },
+  {
+    type: 'purple',
+    text: 'Tag content 2',
+  },
+];
 
 function App() {
   return html`
-  <cds-tag filter type="gray" title="Clear selection">
-    ${Download16({ slot: 'icon' })}
-    This is a tag
-    </cds-tag>`;
+    <cds-button style="margin-bottom: 3rem;"> Reset </cds-button>
+    <br />
+    ${tags.map(
+      (tag) => html`
+        <cds-dismissible-tag
+          type=${tag.type}
+          ?open=${true}
+          tag-title=${tag.tagTitle || ''}>
+          ${Asleep16({ slot: 'icon' })} ${tag.text}
+        </cds-dismissible-tag>
+      `
+    )}
+  `;
 }
-```
-
-## Read Only
 
-Read-only tags are used to categorize, are used for labeling, and do not have
-interactive functionality. Read-only tags come in several color choices and can
-use optional decorative icons to delineate between multiple categories.
-
-## Dismissible
-
-Dismissible tags are used to remove tags that can be filtered out by the user.
-
-When to use:
+const button = document.querySelector('cds-button');
+button.addEventListener('click', () => resetTags());
 
-- Use DismissibleTag when you want to allow users to easily clear or dismiss
-  specific filters applied to items.
-
-You can use the events to catch the closing of the tag.
-
-```js
-document.addEventListener('cds-dismissible-tag-closed', (event) => {
-  // use values here
-});
+function resetTags() {
+  const dismissibleTags = document.querySelectorAll('cds-dismissible-tag');
+  dismissibleTags.forEach((tag) => tag.setAttribute('open', 'true'));
+}
 ```
 
 ## Selectable
@@ -88,6 +108,53 @@ When to use:
   need to be a little more specific around filtering for selectable versus
   dismissable tags).
 
+<Canvas of={TagStories.Selectable} />
+
+Here it is a sample code to help you get started.
+
+```javascript
+const tags = [
+  {
+    text: 'Tag content with a long text description',
+  },
+  {
+    text: 'Tag content 1',
+  },
+  {
+    text: 'Tag content 2',
+  },
+  {
+    text: 'Tag content 3',
+  },
+];
+
+function App() {
+  return html`
+    <div aria-label="Selectable tags" role="group">
+      ${tags.map(
+        (tag) =>
+          html`<cds-selectable-tag
+            ?disabled="${disabled}"
+            ?selected="${tag.selected}"
+            id="${tag.id}"
+            text="${text || tag.text}"
+            size="${size}"
+            >${Asleep16({ slot: 'icon' })}
+          </cds-selectable-tag>`
+      )}
+    </div>
+  `;
+}
+
+const tags = document.querySelectorAll('cds-selectable-tag');
+
+tags.forEach((tag) =>
+  tag.addEventListener('cds-selectable-tag-selected', (e) => {
+    console.log(e.detail);
+  })
+);
+```
+
 ## Operational
 
 Operational tags enable the user to view a list of all items associated with a
@@ -105,17 +172,43 @@ When not to use:
 - Do not use in combination with Dismissable tags. Instead, consider letting the
   user enter an "edit mode" to dismiss tags.
 
+<Canvas of={TagStories.Operational} />
+
 ## With AI Label
 
-Tag with AI label is now stable for Read Only tags. This addition changes the
+`<cds-tag>` with AI label is now stable for Read Only tags. This addition changes the
 visual appearance of the component and introduces an AI explainability feature
 when AI is present in the component.
 
+<Canvas of={TagStories.WithAILabel} />
 
-## `<cds-tag>` attributes and properties
+## Skeleton
 
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<cds-tag disabled>`) and `false` means not setting the attribute (e.g.
-`<cds-tag>` without `disabled` attribute).
+<Canvas
+  of={TagStories.Skeleton}
+/>
 
+## Component API
+
+## `cds-tag`
 <ArgTypes of="cds-tag" />
+
+## `cds-dismissible-tag`
+<ArgTypes of="cds-dismissible-tag" />
+
+## `cds-selectable-tag`
+<ArgTypes of="cds-selectable-tag" />
+
+## `cds-operational-tag`
+<ArgTypes of="cds-operational-tag" />
+
+## `cds-tag-skeleton`
+<ArgTypes of="cds-tag-skeleton" />
+
+<Markdown>{`${cdnJs({ components: ['tag'] })}`}</Markdown>
+
+## 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/web-components/src/components/tag/tag.mdx).
diff --git a/packages/web-components/src/components/text-input/text-input-skeleton.ts b/packages/web-components/src/components/text-input/text-input-skeleton.ts
index c380e8a6001d..3408d6853b5a 100644
--- a/packages/web-components/src/components/text-input/text-input-skeleton.ts
+++ b/packages/web-components/src/components/text-input/text-input-skeleton.ts
@@ -12,6 +12,8 @@ import { prefix } from '../../globals/settings';
 import styles from './text-input.scss?lit';
 
 /**
+ * @element cds-text-input-skeleton
+ *
  * Skeleton of number input.
  */
 @customElement(`${prefix}-text-input-skeleton`)
diff --git a/packages/web-components/src/components/text-input/text-input.mdx b/packages/web-components/src/components/text-input/text-input.mdx
index 775024a6a537..26abbd5fa8af 100644
--- a/packages/web-components/src/components/text-input/text-input.mdx
+++ b/packages/web-components/src/components/text-input/text-input.mdx
@@ -1,69 +1,72 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-import * as TextInput from './text-input.stories';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
+import * as TextInputStories from './text-input.stories';
 
-<Meta of={TextInput} />
+<Meta of={TextInputStories} />
 
 # Text Input
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/input)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/text-input)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/text-input/usage)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/text-input/accessibility)
 
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/input)
+## Table of Contents
 
-Text fields enable the user to interact with and input data. A single line field
-is used when the input anticipated by the user is a single line of text as
-opposed to a paragraph.
+- [Overview](#overview)
+- [Read Only](#read-only)
+- [Skeleton](#skeleton)
+- [AI Label](#ai-label)
+- [With Layer](#with-layer)
+- [Component API](#component-api)
+- [CDN](#cdn)
+- [Feedback](#feedback)
 
-## Getting started
+## Overview
 
-Here's a quick example to get you started.
+The `cds-text-input` component enables users to enter free-form text data. The type of text field
+used should reflect the length of the content you expect the user to enter. The
+default text input is for short, one-line content.
 
-### JS (via import)
+<Canvas of={TextInputStories.Default} />
 
-```javascript
-import '@carbon/web-components/es/components/text-input/index.js';
-```
+### Read Only
 
-<Markdown>{`${cdnJs({ components: ['text-input'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
+<Canvas of={TextInputStories.ReadOnly} />
+
+### Skeleton
+
+<Canvas of={TextInputStories.Skeleton} />
 
-### HTML
+### AI Label
 
-```html
-<cds-text-input
-  label="Text input label"
-  helper-text="Optional help text"
-  invalid-text="Error message">
-</cds-text-input>
-```
+<Canvas of={TextInputStories.WithAILabel} />
 
-## Form item
+### With Layer
 
-If the input is part of a form, make sure to import and wrap the input with
-`<cds-form-item>`
+<Canvas of={TextInputStories.WithLayer} />
 
-```javascript
-import '@carbon/web-components/es/components/form/index.js';
-```
+### Password Input
 
-<Markdown>{`${cdnJs({ components: ['form'] })}`}</Markdown>
+Use `type="password"` and `show-password-visibility-toggle` attributes for a password input.
 
-```html
-<cds-form-item>
-  <cds-text-input
-    label="Text input label"
-    helper-text="Optional help text"
-    invalid-text="Error message">
-  </cds-text-input>
-</cds-form-item>
-```
+<Canvas of={TextInputStories.TogglePasswordVisibility} />
 
-## `<cds-text-input>` attributes and properties
+## Component API
 
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<cds-text-input required>`) and `false` means not setting the attribute (e.g.
-`<cds-text-input>` without `required` attribute).
+## `cds-text-input`
 
 <ArgTypes of="cds-text-input" />
+
+## `cds-text-input-skeleton`
+
+<ArgTypes of="cds-text-input-skeleton" />
+
+<Markdown>{`${cdnJs({ components: ['text-input'] })}`}</Markdown>
+
+## 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/web-components/src/components/text-input/text-input.mdx).
diff --git a/packages/web-components/src/components/textarea/docs/overview.mdx b/packages/web-components/src/components/textarea/docs/overview.mdx
deleted file mode 100644
index 313254c5f623..000000000000
--- a/packages/web-components/src/components/textarea/docs/overview.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
-## Live demo
-
-<StorybookDemo
-  tall
-  url="https://www.ibm.com/standards/carbon/carbon-web-components"
-  variants={[
-    {
-      label: 'Default',
-      variant: 'components-textarea--default'
-    },
-    {
-      label: 'Form Item',
-      variant: 'components-textarea--form-item'
-    },
-    {
-      label: 'Without Form Item Wrapper',
-      variant: 'components-textarea--without-form-item-wrapper'
-    }
-  ]}
-/>
diff --git a/packages/web-components/src/components/textarea/textarea-skeleton.ts b/packages/web-components/src/components/textarea/textarea-skeleton.ts
index 5896ae388c2b..adad57ad86f7 100644
--- a/packages/web-components/src/components/textarea/textarea-skeleton.ts
+++ b/packages/web-components/src/components/textarea/textarea-skeleton.ts
@@ -11,6 +11,8 @@ import styles from './textarea.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
+ * @element cds-textarea-skeleton
+ *
  * Skeleton of text area.
  */
 @customElement(`${prefix}-textarea-skeleton`)
diff --git a/packages/web-components/src/components/textarea/textarea.mdx b/packages/web-components/src/components/textarea/textarea.mdx
index 6f37ea970ea0..c8a5d0acfd36 100644
--- a/packages/web-components/src/components/textarea/textarea.mdx
+++ b/packages/web-components/src/components/textarea/textarea.mdx
@@ -1,76 +1,48 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-import * as TextArea from './textarea.stories';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
+import * as TextAreaStories from './textarea.stories';
 
-<Meta of={TextArea} />
+<Meta of={TextAreaStories} />
 
-# Textarea
+# Text Area
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/textarea)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/textarea)
+&nbsp;|&nbsp;
+[Usage guidelines](https://carbondesignsystem.com/components/text-input/usage/#text-area)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/text-input/accessibility)
 
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/textarea)
+## Table of Contents
 
-Text inputs enable the user to interact with and input content and data. This
-component can be used for long and short form entries.
+- [Overview](#overview)
+- [Skeleton](#skeleton)
+- [AI Label](#ai-label)
+- [Component API](#component-api)
+- [CDN](#cdn)
+- [Feedback](#feedback)
 
-Textarea is a multi-line variant of text input.
+## Overview
 
-## Getting started
+<Canvas of={TextAreaStories.Default} />
 
-Here's a quick example to get you started.
-
-### JS (via import)
-
-```javascript
-import '@carbon/web-components/es/components/textarea/index.js';
-```
-
-<Markdown>{`${cdnJs({ components: ['textarea'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
-
-### HTML
-
-```html
-<cds-textarea placeholder="Optional placeholder text" rows="4" cols="50">
-  <span slot="label-text">Label text</span>
-  <span slot="helper-text">Optional helper text</span>
-  <span slot="validity-message">Something isn't right</span>
-</cds-textarea>
-```
-
-## Form item
+## Skeleton
 
-If the textarea is part of a form, make sure to import and wrap the textarea
-with `<cds-form-item>`
+<Canvas of={TextAreaStories.skeleton} />
 
-```javascript
-import '@carbon/web-components/es/components/form/index.js';
-```
+## AI Label
 
-```html
-<cds-form-item>
-  <cds-textarea placeholder="Optional placeholder text" rows="4" cols="50">
-    <span slot="label-text">Label text</span>
-    <span slot="helper-text">Optional helper text</span>
-    <span slot="validity-message">Something isn't right</span>
-  </cds-textarea>
-</cds-form-item>
-```
+<Canvas of={TextAreaStories.WithAILabel} />
 
-## Skeleton
+## Component API
 
-For the skeleton variation, utilize `<cds-textarea-skeleton>`.
+## `cds-textarea`
 
-```html
-<cds-textarea-skeleton></cds-textarea-skeleton>
-```
+<ArgTypes of="cds-textarea" />
 
-## `<cds-textarea>` attributes and properties
+<Markdown>{`${cdnJs({ components: ['textarea'] })}`}</Markdown>
 
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<cds-textarea autofocus>`) and `false` means not setting the attribute (e.g.
-`<cds-textarea>` without `autofocus` attribute).
+## Feedback
 
-<ArgTypes of="cds-textarea" />
+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/web-components/src/components/textarea/textarea.mdx).
diff --git a/packages/web-components/src/components/tile/docs/overview.mdx b/packages/web-components/src/components/tile/docs/overview.mdx
deleted file mode 100644
index 24b027a8d4a9..000000000000
--- a/packages/web-components/src/components/tile/docs/overview.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
-## Live demo
-
-<StorybookDemo
-  tall
-  url="https://www.ibm.com/standards/carbon/carbon-web-components"
-  variants={[
-    {
-      label: 'Default',
-      variant: 'components-tile--default'
-    },
-    {
-      label: 'Clickable',
-      variant: 'components-tile--clickable'
-    },
-    {
-      label: 'Single-selectable',
-      variant: 'components-tile--single-selectable'
-    },
-    {
-      label: 'Multi-selectable',
-      variant: 'components-tile--multi-selectable'
-    },
-    {
-      label: 'Expandable',
-      variant: 'components-tile--expandable'
-    }
-  ]}
-/>
diff --git a/packages/web-components/src/components/tile/tile.mdx b/packages/web-components/src/components/tile/tile.mdx
index c6d3efaccb06..a9937c69d34c 100644
--- a/packages/web-components/src/components/tile/tile.mdx
+++ b/packages/web-components/src/components/tile/tile.mdx
@@ -1,166 +1,87 @@
-import { ArgTypes, Markdown } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
+import * as TileStories from './tile.stories';
 
-# Tile
+<Meta of={TileStories} />
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tile)
-> example implementation.
+# Tile
 
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tile)
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/tile)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/tile/usage)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/tile/accessibility)
 
-Tiles are a highly flexible component for displaying a wide variety of content,
-including informational, getting started, how-to, next steps, and more.
+## Table of Contents
 
-Carbon ships a basic tile structure that responds to the grid. Tiles have no
-pre-set styles for the content within them. You can customize tiles to fit your
-specific use case.
+- [Overview](#overview)
+- [Clickable](#clickable)
+- [Expandable](#expandable)
+- [Expandable with Interactive](#expandable-with-interactive)
+- [Selectable](#selectable)
+- [Radio](#radio)
+- [AI Label](#ai-label)
+- [Experimental Improved Contrast](#experimental-improved-contrast)
+- [Component API](#component-api)
+- [CDN](#cdn)
+- [Feedback](#feedback)
 
-When using a call-to-action (CTA) within a tile, use a secondary button. Primary
-buttons should be reserved for the most important action a user can take on the
-page.
+## Overview
 
-## Getting started
+<Canvas of={TileStories.Default} />
 
-Here's a quick example to get you started.
+## Clickable
 
-### JS (via import)
+<Canvas of={TileStories.clickable} />
 
-```javascript
-import '@carbon/web-components/es/components/tile/index.js';
-```
+#### With Custom Icon
 
-<Markdown>{`${cdnJs({ components: ['tile'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
+<Canvas of={TileStories.clickableWithCustomIcon} />
 
-### HTML
+## Expandable
 
-```html
-<cds-tile>Default tile</cds-tile>
-```
+<Canvas of={TileStories.expandable} />
 
-## Read-only tile (default)
+## Expandable with Interactive
 
-Read-only tiles are used to display information to the user, such as features or
-services offered. Read-only tiles are often seen on marketing pages to promote
-content. These tiles can have internal calls-to-action (CTAs), such as a button
-or a link.
+<Canvas of={TileStories.ExpandableWithInteractive} />
 
-## Clickable tile
+## Selectable
 
-Clickable tiles can be used as navigational items, where the entire tile is a
-clickable state, which redirects the user to a new page. Clickable tiles cannot
-contain separate internal CTAs.
+<Canvas of={TileStories.Selectable} />
 
-```html
-<cds-clickable-tile> Clickable tile </cds-clickable-tile>
-```
+## Multi Select
 
-## `<cds-clickable-tile>` attributes and properties
+<Canvas of={TileStories.MultiSelect} />
 
-<ArgTypes of="cds-clickable-tile" />
+## Radio
 
-## Radio tile
+<Canvas of={TileStories.Radio} />
 
-Radio tiles work like a radio button, where the entire tile is a click target.
-Radio tiles may contain internal CTAs (like links to docs) if the internal CTA
-is given its own click target. Radio tiles work well for presenting options to a
-user in a structured manner, such as a set of pricing plans.
+## Component API
 
-```html
-<cds-tile-group>
-  <cds-radio-tile name="selectable-tile"> Single-select Tile </cds-radio-tile>
-  <cds-radio-tile name="selectable-tile"> Single-select Tile </cds-radio-tile>
-  <cds-radio-tile name="selectable-tile"> Single-select Tile </cds-radio-tile>
-</cds-tile-group>
-```
+## `cds-tile`
+<ArgTypes of="cds-tile" />
 
-## `<cds-radio-tile>` attributes and properties
+## `cds-clickable-tile`
+<ArgTypes of="cds-clickable-tile" />
 
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<cds-radio-tile selected>`) and `false` means not setting the attribute (e.g.
-`<cds-radio-tile>` without `selected` attribute).
+## `cds-expandable-tile`
+<ArgTypes of="cds-expandable-tile" />
 
+## `cds-radio-tile`
 <ArgTypes of="cds-radio-tile" />
 
-## Selectable tile
-
-```html
-<cds-selectable-tile name="selectable-tile">
-  Selectable Tile
-</cds-selectable-tile>
-```
-
-## `<cds-selectable-tile>` attributes and properties and events
-
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<cds-selectable-tile selected>`) and `false` means not setting the attribute
-(e.g. `<cds-selectable-tile>` without `selected` attribute).
-
+## `cds-selectable-tile`
 <ArgTypes of="cds-selectable-tile" />
 
-## Multi Select
+## `cds-tile-group`
+<ArgTypes of="cds-tile-group" />
 
-```html
-<cds-tile-group>
-  <cds-selectable-tile name="selectable-tile">
-    Selectable Tile 1
-  </cds-selectable-tile>
-  <cds-selectable-tile name="selectable-tile2">
-    Selectable Tile 2
-  </cds-selectable-tile>
-  <cds-selectable-tile name="selectable-tile3">
-    Selectable Tile 3
-  </cds-selectable-tile>
-  <cds-tile-group></cds-tile-group
-></cds-tile-group>
-```
-
-## Capturing tile selection
-
-If using the `cds-tile-group` component alongside either Radio or Selectable
-tiles, you can capture the events using an event listener for the following
-event names:
-
-- For radio tiles, capture:
-  - `cds-current-radio-tile-selection`
-- For selectable tiles, capture:
-  - `cds-current-selectable-tile-selections`
-
-```javascript
-document.addEventListener('cds-current-radio-tile-selection', (event) => {
-  // use values from the detail object within the event
-});
-```
-
-## Expandable tile
-
-Expandable tiles are helpful for hiding/showing larger amounts of content to a
-user. They can only be stacked in a single column, and cannot live in a row or
-horizontal grid. When expanded, tiles push content down the page. Expandable
-tiles may contain internal CTAs (like links to docs) if the internal CTA is
-given its own click target.
-
-```html
-<cds-expandable-tile>
-  <cds-tile-above-the-fold-content
-    slot="above-the-fold-content"
-    style="height: 200px">
-    Above the fold content here
-  </cds-tile-above-the-fold-content>
-  <cds-tile-below-the-fold-content style="height: 300px">
-    Below the fold content here
-  </cds-tile-below-the-fold-content>
-</cds-expandable-tile>
-```
-
-If the desired behavior is expanding only upon clicking the button with the
-caret icon, use the `with-interactive` attribute instead.
-
-## `<cds-expandable-tile>` attributes, properties and events
-
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<cds-expandable-tile expanded>`) and `false` means not setting the attribute
-(e.g. `<cds-expandable-tile>` without `expanded` attribute).
+<Markdown>{`${cdnJs({ components: ['tile'] })}`}</Markdown>
 
-<ArgTypes of="cds-expandable-tile" />
+## 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/web-components/src/components/tile/tile.mdx).
diff --git a/packages/web-components/src/components/time-picker/time-picker.mdx b/packages/web-components/src/components/time-picker/time-picker.mdx
index 11383645bba9..d2a05f21b163 100644
--- a/packages/web-components/src/components/time-picker/time-picker.mdx
+++ b/packages/web-components/src/components/time-picker/time-picker.mdx
@@ -1,55 +1,40 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-import * as TimePicker from './time-picker.stories';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
+import * as TimePickerStories from './time-picker.stories';
 
-<Meta of={TimePicker} />
+<Meta of={TimePickerStories} />
 
-# TimePicker
+# Time Picker
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/time-picker)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/time-picker)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/date-picker/usage#time-picker)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/date-picker/accessibility)
 
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/time-picker)
+## Table of Contents
 
-## Getting started
+- [Overview](#overview)
+- [Component API](#component-api)
+- [CDN](#cdn)
+- [Feedback](#feedback)
 
-Here's a quick example to get you started.
+## Overview
 
-### JS (via import)
+<Canvas of={TimePickerStories.Default} />
 
-```javascript
-import '@carbon/web-components/es/components/time-picker/index.js';
-```
+## Component API
 
-<Markdown>{`${cdnJs({ components: ['time-picker'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
-
-### HTML
-
-```html
-<cds-time-picker
-  label-text="Select a time"
-  placeholder="hh:mm"
-  <cds-time-picker-select id="time-picker-select-1" aria-label="Select AM/PM" slot="time-picker-select">
-    <cds-select-item value="AM">AM</cds-select-item>
-    <cds-select-item value="PM" selected>PM</cds-select-item>
-  </cds-time-picker-select>
-  <cds-time-picker-select id="time-picker-select-2" aria-label="Select timezone" slot="time-picker-select">
-    <cds-select-item value="Time zone 1">Time zone 1</cds-select-item>
-    <cds-select-item value="Time zone 2" selected>Time zone 2</cds-select-item>
-  </cds-time-picker-select>
-</cds-time-picker>
-```
+## `cds-time-picker`
+<ArgTypes of="cds-time-picker" />
 
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<cds-time-picker hideLabel>`) and `false` means not setting the attribute (e.g.
-`<cds-time-picker>` without `hideLabel` attribute).
+## `cds-time-picker-select`
+<ArgTypes of="cds-time-picker-select" />
 
-## `<cds-time-picker>` attributes and properties
-
-<ArgTypes of="cds-time-picker"/>
+<Markdown>{`${cdnJs({ components: ['time-picker'] })}`}</Markdown>
 
-## `<cds-time-picker-select>` attributes and properties
+## Feedback
 
-<ArgTypes of="cds-time-picker-select"/>
+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/web-components/src/components/time-picker/time-picker.mdx).


Reviews:
user: login: kennylam
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-22T13:58:37Z
user: login: aagonzales
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-22T17:18:38Z
user: login: ariellalgilmore
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-22T18:00:58Z
user: login: ariellalgilmore
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-22T18:01:22Z
user: login: kennylam
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-22T18:44:07Z
user: login: annawen1
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-22T20:01:16Z

Review comments:
diff_hunk: @@ -1,55 +1,40 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-import * as TimePicker from './time-picker.stories';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
+import * as TimePickerStories from './time-picker.stories';
 
-<Meta of={TimePicker} />
+<Meta of={TimePickerStories} />
 
-# TimePicker
+# Time Picker
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/time-picker)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/time-picker)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/date-picker/usage#time-picker)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/date-picker/accessibility)
 
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/time-picker)
+## Table of Contents
 
-## Getting started
+- [Overview](#overview)
+- [Component API](#component-api)
+- [CDN](#cdn)
+- [Feedback](#feedback)
 
-Here's a quick example to get you started.
+## Overview
 
-### JS (via import)
+<Canvas of={TimePickerStories.Default} />
 
-```javascript
-import '@carbon/web-components/es/components/time-picker/index.js';
-```
+## Component API
 
-<Markdown>{`${cdnJs({ components: ['time-picker'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
-
-### HTML
-
-```html
-<cds-time-picker
-  label-text="Select a time"
-  placeholder="hh:mm"
-  <cds-time-picker-select id="time-picker-select-1" aria-label="Select AM/PM" slot="time-picker-select">
-    <cds-select-item value="AM">AM</cds-select-item>
-    <cds-select-item value="PM" selected>PM</cds-select-item>
-  </cds-time-picker-select>
-  <cds-time-picker-select id="time-picker-select-2" aria-label="Select timezone" slot="time-picker-select">
-    <cds-select-item value="Time zone 1">Time zone 1</cds-select-item>
-    <cds-select-item value="Time zone 2" selected>Time zone 2</cds-select-item>
-  </cds-time-picker-select>
-</cds-time-picker>
-```
+## `<cds-time-picker>`
path: packages/web-components/src/components/time-picker/time-picker.mdx
user: login: kennylam
body: ```suggestion
## `cds-time-picker`
```
created_at: 2025-04-22T13:31:56Z
author_association: MEMBER
diff_hunk: @@ -1,55 +1,40 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-import * as TimePicker from './time-picker.stories';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
+import * as TimePickerStories from './time-picker.stories';
 
-<Meta of={TimePicker} />
+<Meta of={TimePickerStories} />
 
-# TimePicker
+# Time Picker
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/time-picker)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/time-picker)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/date-picker/usage#time-picker)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/date-picker/accessibility)
 
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/time-picker)
+## Table of Contents
 
-## Getting started
+- [Overview](#overview)
+- [Component API](#component-api)
+- [CDN](#cdn)
+- [Feedback](#feedback)
 
-Here's a quick example to get you started.
+## Overview
 
-### JS (via import)
+<Canvas of={TimePickerStories.Default} />
 
-```javascript
-import '@carbon/web-components/es/components/time-picker/index.js';
-```
+## Component API
 
-<Markdown>{`${cdnJs({ components: ['time-picker'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
-
-### HTML
-
-```html
-<cds-time-picker
-  label-text="Select a time"
-  placeholder="hh:mm"
-  <cds-time-picker-select id="time-picker-select-1" aria-label="Select AM/PM" slot="time-picker-select">
-    <cds-select-item value="AM">AM</cds-select-item>
-    <cds-select-item value="PM" selected>PM</cds-select-item>
-  </cds-time-picker-select>
-  <cds-time-picker-select id="time-picker-select-2" aria-label="Select timezone" slot="time-picker-select">
-    <cds-select-item value="Time zone 1">Time zone 1</cds-select-item>
-    <cds-select-item value="Time zone 2" selected>Time zone 2</cds-select-item>
-  </cds-time-picker-select>
-</cds-time-picker>
-```
+## `<cds-time-picker>`
+<ArgTypes of="cds-time-picker" />
 
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<cds-time-picker hideLabel>`) and `false` means not setting the attribute (e.g.
-`<cds-time-picker>` without `hideLabel` attribute).
+## `<cds-time-picker-select>`
path: packages/web-components/src/components/time-picker/time-picker.mdx
user: login: kennylam
body: ```suggestion
## `cds-time-picker-select`
```
created_at: 2025-04-22T13:32:23Z
author_association: MEMBER
diff_hunk: @@ -1,136 +1,67 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
 import * as TabsStories from './tabs.stories';
 
 <Meta of={TabsStories} />
 
 # Tabs
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tabs)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/tabs)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/tabs/usage)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/tabs/accessibility)
 
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tabs)
+## Table of Contents
 
-Tabs are used to quickly navigate between views within the same context.
+- [Overview](#overview)
+- [Line Tabs](#line-tabs)
+- [Contained Tabs](#contained-tabs)
+- [Skeleton](#skeleton)
+- [Component API](#component-api)
+- [CDN](#cdn)
+- [Feedback](#feedback)
 
-## Getting started
+## Overview
 
-Here's a quick example to get you started.
+Use tabs to allow users to navigate easily between views within the same
+context. `cds-tabs` are now more composable, meaning that you have more
+flexibility in what is in rendered inside of `cds-tab` and a tab's panel.
 
-### JS (via import)
+### Line Tabs
 
-```javascript
-import '@carbon/web-components/es/components/tabs/index.js';
-```
+<Canvas of={TabsStories.Default} />
 
-### SCSS (must include with JS import)
+### Contained Tabs
 
-```css
-@use '@carbon/styles/scss/components/tabs';
-```
+<Canvas of={TabsStories.Contained} />
 
-<Markdown>{`${cdnJs({ components: ['tabs'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
-
-### HTML
-
-```html
-<cds-tabs trigger-content="Select an item" value="staging">
-  <cds-tab id="tab-all" target="panel-all" value="all">Option 1</cds-tab>
-  <cds-tab
-    id="tab-cloudFoundry"
-    target="panel-cloudFoundry"
-    disabled
-    value="cloudFoundry"
-    >Option 2</cds-tab
-  >
-  <cds-tab id="tab-staging" target="panel-staging" value="staging"
-    >Option 3</cds-tab
-  >
-  <cds-tab id="tab-dea" target="panel-dea" value="dea">Option 4</cds-tab>
-  <cds-tab id="tab-router" target="panel-router" value="router"
-    >Option 5</cds-tab
-  >
-</cds-tabs>
-<div class="cds-ce-demo-devenv--tab-panels">
-  <div id="panel-all" role="tabpanel" aria-labelledby="tab-all" hidden>
-    <h4>Content for option 1</h4>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat.
-    </p>
-  </div>
-  <div
-    id="panel-cloudFoundry"
-    role="tabpanel"
-    aria-labelledby="tab-cloudFoundry"
-    hidden>
-    <h4>Content for option 2</h4>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat.
-    </p>
-  </div>
-  <div id="panel-staging" role="tabpanel" aria-labelledby="tab-staging" hidden>
-    <h4>Content for option 3</h4>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat.
-    </p>
-  </div>
-  <div id="panel-dea" role="tabpanel" aria-labelledby="tab-dea" hidden>
-    <h4>Content for option 4</h4>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat.
-    </p>
-  </div>
-  <div id="panel-router" role="tabpanel" aria-labelledby="tab-router" hidden>
-    <h4>Content for option 5</h4>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat.
-    </p>
-  </div>
-</div>
-```
-
-## Skeleton
-
-For the skeleton variation, utilize `<cds-tabs-skeleton>` and
-`<cds-tab-skeleton>`.
-
-```html
-<cds-tabs-skeleton>
-  <cds-tab-skeleton></cds-tab-skeleton>
-  <cds-tab-skeleton></cds-tab-skeleton>
-  <cds-tab-skeleton></cds-tab-skeleton>
-  <cds-tab-skeleton></cds-tab-skeleton>
-  <cds-tab-skeleton></cds-tab-skeleton>
-</cds-tabs-skeleton>
-```
-
-## `<cds-tabs>` attributes, properties and events
-
-Note: `cds-content-switcher-*` events are not fired from `<cds-tabs>`.
+### Skeleton
+
+<Canvas of={TabsStories.skeleton} />
+
+## Component API
+
+## `<cds-tabs>`
path: packages/web-components/src/components/tabs/tabs.mdx
user: login: kennylam
body: ```suggestion
## `cds-tabs`
```
created_at: 2025-04-22T13:37:28Z
author_association: MEMBER
diff_hunk: @@ -1,136 +1,67 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
 import * as TabsStories from './tabs.stories';
 
 <Meta of={TabsStories} />
 
 # Tabs
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tabs)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/tabs)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/tabs/usage)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/tabs/accessibility)
 
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tabs)
+## Table of Contents
 
-Tabs are used to quickly navigate between views within the same context.
+- [Overview](#overview)
+- [Line Tabs](#line-tabs)
+- [Contained Tabs](#contained-tabs)
+- [Skeleton](#skeleton)
+- [Component API](#component-api)
+- [CDN](#cdn)
+- [Feedback](#feedback)
 
-## Getting started
+## Overview
 
-Here's a quick example to get you started.
+Use tabs to allow users to navigate easily between views within the same
+context. `cds-tabs` are now more composable, meaning that you have more
+flexibility in what is in rendered inside of `cds-tab` and a tab's panel.
 
-### JS (via import)
+### Line Tabs
 
-```javascript
-import '@carbon/web-components/es/components/tabs/index.js';
-```
+<Canvas of={TabsStories.Default} />
 
-### SCSS (must include with JS import)
+### Contained Tabs
 
-```css
-@use '@carbon/styles/scss/components/tabs';
-```
+<Canvas of={TabsStories.Contained} />
 
-<Markdown>{`${cdnJs({ components: ['tabs'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
-
-### HTML
-
-```html
-<cds-tabs trigger-content="Select an item" value="staging">
-  <cds-tab id="tab-all" target="panel-all" value="all">Option 1</cds-tab>
-  <cds-tab
-    id="tab-cloudFoundry"
-    target="panel-cloudFoundry"
-    disabled
-    value="cloudFoundry"
-    >Option 2</cds-tab
-  >
-  <cds-tab id="tab-staging" target="panel-staging" value="staging"
-    >Option 3</cds-tab
-  >
-  <cds-tab id="tab-dea" target="panel-dea" value="dea">Option 4</cds-tab>
-  <cds-tab id="tab-router" target="panel-router" value="router"
-    >Option 5</cds-tab
-  >
-</cds-tabs>
-<div class="cds-ce-demo-devenv--tab-panels">
-  <div id="panel-all" role="tabpanel" aria-labelledby="tab-all" hidden>
-    <h4>Content for option 1</h4>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat.
-    </p>
-  </div>
-  <div
-    id="panel-cloudFoundry"
-    role="tabpanel"
-    aria-labelledby="tab-cloudFoundry"
-    hidden>
-    <h4>Content for option 2</h4>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat.
-    </p>
-  </div>
-  <div id="panel-staging" role="tabpanel" aria-labelledby="tab-staging" hidden>
-    <h4>Content for option 3</h4>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat.
-    </p>
-  </div>
-  <div id="panel-dea" role="tabpanel" aria-labelledby="tab-dea" hidden>
-    <h4>Content for option 4</h4>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat.
-    </p>
-  </div>
-  <div id="panel-router" role="tabpanel" aria-labelledby="tab-router" hidden>
-    <h4>Content for option 5</h4>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat.
-    </p>
-  </div>
-</div>
-```
-
-## Skeleton
-
-For the skeleton variation, utilize `<cds-tabs-skeleton>` and
-`<cds-tab-skeleton>`.
-
-```html
-<cds-tabs-skeleton>
-  <cds-tab-skeleton></cds-tab-skeleton>
-  <cds-tab-skeleton></cds-tab-skeleton>
-  <cds-tab-skeleton></cds-tab-skeleton>
-  <cds-tab-skeleton></cds-tab-skeleton>
-  <cds-tab-skeleton></cds-tab-skeleton>
-</cds-tabs-skeleton>
-```
-
-## `<cds-tabs>` attributes, properties and events
-
-Note: `cds-content-switcher-*` events are not fired from `<cds-tabs>`.
+### Skeleton
+
+<Canvas of={TabsStories.skeleton} />
+
+## Component API
+
+## `<cds-tabs>`
+
+<ArgTypes of="cds-tabs" />
+
+## `<cds-tabs>`
path: packages/web-components/src/components/tabs/tabs.mdx
user: login: kennylam
body: ```suggestion
```
created_at: 2025-04-22T13:38:49Z
author_association: MEMBER
diff_hunk: @@ -1,78 +1,98 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
 import * as TagStories from './tag.stories';
 
 <Meta of={TagStories} />
 
 # Tag
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tag)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/tag)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/tag/usage)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/tag/accessibility)
 
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tag)
+## Table of Contents
+
+- [Overview](#overview)
+- [Read Only](#read-only)
+- [Dismissible](#dismissible)
+- [Selectable](#selectable)
+- [Operational](#operational)
+- [AI Label](#ai-label)
path: packages/web-components/src/components/tag/tag.mdx
user: login: kennylam
body: ```suggestion
- [With AI Label](#with-ai-label)
```
created_at: 2025-04-22T13:42:44Z
author_association: MEMBER
diff_hunk: @@ -105,17 +172,43 @@ When not to use:
 - Do not use in combination with Dismissable tags. Instead, consider letting the
   user enter an "edit mode" to dismiss tags.
 
+<Canvas of={TagStories.Operational} />
+
 ## With AI Label
 
-Tag with AI label is now stable for Read Only tags. This addition changes the
+`<cds-tag>` with AI label is now stable for Read Only tags. This addition changes the
 visual appearance of the component and introduces an AI explainability feature
 when AI is present in the component.
 
+<Canvas of={TagStories.WithAILabel} />
 
-## `<cds-tag>` attributes and properties
+## Skeleton
 
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<cds-tag disabled>`) and `false` means not setting the attribute (e.g.
-`<cds-tag>` without `disabled` attribute).
+<Canvas
+  of={TagStories.Skeleton}
+/>
 
+## Component API
+
+## `<cds-tag>`
 <ArgTypes of="cds-tag" />
+
+## `<cds-dismissible-tag>`
+<ArgTypes of="cds-dismissible-tag" />
+
+## `<cds-selectable-tag>`
+<ArgTypes of="cds-selectable-tag" />
+
+## `<cds-operational-tag>`
+<ArgTypes of="cds-operational-tag" />
+
+## `<cds-tag-skeleton>`
path: packages/web-components/src/components/tag/tag.mdx
user: login: kennylam
body: ```suggestion
## `cds-tag`
<ArgTypes of="cds-tag" />

## `cds-dismissible-tag`
<ArgTypes of="cds-dismissible-tag" />

## `cds-selectable-tag`
<ArgTypes of="cds-selectable-tag" />

## `cds-operational-tag`
<ArgTypes of="cds-operational-tag" />

## `cds-tag-skeleton`
```
created_at: 2025-04-22T13:44:05Z
author_association: MEMBER
diff_hunk: @@ -1,69 +1,73 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-import * as TextInput from './text-input.stories';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
+import * as TextInputStories from './text-input.stories';
 
-<Meta of={TextInput} />
+<Meta of={TextInputStories} />
 
 # Text Input
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/input)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/text-input)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/text-input/usage)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/text-input/accessibility)
 
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/input)
+## Table of Contents
 
-Text fields enable the user to interact with and input data. A single line field
-is used when the input anticipated by the user is a single line of text as
-opposed to a paragraph.
+- [Overview](#overview)
+- [Fluid](#fluid)
path: packages/web-components/src/components/text-input/text-input.mdx
user: login: kennylam
body: ```suggestion
```
created_at: 2025-04-22T13:48:05Z
author_association: MEMBER
diff_hunk: @@ -1,69 +1,73 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-import * as TextInput from './text-input.stories';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
+import * as TextInputStories from './text-input.stories';
 
-<Meta of={TextInput} />
+<Meta of={TextInputStories} />
 
 # Text Input
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/input)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/text-input)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/text-input/usage)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/text-input/accessibility)
 
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/input)
+## Table of Contents
 
-Text fields enable the user to interact with and input data. A single line field
-is used when the input anticipated by the user is a single line of text as
-opposed to a paragraph.
+- [Overview](#overview)
+- [Fluid](#fluid)
+- [Read Only](#read-only)
+- [Skeleton](#skeleton)
+- [AI Label](#ai-label)
+- [With Layer](#with-layer)
+- [Component API](#component-api)
+- [CDN](#cdn)
+- [Feedback](#feedback)
 
-## Getting started
+## Overview
 
-Here's a quick example to get you started.
+`<cds-text-input>` enable users to enter free-form text data. The type of text field
path: packages/web-components/src/components/text-input/text-input.mdx
user: login: kennylam
body: ```suggestion
The `cds-text-input` component enables users to enter free-form text data. The type of text field
```
created_at: 2025-04-22T13:49:02Z
author_association: MEMBER
diff_hunk: @@ -1,69 +1,73 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-import * as TextInput from './text-input.stories';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
+import * as TextInputStories from './text-input.stories';
 
-<Meta of={TextInput} />
+<Meta of={TextInputStories} />
 
 # Text Input
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/input)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/text-input)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/text-input/usage)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/text-input/accessibility)
 
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/input)
+## Table of Contents
 
-Text fields enable the user to interact with and input data. A single line field
-is used when the input anticipated by the user is a single line of text as
-opposed to a paragraph.
+- [Overview](#overview)
+- [Fluid](#fluid)
+- [Read Only](#read-only)
+- [Skeleton](#skeleton)
+- [AI Label](#ai-label)
+- [With Layer](#with-layer)
+- [Component API](#component-api)
+- [CDN](#cdn)
+- [Feedback](#feedback)
 
-## Getting started
+## Overview
 
-Here's a quick example to get you started.
+`<cds-text-input>` enable users to enter free-form text data. The type of text field
+used should reflect the length of the content you expect the user to enter. The
+default text input is for short, one-line content.
 
-### JS (via import)
+<Canvas of={TextInputStories.Default} />
 
-```javascript
-import '@carbon/web-components/es/components/text-input/index.js';
-```
+### Read Only
 
-<Markdown>{`${cdnJs({ components: ['text-input'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
+<Canvas of={TextInputStories.ReadOnly} />
+
+### Skeleton
+
+<Canvas of={TextInputStories.Skeleton} />
 
-### HTML
+### AI Label
 
-```html
-<cds-text-input
-  label="Text input label"
-  helper-text="Optional help text"
-  invalid-text="Error message">
-</cds-text-input>
-```
+<Canvas of={TextInputStories.WithAILabel} />
 
-## Form item
+### With Layer
 
-If the input is part of a form, make sure to import and wrap the input with
-`<cds-form-item>`
+<Canvas of={TextInputStories.WithLayer} />
 
-```javascript
-import '@carbon/web-components/es/components/form/index.js';
-```
+### Password Input
 
-<Markdown>{`${cdnJs({ components: ['form'] })}`}</Markdown>
+Use `type="password"` and `show-password-visibility-toggle` attributes for a password input.
 
-```html
-<cds-form-item>
-  <cds-text-input
-    label="Text input label"
-    helper-text="Optional help text"
-    invalid-text="Error message">
-  </cds-text-input>
-</cds-form-item>
-```
+<Canvas of={TextInputStories.TogglePasswordVisibility} />
 
-## `<cds-text-input>` attributes and properties
+## Component API
 
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<cds-text-input required>`) and `false` means not setting the attribute (e.g.
-`<cds-text-input>` without `required` attribute).
+## `<cds-text-input>`
 
 <ArgTypes of="cds-text-input" />
+
+## `<cds-text-input-skeleton>`
path: packages/web-components/src/components/text-input/text-input.mdx
user: login: kennylam
body: ```suggestion
## `cds-text-input-skeleton`
```
created_at: 2025-04-22T13:49:54Z
author_association: MEMBER
diff_hunk: @@ -1,69 +1,73 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-import * as TextInput from './text-input.stories';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
+import * as TextInputStories from './text-input.stories';
 
-<Meta of={TextInput} />
+<Meta of={TextInputStories} />
 
 # Text Input
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/input)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/text-input)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/text-input/usage)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/text-input/accessibility)
 
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/input)
+## Table of Contents
 
-Text fields enable the user to interact with and input data. A single line field
-is used when the input anticipated by the user is a single line of text as
-opposed to a paragraph.
+- [Overview](#overview)
+- [Fluid](#fluid)
+- [Read Only](#read-only)
+- [Skeleton](#skeleton)
+- [AI Label](#ai-label)
+- [With Layer](#with-layer)
+- [Component API](#component-api)
+- [CDN](#cdn)
+- [Feedback](#feedback)
 
-## Getting started
+## Overview
 
-Here's a quick example to get you started.
+`<cds-text-input>` enable users to enter free-form text data. The type of text field
+used should reflect the length of the content you expect the user to enter. The
+default text input is for short, one-line content.
 
-### JS (via import)
+<Canvas of={TextInputStories.Default} />
 
-```javascript
-import '@carbon/web-components/es/components/text-input/index.js';
-```
+### Read Only
 
-<Markdown>{`${cdnJs({ components: ['text-input'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
+<Canvas of={TextInputStories.ReadOnly} />
+
+### Skeleton
+
+<Canvas of={TextInputStories.Skeleton} />
 
-### HTML
+### AI Label
 
-```html
-<cds-text-input
-  label="Text input label"
-  helper-text="Optional help text"
-  invalid-text="Error message">
-</cds-text-input>
-```
+<Canvas of={TextInputStories.WithAILabel} />
 
-## Form item
+### With Layer
 
-If the input is part of a form, make sure to import and wrap the input with
-`<cds-form-item>`
+<Canvas of={TextInputStories.WithLayer} />
 
-```javascript
-import '@carbon/web-components/es/components/form/index.js';
-```
+### Password Input
 
-<Markdown>{`${cdnJs({ components: ['form'] })}`}</Markdown>
+Use `type="password"` and `show-password-visibility-toggle` attributes for a password input.
 
-```html
-<cds-form-item>
-  <cds-text-input
-    label="Text input label"
-    helper-text="Optional help text"
-    invalid-text="Error message">
-  </cds-text-input>
-</cds-form-item>
-```
+<Canvas of={TextInputStories.TogglePasswordVisibility} />
 
-## `<cds-text-input>` attributes and properties
+## Component API
 
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<cds-text-input required>`) and `false` means not setting the attribute (e.g.
-`<cds-text-input>` without `required` attribute).
+## `<cds-text-input>`
path: packages/web-components/src/components/text-input/text-input.mdx
user: login: kennylam
body: ```suggestion
## `cds-text-input`
```
created_at: 2025-04-22T13:49:56Z
author_association: MEMBER
diff_hunk: @@ -1,76 +1,52 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-import * as TextArea from './textarea.stories';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
+import * as TextAreaStories from './textarea.stories';
 
-<Meta of={TextArea} />
+<Meta of={TextAreaStories} />
 
-# Textarea
+# Text Area
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/textarea)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/text-area)
path: packages/web-components/src/components/textarea/textarea.mdx
user: login: kennylam
body: ```suggestion
[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/textarea)
```
created_at: 2025-04-22T13:51:24Z
author_association: MEMBER
diff_hunk: @@ -1,76 +1,52 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-import * as TextArea from './textarea.stories';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
+import * as TextAreaStories from './textarea.stories';
 
-<Meta of={TextArea} />
+<Meta of={TextAreaStories} />
 
-# Textarea
+# Text Area
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/textarea)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/text-area)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/text-area/usage)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/text-area/accessibility)
path: packages/web-components/src/components/textarea/textarea.mdx
user: login: kennylam
body: ```suggestion
```

It looks like `textarea` isn't listed in the components section on the Carbon website. @laurenmrice @aagonzales Is this intentional?

If so Ari, we should remove the breadcrumb links from the React docs as well.
created_at: 2025-04-22T13:54:39Z
author_association: MEMBER
diff_hunk: @@ -1,76 +1,52 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-import * as TextArea from './textarea.stories';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
+import * as TextAreaStories from './textarea.stories';
 
-<Meta of={TextArea} />
+<Meta of={TextAreaStories} />
 
-# Textarea
+# Text Area
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/textarea)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/text-area)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/text-area/usage)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/text-area/accessibility)
 
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/textarea)
+## Table of Contents
 
-Text inputs enable the user to interact with and input content and data. This
-component can be used for long and short form entries.
+- [Overview](#overview)
+- [Skeleton](#skeleton)
+- [AI Label](#ai-label)
+- [Component API](#component-api)
+- [CDN](#cdn)
+- [Feedback](#feedback)
 
-Textarea is a multi-line variant of text input.
+## Overview
 
-## Getting started
+<Canvas of={TextAreaStories.Default} />
 
-Here's a quick example to get you started.
-
-### JS (via import)
-
-```javascript
-import '@carbon/web-components/es/components/textarea/index.js';
-```
-
-<Markdown>{`${cdnJs({ components: ['textarea'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
-
-### HTML
+## Skeleton
 
-```html
-<cds-textarea placeholder="Optional placeholder text" rows="4" cols="50">
-  <span slot="label-text">Label text</span>
-  <span slot="helper-text">Optional helper text</span>
-  <span slot="validity-message">Something isn't right</span>
-</cds-textarea>
-```
+<Canvas of={TextAreaStories.skeleton} />
 
-## Form item
+## AI Label
 
-If the textarea is part of a form, make sure to import and wrap the textarea
-with `<cds-form-item>`
+<Canvas of={TextAreaStories.WithAILabel} />
 
-```javascript
-import '@carbon/web-components/es/components/form/index.js';
-```
+## Component API
 
-```html
-<cds-form-item>
-  <cds-textarea placeholder="Optional placeholder text" rows="4" cols="50">
-    <span slot="label-text">Label text</span>
-    <span slot="helper-text">Optional helper text</span>
-    <span slot="validity-message">Something isn't right</span>
-  </cds-textarea>
-</cds-form-item>
-```
+## `<cds-textarea>`
path: packages/web-components/src/components/textarea/textarea.mdx
user: login: kennylam
body: ```suggestion
## `cds-textarea`
```
created_at: 2025-04-22T13:55:15Z
author_association: MEMBER
diff_hunk: @@ -1,76 +1,52 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-import * as TextArea from './textarea.stories';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
+import * as TextAreaStories from './textarea.stories';
 
-<Meta of={TextArea} />
+<Meta of={TextAreaStories} />
 
-# Textarea
+# Text Area
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/textarea)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/text-area)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/text-area/usage)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/text-area/accessibility)
 
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/textarea)
+## Table of Contents
 
-Text inputs enable the user to interact with and input content and data. This
-component can be used for long and short form entries.
+- [Overview](#overview)
+- [Skeleton](#skeleton)
+- [AI Label](#ai-label)
+- [Component API](#component-api)
+- [CDN](#cdn)
+- [Feedback](#feedback)
 
-Textarea is a multi-line variant of text input.
+## Overview
 
-## Getting started
+<Canvas of={TextAreaStories.Default} />
 
-Here's a quick example to get you started.
-
-### JS (via import)
-
-```javascript
-import '@carbon/web-components/es/components/textarea/index.js';
-```
-
-<Markdown>{`${cdnJs({ components: ['textarea'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
-
-### HTML
+## Skeleton
 
-```html
-<cds-textarea placeholder="Optional placeholder text" rows="4" cols="50">
-  <span slot="label-text">Label text</span>
-  <span slot="helper-text">Optional helper text</span>
-  <span slot="validity-message">Something isn't right</span>
-</cds-textarea>
-```
+<Canvas of={TextAreaStories.skeleton} />
 
-## Form item
+## AI Label
 
-If the textarea is part of a form, make sure to import and wrap the textarea
-with `<cds-form-item>`
+<Canvas of={TextAreaStories.WithAILabel} />
 
-```javascript
-import '@carbon/web-components/es/components/form/index.js';
-```
+## Component API
 
-```html
-<cds-form-item>
-  <cds-textarea placeholder="Optional placeholder text" rows="4" cols="50">
-    <span slot="label-text">Label text</span>
-    <span slot="helper-text">Optional helper text</span>
-    <span slot="validity-message">Something isn't right</span>
-  </cds-textarea>
-</cds-form-item>
-```
+## `<cds-textarea>`
 
-## Skeleton
+<ArgTypes of="cds-textarea" />
 
-For the skeleton variation, utilize `<cds-textarea-skeleton>`.
+## `<cds-textarea-skeleton>`
 
-```html
-<cds-textarea-skeleton></cds-textarea-skeleton>
-```
+<ArgTypes of="cds-textarea-skeleton" />
 
-## `<cds-textarea>` attributes and properties
+<Markdown>{`${cdnJs({ components: ['textarea'] })}`}</Markdown>
 
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<cds-textarea autofocus>`) and `false` means not setting the attribute (e.g.
-`<cds-textarea>` without `autofocus` attribute).
+## Feedback
 
-<ArgTypes of="cds-textarea" />
+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/web-components/src/components/text-area/text-area.mdx).
path: packages/web-components/src/components/textarea/textarea.mdx
user: login: kennylam
body: ```suggestion
[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/web-components/src/components/textarea/textarea.mdx).
```
created_at: 2025-04-22T13:55:59Z
author_association: MEMBER
diff_hunk: @@ -1,76 +1,52 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-import * as TextArea from './textarea.stories';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
+import * as TextAreaStories from './textarea.stories';
 
-<Meta of={TextArea} />
+<Meta of={TextAreaStories} />
 
-# Textarea
+# Text Area
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/textarea)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/text-area)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/text-area/usage)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/text-area/accessibility)
 
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/textarea)
+## Table of Contents
 
-Text inputs enable the user to interact with and input content and data. This
-component can be used for long and short form entries.
+- [Overview](#overview)
+- [Skeleton](#skeleton)
+- [AI Label](#ai-label)
+- [Component API](#component-api)
+- [CDN](#cdn)
+- [Feedback](#feedback)
 
-Textarea is a multi-line variant of text input.
+## Overview
 
-## Getting started
+<Canvas of={TextAreaStories.Default} />
 
-Here's a quick example to get you started.
-
-### JS (via import)
-
-```javascript
-import '@carbon/web-components/es/components/textarea/index.js';
-```
-
-<Markdown>{`${cdnJs({ components: ['textarea'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
-
-### HTML
+## Skeleton
 
-```html
-<cds-textarea placeholder="Optional placeholder text" rows="4" cols="50">
-  <span slot="label-text">Label text</span>
-  <span slot="helper-text">Optional helper text</span>
-  <span slot="validity-message">Something isn't right</span>
-</cds-textarea>
-```
+<Canvas of={TextAreaStories.skeleton} />
 
-## Form item
+## AI Label
 
-If the textarea is part of a form, make sure to import and wrap the textarea
-with `<cds-form-item>`
+<Canvas of={TextAreaStories.WithAILabel} />
 
-```javascript
-import '@carbon/web-components/es/components/form/index.js';
-```
+## Component API
 
-```html
-<cds-form-item>
-  <cds-textarea placeholder="Optional placeholder text" rows="4" cols="50">
-    <span slot="label-text">Label text</span>
-    <span slot="helper-text">Optional helper text</span>
-    <span slot="validity-message">Something isn't right</span>
-  </cds-textarea>
-</cds-form-item>
-```
+## `<cds-textarea>`
 
-## Skeleton
+<ArgTypes of="cds-textarea" />
 
-For the skeleton variation, utilize `<cds-textarea-skeleton>`.
+## `<cds-textarea-skeleton>`
 
-```html
-<cds-textarea-skeleton></cds-textarea-skeleton>
-```
+<ArgTypes of="cds-textarea-skeleton" />
path: packages/web-components/src/components/textarea/textarea.mdx
user: login: kennylam
body: ```suggestion
```

There's really no API for this, and the lone, no-description-having `styles` property is kind of confusing. Maybe we just ditch this one?
created_at: 2025-04-22T13:58:32Z
author_association: MEMBER
diff_hunk: @@ -1,76 +1,52 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-import * as TextArea from './textarea.stories';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
+import * as TextAreaStories from './textarea.stories';
 
-<Meta of={TextArea} />
+<Meta of={TextAreaStories} />
 
-# Textarea
+# Text Area
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/textarea)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/text-area)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/text-area/usage)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/text-area/accessibility)
path: packages/web-components/src/components/textarea/textarea.mdx
user: login: aagonzales
body: Oh yeah `text area` doesn't have its own page, its grouped in with `text input`: https://carbondesignsystem.com/components/text-input/usage/#text-area 
created_at: 2025-04-22T17:18:38Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,76 +1,52 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-import * as TextArea from './textarea.stories';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
+import * as TextAreaStories from './textarea.stories';
 
-<Meta of={TextArea} />
+<Meta of={TextAreaStories} />
 
-# Textarea
+# Text Area
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/textarea)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/text-area)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/text-area/usage)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/text-area/accessibility)
path: packages/web-components/src/components/textarea/textarea.mdx
user: login: ariellalgilmore
body: thanks updated!
created_at: 2025-04-22T18:00:57Z
author_association: MEMBER
diff_hunk: @@ -1,76 +1,52 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-import * as TextArea from './textarea.stories';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
+import * as TextAreaStories from './textarea.stories';
 
-<Meta of={TextArea} />
+<Meta of={TextAreaStories} />
 
-# Textarea
+# Text Area
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/textarea)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/text-area)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/text-area/usage)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/text-area/accessibility)
 
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/textarea)
+## Table of Contents
 
-Text inputs enable the user to interact with and input content and data. This
-component can be used for long and short form entries.
+- [Overview](#overview)
+- [Skeleton](#skeleton)
+- [AI Label](#ai-label)
+- [Component API](#component-api)
+- [CDN](#cdn)
+- [Feedback](#feedback)
 
-Textarea is a multi-line variant of text input.
+## Overview
 
-## Getting started
+<Canvas of={TextAreaStories.Default} />
 
-Here's a quick example to get you started.
-
-### JS (via import)
-
-```javascript
-import '@carbon/web-components/es/components/textarea/index.js';
-```
-
-<Markdown>{`${cdnJs({ components: ['textarea'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
-
-### HTML
+## Skeleton
 
-```html
-<cds-textarea placeholder="Optional placeholder text" rows="4" cols="50">
-  <span slot="label-text">Label text</span>
-  <span slot="helper-text">Optional helper text</span>
-  <span slot="validity-message">Something isn't right</span>
-</cds-textarea>
-```
+<Canvas of={TextAreaStories.skeleton} />
 
-## Form item
+## AI Label
 
-If the textarea is part of a form, make sure to import and wrap the textarea
-with `<cds-form-item>`
+<Canvas of={TextAreaStories.WithAILabel} />
 
-```javascript
-import '@carbon/web-components/es/components/form/index.js';
-```
+## Component API
 
-```html
-<cds-form-item>
-  <cds-textarea placeholder="Optional placeholder text" rows="4" cols="50">
-    <span slot="label-text">Label text</span>
-    <span slot="helper-text">Optional helper text</span>
-    <span slot="validity-message">Something isn't right</span>
-  </cds-textarea>
-</cds-form-item>
-```
+## `<cds-textarea>`
 
-## Skeleton
+<ArgTypes of="cds-textarea" />
 
-For the skeleton variation, utilize `<cds-textarea-skeleton>`.
+## `<cds-textarea-skeleton>`
 
-```html
-<cds-textarea-skeleton></cds-textarea-skeleton>
-```
+<ArgTypes of="cds-textarea-skeleton" />
path: packages/web-components/src/components/textarea/textarea.mdx
user: login: ariellalgilmore
body: deleted and removed others with the same only styles propery
created_at: 2025-04-22T18:01:22Z
author_association: MEMBER

PR comments:
user: login: netlify[bot]
created_at: 2025-04-21T18:21:27Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *v11-carbon-web-components* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | c75844b24889e8fa4ef8ea9c87c6753afa0d6d4f |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/v11-carbon-web-components/deploys/6807d93817f4be00084071cb |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-19194--v11-carbon-web-components.netlify.app](https://deploy-preview-19194--v11-carbon-web-components.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTE5MTk0LS12MTEtY2FyYm9uLXdlYi1jb21wb25lbnRzLm5ldGxpZnkuYXBwIn0.ZvZmqwExreMqHIERL2UVGV8JWGwwyZu0gbFWwvvzNK0)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [v11-carbon-web-components Preview](https://deploy-preview-19194--v11-carbon-web-components.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/v11-carbon-web-components/configuration/notifications#deploy-webhooks)._
author_association: NONE
user: login: netlify[bot]
created_at: 2025-04-21T18:25:14Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *v11-carbon-react* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | c75844b24889e8fa4ef8ea9c87c6753afa0d6d4f |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/v11-carbon-react/deploys/6807d93813e0ee0008fb13c7 |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-19194--v11-carbon-react.netlify.app](https://deploy-preview-19194--v11-carbon-react.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTE5MTk0LS12MTEtY2FyYm9uLXJlYWN0Lm5ldGxpZnkuYXBwIn0.z92IstShIX9fWeTAazJOkQfuFlIBH3Q5hHw014aM35k)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [v11-carbon-react Preview](https://deploy-preview-19194--v11-carbon-react.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/v11-carbon-react/configuration/notifications#deploy-webhooks)._
author_association: NONE
user: login: codecov[bot]
created_at: 2025-04-21T18:38:55Z
body: ## [Codecov](https://app.codecov.io/gh/carbon-design-system/carbon/pull/19194?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=carbon-design-system) Report
All modified and coverable lines are covered by tests :white_check_mark:
> Project coverage is 84.37%. Comparing base [(`d123efe`)](https://app.codecov.io/gh/carbon-design-system/carbon/commit/d123efe94a3476370c3e33fcf3abf589272ceae0?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=carbon-design-system) to head [(`c75844b`)](https://app.codecov.io/gh/carbon-design-system/carbon/commit/c75844b24889e8fa4ef8ea9c87c6753afa0d6d4f?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=carbon-design-system).
> Report is 28 commits behind head on main.

<details><summary>Additional details and impacted files</summary>


```diff
@@           Coverage Diff           @@
##             main   #19194   +/-   ##
=======================================
  Coverage   84.37%   84.37%           
=======================================
  Files         388      385    -3     
  Lines       14547    14539    -8     
  Branches     4753     4802   +49     
=======================================
- Hits        12274    12268    -6     
+ Misses       2114     2112    -2     
  Partials      159      159           
```

</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/carbon-design-system/carbon/pull/19194?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=carbon-design-system).   
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=carbon-design-system).

<details><summary> :rocket: New features to boost your workflow: </summary>

- :snowflake: [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
- :package: [JS Bundle Analysis](https://docs.codecov.com/docs/javascript-bundle-analysis): Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
</details>
author_association: NONE
user: login: carbon-automation[bot]
created_at: 2025-04-23T20:04:30Z
body: Hey there! v11.81.0 was just released that references this issue/PR.
author_association: CONTRIBUTOR